@oneuptime/common 14.0.12 → 14.0.13

package/build/dist/UI/Components/Pagination/PaginationSummary.js

@@ -0,0 +1,53 @@
+import PaginationCopy from "./PaginationCopy";
+import { toSentenceNoun } from "../Table/EmptyTableMessage";
+import { fillTemplate, translateTemplate, } from "../../Utils/TranslateTemplate";
+/**
+ * The line beside the controls: "Showing 21-30 of 240 monitors".
+ *
+ * English names the rows. The noun is the caller's, though: some callers
+ * translate it and some do not (the logs footer passes "logs"), and no locale
+ * file can hold every noun in the case its sentence needs - German alone
+ * wants "von 240 Monitoren", not "Monitore". So a locale says the same thing
+ * without the noun ("1-10 von 240"), which every language can do and which
+ * the list's own title makes unambiguous anyway.
+ *
+ * A locale has its own sentence when looking the noun-free one up gives back
+ * something other than its English - the same test the empty table message
+ * uses. English, a front end without locales and a unit test all fall through
+ * to the sentence with the noun in it.
+ */
+export const getPaginationSummary = (input) => {
+    const translate = input.translate || translateTemplate;
+    const inReadersLanguage = (nounFreeTemplate, values, englishSentence) => {
+        const translated = translate(nounFreeTemplate, values);
+        if (translated && translated !== fillTemplate(nounFreeTemplate, values)) {
+            return translated;
+        }
+        return englishSentence;
+    };
+    /*
+     * "Monitors" reads "monitors" mid-sentence, but "SLOs" and "API Keys" keep
+     * their acronyms - lower-casing every letter printed "slos".
+     */
+    const pluralNoun = toSentenceNoun(input.pluralLabel) || "items";
+    const singularNoun = toSentenceNoun(input.singularLabel) || "item";
+    if (input.itemRange.isEmpty) {
+        return inReadersLanguage(PaginationCopy.noItems, {}, `No ${pluralNoun}`);
+    }
+    const rangeText = input.itemRange.firstItemNumber === input.itemRange.lastItemNumber
+        ? input.itemRange.firstItemNumber.toLocaleString()
+        : `${input.itemRange.firstItemNumber.toLocaleString()}-${input.itemRange.lastItemNumber.toLocaleString()}`;
+    if (input.hasMore !== undefined) {
+        /*
+         * The count cannot be printed here - it is a lower bound that also
+         * includes the probe row the payload dropped. The trailing "+" is all
+         * that can be said about what comes after this page.
+         */
+        const range = `${rangeText}${input.hasMore ? "+" : ""}`;
+        return inReadersLanguage(PaginationCopy.showingRange, { range: range }, `Showing ${range} ${pluralNoun}`);
+    }
+    const total = input.totalItemsCount.toLocaleString();
+    return inReadersLanguage(PaginationCopy.showingRangeOfTotal, { range: rangeText, total: total }, `Showing ${rangeText} of ${total} ${input.totalItemsCount === 1 ? singularNoun : pluralNoun}`);
+};
+export default getPaginationSummary;
+//# sourceMappingURL=PaginationSummary.js.map

package/build/dist/UI/Components/Pagination/PaginationSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationSummary.js","sourceRoot":"","sources":["../../../../../UI/Components/Pagination/PaginationSummary.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAEL,YAAY,EACZ,iBAAiB,GAClB,MAAM,+BAA+B,CAAC;AAsBvC;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAA8C,CAC7E,KAA6B,EACrB,EAAE;IACV,MAAM,SAAS,GACb,KAAK,CAAC,SAAS,IAAI,iBAAiB,CAAC;IAQvC,MAAM,iBAAiB,GAA8B,CACnD,gBAAwB,EACxB,MAAsB,EACtB,eAAuB,EACf,EAAE;QACV,MAAM,UAAU,GAAW,SAAS,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QAE/D,IAAI,UAAU,IAAI,UAAU,KAAK,YAAY,CAAC,gBAAgB,EAAE,MAAM,CAAC,EAAE,CAAC;YACxE,OAAO,UAAU,CAAC;QACpB,CAAC;QAED,OAAO,eAAe,CAAC;IACzB,CAAC,CAAC;IAEF;;;OAGG;IACH,MAAM,UAAU,GAAW,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,OAAO,CAAC;IACxE,MAAM,YAAY,GAAW,cAAc,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,MAAM,CAAC;IAE3E,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;QAC5B,OAAO,iBAAiB,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,EAAE,CAAC,CAAC;IAC3E,CAAC;IAED,MAAM,SAAS,GACb,KAAK,CAAC,SAAS,CAAC,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC,cAAc;QAChE,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,cAAc,EAAE;QAClD,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,cAAc,EAAE,IAAI,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,cAAc,EAAE,EAAE,CAAC;IAE/G,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;QAChC;;;;WAIG;QACH,MAAM,KAAK,GAAW,GAAG,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAEhE,OAAO,iBAAiB,CACtB,cAAc,CAAC,YAAY,EAC3B,EAAE,KAAK,EAAE,KAAK,EAAE,EAChB,WAAW,KAAK,IAAI,UAAU,EAAE,CACjC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAW,KAAK,CAAC,eAAe,CAAC,cAAc,EAAE,CAAC;IAE7D,OAAO,iBAAiB,CACtB,cAAc,CAAC,mBAAmB,EAClC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAClC,WAAW,SAAS,OAAO,KAAK,IAC9B,KAAK,CAAC,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAC/C,EAAE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/build/dist/UI/Components/PeoplePicker/OwnersFormField.js

@@ -0,0 +1,59 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
+import { PeoplePickerKind } from "./PeoplePickerTypes";
+/*
+ * The one "Owners" field every form that asks for owners uses: people and
+ * teams in one picker (see PeoplePicker), where there used to be an
+ * "Owner - Teams" and an "Owner - Users" dropdown. React-free, so a form
+ * declared in a plain module (BurnRateRuleForm.ts, the Forms On Submit
+ * editor) can use it too.
+ *
+ * The picks are written to the same two form values the dropdowns wrote -
+ * ownerTeams and ownerUsers, unless the form names others - so nothing
+ * about what is saved changes. ModelForm saves a value that is a column of
+ * the form's model as that column (an owner rule's ownerTeams), and sends
+ * any other as misc data (a template's owners).
+ *
+ * The field's own key ("owners") only names the field in the form; nothing
+ * is sent under it.
+ */
+export const OWNERS_FORM_FIELD_KEY = "owners";
+export const OWNERS_ADD_BUTTON_TEXT = "Add owner";
+// The Owners field of every owner rule (the rules under Settings > Owner Rules).
+export const OWNER_RULE_OWNERS_DESCRIPTION = "When this rule matches, these people and teams are added as owners. Owners already assigned are not added twice.";
+// People first, then teams: the order the Owners page lists them in.
+export const getOwnersPeoplePickerConfig = (keys) => {
+    return {
+        kinds: [
+            {
+                kind: PeoplePickerKind.User,
+                valueKey: (keys === null || keys === void 0 ? void 0 : keys.usersKey) || "ownerUsers",
+            },
+            {
+                kind: PeoplePickerKind.Team,
+                valueKey: (keys === null || keys === void 0 ? void 0 : keys.teamsKey) || "ownerTeams",
+            },
+        ],
+        addButtonText: OWNERS_ADD_BUTTON_TEXT,
+        searchPlaceholder: "Search people or teams...",
+        emptyText: "No people or teams available.",
+    };
+};
+export const getOwnersFormField = (options) => {
+    const { fieldKey, teamsKey, usersKey } = options, rest = __rest(options, ["fieldKey", "teamsKey", "usersKey"]);
+    return Object.assign(Object.assign({ title: "Owners", required: false }, rest), { field: {
+            [fieldKey || OWNERS_FORM_FIELD_KEY]: true,
+        }, fieldType: FormFieldSchemaType.PeoplePicker, peoplePicker: getOwnersPeoplePickerConfig({ teamsKey, usersKey }), formOnly: true });
+};
+export default getOwnersFormField;
+//# sourceMappingURL=OwnersFormField.js.map

package/build/dist/UI/Components/PeoplePicker/OwnersFormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OwnersFormField.js","sourceRoot":"","sources":["../../../../../UI/Components/PeoplePicker/OwnersFormField.ts"],"names":[],"mappings":";;;;;;;;;;;AAEA,OAAO,mBAAmB,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAA2B,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEhF;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAW,QAAQ,CAAC;AAEtD,MAAM,CAAC,MAAM,sBAAsB,GAAW,WAAW,CAAC;AAE1D,iFAAiF;AACjF,MAAM,CAAC,MAAM,6BAA6B,GACxC,kHAAkH,CAAC;AASrH,qEAAqE;AACrE,MAAM,CAAC,MAAM,2BAA2B,GAET,CAC7B,IAA6B,EACJ,EAAE;IAC3B,OAAO;QACL,KAAK,EAAE;YACL;gBACE,IAAI,EAAE,gBAAgB,CAAC,IAAI;gBAC3B,QAAQ,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,KAAI,YAAY;aACzC;YACD;gBACE,IAAI,EAAE,gBAAgB,CAAC,IAAI;gBAC3B,QAAQ,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,KAAI,YAAY;aACzC;SACF;QACD,aAAa,EAAE,sBAAsB;QACrC,iBAAiB,EAAE,2BAA2B;QAC9C,SAAS,EAAE,+BAA+B;KAC3C,CAAC;AACJ,CAAC,CAAC;AAgBF,MAAM,CAAC,MAAM,kBAAkB,GAET,CACpB,OAAwC,EACxB,EAAE;IAClB,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,KAAc,OAAO,EAAhB,IAAI,UAAK,OAAO,EAAnD,oCAAyC,CAAU,CAAC;IAE1D,qCACE,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,KAAK,IACZ,IAAI,KACP,KAAK,EAAE;YACL,CAAC,QAAQ,IAAI,qBAAqB,CAAC,EAAE,IAAI;SACb,EAC9B,SAAS,EAAE,mBAAmB,CAAC,YAAY,EAC3C,YAAY,EAAE,2BAA2B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EACjE,QAAQ,EAAE,IAAI,IACd;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/build/dist/UI/Components/PeoplePicker/OwnersPicker.js

@@ -0,0 +1,30 @@
+import ObjectID from "../../../Types/ObjectID";
+import { getOwnersPeoplePickerConfig } from "./OwnersFormField";
+import PeoplePicker from "./PeoplePicker";
+import { getPeoplePickerKinds, PeoplePickerKind, toPeoplePickerIds, } from "./PeoplePickerTypes";
+import React from "react";
+/*
+ * The owners people picker outside a form: people and teams in one field,
+ * for a component that keeps owners as two lists of ids of its own - a
+ * monitor criteria's incident owners, the monitors a recommendation creates.
+ */
+const OWNERS_CONFIG = getOwnersPeoplePickerConfig();
+const toObjectIDs = (ids) => {
+    return (ids || []).map((id) => {
+        return new ObjectID(id);
+    });
+};
+const OwnersPicker = (props) => {
+    const value = {
+        [PeoplePickerKind.User]: toPeoplePickerIds(props.userIds),
+        [PeoplePickerKind.Team]: toPeoplePickerIds(props.teamIds),
+    };
+    return (React.createElement(PeoplePicker, { kinds: getPeoplePickerKinds(OWNERS_CONFIG), value: value, onChange: (next) => {
+            props.onChange({
+                userIds: toObjectIDs(next[PeoplePickerKind.User]),
+                teamIds: toObjectIDs(next[PeoplePickerKind.Team]),
+            });
+        }, addButtonText: OWNERS_CONFIG.addButtonText, searchPlaceholder: OWNERS_CONFIG.searchPlaceholder, emptyText: OWNERS_CONFIG.emptyText, ariaLabelledby: props.ariaLabelledby, disabled: props.disabled, error: props.error, dataTestId: props.dataTestId }));
+};
+export default OwnersPicker;
+//# sourceMappingURL=OwnersPicker.js.map

package/build/dist/UI/Components/PeoplePicker/OwnersPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OwnersPicker.js","sourceRoot":"","sources":["../../../../../UI/Components/PeoplePicker/OwnersPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EACL,oBAAoB,EAEpB,gBAAgB,EAEhB,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D;;;;GAIG;AAEH,MAAM,aAAa,GAA4B,2BAA2B,EAAE,CAAC;AAkB7E,MAAM,WAAW,GAAwD,CACvE,GAA8B,EACb,EAAE;IACnB,OAAO,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAU,EAAY,EAAE;QAC9C,OAAO,IAAI,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC1B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,YAAY,GAAsC,CACtD,KAAqB,EACP,EAAE;IAChB,MAAM,KAAK,GAAsB;QAC/B,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,OAAO,CAAC;QACzD,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,OAAO,CAAC;KAC1D,CAAC;IAEF,OAAO,CACL,oBAAC,YAAY,IACX,KAAK,EAAE,oBAAoB,CAAC,aAAa,CAAC,EAC1C,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,IAAuB,EAAE,EAAE;YACpC,KAAK,CAAC,QAAQ,CAAC;gBACb,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBACjD,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;aAClD,CAAC,CAAC;QACL,CAAC,EACD,aAAa,EAAE,aAAa,CAAC,aAAa,EAC1C,iBAAiB,EAAE,aAAa,CAAC,iBAAiB,EAClD,SAAS,EAAE,aAAa,CAAC,SAAS,EAClC,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,UAAU,EAAE,KAAK,CAAC,UAAU,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/dist/UI/Components/PeoplePicker/PeopleAvatar.js

@@ -0,0 +1,109 @@
+import IconProp from "../../../Types/Icon/IconProp";
+import ObjectID from "../../../Types/ObjectID";
+import Icon, { SizeProp } from "../Icon/Icon";
+import Image from "../Image/Image";
+import UserUtil from "../../Utils/User";
+import { getPeoplePickerKindDefinition, } from "./PeoplePickerKinds";
+import React from "react";
+const PERSON_AVATAR_PALETTE = [
+    { bg: "bg-gradient-to-br from-indigo-500 to-violet-600", ring: "ring-white" },
+    { bg: "bg-gradient-to-br from-sky-500 to-blue-600", ring: "ring-white" },
+    { bg: "bg-gradient-to-br from-fuchsia-500 to-pink-600", ring: "ring-white" },
+    {
+        bg: "bg-gradient-to-br from-emerald-500 to-teal-600",
+        ring: "ring-white",
+    },
+    { bg: "bg-gradient-to-br from-amber-500 to-orange-600", ring: "ring-white" },
+    { bg: "bg-gradient-to-br from-rose-500 to-red-600", ring: "ring-white" },
+    {
+        bg: "bg-gradient-to-br from-violet-500 to-purple-600",
+        ring: "ring-white",
+    },
+    { bg: "bg-gradient-to-br from-cyan-500 to-sky-600", ring: "ring-white" },
+];
+const GROUP_AVATAR_PALETTE = [
+    { bg: "bg-gradient-to-br from-slate-700 to-slate-900", ring: "ring-white" },
+    { bg: "bg-gradient-to-br from-gray-700 to-gray-900", ring: "ring-white" },
+    { bg: "bg-gradient-to-br from-stone-700 to-stone-900", ring: "ring-white" },
+    { bg: "bg-gradient-to-br from-zinc-700 to-zinc-900", ring: "ring-white" },
+    {
+        bg: "bg-gradient-to-br from-neutral-700 to-neutral-900",
+        ring: "ring-white",
+    },
+];
+const hashString = (text) => {
+    let hash = 0;
+    for (let i = 0; i < text.length; i++) {
+        hash = (hash * 31 + text.charCodeAt(i)) | 0;
+    }
+    return Math.abs(hash);
+};
+export const getPeopleAvatarPalette = (kind, name) => {
+    const palette = getPeoplePickerKindDefinition(kind).avatar.type === "person"
+        ? PERSON_AVATAR_PALETTE
+        : GROUP_AVATAR_PALETTE;
+    return palette[hashString(name) % palette.length];
+};
+export const getPeopleInitials = (name) => {
+    const parts = name
+        .trim()
+        .split(/\s+/)
+        .filter((part) => {
+        return part.length > 0;
+    });
+    if (parts.length === 0) {
+        return "?";
+    }
+    if (parts.length === 1) {
+        return (parts[0][0] || "?").toUpperCase();
+    }
+    const first = parts[0][0] || "";
+    const last = parts[parts.length - 1][0] || "";
+    return (first + last).toUpperCase();
+};
+const SIZE_CLASSES = {
+    lg: "h-14 w-14 text-base",
+    md: "h-11 w-11 text-sm",
+    sm: "h-8 w-8 text-xs",
+    xs: "h-7 w-7 text-[10px]",
+    chip: "h-6 w-6 text-[10px]",
+};
+const BADGE_SIZE_CLASSES = {
+    lg: "h-4 w-4 -bottom-0.5 -right-0.5",
+    md: "h-4 w-4 -bottom-0.5 -right-0.5",
+    sm: "h-3.5 w-3.5 -bottom-0.5 -right-0.5",
+    xs: "h-3 w-3 -bottom-0 -right-0",
+    chip: "h-3 w-3 -bottom-0.5 -right-0.5",
+};
+const BADGE_ICON_CLASSES = {
+    lg: "h-2.5 w-2.5",
+    md: "h-2.5 w-2.5",
+    sm: "h-2.5 w-2.5",
+    xs: "h-1.5 w-1.5",
+    chip: "h-2 w-2",
+};
+const PeopleAvatar = (props) => {
+    const size = props.size || "md";
+    const { item } = props;
+    const style = getPeoplePickerKindDefinition(item.kind).avatar;
+    const sizeClasses = SIZE_CLASSES[size];
+    const userId = item.userId ? item.userId.toString() : "";
+    if (style.type === "person" && item.hasProfilePicture && userId) {
+        return (React.createElement(Image, { className: `${sizeClasses} flex-shrink-0 rounded-full object-cover ring-2 ring-white shadow-sm bg-gray-100`, imageUrl: UserUtil.getProfilePictureRoute(new ObjectID(userId)).toString(), alt: item.name }));
+    }
+    if (style.type === "icon") {
+        return (React.createElement("div", { className: `${sizeClasses} flex flex-shrink-0 items-center justify-center rounded-full bg-gray-100 text-gray-600 ring-2 ring-white`, "aria-hidden": "true" },
+            React.createElement(Icon, { icon: style.icon, className: "h-1/2 w-1/2" })));
+    }
+    const palette = getPeopleAvatarPalette(item.kind, item.name);
+    const avatar = (React.createElement("div", { className: `${sizeClasses} ${palette.bg} flex flex-shrink-0 select-none items-center justify-center rounded-full font-semibold text-white shadow-sm ring-2 ${palette.ring}`, "aria-hidden": "true" }, getPeopleInitials(item.name)));
+    if (style.type !== "group" || props.showGroupBadge === false) {
+        return avatar;
+    }
+    return (React.createElement("div", { className: "relative inline-flex flex-shrink-0" },
+        avatar,
+        React.createElement("div", { className: `absolute ${BADGE_SIZE_CLASSES[size]} flex items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-gray-200`, "aria-hidden": "true" },
+            React.createElement(Icon, { icon: IconProp.UserGroup, className: `${BADGE_ICON_CLASSES[size]} text-gray-600`, size: SizeProp.Smaller }))));
+};
+export default PeopleAvatar;
+//# sourceMappingURL=PeopleAvatar.js.map

package/build/dist/UI/Components/PeoplePicker/PeopleAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeopleAvatar.js","sourceRoot":"","sources":["../../../../../UI/Components/PeoplePicker/PeopleAvatar.tsx"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/PeoplePicker/PeopleList.js

@@ -0,0 +1,72 @@
+import IconProp from "../../../Types/Icon/IconProp";
+import { translateTemplate } from "../../Utils/TranslateTemplate";
+import useTranslateValue from "../../Utils/Translation";
+import Icon from "../Icon/Icon";
+import PeopleAvatar from "./PeopleAvatar";
+import { getPeoplePickerKindDefinition } from "./PeoplePickerKinds";
+import { getPeoplePickerOptionKey, } from "./PeoplePickerTypes";
+import usePeopleOptions from "./usePeopleOptions";
+import React from "react";
+/*
+ * Picks drawn as chips - an avatar and a name - in the picker itself (with a
+ * remove button), and read-only wherever a record shows who it names: a
+ * rule's view page, a form's summary step, a monitor's criteria.
+ */
+export const REMOVE_PICK_TEMPLATE = "Remove {{name}}";
+export const PeopleChip = (props) => {
+    const { translateString } = useTranslateValue();
+    const option = props.option;
+    const tag = getPeoplePickerKindDefinition(props.kind).tag;
+    const name = option
+        ? option.isUnknown
+            ? translateString(option.name) || option.name
+            : option.name
+        : translateString("Loading...") || "Loading...";
+    return (React.createElement("span", { "data-testid": "people-chip", "data-kind": props.kind, "data-id": props.id, className: `inline-flex max-w-full items-center gap-1.5 rounded-full bg-white py-0.5 pl-0.5 text-sm text-gray-900 ring-1 ring-inset ring-gray-200 ${props.onRemove ? "pr-1" : "pr-2.5"}` },
+        React.createElement(PeopleAvatar, { size: "chip", item: {
+                kind: props.kind,
+                name: option && !option.isUnknown ? option.name : "?",
+                userId: option === null || option === void 0 ? void 0 : option.userId,
+                hasProfilePicture: option === null || option === void 0 ? void 0 : option.hasProfilePicture,
+            } }),
+        React.createElement("span", { className: `min-w-0 truncate ${!option || option.isUnknown ? "italic text-gray-500" : ""}` }, name),
+        tag && (React.createElement("span", { className: "flex-shrink-0 text-xs text-gray-500" }, translateString(tag) || tag)),
+        props.onRemove && (React.createElement("button", { type: "button", onClick: props.onRemove, disabled: props.disabled, "aria-label": translateTemplate(REMOVE_PICK_TEMPLATE, {
+                name: name,
+            }), title: translateTemplate(REMOVE_PICK_TEMPLATE, { name: name }), className: "flex flex-shrink-0 items-center justify-center rounded-full p-0.5 text-gray-400 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-50" },
+            React.createElement(Icon, { icon: IconProp.Close, className: "h-3.5 w-3.5" })))));
+};
+// Picks already known by name, read-only.
+export const PeopleList = (props) => {
+    const { translateString } = useTranslateValue();
+    if (props.options.length === 0) {
+        const noneText = props.noneText || "None";
+        return (React.createElement("span", { "data-testid": props.dataTestId || "people-list", className: "text-sm text-gray-500" }, translateString(noneText) || noneText));
+    }
+    return (React.createElement("div", { "data-testid": props.dataTestId || "people-list", className: "flex flex-wrap items-center gap-1.5" }, props.options.map((option) => {
+        return (React.createElement(PeopleChip, { key: getPeoplePickerOptionKey(option.kind, option.id), kind: option.kind, id: option.id, option: option }));
+    })));
+};
+// Picks known only by id - a form's summary step - looked up, read-only.
+export const PeopleListFromIds = (props) => {
+    const { translateString } = useTranslateValue();
+    const lookup = usePeopleOptions({
+        kinds: props.kinds,
+        value: props.value,
+    });
+    const picks = [];
+    for (const kind of props.kinds) {
+        for (const id of props.value[kind] || []) {
+            picks.push({ kind, id });
+        }
+    }
+    if (picks.length === 0) {
+        const noneText = props.noneText || "None";
+        return (React.createElement("span", { "data-testid": props.dataTestId || "people-list", className: "text-sm text-gray-500" }, translateString(noneText) || noneText));
+    }
+    return (React.createElement("div", { "data-testid": props.dataTestId || "people-list", className: "flex flex-wrap items-center gap-1.5" }, picks.map((pick) => {
+        return (React.createElement(PeopleChip, { key: getPeoplePickerOptionKey(pick.kind, pick.id), kind: pick.kind, id: pick.id, option: lookup.getOption(pick.kind, pick.id) }));
+    })));
+};
+export default PeopleList;
+//# sourceMappingURL=PeopleList.js.map

package/build/dist/UI/Components/PeoplePicker/PeopleList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeopleList.js","sourceRoot":"","sources":["../../../../../UI/Components/PeoplePicker/PeopleList.tsx"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/PeoplePicker/PeoplePicker.js

@@ -0,0 +1,93 @@
+import IconProp from "../../../Types/Icon/IconProp";
+import useAnchoredFieldPopup from "../../Types/UseAnchoredFieldPopup";
+import useTranslateValue from "../../Utils/Translation";
+import Icon from "../Icon/Icon";
+import { PeopleChip } from "./PeopleList";
+import PeopleSearchPopup, { PEOPLE_SEARCH_POPUP_MAX_HEIGHT_PX, PEOPLE_SEARCH_POPUP_WIDTH_PX, } from "./PeopleSearchPopup";
+import { addToPeoplePickerValue, getPeoplePickerOptionKey, removeFromPeoplePickerValue, } from "./PeoplePickerTypes";
+import usePeopleOptions from "./usePeopleOptions";
+import React, { useEffect, useId, useMemo, useRef, } from "react";
+const PeoplePicker = (props) => {
+    const { translateString } = useTranslateValue();
+    const errorId = `${useId()}-people-picker-error`;
+    const popup = useAnchoredFieldPopup({
+        popupMaxHeight: PEOPLE_SEARCH_POPUP_MAX_HEIGHT_PX,
+        popupWidth: PEOPLE_SEARCH_POPUP_WIDTH_PX,
+    });
+    const lookup = usePeopleOptions({
+        kinds: props.kinds,
+        value: props.value,
+    });
+    /*
+     * The value the latest change was made from. Picks made in a row, before
+     * the form has handed the last change back, must not undo each other.
+     */
+    const latestValueRef = useRef(props.value);
+    useEffect(() => {
+        latestValueRef.current = props.value;
+    }, [props.value]);
+    const wasOpenRef = useRef(false);
+    useEffect(() => {
+        var _a;
+        if (wasOpenRef.current && !popup.isPopupOpen) {
+            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
+        }
+        wasOpenRef.current = popup.isPopupOpen;
+    }, [popup.isPopupOpen]);
+    const picks = useMemo(() => {
+        const result = [];
+        for (const kind of props.kinds) {
+            for (const id of props.value[kind] || []) {
+                result.push({ kind, id });
+            }
+        }
+        return result;
+    }, [props.kinds.join(","), props.value]);
+    const selectedKeys = useMemo(() => {
+        return new Set(picks.map((pick) => {
+            return getPeoplePickerOptionKey(pick.kind, pick.id);
+        }));
+    }, [picks]);
+    const change = (next) => {
+        latestValueRef.current = next;
+        props.onChange(next);
+    };
+    const remove = (kind, id) => {
+        const existing = (latestValueRef.current[kind] || []).find((candidate) => {
+            return candidate.toLowerCase() === id.toLowerCase();
+        });
+        change(removeFromPeoplePickerValue(latestValueRef.current, kind, existing || id));
+    };
+    const onPick = (option, isPicked) => {
+        lookup.remember([option]);
+        if (isPicked) {
+            remove(option.kind, option.id);
+            return;
+        }
+        change(addToPeoplePickerValue(latestValueRef.current, option.kind, option.id));
+    };
+    const addButtonText = props.addButtonText || "Add";
+    const isInteractive = !props.disabled;
+    return (React.createElement("div", { "data-testid": props.dataTestId || "people-picker" },
+        React.createElement("div", { role: "group", "aria-labelledby": props.ariaLabelledby, "aria-describedby": props.error ? errorId : undefined, className: "flex flex-wrap items-center gap-2" },
+            React.createElement("div", { ref: popup.anchorRef, className: "inline-flex" },
+                React.createElement("button", { type: "button", "data-testid": "people-picker-add-button", disabled: !isInteractive, "aria-haspopup": "dialog", "aria-expanded": popup.isPopupOpen, "aria-controls": popup.isPopupOpen ? popup.popupId : undefined, onClick: () => {
+                        if (isInteractive) {
+                            popup.togglePopup();
+                        }
+                    }, onKeyDown: isInteractive ? popup.onTriggerKeyDown : undefined, className: "inline-flex items-center gap-1.5 rounded-full border border-dashed border-gray-300 bg-white px-3 py-1 text-sm font-medium text-gray-600 transition-colors hover:border-gray-400 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50" },
+                    React.createElement(Icon, { icon: IconProp.Add, className: "h-4 w-4" }),
+                    React.createElement("span", null, translateString(addButtonText) || addButtonText))),
+            picks.map((pick) => {
+                return (React.createElement(PeopleChip, { key: getPeoplePickerOptionKey(pick.kind, pick.id), kind: pick.kind, id: pick.id, option: lookup.getOption(pick.kind, pick.id), disabled: !isInteractive, onRemove: isInteractive
+                        ? () => {
+                            remove(pick.kind, pick.id);
+                        }
+                        : undefined }));
+            })),
+        lookup.error && (React.createElement("p", { className: "mt-1 text-sm text-gray-500" }, lookup.error)),
+        props.error && (React.createElement("p", { id: errorId, role: "alert", "data-testid": "error-message", className: "mt-1 text-sm text-red-400" }, props.error)),
+        React.createElement(PeopleSearchPopup, { popup: popup, kinds: props.kinds, selectedKeys: selectedKeys, selectionMode: "toggle", onPick: onPick, onOptionsLoaded: lookup.remember, searchPlaceholder: props.searchPlaceholder, emptyText: props.emptyText, ariaLabel: addButtonText })));
+};
+export default PeoplePicker;
+//# sourceMappingURL=PeoplePicker.js.map

package/build/dist/UI/Components/PeoplePicker/PeoplePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeoplePicker.js","sourceRoot":"","sources":["../../../../../UI/Components/PeoplePicker/PeoplePicker.tsx"],"names":[],"mappings":"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"}