@new-black/lyra 1.8.0 → 1.9.0

package/dist/lyra174.js

@@ -1,261 +1,342 @@
-import { ButtonContext as M } from "./lyra104.js";
-import { CalendarContext as ee, RangeCalendarContext as te } from "./lyra172.js";
-import { useContextProps as S, useSlottedContext as V, useSlot as W, removeDataAttributes as _, useRenderProps as w, Provider as y } from "./lyra106.js";
-import { DateFieldContext as z } from "./lyra173.js";
-import { OverlayTriggerStateContext as E, DialogContext as T } from "./lyra93.js";
-import { FieldErrorContext as G } from "./lyra183.js";
-import { FormContext as N } from "./lyra389.js";
-import { GroupContext as A } from "./lyra175.js";
-import { LabelContext as L } from "./lyra195.js";
-import { PopoverContext as j } from "./lyra156.js";
-import { TextContext as q } from "./lyra130.js";
-import { filterDOMProps as H } from "./lyra202.js";
-import { useResizeObserver as J } from "./lyra314.js";
-import c, { createContext as p, forwardRef as K, useRef as Q, useState as U, useCallback as X } from "react";
-import { useDatePickerState as ae } from "./lyra393.js";
-import { useDateRangePickerState as ie } from "./lyra394.js";
-import { useDatePicker as oe } from "./lyra232.js";
-import { useDateRangePicker as re } from "./lyra245.js";
-import { useFocusRing as Y } from "./lyra262.js";
-const se = /* @__PURE__ */ p(null), de = /* @__PURE__ */ p(null), le = /* @__PURE__ */ p(null), ne = /* @__PURE__ */ p(null), Ie = /* @__PURE__ */ K(function(e, i) {
-  [e, i] = S(e, i, se);
-  let { validationBehavior: $ } = V(N) || {};
-  var o, r;
-  let s = (r = (o = e.validationBehavior) !== null && o !== void 0 ? o : $) !== null && r !== void 0 ? r : "native", t = ae({
-    ...e,
-    validationBehavior: s
-  }), a = Q(null), [u, b] = W(), { groupProps: P, labelProps: v, fieldProps: m, buttonProps: x, dialogProps: g, calendarProps: h, descriptionProps: D, errorMessageProps: R, ...C } = oe({
-    ..._(e),
-    label: b,
-    validationBehavior: s
-  }, t, a), [F, k] = U(null), B = X(() => {
-    a.current && k(a.current.offsetWidth + "px");
-  }, []);
-  J({
-    ref: a,
-    onResize: B
+import { CollectionRendererContext as T, SectionContext as Z } from "./lyra378.js";
+import { useContextProps as ee, useRenderProps as h, Provider as z, useSlot as te } from "./lyra121.js";
+import { DragAndDropContext as S, DropIndicatorContext as oe, useRenderDropIndicator as K, useDndPersistedKeys as re } from "./lyra395.js";
+import { HeaderContext as ae } from "./lyra392.js";
+import { SeparatorContext as de } from "./lyra126.js";
+import { TextContext as le } from "./lyra131.js";
+import { UNSTABLE_InternalAutocompleteContext as ie } from "./lyra377.js";
+import { createLeafComponent as ne, CollectionBuilder as se, Collection as ce } from "./lyra379.js";
+import { mergeProps as O } from "./lyra144.js";
+import { mergeRefs as fe } from "./lyra122.js";
+import { filterDOMProps as _ } from "./lyra202.js";
+import { useObjectRef as w } from "./lyra123.js";
+import l, { createContext as U, forwardRef as j, useContext as p, useEffect as q, useMemo as H, useRef as B } from "react";
+import { useOption as pe } from "./lyra298.js";
+import { useListBox as ue } from "./lyra296.js";
+import { useListBoxSection as $e } from "./lyra300.js";
+import { useHover as ge } from "./lyra275.js";
+import { useLocale as be } from "./lyra91.js";
+import { useCollator as me } from "./lyra270.js";
+import { ListKeyboardDelegate as ve } from "./lyra339.js";
+import { useFocusRing as De } from "./lyra262.js";
+import { FocusScope as xe } from "./lyra236.js";
+import { useListState as ye } from "./lyra396.js";
+const W = /* @__PURE__ */ U(null), C = /* @__PURE__ */ U(null), Qe = /* @__PURE__ */ j(function(e, o) {
+  [e, o] = ee(e, o, W);
+  let t = p(C);
+  return t ? /* @__PURE__ */ l.createElement(G, {
+    state: t,
+    props: e,
+    listBoxRef: o
+  }) : /* @__PURE__ */ l.createElement(se, {
+    content: /* @__PURE__ */ l.createElement(ce, e)
+  }, (a) => /* @__PURE__ */ l.createElement(Pe, {
+    props: e,
+    listBoxRef: o,
+    collection: a
+  }));
+});
+function Pe({ props: r, listBoxRef: e, collection: o }) {
+  r = {
+    ...r,
+    collection: o,
+    children: null,
+    items: null
+  };
+  let { layoutDelegate: t } = p(T), { filterFn: a, collectionProps: i, collectionRef: d } = p(ie) || {};
+  e = w(H(() => fe(e, d !== void 0 ? d : null), [
+    d,
+    e
+  ]));
+  let n = H(() => a ? o.filter(a) : o, [
+    o,
+    a
+  ]), c = ye({
+    ...r,
+    collection: n,
+    layoutDelegate: t
   });
-  let { focusProps: O, isFocused: l, isFocusVisible: d } = Y({
-    within: !0
-  }), n = w({
-    ...e,
-    values: {
-      state: t,
-      isFocusWithin: l,
-      isFocusVisible: d,
-      isDisabled: e.isDisabled || !1,
-      isInvalid: t.isInvalid,
-      isOpen: t.isOpen
+  return /* @__PURE__ */ l.createElement(G, {
+    state: c,
+    props: {
+      ...r,
+      ...i
     },
-    defaultClassName: "react-aria-DatePicker"
-  }), f = H(e);
-  return delete f.id, /* @__PURE__ */ c.createElement(y, {
+    listBoxRef: e
+  });
+}
+function G({ state: r, props: e, listBoxRef: o }) {
+  let { dragAndDropHooks: t, layout: a = "stack", orientation: i = "vertical" } = e, { collection: d, selectionManager: n } = r, c = !!(t != null && t.useDraggableCollectionState), $ = !!(t != null && t.useDroppableCollectionState), { direction: u } = be(), { disabledBehavior: b, disabledKeys: s } = n, m = me({
+    usage: "search",
+    sensitivity: "base"
+  }), { isVirtualized: x, layoutDelegate: g, dropTargetDelegate: f, CollectionRoot: y } = p(T), D = H(() => e.keyboardDelegate || new ve({
+    collection: d,
+    collator: m,
+    ref: o,
+    disabledKeys: s,
+    disabledBehavior: b,
+    layout: a,
+    orientation: i,
+    direction: u,
+    layoutDelegate: g
+  }), [
+    d,
+    m,
+    o,
+    b,
+    s,
+    i,
+    u,
+    e.keyboardDelegate,
+    a,
+    g
+  ]), { listBoxProps: k } = ue({
+    ...e,
+    shouldSelectOnPressUp: c || e.shouldSelectOnPressUp,
+    keyboardDelegate: D,
+    isVirtualized: x
+  }, r, o), J = B(c), Q = B($);
+  q(() => {
+    J.current !== c && console.warn("Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior."), Q.current !== $ && console.warn("Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.");
+  }, [
+    c,
+    $
+  ]);
+  let L, v, P, E = !1, A = null, M = B(null);
+  if (c && t) {
+    L = t.useDraggableCollectionState({
+      collection: d,
+      selectionManager: n,
+      preview: t.renderDragPreview ? M : void 0
+    }), t.useDraggableCollection({}, L, o);
+    let I = t.DragPreview;
+    A = t.renderDragPreview ? /* @__PURE__ */ l.createElement(I, {
+      ref: M
+    }, t.renderDragPreview) : null;
+  }
+  if ($ && t) {
+    v = t.useDroppableCollectionState({
+      collection: d,
+      selectionManager: n
+    });
+    let I = t.dropTargetDelegate || f || new t.ListDropTargetDelegate(d, o, {
+      orientation: i,
+      layout: a,
+      direction: u
+    });
+    P = t.useDroppableCollection({
+      keyboardDelegate: D,
+      dropTargetDelegate: I
+    }, v, o), E = v.isDropTarget({
+      type: "root"
+    });
+  }
+  let { focusProps: X, isFocused: F, isFocusVisible: R } = De(), V = {
+    isDropTarget: E,
+    isEmpty: r.collection.size === 0,
+    isFocused: F,
+    isFocusVisible: R,
+    layout: e.layout || "stack",
+    state: r
+  }, Y = h({
+    className: e.className,
+    style: e.style,
+    defaultClassName: "react-aria-ListBox",
+    values: V
+  }), N = null;
+  return r.collection.size === 0 && e.renderEmptyState && (N = /* @__PURE__ */ l.createElement("div", {
+    // eslint-disable-next-line
+    role: "option",
+    style: {
+      display: "contents"
+    }
+  }, e.renderEmptyState(V))), /* @__PURE__ */ l.createElement(xe, null, /* @__PURE__ */ l.createElement("div", {
+    ..._(e),
+    ...O(k, X, P == null ? void 0 : P.collectionProps),
+    ...Y,
+    ref: o,
+    slot: e.slot || void 0,
+    onScroll: e.onScroll,
+    "data-drop-target": E || void 0,
+    "data-empty": r.collection.size === 0 || void 0,
+    "data-focused": F || void 0,
+    "data-focus-visible": R || void 0,
+    "data-layout": e.layout || "stack",
+    "data-orientation": e.orientation || "vertical"
+  }, /* @__PURE__ */ l.createElement(z, {
     values: [
       [
-        le,
-        t
+        W,
+        e
       ],
       [
-        A,
-        {
-          ...P,
-          ref: a,
-          isInvalid: t.isInvalid
-        }
+        C,
+        r
       ],
       [
-        z,
-        m
-      ],
-      [
-        M,
+        S,
         {
-          ...x,
-          isPressed: t.isOpen
+          dragAndDropHooks: t,
+          dragState: L,
+          dropState: v
         }
       ],
       [
-        L,
+        de,
         {
-          ...v,
-          ref: u,
-          elementType: "span"
+          elementType: "div"
         }
       ],
       [
-        ee,
-        h
-      ],
-      [
-        E,
-        t
-      ],
-      [
-        j,
+        oe,
         {
-          trigger: "DatePicker",
-          triggerRef: a,
-          placement: "bottom start",
-          style: {
-            "--trigger-width": F
-          }
+          render: Se
         }
       ],
       [
-        T,
-        g
-      ],
-      [
-        q,
+        Z,
         {
-          slots: {
-            description: D,
-            errorMessage: R
-          }
+          name: "ListBoxSection",
+          render: he
         }
-      ],
-      [
-        G,
-        C
       ]
     ]
-  }, /* @__PURE__ */ c.createElement("div", {
-    ...O,
-    ...f,
-    ...n,
-    ref: i,
-    slot: e.slot || void 0,
-    "data-focus-within": l || void 0,
-    "data-invalid": t.isInvalid || void 0,
-    "data-focus-visible": d || void 0,
-    "data-disabled": e.isDisabled || void 0,
-    "data-open": t.isOpen || void 0
-  }));
-}), Me = /* @__PURE__ */ K(function(e, i) {
-  [e, i] = S(e, i, de);
-  let { validationBehavior: $ } = V(N) || {};
-  var o, r;
-  let s = (r = (o = e.validationBehavior) !== null && o !== void 0 ? o : $) !== null && r !== void 0 ? r : "native", t = ie({
-    ...e,
-    validationBehavior: s
-  }), a = Q(null), [u, b] = W(), { groupProps: P, labelProps: v, startFieldProps: m, endFieldProps: x, buttonProps: g, dialogProps: h, calendarProps: D, descriptionProps: R, errorMessageProps: C, ...F } = re({
-    ..._(e),
-    label: b,
-    validationBehavior: s
-  }, t, a), [k, B] = U(null), O = X(() => {
-    a.current && B(a.current.offsetWidth + "px");
-  }, []);
-  J({
-    ref: a,
-    onResize: O
+  }, /* @__PURE__ */ l.createElement(y, {
+    collection: d,
+    scrollRef: o,
+    persistedKeys: re(n, t, v),
+    renderDropIndicator: K(t, v)
+  })), N, A));
+}
+function he(r, e, o, t = "react-aria-ListBoxSection") {
+  let a = p(C), { dragAndDropHooks: i, dropState: d } = p(S), { CollectionBranch: n } = p(T), [c, $] = te();
+  var u;
+  let { headingProps: b, groupProps: s } = $e({
+    heading: $,
+    "aria-label": (u = r["aria-label"]) !== null && u !== void 0 ? u : void 0
+  }), m = h({
+    defaultClassName: t,
+    className: r.className,
+    style: r.style,
+    values: {}
   });
-  let { focusProps: l, isFocused: d, isFocusVisible: n } = Y({
-    within: !0
-  }), f = w({
+  return /* @__PURE__ */ l.createElement("section", {
+    ..._(r),
+    ...s,
+    ...m,
+    ref: e
+  }, /* @__PURE__ */ l.createElement(ae.Provider, {
+    value: {
+      ...b,
+      ref: c
+    }
+  }, /* @__PURE__ */ l.createElement(n, {
+    collection: a.collection,
+    parent: o,
+    renderDropIndicator: K(i, d)
+  })));
+}
+const Xe = /* @__PURE__ */ ne("item", function(e, o, t) {
+  let a = w(o), i = p(C), { dragAndDropHooks: d, dragState: n, dropState: c } = p(S), { optionProps: $, labelProps: u, descriptionProps: b, ...s } = pe({
+    key: t.key,
+    "aria-label": e == null ? void 0 : e["aria-label"]
+  }, i, a), { hoverProps: m, isHovered: x } = ge({
+    isDisabled: !s.allowsSelection && !s.hasAction,
+    onHoverStart: t.props.onHoverStart,
+    onHoverChange: t.props.onHoverChange,
+    onHoverEnd: t.props.onHoverEnd
+  }), g = null;
+  n && d && (g = d.useDraggableItem({
+    key: t.key
+  }, n));
+  let f = null;
+  c && d && (f = d.useDroppableItem({
+    target: {
+      type: "item",
+      key: t.key,
+      dropPosition: "on"
+    }
+  }, c, a));
+  let y = n && n.isDragging(t.key), D = h({
     ...e,
+    id: void 0,
+    children: e.children,
+    defaultClassName: "react-aria-ListBoxItem",
     values: {
-      state: t,
-      isFocusWithin: d,
-      isFocusVisible: n,
-      isDisabled: e.isDisabled || !1,
-      isInvalid: t.isInvalid,
-      isOpen: t.isOpen
-    },
-    defaultClassName: "react-aria-DateRangePicker"
-  }), I = H(e);
-  return delete I.id, /* @__PURE__ */ c.createElement(y, {
+      ...s,
+      isHovered: x,
+      selectionMode: i.selectionManager.selectionMode,
+      selectionBehavior: i.selectionManager.selectionBehavior,
+      allowsDragging: !!n,
+      isDragging: y,
+      isDropTarget: f == null ? void 0 : f.isDropTarget
+    }
+  });
+  q(() => {
+    t.textValue || console.warn("A `textValue` prop is required for <ListBoxItem> elements with non-plain text children in order to support accessibility features such as type to select.");
+  }, [
+    t.textValue
+  ]);
+  let k = e.href ? "a" : "div";
+  return /* @__PURE__ */ l.createElement(k, {
+    ...O($, m, g == null ? void 0 : g.dragProps, f == null ? void 0 : f.dropProps),
+    ...D,
+    ref: a,
+    "data-allows-dragging": !!n || void 0,
+    "data-selected": s.isSelected || void 0,
+    "data-disabled": s.isDisabled || void 0,
+    "data-hovered": x || void 0,
+    "data-focused": s.isFocused || void 0,
+    "data-focus-visible": s.isFocusVisible || void 0,
+    "data-pressed": s.isPressed || void 0,
+    "data-dragging": y || void 0,
+    "data-drop-target": (f == null ? void 0 : f.isDropTarget) || void 0,
+    "data-selection-mode": i.selectionManager.selectionMode === "none" ? void 0 : i.selectionManager.selectionMode
+  }, /* @__PURE__ */ l.createElement(z, {
     values: [
       [
-        ne,
-        t
-      ],
-      [
-        A,
-        {
-          ...P,
-          ref: a,
-          isInvalid: t.isInvalid
-        }
-      ],
-      [
-        M,
-        {
-          ...g,
-          isPressed: t.isOpen
-        }
-      ],
-      [
-        L,
-        {
-          ...v,
-          ref: u,
-          elementType: "span"
-        }
-      ],
-      [
-        te,
-        D
-      ],
-      [
-        E,
-        t
-      ],
-      [
-        j,
-        {
-          trigger: "DateRangePicker",
-          triggerRef: a,
-          placement: "bottom start",
-          style: {
-            "--trigger-width": k
-          }
-        }
-      ],
-      [
-        T,
-        h
-      ],
-      [
-        z,
-        {
-          slots: {
-            start: m,
-            end: x
-          }
-        }
-      ],
-      [
-        q,
+        le,
         {
           slots: {
-            description: R,
-            errorMessage: C
+            label: u,
+            description: b
           }
         }
-      ],
-      [
-        G,
-        F
       ]
     ]
-  }, /* @__PURE__ */ c.createElement("div", {
-    ...l,
-    ...I,
-    ...f,
-    ref: i,
-    slot: e.slot || void 0,
-    "data-focus-within": d || void 0,
-    "data-invalid": t.isInvalid || void 0,
-    "data-focus-visible": n || void 0,
-    "data-disabled": e.isDisabled || void 0,
-    "data-open": t.isOpen || void 0
-  }));
+  }, D.children));
 });
+function Se(r, e) {
+  e = w(e);
+  let { dragAndDropHooks: o, dropState: t } = p(S), { dropIndicatorProps: a, isHidden: i, isDropTarget: d } = o.useDropIndicator(r, t, e);
+  return i ? null : /* @__PURE__ */ l.createElement(ke, {
+    ...r,
+    dropIndicatorProps: a,
+    isDropTarget: d,
+    ref: e
+  });
+}
+function Ce(r, e) {
+  let { dropIndicatorProps: o, isDropTarget: t, ...a } = r, i = h({
+    ...a,
+    defaultClassName: "react-aria-DropIndicator",
+    values: {
+      isDropTarget: t
+    }
+  });
+  return /* @__PURE__ */ l.createElement("div", {
+    ...o,
+    ...i,
+    // eslint-disable-next-line
+    role: "option",
+    ref: e,
+    "data-drop-target": t || void 0
+  });
+}
+const ke = /* @__PURE__ */ j(Ce);
 export {
-  Ie as DatePicker,
-  se as DatePickerContext,
-  le as DatePickerStateContext,
-  Me as DateRangePicker,
-  de as DateRangePickerContext,
-  ne as DateRangePickerStateContext
+  Qe as ListBox,
+  W as ListBoxContext,
+  Xe as ListBoxItem,
+  C as ListStateContext
 };