sanity
Version:
Sanity is a real-time content infrastructure with a scalable, hosted backend featuring a Graph Oriented Query Language (GROQ), asset pipelines and fast edge caches
1,040 lines (1,026 loc) • 1.74 MB
JavaScript
"use strict";
var jsxRuntime = require("react/jsx-runtime"), React = require("react"), flatten$1 = require("lodash/flatten.js"), reactRx = require("react-rx"), rxjs = require("rxjs"), operators = require("rxjs/operators"), isEqual$1 = require("lodash/isEqual.js"), resizeObserver$1 = require("@juggle/resize-observer"), createPubSub = require("nano-pubsub");
require("lodash/throttle.js");
var isString$1 = require("lodash/isString.js"), bifurClient = require("@sanity/bifur-client"), client = require("@sanity/client"), ui = require("@sanity/ui"), startCase = require("lodash/startCase.js"), reactIs = require("react-is"), icons = require("@sanity/icons"), uniqueId = require("lodash/uniqueId.js"), styled = require("styled-components"), getJsonStream = require("./getJsonStream.js"), history$1 = require("history"), i18next = require("i18next"), reactI18next = require("react-i18next"), isPlainObject = require("lodash/isPlainObject.js"), schema = require("@sanity/schema"), _internal = require("@sanity/schema/_internal"), cloneDeep = require("lodash/cloneDeep.js"), get = require("lodash/get.js"), types = require("@sanity/types"), legacyDateFormat = require("@sanity/util/legacyDateFormat"), memoize$1 = require("lodash/memoize.js"), client$1 = require("@sanity/util/client"), concurrencyLimiter = require("@sanity/util/concurrency-limiter"), uniqBy = require("lodash/uniqBy.js"), DataLoader = require("dataloader"), PathUtils = require("@sanity/util/paths"), deepCompare = require("react-fast-compare"), debounce = require("lodash/debounce.js"), theme = require("@sanity/ui/theme"), sortBy = require("lodash/sortBy.js"), reactVirtual = require("@tanstack/react-virtual"), throttle = require("lodash/throttle"), observableCallback = require("observable-callback"), portableTextEditor = require("@sanity/portable-text-editor"), color = require("@sanity/color"), dateFns = require("date-fns"), omit = require("lodash/omit.js"), diffMatchPatch$1 = require("@sanity/diff-match-patch"), orderBy = require("lodash/orderBy.js"), assetUtils = require("@sanity/asset-utils"), imageUrlBuilder = require("@sanity/image-url"), withSelector = require("use-sync-external-store/with-selector"), escapeRegExp$1 = require("lodash/escapeRegExp.js"), framerMotion = require("framer-motion"), FocusLock = require("react-focus-lock"), uniq = require("lodash/uniq.js"), xor = require("lodash/xor.js"), sanityDiffPatch = require("sanity-diff-patch"), shallowEquals = require("shallow-equals"), router = require("sanity/router"), useDevicePixelRatio = require("use-device-pixel-ratio"), classNames = require("classnames"), groupBy = require("lodash/groupBy.js"), scrollIntoView = require("scroll-into-view-if-needed"), compact = require("lodash/compact.js"), intersection = require("lodash/intersection.js"), keyBy = require("lodash/keyBy.js"), partition = require("lodash/partition.js"), toLower = require("lodash/toLower.js"), union = require("lodash/union.js"), words = require("lodash/words.js"), flow = require("lodash/flow.js"), trim = require("lodash/trim.js"), isFinite = require("lodash/isFinite.js"), uuid = require("@sanity/uuid"), mutator = require("@sanity/mutator"), jsonReduce = require("json-reduce"), rxjsExhaustmapWithTrailing = require("rxjs-exhaustmap-with-trailing"), content = require("@sanity/util/content"), isEqual$2 = require("lodash/isEqual"), startCase$1 = require("lodash/startCase"), server = require("react-dom/server"), intersection$1 = require("lodash/intersection"), isEmpty$1 = require("lodash/isEmpty"), debug$3 = require("debug"), getRandomValues = require("get-random-values-esm"), capitalize = require("lodash/capitalize.js"), core = require("@dnd-kit/core"), modifiers = require("@dnd-kit/modifiers"), sortable = require("@dnd-kit/sortable"), utilities = require("@dnd-kit/utilities"), speakingurl = require("speakingurl"), difference = require("lodash/difference.js"), react = require("@sanity/telemetry/react"), telemetry = require("@sanity/telemetry"), blockTools = require("@sanity/block-tools"), find = require("lodash/find.js");
require("lodash/castArray.js");
var pick = require("lodash/pick.js"), identity = require("lodash/identity.js"), values = require("lodash/values.js"), assignWith = require("lodash/assignWith.js");
require("polished");
var exif = require("exif-component"), groqJs = require("groq-js"), operators$1 = require("rxjs-etc/operators"), mendoza = require("mendoza"), diff = require("@sanity/diff"), nanoid = require("nanoid"), sample = require("lodash/sample.js"), raf = require("raf"), color2k = require("color2k");
require("react-dom/client");
var Refractor = require("react-refractor"), bash = require("refractor/lang/bash"), javascript = require("refractor/lang/javascript"), json = require("refractor/lang/json"), jsx2 = require("refractor/lang/jsx"), typescript = require("refractor/lang/typescript"), react$1 = require("@portabletext/react"), logos = require("@sanity/logos"), generateHelpUrl = require("@sanity/generate-help-url"), useHotModuleReload = require("use-hot-module-reload"), arrify = require("arrify"), isHotkey = require("is-hotkey"), upperFirst = require("lodash/upperFirst.js"), isValidDate = require("date-fns/isValid"), range = require("lodash/range.js"), isObject = require("lodash/isObject.js"), findIndex$1 = require("lodash/findIndex.js"), clone = require("lodash/clone.js");
function _interopDefaultCompat(e) {
return e && typeof e == "object" && "default" in e ? e : { default: e };
}
function _interopNamespaceCompat(e) {
if (e && typeof e == "object" && "default" in e)
return e;
var n = /* @__PURE__ */ Object.create(null);
return e && Object.keys(e).forEach(function(k) {
if (k !== "default") {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: !0,
get: function() {
return e[k];
}
});
}
}), n.default = e, Object.freeze(n);
}
var flatten__default = /* @__PURE__ */ _interopDefaultCompat(flatten$1), isEqual__default = /* @__PURE__ */ _interopDefaultCompat(isEqual$1), createPubSub__default = /* @__PURE__ */ _interopDefaultCompat(createPubSub), isString__default = /* @__PURE__ */ _interopDefaultCompat(isString$1), startCase__default = /* @__PURE__ */ _interopDefaultCompat(startCase), uniqueId__default = /* @__PURE__ */ _interopDefaultCompat(uniqueId), styled__default = /* @__PURE__ */ _interopDefaultCompat(styled), isPlainObject__default = /* @__PURE__ */ _interopDefaultCompat(isPlainObject), cloneDeep__default = /* @__PURE__ */ _interopDefaultCompat(cloneDeep), get__default = /* @__PURE__ */ _interopDefaultCompat(get), legacyDateFormat__namespace = /* @__PURE__ */ _interopNamespaceCompat(legacyDateFormat), memoize__default = /* @__PURE__ */ _interopDefaultCompat(memoize$1), uniqBy__default = /* @__PURE__ */ _interopDefaultCompat(uniqBy), DataLoader__default = /* @__PURE__ */ _interopDefaultCompat(DataLoader), PathUtils__namespace = /* @__PURE__ */ _interopNamespaceCompat(PathUtils), deepCompare__default = /* @__PURE__ */ _interopDefaultCompat(deepCompare), debounce__default = /* @__PURE__ */ _interopDefaultCompat(debounce), sortBy__default = /* @__PURE__ */ _interopDefaultCompat(sortBy), throttle__default = /* @__PURE__ */ _interopDefaultCompat(throttle), omit__default = /* @__PURE__ */ _interopDefaultCompat(omit), orderBy__default = /* @__PURE__ */ _interopDefaultCompat(orderBy), imageUrlBuilder__default = /* @__PURE__ */ _interopDefaultCompat(imageUrlBuilder), escapeRegExp__default = /* @__PURE__ */ _interopDefaultCompat(escapeRegExp$1), FocusLock__default = /* @__PURE__ */ _interopDefaultCompat(FocusLock), uniq__default = /* @__PURE__ */ _interopDefaultCompat(uniq), xor__default = /* @__PURE__ */ _interopDefaultCompat(xor), shallowEquals__default = /* @__PURE__ */ _interopDefaultCompat(shallowEquals), classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames), groupBy__default = /* @__PURE__ */ _interopDefaultCompat(groupBy), scrollIntoView__default = /* @__PURE__ */ _interopDefaultCompat(scrollIntoView), compact__default = /* @__PURE__ */ _interopDefaultCompat(compact), intersection__default = /* @__PURE__ */ _interopDefaultCompat(intersection), keyBy__default = /* @__PURE__ */ _interopDefaultCompat(keyBy), partition__default = /* @__PURE__ */ _interopDefaultCompat(partition), toLower__default = /* @__PURE__ */ _interopDefaultCompat(toLower), union__default = /* @__PURE__ */ _interopDefaultCompat(union), words__default = /* @__PURE__ */ _interopDefaultCompat(words), flow__default = /* @__PURE__ */ _interopDefaultCompat(flow), trim__default = /* @__PURE__ */ _interopDefaultCompat(trim), isFinite__default = /* @__PURE__ */ _interopDefaultCompat(isFinite), isEqual__default$1 = /* @__PURE__ */ _interopDefaultCompat(isEqual$2), startCase__default$1 = /* @__PURE__ */ _interopDefaultCompat(startCase$1), intersection__default$1 = /* @__PURE__ */ _interopDefaultCompat(intersection$1), isEmpty__default = /* @__PURE__ */ _interopDefaultCompat(isEmpty$1), debug__default = /* @__PURE__ */ _interopDefaultCompat(debug$3), getRandomValues__default = /* @__PURE__ */ _interopDefaultCompat(getRandomValues), capitalize__default = /* @__PURE__ */ _interopDefaultCompat(capitalize), speakingurl__default = /* @__PURE__ */ _interopDefaultCompat(speakingurl), difference__default = /* @__PURE__ */ _interopDefaultCompat(difference), find__default = /* @__PURE__ */ _interopDefaultCompat(find), pick__default = /* @__PURE__ */ _interopDefaultCompat(pick), identity__default = /* @__PURE__ */ _interopDefaultCompat(identity), values__default = /* @__PURE__ */ _interopDefaultCompat(values), assignWith__default = /* @__PURE__ */ _interopDefaultCompat(assignWith), exif__default = /* @__PURE__ */ _interopDefaultCompat(exif), sample__default = /* @__PURE__ */ _interopDefaultCompat(sample), raf__default = /* @__PURE__ */ _interopDefaultCompat(raf), Refractor__default = /* @__PURE__ */ _interopDefaultCompat(Refractor), bash__default = /* @__PURE__ */ _interopDefaultCompat(bash), javascript__default = /* @__PURE__ */ _interopDefaultCompat(javascript), json__default = /* @__PURE__ */ _interopDefaultCompat(json), jsx2__default = /* @__PURE__ */ _interopDefaultCompat(jsx2), typescript__default = /* @__PURE__ */ _interopDefaultCompat(typescript), arrify__default = /* @__PURE__ */ _interopDefaultCompat(arrify), isHotkey__default = /* @__PURE__ */ _interopDefaultCompat(isHotkey), upperFirst__default = /* @__PURE__ */ _interopDefaultCompat(upperFirst), isValidDate__default = /* @__PURE__ */ _interopDefaultCompat(isValidDate), range__default = /* @__PURE__ */ _interopDefaultCompat(range), isObject__default = /* @__PURE__ */ _interopDefaultCompat(isObject), findIndex__default = /* @__PURE__ */ _interopDefaultCompat(findIndex$1), clone__default = /* @__PURE__ */ _interopDefaultCompat(clone);
const ConnectorContext = React.createContext({
isReviewChangesOpen: !1,
onOpenReviewChanges: () => {
},
onSetFocus: () => {
}
});
function createStore() {
const reportedValues = /* @__PURE__ */ new Map(), { publish: publish2, subscribe } = createPubSub__default.default(), debouncedPublish = debounce__default.default(publish2, 10, { trailing: !0 }), read2 = () => Array.from(reportedValues.entries());
function add(id2, value) {
reportedValues.has(id2), reportedValues.set(id2, value), debouncedPublish(read2());
}
function update(id2, value) {
reportedValues.has(id2), reportedValues.set(id2, value), debouncedPublish(read2());
}
function remove2(id2) {
reportedValues.has(id2), reportedValues.delete(id2), debouncedPublish(read2());
}
return {
add,
remove: remove2,
update,
read: read2,
subscribe
};
}
function isFunc(value) {
return typeof value == "function";
}
function read(value) {
return isFunc(value) ? value() : value;
}
const noop$4 = () => {
};
function createUseReporter(Context2) {
return function(id2, value, isEqual2 = Object.is) {
const { add, update, remove: remove2 } = React.useContext(Context2), previous = React.useRef();
React.useLayoutEffect(() => {
if (id2 === null)
return noop$4;
const current = read(value);
return add(id2, current), previous.current = current, () => {
remove2(id2);
};
}, [add, id2, remove2, value]), React.useLayoutEffect(() => {
const current = read(value);
typeof previous.current < "u" && !isEqual2(previous.current, current) && id2 !== null && update(id2, current), previous.current = current;
});
};
}
let didWarn = !1;
const useReporterGuard = (id2) => {
didWarn || console.warn(
new Error(
`No context provided for reporter. Make sure that the component calling "useReporter(${id2}, ...)", is wrapped in a <Tracker> element`
)
), didWarn = !0;
};
function useReportedValueGuard() {
return didWarn || console.warn(
new Error(
'No context provided for reporter. Make sure that the component calling "useReportedValues()", is wrapped inside a <Tracker> element'
)
), didWarn = !0, [];
}
const useSubscribeGuard = () => (didWarn || console.warn(
new Error(
'No context provided for reporter. Make sure that the component calling "useReportedValues()", is wrapped inside a <Tracker> element'
)
), didWarn = !0, () => {
}), DEFAULT_CONTEXT = {
add: useReporterGuard,
update: useReporterGuard,
remove: useReporterGuard,
subscribe: useSubscribeGuard,
read: useReportedValueGuard
};
let id$1 = 0;
const getNextId = () => ++id$1;
function createTrackerScope() {
const Context2 = React.createContext(DEFAULT_CONTEXT);
function useReportedValues2() {
const context = React.useContext(Context2), [values2, setValues] = React.useState(context.read());
return React.useLayoutEffect(() => (setValues(context.read()), context.subscribe(setValues)), [context]), values2;
}
function Tracker2(props2) {
const store = React.useMemo(() => createStore(), []);
return /* @__PURE__ */ jsxRuntime.jsx(Context2.Provider, { value: store, children: props2.children });
}
const useReporter2 = createUseReporter(Context2);
return {
Tracker: Tracker2,
useReportedValues: useReportedValues2,
useReporter: useReporter2,
useAutoIdReporter: (value, isEqual2 = Object.is) => useReporter2(`element-${React.useRef(getNextId()).current}`, value, isEqual2)
};
}
const CORNER_RADIUS = 4, INTERACTIVE_STROKE_WIDTH = 16, CONNECTOR_MARGIN = 8, ARROW_MARGIN_X = 8, ARROW_MARGIN_Y = 2, ARROW_SIZE = 4, ARROW_THRESHOLD = 12, STROKE_WIDTH$2 = 1, DEBUG$1 = !1, DEBUG_LAYER_BOUNDS = !1, trackerScope = createTrackerScope(), Tracker$1 = trackerScope.Tracker, useReportedValues$1 = trackerScope.useReportedValues, useReporter$1 = trackerScope.useReporter;
function useUnique(value) {
const valueRef = React.useRef(value);
return isEqual__default.default(valueRef.current, value) || (valueRef.current = value), valueRef.current;
}
function createHookFromObservableFactory(observableFactory, initialValue) {
const initialLoadingTuple = [initialValue, !0], initialResult = { type: "tuple", tuple: initialLoadingTuple };
return function(_arg) {
const memoArg = useUnique(_arg), result = reactRx.useMemoObservable(
() => rxjs.of(memoArg).pipe(
operators.switchMap(
(arg) => rxjs.concat(
rxjs.of({ type: "loading" }),
observableFactory(arg).pipe(operators.map((value) => ({ type: "value", value })))
)
),
operators.scan(([prevValue], next) => next.type === "loading" ? [prevValue, !0] : [next.value, !1], initialLoadingTuple),
operators.distinctUntilChanged(([prevValue, prevIsLoading], [nextValue, nextIsLoading]) => !(prevValue !== nextValue || prevIsLoading !== nextIsLoading)),
operators.map((tuple) => ({ type: "tuple", tuple })),
operators.catchError((error) => rxjs.of({ type: "error", error }))
),
[memoArg],
initialResult
);
if (result.type === "error")
throw result.error;
return result.tuple;
};
}
function isNonNullable$2(value) {
return value != null;
}
const DRAFTS_FOLDER = "drafts", DRAFTS_PREFIX = `${DRAFTS_FOLDER}.`;
function documentIdEquals(documentId, equalsDocumentId) {
return getPublishedId(documentId) === getPublishedId(equalsDocumentId);
}
function isDraft(document2) {
return isDraftId(document2._id);
}
function isDraftId(id2) {
return id2.startsWith(DRAFTS_PREFIX);
}
function getIdPair(id2) {
return {
draftId: getDraftId(id2),
publishedId: getPublishedId(id2)
};
}
function isPublishedId(id2) {
return !isDraftId(id2);
}
function getDraftId(id2) {
return isDraftId(id2) ? id2 : DRAFTS_PREFIX + id2;
}
function getPublishedId(id2) {
return isDraftId(id2) ? id2.slice(DRAFTS_PREFIX.length) : id2;
}
function createDraftFrom(document2) {
return {
...document2,
_id: getDraftId(document2._id)
};
}
function newDraftFrom(document2) {
return {
...document2,
_id: DRAFTS_PREFIX
};
}
function createPublishedFrom(document2) {
return {
...document2,
_id: getPublishedId(document2._id)
};
}
function collate(documents) {
const byId = documents.reduce((res, doc) => {
const publishedId = getPublishedId(doc._id);
let entry = res.get(publishedId);
return entry || (entry = { id: publishedId, type: doc._type, published: void 0, draft: void 0 }, res.set(publishedId, entry)), entry[publishedId === doc._id ? "published" : "draft"] = doc, res;
}, /* @__PURE__ */ new Map());
return Array.from(byId.values());
}
function removeDupes(documents) {
return collate(documents).map((entry) => entry.draft || entry.published).filter(isNonNullable$2);
}
const EMPTY_OBJECT = Object.freeze({}), EMPTY_ARRAY$b = Object.freeze([]);
function getGlobalScope() {
if (typeof globalThis < "u")
return globalThis;
if (typeof window < "u")
return window;
if (typeof self < "u")
return self;
if (typeof global < "u")
return global;
throw new Error("@sanity/ui: could not locate global scope");
}
const globalScope = getGlobalScope();
function isRecord$4(value) {
return !!value && typeof value == "object" && !Array.isArray(value);
}
function isString(value) {
return typeof value == "string";
}
const ResizeObserver = typeof document == "object" && typeof window == "object" && window.ResizeObserver ? window.ResizeObserver : resizeObserver$1.ResizeObserver, createSharedResizeObserver = () => {
const event = createPubSub__default.default(), resizeObserver2 = new ResizeObserver(
(entries) => event.publish(entries)
);
return {
observe: (element, observer, options) => {
const unsubscribe = event.subscribe((entries) => {
const entry = entries.find((e) => e.target === element);
entry && observer(entry);
});
return resizeObserver2.observe(element, options), () => {
unsubscribe(), resizeObserver2.unobserve(element);
};
},
unobserve: (element) => resizeObserver2.unobserve(element)
};
}, resizeObserver = createSharedResizeObserver(), GROQ_KEYWORDS = ["match", "in", "asc", "desc", "true", "false", "null"], VALID_FIELD = /^[a-zA-Z_][a-zA-Z0-9_]*$/, fieldNeedsEscape = (fieldName) => !VALID_FIELD.test(fieldName) || GROQ_KEYWORDS.includes(fieldName), escapeField = (fieldName) => `["${fieldName}"]`, escapeFirst = (fieldName) => `@${escapeField(fieldName)}`, isEmptyArray = (value) => Array.isArray(value) && value.length === 0, joinPath = (pathArray) => {
let path = "";
for (let i = 0; i < pathArray.length; i++) {
const pathSegment = pathArray[i];
if (isEmptyArray(pathSegment)) {
path += "[]";
continue;
}
if (typeof pathSegment == "number") {
path += `[${pathSegment}]`;
continue;
}
const isFirst = i === 0;
fieldNeedsEscape(pathSegment) ? path = isFirst ? escapeFirst(pathSegment) : `${path}${escapeField(pathSegment)}` : path = isFirst ? pathSegment : `${path}.${pathSegment}`;
}
return path;
}, supportsTouch = isTouchDevice$1();
function isTouchDevice$1() {
return typeof window > "u" ? !1 : "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}
const segmenter = typeof Intl == "object" && "Segmenter" in Intl ? new Intl.Segmenter() : void 0;
function sliceString(str, start, end) {
if (end < start)
throw new Error(
"End must be greater than start, use `String.prototype.slice()` for negative values"
);
if (!segmenter)
return str.slice(start, end);
let i = 0, sliced = "";
for (const value of segmenter.segment(str)) {
if (i === end)
return sliced;
sliced += value.segment, i++;
}
return sliced;
}
function truncateString(str, maxLength) {
const truncated = sliceString(str, 0, maxLength);
return truncated === str ? truncated : `${truncated}\u2026`;
}
const LOADING_STATE = {
isLoading: !0,
value: void 0,
error: null
};
function useLoadable(value$, initialValue) {
return reactRx.useMemoObservable(() => value$.pipe(asLoadable()), [value$], typeof initialValue > "u" ? LOADING_STATE : { isLoading: !1, value: initialValue, error: null });
}
function asLoadable() {
return (value$) => value$.pipe(
operators.map((value) => ({ isLoading: !1, value, error: null })),
operators.catchError(
(error) => rxjs.of({ isLoading: !1, value: void 0, error })
)
);
}
function userHasRole(user, roleId) {
return user !== null && user.roles.some((role) => role.name === roleId);
}
var _a$1;
const DEBUG_MODE$2 = typeof process > "u" ? !1 : (_a$1 = process == null ? void 0 : process.env) == null ? void 0 : _a$1.SANITY_STUDIO_DEBUG_I18N, DEBUG_I18N = !!DEBUG_MODE$2, debugWrappers = {
reverse: (str) => `\u202E${str}`,
triangles: (str) => `\u25E4 ${str} \u25E2`
};
function maybeWrapT(t2) {
const wrapper = DEBUG_MODE$2 === "reverse" || DEBUG_MODE$2 === "triangles" ? debugWrappers[DEBUG_MODE$2] : null;
return wrapper ? (...args) => wrapper(t2(...args)) : t2;
}
const translationOptionOverrides = {
// We're manually forcing a re-render with the locale key in the LocaleProvider,
// so we don't need to bind to the i18n instance for language change events.
bindI18n: !1
};
function useTranslation(ns, options) {
const { t: t2 } = reactI18next.useTranslation(
ns,
options ? { keyPrefix: options.keyPrefix, lng: options.lng, ...translationOptionOverrides } : translationOptionOverrides
);
return { t: maybeWrapT(t2) };
}
const animationSpeed = 250, ChangeBarWrapper$1 = styled__default.default.div(
({ $changed, $disabled, $hasFocus, $isReviewChangeOpen }) => $disabled ? styled.css`
${ChangeBarMarker}:after {
display: none;
}
` : styled.css`
--change-bar-offset: 4px;
display: flex;
position: relative;
${ChangeBarMarker}:after {
opacity: 0.5;
}
@media (hover: hover) {
&:hover {
z-index: 10;
${ChangeBarMarker}:after {
opacity: 1;
}
}
}
/* hide when field is not changed */
${$hasFocus && styled.css`
${ChangeBarMarker}:after {
opacity: 1;
}
`}
/* hide when field is not changed */
${!$changed && styled.css`
${ChangeBarMarker}:after {
opacity: 0;
pointer-events: none;
}
`}
/* hide hover effect when review changes is open */
${$isReviewChangeOpen && styled.css`
${ChangeBarButton} {
opacity: 0;
}
`}
`
), FieldWrapper = styled__default.default.div`
flex-grow: 1;
min-width: 0;
`, ChangeBar = styled__default.default.div`
position: relative;
opacity: 1;
transition: opacity 100ms;
z-index: ${({ $zIndex }) => $zIndex};
`, ChangeBarMarker = styled__default.default.div((props2) => {
const { media } = theme.getTheme_v2(props2.theme);
return styled.css`
position: absolute;
top: -1px;
left: var(--change-bar-offset);
width: 1px;
bottom: -1px;
background-color: var(--card-bg-color);
@media (min-width: ${media[0]}px) {
display: unset;
}
&:after {
content: '';
display: block;
position: absolute;
top: 1px;
left: 0;
width: 1px;
bottom: 1px;
background-color: var(--card-badge-caution-dot-color);
border-radius: 0.5px;
}
`;
}), ChangeBarButton = styled__default.default.button((props2) => {
const { $withHoverEffect } = props2;
return styled.css`
appearance: none;
border: 0;
outline: 0;
display: block;
padding: 0;
background: transparent;
opacity: 0;
position: absolute;
height: 100%;
cursor: pointer;
pointer-events: all;
left: calc(-0.25rem + var(--change-bar-offset));
width: calc(1rem - 1px);
transition: opacity ${animationSpeed}ms;
&:focus {
border: 0;
outline: 0;
}
&:focus {
border: 0;
outline: 0;
}
${$withHoverEffect && styled.css`
@media (hover: hover) {
&:hover {
opacity: 0.2;
}
}
`}
`;
});
function ElementWithChangeBar(props2) {
const { children, disabled, hasFocus, isChanged, withHoverEffect = !0 } = props2, { onOpenReviewChanges, isReviewChangesOpen } = React.useContext(ConnectorContext), { zIndex } = ui.useLayer(), { t: t2 } = useTranslation(), changeBar = React.useMemo(
() => disabled || !isChanged ? null : /* @__PURE__ */ jsxRuntime.jsxs(ChangeBar, { "data-testid": "change-bar", $zIndex: zIndex, children: [
/* @__PURE__ */ jsxRuntime.jsx(ChangeBarMarker, { "data-testid": "change-bar__marker" }),
/* @__PURE__ */ jsxRuntime.jsx(getJsonStream.Tooltip, { content: t2("changes.change-bar.aria-label"), portal: !0, children: /* @__PURE__ */ jsxRuntime.jsx(
ChangeBarButton,
{
"aria-label": t2("changes.change-bar.aria-label"),
"data-testid": "change-bar__button",
onClick: isReviewChangesOpen ? void 0 : onOpenReviewChanges,
tabIndex: -1,
type: "button",
$withHoverEffect: withHoverEffect
}
) })
] }),
[disabled, isChanged, isReviewChangesOpen, onOpenReviewChanges, t2, withHoverEffect, zIndex]
);
return /* @__PURE__ */ jsxRuntime.jsxs(
ChangeBarWrapper$1,
{
"data-testid": "change-bar-wrapper",
$changed: isChanged,
$disabled: disabled,
$hasFocus: hasFocus,
$isReviewChangeOpen: isReviewChangesOpen,
children: [
/* @__PURE__ */ jsxRuntime.jsx(FieldWrapper, { "data-testid": "change-bar__field-wrapper", children }),
changeBar
]
}
);
}
const ChangeBarWrapper = React.memo(function(props2) {
const {
children,
disabled,
hasFocus,
isChanged,
onMouseEnter: onMouseEnterProp,
onMouseLeave: onMouseLeaveProp,
path = EMPTY_ARRAY$b,
withHoverEffect,
...restProps
} = props2, layer = ui.useLayer(), [hasHover, setHover] = React.useState(!1), onMouseEnter = React.useCallback(
(event) => {
onMouseEnterProp == null || onMouseEnterProp(event), setHover(!0);
},
[onMouseEnterProp]
), onMouseLeave = React.useCallback(
(event) => {
onMouseLeaveProp == null || onMouseLeaveProp(event), setHover(!1);
},
[onMouseLeaveProp]
), ref = React.useRef(null);
return useReporter$1(
disabled ? null : `field-${PathUtils__namespace.toString(path)}`,
() => ({
element: ref.current,
path,
isChanged,
hasFocus,
hasHover,
zIndex: layer.zIndex
}),
deepCompare__default.default
// note: deepCompare should be ok here since we're not comparing deep values
), /* @__PURE__ */ jsxRuntime.jsx("div", { ...restProps, ref, onMouseEnter, onMouseLeave, children: /* @__PURE__ */ jsxRuntime.jsx(
ElementWithChangeBar,
{
hasFocus,
isChanged,
disabled,
withHoverEffect,
children
}
) });
});
function ChangeIndicator(props2) {
const { children, hasFocus, isChanged, path, withHoverEffect, ...restProps } = props2;
return /* @__PURE__ */ jsxRuntime.jsx(
ChangeBarWrapper,
{
...restProps,
path,
hasFocus,
isChanged,
withHoverEffect,
children
}
);
}
const ChangeIndicatorContext = React.createContext({
path: [],
fullPath: [],
focusPath: [],
isChanged: !1
}), ScrollContext = React.createContext(null), noop$3 = () => {
}, ScrollContainer = React.forwardRef(function(props2, ref) {
const { as = "div", onScroll, ...rest } = props2, forwardedRef = ui.useForwardedRef(ref), parentContext = React.useContext(ScrollContext), childContext = React.useMemo(() => createPubSub__default.default(), []);
return React.useEffect(() => onScroll ? childContext.subscribe(onScroll) : noop$3, [childContext, onScroll]), React.useEffect(() => parentContext ? childContext.subscribe(parentContext.publish) : noop$3, [parentContext, childContext]), React.useEffect(() => {
const handleScroll = (event) => {
childContext.publish(event);
}, el = forwardedRef.current;
if (el)
return el.addEventListener("scroll", handleScroll, {
passive: !0,
capture: !0
}), () => {
el.removeEventListener("scroll", handleScroll);
};
}, [childContext, forwardedRef]), /* @__PURE__ */ jsxRuntime.jsx(ScrollContext.Provider, { value: childContext, children: React.createElement(as, { ref: forwardedRef, "data-testid": "scroll-container", ...rest }) });
});
function ClampedRect(props2) {
const { bounds, ...rest } = props2, x = Math.max(bounds.left, props2.left), y = Math.max(props2.top, bounds.top), height = Math.max(0, props2.height - (y - props2.top)), width = Math.max(0, props2.width - (x - props2.left));
return /* @__PURE__ */ jsxRuntime.jsx("rect", { ...rest, x, y, height, width });
}
styled__default.default.rect`
stroke: #ccc;
fill: none;
pointer-events: none;
stroke-linecap: round;
`;
const ConnectorPath = styled__default.default.path`
fill: none;
pointer-events: none;
stroke-linejoin: round;
stroke: var(--card-badge-caution-dot-color);
`, InteractivePath = styled__default.default.path`
fill: none;
pointer-events: stroke;
stroke: transparent;
cursor: pointer;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0;
&:hover {
opacity: 0.2;
}
`, RightBarWrapper = styled__default.default(ClampedRect)`
stroke: none;
pointer-events: none;
fill: var(--card-badge-caution-dot-color);
`;
function arrowPath(x, y, dir) {
return [
`M ${x - ARROW_SIZE} ${y - ARROW_SIZE * dir} `,
`L ${x} ${y}`,
`L ${x + ARROW_SIZE} ${y - ARROW_SIZE * dir}`
].join("");
}
function moveTo(x, y) {
return `M${x} ${y}`;
}
function lineTo(x, y) {
return `L${x} ${y}`;
}
function join(strings, delim = "") {
return strings.join(delim);
}
function quadCurve(x1, y1, x, y) {
return `Q${x1} ${y1} ${x} ${y}`;
}
function generateConnectorPath(line) {
const { from, to } = line, { left: fromX, top: fromY } = from, { left: toX, top: toY } = to, cmds = [], r1 = Math.min(CORNER_RADIUS, Math.abs(fromY - toY) / 2);
return from.isAbove ? cmds.push(
moveTo(fromX + ARROW_MARGIN_X, fromY - ARROW_THRESHOLD + ARROW_MARGIN_Y),
lineTo(fromX + ARROW_MARGIN_X, fromY - CORNER_RADIUS),
quadCurve(fromX + ARROW_MARGIN_X, fromY, fromX + ARROW_MARGIN_X + CORNER_RADIUS, fromY)
) : from.isBelow ? cmds.push(
moveTo(fromX + ARROW_MARGIN_X, fromY + ARROW_THRESHOLD - ARROW_MARGIN_Y),
lineTo(fromX + ARROW_MARGIN_X, fromY + CORNER_RADIUS),
quadCurve(fromX + ARROW_MARGIN_X, fromY, fromX + ARROW_MARGIN_X + CORNER_RADIUS, fromY)
) : cmds.push(moveTo(fromX, fromY)), to.isAbove ? fromY < to.bounds.top ? cmds.push(
lineTo(to.bounds.left - 8 - r1, fromY),
quadCurve(to.bounds.left - 8, fromY, to.bounds.left - 8, fromY + r1),
lineTo(to.bounds.left - 8, toY - r1),
quadCurve(to.bounds.left - 8, toY, to.bounds.left - 8 + r1, toY),
lineTo(to.bounds.left + ARROW_MARGIN_X - CORNER_RADIUS, toY),
quadCurve(
to.bounds.left + ARROW_MARGIN_X,
toY,
to.bounds.left + ARROW_MARGIN_X,
toY - CORNER_RADIUS
),
lineTo(to.bounds.left + ARROW_MARGIN_X, toY - ARROW_THRESHOLD + ARROW_MARGIN_Y)
) : cmds.push(
lineTo(to.bounds.left + ARROW_MARGIN_X - CORNER_RADIUS, fromY),
quadCurve(
to.bounds.left + ARROW_MARGIN_X,
fromY,
to.bounds.left + ARROW_MARGIN_X,
fromY - CORNER_RADIUS
),
lineTo(to.bounds.left + ARROW_MARGIN_X, toY - ARROW_THRESHOLD + ARROW_MARGIN_Y)
) : to.isBelow ? fromY > to.bounds.top + to.bounds.height ? cmds.push(
lineTo(to.bounds.left - ARROW_MARGIN_X - r1, fromY),
quadCurve(
to.bounds.left - ARROW_MARGIN_X,
fromY,
to.bounds.left - ARROW_MARGIN_X,
fromY - r1
),
lineTo(to.bounds.left - ARROW_MARGIN_X, toY + r1),
quadCurve(to.bounds.left - ARROW_MARGIN_X, toY, to.bounds.left - ARROW_MARGIN_X + r1, toY),
lineTo(to.bounds.left + ARROW_MARGIN_X - CORNER_RADIUS, toY),
quadCurve(
to.bounds.left + ARROW_MARGIN_X,
toY,
to.bounds.left + ARROW_MARGIN_X,
toY + CORNER_RADIUS
),
lineTo(to.bounds.left + ARROW_MARGIN_X, toY + ARROW_THRESHOLD - ARROW_MARGIN_Y)
) : cmds.push(
lineTo(to.bounds.left + ARROW_MARGIN_X - CORNER_RADIUS, fromY),
quadCurve(
to.bounds.left + ARROW_MARGIN_X,
fromY,
to.bounds.left + ARROW_MARGIN_X,
fromY + CORNER_RADIUS
),
lineTo(to.bounds.left + ARROW_MARGIN_X, toY + ARROW_THRESHOLD - ARROW_MARGIN_Y)
) : fromY < toY ? cmds.push(
lineTo(to.bounds.left + ARROW_MARGIN_X - r1, fromY),
quadCurve(
to.bounds.left + ARROW_MARGIN_X,
fromY,
to.bounds.left + ARROW_MARGIN_X,
fromY + r1
),
lineTo(to.bounds.left + ARROW_MARGIN_X, toY - r1),
quadCurve(to.bounds.left + ARROW_MARGIN_X, toY, to.bounds.left + ARROW_MARGIN_X + r1, toY),
lineTo(toX, toY)
) : cmds.push(
lineTo(to.bounds.left + ARROW_MARGIN_X - r1, fromY),
quadCurve(
to.bounds.left + ARROW_MARGIN_X,
fromY,
to.bounds.left + ARROW_MARGIN_X,
fromY - r1
),
lineTo(to.bounds.left + ARROW_MARGIN_X, toY + r1),
quadCurve(to.bounds.left + ARROW_MARGIN_X, toY, to.bounds.left + ARROW_MARGIN_X + r1, toY),
lineTo(toX, toY)
), join(cmds);
}
function getConnectorLinePoint(rect, bounds) {
const centerY = rect.top + rect.height / 2, isAbove = rect.top + rect.height < bounds.top + ARROW_MARGIN_Y, isBelow = rect.top > bounds.top + bounds.height - ARROW_MARGIN_Y;
return {
bounds,
left: rect.left,
top: centerY,
centerY,
startY: rect.top + CONNECTOR_MARGIN,
endY: rect.top + rect.height - CONNECTOR_MARGIN,
isAbove,
isBelow,
outOfBounds: isAbove || isBelow
};
}
function mapConnectorToLine(connector) {
const fromBounds = {
top: connector.from.bounds.top + ARROW_THRESHOLD,
bottom: connector.from.bounds.top + connector.from.bounds.height - ARROW_THRESHOLD,
left: connector.from.bounds.left,
right: connector.from.bounds.left + connector.from.bounds.width,
width: connector.from.bounds.width,
height: connector.from.bounds.height - ARROW_THRESHOLD * 2
}, from = getConnectorLinePoint(connector.from.rect, fromBounds);
from.left = connector.from.rect.left + connector.from.rect.width + 1;
const toBounds = {
top: connector.to.bounds.top + ARROW_THRESHOLD,
bottom: connector.to.bounds.top + connector.to.bounds.height - ARROW_THRESHOLD,
left: connector.to.bounds.left,
right: connector.to.bounds.left + connector.to.bounds.width,
width: connector.to.bounds.width,
height: connector.to.bounds.height - ARROW_THRESHOLD * 2
}, to = getConnectorLinePoint(connector.to.rect, toBounds), maxStartY = Math.max(to.startY, from.startY);
return from.top = Math.min(maxStartY, from.endY), from.top < toBounds.top ? from.top = Math.min(toBounds.top, from.endY) : from.top > toBounds.bottom && (from.top = Math.max(toBounds.bottom, from.startY)), to.top = Math.min(maxStartY, to.endY), to.top < fromBounds.top ? to.top = Math.min(fromBounds.top, to.endY) : to.top > fromBounds.bottom && (to.top = Math.max(fromBounds.bottom, to.startY)), from.top = Math.min(Math.max(from.top, fromBounds.top), fromBounds.bottom), to.top = Math.min(Math.max(to.top, toBounds.top), toBounds.bottom), { from, to };
}
const Connector = React.memo(function({ from, to }) {
const line = mapConnectorToLine({ from, to });
if (line.from.outOfBounds && line.to.outOfBounds)
return null;
const linePathDescription = generateConnectorPath(line);
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(InteractivePath, { d: linePathDescription, strokeWidth: INTERACTIVE_STROKE_WIDTH }),
/* @__PURE__ */ jsxRuntime.jsx(ConnectorPath, { d: linePathDescription, strokeWidth: STROKE_WIDTH$2 }),
/* @__PURE__ */ jsxRuntime.jsx(
RightBarWrapper,
{
top: to.rect.top,
left: to.rect.left - 0.5,
height: to.rect.height,
width: STROKE_WIDTH$2,
bounds: to.bounds
}
),
line.from.isAbove && /* @__PURE__ */ jsxRuntime.jsx(
ConnectorPath,
{
d: arrowPath(
line.from.left + ARROW_MARGIN_X,
line.from.bounds.top - ARROW_THRESHOLD + ARROW_MARGIN_Y,
-1
),
strokeWidth: STROKE_WIDTH$2
}
),
line.from.isBelow && /* @__PURE__ */ jsxRuntime.jsx(
ConnectorPath,
{
d: arrowPath(
line.from.left + ARROW_MARGIN_X,
line.from.bounds.top + line.from.bounds.height + ARROW_THRESHOLD - ARROW_MARGIN_Y,
1
),
strokeWidth: STROKE_WIDTH$2
}
),
line.to.isAbove && /* @__PURE__ */ jsxRuntime.jsx(
ConnectorPath,
{
d: arrowPath(
line.to.bounds.left + ARROW_MARGIN_X,
line.to.bounds.top - ARROW_THRESHOLD + ARROW_MARGIN_Y,
-1
),
strokeWidth: STROKE_WIDTH$2
}
),
line.to.isBelow && /* @__PURE__ */ jsxRuntime.jsx(
ConnectorPath,
{
d: arrowPath(
line.to.bounds.left + ARROW_MARGIN_X,
line.to.bounds.top + line.to.bounds.height + ARROW_THRESHOLD - ARROW_MARGIN_Y,
1
),
strokeWidth: STROKE_WIDTH$2
}
),
DEBUG$1
] });
}), SvgWrapper = styled__default.default.svg`
pointer-events: none;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
`;
function focusRingBorderStyle$2(border) {
return `inset 0 0 0 ${border.width}px ${border.color}`;
}
const AlignedBottomGrid$1 = styled__default.default(ui.Grid)`
align-items: flex-end;
`;
function focusRingStyle$2(opts) {
const { base, border, focusRing } = opts, focusRingOutsetWidth = focusRing.offset + focusRing.width, focusRingInsetWidth = 0 - focusRing.offset, bgColor = base ? base.bg : "var(--card-bg-color)";
return [
focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`,
border && focusRingBorderStyle$2(border),
focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`,
focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`
].filter(Boolean).join(",");
}
const LIST_ITEM_DATA_ATTR_ACTIVE = "data-active", LIST_ITEM_INTERACTIVE_SELECTOR = "a,button", FocusOverlayDiv = styled__default.default.div(({ theme: theme2, offset }) => styled.css`
bottom: ${-offset}px;
border-radius: ${ui.rem(theme2.sanity.radius[1])};
left: ${-offset}px;
pointer-events: none;
position: absolute;
right: ${-offset}px;
top: ${-offset}px;
z-index: 2;
${VirtualListBox}:focus-visible & {
box-shadow: ${focusRingStyle$2({
base: theme2.sanity.color.base,
focusRing: theme2.sanity.focusRing
})};
}
`), PointerOverlayDiv = styled__default.default.div`
bottom: 0;
display: none;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
@media (hover: hover) {
&[data-enabled='true'] {
display: block;
}
}
`, VirtualListBox = styled__default.default(ui.Box)`
height: 100%;
outline: none;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
width: 100%;
`, VirtualListChildBox = styled__default.default(ui.Box).attrs(({ $height }) => ({
style: { height: `${$height}px` }
}))`
position: relative;
width: 100%;
`, CommandList = React.forwardRef(function({
activeItemDataAttr = LIST_ITEM_DATA_ATTR_ACTIVE,
ariaLabel,
ariaMultiselectable = !1,
autoFocus,
canReceiveFocus,
fixedHeight,
focusRingOffset = 0,
getItemDisabled,
getItemKey: getItemKey2,
getItemSelected,
initialIndex,
initialScrollAlign = "start",
inputElement,
itemHeight,
items,
onEndReached,
onEndReachedIndexOffset = 0,
onlyShowSelectionWhenActive,
overscan,
renderItem,
wrapAround = !0,
...responsivePaddingProps
}, ref) {
const isMountedRef = React.useRef(!1), commandListId = React.useRef(React.useId()), activeIndexRef = React.useRef(initialIndex != null ? initialIndex : 0), [childContainerElement, setChildContainerElement] = React.useState(null), [hovered, setHovered] = React.useState(!1), [pointerOverlayElement, setPointerOverlayElement] = React.useState(null), [virtualListElement, setVirtualListElement] = React.useState(null), handleChange = React.useCallback(
(v) => {
if (!onEndReached)
return;
const [lastItem] = [...v.getVirtualItems()].reverse();
lastItem && lastItem.index >= items.length - onEndReachedIndexOffset - 1 && isMountedRef.current && onEndReached();
},
[onEndReached, items.length, onEndReachedIndexOffset]
), virtualizer = reactVirtual.useVirtualizer({
count: items.length,
getItemKey: getItemKey2,
getScrollElement: () => virtualListElement,
estimateSize: () => itemHeight,
onChange: handleChange,
overscan
}), itemIndices = React.useMemo(() => {
let i = -1;
return items.reduce((acc, _, index) => {
var _a2, _b;
const disabled = (_a2 = getItemDisabled == null ? void 0 : getItemDisabled(index)) != null ? _a2 : !1, selected = (_b = getItemSelected == null ? void 0 : getItemSelected(index)) != null ? _b : !1;
return disabled || (i += 1), acc[index] = {
activeIndex: disabled ? null : i,
disabled,
selected
}, acc;
}, []);
}, [getItemDisabled, getItemSelected, items]), activeItemCount = React.useMemo(
() => itemIndices.filter((v) => !v.disabled).length,
[itemIndices]
), enableChildContainerPointerEvents = React.useCallback(
(enabled) => pointerOverlayElement == null ? void 0 : pointerOverlayElement.setAttribute("data-enabled", (!enabled).toString()),
[pointerOverlayElement]
), getChildDescendantId = React.useCallback(
(index) => `${commandListId.current}-item-${index}`,
[]
), getCommandListChildrenId = React.useCallback(() => `${commandListId.current}-children`, []), showChildrenActiveState = React.useCallback(() => {
const hasFocus = [inputElement, virtualListElement].some((el) => document.activeElement === el);
if (onlyShowSelectionWhenActive && !hasFocus && !hovered)
return;
const childElements = Array.from((childContainerElement == null ? void 0 : childContainerElement.children) || []);
childElements == null || childElements.forEach((child) => {
var _a2, _b, _c;
const virtualIndex = Number((_a2 = child.dataset) == null ? void 0 : _a2.index), targetIndex = (_b = itemIndices[virtualIndex]) == null ? void 0 : _b.activeIndex;
(_c = child.querySelector(LIST_ITEM_INTERACTIVE_SELECTOR)) == null || _c.toggleAttribute(activeItemDataAttr, targetIndex === activeIndexRef.current);
});
}, [
activeItemDataAttr,
childContainerElement == null ? void 0 : childContainerElement.children,
hovered,
inputElement,
itemIndices,
onlyShowSelectionWhenActive,
virtualListElement
]), hideChildrenActiveState = React.useCallback(() => {
const childElements = Array.from((childContainerElement == null ? void 0 : childContainerElement.children) || []);
childElements == null || childElements.forEach((child) => {
var _a2;
(_a2 = child.querySelector(LIST_ITEM_INTERACTIVE_SELECTOR)) == null || _a2.toggleAttribute(activeItemDataAttr, !1);
});
}, [activeItemDataAttr, childContainerElement == null ? void 0 : childContainerElement.children]), refreshChildrenActiveStateThrottled = React.useMemo(() => throttle__default.default(showChildrenActiveState, 200), [showChildrenActiveState]), handleUpdateActiveDescendant = React.useCallback(() => {
const activeIndex = activeIndexRef == null ? void 0 : activeIndexRef.current;
items.length > 0 ? (inputElement == null || inputElement.setAttribute("aria-activedescendant", getChildDescendantId(activeIndex)), virtualListElement == null || virtualListElement.setAttribute("aria-activedescendant", getChildDescendantId(activeIndex))) : (inputElement == null || inputElement.removeAttribute("aria-activedescendant"), virtualListElement == null || virtualListElement.removeAttribute("aria-activedescendant"));
}, [getChildDescendantId, inputElement, items.length, virtualListElement]), handleGetTopIndex = React.useCallback(() => {
var _a2, _b;
const childContainerParentElement = childContainerElement == null ? void 0 : childContainerElement.parentElement;
if (childContainerElement && childContainerParentElement) {
const offset = childContainerParentElement.getBoundingClientRect().top - childContainerElement.getBoundingClientRect().top;
return (_b = (_a2 = virtualizer.getVirtualItemForOffset(offset)) == null ? void 0 : _a2.index) != null ? _b : -1;
}
return -1;
}, [childContainerElement, virtualizer]), setActiveIndex = React.useCallback(
({
index,
scrollAlign,
scrollIntoView: scrollIntoView2 = !0
}) => {
if (activeIndexRef.current = index, handleUpdateActiveDescendant(), showChildrenActiveState(), scrollIntoView2) {
const virtualListIndex = itemIndices.findIndex((i) => i.activeIndex === index);
virtualListIndex > -1 && virtualizer.scrollToIndex(virtualListIndex, scrollAlign ? { align: scrollAlign } : {});
}
},
[handleUpdateActiveDescendant, itemIndices, showChildrenActiveState, virtualizer]
), selectAdjacentItemIndex = React.useCallback(
(direction) => {
let nextIndex = -1;
const lastIndex = activeItemCount - 1;
if (direction === "next") {
const wrapAroundIndex = wrapAround ? 0 : lastIndex;
nextIndex = activeIndexRef.current < activeItemCount - 1 ? activeIndexRef.current + 1 : wrapAroundIndex;
}
if (direction === "previous") {
const wrapAroundIndex = wrapAround ? lastIndex : 0;
nextIndex = activeIndexRef.current > 0 ? activeIndexRef.current - 1 : wrapAroundIndex;
}
setActiveIndex({ index: nextIndex, scrollIntoView: !0 }), enableChildContainerPointerEvents(!1);
},
[activeItemCount, enableChildContainerPointerEvents, setActiveIndex, wrapAround]
), focusElement = React.useCallback(
(type) => {
switch (type) {
case "input":
inputElement == null || inputElement.focus();
break;
case "list":
virtualListElement == null || virtualListElement.focus();
break;
}
},
[inputElement, virtualListElement]
), focusInputElement = React.useCallback(() => {
inputElement == null || inputElement.focus();
}, [inputElement]), focusListElement = React.useCallback(() => {
virtualListElement == null || virtualListElement.focus();
}, [virtualListElement]), handleChildMouseEnter = React.useCallback(
(index) => () => {
setActiveIndex({ index, scrollIntoView: !1 });
},
[setActiveIndex]
), handleFocus = React.useCallback(() => {
showChildrenActiveState();
}, [showChildrenActiveState]), handleKeyDown = React.useCallback(
(type) => (event) => {
const childElements = Array.from((childContainerElement == null ? void 0 : childContainerElement.children) || []);
if (childElements.length && (event.key === "ArrowDown" && (event.preventDefault(), focusElement(type), selectAdjacentItemIndex("next")), event.key === "ArrowUp" && (event.preventDefault(), focusElement(type), selectAdjacentItemIndex("previous")), event.key === "Enter")) {
event.preventDefault(), focusElement(type);
const currentElement = childElements.find(
(el) => Number(el.dataset.index) === itemIndices.findIndex((i) => i.activeIndex === activeIndexRef.current)
);
if (currentElement) {
const clickableElement = currentElement == null ? void 0 : currentElement.querySelector(
LIST_ITEM_INTERACTIVE_SELECTOR
);
clickableElement == null || clickableElement.click();
}
}
},
[childContainerElement == null ? void 0 : childContainerElement.children, focusElement, itemIndices, selectAdjacentItemIndex]
), handleKeyDownInput = React.useCallback(
(event) => handleKeyDown("input")(event),
[handleKeyDown]
), handleKeyDownList = React.useCallback(
(event) => handleKeyDown("list")(event),
[handleKeyDown]
), handleVirtualListMouseEnter = React.useCallback(() => {
onlyShowSelectionWhenActive && (showChildrenActiveState(), setHovered(!0));
}, [onlyShowSelectionWhenActive, showChildrenActiveState]), handleVirtualListMouseLeave = React.useCallback(() => {
onlyShowSelectionWhenActive && (hideChildrenActiveState(), setHovered(!1));
}, [hideChildrenActiveState, onlyShowSelectionWhenActive]);
React.useImperativeHandle(
ref,
() => ({
focusInputElement() {
focusInputElement();
},
focusListElement() {
focusListElement();
},
getTopIndex() {
return handleGetT