@object-ui/plugin-map 17.5.0 → 17.6.0

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("@object-ui/core"),require("@object-ui/react"),require("@object-ui/components"),require("zod"),require("react-map-gl/maplibre"),require("maplibre-gl/dist/maplibre-gl.css"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`react`,`@object-ui/core`,`@object-ui/react`,`@object-ui/components`,`zod`,`react-map-gl/maplibre`,`maplibre-gl/dist/maplibre-gl.css`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ObjectUIPluginMap={},e.React,e.ObjectUICore,e.ObjectUIReact,e.ObjectUIComponents,e.zod,e.react_map_gl_maplibre,e.maplibre_gl_dist_maplibre_gl_css,e.react_jsx_runtime))})(this,function(e,t,n,r,i,a,o,s,c){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var l=Object.create,u=Object.defineProperty,d=Object.getOwnPropertyDescriptor,f=Object.getOwnPropertyNames,p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=f(t),a=0,o=i.length,s;a<o;a++)s=i[a],!m.call(e,s)&&s!==n&&u(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=d(t,s))||r.enumerable});return e},g=(e,t,n)=>(n=e==null?{}:l(p(e)),h(t||!e||!e.__esModule||!m.call(e,`default`)?u(n,`default`,{value:e,enumerable:!0}):n,e));t=g(t,1),o=g(o,1);var _=a.z.object({latitudeField:a.z.string().optional(),longitudeField:a.z.string().optional(),locationField:a.z.string().optional(),titleField:a.z.string().optional(),descriptionField:a.z.string().optional(),zoom:a.z.number().optional(),center:a.z.tuple([a.z.number(),a.z.number()]).optional(),style:a.z.string().optional()}),ee=`https://demotiles.maplibre.org/style.json`;function te(e){return e.data?e.data:e.staticData?{provider:`value`,items:e.staticData}:e.objectName?{provider:`object`,object:e.objectName}:null}function v(e){if(e){if(typeof e==`string`){let t=e.split(` `),n=t[0],r=t[1]?.toLowerCase()===`desc`?`desc`:`asc`;return{[n]:r}}if(Array.isArray(e))return e.reduce((e,t)=>(t.field&&t.order&&(e[t.field]=t.order),e),{})}}var y=()=>globalThis.process?.env?.NODE_ENV!==`production`,b=new Set;function x(e){if(!y())return;let t=e?.filter;if(!t||typeof t!=`object`||Array.isArray(t)||!Object.prototype.hasOwnProperty.call(t,`map`))return;let n=t.map;if(!n||typeof n!=`object`)return;let r;try{r=`${e.type??`map`}::${e.objectName??``}::${JSON.stringify(n)}`}catch{r=`${e.type??`map`}::${e.objectName??``}::<unserializable>`}b.has(r)||(b.add(r),console.warn("[ObjectMap] `filter.map` is no longer read as map configuration, so this map is rendering with the DEFAULT field names (`latitude` / `longitude` / `name`). `filter` is the query filter; the map config belongs under the declared `map` input — move it to `schema.map` (`{ type: 'object-map', map: { latitudeField, longitudeField, titleField } }`). The old spelling was never documented and could not survive a `dataSource` binding, whose merged filter is an `and` node with no `map` key at all (objectstack#7121). If `map` is genuinely a field you are filtering on, ignore this — the filter itself is passed through untouched. objectui#4034."))}function S(e){x(e);let t=e.style||e.mapStyle||e.map?.style;if(e.locationField||e.latitudeField)return{locationField:e.locationField,latitudeField:e.latitudeField,longitudeField:e.longitudeField,titleField:e.titleField||`name`,descriptionField:e.descriptionField,zoom:e.zoom,center:e.center,style:t};let n=e.map?e.map:null;if(n){let e=_.safeParse(n);return e.success||console.warn(`[ObjectMap] Invalid map configuration:`,e.error.format()),{...n,style:n.style||t}}return{latitudeField:`latitude`,longitudeField:`longitude`,locationField:`location`,titleField:`name`,descriptionField:`description`,zoom:10,center:[0,0],style:t}}function C(e,t){if(t.latitudeField&&t.longitudeField){let n=e[t.latitudeField],r=e[t.longitudeField];if(typeof n==`number`&&typeof r==`number`)return[n,r]}if(t.locationField){let n=e[t.locationField];if(typeof n==`object`&&n){let e=n.lat||n.latitude,t=n.lng||n.lon||n.longitude;if(typeof e==`number`&&typeof t==`number`)return[e,t]}if(typeof n==`string`){let e=n.split(`,`).map(e=>parseFloat(e.trim()));if(e.length===2&&!isNaN(e[0])&&!isNaN(e[1]))return[e[0],e[1]]}if(Array.isArray(n)&&n.length===2){let e=parseFloat(n[0]),t=parseFloat(n[1]);if(!isNaN(e)&&!isNaN(t))return[e,t]}}return null}function w(e,t,n=50){if(e.length<=1||t>=15)return e.map(e=>({id:e.id,coordinates:e.coordinates,markers:[e],isCluster:!1}));let r=n/2**t,i=new Map;e.forEach(e=>{let t=`${Math.floor(e.coordinates[0]/r)}:${Math.floor(e.coordinates[1]/r)}`;i.has(t)||i.set(t,[]),i.get(t).push(e)});let a=[];return i.forEach((e,t)=>{if(e.length===1)a.push({id:e[0].id,coordinates:e[0].coordinates,markers:e,isCluster:!1});else{let n=e.reduce((e,t)=>e+t.coordinates[0],0)/e.length,r=e.reduce((e,t)=>e+t.coordinates[1],0)/e.length;a.push({id:`cluster-${t}`,coordinates:[n,r],markers:e,isCluster:!0})}}),a}var T=({schema:e,dataSource:a,className:s,onMarkerClick:l,onRowClick:u,onEdit:d,onDelete:f,enableClustering:p,clusterRadius:m=50,...h})=>{let[g,_]=(0,t.useState)([]),[y,b]=(0,t.useState)(!0),[x,T]=(0,t.useState)(null),[E,D]=(0,t.useState)(null),[O,k]=(0,t.useState)(null),[A,ne]=(0,t.useState)(``),j=(0,i.useIsMobile)(),M=(0,t.useRef)(null),[N,P]=(0,t.useState)(null),[F,I]=(0,t.useState)(null),[L,R]=(0,t.useState)(!1),[z,B]=(0,t.useState)(null),V=(0,t.useCallback)(e=>{B(e?.error?.message||`Failed to load the map style/tiles.`)},[]),H=(0,t.useCallback)(()=>{if(typeof navigator>`u`||!navigator.geolocation){I(`Geolocation is not available in this browser.`);return}R(!0),I(null),navigator.geolocation.getCurrentPosition(e=>{let{longitude:t,latitude:n}=e.coords;P({lng:t,lat:n}),R(!1);try{M.current?.flyTo({center:[t,n],zoom:12,duration:800})}catch{}},e=>{R(!1),I(e.message||`Unable to retrieve location.`)},{enableHighAccuracy:!1,timeout:8e3,maximumAge:6e4})},[]),U=te(e),W=(0,t.useMemo)(()=>U,[JSON.stringify(U)]),G=S(e),K=W?.provider===`value`;(0,t.useEffect)(()=>{(async()=>{try{if(b(!0),h.data){let e=h.data;if(Array.isArray(e)){_(e),b(!1);return}}if(e.data){let t=e.data;if(Array.isArray(t)){_(t),b(!1);return}}if(K&&W?.provider===`value`){_(W.items),b(!1);return}if(!a||typeof a.find!=`function`)throw Error(`DataSource required for object/api providers`);if(W?.provider===`object`){let t=W.object,r=(0,n.buildExpandFields)(E?.fields),i=await a.find(t,{$filter:e.filter,$orderby:v(e.sort),...r.length>0?{$expand:r}:{}}),o=(0,n.extractRecords)(i);_(o)}else W?.provider===`api`&&(console.warn(`API provider not yet implemented for ObjectMap`),_([]));b(!1)}catch(e){T(e),b(!1)}})()},[W,a,K,e.filter,e.sort,E]),(0,t.useEffect)(()=>{!K&&a&&(async()=>{try{if(!a)return;let t=W?.provider===`object`?W.object:e.objectName;if(!t)return;let n=await a.getObjectSchema(t);D(n)}catch(e){console.error(`Failed to fetch object schema:`,e)}})()},[e.objectName,a,K,W]);let{markers:q,invalidCount:J}=(0,t.useMemo)(()=>{let e=0;return{markers:g.map((t,n)=>{let r=C(t,G);if(!r)return e++,null;let i=G.titleField?t[G.titleField]:`Marker`,a=G.descriptionField?t[G.descriptionField]:void 0,[o,s]=r;return!isFinite(o)||!isFinite(s)||o<-90||o>90||s<-180||s>180?(e++,null):{id:t.id||t._id||`marker-${n}`,title:i,description:a,coordinates:[s,o],data:t}}).filter(e=>e!==null),invalidCount:e}},[g,G]),Y=(0,t.useMemo)(()=>q.find(e=>e.id===O),[q,O]),[X,Z]=(0,t.useState)(G.zoom||3),Q=(0,r.useNavigationOverlay)({navigation:e.navigation,objectName:e.objectName,onRowClick:u}),$=(0,t.useMemo)(()=>{if(!A.trim())return q;let e=A.toLowerCase();return q.filter(t=>t.title?.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e))},[q,A]),re=(0,t.useMemo)(()=>p??(e.enableClustering||$.length>100)?w($,X,m):$.map(e=>({id:e.id,coordinates:e.coordinates,markers:[e],isCluster:!1})),[$,X,p,m,e]),ie=(0,t.useMemo)(()=>{if(!$.length)return{longitude:G.center?.[1]||0,latitude:G.center?.[0]||0,zoom:G.zoom||2};let e=$.map(e=>e.coordinates[0]),t=$.map(e=>e.coordinates[1]),n=Math.min(...e),r=Math.max(...e),i=Math.min(...t),a=Math.max(...t);return{longitude:(n+r)/2,latitude:(i+a)/2,zoom:G.zoom||3}},[$,G]);return y?(0,c.jsx)(`div`,{className:(0,i.cn)(`min-w-0 overflow-hidden`,s),children:(0,c.jsx)(`div`,{className:`flex items-center justify-center h-96 bg-muted rounded-lg border`,children:(0,c.jsx)(`div`,{className:`text-muted-foreground`,children:`Loading map...`})})}):x?(0,c.jsx)(`div`,{className:(0,i.cn)(`min-w-0 overflow-hidden`,s),children:(0,c.jsx)(`div`,{className:`flex items-center justify-center h-96 bg-muted rounded-lg border`,children:(0,c.jsxs)(`div`,{className:`text-destructive`,children:[`Error: `,x.message]})})}):(0,c.jsxs)(`div`,{className:(0,i.cn)(`min-w-0 overflow-hidden`,s),children:[J>0&&(0,c.jsx)(`div`,{className:`mb-2 p-2 text-sm text-yellow-800 bg-yellow-50 border border-yellow-200 rounded`,children:`${J} record${J===1?``:`s`} with missing or invalid coordinates excluded from the map.`}),q.length>0&&(0,c.jsx)(`div`,{className:`mb-2`,children:(0,c.jsx)(`input`,{type:`text`,value:A,onChange:e=>ne(e.target.value),placeholder:`Search locations…`,className:`w-full px-3 py-2 text-sm border rounded-md bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring`})}),(0,c.jsxs)(`div`,{className:`relative border rounded-lg overflow-hidden bg-muted h-[300px] sm:h-[400px] md:h-[500px] lg:h-[600px] w-full`,children:[(0,c.jsxs)(o.default,{ref:e=>{M.current=e},initialViewState:ie,style:{width:`100%`,height:`100%`},mapStyle:G.style||ee,touchZoomRotate:!0,dragRotate:!0,touchPitch:!0,onZoom:e=>Z(Math.round(e.viewState.zoom)),onError:V,children:[z&&(0,c.jsxs)(`div`,{role:`alert`,className:`absolute inset-x-0 top-0 z-20 p-2 text-sm text-center text-amber-900 bg-amber-50 border-b border-amber-200`,children:[`Map failed to load (`,z,`). Markers below are still listed in the search box;`,` `,G.style?`check the configured map style URL.`:`configure a custom map style for production use.`]}),(0,c.jsx)(o.NavigationControl,{position:`top-right`,showCompass:!0,showZoom:!0}),(0,c.jsx)(`button`,{type:`button`,onClick:H,disabled:L,className:`absolute top-2 left-2 z-10 inline-flex items-center justify-center size-9 rounded-md bg-background/95 border shadow-sm hover:bg-background disabled:opacity-50`,"aria-label":`Show my location`,"data-testid":`map-geolocate`,children:(0,c.jsx)(`span`,{"aria-hidden":`true`,children:L?`⏳`:`🧭`})}),N&&(0,c.jsx)(o.Marker,{longitude:N.lng,latitude:N.lat,anchor:`center`,children:(0,c.jsx)(`div`,{className:`size-3 rounded-full bg-blue-500 ring-4 ring-blue-500/30 shadow`,"aria-label":`Your location`,"data-testid":`map-user-location`})}),re.map(e=>e.isCluster?(0,c.jsx)(o.Marker,{longitude:e.coordinates[0],latitude:e.coordinates[1],anchor:`center`,onClick:t=>{t.originalEvent.stopPropagation();try{let t=Math.min(20,Math.max(X+2,8));M.current?.flyTo({center:[e.coordinates[0],e.coordinates[1]],zoom:t,duration:600})}catch{}},children:(0,c.jsx)(`div`,{className:`flex items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xs cursor-pointer hover:scale-110 transition-transform shadow-md`,style:{width:Math.min(48,24+e.markers.length*2),height:Math.min(48,24+e.markers.length*2)},title:`${e.markers.length} markers`,"data-testid":`map-cluster`,children:e.markers.length})},e.id):(0,c.jsx)(o.Marker,{longitude:e.coordinates[0],latitude:e.coordinates[1],anchor:`bottom`,onClick:t=>{t.originalEvent.stopPropagation();let n=e.markers[0];k(n.id),Q.handleClick(n.data),l?.(n.data)},children:(0,c.jsx)(`div`,{className:`text-2xl cursor-pointer hover:scale-110 transition-transform`,children:`📍`})},e.id)),Y&&!j&&(0,c.jsx)(o.Popup,{longitude:Y.coordinates[0],latitude:Y.coordinates[1],anchor:`top`,onClose:()=>k(null),closeOnClick:!1,children:(0,c.jsxs)(`div`,{className:`p-2 min-w-[150px] sm:min-w-[200px]`,children:[(0,c.jsx)(`h3`,{className:`font-bold text-sm mb-1`,children:Y.title}),Y.description&&(0,c.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:Y.description}),(0,c.jsxs)(`div`,{className:`mt-2 text-xs flex gap-2`,children:[d&&(0,c.jsx)(`button`,{type:`button`,className:`text-blue-500 hover:underline`,onClick:()=>d(Y.data),children:`Edit`}),f&&(0,c.jsx)(`button`,{type:`button`,className:`text-red-500 hover:underline`,onClick:()=>f(Y.data),children:`Delete`})]})]})})]}),Y&&j&&(0,c.jsxs)(`div`,{className:`absolute inset-x-0 bottom-0 z-30 bg-background border-t shadow-lg rounded-t-2xl p-4 pb-[max(env(safe-area-inset-bottom),1rem)]`,role:`dialog`,"aria-label":`Location details`,"data-testid":`map-mobile-record-sheet`,children:[(0,c.jsx)(`div`,{className:`mx-auto mb-2 h-1 w-10 rounded-full bg-muted`,"aria-hidden":`true`}),(0,c.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,c.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,c.jsx)(`h3`,{className:`text-sm font-semibold truncate`,children:Y.title}),Y.description&&(0,c.jsx)(`p`,{className:`mt-1 text-xs text-muted-foreground line-clamp-3`,children:Y.description})]}),(0,c.jsx)(`button`,{type:`button`,onClick:()=>k(null),className:`text-muted-foreground hover:text-foreground text-lg leading-none px-2`,"aria-label":`Close details`,"data-testid":`map-mobile-record-close`,children:`×`})]}),(0,c.jsxs)(`div`,{className:`mt-3 flex flex-wrap gap-2 text-xs`,children:[d&&(0,c.jsx)(`button`,{type:`button`,className:`px-3 py-1.5 rounded-md border bg-card hover:bg-accent`,onClick:()=>d(Y.data),children:`Edit`}),f&&(0,c.jsx)(`button`,{type:`button`,className:`px-3 py-1.5 rounded-md border border-destructive/30 text-destructive hover:bg-destructive/10`,onClick:()=>f(Y.data),children:`Delete`})]})]}),F&&(0,c.jsx)(`div`,{className:`absolute top-2 left-14 right-2 z-10 text-xs px-3 py-1.5 rounded-md bg-destructive/10 text-destructive border border-destructive/30`,children:F})]}),Q.isOverlay&&(0,c.jsx)(i.NavigationOverlay,{...Q,title:`Location Details`,children:e=>(0,c.jsx)(`div`,{className:`space-y-3`,children:Object.entries(e).map(([e,t])=>(0,c.jsxs)(`div`,{className:`flex flex-col`,children:[(0,c.jsx)(`span`,{className:`text-xs font-medium text-muted-foreground uppercase tracking-wide`,children:e.replace(/_/g,` `)}),(0,c.jsx)(`span`,{className:`text-sm`,children:String(t??`—`)})]},e))})})]})},E={filter:!0,sort:!0},D=({schema:e,...t})=>{let{dataSource:n}=(0,r.useSchemaContext)()||{};return(0,c.jsx)(r.ElementDataSourceGate,{schema:e,mapping:E,dataSource:n,testId:`object-map`,errorTitle:`This map’s data source could not be resolved`,children:e=>(0,c.jsx)(T,{schema:e,dataSource:n,...t})})};n.ComponentRegistry.register(`object-map`,D,{namespace:`plugin-map`,label:`Object Map`,category:`view`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`map`,type:`object`,label:`Map Config`,description:`latitudeField, longitudeField, titleField`}]}),n.ComponentRegistry.register(`map`,D,{namespace:`view`,label:`Map View`,category:`view`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`map`,type:`object`,label:`Map Config`,description:`latitudeField, longitudeField, titleField`}]}),e.ObjectMap=T,e.ObjectMapRenderer=D});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("@object-ui/core"),require("@object-ui/react"),require("@object-ui/types/zod"),require("@object-ui/components"),require("react-map-gl/maplibre"),require("maplibre-gl/dist/maplibre-gl.css"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`react`,`@object-ui/core`,`@object-ui/react`,`@object-ui/types/zod`,`@object-ui/components`,`react-map-gl/maplibre`,`maplibre-gl/dist/maplibre-gl.css`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ObjectUIPluginMap={},e.React,e.ObjectUICore,e.ObjectUIReact,e.ObjectUITypesZod,e.ObjectUIComponents,e.react_map_gl_maplibre,e.maplibre_gl_dist_maplibre_gl_css,e.react_jsx_runtime))})(this,function(e,t,n,r,i,a,o,s,c){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var l=Object.create,u=Object.defineProperty,d=Object.getOwnPropertyDescriptor,f=Object.getOwnPropertyNames,p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=f(t),a=0,o=i.length,s;a<o;a++)s=i[a],!m.call(e,s)&&s!==n&&u(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=d(t,s))||r.enumerable});return e},g=(e,t,n)=>(n=e==null?{}:l(p(e)),h(t||!e||!e.__esModule||!m.call(e,`default`)?u(n,`default`,{value:e,enumerable:!0}):n,e));t=g(t,1),o=g(o,1);function _(e){return e>=-180&&e<180?e:((e+180)%360+360)%360-180}var v=e=>Math.min(85,Math.max(-85,e));function y(e){if(e.length===0)return null;let t=e.map(([e])=>_(e)).sort((e,t)=>e-t),n=e.map(([,e])=>v(e)),r=t.length,i=t[0]+360-t[r-1],a=0;for(let e=1;e<r;e++){let n=t[e]-t[e-1];n>i&&(i=n,a=e)}let o=t[a],s=t[(a+r-1)%r],c=a===0?s:s+360;return[[o,Math.min(...n)],[c,Math.max(...n)]]}function ee(e){let[[t,n],[r,i]]=e;return{longitude:_((t+r)/2),latitude:(n+i)/2}}var te=`https://demotiles.maplibre.org/style.json`,b=Object.keys(i.ObjectMapConfigSchema.shape).filter(e=>e!==`style`);function ne(e){if(e.data){let t=e.data;return Array.isArray(t)?{provider:`value`,items:t}:e.data}return e.staticData?{provider:`value`,items:e.staticData}:e.objectName?{provider:`object`,object:e.objectName}:null}var x=()=>globalThis.process?.env?.NODE_ENV!==`production`,S=new Set;function C(e){if(!x())return;let t=e.filter;if(!t||typeof t!=`object`||Array.isArray(t)||!Object.prototype.hasOwnProperty.call(t,`map`))return;let n=t.map;if(!n||typeof n!=`object`)return;let r;try{r=`${e.type??`map`}::${e.objectName??``}::${JSON.stringify(n)}`}catch{r=`${e.type??`map`}::${e.objectName??``}::<unserializable>`}S.has(r)||(S.add(r),console.warn("[ObjectMap] `filter.map` is no longer read as map configuration, so this map is rendering with the DEFAULT field names (`latitude` / `longitude` / `name`). `filter` is the query filter; the map config belongs under the declared `map` input — move it to `schema.map` (`{ type: 'object-map', map: { latitudeField, longitudeField, titleField } }`). The old spelling was never documented and could not survive a `dataSource` binding, whose merged filter is an `and` node with no `map` key at all (objectstack#7121). If `map` is genuinely a field you are filtering on, ignore this — the filter itself is passed through untouched. objectui#4034."))}var w=new Set;function T(e){if(!x())return;let t=e.style;if(typeof t!=`string`||t===``)return;let n=`${e.type??`map`}::${e.objectName??``}::${t}`;w.has(n)||(w.add(n),console.warn(`[ObjectMap] A top-level \`style\` is NOT read as a map style, so this map is rendering with the DEFAULT public demo tiles and \`${t}\` was dropped. \`style\` is the base schema's INLINE CSS key (a record of CSS properties), which every node may carry; the map style is \`mapStyle\` — named that way precisely to avoid this collision. Write \`mapStyle: '${t}'\` at the top level, or \`map: { style: '${t}' }\` in the declared config block. On a view, note that \`options.map\` is FLATTENED into the top level, so its \`style\` lands here as this same top-level key — spell it \`map: { mapStyle }\` there. objectui#5017.`))}var E=new Set;function D(e){if(!x())return;let t=b.filter(t=>e[t]!==void 0);if(t.length===0)return;let n=`${e.type??`map`}::${e.objectName??``}::${t.join(`,`)}`;E.has(n)||(E.add(n),console.warn(`[ObjectMap] The \`map\` block configures this map, so these top-level keys are IGNORED: ${t.map(e=>`\`${e}\``).join(`, `)}. The \`map\` block is the authoring shape; the flat top-level spelling is the internal form ObjectView/ListView produce when they flatten \`options.map\`, and what the author wrote outranks it. Move anything you still need into \`map\`, or drop the \`map\` block. objectui#5018.`))}function re(e){C(e),T(e);let t=e.mapStyle||e.map?.style,n=e.map??null;if(n){let r=i.ObjectMapConfigSchema.safeParse(n);return r.success||console.warn(`[ObjectMap] Invalid map configuration:`,r.error.format()),D(e),{...n,style:n.style||t}}return e.locationField||e.latitudeField?{locationField:e.locationField,latitudeField:e.latitudeField,longitudeField:e.longitudeField,titleField:e.titleField,descriptionField:e.descriptionField,zoom:e.zoom,center:e.center,style:t}:{latitudeField:`latitude`,longitudeField:`longitude`,locationField:`location`,descriptionField:`description`,style:t}}function ie(e,t){if(t.latitudeField&&t.longitudeField){let n=e[t.latitudeField],r=e[t.longitudeField];if(typeof n==`number`&&typeof r==`number`)return[n,r]}if(t.locationField){let n=e[t.locationField];if(typeof n==`object`&&n){let e=n.lat||n.latitude,t=n.lng||n.lon||n.longitude;if(typeof e==`number`&&typeof t==`number`)return[e,t]}if(typeof n==`string`){let e=n.split(`,`).map(e=>parseFloat(e.trim()));if(e.length===2&&!isNaN(e[0])&&!isNaN(e[1]))return[e[0],e[1]]}if(Array.isArray(n)&&n.length===2){let e=parseFloat(n[0]),t=parseFloat(n[1]);if(!isNaN(e)&&!isNaN(t))return[e,t]}}return null}function ae(e,t,n=50){if(e.length<=1||t>=15)return e.map(e=>({id:e.id,coordinates:e.coordinates,markers:[e],isCluster:!1}));let r=n/2**t,i=new Map;e.forEach(e=>{let t=`${Math.floor(e.coordinates[0]/r)}:${Math.floor(e.coordinates[1]/r)}`;i.has(t)||i.set(t,[]),i.get(t).push(e)});let a=[];return i.forEach((e,t)=>{if(e.length===1)a.push({id:e[0].id,coordinates:e[0].coordinates,markers:e,isCluster:!1});else{let n=e.reduce((e,t)=>e+t.coordinates[0],0)/e.length,r=e.reduce((e,t)=>e+t.coordinates[1],0)/e.length;a.push({id:`cluster-${t}`,coordinates:[n,r],markers:e,isCluster:!0})}}),a}var O=({schema:e,dataSource:i,className:s,data:l,onMarkerClick:u,onRowClick:d,onEdit:f,onDelete:p,enableClustering:m,clusterRadius:h=50})=>{let[g,_]=(0,t.useState)([]),[v,b]=(0,t.useState)(!0),[x,S]=(0,t.useState)(null),[C,w]=(0,t.useState)(null),[T,E]=(0,t.useState)(null),[D,O]=(0,t.useState)(``),k=(0,a.useIsMobile)(),A=(0,t.useRef)(null),[j,oe]=(0,t.useState)(null),[M,N]=(0,t.useState)(null),[P,F]=(0,t.useState)(!1),[I,se]=(0,t.useState)(null),ce=(0,t.useCallback)(e=>{se(e?.error?.message||`Failed to load the map style/tiles.`)},[]),L=(0,t.useCallback)(()=>{if(typeof navigator>`u`||!navigator.geolocation){N(`Geolocation is not available in this browser.`);return}F(!0),N(null),navigator.geolocation.getCurrentPosition(e=>{let{longitude:t,latitude:n}=e.coords;oe({lng:t,lat:n}),F(!1);try{A.current?.flyTo({center:[t,n],zoom:12,duration:800})}catch{}},e=>{F(!1),N(e.message||`Unable to retrieve location.`)},{enableHighAccuracy:!1,timeout:8e3,maximumAge:6e4})},[]),R=ne(e),z=(0,t.useMemo)(()=>R,[JSON.stringify(R)]),B=(0,t.useMemo)(()=>re(e),[e]),V=z?.provider===`value`;(0,t.useEffect)(()=>{(async()=>{try{if(b(!0),Array.isArray(l)){_(l),b(!1);return}if(V&&z?.provider===`value`){_(z.items),b(!1);return}if(!i||typeof i.find!=`function`)throw Error(`DataSource required for object/api providers`);if(z?.provider===`object`){let t=z.object,r=(0,n.buildExpandFields)(C?.fields),a=await i.find(t,{$filter:e.filter,$orderby:(0,n.convertSortToQueryParams)(e.sort),...r.length>0?{$expand:r}:{}}),o=(0,n.extractRecords)(a);_(o)}else z?.provider===`api`&&(console.warn(`API provider not yet implemented for ObjectMap`),_([]));b(!1)}catch(e){S(e),b(!1)}})()},[l,z,i,V,e.filter,e.sort,C]),(0,t.useEffect)(()=>{!V&&i&&(async()=>{try{if(!i)return;let t=z?.provider===`object`?z.object:e.objectName;if(!t)return;let n=await i.getObjectSchema(t);w(n)}catch(e){console.error(`Failed to fetch object schema:`,e)}})()},[e.objectName,i,V,z]);let{markers:H,invalidCount:U}=(0,t.useMemo)(()=>{let e=0;return{markers:g.map((t,r)=>{let i=ie(t,B);if(!i)return e++,null;let a=(0,n.getRecordDisplayName)(C,t,{titleField:B.titleField,fallback:`Marker`}),o=B.descriptionField?t[B.descriptionField]:void 0,[s,c]=i;return!isFinite(s)||!isFinite(c)||s<-90||s>90||c<-180||c>180?(e++,null):{id:t.id||t._id||`marker-${r}`,title:a,description:o,coordinates:[c,s],data:t}}).filter(e=>e!==null),invalidCount:e}},[g,B,C]),W=(0,t.useMemo)(()=>H.find(e=>e.id===T),[H,T]),[G,K]=(0,t.useState)(B.zoom||3),le=(0,t.useCallback)(e=>{try{let t=e?.target?.getZoom?.();typeof t==`number`&&Number.isFinite(t)&&K(Math.round(t))}catch{}},[]),q=(0,r.useNavigationOverlay)({navigation:e.navigation,objectName:e.objectName,onRowClick:d}),J=(0,t.useMemo)(()=>{if(!D.trim())return H;let e=D.toLowerCase();return H.filter(t=>t.title?.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e))},[H,D]),ue=(0,t.useMemo)(()=>m??(e.enableClustering||J.length>100)?ae(J,G,h):J.map(e=>({id:e.id,coordinates:e.coordinates,markers:[e],isCluster:!1})),[J,G,m,h,e]),Y=(0,t.useMemo)(()=>y(J.map(e=>e.coordinates)),[J]),X=typeof B.center?.[0]==`number`?B.center[0]:void 0,Z=typeof B.center?.[1]==`number`?B.center[1]:void 0,Q=typeof B.zoom==`number`?B.zoom:void 0,$=X!==void 0||Z!==void 0||Q!==void 0,de=(0,t.useMemo)(()=>{if(Y&&!$)return{bounds:Y,fitBoundsOptions:{padding:48,maxZoom:12}};let e=Y?ee(Y):{longitude:0,latitude:0};return{longitude:Z??e.longitude,latitude:X??e.latitude,zoom:Q??(Y?3:2)}},[Y,$,Z,X,Q]);return v?(0,c.jsx)(`div`,{className:(0,a.cn)(`min-w-0 overflow-hidden`,s),children:(0,c.jsx)(`div`,{className:`flex items-center justify-center h-96 bg-muted rounded-lg border`,children:(0,c.jsx)(`div`,{className:`text-muted-foreground`,children:`Loading map...`})})}):x?(0,c.jsx)(`div`,{className:(0,a.cn)(`min-w-0 overflow-hidden`,s),children:(0,c.jsx)(`div`,{className:`flex items-center justify-center h-96 bg-muted rounded-lg border`,children:(0,c.jsxs)(`div`,{className:`text-destructive`,children:[`Error: `,x.message]})})}):(0,c.jsxs)(`div`,{className:(0,a.cn)(`min-w-0 overflow-hidden`,s),children:[U>0&&(0,c.jsx)(`div`,{className:`mb-2 p-2 text-sm text-yellow-800 bg-yellow-50 border border-yellow-200 rounded`,children:`${U} record${U===1?``:`s`} with missing or invalid coordinates excluded from the map.`}),H.length>0&&(0,c.jsx)(`div`,{className:`mb-2`,children:(0,c.jsx)(`input`,{type:`text`,value:D,onChange:e=>O(e.target.value),placeholder:`Search locations…`,className:`w-full px-3 py-2 text-sm border rounded-md bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring`})}),(0,c.jsxs)(`div`,{className:`relative border rounded-lg overflow-hidden bg-muted h-[300px] sm:h-[400px] md:h-[500px] lg:h-[600px] w-full`,children:[(0,c.jsxs)(o.default,{ref:e=>{A.current=e},initialViewState:de,style:{width:`100%`,height:`100%`},mapStyle:B.style||te,touchZoomRotate:!0,dragRotate:!0,touchPitch:!0,onLoad:le,onZoom:e=>K(Math.round(e.viewState.zoom)),onError:ce,children:[I&&(0,c.jsxs)(`div`,{role:`alert`,className:`absolute inset-x-0 top-0 z-20 p-2 text-sm text-center text-amber-900 bg-amber-50 border-b border-amber-200`,children:[`Map failed to load (`,I,`). Markers below are still listed in the search box;`,` `,B.style?`check the configured map style URL.`:`configure a custom map style for production use.`]}),(0,c.jsx)(o.NavigationControl,{position:`top-right`,showCompass:!0,showZoom:!0}),(0,c.jsx)(`button`,{type:`button`,onClick:L,disabled:P,className:`absolute top-2 left-2 z-10 inline-flex items-center justify-center size-9 rounded-md bg-background/95 border shadow-sm hover:bg-background disabled:opacity-50`,"aria-label":`Show my location`,"data-testid":`map-geolocate`,children:(0,c.jsx)(`span`,{"aria-hidden":`true`,children:P?`⏳`:`🧭`})}),j&&(0,c.jsx)(o.Marker,{longitude:j.lng,latitude:j.lat,anchor:`center`,children:(0,c.jsx)(`div`,{className:`size-3 rounded-full bg-blue-500 ring-4 ring-blue-500/30 shadow`,"aria-label":`Your location`,"data-testid":`map-user-location`})}),ue.map(e=>e.isCluster?(0,c.jsx)(o.Marker,{longitude:e.coordinates[0],latitude:e.coordinates[1],anchor:`center`,onClick:t=>{t.originalEvent.stopPropagation();try{let t=Math.min(20,Math.max(G+2,8));A.current?.flyTo({center:[e.coordinates[0],e.coordinates[1]],zoom:t,duration:600})}catch{}},children:(0,c.jsx)(`div`,{className:`flex items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xs cursor-pointer hover:scale-110 transition-transform shadow-md`,style:{width:Math.min(48,24+e.markers.length*2),height:Math.min(48,24+e.markers.length*2)},title:`${e.markers.length} markers`,"data-testid":`map-cluster`,children:e.markers.length})},e.id):(0,c.jsx)(o.Marker,{longitude:e.coordinates[0],latitude:e.coordinates[1],anchor:`bottom`,onClick:t=>{t.originalEvent.stopPropagation();let n=e.markers[0];E(n.id),q.handleClick(n.data),u?.(n.data)},children:(0,c.jsx)(`div`,{className:`text-2xl cursor-pointer hover:scale-110 transition-transform`,children:`📍`})},e.id)),W&&!k&&(0,c.jsx)(o.Popup,{longitude:W.coordinates[0],latitude:W.coordinates[1],anchor:`top`,onClose:()=>E(null),closeOnClick:!1,children:(0,c.jsxs)(`div`,{className:`p-2 min-w-[150px] sm:min-w-[200px]`,children:[(0,c.jsx)(`h3`,{className:`font-bold text-sm mb-1`,children:W.title}),W.description&&(0,c.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:W.description}),(0,c.jsxs)(`div`,{className:`mt-2 text-xs flex gap-2`,children:[f&&(0,c.jsx)(`button`,{type:`button`,className:`text-blue-500 hover:underline`,onClick:()=>f(W.data),children:`Edit`}),p&&(0,c.jsx)(`button`,{type:`button`,className:`text-red-500 hover:underline`,onClick:()=>p(W.data),children:`Delete`})]})]})})]}),W&&k&&(0,c.jsxs)(`div`,{className:`absolute inset-x-0 bottom-0 z-30 bg-background border-t shadow-lg rounded-t-2xl p-4 pb-[max(env(safe-area-inset-bottom),1rem)]`,role:`dialog`,"aria-label":`Location details`,"data-testid":`map-mobile-record-sheet`,children:[(0,c.jsx)(`div`,{className:`mx-auto mb-2 h-1 w-10 rounded-full bg-muted`,"aria-hidden":`true`}),(0,c.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,c.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,c.jsx)(`h3`,{className:`text-sm font-semibold truncate`,children:W.title}),W.description&&(0,c.jsx)(`p`,{className:`mt-1 text-xs text-muted-foreground line-clamp-3`,children:W.description})]}),(0,c.jsx)(`button`,{type:`button`,onClick:()=>E(null),className:`text-muted-foreground hover:text-foreground text-lg leading-none px-2`,"aria-label":`Close details`,"data-testid":`map-mobile-record-close`,children:`×`})]}),(0,c.jsxs)(`div`,{className:`mt-3 flex flex-wrap gap-2 text-xs`,children:[f&&(0,c.jsx)(`button`,{type:`button`,className:`px-3 py-1.5 rounded-md border bg-card hover:bg-accent`,onClick:()=>f(W.data),children:`Edit`}),p&&(0,c.jsx)(`button`,{type:`button`,className:`px-3 py-1.5 rounded-md border border-destructive/30 text-destructive hover:bg-destructive/10`,onClick:()=>p(W.data),children:`Delete`})]})]}),M&&(0,c.jsx)(`div`,{className:`absolute top-2 left-14 right-2 z-10 text-xs px-3 py-1.5 rounded-md bg-destructive/10 text-destructive border border-destructive/30`,children:M})]}),q.isOverlay&&(0,c.jsx)(a.NavigationOverlay,{...q,title:`Location Details`,children:e=>(0,c.jsx)(`div`,{className:`space-y-3`,children:Object.entries(e).map(([e,t])=>(0,c.jsxs)(`div`,{className:`flex flex-col`,children:[(0,c.jsx)(`span`,{className:`text-xs font-medium text-muted-foreground uppercase tracking-wide`,children:e.replace(/_/g,` `)}),(0,c.jsx)(`span`,{className:`text-sm`,children:String(t??`—`)})]},e))})})]})},k={filter:!0,sort:!0},A=({schema:e,...t})=>{let{dataSource:n}=(0,r.useSchemaContext)()||{};return(0,c.jsx)(r.ElementDataSourceGate,{schema:e,mapping:k,dataSource:n,testId:`object-map`,errorTitle:`This map’s data source could not be resolved`,children:e=>(0,c.jsx)(O,{schema:e,dataSource:n,...t})})};n.ComponentRegistry.register(`object-map`,A,{namespace:`plugin-map`,label:`Object Map`,category:`view`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`map`,type:`object`,label:`Map Config`,description:`latitudeField, longitudeField, titleField`}]}),n.ComponentRegistry.register(`map`,A,{namespace:`view`,label:`Map View`,category:`view`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`map`,type:`object`,label:`Map Config`,description:`latitudeField, longitudeField, titleField`}]}),e.ObjectMap=O,e.ObjectMapRenderer=A});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-map",
-  "version": "17.5.0",
+  "version": "17.6.0",
   "type": "module",
   "license": "MIT",
   "description": "Map visualization plugin for Object UI",
@@ -24,15 +24,15 @@
     }
   },
   "dependencies": {
-    "@objectstack/spec": "^17.0.0-rc.6",
-    "lucide-react": "^1.29.0",
-    "maplibre-gl": "^6.2.0",
+    "@objectstack/spec": "^17.0.0",
+    "lucide-react": "^1.31.0",
+    "maplibre-gl": "^6.3.0",
     "react-map-gl": "^8.1.2",
     "zod": "^4.4.3",
-    "@object-ui/components": "17.5.0",
-    "@object-ui/core": "17.5.0",
-    "@object-ui/react": "17.5.0",
-    "@object-ui/types": "17.5.0"
+    "@object-ui/components": "17.6.0",
+    "@object-ui/core": "17.6.0",
+    "@object-ui/react": "17.6.0",
+    "@object-ui/types": "17.6.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -44,7 +44,8 @@
     "@vitejs/plugin-react": "^6.0.5",
     "typescript": "^6.0.3",
     "vite": "^8.2.1",
-    "vite-plugin-dts": "^5.0.3"
+    "vite-plugin-dts": "^5.0.3",
+    "@object-ui/plugin-list": "17.6.0"
   },
   "keywords": [
     "objectui",