sanity-plugin-utils/dist/index.js

Handy hooks and clever components for Sanity Studio v3

import { c } from "react/compiler-runtime";
import { Badge, Box, Card, Flex, Menu, MenuItem, Stack, Text, TextInput } from "@sanity/ui";
import { jsx, jsxs } from "react/jsx-runtime";
import { css, styled } from "styled-components";
import { AddCircleIcon } from "@sanity/icons/AddCircle";
import { RemoveCircleIcon } from "@sanity/icons/RemoveCircle";
import { RestoreIcon } from "@sanity/icons/Restore";
import { useContext, useEffect, useRef, useState } from "react";
import { UserAvatar, useClient, useDocumentStore, useWorkspace } from "sanity";
import { createImageUrlBuilder } from "@sanity/image-url";
import isEqual from "react-fast-compare";
import { catchError, distinctUntilChanged } from "rxjs/operators";
import { RouterContext } from "sanity/router";
import { usePaneRouter } from "sanity/structure";
const DEFAULT_PROPS = { tone: "primary" };
function Feedback(props) {
	let $ = c(12), t0;
	$[0] === props ? t0 = $[1] : (t0 = {
		...DEFAULT_PROPS,
		...props
	}, $[0] = props, $[1] = t0);
	let { title, description, icon, tone, children } = t0, t1 = icon ? "display icon" : null, t2;
	$[2] !== children || $[3] !== description || $[4] !== title ? (t2 = children || /* @__PURE__ */ jsx(Box, {
		flex: 1,
		children: /* @__PURE__ */ jsxs(Stack, {
			gap: 4,
			children: [title ? /* @__PURE__ */ jsx(Text, {
				weight: "semibold",
				children: title
			}) : null, description ? /* @__PURE__ */ jsx(Text, {
				size: 2,
				children: description
			}) : null]
		})
	}), $[2] = children, $[3] = description, $[4] = title, $[5] = t2) : t2 = $[5];
	let t3;
	$[6] !== t1 || $[7] !== t2 ? (t3 = /* @__PURE__ */ jsxs(Flex, { children: [t1, t2] }), $[6] = t1, $[7] = t2, $[8] = t3) : t3 = $[8];
	let t4;
	return $[9] !== t3 || $[10] !== tone ? (t4 = /* @__PURE__ */ jsx(Card, {
		tone,
		padding: 4,
		radius: 3,
		border: !0,
		children: t3
	}), $[9] = t3, $[10] = tone, $[11] = t4) : t4 = $[11], t4;
}
const StyledTable = /* @__PURE__ */ styled((t0) => {
	let $ = c(4), t1;
	$[0] === t0 ? t1 = $[1] : (t1 = t0 === void 0 ? {} : t0, $[0] = t0, $[1] = t1);
	let props = t1, t2;
	return $[2] === props ? t2 = $[3] : (t2 = /* @__PURE__ */ jsx(Card, {
		as: "table",
		...props
	}), $[2] = props, $[3] = t2), t2;
}).withConfig({
	displayName: "StyledTable",
	componentId: "sc-j6xlpp-0"
})(() => css`display:table;width:100%;border-collapse:collapse;&:not([hidden]){display:table;border-collapse:collapse;}`);
function Table(props) {
	let $ = c(6), children, rest;
	$[0] === props ? (children = $[1], rest = $[2]) : ({children, ...rest} = props, $[0] = props, $[1] = children, $[2] = rest);
	let t0;
	return $[3] !== children || $[4] !== rest ? (t0 = /* @__PURE__ */ jsx(StyledTable, {
		...rest,
		children
	}), $[3] = children, $[4] = rest, $[5] = t0) : t0 = $[5], t0;
}
const StyledRow = /* @__PURE__ */ styled((t0) => {
	let $ = c(4), t1;
	$[0] === t0 ? t1 = $[1] : (t1 = t0 === void 0 ? {} : t0, $[0] = t0, $[1] = t1);
	let props = t1, t2;
	return $[2] === props ? t2 = $[3] : (t2 = /* @__PURE__ */ jsx(Card, {
		as: "tr",
		...props
	}), $[2] = props, $[3] = t2), t2;
}).withConfig({
	displayName: "StyledRow",
	componentId: "sc-j6xlpp-1"
})(() => css`display:table-row;&:not([hidden]){display:table-row;}`);
function Row(props) {
	let $ = c(6), children, rest;
	$[0] === props ? (children = $[1], rest = $[2]) : ({children, ...rest} = props, $[0] = props, $[1] = children, $[2] = rest);
	let t0;
	return $[3] !== children || $[4] !== rest ? (t0 = /* @__PURE__ */ jsx(StyledRow, {
		...rest,
		children
	}), $[3] = children, $[4] = rest, $[5] = t0) : t0 = $[5], t0;
}
const StyledCell = /* @__PURE__ */ styled((t0) => {
	let $ = c(4), t1;
	$[0] === t0 ? t1 = $[1] : (t1 = t0 === void 0 ? {} : t0, $[0] = t0, $[1] = t1);
	let props = t1, t2;
	return $[2] === props ? t2 = $[3] : (t2 = /* @__PURE__ */ jsx(Card, {
		as: "td",
		...props
	}), $[2] = props, $[3] = t2), t2;
}).withConfig({
	displayName: "StyledCell",
	componentId: "sc-j6xlpp-2"
})(() => css`display:table-cell;&:not([hidden]){display:table-cell;}`);
function Cell(props) {
	let $ = c(6), children, rest;
	$[0] === props ? (children = $[1], rest = $[2]) : ({children, ...rest} = props, $[0] = props, $[1] = children, $[2] = rest);
	let t0;
	return $[3] !== children || $[4] !== rest ? (t0 = /* @__PURE__ */ jsx(StyledCell, {
		...rest,
		children
	}), $[3] = children, $[4] = rest, $[5] = t0) : t0 = $[5], t0;
}
function chunkArray(array, size) {
	let chunks = [];
	for (let i = 0; i < array.length; i += size) chunks.push(array.slice(i, i + size));
	return chunks;
}
function useProjectUsers(t0) {
	let $ = c(11), { apiVersion } = t0, { currentUser } = useWorkspace(), t1 = apiVersion ?? "2023-01-01", t2;
	$[0] === t1 ? t2 = $[1] : (t2 = { apiVersion: t1 }, $[0] = t1, $[1] = t2);
	let client = useClient(t2), t3;
	$[2] === Symbol.for("react.memo_cache_sentinel") ? (t3 = [], $[2] = t3) : t3 = $[2];
	let [users, setUsers] = useState(t3), t4;
	$[3] !== client || $[4] !== currentUser?.id || $[5] !== users.length ? (t4 = () => {
		let { projectId } = client.config();
		users.length || async function() {
			try {
				let aclData = await client.request({ url: `/projects/${projectId}/acl` }), userIdChunks = chunkArray(aclData.map(_temp$1), 200), usersWithRoles = (await Promise.all(userIdChunks.map((chunk) => client.request({ url: `/projects/${projectId}/users/${chunk.join(",")}` })))).flat().map((user_0) => {
					let userRoles = aclData.find((aclUser) => aclUser.projectUserId === user_0.id)?.roles || [];
					return Object.assign(user_0, {
						isCurrentUser: user_0.id === currentUser?.id,
						roles: userRoles
					});
				});
				setUsers(usersWithRoles);
			} catch (t5) {
				console.error("Failed to fetch users:", t5);
			}
		}();
	}, $[3] = client, $[4] = currentUser?.id, $[5] = users.length, $[6] = t4) : t4 = $[6];
	let t5 = currentUser?.id, t6;
	return $[7] !== client || $[8] !== t5 || $[9] !== users.length ? (t6 = [
		client,
		t5,
		users.length
	], $[7] = client, $[8] = t5, $[9] = users.length, $[10] = t6) : t6 = $[10], useEffect(t4, t6), users;
}
function _temp$1(user) {
	return user.projectUserId;
}
function searchUsers(users, searchString) {
	return users.filter((user) => !!((user.displayName || "").toLowerCase().startsWith(searchString) || (user.givenName || "").toLowerCase().startsWith(searchString) || (user.middleName || "").toLowerCase().startsWith(searchString) || (user.familyName || "").toLowerCase().startsWith(searchString)));
}
const LABELS = {
	addMe: "Assign myself",
	removeMe: "Unassign myself",
	clear: "Clear assignees",
	searchPlaceholder: "Search users",
	notFound: "No users found"
};
function UserSelectMenu(props) {
	let $ = c(42), { value, userList, onAdd, onRemove, onClear, style: t0 } = props, t1;
	$[0] === t0 ? t1 = $[1] : (t1 = t0 === void 0 ? {} : t0, $[0] = t0, $[1] = t1);
	let style = t1, t2;
	$[2] === props.labels ? t2 = $[3] : (t2 = props?.labels ? {
		...LABELS,
		...props.labels
	} : LABELS, $[2] = props.labels, $[3] = t2);
	let labels = t2, [searchString, setSearchString] = useState(""), searchResults = searchUsers(userList || [], searchString), me, t3;
	$[4] !== userList || $[5] !== value ? (me = userList.find(_temp), t3 = me && value.includes(me.id), $[4] = userList, $[5] = value, $[6] = me, $[7] = t3) : (me = $[6], t3 = $[7]);
	let meAssigned = t3, input = useRef(null), t4;
	$[8] === Symbol.for("react.memo_cache_sentinel") ? (t4 = (event) => {
		setSearchString(event.target.value);
	}, $[8] = t4) : t4 = $[8];
	let handleSearchChange = t4, t5;
	$[9] !== onAdd || $[10] !== onRemove ? (t5 = (isChecked, user) => {
		isChecked ? onRemove && onRemove(user.id) : onAdd && onAdd(user.id);
	}, $[9] = onAdd, $[10] = onRemove, $[11] = t5) : t5 = $[11];
	let handleSelect = t5, t6;
	$[12] !== me || $[13] !== onAdd ? (t6 = () => {
		me && onAdd && onAdd(me.id);
	}, $[12] = me, $[13] = onAdd, $[14] = t6) : t6 = $[14];
	let handleAssignMyself = t6, t7;
	$[15] !== me || $[16] !== onRemove ? (t7 = () => {
		me && onRemove && onRemove(me.id);
	}, $[15] = me, $[16] = onRemove, $[17] = t7) : t7 = $[17];
	let handleUnassignMyself = t7, t8;
	$[18] === onClear ? t8 = $[19] : (t8 = () => {
		onClear && onClear();
	}, $[18] = onClear, $[19] = t8);
	let handleClearAssigneesClick = t8, T0 = Menu, t9;
	$[20] !== handleAssignMyself || $[21] !== handleUnassignMyself || $[22] !== labels.addMe || $[23] !== labels.removeMe || $[24] !== me || $[25] !== meAssigned ? (t9 = meAssigned ? /* @__PURE__ */ jsx(MenuItem, {
		tone: "caution",
		disabled: !me,
		onClick: handleUnassignMyself,
		icon: RemoveCircleIcon,
		text: labels.removeMe
	}) : /* @__PURE__ */ jsx(MenuItem, {
		tone: "positive",
		onClick: handleAssignMyself,
		icon: AddCircleIcon,
		text: labels.addMe
	}), $[20] = handleAssignMyself, $[21] = handleUnassignMyself, $[22] = labels.addMe, $[23] = labels.removeMe, $[24] = me, $[25] = meAssigned, $[26] = t9) : t9 = $[26];
	let t10 = value.length === 0, t11;
	$[27] !== handleClearAssigneesClick || $[28] !== labels.clear || $[29] !== t10 ? (t11 = /* @__PURE__ */ jsx(MenuItem, {
		tone: "critical",
		disabled: t10,
		onClick: handleClearAssigneesClick,
		icon: RestoreIcon,
		text: labels.clear
	}), $[27] = handleClearAssigneesClick, $[28] = labels.clear, $[29] = t10, $[30] = t11) : t11 = $[30];
	let t12;
	$[31] !== labels.searchPlaceholder || $[32] !== searchString ? (t12 = /* @__PURE__ */ jsx(Box, {
		padding: 1,
		children: /* @__PURE__ */ jsx(TextInput, {
			ref: input,
			onChange: handleSearchChange,
			placeholder: labels.searchPlaceholder,
			value: searchString
		})
	}), $[31] = labels.searchPlaceholder, $[32] = searchString, $[33] = t12) : t12 = $[33];
	let t13 = searchString && searchResults?.length === 0 && /* @__PURE__ */ jsx(MenuItem, {
		disabled: !0,
		text: labels.notFound
	}), t14 = searchResults && searchResults.map((user_0) => /* @__PURE__ */ jsx(MenuItem, {
		pressed: value.includes(user_0.id),
		onClick: () => handleSelect(value.indexOf(user_0.id) > -1, user_0),
		children: /* @__PURE__ */ jsxs(Flex, {
			align: "center",
			children: [
				/* @__PURE__ */ jsx(UserAvatar, {
					user: user_0,
					size: 1
				}),
				/* @__PURE__ */ jsx(Box, {
					paddingX: 2,
					flex: 1,
					children: /* @__PURE__ */ jsx(Text, { children: user_0.displayName })
				}),
				user_0.isCurrentUser && /* @__PURE__ */ jsx(Badge, {
					fontSize: 1,
					tone: "positive",
					children: "Me"
				})
			]
		})
	}, user_0.id)), t15;
	return $[34] !== T0 || $[35] !== style || $[36] !== t11 || $[37] !== t12 || $[38] !== t13 || $[39] !== t14 || $[40] !== t9 ? (t15 = /* @__PURE__ */ jsxs(T0, {
		style,
		children: [
			t9,
			t11,
			t12,
			t13,
			t14
		]
	}), $[34] = T0, $[35] = style, $[36] = t11, $[37] = t12, $[38] = t13, $[39] = t14, $[40] = t9, $[41] = t15) : t15 = $[41], t15;
}
function _temp(u) {
	return u.isCurrentUser;
}
function useImageUrlBuilder(clientOptions) {
	let $ = c(2), client = useClient(clientOptions), t0;
	return $[0] === client ? t0 = $[1] : (t0 = createImageUrlBuilder(client), $[0] = client, $[1] = t0), t0;
}
function useImageUrlBuilderImage(source, clientOptions) {
	let $ = c(3), builder = useImageUrlBuilder(clientOptions), t0;
	return $[0] !== builder || $[1] !== source ? (t0 = source && builder ? builder.image(source) : null, $[0] = builder, $[1] = source, $[2] = t0) : t0 = $[2], t0;
}
const DEFAULT_PARAMS = {}, DEFAULT_OPTIONS = { apiVersion: "v2023-05-01" };
function useParams(params) {
	let $ = c(4), t0;
	$[0] === params ? t0 = $[1] : (t0 = JSON.stringify(params || {}), $[0] = params, $[1] = t0);
	let stringifiedParams = t0, t1;
	return $[2] === stringifiedParams ? t1 = $[3] : (t1 = JSON.parse(stringifiedParams), $[2] = stringifiedParams, $[3] = t1), t1;
}
function useListeningQuery(query, t0) {
	let $ = c(11), { params: t1, options: t2, initialValue: t3 } = t0, params = t1 === void 0 ? DEFAULT_PARAMS : t1, options = t2 === void 0 ? DEFAULT_OPTIONS : t2, initialValue = t3 === void 0 ? null : t3, [loading, setLoading] = useState(!0), [error, setError] = useState(null), [data, setData] = useState(initialValue), memoParams = useParams(params), memoOptions = useParams(options), subscription = useRef(null), documentStore = useDocumentStore(), t4, t5;
	$[0] !== documentStore || $[1] !== error || $[2] !== memoOptions || $[3] !== memoParams || $[4] !== query ? (t4 = () => {
		if (query && !error && !subscription.current) try {
			subscription.current = documentStore.listenQuery(query, memoParams, memoOptions).pipe(distinctUntilChanged(isEqual), catchError((err_0) => (console.error(err_0), setError(err_0), setLoading(!1), setData(null), err_0))).subscribe((documents) => {
				setData((current) => isEqual(current, documents) ? current : documents), setLoading(!1), setError(null);
			});
		} catch (t6) {
			let err = t6;
			console.error(err), setLoading(!1), setError(err);
		}
		return error && subscription.current && subscription.current.unsubscribe(), () => {
			subscription.current &&= (subscription?.current?.unsubscribe(), null);
		};
	}, t5 = [
		query,
		error,
		memoParams,
		memoOptions,
		documentStore
	], $[0] = documentStore, $[1] = error, $[2] = memoOptions, $[3] = memoParams, $[4] = query, $[5] = t4, $[6] = t5) : (t4 = $[5], t5 = $[6]), useEffect(t4, t5);
	let t6;
	return $[7] !== data || $[8] !== error || $[9] !== loading ? (t6 = {
		data,
		loading,
		error
	}, $[7] = data, $[8] = error, $[9] = loading, $[10] = t6) : t6 = $[10], t6;
}
function useOpenInNewPane(id, type) {
	let $ = c(6), routerContext = useContext(RouterContext), { routerPanesState, groupIndex } = usePaneRouter(), t0;
	return $[0] !== groupIndex || $[1] !== id || $[2] !== routerContext || $[3] !== routerPanesState || $[4] !== type ? (t0 = () => {
		if (!routerContext || !id || !type) return;
		let panes = [...routerPanesState];
		panes.splice(groupIndex + 1, 0, [{
			id,
			params: { type }
		}]);
		let href = routerContext.resolvePathFromState({ panes });
		routerContext.navigateUrl({ path: href });
	}, $[0] = groupIndex, $[1] = id, $[2] = routerContext, $[3] = routerPanesState, $[4] = type, $[5] = t0) : t0 = $[5], t0;
}
export { Cell, Feedback, Row, Table, UserSelectMenu, useImageUrlBuilder, useImageUrlBuilderImage, useListeningQuery, useOpenInNewPane, useProjectUsers };

//# sourceMappingURL=index.js.map