@cognite/reveal-components 1.0.2 → 1.48535.0

package/dist/ui/components/commandBased/pointsOfInterest/PoiInfoSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/ui/components/commandBased/pointsOfInterest/PoiInfoSection.tsx"],"sourcesContent":["import { type ChangeEvent, type FocusEvent, type ReactNode } from 'react';\n\nimport { IconLoader2 } from '@tabler/icons-react';\n\nimport { Avatar, AvatarFallback } from '@cognite/aura/components/avatar';\nimport { Button } from '@cognite/aura/components/button';\nimport { Input } from '@cognite/aura/components/input';\nimport { Label } from '@cognite/aura/components/label';\nimport { Textarea } from '@cognite/aura/components/textarea';\n\nimport {\n  getPointOfInterestKey,\n  PointsOfInterestStatus,\n  type PointOfInterest,\n} from '../../../../domains/pointsOfInterest/types';\nimport { useTranslation } from '../../../../ui/components/i18n/I18n';\nimport { InstanceLabel } from '../../../../ui/components/InstanceLabel';\nimport { formatDateTime } from '../../../../utilities/date-time-utils';\nimport { type InstanceReference } from '../../../../utilities/instanceIds';\nimport { TextWithClickableLink } from '../../../../utilities/TextWithClickableLink';\n\nimport { getAvatarInitials, getAvatarVariant } from './avatarUtils';\nimport { useEditPoiInfoSection } from './useEditPoiInfoSection';\nimport { usePendingPoiInfoSection } from './usePendingPoiInfoSection';\nimport { useSelectedPoi } from './useSelectedPoi';\n\nexport const PoiInfoSection = (): ReactNode => {\n  const selectedPoi = useSelectedPoi();\n\n  if (selectedPoi === undefined) {\n    return undefined;\n  }\n\n  if (selectedPoi.status === PointsOfInterestStatus.PendingCreation) {\n    return (\n      <PendingPoiInfoSection\n        key={getPointOfInterestKey(selectedPoi)}\n        selectedPoi={selectedPoi}\n      />\n    );\n  }\n\n  if (selectedPoi.status === PointsOfInterestStatus.PendingEditing) {\n    return (\n      <EditPoiInfoSection\n        key={getPointOfInterestKey(selectedPoi)}\n        selectedPoi={selectedPoi}\n      />\n    );\n  }\n\n  return <ReadOnlyPoiInfoSection selectedPoi={selectedPoi} />;\n};\n\nconst ReadOnlyPoiInfoSection = ({\n  selectedPoi,\n}: {\n  selectedPoi: PointOfInterest<unknown>;\n}): ReactNode => {\n  const { t } = useTranslation();\n  const { name, description } = selectedPoi.properties;\n  return (\n    <div className=\"flex flex-col justify-between gap-2 mt-4\">\n      <div className=\"flex flex-col\">\n        <Label htmlFor=\"poi-name\">{t({ key: 'NAME' })}*</Label>\n        <Input id=\"poi-name\" value={name} readOnly />\n      </div>\n      <div className=\"flex flex-col\">\n        <Label htmlFor=\"poi-description\">{t({ key: 'DESCRIPTION' })}</Label>\n        <ReadOnlyPoiDescription description={description} />\n      </div>\n      {selectedPoi.properties.instanceRef !== undefined && (\n        <div className=\"flex flex-col\">\n          <Label>{t({ key: 'ASSET' })}</Label>\n          <InstanceLabel instance={selectedPoi.properties.instanceRef} />\n        </div>\n      )}\n      <PoiMetadataSection selectedPoi={selectedPoi} />\n    </div>\n  );\n};\n\nfunction ReadOnlyPoiDescription({\n  description,\n}: {\n  description: string | undefined;\n}): ReactNode {\n  const { t } = useTranslation();\n  const trimmedDescription = description?.trim();\n  const isEmpty = trimmedDescription === undefined || trimmedDescription === '';\n\n  const textColorClass = isEmpty ? 'text-muted-foreground' : 'text-foreground';\n\n  return (\n    <p\n      className={`min-h-9 rounded-lg bg-muted-background py-1.75 pl-2 pr-1 text-sm leading-5 tracking-tight whitespace-pre-wrap break-words ${textColorClass}`}\n    >\n      {isEmpty ? (\n        t({ key: 'DESCRIPTION_PLACEHOLDER' })\n      ) : (\n        <TextWithClickableLink content={trimmedDescription} />\n      )}\n    </p>\n  );\n}\n\nexport const PoiMetadataSection = ({\n  selectedPoi,\n}: {\n  selectedPoi: PointOfInterest<unknown>;\n}): ReactNode => {\n  const { t, currentLanguage } = useTranslation();\n  const { createdTime, lastUpdatedTime, ownerId } = selectedPoi.properties;\n\n  const hasOwner = ownerId !== undefined && ownerId !== '';\n  const hasCreatedTime = createdTime !== undefined;\n  const hasUpdatedTime = lastUpdatedTime !== undefined;\n\n  if (!hasOwner && !hasCreatedTime && !hasUpdatedTime) {\n    return null;\n  }\n\n  return (\n    <div className=\"mb-2 flex flex-col gap-0.5 pt-1\">\n      {hasOwner && (\n        <div className=\"flex flex-row items-center gap-2 pb-1\">\n          <Avatar variant={getAvatarVariant(ownerId)} sizes=\"xxsm\">\n            <AvatarFallback>{getAvatarInitials(ownerId)}</AvatarFallback>\n          </Avatar>\n          <span className=\"text-xs text-muted-foreground\">{ownerId}</span>\n        </div>\n      )}\n      {hasCreatedTime && (\n        <span className=\"text-xs text-muted-foreground\">\n          {t({ key: 'CREATED' })}{' '}\n          {formatDateTime({\n            date: createdTime,\n            showAbsolute: true,\n            language: currentLanguage,\n          })}\n        </span>\n      )}\n      {hasUpdatedTime && (\n        <span className=\"text-xs text-muted-foreground\">\n          {t({ key: 'UPDATED' })}{' '}\n          {formatDateTime({\n            date: lastUpdatedTime,\n            showAbsolute: true,\n            language: currentLanguage,\n          })}\n        </span>\n      )}\n    </div>\n  );\n};\n\nconst PendingPoiInfoSection = ({\n  selectedPoi,\n}: {\n  selectedPoi: PointOfInterest<unknown>;\n}): ReactNode => {\n  const { t } = useTranslation();\n  const {\n    name,\n    setName,\n    description,\n    setDescription,\n    instanceRef,\n    isSubmitting,\n    errorMessage,\n    canSubmit,\n    handleSave,\n    handleCancel,\n  } = usePendingPoiInfoSection(selectedPoi);\n\n  return (\n    <PoiEditableFieldsForm\n      t={t}\n      name={name}\n      setName={setName}\n      description={description}\n      setDescription={setDescription}\n      instanceRef={instanceRef}\n      isSubmitting={isSubmitting}\n      errorMessage={errorMessage}\n      canSubmit={canSubmit}\n      onSave={handleSave}\n      onCancel={handleCancel}\n    />\n  );\n};\n\nconst EditPoiInfoSection = ({\n  selectedPoi,\n}: {\n  selectedPoi: PointOfInterest<unknown>;\n}): ReactNode => {\n  const { t } = useTranslation();\n  const {\n    name,\n    setName,\n    description,\n    setDescription,\n    instanceRef,\n    isSubmitting,\n    errorMessage,\n    canSubmit,\n    handleSave,\n    handleCancel,\n  } = useEditPoiInfoSection(selectedPoi);\n\n  return (\n    <PoiEditableFieldsForm\n      t={t}\n      name={name}\n      setName={setName}\n      description={description}\n      setDescription={setDescription}\n      instanceRef={instanceRef}\n      isSubmitting={isSubmitting}\n      errorMessage={errorMessage}\n      canSubmit={canSubmit}\n      onSave={handleSave}\n      onCancel={handleCancel}\n    />\n  );\n};\n\ntype PoiEditableFieldsFormProps = {\n  t: ReturnType<typeof useTranslation>['t'];\n  name: string;\n  setName: (name: string) => void;\n  description: string;\n  setDescription: (description: string) => void;\n  instanceRef: InstanceReference | undefined;\n  isSubmitting: boolean;\n  errorMessage: string | undefined;\n  canSubmit: boolean;\n  onSave: () => void;\n  onCancel: () => void;\n};\n\nconst PoiEditableFieldsForm = ({\n  t,\n  name,\n  setName,\n  description,\n  setDescription,\n  instanceRef,\n  isSubmitting,\n  errorMessage,\n  canSubmit,\n  onSave,\n  onCancel,\n}: PoiEditableFieldsFormProps): ReactNode => {\n  return (\n    <div className=\"flex flex-col justify-between gap-2 mt-4\">\n      <div className=\"flex flex-col\">\n        <Label htmlFor=\"poi-name\">{t({ key: 'NAME' })}*</Label>\n        <Input\n          id=\"poi-name\"\n          value={name}\n          autoFocus\n          disabled={isSubmitting}\n          onFocus={(event: FocusEvent<HTMLInputElement>) => {\n            event.currentTarget.select();\n          }}\n          onChange={(event: ChangeEvent<HTMLInputElement>) => {\n            setName(event.target.value);\n          }}\n          placeholder={t({ key: 'NAME' })}\n        />\n      </div>\n      <div className=\"flex flex-col\">\n        <Label htmlFor=\"poi-description\">{t({ key: 'DESCRIPTION' })}</Label>\n        <Textarea\n          id=\"poi-description\"\n          placeholder={t({ key: 'POINT_OF_INTEREST_DESCRIPTION_PLACEHOLDER' })}\n          value={description}\n          disabled={isSubmitting}\n          onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {\n            setDescription(event.target.value);\n          }}\n        />\n      </div>\n      {instanceRef !== undefined && (\n        <div className=\"flex flex-col\">\n          <Label>{t({ key: 'ASSET' })}</Label>\n          <InstanceLabel instance={instanceRef} />\n        </div>\n      )}\n      {errorMessage !== undefined && (\n        <p className=\"text-sm text-destructive-foreground\" role=\"alert\">\n          {errorMessage}\n        </p>\n      )}\n      <div className=\"flex gap-2 justify-end mt-2\">\n        <Button variant=\"secondary\" disabled={isSubmitting} onClick={onCancel}>\n          {t({ key: 'CANCEL' })}\n        </Button>\n        <Button\n          style={{ color: 'white' }}\n          disabled={!canSubmit}\n          onClick={onSave}\n        >\n          {isSubmitting ? (\n            <IconLoader2 className=\"size-4 animate-spin\" aria-hidden />\n          ) : (\n            t({ key: 'SAVE' })\n          )}\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["IconLoader2","Avatar","AvatarFallback","Button","Input","Label","Textarea","getPointOfInterestKey","PointsOfInterestStatus","useTranslation","InstanceLabel","formatDateTime","TextWithClickableLink","getAvatarInitials","getAvatarVariant","useEditPoiInfoSection","usePendingPoiInfoSection","useSelectedPoi","PoiInfoSection","selectedPoi","undefined","status","PendingCreation","PendingPoiInfoSection","PendingEditing","EditPoiInfoSection","ReadOnlyPoiInfoSection","t","name","description","properties","div","className","htmlFor","key","id","value","readOnly","ReadOnlyPoiDescription","instanceRef","instance","PoiMetadataSection","trimmedDescription","trim","isEmpty","textColorClass","p","content","currentLanguage","createdTime","lastUpdatedTime","ownerId","hasOwner","hasCreatedTime","hasUpdatedTime","variant","sizes","span","date","showAbsolute","language","setName","setDescription","isSubmitting","errorMessage","canSubmit","handleSave","handleCancel","PoiEditableFieldsForm","onSave","onCancel","autoFocus","disabled","onFocus","event","currentTarget","select","onChange","target","placeholder","role","onClick","style","color","aria-hidden"],"mappings":"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"}

package/dist/ui/components/commandBased/pointsOfInterest/PoiList.d.ts

@@ -1,18 +1,18 @@
-import { ReactNode } from 'react';
-import { PointOfInterest } from '../../../../domains/pointsOfInterest/types';
+import { type ReactNode } from "react";
+import { type PointOfInterest } from "../../../../domains/pointsOfInterest/types";
 /**
- * A filter for Points of interests
- */
+* A filter for Points of interests
+*/
 export type PoiFilter = {
-    /**
-     * Checks if the PoI title or ID contains the string
-     */
-    contains: string;
+	/**
+	* Checks if the PoI title or ID contains the string
+	*/
+	contains: string;
 };
 export type PoiListProps = {
-    onRowClick?: (poi: PointOfInterest<unknown>) => void;
-    filter?: PoiFilter;
-    pageLimit?: number;
-    values?: Array<PointOfInterest<unknown>>;
+	onRowClick?: (poi: PointOfInterest<unknown>) => void;
+	filter?: PoiFilter;
+	pageLimit?: number;
+	values?: Array<PointOfInterest<unknown>>;
 };
-export declare const PoiList: ({ onRowClick, filter, pageLimit, values, }: PoiListProps) => ReactNode;
+export declare const PoiList: ({ onRowClick, filter, pageLimit, values }: PoiListProps) => ReactNode;

package/dist/ui/components/commandBased/pointsOfInterest/PoiList.js

@@ -1,64 +1,100 @@
-import { useTranslation as e } from "../../i18n/I18n.js";
-import { usePoiDomainObject as t } from "./usePoiDomainObject.js";
-import { useSelectedPoi as n } from "./useSelectedPoi.js";
-import { useFilterPointsOfInterest as r } from "./useFilterPointsOfInterest.js";
-import { usePointsOfInterest as i } from "./usePointsOfInterest.js";
-import { useCallback as a, useMemo as o, useState as s } from "react";
-import { take as c } from "lodash-es";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Button as d } from "@cognite/aura/components/button";
-//#region libs/shared/reveal-components/src/ui/components/commandBased/pointsOfInterest/PoiList.tsx
-var f = ({ onRowClick: f, filter: p, pageLimit: m = Infinity, values: h }) => {
-	let { t: g } = e(), _ = i(), v = n(), [y, b] = s(m), x = r(_, p), S = h ?? x, C = S.length > y, w = t(), T = o(() => c(S, y).map((e) => ({
-		id: JSON.stringify(e.id),
-		name: e.properties.name ?? JSON.stringify(e.id),
-		poi: e
-	})), [S, y]), E = a(() => {
-		C && b((e) => Math.min(S.length, e + m));
-	}, [
-		S,
-		b,
-		C,
-		m
-	]), D = JSON.stringify(v?.id);
-	return /* @__PURE__ */ u("div", {
-		className: "flex flex-col",
-		children: [/* @__PURE__ */ u("table", {
-			className: "w-full border-collapse text-sm",
-			children: [/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ l("tr", {
-				className: "border-y border-border bg-background",
-				children: /* @__PURE__ */ l("th", {
-					className: "h-9 px-3 pl-4 text-left text-sm font-medium text-muted-foreground",
-					children: g({ key: "NAME" })
-				})
-			}) }), /* @__PURE__ */ l("tbody", { children: T.map((e) => {
-				let t = e.id === D, n = () => {
-					w?.focusOn(e.poi), f?.(e.poi);
-				};
-				return /* @__PURE__ */ l("tr", {
-					role: "button",
-					tabIndex: 0,
-					"aria-pressed": t,
-					className: `h-9 cursor-pointer border-b border-border transition-colors hover:bg-active-muted-background ${t ? "bg-active-muted-background" : "bg-background"}`,
-					onClick: n,
-					onKeyDown: (e) => {
-						(e.key === "Enter" || e.key === " ") && (e.preventDefault(), n());
-					},
-					children: /* @__PURE__ */ l("td", {
-						className: "px-3 pl-4 align-middle",
-						children: e.name
-					})
-				}, e.id);
-			}) })]
-		}), /* @__PURE__ */ l("div", {
-			className: "flex flex-row justify-center gap-4 pt-2",
-			children: C && /* @__PURE__ */ l(d, {
-				onClick: E,
-				style: { color: "white" },
-				children: g({ key: "SHOW_MORE" })
-			})
-		})]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { take } from "lodash-es";
+import { Button } from "@cognite/aura/components/button";
+import { useTranslation } from "../../i18n/I18n.js";
+import { useFilterPointsOfInterest } from "./useFilterPointsOfInterest.js";
+import { usePoiDomainObject } from "./usePoiDomainObject.js";
+import { usePointsOfInterest } from "./usePointsOfInterest.js";
+import { useSelectedPoi } from "./useSelectedPoi.js";
+export const PoiList = ({ onRowClick, filter, pageLimit = Infinity, values })=>{
+    const { t } = useTranslation();
+    const pois = usePointsOfInterest();
+    const selectedPoi = useSelectedPoi();
+    const [currentLimit, setCurrentLimit] = useState(pageLimit);
+    const filteredPois = useFilterPointsOfInterest(pois, filter);
+    const relevantPois = values ?? filteredPois;
+    const hasMoreData = relevantPois.length > currentLimit;
+    const poiObject = usePoiDomainObject();
+    const rowData = useMemo(()=>take(relevantPois, currentLimit).map((poi)=>({
+                id: JSON.stringify(poi.id),
+                name: poi.properties.name ?? JSON.stringify(poi.id),
+                poi
+            })), [
+        relevantPois,
+        currentLimit
+    ]);
+    const handleShowMoreCallback = useCallback(()=>{
+        if (!hasMoreData) {
+            return;
+        }
+        setCurrentLimit((lastLimit)=>Math.min(relevantPois.length, lastLimit + pageLimit));
+    }, [
+        relevantPois,
+        setCurrentLimit,
+        hasMoreData,
+        pageLimit
+    ]);
+    const selectedRowId = JSON.stringify(selectedPoi?.id);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col",
+        children: [
+            /*#__PURE__*/ _jsxs("table", {
+                className: "w-full border-collapse text-sm",
+                children: [
+                    /*#__PURE__*/ _jsx("thead", {
+                        children: /*#__PURE__*/ _jsx("tr", {
+                            className: "border-y border-border bg-background",
+                            children: /*#__PURE__*/ _jsx("th", {
+                                className: "h-9 px-3 pl-4 text-left text-sm font-medium text-muted-foreground",
+                                children: t({
+                                    key: 'NAME'
+                                })
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("tbody", {
+                        children: rowData.map((row)=>{
+                            const isSelected = row.id === selectedRowId;
+                            const handleSelect = ()=>{
+                                poiObject?.focusOn(row.poi);
+                                onRowClick?.(row.poi);
+                            };
+                            return /*#__PURE__*/ _jsx("tr", {
+                                role: "button",
+                                tabIndex: 0,
+                                "aria-pressed": isSelected,
+                                className: `h-9 cursor-pointer border-b border-border transition-colors hover:bg-active-muted-background ${isSelected ? 'bg-active-muted-background' : 'bg-background'}`,
+                                onClick: handleSelect,
+                                onKeyDown: (event)=>{
+                                    if (event.key === 'Enter' || event.key === ' ') {
+                                        event.preventDefault();
+                                        handleSelect();
+                                    }
+                                },
+                                children: /*#__PURE__*/ _jsx("td", {
+                                    className: "px-3 pl-4 align-middle",
+                                    children: row.name
+                                })
+                            }, row.id);
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex flex-row justify-center gap-4 pt-2",
+                children: hasMoreData && /*#__PURE__*/ _jsx(Button, {
+                    onClick: handleShowMoreCallback,
+                    style: {
+                        color: 'white'
+                    },
+                    children: t({
+                        key: 'SHOW_MORE'
+                    })
+                })
+            })
+        ]
+    });
 };
-//#endregion
-export { f as PoiList };
+
+//# sourceMappingURL=PoiList.js.map

package/dist/ui/components/commandBased/pointsOfInterest/PoiList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/ui/components/commandBased/pointsOfInterest/PoiList.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { take } from 'lodash-es';\n\nimport { Button } from '@cognite/aura/components/button';\n\nimport { type PointOfInterest } from '../../../../domains/pointsOfInterest/types';\nimport { useTranslation } from '../../i18n/I18n';\n\nimport { useFilterPointsOfInterest } from './useFilterPointsOfInterest';\nimport { usePoiDomainObject } from './usePoiDomainObject';\nimport { usePointsOfInterest } from './usePointsOfInterest';\nimport { useSelectedPoi } from './useSelectedPoi';\n\ntype RowType = {\n  id: string;\n  name: string;\n  poi: PointOfInterest<unknown>;\n};\n\n/**\n * A filter for Points of interests\n */\nexport type PoiFilter = {\n  /**\n   * Checks if the PoI title or ID contains the string\n   */\n  contains: string;\n};\n\nexport type PoiListProps = {\n  onRowClick?: (poi: PointOfInterest<unknown>) => void;\n  filter?: PoiFilter;\n  pageLimit?: number;\n  values?: Array<PointOfInterest<unknown>>;\n};\n\nexport const PoiList = ({\n  onRowClick,\n  filter,\n  pageLimit = Infinity,\n  values,\n}: PoiListProps): ReactNode => {\n  const { t } = useTranslation();\n\n  const pois = usePointsOfInterest();\n  const selectedPoi = useSelectedPoi();\n\n  const [currentLimit, setCurrentLimit] = useState<number>(pageLimit);\n\n  const filteredPois = useFilterPointsOfInterest(pois, filter);\n  const relevantPois = values ?? filteredPois;\n\n  const hasMoreData = relevantPois.length > currentLimit;\n\n  const poiObject = usePoiDomainObject();\n\n  const rowData: RowType[] = useMemo(\n    () =>\n      take(relevantPois, currentLimit).map((poi) => ({\n        id: JSON.stringify(poi.id),\n        name: poi.properties.name ?? JSON.stringify(poi.id),\n        poi,\n      })),\n    [relevantPois, currentLimit]\n  );\n\n  const handleShowMoreCallback = useCallback(() => {\n    if (!hasMoreData) {\n      return;\n    }\n\n    setCurrentLimit((lastLimit) =>\n      Math.min(relevantPois.length, lastLimit + pageLimit)\n    );\n  }, [relevantPois, setCurrentLimit, hasMoreData, pageLimit]);\n\n  const selectedRowId = JSON.stringify(selectedPoi?.id);\n\n  return (\n    <div className=\"flex flex-col\">\n      <table className=\"w-full border-collapse text-sm\">\n        <thead>\n          <tr className=\"border-y border-border bg-background\">\n            <th className=\"h-9 px-3 pl-4 text-left text-sm font-medium text-muted-foreground\">\n              {t({ key: 'NAME' })}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          {rowData.map((row) => {\n            const isSelected = row.id === selectedRowId;\n            const handleSelect = (): void => {\n              poiObject?.focusOn(row.poi);\n              onRowClick?.(row.poi);\n            };\n            return (\n              <tr\n                key={row.id}\n                role=\"button\"\n                tabIndex={0}\n                aria-pressed={isSelected}\n                className={`h-9 cursor-pointer border-b border-border transition-colors hover:bg-active-muted-background ${\n                  isSelected ? 'bg-active-muted-background' : 'bg-background'\n                }`}\n                onClick={handleSelect}\n                onKeyDown={(event) => {\n                  if (event.key === 'Enter' || event.key === ' ') {\n                    event.preventDefault();\n                    handleSelect();\n                  }\n                }}\n              >\n                <td className=\"px-3 pl-4 align-middle\">{row.name}</td>\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n      <div className=\"flex flex-row justify-center gap-4 pt-2\">\n        {hasMoreData && (\n          <Button onClick={handleShowMoreCallback} style={{ color: 'white' }}>\n            {t({ key: 'SHOW_MORE' })}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["useCallback","useMemo","useState","take","Button","useTranslation","useFilterPointsOfInterest","usePoiDomainObject","usePointsOfInterest","useSelectedPoi","PoiList","onRowClick","filter","pageLimit","Infinity","values","t","pois","selectedPoi","currentLimit","setCurrentLimit","filteredPois","relevantPois","hasMoreData","length","poiObject","rowData","map","poi","id","JSON","stringify","name","properties","handleShowMoreCallback","lastLimit","Math","min","selectedRowId","div","className","table","thead","tr","th","key","tbody","row","isSelected","handleSelect","focusOn","role","tabIndex","aria-pressed","onClick","onKeyDown","event","preventDefault","td","style","color"],"mappings":";AAAA,SAAyBA,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAEvE,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,MAAM,QAAQ,kCAAkC;AAGzD,SAASC,cAAc,QAAQ,qBAAkB;AAEjD,SAASC,yBAAyB,QAAQ,iCAA8B;AACxE,SAASC,kBAAkB,QAAQ,0BAAuB;AAC1D,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,cAAc,QAAQ,sBAAmB;AAyBlD,OAAO,MAAMC,UAAU,CAAC,EACtBC,UAAU,EACVC,MAAM,EACNC,YAAYC,QAAQ,EACpBC,MAAM,EACO;IACb,MAAM,EAAEC,CAAC,EAAE,GAAGX;IAEd,MAAMY,OAAOT;IACb,MAAMU,cAAcT;IAEpB,MAAM,CAACU,cAAcC,gBAAgB,GAAGlB,SAAiBW;IAEzD,MAAMQ,eAAef,0BAA0BW,MAAML;IACrD,MAAMU,eAAeP,UAAUM;IAE/B,MAAME,cAAcD,aAAaE,MAAM,GAAGL;IAE1C,MAAMM,YAAYlB;IAElB,MAAMmB,UAAqBzB,QACzB,IACEE,KAAKmB,cAAcH,cAAcQ,GAAG,CAAC,CAACC,MAAS,CAAA;gBAC7CC,IAAIC,KAAKC,SAAS,CAACH,IAAIC,EAAE;gBACzBG,MAAMJ,IAAIK,UAAU,CAACD,IAAI,IAAIF,KAAKC,SAAS,CAACH,IAAIC,EAAE;gBAClDD;YACF,CAAA,IACF;QAACN;QAAcH;KAAa;IAG9B,MAAMe,yBAAyBlC,YAAY;QACzC,IAAI,CAACuB,aAAa;YAChB;QACF;QAEAH,gBAAgB,CAACe,YACfC,KAAKC,GAAG,CAACf,aAAaE,MAAM,EAAEW,YAAYtB;IAE9C,GAAG;QAACS;QAAcF;QAAiBG;QAAaV;KAAU;IAE1D,MAAMyB,gBAAgBR,KAAKC,SAAS,CAACb,aAAaW;IAElD,qBACE,MAACU;QAAIC,WAAU;;0BACb,MAACC;gBAAMD,WAAU;;kCACf,KAACE;kCACC,cAAA,KAACC;4BAAGH,WAAU;sCACZ,cAAA,KAACI;gCAAGJ,WAAU;0CACXxB,EAAE;oCAAE6B,KAAK;gCAAO;;;;kCAIvB,KAACC;kCACEpB,QAAQC,GAAG,CAAC,CAACoB;4BACZ,MAAMC,aAAaD,IAAIlB,EAAE,KAAKS;4BAC9B,MAAMW,eAAe;gCACnBxB,WAAWyB,QAAQH,IAAInB,GAAG;gCAC1BjB,aAAaoC,IAAInB,GAAG;4BACtB;4BACA,qBACE,KAACe;gCAECQ,MAAK;gCACLC,UAAU;gCACVC,gBAAcL;gCACdR,WAAW,CAAC,6FAA6F,EACvGQ,aAAa,+BAA+B,iBAC5C;gCACFM,SAASL;gCACTM,WAAW,CAACC;oCACV,IAAIA,MAAMX,GAAG,KAAK,WAAWW,MAAMX,GAAG,KAAK,KAAK;wCAC9CW,MAAMC,cAAc;wCACpBR;oCACF;gCACF;0CAEA,cAAA,KAACS;oCAAGlB,WAAU;8CAA0BO,IAAIf,IAAI;;+BAf3Ce,IAAIlB,EAAE;wBAkBjB;;;;0BAGJ,KAACU;gBAAIC,WAAU;0BACZjB,6BACC,KAACnB;oBAAOkD,SAASpB;oBAAwByB,OAAO;wBAAEC,OAAO;oBAAQ;8BAC9D5C,EAAE;wBAAE6B,KAAK;oBAAY;;;;;AAMlC,EAAE"}

package/dist/ui/components/commandBased/pointsOfInterest/PoiSharePanel.d.ts

@@ -1,2 +1,2 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from "react";
 export declare const PoiSharePanel: () => ReactNode;

package/dist/ui/components/commandBased/pointsOfInterest/PoiSharePanel.js

@@ -1,60 +1,107 @@
-import { useTranslation as e } from "../../i18n/I18n.js";
-import { Changes as t } from "../../../../foundation/domainObjectsHelpers/Changes.js";
-import "../../../../domains/index.js";
-import { useOnUpdateDomainObject as n } from "../hooks/useOnUpdateDomainObject.js";
-import { usePoiDomainObject as r } from "./usePoiDomainObject.js";
-import { useState as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Button as s } from "@cognite/aura/components/button";
-import { IconLink as c, IconShare as l } from "@tabler/icons-react";
-import { Label as u } from "@cognite/aura/components/label";
-import { Switch as d } from "@cognite/aura/components/switch";
-import { Alert as f, AlertDescription as p, AlertTitle as m } from "@cognite/aura/components/alert";
-//#region libs/shared/reveal-components/src/ui/components/commandBased/pointsOfInterest/PoiSharePanel.tsx
-var h = () => {
-	let { t } = e(), d = r(), f = d?.selectedPointsOfInterest, [p, m] = i(f?.properties.visibility ?? "PRIVATE");
-	return n(d, () => {
-		let e = f?.properties.visibility ?? "PRIVATE";
-		m(e);
-	}), /* @__PURE__ */ a("div", {
-		className: "flex flex-row gap-6 p-4 w-fit min-w-[400px] rounded-md bg-white shadow-[0px_1px_16px_4px_rgba(79,82,104,0.1),0px_1px_8px_0px_rgba(79,82,104,0.08),0px_1px_2px_0px_rgba(79,82,104,0.24)]",
-		children: /* @__PURE__ */ o("div", {
-			className: "flex flex-col gap-2",
-			children: [
-				/* @__PURE__ */ o("div", {
-					className: "flex flex-row gap-4",
-					children: [/* @__PURE__ */ a(l, {}), /* @__PURE__ */ a(u, { children: t({ key: "SHARE" }) })]
-				}),
-				/* @__PURE__ */ a(g, {
-					poiDomainObject: d,
-					poiVisibility: p
-				}),
-				/* @__PURE__ */ o(s, {
-					variant: "default",
-					disabled: p === "PRIVATE",
-					onClick: async () => {
-						let e = window.location.href;
-						await navigator.clipboard.writeText(e);
-					},
-					children: [/* @__PURE__ */ a(c, {}), t({ key: "COPY_URL_TO_SHARE" })]
-				})
-			]
-		})
-	});
-}, g = ({ poiDomainObject: n, poiVisibility: r }) => {
-	let { t: i } = e(), s = n?.selectedPointsOfInterest, c = r === "PUBLIC", l = i(c ? { key: "POINT_OF_INTEREST_IS_PUBLIC" } : { key: "POINT_OF_INTEREST_IS_PRIVATE" }), u = i(c ? { key: "POINT_OF_INTEREST_PUBLIC_DESCRIPTION" } : { key: "POINT_OF_INTEREST_PRIVATE_DESCRIPTION" });
-	return n === void 0 || s === void 0 ? null : /* @__PURE__ */ a(f, { children: /* @__PURE__ */ o("div", {
-		className: "flex flex-row gap-4 items-center",
-		children: [/* @__PURE__ */ a(d, {
-			checked: c,
-			onCheckedChange: (e) => {
-				s.properties.visibility = e ? "PUBLIC" : "PRIVATE", n.updatePointsOfInterest([s]), n.notify(t.geometry);
-			}
-		}), /* @__PURE__ */ o("div", {
-			className: "flex flex-col",
-			children: [/* @__PURE__ */ a(m, { children: l }), /* @__PURE__ */ a(p, { children: u })]
-		})]
-	}) });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconLink, IconShare } from "@tabler/icons-react";
+import { Alert, AlertDescription, AlertTitle } from "@cognite/aura/components/alert";
+import { Button } from "@cognite/aura/components/button";
+import { Label } from "@cognite/aura/components/label";
+import { Switch } from "@cognite/aura/components/switch";
+import { Changes } from "../../../../domains/index.js";
+import { useTranslation } from "../../i18n/I18n.js";
+import { useOnUpdateDomainObject } from "../hooks/useOnUpdateDomainObject.js";
+import { usePoiDomainObject } from "./usePoiDomainObject.js";
+export const PoiSharePanel = ()=>{
+    const { t } = useTranslation();
+    const poiDomainObject = usePoiDomainObject();
+    const selectedPointOfInterest = poiDomainObject?.selectedPointsOfInterest;
+    const [poiVisibility, setPoiVisibility] = useState(selectedPointOfInterest?.properties.visibility ?? 'PRIVATE');
+    const handleShare = async ()=>{
+        const url = window.location.href;
+        await navigator.clipboard.writeText(url);
+    };
+    useOnUpdateDomainObject(poiDomainObject, ()=>{
+        const visibility = selectedPointOfInterest?.properties.visibility ?? 'PRIVATE';
+        setPoiVisibility(visibility);
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex flex-row gap-6 p-4 w-fit min-w-[400px] rounded-md bg-white shadow-[0px_1px_16px_4px_rgba(79,82,104,0.1),0px_1px_8px_0px_rgba(79,82,104,0.08),0px_1px_2px_0px_rgba(79,82,104,0.24)]",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-2",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-row gap-4",
+                    children: [
+                        /*#__PURE__*/ _jsx(IconShare, {}),
+                        /*#__PURE__*/ _jsx(Label, {
+                            children: t({
+                                key: 'SHARE'
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(PoiVisibilityInfobox, {
+                    poiDomainObject: poiDomainObject,
+                    poiVisibility: poiVisibility
+                }),
+                /*#__PURE__*/ _jsxs(Button, {
+                    variant: "default",
+                    disabled: poiVisibility === 'PRIVATE',
+                    onClick: handleShare,
+                    children: [
+                        /*#__PURE__*/ _jsx(IconLink, {}),
+                        t({
+                            key: 'COPY_URL_TO_SHARE'
+                        })
+                    ]
+                })
+            ]
+        })
+    });
 };
-//#endregion
-export { h as PoiSharePanel };
+const PoiVisibilityInfobox = ({ poiDomainObject, poiVisibility })=>{
+    const { t } = useTranslation();
+    const selectedPointOfInterest = poiDomainObject?.selectedPointsOfInterest;
+    const markedPublic = poiVisibility === 'PUBLIC';
+    const header = markedPublic ? t({
+        key: 'POINT_OF_INTEREST_IS_PUBLIC'
+    }) : t({
+        key: 'POINT_OF_INTEREST_IS_PRIVATE'
+    });
+    const content = markedPublic ? t({
+        key: 'POINT_OF_INTEREST_PUBLIC_DESCRIPTION'
+    }) : t({
+        key: 'POINT_OF_INTEREST_PRIVATE_DESCRIPTION'
+    });
+    if (poiDomainObject === undefined || selectedPointOfInterest === undefined) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(Alert, {
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-row gap-4 items-center",
+            children: [
+                /*#__PURE__*/ _jsx(Switch, {
+                    checked: markedPublic,
+                    onCheckedChange: (nextValue)=>{
+                        selectedPointOfInterest.properties.visibility = nextValue ? 'PUBLIC' : 'PRIVATE';
+                        void poiDomainObject.updatePointsOfInterest([
+                            selectedPointOfInterest
+                        ]);
+                        poiDomainObject.notify(Changes.geometry);
+                    }
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col",
+                    children: [
+                        /*#__PURE__*/ _jsx(AlertTitle, {
+                            children: header
+                        }),
+                        /*#__PURE__*/ _jsx(AlertDescription, {
+                            children: content
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=PoiSharePanel.js.map

package/dist/ui/components/commandBased/pointsOfInterest/PoiSharePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/ui/components/commandBased/pointsOfInterest/PoiSharePanel.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport { IconLink, IconShare } from '@tabler/icons-react';\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from '@cognite/aura/components/alert';\nimport { Button } from '@cognite/aura/components/button';\nimport { Label } from '@cognite/aura/components/label';\nimport { Switch } from '@cognite/aura/components/switch';\n\nimport { Changes } from '../../../../domains';\nimport { type PointsOfInterestDomainObject } from '../../../../domains/pointsOfInterest/PointsOfInterestDomainObject';\nimport { useTranslation } from '../../i18n/I18n';\nimport { useOnUpdateDomainObject } from '../hooks/useOnUpdateDomainObject';\n\nimport { usePoiDomainObject } from './usePoiDomainObject';\n\nexport const PoiSharePanel = (): ReactNode => {\n  const { t } = useTranslation();\n\n  const poiDomainObject = usePoiDomainObject();\n\n  const selectedPointOfInterest = poiDomainObject?.selectedPointsOfInterest;\n  const [poiVisibility, setPoiVisibility] = useState<'PUBLIC' | 'PRIVATE'>(\n    selectedPointOfInterest?.properties.visibility ?? 'PRIVATE'\n  );\n\n  const handleShare = async (): Promise<void> => {\n    const url = window.location.href;\n    await navigator.clipboard.writeText(url);\n  };\n\n  useOnUpdateDomainObject(poiDomainObject, () => {\n    const visibility =\n      selectedPointOfInterest?.properties.visibility ?? 'PRIVATE';\n    setPoiVisibility(visibility);\n  });\n\n  return (\n    <div className=\"flex flex-row gap-6 p-4 w-fit min-w-[400px] rounded-md bg-white shadow-[0px_1px_16px_4px_rgba(79,82,104,0.1),0px_1px_8px_0px_rgba(79,82,104,0.08),0px_1px_2px_0px_rgba(79,82,104,0.24)]\">\n      <div className=\"flex flex-col gap-2\">\n        <div className=\"flex flex-row gap-4\">\n          <IconShare />\n          <Label>{t({ key: 'SHARE' })}</Label>\n        </div>\n        <PoiVisibilityInfobox\n          poiDomainObject={poiDomainObject}\n          poiVisibility={poiVisibility}\n        />\n        <Button\n          variant=\"default\"\n          disabled={poiVisibility === 'PRIVATE'}\n          onClick={handleShare}\n        >\n          <IconLink />\n          {t({ key: 'COPY_URL_TO_SHARE' })}\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nconst PoiVisibilityInfobox = ({\n  poiDomainObject,\n  poiVisibility,\n}: {\n  poiDomainObject?: PointsOfInterestDomainObject<any>;\n  poiVisibility: 'PUBLIC' | 'PRIVATE';\n}): ReactNode => {\n  const { t } = useTranslation();\n\n  const selectedPointOfInterest = poiDomainObject?.selectedPointsOfInterest;\n  const markedPublic = poiVisibility === 'PUBLIC';\n  const header = markedPublic\n    ? t({ key: 'POINT_OF_INTEREST_IS_PUBLIC' })\n    : t({ key: 'POINT_OF_INTEREST_IS_PRIVATE' });\n  const content = markedPublic\n    ? t({ key: 'POINT_OF_INTEREST_PUBLIC_DESCRIPTION' })\n    : t({ key: 'POINT_OF_INTEREST_PRIVATE_DESCRIPTION' });\n\n  if (poiDomainObject === undefined || selectedPointOfInterest === undefined) {\n    return null;\n  }\n\n  return (\n    <Alert>\n      <div className=\"flex flex-row gap-4 items-center\">\n        <Switch\n          checked={markedPublic}\n          onCheckedChange={(nextValue: boolean) => {\n            selectedPointOfInterest.properties.visibility = nextValue\n              ? 'PUBLIC'\n              : 'PRIVATE';\n            void poiDomainObject.updatePointsOfInterest([\n              selectedPointOfInterest,\n            ]);\n            poiDomainObject.notify(Changes.geometry);\n          }}\n        />\n        <div className=\"flex flex-col\">\n          <AlertTitle>{header}</AlertTitle>\n          <AlertDescription>{content}</AlertDescription>\n        </div>\n      </div>\n    </Alert>\n  );\n};\n"],"names":["useState","IconLink","IconShare","Alert","AlertDescription","AlertTitle","Button","Label","Switch","Changes","useTranslation","useOnUpdateDomainObject","usePoiDomainObject","PoiSharePanel","t","poiDomainObject","selectedPointOfInterest","selectedPointsOfInterest","poiVisibility","setPoiVisibility","properties","visibility","handleShare","url","window","location","href","navigator","clipboard","writeText","div","className","key","PoiVisibilityInfobox","variant","disabled","onClick","markedPublic","header","content","undefined","checked","onCheckedChange","nextValue","updatePointsOfInterest","notify","geometry"],"mappings":";AAAA,SAAyBA,QAAQ,QAAQ,QAAQ;AAEjD,SAASC,QAAQ,EAAEC,SAAS,QAAQ,sBAAsB;AAE1D,SACEC,KAAK,EACLC,gBAAgB,EAChBC,UAAU,QACL,iCAAiC;AACxC,SAASC,MAAM,QAAQ,kCAAkC;AACzD,SAASC,KAAK,QAAQ,iCAAiC;AACvD,SAASC,MAAM,QAAQ,kCAAkC;AAEzD,SAASC,OAAO,QAAQ,+BAAsB;AAE9C,SAASC,cAAc,QAAQ,qBAAkB;AACjD,SAASC,uBAAuB,QAAQ,sCAAmC;AAE3E,SAASC,kBAAkB,QAAQ,0BAAuB;AAE1D,OAAO,MAAMC,gBAAgB;IAC3B,MAAM,EAAEC,CAAC,EAAE,GAAGJ;IAEd,MAAMK,kBAAkBH;IAExB,MAAMI,0BAA0BD,iBAAiBE;IACjD,MAAM,CAACC,eAAeC,iBAAiB,GAAGnB,SACxCgB,yBAAyBI,WAAWC,cAAc;IAGpD,MAAMC,cAAc;QAClB,MAAMC,MAAMC,OAAOC,QAAQ,CAACC,IAAI;QAChC,MAAMC,UAAUC,SAAS,CAACC,SAAS,CAACN;IACtC;IAEAZ,wBAAwBI,iBAAiB;QACvC,MAAMM,aACJL,yBAAyBI,WAAWC,cAAc;QACpDF,iBAAiBE;IACnB;IAEA,qBACE,KAACS;QAAIC,WAAU;kBACb,cAAA,MAACD;YAAIC,WAAU;;8BACb,MAACD;oBAAIC,WAAU;;sCACb,KAAC7B;sCACD,KAACK;sCAAOO,EAAE;gCAAEkB,KAAK;4BAAQ;;;;8BAE3B,KAACC;oBACClB,iBAAiBA;oBACjBG,eAAeA;;8BAEjB,MAACZ;oBACC4B,SAAQ;oBACRC,UAAUjB,kBAAkB;oBAC5BkB,SAASd;;sCAET,KAACrB;wBACAa,EAAE;4BAAEkB,KAAK;wBAAoB;;;;;;AAKxC,EAAE;AAEF,MAAMC,uBAAuB,CAAC,EAC5BlB,eAAe,EACfG,aAAa,EAId;IACC,MAAM,EAAEJ,CAAC,EAAE,GAAGJ;IAEd,MAAMM,0BAA0BD,iBAAiBE;IACjD,MAAMoB,eAAenB,kBAAkB;IACvC,MAAMoB,SAASD,eACXvB,EAAE;QAAEkB,KAAK;IAA8B,KACvClB,EAAE;QAAEkB,KAAK;IAA+B;IAC5C,MAAMO,UAAUF,eACZvB,EAAE;QAAEkB,KAAK;IAAuC,KAChDlB,EAAE;QAAEkB,KAAK;IAAwC;IAErD,IAAIjB,oBAAoByB,aAAaxB,4BAA4BwB,WAAW;QAC1E,OAAO;IACT;IAEA,qBACE,KAACrC;kBACC,cAAA,MAAC2B;YAAIC,WAAU;;8BACb,KAACvB;oBACCiC,SAASJ;oBACTK,iBAAiB,CAACC;wBAChB3B,wBAAwBI,UAAU,CAACC,UAAU,GAAGsB,YAC5C,WACA;wBACJ,KAAK5B,gBAAgB6B,sBAAsB,CAAC;4BAC1C5B;yBACD;wBACDD,gBAAgB8B,MAAM,CAACpC,QAAQqC,QAAQ;oBACzC;;8BAEF,MAAChB;oBAAIC,WAAU;;sCACb,KAAC1B;sCAAYiC;;sCACb,KAAClC;sCAAkBmC;;;;;;;AAK7B"}

package/dist/ui/components/commandBased/pointsOfInterest/PointsOfInterestSidePanel.context.d.ts

@@ -1,13 +1,13 @@
-import { Context } from 'react';
-import { PoiInfoPanelContent } from './PoiInfoPanelContent';
-import { PoiList } from './PoiList';
-import { usePointsOfInterestTool } from './usePointsOfInterestTool';
-import { useSelectedPoi } from './useSelectedPoi';
+import type { Context } from "react";
+import { PoiInfoPanelContent } from "./PoiInfoPanelContent";
+import { PoiList } from "./PoiList";
+import { usePointsOfInterestTool } from "./usePointsOfInterestTool";
+import { useSelectedPoi } from "./useSelectedPoi";
 export type PointsOfInterestSidePanelDependencies = {
-    useSelectedPoi: typeof useSelectedPoi;
-    usePointsOfInterestTool: typeof usePointsOfInterestTool;
-    PoiList: typeof PoiList;
-    PoiInfoPanelContent: typeof PoiInfoPanelContent;
+	useSelectedPoi: typeof useSelectedPoi;
+	usePointsOfInterestTool: typeof usePointsOfInterestTool;
+	PoiList: typeof PoiList;
+	PoiInfoPanelContent: typeof PoiInfoPanelContent;
 };
 export declare const defaultPointsOfInterestSidePanelDependencies: PointsOfInterestSidePanelDependencies;
 export declare const PointsOfInterestSidePanelContext: Context<PointsOfInterestSidePanelDependencies>;

package/dist/ui/components/commandBased/pointsOfInterest/PointsOfInterestSidePanel.context.js

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+import { PoiInfoPanelContent } from "./PoiInfoPanelContent.js";
+import { PoiList } from "./PoiList.js";
+import { usePointsOfInterestTool } from "./usePointsOfInterestTool.js";
+import { useSelectedPoi } from "./useSelectedPoi.js";
+export const defaultPointsOfInterestSidePanelDependencies = {
+    useSelectedPoi,
+    usePointsOfInterestTool,
+    PoiList,
+    PoiInfoPanelContent
+};
+export const PointsOfInterestSidePanelContext = createContext(defaultPointsOfInterestSidePanelDependencies);
+
+//# sourceMappingURL=PointsOfInterestSidePanel.context.js.map

package/dist/ui/components/commandBased/pointsOfInterest/PointsOfInterestSidePanel.context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/ui/components/commandBased/pointsOfInterest/PointsOfInterestSidePanel.context.ts"],"sourcesContent":["import type { Context } from 'react';\nimport { createContext } from 'react';\n\nimport { PoiInfoPanelContent } from './PoiInfoPanelContent';\nimport { PoiList } from './PoiList';\nimport { usePointsOfInterestTool } from './usePointsOfInterestTool';\nimport { useSelectedPoi } from './useSelectedPoi';\n\nexport type PointsOfInterestSidePanelDependencies = {\n  useSelectedPoi: typeof useSelectedPoi;\n  usePointsOfInterestTool: typeof usePointsOfInterestTool;\n  PoiList: typeof PoiList;\n  PoiInfoPanelContent: typeof PoiInfoPanelContent;\n};\n\nexport const defaultPointsOfInterestSidePanelDependencies: PointsOfInterestSidePanelDependencies =\n  {\n    useSelectedPoi,\n    usePointsOfInterestTool,\n    PoiList,\n    PoiInfoPanelContent,\n  };\n\nexport const PointsOfInterestSidePanelContext: Context<PointsOfInterestSidePanelDependencies> =\n  createContext<PointsOfInterestSidePanelDependencies>(\n    defaultPointsOfInterestSidePanelDependencies\n  );\n"],"names":["createContext","PoiInfoPanelContent","PoiList","usePointsOfInterestTool","useSelectedPoi","defaultPointsOfInterestSidePanelDependencies","PointsOfInterestSidePanelContext"],"mappings":"AACA,SAASA,aAAa,QAAQ,QAAQ;AAEtC,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,OAAO,QAAQ,eAAY;AACpC,SAASC,uBAAuB,QAAQ,+BAA4B;AACpE,SAASC,cAAc,QAAQ,sBAAmB;AASlD,OAAO,MAAMC,+CACX;IACED;IACAD;IACAD;IACAD;AACF,EAAE;AAEJ,OAAO,MAAMK,mCACXN,cACEK,8CACA"}

package/dist/ui/components/commandBased/pointsOfInterest/PointsOfInterestSidePanel.d.ts

@@ -1,2 +1,2 @@
-import { PropsWithChildren, ReactNode } from 'react';
-export declare const PointsOfInterestSidePanel: ({ children, }: PropsWithChildren) => ReactNode;
+import { type PropsWithChildren, type ReactNode } from "react";
+export declare const PointsOfInterestSidePanel: ({ children }: PropsWithChildren) => ReactNode;

package/dist/ui/components/commandBased/pointsOfInterest/PointsOfInterestSidePanel.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { useNullableCommandProperty } from "../hooks/useCommandProperty.js";
+import { PointsOfInterestSidePanelContext } from "./PointsOfInterestSidePanel.context.js";
+export const PointsOfInterestSidePanel = ({ children })=>{
+    const { useSelectedPoi, usePointsOfInterestTool, PoiList, PoiInfoPanelContent } = useContext(PointsOfInterestSidePanelContext);
+    const tool = usePointsOfInterestTool();
+    const selectedPoi = useSelectedPoi();
+    const isToolActive = useNullableCommandProperty(tool, ()=>tool !== undefined ? tool.isChecked && tool.isEnabled : false) ?? false;
+    const isOpen = isToolActive || selectedPoi !== undefined;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-row w-full h-full",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex-1 min-w-0",
+                children: children
+            }),
+            isOpen && /*#__PURE__*/ _jsx("div", {
+                className: "flex h-full min-h-0 w-[500px] flex-col border-l border-border bg-background",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "flex min-h-0 flex-1 flex-col p-2",
+                    children: selectedPoi !== undefined ? /*#__PURE__*/ _jsx(PoiInfoPanelContent, {}) : /*#__PURE__*/ _jsx(PoiList, {})
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=PointsOfInterestSidePanel.js.map

package/dist/ui/components/commandBased/pointsOfInterest/PointsOfInterestSidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/ui/components/commandBased/pointsOfInterest/PointsOfInterestSidePanel.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, useContext } from 'react';\n\nimport { useNullableCommandProperty } from '../hooks/useCommandProperty';\n\nimport { PointsOfInterestSidePanelContext } from './PointsOfInterestSidePanel.context';\n\nexport const PointsOfInterestSidePanel = ({\n  children,\n}: PropsWithChildren): ReactNode => {\n  const {\n    useSelectedPoi,\n    usePointsOfInterestTool,\n    PoiList,\n    PoiInfoPanelContent,\n  } = useContext(PointsOfInterestSidePanelContext);\n\n  const tool = usePointsOfInterestTool();\n  const selectedPoi = useSelectedPoi();\n\n  const isToolActive =\n    useNullableCommandProperty(tool, () =>\n      tool !== undefined ? tool.isChecked && tool.isEnabled : false\n    ) ?? false;\n  const isOpen = isToolActive || selectedPoi !== undefined;\n\n  return (\n    <div className=\"flex flex-row w-full h-full\">\n      <div className=\"flex-1 min-w-0\">{children}</div>\n      {isOpen && (\n        <div className=\"flex h-full min-h-0 w-[500px] flex-col border-l border-border bg-background\">\n          <div className=\"flex min-h-0 flex-1 flex-col p-2\">\n            {selectedPoi !== undefined ? <PoiInfoPanelContent /> : <PoiList />}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useContext","useNullableCommandProperty","PointsOfInterestSidePanelContext","PointsOfInterestSidePanel","children","useSelectedPoi","usePointsOfInterestTool","PoiList","PoiInfoPanelContent","tool","selectedPoi","isToolActive","undefined","isChecked","isEnabled","isOpen","div","className"],"mappings":";AAAA,SAAiDA,UAAU,QAAQ,QAAQ;AAE3E,SAASC,0BAA0B,QAAQ,iCAA8B;AAEzE,SAASC,gCAAgC,QAAQ,yCAAsC;AAEvF,OAAO,MAAMC,4BAA4B,CAAC,EACxCC,QAAQ,EACU;IAClB,MAAM,EACJC,cAAc,EACdC,uBAAuB,EACvBC,OAAO,EACPC,mBAAmB,EACpB,GAAGR,WAAWE;IAEf,MAAMO,OAAOH;IACb,MAAMI,cAAcL;IAEpB,MAAMM,eACJV,2BAA2BQ,MAAM,IAC/BA,SAASG,YAAYH,KAAKI,SAAS,IAAIJ,KAAKK,SAAS,GAAG,UACrD;IACP,MAAMC,SAASJ,gBAAgBD,gBAAgBE;IAE/C,qBACE,MAACI;QAAIC,WAAU;;0BACb,KAACD;gBAAIC,WAAU;0BAAkBb;;YAChCW,wBACC,KAACC;gBAAIC,WAAU;0BACb,cAAA,KAACD;oBAAIC,WAAU;8BACZP,gBAAgBE,0BAAY,KAACJ,yCAAyB,KAACD;;;;;AAMpE,EAAE"}

package/dist/ui/components/commandBased/pointsOfInterest/avatarUtils.js

@@ -1,19 +1,20 @@
-//#region libs/shared/reveal-components/src/ui/components/commandBased/pointsOfInterest/avatarUtils.ts
-var e = [
-	"decorative-3",
-	"decorative-4",
-	"decorative-2",
-	"decorative-5",
-	"decorative-6",
-	"decorative-1"
+const AVATAR_VARIANTS = [
+    'decorative-3',
+    'decorative-4',
+    'decorative-2',
+    'decorative-5',
+    'decorative-6',
+    'decorative-1'
 ];
-function t(t) {
-	let n = 0;
-	for (let e = 0; e < t.length; e++) n = n * 31 + t.charCodeAt(e) | 0;
-	return e[Math.abs(n) % e.length];
+export function getAvatarVariant(text) {
+    let hash = 0;
+    for(let i = 0; i < text.length; i++){
+        hash = hash * 31 + text.charCodeAt(i) | 0;
+    }
+    return AVATAR_VARIANTS[Math.abs(hash) % AVATAR_VARIANTS.length];
 }
-function n(e) {
-	return e.slice(0, 2).toUpperCase();
+export function getAvatarInitials(text) {
+    return text.slice(0, 2).toUpperCase();
 }
-//#endregion
-export { n as getAvatarInitials, t as getAvatarVariant };
+
+//# sourceMappingURL=avatarUtils.js.map

package/dist/ui/components/commandBased/pointsOfInterest/avatarUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/ui/components/commandBased/pointsOfInterest/avatarUtils.ts"],"sourcesContent":["const AVATAR_VARIANTS = [\n  'decorative-3',\n  'decorative-4',\n  'decorative-2',\n  'decorative-5',\n  'decorative-6',\n  'decorative-1',\n] as const;\n\ntype AvatarVariant = (typeof AVATAR_VARIANTS)[number];\n\nexport function getAvatarVariant(text: string): AvatarVariant {\n  let hash = 0;\n  for (let i = 0; i < text.length; i++) {\n    hash = (hash * 31 + text.charCodeAt(i)) | 0;\n  }\n  return AVATAR_VARIANTS[Math.abs(hash) % AVATAR_VARIANTS.length];\n}\n\nexport function getAvatarInitials(text: string): string {\n  return text.slice(0, 2).toUpperCase();\n}\n"],"names":["AVATAR_VARIANTS","getAvatarVariant","text","hash","i","length","charCodeAt","Math","abs","getAvatarInitials","slice","toUpperCase"],"mappings":"AAAA,MAAMA,kBAAkB;IACtB;IACA;IACA;IACA;IACA;IACA;CACD;AAID,OAAO,SAASC,iBAAiBC,IAAY;IAC3C,IAAIC,OAAO;IACX,IAAK,IAAIC,IAAI,GAAGA,IAAIF,KAAKG,MAAM,EAAED,IAAK;QACpCD,OAAO,AAACA,OAAO,KAAKD,KAAKI,UAAU,CAACF,KAAM;IAC5C;IACA,OAAOJ,eAAe,CAACO,KAAKC,GAAG,CAACL,QAAQH,gBAAgBK,MAAM,CAAC;AACjE;AAEA,OAAO,SAASI,kBAAkBP,IAAY;IAC5C,OAAOA,KAAKQ,KAAK,CAAC,GAAG,GAAGC,WAAW;AACrC"}

package/dist/ui/components/commandBased/pointsOfInterest/index.d.ts

@@ -1,8 +1,8 @@
-export { PoiInfoPanelContent } from './PoiInfoPanelContent';
-export { useFilterPointsOfInterest } from './useFilterPointsOfInterest';
-export { usePoiCreateFlowState } from './usePoiCreateFlowState';
-export { usePoiDomainObject } from './usePoiDomainObject';
-export { usePointsOfInterest } from './usePointsOfInterest';
-export { usePointsOfInterestTool } from './usePointsOfInterestTool';
-export { useSyncSelectedPoi } from './useSyncSelectedPoi';
-export { PoiList } from './PoiList';
+export { PoiInfoPanelContent } from "./PoiInfoPanelContent";
+export { useFilterPointsOfInterest } from "./useFilterPointsOfInterest";
+export { usePoiCreateFlowState } from "./usePoiCreateFlowState";
+export { usePoiDomainObject } from "./usePoiDomainObject";
+export { usePointsOfInterest } from "./usePointsOfInterest";
+export { usePointsOfInterestTool } from "./usePointsOfInterestTool";
+export { useSyncSelectedPoi } from "./useSyncSelectedPoi";
+export { PoiList } from "./PoiList";