@dreamtree-org/twreact-ui 1.3.0 → 1.3.1

package/dist/esm/components/utility/Sortable.js

@@ -0,0 +1,190 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useMemo, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
+import { cn } from '../../utils/cn.js';
+import { DEFAULT_SORTABLE_MESSAGES, useSortableKeyboard, useSortablePointer } from '../../hooks/useSortable.js';
+
+var _excluded = ["items", "onReorder", "renderItem", "getKey", "getItemLabel", "disabled", "handle", "orientation", "as", "itemClassName", "messages", "className"];
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var defaultGetKey = function defaultGetKey(item, index) {
+  var _ref, _item$id;
+  return (_ref = (_item$id = item === null || item === void 0 ? void 0 : item.id) !== null && _item$id !== void 0 ? _item$id : item === null || item === void 0 ? void 0 : item.key) !== null && _ref !== void 0 ? _ref : index;
+};
+var defaultGetItemLabel = function defaultGetItemLabel(item, index) {
+  var _ref2, _ref3, _item$label;
+  return typeof item === "string" || typeof item === "number" ? String(item) : (_ref2 = (_ref3 = (_item$label = item === null || item === void 0 ? void 0 : item.label) !== null && _item$label !== void 0 ? _item$label : item === null || item === void 0 ? void 0 : item.title) !== null && _ref3 !== void 0 ? _ref3 : item === null || item === void 0 ? void 0 : item.name) !== null && _ref2 !== void 0 ? _ref2 : "Item ".concat(index + 1);
+};
+function arrayMove(list, from, to) {
+  var next = list.slice();
+  var _next$splice = next.splice(from, 1),
+    _next$splice2 = _slicedToArray(_next$splice, 1),
+    moved = _next$splice2[0];
+  next.splice(to, 0, moved);
+  return next;
+}
+var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var _ref4$items = _ref4.items,
+    items = _ref4$items === void 0 ? [] : _ref4$items,
+    onReorder = _ref4.onReorder,
+    renderItem = _ref4.renderItem,
+    _ref4$getKey = _ref4.getKey,
+    getKey = _ref4$getKey === void 0 ? defaultGetKey : _ref4$getKey,
+    _ref4$getItemLabel = _ref4.getItemLabel,
+    getItemLabel = _ref4$getItemLabel === void 0 ? defaultGetItemLabel : _ref4$getItemLabel,
+    _ref4$disabled = _ref4.disabled,
+    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
+    _ref4$handle = _ref4.handle,
+    handle = _ref4$handle === void 0 ? false : _ref4$handle,
+    _ref4$orientation = _ref4.orientation,
+    orientation = _ref4$orientation === void 0 ? "vertical" : _ref4$orientation,
+    _ref4$as = _ref4.as,
+    List = _ref4$as === void 0 ? "ul" : _ref4$as,
+    itemClassName = _ref4.itemClassName,
+    messages = _ref4.messages,
+    className = _ref4.className,
+    rest = _objectWithoutProperties(_ref4, _excluded);
+  var instructionsId = "sortable-instructions-".concat(useId());
+  var text = useMemo(function () {
+    return _objectSpread2(_objectSpread2({}, DEFAULT_SORTABLE_MESSAGES), messages);
+  }, [messages]);
+  var axis = orientation === "horizontal" ? "horizontal" : "vertical";
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    draft = _useState2[0],
+    setDraft = _useState2[1];
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    announcement = _useState4[0],
+    setAnnouncement = _useState4[1];
+  var nodes = useRef(new Map());
+  var itemKeys = items.map(function (item, i) {
+    return getKey(item, i);
+  });
+  var byKey = new Map(itemKeys.map(function (k, i) {
+    return [k, {
+      item: items[i],
+      index: i
+    }];
+  }));
+  var keys = draft && draft.length === itemKeys.length && draft.every(function (k) {
+    return byKey.has(k);
+  }) ? draft : itemKeys;
+  var labelFor = function labelFor(key) {
+    var entry = byKey.get(key);
+    return entry ? getItemLabel(entry.item, entry.index) : "";
+  };
+  var announce = function announce(kind) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    return setAnnouncement(text[kind].apply(text, args));
+  };
+  var commit = function commit(from, to) {
+    setDraft(null);
+    if (from < 0 || from === to) return;
+    onReorder === null || onReorder === void 0 || onReorder(arrayMove(items, from, to), {
+      from: from,
+      to: to
+    });
+  };
+  var nodeFor = useCallback(function (key) {
+    return nodes.current.get(key);
+  }, []);
+  var keyboard = useSortableKeyboard({
+    keys: keys,
+    setDraft: setDraft,
+    commit: commit,
+    announce: announce,
+    labelFor: labelFor,
+    orientation: axis
+  });
+  var pointer = useSortablePointer({
+    keys: keys,
+    setDraft: setDraft,
+    commit: commit,
+    nodeFor: nodeFor,
+    orientation: axis,
+    disabled: disabled
+  });
+  // Moving DOM nodes can drop focus; keep it on the item being carried.
+  useIsomorphicLayoutEffect(function () {
+    var node = keyboard.grabbed !== null ? nodes.current.get(keyboard.grabbed) : null;
+    if (node && document.activeElement !== node) node.focus();
+  }, [keyboard.grabbed, draft]);
+  var moveBy = function moveBy(index, delta) {
+    var to = index + delta;
+    if (to < 0 || to >= items.length) return;
+    onReorder === null || onReorder === void 0 || onReorder(arrayMove(items, index, to), {
+      from: index,
+      to: to
+    });
+    setAnnouncement(text.moved(labelFor(itemKeys[index]), to + 1, items.length));
+  };
+  var isNativeList = List === "ul" || List === "ol";
+  var ItemTag = isNativeList ? "li" : "div";
+  return jsxs(Fragment, {
+    children: [jsx(List, _objectSpread2(_objectSpread2({
+      ref: ref,
+      className: cn("flex", axis === "horizontal" ? "flex-row gap-2" : "flex-col gap-2", className),
+      "data-orientation": axis,
+      role: isNativeList ? undefined : "list"
+    }, rest), {}, {
+      children: keys.map(function (key, index) {
+        var _byKey$get = byKey.get(key),
+          item = _byKey$get.item,
+          originalIndex = _byKey$get.index;
+        var isGrabbed = keyboard.grabbed === key;
+        var isDragging = pointer.dragging === key;
+        var startDrag = disabled ? undefined : pointer.startFor(key);
+        return jsx(ItemTag, {
+          ref: function ref(node) {
+            if (node) nodes.current.set(key, node);else nodes.current["delete"](key);
+          },
+          tabIndex: disabled ? undefined : 0,
+          "aria-roledescription": "sortable item",
+          "aria-describedby": disabled ? undefined : instructionsId,
+          role: isNativeList ? undefined : "listitem",
+          "data-dragging": isDragging || undefined,
+          "data-grabbed": isGrabbed || undefined,
+          onKeyDown: disabled ? undefined : keyboard.keyDownFor(key),
+          onBlur: function onBlur(e) {
+            if (isGrabbed && e.relatedTarget && !e.currentTarget.contains(e.relatedTarget)) keyboard.cancel();
+          },
+          onPointerDown: handle ? undefined : startDrag,
+          className: cn("rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-900", !disabled && !handle && "cursor-grab touch-none select-none", (isGrabbed || isDragging) && "relative z-10 shadow-lg ring-2 ring-primary-500 opacity-90", itemClassName),
+          children: renderItem ? renderItem(item, {
+            index: index,
+            originalIndex: originalIndex,
+            isDragging: isDragging,
+            isGrabbed: isGrabbed,
+            handleProps: {
+              onPointerDown: startDrag,
+              "data-sortable-handle": "",
+              className: "cursor-grab touch-none select-none"
+            },
+            moveUp: function moveUp() {
+              return moveBy(originalIndex, -1);
+            },
+            moveDown: function moveDown() {
+              return moveBy(originalIndex, 1);
+            }
+          }) : labelFor(key)
+        }, key);
+      })
+    })), jsx("span", {
+      id: instructionsId,
+      className: "sr-only",
+      children: text.instructions
+    }), jsx("span", {
+      role: "status",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      className: "sr-only",
+      children: announcement
+    })]
+  });
+});
+Sortable.displayName = "Sortable";
+
+export { Sortable as default };

package/dist/esm/components/utility/Stepper.js

@@ -0,0 +1,101 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+import { Check } from 'lucide-react';
+
+var _excluded = ["steps", "currentStep", "orientation", "variant", "onStepClick", "className"];
+var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$steps = _ref.steps,
+    steps = _ref$steps === void 0 ? [] : _ref$steps,
+    _ref$currentStep = _ref.currentStep,
+    currentStep = _ref$currentStep === void 0 ? 0 : _ref$currentStep,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation;
+    _ref.variant;
+    var onStepClick = _ref.onStepClick,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var getStepStatus = function getStepStatus(stepIndex) {
+    if (stepIndex < currentStep) return 'completed';
+    if (stepIndex === currentStep) return 'current';
+    return 'upcoming';
+  };
+  var statusColors = {
+    completed: {
+      circle: 'bg-primary-600 text-white',
+      line: 'bg-primary-600',
+      text: 'text-primary-600'
+    },
+    current: {
+      circle: 'bg-primary-600 text-white',
+      line: 'bg-gray-300',
+      text: 'text-primary-600'
+    },
+    upcoming: {
+      circle: 'bg-gray-300 text-primary-500',
+      line: 'bg-gray-300',
+      text: 'text-primary-500'
+    }
+  };
+  return jsx("nav", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('flex', {
+      'flex-col': orientation === 'vertical',
+      'flex-row': orientation === 'horizontal'
+    }, className),
+    "aria-label": "Progress"
+  }, props), {}, {
+    children: steps.map(function (step, stepIndex) {
+      var status = getStepStatus(stepIndex);
+      var isLast = stepIndex === steps.length - 1;
+      var colors = statusColors[status];
+      return jsxs("div", {
+        className: cn('flex items-center', {
+          'flex-col': orientation === 'horizontal',
+          'flex-row': orientation === 'vertical',
+          'mb-8': orientation === 'vertical' && !isLast,
+          'mr-8': orientation === 'horizontal' && !isLast
+        }),
+        children: [jsxs("div", {
+          className: "flex items-center",
+          children: [jsx("button", {
+            className: cn('flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2', colors.circle, {
+              'cursor-pointer': onStepClick && stepIndex <= currentStep,
+              'cursor-default': !onStepClick || stepIndex > currentStep
+            }),
+            onClick: function onClick() {
+              return onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(step, stepIndex);
+            },
+            disabled: !onStepClick || stepIndex > currentStep,
+            "aria-current": status === 'current' ? 'step' : undefined,
+            children: status === 'completed' ? jsx(Check, {
+              className: "h-4 w-4"
+            }) : stepIndex + 1
+          }), !isLast && jsx("div", {
+            className: cn('bg-gray-300', {
+              'h-0.5 w-8': orientation === 'horizontal',
+              'h-8 w-0.5': orientation === 'vertical'
+            })
+          })]
+        }), jsxs("div", {
+          className: cn('flex flex-col', {
+            'ml-4': orientation === 'vertical',
+            'mt-2': orientation === 'horizontal'
+          }),
+          children: [jsx("span", {
+            className: cn('text-sm font-medium', colors.text),
+            children: step.title
+          }), step.description && jsx("span", {
+            className: "text-xs text-primary-500",
+            children: step.description
+          })]
+        })]
+      }, step.id || stepIndex);
+    })
+  }));
+});
+Stepper.displayName = 'Stepper';
+
+export { Stepper as default };

package/dist/esm/hooks/useApi.js

@@ -0,0 +1,169 @@
+'use client';
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, toConsumableArray as _toConsumableArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useState } from 'react';
+import axios from 'axios';
+
+var useApi = function useApi() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _props$BASE_URL = props.BASE_URL,
+    BASE_URL = _props$BASE_URL === void 0 ? null : _props$BASE_URL,
+    _props$DEFAULT_HEADER = props.DEFAULT_HEADERS,
+    DEFAULT_HEADERS = _props$DEFAULT_HEADER === void 0 ? {} : _props$DEFAULT_HEADER,
+    _props$apiMap = props.apiMap,
+    apiMap = _props$apiMap === void 0 ? {} : _props$apiMap,
+    _props$createRequestI = props.createRequestInstance,
+    createRequestInstance = _props$createRequestI === void 0 ? function () {
+      var baseURL = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var defaultHeaders = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      return axios.create({
+        baseURL: baseURL || undefined,
+        headers: defaultHeaders
+      });
+    } : _props$createRequestI,
+    _props$sendRequest = props.sendRequest,
+    sendRequest = _props$sendRequest === void 0 ? function (requestInstance, method, url, data, headers) {
+      var methodName = method.toUpperCase();
+      if (["GET", "HEAD", "DELETE"].includes(methodName)) {
+        return requestInstance.request({
+          method: methodName,
+          url: url,
+          headers: headers
+        });
+      } else {
+        return requestInstance.request({
+          method: methodName,
+          url: url,
+          data: data,
+          headers: headers
+        });
+      }
+    } : _props$sendRequest;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    lastRequest = _useState8[0],
+    setLastRequest = _useState8[1];
+  var fetchData = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(url, method, data, headers) {
+      var options,
+        _options$needLoading,
+        needLoading,
+        requestInstance,
+        response,
+        _error,
+        _args = arguments,
+        _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            options = _args.length > 4 && _args[4] !== undefined ? _args[4] : {};
+            _options$needLoading = options.needLoading, needLoading = _options$needLoading === void 0 ? true : _options$needLoading;
+            requestInstance = createRequestInstance(BASE_URL, DEFAULT_HEADERS);
+            if (needLoading) setLoading(true);
+            _context.p = 1;
+            _context.n = 2;
+            return sendRequest(requestInstance, method, url, data, headers);
+          case 2:
+            response = _context.v;
+            setData(response.data);
+            return _context.a(2, response.data);
+          case 3:
+            _context.p = 3;
+            _t = _context.v;
+            _error = _t;
+            setError(_error);
+            throw _error;
+          case 4:
+            _context.p = 4;
+            if (needLoading) setLoading(false);
+            return _context.f(4);
+          case 5:
+            return _context.a(2);
+        }
+      }, _callee, null, [[1, 3, 4, 5]]);
+    }));
+    return function fetchData(_x, _x2, _x3, _x4) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var callApi = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(apiKey, args, needLoading) {
+      var apiResolve, _apiResolve, url, method, headers, payload;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
+          case 0:
+            apiResolve = apiMap[apiKey];
+            if (apiResolve) {
+              _context2.n = 1;
+              break;
+            }
+            throw new Error("API ".concat(apiKey, " not found"));
+          case 1:
+            _apiResolve = apiResolve.apply(void 0, _toConsumableArray(args)), url = _apiResolve.url, method = _apiResolve.method, headers = _apiResolve.headers, payload = _apiResolve.data;
+            _context2.p = 2;
+            _context2.n = 3;
+            return fetchData(url, method, payload, headers, {
+              needLoading: needLoading
+            });
+          case 3:
+            return _context2.a(2, _context2.v);
+          case 4:
+            _context2.p = 4;
+            setLastRequest(apiKey);
+            return _context2.f(4);
+          case 5:
+            return _context2.a(2);
+        }
+      }, _callee2, null, [[2,, 4, 5]]);
+    }));
+    return function callApi(_x5, _x6, _x7) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  /**
+   * Resolve `apiMap[apiKey]` with ONE argument (`data`) and send it.
+   * For map entries that take several positional arguments
+   * (e.g. `(id, data) => ({...})`) use `fetchApiWith` instead.
+   */
+  var fetchApi = function fetchApi(apiKey, data) {
+    var needLoading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    return callApi(apiKey, [data], needLoading);
+  };
+  /**
+   * Resolve `apiMap[apiKey]` with every element of `args` spread as
+   * positional arguments: `fetchApiWith('updateUser', [id, body])` calls
+   * `apiMap.updateUser(id, body)`.
+   */
+  var fetchApiWith = function fetchApiWith(apiKey) {
+    var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    if (!Array.isArray(args)) {
+      return Promise.reject(new TypeError("useApi: fetchApiWith('".concat(apiKey, "', args) expects args to be an array")));
+    }
+    var _options$needLoading2 = options.needLoading,
+      needLoading = _options$needLoading2 === void 0 ? true : _options$needLoading2;
+    return callApi(apiKey, args, needLoading);
+  };
+  return {
+    data: data,
+    error: error,
+    loading: loading,
+    fetchData: fetchData,
+    fetchApi: fetchApi,
+    fetchApiWith: fetchApiWith,
+    lastRequest: lastRequest
+  };
+};
+
+export { useApi };

package/dist/esm/hooks/useControllableState.js

@@ -0,0 +1,32 @@
+'use client';
+import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useCallback } from 'react';
+import { useLatestRef } from './useLatestRef.js';
+
+/**
+ * Internal (not exported). Controlled/uncontrolled state in one place: when
+ * `value` is defined the component is controlled and `setValue` only notifies
+ * `onChange`; otherwise it also updates internal state.
+ */
+function useControllableState(_ref) {
+  var value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    internal = _useState2[0],
+    setInternal = _useState2[1];
+  var isControlled = value !== undefined;
+  var onChangeRef = useLatestRef(onChange);
+  var setValue = useCallback(function (next) {
+    var _onChangeRef$current;
+    if (!isControlled) setInternal(next);
+    for (var _len = arguments.length, extra = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      extra[_key - 1] = arguments[_key];
+    }
+    (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 || _onChangeRef$current.call.apply(_onChangeRef$current, [onChangeRef, next].concat(extra));
+  }, [isControlled, onChangeRef]);
+  return [isControlled ? value : internal, setValue];
+}
+
+export { useControllableState };

package/dist/esm/hooks/useFocusTrap.js

@@ -0,0 +1,85 @@
+'use client';
+import { useEffect } from 'react';
+import { useLatestRef } from './useLatestRef.js';
+
+// Internal (not exported from the package). Shared focus management for the
+// overlay primitives (Drawer, Popover, Tour). Dialog keeps its own copy so its
+// behavior is untouched.
+var FOCUSABLE_SELECTOR = ["a[href]", "button:not([disabled])", "textarea:not([disabled])", "input:not([disabled])", "select:not([disabled])", '[tabindex]:not([tabindex="-1"])'].join(",");
+var getFocusable = function getFocusable(root) {
+  return root ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(function (el) {
+    return el.getAttribute("aria-hidden") !== "true";
+  }) : [];
+};
+// Only the most recently opened overlay reacts to Escape / Tab, so a Popover
+// opened inside a Drawer closes on its own without also closing the Drawer.
+var layerStack = [];
+var isTopLayer = function isTopLayer(token) {
+  return layerStack[layerStack.length - 1] === token;
+};
+function cycleFocus(e, panel) {
+  var focusables = getFocusable(panel);
+  if (focusables.length === 0) {
+    e.preventDefault();
+    panel.focus();
+    return;
+  }
+  var first = focusables[0];
+  var last = focusables[focusables.length - 1];
+  var active = document.activeElement;
+  var outside = !panel.contains(active) || active === panel;
+  if (e.shiftKey && (active === first || outside)) {
+    e.preventDefault();
+    last.focus();
+  } else if (!e.shiftKey && (active === last || outside)) {
+    e.preventDefault();
+    first.focus();
+  }
+}
+/**
+ * Moves focus into `containerRef` while `active`, restores it to the previously
+ * focused element afterwards (unless the user moved focus elsewhere), routes
+ * Escape to `onEscape`, and — when `trap` — keeps Tab cycling inside.
+ */
+function useFocusTrap(containerRef, _ref) {
+  var active = _ref.active,
+    onEscape = _ref.onEscape,
+    _ref$trap = _ref.trap,
+    trap = _ref$trap === void 0 ? true : _ref$trap,
+    initialFocusRef = _ref.initialFocusRef,
+    focusKey = _ref.focusKey;
+  var onEscapeRef = useLatestRef(onEscape);
+  var initialFocus = useLatestRef(initialFocusRef);
+  useEffect(function () {
+    if (!active) return undefined;
+    var token = {};
+    layerStack.push(token);
+    var opener = document.activeElement;
+    var container = containerRef.current;
+    var handleKeyDown = function handleKeyDown(e) {
+      var _onEscapeRef$current;
+      if (!isTopLayer(token)) return;
+      if (e.key === "Escape") (_onEscapeRef$current = onEscapeRef.current) === null || _onEscapeRef$current === void 0 || _onEscapeRef$current.call(onEscapeRef, e);else if (e.key === "Tab" && trap && containerRef.current) cycleFocus(e, containerRef.current);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return function () {
+      var _opener$focus;
+      document.removeEventListener("keydown", handleKeyDown);
+      layerStack.splice(layerStack.indexOf(token), 1);
+      var now = document.activeElement;
+      var focusIsLost = !now || now === document.body || !now.isConnected;
+      var focusInside = container === null || container === void 0 ? void 0 : container.contains(now);
+      if ((focusIsLost || focusInside) && opener !== null && opener !== void 0 && opener.isConnected) (_opener$focus = opener.focus) === null || _opener$focus === void 0 || _opener$focus.call(opener);
+    };
+  }, [active, trap, containerRef, onEscapeRef]);
+  useEffect(function () {
+    var _ref2, _initialFocus$current, _initialFocus$current2, _target$focus;
+    if (!active) return;
+    var panel = containerRef.current;
+    if (!panel) return;
+    var target = (_ref2 = (_initialFocus$current = (_initialFocus$current2 = initialFocus.current) === null || _initialFocus$current2 === void 0 ? void 0 : _initialFocus$current2.current) !== null && _initialFocus$current !== void 0 ? _initialFocus$current : getFocusable(panel)[0]) !== null && _ref2 !== void 0 ? _ref2 : panel;
+    (_target$focus = target.focus) === null || _target$focus === void 0 || _target$focus.call(target);
+  }, [active, focusKey, containerRef, initialFocus]);
+}
+
+export { FOCUSABLE_SELECTOR, getFocusable, useFocusTrap };

package/dist/esm/hooks/useLatestRef.js

@@ -0,0 +1,20 @@
+'use client';
+import { useRef, useLayoutEffect, useEffect } from 'react';
+
+// useLayoutEffect warns during SSR; fall back to useEffect on the server.
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+/**
+ * Internal (not exported from the package): a ref that always holds the latest
+ * `value`. Lets an effect call the newest consumer callback (e.g. `onChange`)
+ * without listing it as a dependency, so a parent passing an inline function
+ * does not re-run the effect on every render.
+ */
+function useLatestRef(value) {
+  var ref = useRef(value);
+  useIsomorphicLayoutEffect(function () {
+    ref.current = value;
+  });
+  return ref;
+}
+
+export { useLatestRef };