@pautena/react-design-system 0.14.0 → 0.14.2

package/model-router/model-router.d.ts

@@ -1,4 +1,4 @@
-import { BasicModelInstance } from "../generators/generators.model";
+import { BasicModelInstance } from "~/generators";
 import { AddScreenProps, DetailsScreenProps, ListScreenProps, UpdateScreenProps } from "./screens";
 export type ModelRouterProps<T extends BasicModelInstance> = DetailsScreenProps<T> & ListScreenProps<T> & AddScreenProps<T> & UpdateScreenProps<T>;
 export declare const ModelRouter: <T extends BasicModelInstance>(props: ModelRouterProps<T>) => JSX.Element;

package/model-router/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/model-router",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/model-router/screens/screens.types.d.ts

@@ -1,4 +1,4 @@
-import { Model } from "../../generators/generators.model";
+import { Model } from "~/generators";
 export interface BaseScreenProps {
     /**
      * UI-friendly string that represents the model

package/model-router/screens/update-screen.d.ts

@@ -1,5 +1,5 @@
-import { BasicModelInstance } from "../../generators/generators.model";
-import { RequestState } from "../model-router.types";
+import { BasicModelInstance } from "~/generators";
+import { RequestState } from "~/model-router";
 import { BaseScreenProps } from "./screens.types";
 export interface UpdateScreenProps<T extends BasicModelInstance> extends BaseScreenProps {
     /**

package/model-router/stories/templates.d.ts

@@ -1,4 +1,4 @@
-import { MockInstance } from "../../generators/generators.mock";
+import { MockInstance } from "~/generators/generators.mock";
 export declare const onRequestListAction: import("@storybook/addon-actions").HandlerFunction;
 export declare const onSubmitNewItemAction: import("@storybook/addon-actions").HandlerFunction;
 export declare const onRequestItem: import("@storybook/addon-actions").HandlerFunction;
@@ -12,10 +12,10 @@ export declare const baseArgs: {
     modelName: string;
     model: import("../..").Model;
     listData: MockInstance[];
-    listRequest: import("../model-router.types").RequestState;
-    deleteRequest: import("../model-router.types").RequestState;
-    newItemRequest: import("../model-router.types").RequestState;
-    updateItemRequest: import("../model-router.types").RequestState;
-    submitUpdateItemRequest: import("../model-router.types").RequestState;
-    itemRequest: import("../model-router.types").RequestState;
+    listRequest: import("~/model-router").RequestState;
+    deleteRequest: import("~/model-router").RequestState;
+    newItemRequest: import("~/model-router").RequestState;
+    updateItemRequest: import("~/model-router").RequestState;
+    submitUpdateItemRequest: import("~/model-router").RequestState;
+    itemRequest: import("~/model-router").RequestState;
 };

package/notification-center/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Snackbar"),i=require("@mui/material/Alert"),o=require("@mui/material/AlertTitle");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(r),s=n(i),u=n(o);const d=new Error("NotificationCenterContext.Provider is required and was undefined"),l=t.createContext(void 0),c=()=>{const e=t.useContext(l);if(void 0===e)throw d;return e};exports.NotificationCenterContext=l,exports.NotificationCenterProvider=({children:r,autoHideDuration:i=6e3})=>{const[o,n]=t.useState(void 0),[d,c]=t.useState(!1),f=()=>{c(!1)};return e.jsxs(l.Provider,{value:{show:e=>{n(e),c(!0)},hide:f},children:[e.jsx(a.default,{open:d,autoHideDuration:i,onClose:f,anchorOrigin:{vertical:"top",horizontal:"right"},children:e.jsxs(s.default,{onClose:f,severity:o?.severity,"aria-label":o?.severity,sx:{width:"100%"},children:[o?.title&&e.jsx(u.default,{children:o?.title}),o?.message]})}),r]})},exports.NotificationCenterProviderUndefinedError=d,exports.useNotificationCenter=c,exports.useNotifyWhenValueChanges=(e,r,{from:i,to:o})=>{const n=t.useRef(),{show:a}=c();t.useEffect((()=>{n.current===i&&r===o&&a(e),n.current=r}),[r])};
+//# sourceMappingURL=index.js.map

package/notification-center/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/notification-center/notification-center.context.ts","../../../src/notification-center/notification-center.provider.tsx","../../../src/notification-center/notification-center.hooks.ts"],"sourcesContent":["import { AlertColor } from \"@mui/material/Alert\";\nimport { createContext, useContext } from \"react\";\n\nexport const NotificationCenterProviderUndefinedError = new Error(\n  \"NotificationCenterContext.Provider is required and was undefined\",\n);\n\nexport interface Notification {\n  severity: AlertColor;\n  title?: string;\n  message: string;\n}\n\nexport interface NotificationCenterProps {\n  show(notification: Notification): void;\n  hide(): void;\n}\n\nexport const NotificationCenterContext = createContext<NotificationCenterProps | undefined>(\n  undefined,\n);\n\nexport const useNotificationCenter = () => {\n  const context = useContext(NotificationCenterContext);\n\n  if (context === undefined) {\n    throw NotificationCenterProviderUndefinedError;\n  }\n\n  return context;\n};\n","import { useState, PropsWithChildren } from \"react\";\nimport Snackbar from \"@mui/material/Snackbar\";\nimport Alert from \"@mui/material/Alert\";\nimport AlertTitle from \"@mui/material/AlertTitle\";\nimport { Notification, NotificationCenterContext } from \"./notification-center.context\";\n\nexport type NotificationCenterProviderProps = PropsWithChildren<{\n  autoHideDuration?: number;\n}>;\n\nexport const NotificationCenterProvider = ({\n  children,\n  autoHideDuration = 6000,\n}: NotificationCenterProviderProps) => {\n  const [notification, setNotification] = useState<Notification | undefined>(undefined);\n  const [open, setOpen] = useState(false);\n  const show = (notification: Notification) => {\n    setNotification(notification);\n    setOpen(true);\n  };\n\n  const hide = () => {\n    setOpen(false);\n  };\n\n  return (\n    <NotificationCenterContext.Provider\n      value={{\n        show,\n        hide,\n      }}\n    >\n      <Snackbar\n        open={open}\n        autoHideDuration={autoHideDuration}\n        onClose={hide}\n        anchorOrigin={{ vertical: \"top\", horizontal: \"right\" }}\n      >\n        <Alert\n          onClose={hide}\n          severity={notification?.severity}\n          aria-label={notification?.severity}\n          sx={{ width: \"100%\" }}\n        >\n          {notification?.title && <AlertTitle>{notification?.title}</AlertTitle>}\n          {notification?.message}\n        </Alert>\n      </Snackbar>\n      {children}\n    </NotificationCenterContext.Provider>\n  );\n};\n","import { useEffect, useRef } from \"react\";\nimport { useNotificationCenter, Notification } from \"./notification-center.context\";\n\nexport interface NotifyWhenValueChangesOptions<T> {\n  from: T;\n  to: T;\n}\n\nexport const useNotifyWhenValueChanges = <T>(\n  notification: Notification,\n  value: T | undefined,\n  { from, to }: NotifyWhenValueChangesOptions<T>,\n) => {\n  const prevRef = useRef<T>();\n  const { show } = useNotificationCenter();\n\n  useEffect(() => {\n    if (prevRef.current === from && value === to) {\n      show(notification);\n    }\n    prevRef.current = value;\n  }, [value]);\n};\n"],"names":["NotificationCenterProviderUndefinedError","Error","NotificationCenterContext","createContext","undefined","useNotificationCenter","context","useContext","children","autoHideDuration","notification","setNotification","useState","open","setOpen","hide","_jsxs","Provider","value","show","_jsx","Snackbar","onClose","anchorOrigin","vertical","horizontal","Alert","severity","sx","width","title","jsx","AlertTitle","message","from","to","prevRef","useRef","useEffect","current"],"mappings":"4UAGaA,EAA2C,IAAIC,MAC1D,oEAcWC,EAA4BC,EAAaA,mBACpDC,GAGWC,EAAwB,KACnC,MAAMC,EAAUC,aAAWL,GAE3B,QAAgBE,IAAZE,EACF,MAAMN,EAGR,OAAOM,CAAO,yECnB0B,EACxCE,WACAC,mBAAmB,QAEnB,MAAOC,EAAcC,GAAmBC,EAAQA,cAA2BR,IACpES,EAAMC,GAAWF,EAAQA,UAAC,GAM3BG,EAAO,KACXD,GAAQ,EAAM,EAGhB,OACEE,OAACd,EAA0Be,SAAQ,CACjCC,MAAO,CACLC,KAZQT,IACZC,EAAgBD,GAChBI,GAAQ,EAAK,EAWTC,QACDP,SAAA,CAEDY,MAACC,EAAAA,QACC,CAAAR,KAAMA,EACNJ,iBAAkBA,EAClBa,QAASP,EACTQ,aAAc,CAAEC,SAAU,MAAOC,WAAY,SAE7CjB,SAAAQ,OAACU,EAAAA,QACC,CAAAJ,QAASP,EACTY,SAAUjB,GAAciB,SAAQ,aACpBjB,GAAciB,SAC1BC,GAAI,CAAEC,MAAO,QAAQrB,SAAA,CAEpBE,GAAcoB,OAASV,EAAAW,IAACC,UAAY,CAAAxB,SAAAE,GAAcoB,QAClDpB,GAAcuB,aAGlBzB,IAEH,uHC1CqC,CACvCE,EACAQ,GACEgB,OAAMC,SAER,MAAMC,EAAUC,EAAAA,UACVlB,KAAEA,GAASd,IAEjBiC,EAAAA,WAAU,KACJF,EAAQG,UAAYL,GAAQhB,IAAUiB,GACxChB,EAAKT,GAEP0B,EAAQG,QAAUrB,CAAK,GACtB,CAACA,GAAO"}

package/notification-center/cjs/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@pautena/react-design-system/notification-center",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/notification-center/index.js

@@ -1,2 +1,2 @@
-import e,{useState as t,useRef as r,useEffect as o}from"react";import{Snackbar as i,Alert as n,AlertTitle as a}from"@mui/material";const l=new Error("NotificationCenterContext.Provider is required and was undefined"),s=e.createContext(void 0),c=()=>{const t=e.useContext(s);if(void 0===t)throw l;return t},d=({children:r,autoHideDuration:o=6e3})=>{const[l,c]=t(void 0),[d,u]=t(!1),m=()=>{u(!1)};return e.createElement(s.Provider,{value:{show:e=>{c(e),u(!0)},hide:m}},e.createElement(i,{open:d,autoHideDuration:o,onClose:m,anchorOrigin:{vertical:"top",horizontal:"right"}},e.createElement(n,{onClose:m,severity:l?.severity,"aria-label":l?.severity,sx:{width:"100%"}},l?.title&&e.createElement(a,null,l?.title),l?.message)),r)},u=(e,t,{from:i,to:n})=>{const a=r(),{show:l}=c();o((()=>{a.current===i&&t===n&&l(e),a.current=t}),[t])};export{s as NotificationCenterContext,d as NotificationCenterProvider,l as NotificationCenterProviderUndefinedError,c as useNotificationCenter,u as useNotifyWhenValueChanges};
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import{createContext as i,useContext as t,useState as o,useRef as n,useEffect as a}from"react";import l from"@mui/material/Snackbar";import m from"@mui/material/Alert";import d from"@mui/material/AlertTitle";const c=new Error("NotificationCenterContext.Provider is required and was undefined"),s=i(void 0),u=()=>{const r=t(s);if(void 0===r)throw c;return r},h=({children:i,autoHideDuration:t=6e3})=>{const[n,a]=o(void 0),[c,u]=o(!1),h=()=>{u(!1)};return r(s.Provider,{value:{show:r=>{a(r),u(!0)},hide:h},children:[e(l,{open:c,autoHideDuration:t,onClose:h,anchorOrigin:{vertical:"top",horizontal:"right"},children:r(m,{onClose:h,severity:n?.severity,"aria-label":n?.severity,sx:{width:"100%"},children:[n?.title&&e(d,{children:n?.title}),n?.message]})}),i]})},v=(r,e,{from:i,to:t})=>{const o=n(),{show:l}=u();a((()=>{o.current===i&&e===t&&l(r),o.current=e}),[e])};export{s as NotificationCenterContext,h as NotificationCenterProvider,c as NotificationCenterProviderUndefinedError,u as useNotificationCenter,v as useNotifyWhenValueChanges};
 //# sourceMappingURL=index.js.map

package/notification-center/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/notification-center/notification-center.context.ts","../../src/notification-center/notification-center.provider.tsx","../../src/notification-center/notification-center.hooks.ts"],"sourcesContent":["import { AlertColor } from \"@mui/material\";\nimport React from \"react\";\n\nexport const NotificationCenterProviderUndefinedError = new Error(\n  \"NotificationCenterContext.Provider is required and was undefined\",\n);\n\nexport interface Notification {\n  severity: AlertColor;\n  title?: string;\n  message: string;\n}\n\nexport interface NotificationCenterProps {\n  show(notification: Notification): void;\n  hide(): void;\n}\n\nexport const NotificationCenterContext = React.createContext<NotificationCenterProps | undefined>(\n  undefined,\n);\n\nexport const useNotificationCenter = () => {\n  const context = React.useContext(NotificationCenterContext);\n\n  if (context === undefined) {\n    throw NotificationCenterProviderUndefinedError;\n  }\n\n  return context;\n};\n","import { useState } from \"react\";\nimport { Snackbar, Alert, AlertTitle } from \"@mui/material\";\nimport React, { PropsWithChildren } from \"react\";\nimport { Notification, NotificationCenterContext } from \"./notification-center.context\";\n\nexport type NotificationCenterProviderProps = PropsWithChildren<{\n  autoHideDuration?: number;\n}>;\n\nexport const NotificationCenterProvider = ({\n  children,\n  autoHideDuration = 6000,\n}: NotificationCenterProviderProps) => {\n  const [notification, setNotification] = useState<Notification | undefined>(undefined);\n  const [open, setOpen] = useState(false);\n  const show = (notification: Notification) => {\n    setNotification(notification);\n    setOpen(true);\n  };\n\n  const hide = () => {\n    setOpen(false);\n  };\n\n  return (\n    <NotificationCenterContext.Provider\n      value={{\n        show,\n        hide,\n      }}\n    >\n      <Snackbar\n        open={open}\n        autoHideDuration={autoHideDuration}\n        onClose={hide}\n        anchorOrigin={{ vertical: \"top\", horizontal: \"right\" }}\n      >\n        <Alert\n          onClose={hide}\n          severity={notification?.severity}\n          aria-label={notification?.severity}\n          sx={{ width: \"100%\" }}\n        >\n          {notification?.title && <AlertTitle>{notification?.title}</AlertTitle>}\n          {notification?.message}\n        </Alert>\n      </Snackbar>\n      {children}\n    </NotificationCenterContext.Provider>\n  );\n};\n","import { useEffect, useRef } from \"react\";\nimport { useNotificationCenter, Notification } from \"./notification-center.context\";\n\nexport interface NotifyWhenValueChangesOptions<T> {\n  from: T;\n  to: T;\n}\n\nexport const useNotifyWhenValueChanges = <T>(\n  notification: Notification,\n  value: T | undefined,\n  { from, to }: NotifyWhenValueChangesOptions<T>,\n) => {\n  const prevRef = useRef<T>();\n  const { show } = useNotificationCenter();\n\n  useEffect(() => {\n    if (prevRef.current === from && value === to) {\n      show(notification);\n    }\n    prevRef.current = value;\n  }, [value]);\n};\n"],"names":["NotificationCenterProviderUndefinedError","Error","NotificationCenterContext","React","createContext","undefined","useNotificationCenter","context","useContext","NotificationCenterProvider","children","autoHideDuration","notification","setNotification","useState","open","setOpen","hide","createElement","Provider","value","show","Snackbar","onClose","anchorOrigin","vertical","horizontal","Alert","severity","sx","width","title","AlertTitle","message","useNotifyWhenValueChanges","from","to","prevRef","useRef","useEffect","current"],"mappings":"yIAGaA,EAA2C,IAAIC,MAC1D,oEAcWC,EAA4BC,EAAMC,mBAC7CC,GAGWC,EAAwB,KACnC,MAAMC,EAAUJ,EAAMK,WAAWN,GAEjC,QAAgBG,IAAZE,EACF,MAAMP,EAGR,OAAOO,CAAO,ECpBHE,EAA6B,EACxCC,WACAC,mBAAmB,QAEnB,MAAOC,EAAcC,GAAmBC,OAAmCT,IACpEU,EAAMC,GAAWF,GAAS,GAM3BG,EAAO,KACXD,GAAQ,EAAM,EAGhB,OACEb,EAACe,cAAAhB,EAA0BiB,SAAQ,CACjCC,MAAO,CACLC,KAZQT,IACZC,EAAgBD,GAChBI,GAAQ,EAAK,EAWTC,SAGFd,EAACe,cAAAI,EACC,CAAAP,KAAMA,EACNJ,iBAAkBA,EAClBY,QAASN,EACTO,aAAc,CAAEC,SAAU,MAAOC,WAAY,UAE7CvB,EAACe,cAAAS,GACCJ,QAASN,EACTW,SAAUhB,GAAcgB,sBACZhB,GAAcgB,SAC1BC,GAAI,CAAEC,MAAO,SAEZlB,GAAcmB,OAAS5B,EAAAe,cAACc,EAAY,KAAApB,GAAcmB,OAClDnB,GAAcqB,UAGlBvB,EAEH,ECzCSwB,EAA4B,CACvCtB,EACAQ,GACEe,OAAMC,SAER,MAAMC,EAAUC,KACVjB,KAAEA,GAASf,IAEjBiC,GAAU,KACJF,EAAQG,UAAYL,GAAQf,IAAUgB,GACxCf,EAAKT,GAEPyB,EAAQG,QAAUpB,CAAK,GACtB,CAACA,GAAO"}
+{"version":3,"file":"index.js","sources":["../../src/notification-center/notification-center.context.ts","../../src/notification-center/notification-center.provider.tsx","../../src/notification-center/notification-center.hooks.ts"],"sourcesContent":["import { AlertColor } from \"@mui/material/Alert\";\nimport { createContext, useContext } from \"react\";\n\nexport const NotificationCenterProviderUndefinedError = new Error(\n  \"NotificationCenterContext.Provider is required and was undefined\",\n);\n\nexport interface Notification {\n  severity: AlertColor;\n  title?: string;\n  message: string;\n}\n\nexport interface NotificationCenterProps {\n  show(notification: Notification): void;\n  hide(): void;\n}\n\nexport const NotificationCenterContext = createContext<NotificationCenterProps | undefined>(\n  undefined,\n);\n\nexport const useNotificationCenter = () => {\n  const context = useContext(NotificationCenterContext);\n\n  if (context === undefined) {\n    throw NotificationCenterProviderUndefinedError;\n  }\n\n  return context;\n};\n","import { useState, PropsWithChildren } from \"react\";\nimport Snackbar from \"@mui/material/Snackbar\";\nimport Alert from \"@mui/material/Alert\";\nimport AlertTitle from \"@mui/material/AlertTitle\";\nimport { Notification, NotificationCenterContext } from \"./notification-center.context\";\n\nexport type NotificationCenterProviderProps = PropsWithChildren<{\n  autoHideDuration?: number;\n}>;\n\nexport const NotificationCenterProvider = ({\n  children,\n  autoHideDuration = 6000,\n}: NotificationCenterProviderProps) => {\n  const [notification, setNotification] = useState<Notification | undefined>(undefined);\n  const [open, setOpen] = useState(false);\n  const show = (notification: Notification) => {\n    setNotification(notification);\n    setOpen(true);\n  };\n\n  const hide = () => {\n    setOpen(false);\n  };\n\n  return (\n    <NotificationCenterContext.Provider\n      value={{\n        show,\n        hide,\n      }}\n    >\n      <Snackbar\n        open={open}\n        autoHideDuration={autoHideDuration}\n        onClose={hide}\n        anchorOrigin={{ vertical: \"top\", horizontal: \"right\" }}\n      >\n        <Alert\n          onClose={hide}\n          severity={notification?.severity}\n          aria-label={notification?.severity}\n          sx={{ width: \"100%\" }}\n        >\n          {notification?.title && <AlertTitle>{notification?.title}</AlertTitle>}\n          {notification?.message}\n        </Alert>\n      </Snackbar>\n      {children}\n    </NotificationCenterContext.Provider>\n  );\n};\n","import { useEffect, useRef } from \"react\";\nimport { useNotificationCenter, Notification } from \"./notification-center.context\";\n\nexport interface NotifyWhenValueChangesOptions<T> {\n  from: T;\n  to: T;\n}\n\nexport const useNotifyWhenValueChanges = <T>(\n  notification: Notification,\n  value: T | undefined,\n  { from, to }: NotifyWhenValueChangesOptions<T>,\n) => {\n  const prevRef = useRef<T>();\n  const { show } = useNotificationCenter();\n\n  useEffect(() => {\n    if (prevRef.current === from && value === to) {\n      show(notification);\n    }\n    prevRef.current = value;\n  }, [value]);\n};\n"],"names":["NotificationCenterProviderUndefinedError","Error","NotificationCenterContext","createContext","undefined","useNotificationCenter","context","useContext","NotificationCenterProvider","children","autoHideDuration","notification","setNotification","useState","open","setOpen","hide","_jsxs","Provider","value","show","_jsx","Snackbar","onClose","anchorOrigin","vertical","horizontal","Alert","severity","sx","width","title","AlertTitle","message","useNotifyWhenValueChanges","from","to","prevRef","useRef","useEffect","current"],"mappings":"wQAGaA,EAA2C,IAAIC,MAC1D,oEAcWC,EAA4BC,OACvCC,GAGWC,EAAwB,KACnC,MAAMC,EAAUC,EAAWL,GAE3B,QAAgBE,IAAZE,EACF,MAAMN,EAGR,OAAOM,CAAO,ECnBHE,EAA6B,EACxCC,WACAC,mBAAmB,QAEnB,MAAOC,EAAcC,GAAmBC,OAAmCT,IACpEU,EAAMC,GAAWF,GAAS,GAM3BG,EAAO,KACXD,GAAQ,EAAM,EAGhB,OACEE,EAACf,EAA0BgB,SAAQ,CACjCC,MAAO,CACLC,KAZQT,IACZC,EAAgBD,GAChBI,GAAQ,EAAK,EAWTC,QACDP,SAAA,CAEDY,EAACC,EACC,CAAAR,KAAMA,EACNJ,iBAAkBA,EAClBa,QAASP,EACTQ,aAAc,CAAEC,SAAU,MAAOC,WAAY,SAE7CjB,SAAAQ,EAACU,EACC,CAAAJ,QAASP,EACTY,SAAUjB,GAAciB,SAAQ,aACpBjB,GAAciB,SAC1BC,GAAI,CAAEC,MAAO,QAAQrB,SAAA,CAEpBE,GAAcoB,OAASV,EAACW,EAAY,CAAAvB,SAAAE,GAAcoB,QAClDpB,GAAcsB,aAGlBxB,IAEH,EC1CSyB,EAA4B,CACvCvB,EACAQ,GACEgB,OAAMC,SAER,MAAMC,EAAUC,KACVlB,KAAEA,GAASf,IAEjBkC,GAAU,KACJF,EAAQG,UAAYL,GAAQhB,IAAUiB,GACxChB,EAAKT,GAEP0B,EAAQG,QAAUrB,CAAK,GACtB,CAACA,GAAO"}

package/notification-center/notification-center.context.d.ts

@@ -1,5 +1,5 @@
-import { AlertColor } from "@mui/material";
-import React from "react";
+/// <reference types="react" />
+import { AlertColor } from "@mui/material/Alert";
 export declare const NotificationCenterProviderUndefinedError: Error;
 export interface Notification {
     severity: AlertColor;
@@ -10,5 +10,5 @@ export interface NotificationCenterProps {
     show(notification: Notification): void;
     hide(): void;
 }
-export declare const NotificationCenterContext: React.Context<NotificationCenterProps | undefined>;
+export declare const NotificationCenterContext: import("react").Context<NotificationCenterProps | undefined>;
 export declare const useNotificationCenter: () => NotificationCenterProps;

package/notification-center/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/notification-center",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/object-details/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Grid"),i=require("@mui/material/styles"),l=require("@mui/material/Box"),r=require("@mui/material/Switch"),n=require("@mui/material/Typography"),a=require("@mui/icons-material/Check"),s=require("@mui/icons-material/Close"),d=require("react"),o=require("@mui/icons-material/Clear"),u=require("@mui/material/Button"),c=require("@mui/material/IconButton"),m=require("@mui/material/InputAdornment"),x=require("@mui/icons-material/Edit"),h=require("@mui/material/Tooltip"),p=require("@mui/material/TextField"),f=require("date-fns"),g=require("@mui/x-date-pickers/DatePicker"),b=require("@mui/x-date-pickers/DateTimePicker"),j=require("@mui/x-date-pickers/TimePicker"),y=require("@mui/material/Paper"),k=require("@mui/material"),v=require("@mui/x-data-grid");function E(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var C=E(t),q=E(l),S=E(r),T=E(n),I=E(a),z=E(s),P=E(o),R=E(u),D=E(c),V=E(m),W=E(x),A=E(h),w=E(p),L=E(y);const O=(e=12)=>{const t=(t,i,l)=>{const r=t[i];return t[i]+=l,t[i]>e?(t[i]=l,!1):(t[i]==e&&(t[i]=0),r>0)};return{xs:0,sm:0,md:0,lg:0,xl:0,increment:function({xs:e=0,sm:i=0,md:l=0,lg:r=0,xl:n=0}){const a=i||e,s=l||a,d=r||s,o=n||d;return{xs:t(this,"xs",e),sm:t(this,"sm",a),md:t(this,"md",s),lg:t(this,"lg",d),xl:t(this,"xl",o)}}}},N=({onClickCancel:t,onClickSubmit:i,sx:l})=>e.jsxs(V.default,{position:"end",sx:l,children:[e.jsx(R.default,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:e.jsx(P.default,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0,marginRight:1}}),e.jsx(R.default,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:e.jsx(I.default,{sx:{fontSize:12}}),onClick:i,sx:{paddingRight:0,minWidth:0}})]}),B=(e,t)=>{const[i,l]=d.useState(!1),[r,n]=d.useState(e),a=()=>{l(!1),n(e)};return{isEditing:i,cancelEdit:a,editValue:r,setEditValue:n,startEdit:()=>{l(!0)},submitEdit:()=>{t(r),a()}}},H=({dense:t,onClick:l})=>{const{typography:r}=i.useTheme();return e.jsx(D.default,{size:"small",onClick:l,sx:{ml:t?.5:1},"aria-label":"edit button",children:e.jsx(W.default,{sx:{fontSize:r.pxToRem(t?18:24)}})})},F=e=>`label-${e.replace(/ /g,"-")}`,G=({label:t,hideLabel:l,tooltip:r,tooltipEnterDelay:n=2e3,children:a,dense:s,sx:d})=>{const{typography:o}=i.useTheme(),u=F(t);return e.jsxs(q.default,{width:1,lineHeight:s?0:void 0,sx:d,children:[!l&&e.jsx(T.default,{variant:s?"caption":"subtitle2",role:"label",id:u,lineHeight:s?o.pxToRem(15):void 0,children:t}),r?e.jsx(A.default,{title:r,placement:"top",enterDelay:n,children:a}):a]})},M=({label:t,value:l,placeholder:r="-",editable:n,dense:a,onEdit:s=(()=>null)})=>{const d=F(t),{typography:o}=i.useTheme(),{isEditing:u,editValue:c,startEdit:m,cancelEdit:x,setEditValue:h,submitEdit:p}=B(l,s),f={fontSize:a?o.h6.fontSize:o.h5.fontSize};return e.jsx(G,{label:t,dense:a,children:u?e.jsxs(q.default,{display:"flex",alignItems:"center",children:[e.jsx(S.default,{size:a?"small":"medium",checked:c,onChange:e=>h(e.target.checked)}),e.jsx(N,{onClickCancel:x,onClickSubmit:p})]}):e.jsxs(q.default,{display:"flex",alignItems:"center","aria-labelledby":d,role:"checkbox","aria-checked":l,children:[void 0===l?e.jsx(T.default,{variant:"h5",children:r}):l?e.jsx(I.default,{color:"success",sx:f}):e.jsx(z.default,{color:"error",sx:f}),n&&e.jsx(H,{dense:a,onClick:m})]})})},Y=({label:t,value:i,format:l,placeholder:r="-",editable:n,editInputType:a="datetime",dense:s,onEdit:d=(()=>null)})=>{const{isEditing:o,editValue:u,startEdit:c,cancelEdit:m,setEditValue:x,submitEdit:h}=B(i,d),p=F(t),y=i&&f.format(i,l)||r,k="datetime"===a?b.DateTimePicker:"time"===a?j.TimePicker:g.DatePicker;return e.jsx(G,{label:t,hideLabel:o,tooltip:y,dense:s,sx:{display:"flex",flexDirection:"column"},children:o?e.jsx(k,{value:u,format:l,label:t,onChange:e=>x(e||void 0),slots:{textField:t=>e.jsx(w.default,{...t,size:"small",InputProps:{...t.InputProps,endAdornment:e.jsxs(e.Fragment,{children:[t.InputProps?.endAdornment,e.jsx(N,{onClickCancel:m,onClickSubmit:h,sx:{ml:2}})]}),sx:{marginY:s?.2:1}}})}}):e.jsxs(q.default,{display:"flex",alignItems:"center",children:[e.jsx(T.default,{variant:s?"body1":"h5",noWrap:!0,"aria-labelledby":p,children:y}),n&&e.jsx(H,{dense:s,onClick:c})]})})},$=({label:t,value:i,placeholder:l="-",editable:r,dense:n,onEdit:a=(()=>null)})=>{const s=d.useRef(null),{isEditing:o,editValue:u,startEdit:c,cancelEdit:m,setEditValue:x,submitEdit:h}=B(i?.toString(),a),p=F(t),f=i?.toString()||l,g=e=>{"Enter"===e.key&&a(e.target.value)};return d.useEffect((()=>(s.current?.addEventListener("keypress",g),()=>s.current?.removeEventListener("keypress",g))),[s.current]),e.jsx(G,{hideLabel:o,label:t,tooltip:f,dense:n,children:o?e.jsx(w.default,{inputRef:s,value:u,label:t,size:"small",onChange:e=>x(e.target.value),InputProps:{endAdornment:e.jsx(N,{onClickCancel:m,onClickSubmit:h})},sx:{marginY:n?0:1}}):e.jsxs(T.default,{variant:n?"body1":"h5",noWrap:!0,"aria-labelledby":p,children:[f,r&&e.jsx(H,{dense:n,onClick:c})]})})},_=({lightWeight:e=100,darkWeight:t=900}={})=>{const{palette:i}=k.useTheme();return"light"===i.mode?i.grey[e]:i.grey[t]},J=({title:t,subtitle:l,centered:r,children:n,dense:a})=>{const{typography:s}=i.useTheme(),d=_({lightWeight:200,darkWeight:800});return e.jsxs(L.default,{sx:{paddingBottom:a?0:1},children:[e.jsxs(q.default,{bgcolor:d,px:a?1:2,py:a?.5:1,lineHeight:a?0:void 0,children:[e.jsx(T.default,{variant:a?"body1":"h6",role:"heading","aria-level":1,children:t}),l&&e.jsx(T.default,{variant:a?"caption":"body2",role:"heading","aria-level":2,lineHeight:a?s.pxToRem(15):void 0,children:l})]}),e.jsx(C.default,{container:!0,padding:1,rowSpacing:a?1:2,justifyContent:r?"center":"flex-start",children:n})]})},K="RdsValueItem-root",Q="RdsValueItem-content",U=({children:t,bordered:i=!0,...l})=>{const r=((e,t)=>{const i=`solid ${t} 1px`,l="none";if(e){if(Array.isArray(e))return e.map((e=>e?i:l));if("object"==typeof e){const t={};return Object.entries(e).forEach((([e,r])=>{t[e]=r?i:l})),t}return i}})(i,_({lightWeight:200,darkWeight:800}));return e.jsx(C.default,{item:!0,className:K,...l,children:e.jsx(q.default,{className:Q,px:1,borderLeft:r,children:t})})},X=(t,i,{dense:l}={})=>{const{id:r,name:n,type:a}=t,s=i[r];return"boolean"===a?e.jsx(M,{dense:l,label:n,value:s}):"date"===a||"time"===a||"datetime"===a?e.jsx(Y,{dense:l,label:n,value:s,format:t.format}):"object"!=typeof s||Array.isArray(s)?e.jsx($,{dense:l,label:n,value:s?.toString()}):e.jsx($,{dense:l,label:n,value:JSON.stringify(s)})},Z=({field:{name:t,description:i,value:l},instance:r,dense:n})=>{const a=[{field:"id",headerName:"ID",width:70}];l.forEach((e=>{a.push({field:e.id,headerName:e.name})}));const s=r.map(((e,t)=>({id:t,...e})));return e.jsx(J,{title:t,subtitle:i,dense:n,children:e.jsx(C.default,{item:!0,xs:12,children:e.jsx(v.DataGrid,{rows:s,columns:a,density:n?"compact":"standard",disableRowSelectionOnClick:!0,pageSizeOptions:[5],initialState:{pagination:{paginationModel:{pageSize:5}}},sx:{height:400}})})})},ee=({field:{name:t,description:i,value:l},instance:r,dense:n})=>{const a=O();return e.jsx(J,{title:t,subtitle:i,dense:n,children:l.map((t=>{const{id:i,xs:l,sm:s,md:d,lg:o,xl:u}=t,c=a.increment(t);return e.jsx(U,{xs:l,sm:s,md:d,lg:o,xl:u,bordered:c,children:X(t,r,{dense:n})},i)}))})};exports.ObjectDetails=({model:t,instance:i,dense:l})=>{const r=O();return e.jsx(C.default,{container:!0,spacing:l?1:2,children:t.fields.map((t=>{const{id:n,type:a,xs:s=3,sm:d=0,md:o=0,lg:u=0,xl:c=0}=t;if("group"===a)return r.increment({xs:12}),e.jsx(C.default,{item:!0,xs:12,children:e.jsx(ee,{field:t,instance:i[n],dense:l})},n);if("group[]"===a)return r.increment({xs:12}),e.jsx(C.default,{item:!0,xs:12,children:e.jsx(Z,{field:t,instance:i[n],dense:l})},n);const m=r.increment(t);return e.jsx(U,{xs:s,sm:d,md:o,lg:u,xl:c,bordered:m,children:X(t,i,{dense:l})},n)}))})};
+//# sourceMappingURL=index.js.map

package/object-details/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/utils/breakpoints.ts","../../../src/value-base/value-edit.tsx","../../../src/value-content/value-content.tsx","../../../src/value-boolean/value-boolean.tsx","../../../src/value-base/value-displays.types.ts","../../../src/value-datetime/value-datetime.tsx","../../../src/value-text/value-text.tsx","../../../src/utils/theme.ts","../../../src/group-value-card/group-value-card.tsx","../../../src/value-item/value-item.tsx","../../../src/object-details/object-details.tsx"],"sourcesContent":["import { ResponsiveStyleValue } from \"@mui/system\";\n\ninterface Breakpoints {\n  xs: number;\n  sm: number;\n  md: number;\n  lg: number;\n  xl: number;\n}\n\ninterface BreakpointsCounter extends Breakpoints {\n  increment(breakpoints: Partial<Breakpoints>): ResponsiveStyleValue<boolean>;\n}\n\nexport const newBreakpointsCounter = (breakpoint = 12): BreakpointsCounter => {\n  const calculateBreakpointIncrement = (\n    breakpointsCounter: BreakpointsCounter,\n    key: keyof Breakpoints,\n    value: number,\n  ): boolean => {\n    const initialValue = breakpointsCounter[key];\n    breakpointsCounter[key] += value;\n    if (breakpointsCounter[key] > breakpoint) {\n      breakpointsCounter[key] = value;\n      return false;\n    }\n\n    if (breakpointsCounter[key] == breakpoint) {\n      breakpointsCounter[key] = 0;\n    }\n\n    return initialValue > 0;\n  };\n\n  return {\n    xs: 0,\n    sm: 0,\n    md: 0,\n    lg: 0,\n    xl: 0,\n    increment: function ({\n      xs = 0,\n      sm = 0,\n      md = 0,\n      lg = 0,\n      xl = 0,\n    }): ResponsiveStyleValue<boolean> {\n      const smInc = sm || xs;\n      const mdInc = md || smInc;\n      const lgInc = lg || mdInc;\n      const xlInc = xl || lgInc;\n\n      return {\n        xs: calculateBreakpointIncrement(this, \"xs\", xs),\n        sm: calculateBreakpointIncrement(this, \"sm\", smInc),\n        md: calculateBreakpointIncrement(this, \"md\", mdInc),\n        lg: calculateBreakpointIncrement(this, \"lg\", lgInc),\n        xl: calculateBreakpointIncrement(this, \"xl\", xlInc),\n      };\n    },\n  };\n};\n","import { useState } from \"react\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Button from \"@mui/material/Button\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport EditIcon from \"@mui/icons-material/Edit\";\n\nexport interface ValueEditButtonsProps {\n  onClickCancel: () => void;\n  onClickSubmit: () => void;\n  sx?: SxProps<Theme>;\n}\n\nexport const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {\n  return (\n    <InputAdornment position=\"end\" sx={sx}>\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        color=\"error\"\n        aria-label=\"cancel button\"\n        startIcon={<ClearIcon sx={{ fontSize: 12 }} />}\n        onClick={onClickCancel}\n        sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}\n      />\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        color=\"primary\"\n        aria-label=\"submit button\"\n        startIcon={<CheckIcon sx={{ fontSize: 12 }} />}\n        onClick={onClickSubmit}\n        sx={{ paddingRight: 0, minWidth: 0 }}\n      />\n    </InputAdornment>\n  );\n};\n\n/**\n * Hook to manage the editing behaviour\n */\nexport const useEditableValueDisplay = <T,>(\n  initialValue: T | undefined,\n  onEdit: (value?: T) => void,\n) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState<T | undefined>(initialValue);\n\n  const cancelEdit = () => {\n    setIsEditing(false);\n    setEditValue(initialValue);\n  };\n  const startEdit = () => {\n    setIsEditing(true);\n  };\n\n  const submitEdit = () => {\n    onEdit(editValue);\n    cancelEdit();\n  };\n\n  return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };\n};\n\nexport interface ValueEditButtonProps {\n  dense?: boolean;\n  onClick: () => void;\n}\n\nexport const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {\n  const { typography } = useTheme();\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={onClick}\n      sx={{ ml: dense ? 0.5 : 1 }}\n      aria-label=\"edit button\"\n    >\n      <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />\n    </IconButton>\n  );\n};\n","import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n  `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * If true, the label will not be shown\n   */\n  hideLabel?: boolean;\n\n  /**\n   * If defined, a tooltip is going to be added arround the children;\n   */\n  tooltip?: string;\n\n  /**\n   * Timeout before the tooltip appears when the user hovers the value\n   */\n  tooltipEnterDelay?: number;\n\n  /**\n   * Component that's going to be renderd under the label\n   */\n  children: React.ReactElement<any, any>;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n\n  /**\n   * Custom styles for the root component\n   */\n  sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n  label,\n  hideLabel,\n  tooltip,\n  tooltipEnterDelay = 2000,\n  children,\n  dense,\n  sx,\n}: ValueContentProps) => {\n  const { typography } = useTheme();\n  const id = getValueContentLabelId(label);\n\n  return (\n    <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n      {!hideLabel && (\n        <Typography\n          variant={dense ? \"caption\" : \"subtitle2\"}\n          role=\"label\"\n          id={id}\n          lineHeight={dense ? typography.pxToRem(15) : undefined}\n        >\n          {label}\n        </Typography>\n      )}\n      {tooltip ? (\n        <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n          {children}\n        </Tooltip>\n      ) : (\n        children\n      )}\n    </Box>\n  );\n};\n","import { useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Switch from \"@mui/material/Switch\";\nimport Typography from \"@mui/material/Typography\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport {\n  BaseValueProps,\n  DefaultPlaceholder,\n  EditableValueProps,\n  useEditableValueDisplay,\n  ValueEditButton,\n  ValueEditButtons,\n} from \"~/value-base\";\nimport { ValueContent, getValueContentLabelId } from \"~/value-content\";\n\nexport type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;\n\n/**\n * Displays a boolean value with a label\n */\nexport const ValueBoolean = ({\n  label,\n  value,\n  placeholder = DefaultPlaceholder,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueBooleanProps) => {\n  const id = getValueContentLabelId(label);\n  const { typography } = useTheme();\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(value, onEdit);\n\n  const iconSx = { fontSize: dense ? typography.h6.fontSize : typography.h5.fontSize };\n\n  return (\n    <ValueContent label={label} dense={dense}>\n      {isEditing ? (\n        <Box display=\"flex\" alignItems=\"center\">\n          <Switch\n            size={dense ? \"small\" : \"medium\"}\n            checked={editValue}\n            onChange={(e) => setEditValue(e.target.checked)}\n          />\n          <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n        </Box>\n      ) : (\n        <Box\n          display=\"flex\"\n          alignItems=\"center\"\n          aria-labelledby={id}\n          role=\"checkbox\"\n          aria-checked={value}\n        >\n          {value === undefined ? (\n            <Typography variant=\"h5\">{placeholder}</Typography>\n          ) : value ? (\n            <CheckIcon color=\"success\" sx={iconSx} />\n          ) : (\n            <CloseIcon color=\"error\" sx={iconSx} />\n          )}\n          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n        </Box>\n      )}\n    </ValueContent>\n  );\n};\n","export interface BaseValueProps<T> {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * Value displayed\n   */\n  value?: T;\n\n  /**\n   * String rendered if value is undefined\n   */\n  placeholder?: string;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n  /**\n   * This field can be edited or not\n   */\n  editable?: boolean;\n\n  /**\n   * Callback executed when the value is edited\n   */\n  onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n","import Box from \"@mui/material/Box\";\nimport TextField from \"@mui/material/TextField\";\nimport Typography from \"@mui/material/Typography\";\nimport { format } from \"date-fns\";\nimport { BaseValueProps, DefaultPlaceholder, EditableValueProps } from \"~/value-base\";\nimport { getValueContentLabelId, ValueContent } from \"~/value-content\";\nimport { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from \"~/value-base\";\nimport { DatePicker } from \"@mui/x-date-pickers/DatePicker\";\nimport { DateTimePicker } from \"@mui/x-date-pickers/DateTimePicker\";\nimport { TimePicker } from \"@mui/x-date-pickers/TimePicker\";\n\nexport type EditInputType = \"datetime\" | \"date\" | \"time\";\n\nexport interface ValueDatetimeProps extends BaseValueProps<Date>, EditableValueProps<Date> {\n  /**\n   * Datetime format\n   */\n  format: string;\n\n  /**\n   * Edit input type\n   */\n  editInputType?: EditInputType;\n}\n\n/**\n * Displays a formated datetime with a label\n */\nexport const ValueDatetime = ({\n  label,\n  value: valueProp,\n  format: fmt,\n  placeholder = DefaultPlaceholder,\n  editable,\n  editInputType = \"datetime\",\n  dense,\n  onEdit = () => null,\n}: ValueDatetimeProps) => {\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(valueProp, onEdit);\n  const id = getValueContentLabelId(label);\n  const value = (valueProp && format(valueProp, fmt)) || placeholder;\n\n  const EditPickerComponent =\n    editInputType === \"datetime\"\n      ? DateTimePicker\n      : editInputType === \"time\"\n      ? TimePicker\n      : DatePicker;\n\n  return (\n    <ValueContent\n      label={label}\n      hideLabel={isEditing}\n      tooltip={value}\n      dense={dense}\n      sx={{ display: \"flex\", flexDirection: \"column\" }}\n    >\n      {isEditing ? (\n        <EditPickerComponent\n          value={editValue}\n          format={fmt}\n          label={label}\n          onChange={(newValue) => setEditValue(newValue ? newValue : undefined)}\n          slots={{\n            textField: (params) => (\n              <TextField\n                {...params}\n                size=\"small\"\n                InputProps={{\n                  ...params.InputProps,\n                  endAdornment: (\n                    <>\n                      {params.InputProps?.endAdornment}\n                      <ValueEditButtons\n                        onClickCancel={cancelEdit}\n                        onClickSubmit={submitEdit}\n                        sx={{ ml: 2 }}\n                      />\n                    </>\n                  ),\n                  sx: { marginY: !dense ? 1 : 0.2 },\n                }}\n              />\n            ),\n          }}\n        />\n      ) : (\n        <Box display=\"flex\" alignItems=\"center\">\n          <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n            {value}\n          </Typography>\n          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n        </Box>\n      )}\n    </ValueContent>\n  );\n};\n","import Typography from \"@mui/material/Typography\";\nimport TextField from \"@mui/material/TextField\";\nimport { useEffect, useRef } from \"react\";\nimport {\n  BaseValueProps,\n  DefaultPlaceholder,\n  EditableValueProps,\n  useEditableValueDisplay,\n  ValueEditButton,\n  ValueEditButtons,\n} from \"~/value-base\";\nimport { getValueContentLabelId, ValueContent } from \"~/value-content\";\n\nexport type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;\n\n/**\n * Displays a string value with a label\n */\nexport const ValueText = ({\n  label,\n  value: valueProp,\n  placeholder = DefaultPlaceholder,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueTextProps) => {\n  const editInputRef = useRef<HTMLInputElement>(null);\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(valueProp?.toString(), onEdit);\n  const id = getValueContentLabelId(label);\n  const value = valueProp?.toString() || placeholder;\n\n  const editKeyPressListener = (e: KeyboardEvent) => {\n    if (e.key === \"Enter\") {\n      onEdit((e.target as any).value);\n    }\n  };\n\n  useEffect(() => {\n    editInputRef.current?.addEventListener(\"keypress\", editKeyPressListener);\n    return () => editInputRef.current?.removeEventListener(\"keypress\", editKeyPressListener);\n  }, [editInputRef.current]);\n\n  return (\n    <ValueContent hideLabel={isEditing} label={label} tooltip={value} dense={dense}>\n      {isEditing ? (\n        <TextField\n          inputRef={editInputRef}\n          value={editValue}\n          label={label}\n          size=\"small\"\n          onChange={(e) => setEditValue(e.target.value)}\n          InputProps={{\n            endAdornment: (\n              <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n            ),\n          }}\n          sx={{ marginY: !dense ? 1 : 0 }}\n        />\n      ) : (\n        <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n          {value}\n          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n        </Typography>\n      )}\n    </ValueContent>\n  );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import Grid from \"@mui/material/Grid\";\nimport Paper from \"@mui/material/Paper\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { useGetDefaultThemeColor } from \"~/utils\";\nimport { ValueItemElement } from \"~/value-item\";\n\nexport interface GroupValueCardProps {\n  title: string;\n  subtitle?: string;\n  centered?: boolean;\n  children: ValueItemElement | ValueItemElement[];\n  dense?: boolean;\n}\n\nexport const GroupValueCard = ({\n  title,\n  subtitle,\n  centered,\n  children,\n  dense,\n}: GroupValueCardProps) => {\n  const { typography } = useTheme();\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n\n  return (\n    <Paper\n      sx={{\n        paddingBottom: dense ? 0 : 1,\n      }}\n    >\n      <Box\n        bgcolor={defaultColor}\n        px={dense ? 1 : 2}\n        py={dense ? 0.5 : 1}\n        lineHeight={dense ? 0 : undefined}\n      >\n        <Typography variant={dense ? \"body1\" : \"h6\"} role=\"heading\" aria-level={1}>\n          {title}\n        </Typography>\n        {subtitle && (\n          <Typography\n            variant={dense ? \"caption\" : \"body2\"}\n            role=\"heading\"\n            aria-level={2}\n            lineHeight={dense ? typography.pxToRem(15) : undefined}\n          >\n            {subtitle}\n          </Typography>\n        )}\n      </Box>\n      <Grid\n        container\n        padding={1}\n        rowSpacing={dense ? 1 : 2}\n        justifyContent={centered ? \"center\" : \"flex-start\"}\n      >\n        {children}\n      </Grid>\n    </Paper>\n  );\n};\n","import Grid, { GridProps } from \"@mui/material/Grid\";\nimport Box from \"@mui/material/Box\";\nimport { ResponsiveStyleValue } from \"@mui/system\";\nimport { PropsWithChildren, FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"~/utils\";\n\nexport type ValueItemProps = PropsWithChildren<\n  Omit<GridProps, \"item\" | \"container\"> & { bordered?: ResponsiveStyleValue<boolean> }\n>;\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n  root: \"RdsValueItem-root\",\n  content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {\n  const borderStyle = `solid ${color} 1px`;\n  const noBorder = \"none\";\n\n  if (!bordered) {\n    return undefined;\n  }\n\n  if (Array.isArray(bordered)) {\n    return bordered.map((b) => (b ? borderStyle : noBorder));\n  }\n\n  if (typeof bordered === \"object\") {\n    const style: Record<string, string | undefined> = {};\n    Object.entries(bordered).forEach(([key, value]) => {\n      style[key] = value ? borderStyle : noBorder;\n    });\n    return style;\n  }\n\n  return borderStyle;\n};\n\nexport const ValueItem: ValueItemComponent = ({\n  children,\n  bordered = true,\n  ...rest\n}: ValueItemProps) => {\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n  const borderLeft = resolveBorderStyle(bordered, defaultColor);\n  return (\n    <Grid item className={valueItemClasses.root} {...rest}>\n      <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n        {children}\n      </Box>\n    </Grid>\n  );\n};\n","import Grid from \"@mui/material/Grid\";\nimport { newBreakpointsCounter } from \"~/utils/breakpoints\";\nimport { ValueBoolean } from \"~/value-boolean\";\nimport { ValueDatetime } from \"~/value-datetime\";\nimport { ValueText } from \"~/value-text\";\nimport { GroupValueCard } from \"~/group-value-card\";\nimport { ValueItem } from \"~/value-item\";\nimport {\n  ArrayGroupField,\n  ArrayInstanceType,\n  BasicModelInstance,\n  GroupField,\n  GroupInstanceType,\n  Model,\n  ModelField,\n} from \"~/generators/generators.model\";\nimport { GridColDef, DataGrid } from \"@mui/x-data-grid\";\n\ninterface SingleDetailValueFactoryOptions {\n  dense?: boolean;\n}\n\nconst singleDetailValueFactory = <T extends BasicModelInstance>(\n  field: ModelField,\n  instance: T | GroupInstanceType,\n  { dense }: SingleDetailValueFactoryOptions = {},\n) => {\n  const { id, name, type } = field;\n  const value = instance[id];\n  if (type === \"boolean\") {\n    return <ValueBoolean dense={dense} label={name} value={value as boolean} />;\n  } else if (type === \"date\" || type === \"time\" || type === \"datetime\") {\n    return <ValueDatetime dense={dense} label={name} value={value as Date} format={field.format} />;\n  }\n\n  if (typeof value === \"object\" && !Array.isArray(value)) {\n    return <ValueText dense={dense} label={name} value={JSON.stringify(value)} />;\n  }\n  return <ValueText dense={dense} label={name} value={value?.toString()} />;\n};\n\ninterface ObjectArrayGroupProps {\n  field: ArrayGroupField;\n  instance: ArrayInstanceType;\n  dense?: boolean;\n}\n\nconst ObjectArrayGroup = ({\n  field: { name, description, value },\n  instance,\n  dense,\n}: ObjectArrayGroupProps) => {\n  const columns: GridColDef[] = [{ field: \"id\", headerName: \"ID\", width: 70 }];\n\n  value.forEach((column) => {\n    columns.push({\n      field: column.id,\n      headerName: column.name,\n    });\n  });\n\n  const rows = instance.map((f, id) => ({\n    id,\n    ...f,\n  }));\n\n  return (\n    <GroupValueCard title={name} subtitle={description} dense={dense}>\n      <Grid item xs={12}>\n        <DataGrid\n          rows={rows}\n          columns={columns}\n          density={dense ? \"compact\" : \"standard\"}\n          disableRowSelectionOnClick\n          pageSizeOptions={[5]}\n          initialState={{\n            pagination: {\n              paginationModel: {\n                pageSize: 5,\n              },\n            },\n          }}\n          sx={{ height: 400 }}\n        />\n      </Grid>\n    </GroupValueCard>\n  );\n};\n\ninterface ObjectDetailGroupProps {\n  field: GroupField;\n  instance: GroupInstanceType;\n  dense?: boolean;\n}\n\nconst ObjectDetailGroup = ({\n  field: { name, description, value },\n  instance,\n  dense,\n}: ObjectDetailGroupProps) => {\n  const breakpointsCounter = newBreakpointsCounter();\n\n  return (\n    <GroupValueCard title={name} subtitle={description} dense={dense}>\n      {value.map((field) => {\n        const { id, xs, sm, md, lg, xl } = field;\n        const bordered = breakpointsCounter.increment(field);\n        return (\n          <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>\n            {singleDetailValueFactory(field, instance, { dense })}\n          </ValueItem>\n        );\n      })}\n    </GroupValueCard>\n  );\n};\n\nexport interface ObjectDetailsProps<T extends BasicModelInstance> {\n  model: Model;\n  dense?: boolean;\n  instance: T;\n}\n\nexport const ObjectDetails = <T extends BasicModelInstance>({\n  model,\n  instance,\n  dense,\n}: ObjectDetailsProps<T>) => {\n  const breakpointsCounter = newBreakpointsCounter();\n  return (\n    <Grid container spacing={dense ? 1 : 2}>\n      {model.fields.map((field) => {\n        const { id, type, xs = 3, sm = 0, md = 0, lg = 0, xl = 0 } = field;\n\n        if (type === \"group\") {\n          breakpointsCounter.increment({ xs: 12 });\n          return (\n            <Grid item key={id} xs={12}>\n              <ObjectDetailGroup\n                field={field}\n                instance={instance[id] as GroupInstanceType}\n                dense={dense}\n              />\n            </Grid>\n          );\n        }\n\n        if (type === \"group[]\") {\n          breakpointsCounter.increment({ xs: 12 });\n          return (\n            <Grid item key={id} xs={12}>\n              <ObjectArrayGroup field={field} instance={instance[id] as any} dense={dense} />\n            </Grid>\n          );\n        }\n\n        const bordered = breakpointsCounter.increment(field);\n        return (\n          <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>\n            {singleDetailValueFactory(field, instance, { dense })}\n          </ValueItem>\n        );\n      })}\n    </Grid>\n  );\n};\n"],"names":["newBreakpointsCounter","breakpoint","calculateBreakpointIncrement","breakpointsCounter","key","value","initialValue","xs","sm","md","lg","xl","increment","smInc","mdInc","lgInc","xlInc","this","ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","jsx","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","useEditableValueDisplay","onEdit","isEditing","setIsEditing","useState","editValue","setEditValue","cancelEdit","startEdit","submitEdit","ValueEditButton","dense","typography","useTheme","IconButton","ml","EditIcon","pxToRem","getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","id","Box","width","lineHeight","undefined","Typography","role","Tooltip","title","placement","enterDelay","ValueBoolean","placeholder","editable","iconSx","h6","h5","display","alignItems","Switch","checked","onChange","e","target","jsxs","CloseIcon","ValueDatetime","valueProp","format","fmt","editInputType","EditPickerComponent","DateTimePicker","TimePicker","DatePicker","flexDirection","newValue","slots","textField","params","TextField","InputProps","endAdornment","_Fragment","Fragment","marginY","noWrap","ValueText","editInputRef","useRef","toString","editKeyPressListener","useEffect","current","addEventListener","removeEventListener","inputRef","useGetDefaultThemeColor","lightWeight","darkWeight","palette","mode","grey","GroupValueCard","subtitle","centered","defaultColor","Paper","paddingBottom","bgcolor","px","py","Grid","container","padding","rowSpacing","justifyContent","valueItemClasses","ValueItem","bordered","rest","borderLeft","borderStyle","noBorder","Array","isArray","map","b","style","Object","entries","forEach","resolveBorderStyle","item","className","singleDetailValueFactory","field","instance","name","type","JSON","stringify","ObjectArrayGroup","description","columns","headerName","column","push","rows","f","DataGrid","density","disableRowSelectionOnClick","pageSizeOptions","initialState","pagination","paginationModel","pageSize","height","ObjectDetailGroup","model","spacing","fields"],"mappings":"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"}

package/object-details/cjs/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@pautena/react-design-system/object-details",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.6",
+    "@mui/x-data-grid": "^6.9.0",
+    "@mui/x-date-pickers": "^6.9.0",
+    "date-fns": "^2.30.0",
+    "react": "^18.2.0"
+  }
+}

package/object-details/index.js

@@ -1,2 +1,2 @@
-import e,{useState as t,useRef as n,useEffect as l}from"react";import{InputAdornment as i,Button as a,useTheme as r,IconButton as o,Box as s,Typography as c,Tooltip as m,Switch as d,TextField as u,Paper as p,Grid as E}from"@mui/material";import{DataGrid as g}from"@mui/x-data-grid";import h from"@mui/icons-material/Check";import b from"@mui/icons-material/Close";import x from"@mui/icons-material/Clear";import f from"@mui/icons-material/Edit";import{format as y}from"date-fns";import{DateTimePicker as k,TimePicker as v,DatePicker as C}from"@mui/x-date-pickers";const S=(e=12)=>{const t=(t,n,l)=>{const i=t[n];return t[n]+=l,t[n]>e?(t[n]=l,!1):(t[n]==e&&(t[n]=0),i>0)};return{xs:0,sm:0,md:0,lg:0,xl:0,increment:function({xs:e=0,sm:n=0,md:l=0,lg:i=0,xl:a=0}){const r=n||e,o=l||r,s=i||o,c=a||s;return{xs:t(this,"xs",e),sm:t(this,"sm",r),md:t(this,"md",o),lg:t(this,"lg",s),xl:t(this,"xl",c)}}}},z=({onClickCancel:t,onClickSubmit:n,sx:l})=>e.createElement(i,{position:"end",sx:l},e.createElement(a,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:e.createElement(x,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0,marginRight:1}}),e.createElement(a,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:e.createElement(h,{sx:{fontSize:12}}),onClick:n,sx:{paddingRight:0,minWidth:0}})),I=(e,n)=>{const[l,i]=t(!1),[a,r]=t(e),o=()=>{i(!1),r(e)};return{isEditing:l,cancelEdit:o,editValue:a,setEditValue:r,startEdit:()=>{i(!0)},submitEdit:()=>{n(a),o()}}},R=({dense:t,onClick:n})=>{const{typography:l}=r();return e.createElement(o,{size:"small",onClick:n,sx:{ml:t?.5:1},"aria-label":"edit button"},e.createElement(f,{sx:{fontSize:l.pxToRem(t?18:24)}}))},V=e=>`label-${e.replace(/ /g,"-")}`,W=({label:t,hideLabel:n,tooltip:l,tooltipEnterDelay:i=2e3,children:a,dense:o,sx:d})=>{const{typography:u}=r(),p=V(t);return e.createElement(s,{width:1,lineHeight:o?0:void 0,sx:d},!n&&e.createElement(c,{variant:o?"caption":"subtitle2",role:"label",id:p,lineHeight:o?u.pxToRem(15):void 0},t),l?e.createElement(m,{title:l,placement:"top",enterDelay:i},a):a)},A=({label:t,value:n,placeholder:l="-",editable:i,dense:a,onEdit:o=(()=>null)})=>{const m=V(t),{typography:u}=r(),{isEditing:p,editValue:E,startEdit:g,cancelEdit:x,setEditValue:f,submitEdit:y}=I(n,o),k={fontSize:a?u.h6.fontSize:u.h5.fontSize};return e.createElement(W,{label:t,dense:a},p?e.createElement(s,{display:"flex",alignItems:"center"},e.createElement(d,{size:a?"small":"medium",checked:E,onChange:e=>f(e.target.checked)}),e.createElement(z,{onClickCancel:x,onClickSubmit:y})):e.createElement(s,{display:"flex",alignItems:"center","aria-labelledby":m,role:"checkbox","aria-checked":n},void 0===n?e.createElement(c,{variant:"h5"},l):n?e.createElement(h,{color:"success",sx:k}):e.createElement(b,{color:"error",sx:k}),i&&e.createElement(R,{dense:a,onClick:g})))},L=({label:t,value:n,format:l,placeholder:i="-",editable:a,editInputType:r="datetime",dense:o,onEdit:m=(()=>null)})=>{const{isEditing:d,editValue:p,startEdit:E,cancelEdit:g,setEditValue:h,submitEdit:b}=I(n,m),x=V(t),f=n&&y(n,l)||i,S="datetime"===r?k:"time"===r?v:C;return e.createElement(W,{label:t,hideLabel:d,tooltip:f,dense:o,sx:{display:"flex",flexDirection:"column"}},d?e.createElement(S,{value:p,format:l,label:t,onChange:e=>h(e||void 0),slots:{textField:t=>e.createElement(u,{...t,size:"small",InputProps:{...t.InputProps,endAdornment:e.createElement(e.Fragment,null,t.InputProps?.endAdornment,e.createElement(z,{onClickCancel:g,onClickSubmit:b,sx:{ml:2}})),sx:{marginY:o?.2:1}}})}}):e.createElement(s,{display:"flex",alignItems:"center"},e.createElement(c,{variant:o?"body1":"h5",noWrap:!0,"aria-labelledby":x},f),a&&e.createElement(R,{dense:o,onClick:E})))},w=({label:t,value:i,placeholder:a="-",editable:r,dense:o,onEdit:s=(()=>null)})=>{const m=n(null),{isEditing:d,editValue:p,startEdit:E,cancelEdit:g,setEditValue:h,submitEdit:b}=I(i?.toString(),s),x=V(t),f=i?.toString()||a,y=e=>{"Enter"===e.key&&s(e.target.value)};return l((()=>(m.current?.addEventListener("keypress",y),()=>m.current?.removeEventListener("keypress",y))),[m.current]),e.createElement(W,{hideLabel:d,label:t,tooltip:f,dense:o},d?e.createElement(u,{inputRef:m,value:p,label:t,size:"small",onChange:e=>h(e.target.value),InputProps:{endAdornment:e.createElement(z,{onClickCancel:g,onClickSubmit:b})},sx:{marginY:o?0:1}}):e.createElement(c,{variant:o?"body1":"h5",noWrap:!0,"aria-labelledby":x},f,r&&e.createElement(R,{dense:o,onClick:E})))},N=({lightWeight:e=100,darkWeight:t=900}={})=>{const{palette:n}=r();return"light"===n.mode?n.grey[e]:n.grey[t]},j=({title:t,subtitle:n,centered:l,children:i,dense:a})=>{const{typography:o}=r(),m=N({lightWeight:200,darkWeight:800});return e.createElement(p,{sx:{paddingBottom:a?0:1}},e.createElement(s,{bgcolor:m,px:a?1:2,py:a?.5:1,lineHeight:a?0:void 0},e.createElement(c,{variant:a?"body1":"h6",role:"heading","aria-level":1},t),n&&e.createElement(c,{variant:a?"caption":"body2",role:"heading","aria-level":2,lineHeight:a?o.pxToRem(15):void 0},n)),e.createElement(E,{container:!0,padding:1,rowSpacing:a?1:2,justifyContent:l?"center":"flex-start"},i))},D="RdsValueItem-root",H="RdsValueItem-content",O=({children:t,bordered:n=!0,...l})=>{const i=((e,t)=>{const n=`solid ${t} 1px`,l="none";if(e){if(Array.isArray(e))return e.map((e=>e?n:l));if("object"==typeof e){const t={};return Object.entries(e).forEach((([e,i])=>{t[e]=i?n:l})),t}return n}})(n,N({lightWeight:200,darkWeight:800}));return e.createElement(E,{item:!0,className:D,...l},e.createElement(s,{className:H,px:1,borderLeft:i},t))},P=(t,n,{dense:l}={})=>{const{id:i,name:a,type:r}=t,o=n[i];return"boolean"===r?e.createElement(A,{dense:l,label:a,value:o}):"date"===r||"time"===r||"datetime"===r?e.createElement(L,{dense:l,label:a,value:o,format:t.format}):"object"!=typeof o||Array.isArray(o)?e.createElement(w,{dense:l,label:a,value:o?.toString()}):e.createElement(w,{dense:l,label:a,value:JSON.stringify(o)})},T=({field:{name:t,description:n,value:l},instance:i,dense:a})=>{const r=[{field:"id",headerName:"ID",width:70}];l.forEach((e=>{r.push({field:e.id,headerName:e.name})}));const o=i.map(((e,t)=>({id:t,...e})));return e.createElement(j,{title:t,subtitle:n,dense:a},e.createElement(E,{item:!0,xs:12},e.createElement(g,{rows:o,columns:r,density:a?"compact":"standard",disableRowSelectionOnClick:!0,pageSizeOptions:[5],initialState:{pagination:{paginationModel:{pageSize:5}}},sx:{height:400}})))},F=({field:{name:t,description:n,value:l},instance:i,dense:a})=>{const r=S();return e.createElement(j,{title:t,subtitle:n,dense:a},l.map((t=>{const{id:n,xs:l,sm:o,md:s,lg:c,xl:m}=t,d=r.increment(t);return e.createElement(O,{key:n,xs:l,sm:o,md:s,lg:c,xl:m,bordered:d},P(t,i,{dense:a}))})))},Y=({model:t,instance:n,dense:l})=>{const i=S();return e.createElement(E,{container:!0,spacing:l?1:2},t.fields.map((t=>{const{id:a,type:r,xs:o=3,sm:s=0,md:c=0,lg:m=0,xl:d=0}=t;if("group"===r)return i.increment({xs:12}),e.createElement(E,{item:!0,key:a,xs:12},e.createElement(F,{field:t,instance:n[a],dense:l}));if("group[]"===r)return i.increment({xs:12}),e.createElement(E,{item:!0,key:a,xs:12},e.createElement(T,{field:t,instance:n[a],dense:l}));const u=i.increment(t);return e.createElement(O,{key:a,xs:o,sm:s,md:c,lg:m,xl:d,bordered:u},P(t,n,{dense:l}))})))};export{Y as ObjectDetails};
+import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import n from"@mui/material/Grid";import{useTheme as r}from"@mui/material/styles";import l from"@mui/material/Box";import a from"@mui/material/Switch";import o from"@mui/material/Typography";import d from"@mui/icons-material/Check";import s from"@mui/icons-material/Close";import{useState as m,useRef as c,useEffect as u}from"react";import p from"@mui/icons-material/Clear";import h from"@mui/material/Button";import g from"@mui/material/IconButton";import b from"@mui/material/InputAdornment";import f from"@mui/icons-material/Edit";import x from"@mui/material/Tooltip";import y from"@mui/material/TextField";import{format as k}from"date-fns";import{DatePicker as v}from"@mui/x-date-pickers/DatePicker";import{DateTimePicker as E}from"@mui/x-date-pickers/DateTimePicker";import{TimePicker as C}from"@mui/x-date-pickers/TimePicker";import S from"@mui/material/Paper";import{useTheme as I}from"@mui/material";import{DataGrid as z}from"@mui/x-data-grid";const R=(e=12)=>{const i=(i,t,n)=>{const r=i[t];return i[t]+=n,i[t]>e?(i[t]=n,!1):(i[t]==e&&(i[t]=0),r>0)};return{xs:0,sm:0,md:0,lg:0,xl:0,increment:function({xs:e=0,sm:t=0,md:n=0,lg:r=0,xl:l=0}){const a=t||e,o=n||a,d=r||o,s=l||d;return{xs:i(this,"xs",e),sm:i(this,"sm",a),md:i(this,"md",o),lg:i(this,"lg",d),xl:i(this,"xl",s)}}}},T=({onClickCancel:t,onClickSubmit:n,sx:r})=>e(b,{position:"end",sx:r,children:[i(h,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:i(p,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0,marginRight:1}}),i(h,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:i(d,{sx:{fontSize:12}}),onClick:n,sx:{paddingRight:0,minWidth:0}})]}),V=(e,i)=>{const[t,n]=m(!1),[r,l]=m(e),a=()=>{n(!1),l(e)};return{isEditing:t,cancelEdit:a,editValue:r,setEditValue:l,startEdit:()=>{n(!0)},submitEdit:()=>{i(r),a()}}},W=({dense:e,onClick:t})=>{const{typography:n}=r();return i(g,{size:"small",onClick:t,sx:{ml:e?.5:1},"aria-label":"edit button",children:i(f,{sx:{fontSize:n.pxToRem(e?18:24)}})})},A=e=>`label-${e.replace(/ /g,"-")}`,P=({label:t,hideLabel:n,tooltip:a,tooltipEnterDelay:d=2e3,children:s,dense:m,sx:c})=>{const{typography:u}=r(),p=A(t);return e(l,{width:1,lineHeight:m?0:void 0,sx:c,children:[!n&&i(o,{variant:m?"caption":"subtitle2",role:"label",id:p,lineHeight:m?u.pxToRem(15):void 0,children:t}),a?i(x,{title:a,placement:"top",enterDelay:d,children:s}):s]})},w=({label:t,value:n,placeholder:m="-",editable:c,dense:u,onEdit:p=(()=>null)})=>{const h=A(t),{typography:g}=r(),{isEditing:b,editValue:f,startEdit:x,cancelEdit:y,setEditValue:k,submitEdit:v}=V(n,p),E={fontSize:u?g.h6.fontSize:g.h5.fontSize};return i(P,{label:t,dense:u,children:e(l,b?{display:"flex",alignItems:"center",children:[i(a,{size:u?"small":"medium",checked:f,onChange:e=>k(e.target.checked)}),i(T,{onClickCancel:y,onClickSubmit:v})]}:{display:"flex",alignItems:"center","aria-labelledby":h,role:"checkbox","aria-checked":n,children:[void 0===n?i(o,{variant:"h5",children:m}):n?i(d,{color:"success",sx:E}):i(s,{color:"error",sx:E}),c&&i(W,{dense:u,onClick:x})]})})},D=({label:n,value:r,format:a,placeholder:d="-",editable:s,editInputType:m="datetime",dense:c,onEdit:u=(()=>null)})=>{const{isEditing:p,editValue:h,startEdit:g,cancelEdit:b,setEditValue:f,submitEdit:x}=V(r,u),S=A(n),I=r&&k(r,a)||d;return i(P,{label:n,hideLabel:p,tooltip:I,dense:c,sx:{display:"flex",flexDirection:"column"},children:p?i("datetime"===m?E:"time"===m?C:v,{value:h,format:a,label:n,onChange:e=>f(e||void 0),slots:{textField:n=>i(y,{...n,size:"small",InputProps:{...n.InputProps,endAdornment:e(t,{children:[n.InputProps?.endAdornment,i(T,{onClickCancel:b,onClickSubmit:x,sx:{ml:2}})]}),sx:{marginY:c?.2:1}}})}}):e(l,{display:"flex",alignItems:"center",children:[i(o,{variant:c?"body1":"h5",noWrap:!0,"aria-labelledby":S,children:I}),s&&i(W,{dense:c,onClick:g})]})})},L=({label:t,value:n,placeholder:r="-",editable:l,dense:a,onEdit:d=(()=>null)})=>{const s=c(null),{isEditing:m,editValue:p,startEdit:h,cancelEdit:g,setEditValue:b,submitEdit:f}=V(n?.toString(),d),x=A(t),k=n?.toString()||r,v=e=>{"Enter"===e.key&&d(e.target.value)};return u((()=>(s.current?.addEventListener("keypress",v),()=>s.current?.removeEventListener("keypress",v))),[s.current]),i(P,{hideLabel:m,label:t,tooltip:k,dense:a,children:m?i(y,{inputRef:s,value:p,label:t,size:"small",onChange:e=>b(e.target.value),InputProps:{endAdornment:i(T,{onClickCancel:g,onClickSubmit:f})},sx:{marginY:a?0:1}}):e(o,{variant:a?"body1":"h5",noWrap:!0,"aria-labelledby":x,children:[k,l&&i(W,{dense:a,onClick:h})]})})},j=({lightWeight:e=100,darkWeight:i=900}={})=>{const{palette:t}=I();return"light"===t.mode?t.grey[e]:t.grey[i]},N=({title:t,subtitle:a,centered:d,children:s,dense:m})=>{const{typography:c}=r(),u=j({lightWeight:200,darkWeight:800});return e(S,{sx:{paddingBottom:m?0:1},children:[e(l,{bgcolor:u,px:m?1:2,py:m?.5:1,lineHeight:m?0:void 0,children:[i(o,{variant:m?"body1":"h6",role:"heading","aria-level":1,children:t}),a&&i(o,{variant:m?"caption":"body2",role:"heading","aria-level":2,lineHeight:m?c.pxToRem(15):void 0,children:a})]}),i(n,{container:!0,padding:1,rowSpacing:m?1:2,justifyContent:d?"center":"flex-start",children:s})]})},B="RdsValueItem-root",H="RdsValueItem-content",O=({children:e,bordered:t=!0,...r})=>{const a=((e,i)=>{const t=`solid ${i} 1px`,n="none";if(e){if(Array.isArray(e))return e.map((e=>e?t:n));if("object"==typeof e){const i={};return Object.entries(e).forEach((([e,r])=>{i[e]=r?t:n})),i}return t}})(t,j({lightWeight:200,darkWeight:800}));return i(n,{item:!0,className:B,...r,children:i(l,{className:H,px:1,borderLeft:a,children:e})})},F=(e,t,{dense:n}={})=>{const{id:r,name:l,type:a}=e,o=t[r];return"boolean"===a?i(w,{dense:n,label:l,value:o}):"date"===a||"time"===a||"datetime"===a?i(D,{dense:n,label:l,value:o,format:e.format}):"object"!=typeof o||Array.isArray(o)?i(L,{dense:n,label:l,value:o?.toString()}):i(L,{dense:n,label:l,value:JSON.stringify(o)})},Y=({field:{name:e,description:t,value:r},instance:l,dense:a})=>{const o=[{field:"id",headerName:"ID",width:70}];r.forEach((e=>{o.push({field:e.id,headerName:e.name})}));const d=l.map(((e,i)=>({id:i,...e})));return i(N,{title:e,subtitle:t,dense:a,children:i(n,{item:!0,xs:12,children:i(z,{rows:d,columns:o,density:a?"compact":"standard",disableRowSelectionOnClick:!0,pageSizeOptions:[5],initialState:{pagination:{paginationModel:{pageSize:5}}},sx:{height:400}})})})},$=({field:{name:e,description:t,value:n},instance:r,dense:l})=>{const a=R();return i(N,{title:e,subtitle:t,dense:l,children:n.map((e=>{const{id:t,xs:n,sm:o,md:d,lg:s,xl:m}=e,c=a.increment(e);return i(O,{xs:n,sm:o,md:d,lg:s,xl:m,bordered:c,children:F(e,r,{dense:l})},t)}))})},G=({model:e,instance:t,dense:r})=>{const l=R();return i(n,{container:!0,spacing:r?1:2,children:e.fields.map((e=>{const{id:a,type:o,xs:d=3,sm:s=0,md:m=0,lg:c=0,xl:u=0}=e;if("group"===o)return l.increment({xs:12}),i(n,{item:!0,xs:12,children:i($,{field:e,instance:t[a],dense:r})},a);if("group[]"===o)return l.increment({xs:12}),i(n,{item:!0,xs:12,children:i(Y,{field:e,instance:t[a],dense:r})},a);const p=l.increment(e);return i(O,{xs:d,sm:s,md:m,lg:c,xl:u,bordered:p,children:F(e,t,{dense:r})},a)}))})};export{G as ObjectDetails};
 //# sourceMappingURL=index.js.map

package/object-details/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/utils/breakpoints.ts","../../src/value-base/value-edit.tsx","../../src/value-content/value-content.tsx","../../src/value-boolean/value-boolean.tsx","../../src/value-base/value-displays.types.ts","../../src/value-datetime/value-datetime.tsx","../../src/value-text/value-text.tsx","../../src/utils/theme.ts","../../src/group-value-card/group-value-card.tsx","../../src/value-item/value-item.tsx","../../src/object-details/object-details.tsx"],"sourcesContent":["import { ResponsiveStyleValue } from \"@mui/system\";\n\ninterface Breakpoints {\n  xs: number;\n  sm: number;\n  md: number;\n  lg: number;\n  xl: number;\n}\n\ninterface BreakpointsCounter extends Breakpoints {\n  increment(breakpoints: Partial<Breakpoints>): ResponsiveStyleValue<boolean>;\n}\n\nexport const newBreakpointsCounter = (breakpoint = 12): BreakpointsCounter => {\n  const calculateBreakpointIncrement = (\n    breakpointsCounter: BreakpointsCounter,\n    key: keyof Breakpoints,\n    value: number,\n  ): boolean => {\n    const initialValue = breakpointsCounter[key];\n    breakpointsCounter[key] += value;\n    if (breakpointsCounter[key] > breakpoint) {\n      breakpointsCounter[key] = value;\n      return false;\n    }\n\n    if (breakpointsCounter[key] == breakpoint) {\n      breakpointsCounter[key] = 0;\n    }\n\n    return initialValue > 0;\n  };\n\n  return {\n    xs: 0,\n    sm: 0,\n    md: 0,\n    lg: 0,\n    xl: 0,\n    increment: function ({\n      xs = 0,\n      sm = 0,\n      md = 0,\n      lg = 0,\n      xl = 0,\n    }): ResponsiveStyleValue<boolean> {\n      const smInc = sm || xs;\n      const mdInc = md || smInc;\n      const lgInc = lg || mdInc;\n      const xlInc = xl || lgInc;\n\n      return {\n        xs: calculateBreakpointIncrement(this, \"xs\", xs),\n        sm: calculateBreakpointIncrement(this, \"sm\", smInc),\n        md: calculateBreakpointIncrement(this, \"md\", mdInc),\n        lg: calculateBreakpointIncrement(this, \"lg\", lgInc),\n        xl: calculateBreakpointIncrement(this, \"xl\", xlInc),\n      };\n    },\n  };\n};\n","import React, { useState } from \"react\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { Button, IconButton, InputAdornment, SxProps, Theme, useTheme } from \"@mui/material\";\nimport EditIcon from \"@mui/icons-material/Edit\";\n\nexport interface ValueEditButtonsProps {\n  onClickCancel: () => void;\n  onClickSubmit: () => void;\n  sx?: SxProps<Theme>;\n}\n\nexport const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {\n  return (\n    <InputAdornment position=\"end\" sx={sx}>\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        color=\"error\"\n        aria-label=\"cancel button\"\n        startIcon={<ClearIcon sx={{ fontSize: 12 }} />}\n        onClick={onClickCancel}\n        sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}\n      />\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        color=\"primary\"\n        aria-label=\"submit button\"\n        startIcon={<CheckIcon sx={{ fontSize: 12 }} />}\n        onClick={onClickSubmit}\n        sx={{ paddingRight: 0, minWidth: 0 }}\n      />\n    </InputAdornment>\n  );\n};\n\n/**\n * Hook to manage the editing behaviour\n */\nexport const useEditableValueDisplay = <T,>(\n  initialValue: T | undefined,\n  onEdit: (value?: T) => void,\n) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState<T | undefined>(initialValue);\n\n  const cancelEdit = () => {\n    setIsEditing(false);\n    setEditValue(initialValue);\n  };\n  const startEdit = () => {\n    setIsEditing(true);\n  };\n\n  const submitEdit = () => {\n    onEdit(editValue);\n    cancelEdit();\n  };\n\n  return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };\n};\n\nexport interface ValueEditButtonProps {\n  dense?: boolean;\n  onClick: () => void;\n}\n\nexport const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {\n  const { typography } = useTheme();\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={onClick}\n      sx={{ ml: dense ? 0.5 : 1 }}\n      aria-label=\"edit button\"\n    >\n      <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />\n    </IconButton>\n  );\n};\n","import { Box, SxProps, Theme, Tooltip, Typography, useTheme } from \"@mui/material\";\nimport React from \"react\";\n\nexport const getValueContentLabelId = (label: string): string =>\n  `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * If true, the label will not be shown\n   */\n  hideLabel?: boolean;\n\n  /**\n   * If defined, a tooltip is going to be added arround the children;\n   */\n  tooltip?: string;\n\n  /**\n   * Timeout before the tooltip appears when the user hovers the value\n   */\n  tooltipEnterDelay?: number;\n\n  /**\n   * Component that's going to be renderd under the label\n   */\n  children: React.ReactElement<any, any>;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n\n  /**\n   * Custom styles for the root component\n   */\n  sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n  label,\n  hideLabel,\n  tooltip,\n  tooltipEnterDelay = 2000,\n  children,\n  dense,\n  sx,\n}: ValueContentProps) => {\n  const { typography } = useTheme();\n  const id = getValueContentLabelId(label);\n\n  return (\n    <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n      {!hideLabel && (\n        <Typography\n          variant={dense ? \"caption\" : \"subtitle2\"}\n          role=\"label\"\n          id={id}\n          lineHeight={dense ? typography.pxToRem(15) : undefined}\n        >\n          {label}\n        </Typography>\n      )}\n      {tooltip ? (\n        <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n          {children}\n        </Tooltip>\n      ) : (\n        children\n      )}\n    </Box>\n  );\n};\n","import { Box, Switch, Typography, useTheme } from \"@mui/material\";\nimport React from \"react\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport {\n  BaseValueProps,\n  DefaultPlaceholder,\n  EditableValueProps,\n  useEditableValueDisplay,\n  ValueEditButton,\n  ValueEditButtons,\n} from \"../value-base\";\nimport { ValueContent, getValueContentLabelId } from \"../value-content\";\n\nexport type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;\n\n/**\n * Displays a boolean value with a label\n */\nexport const ValueBoolean = ({\n  label,\n  value,\n  placeholder = DefaultPlaceholder,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueBooleanProps) => {\n  const id = getValueContentLabelId(label);\n  const { typography } = useTheme();\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(value, onEdit);\n\n  const iconSx = { fontSize: dense ? typography.h6.fontSize : typography.h5.fontSize };\n\n  return (\n    <ValueContent label={label} dense={dense}>\n      {isEditing ? (\n        <Box display=\"flex\" alignItems=\"center\">\n          <Switch\n            size={dense ? \"small\" : \"medium\"}\n            checked={editValue}\n            onChange={(e) => setEditValue(e.target.checked)}\n          />\n          <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n        </Box>\n      ) : (\n        <Box\n          display=\"flex\"\n          alignItems=\"center\"\n          aria-labelledby={id}\n          role=\"checkbox\"\n          aria-checked={value}\n        >\n          {value === undefined ? (\n            <Typography variant=\"h5\">{placeholder}</Typography>\n          ) : value ? (\n            <CheckIcon color=\"success\" sx={iconSx} />\n          ) : (\n            <CloseIcon color=\"error\" sx={iconSx} />\n          )}\n          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n        </Box>\n      )}\n    </ValueContent>\n  );\n};\n","export interface BaseValueProps<T> {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * Value displayed\n   */\n  value?: T;\n\n  /**\n   * String rendered if value is undefined\n   */\n  placeholder?: string;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n  /**\n   * This field can be edited or not\n   */\n  editable?: boolean;\n\n  /**\n   * Callback executed when the value is edited\n   */\n  onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n","import { Box, TextField, Typography } from \"@mui/material\";\nimport React from \"react\";\nimport { format } from \"date-fns\";\nimport {\n  BaseValueProps,\n  DefaultPlaceholder,\n  EditableValueProps,\n} from \"../value-base/value-displays.types\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\nimport { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from \"../value-base\";\nimport { DatePicker, DateTimePicker, TimePicker } from \"@mui/x-date-pickers\";\n\nexport type EditInputType = \"datetime\" | \"date\" | \"time\";\n\nexport interface ValueDatetimeProps extends BaseValueProps<Date>, EditableValueProps<Date> {\n  /**\n   * Datetime format\n   */\n  format: string;\n\n  /**\n   * Edit input type\n   */\n  editInputType?: EditInputType;\n}\n\n/**\n * Displays a formated datetime with a label\n */\nexport const ValueDatetime = ({\n  label,\n  value: valueProp,\n  format: fmt,\n  placeholder = DefaultPlaceholder,\n  editable,\n  editInputType = \"datetime\",\n  dense,\n  onEdit = () => null,\n}: ValueDatetimeProps) => {\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(valueProp, onEdit);\n  const id = getValueContentLabelId(label);\n  const value = (valueProp && format(valueProp, fmt)) || placeholder;\n\n  const EditPickerComponent =\n    editInputType === \"datetime\"\n      ? DateTimePicker\n      : editInputType === \"time\"\n      ? TimePicker\n      : DatePicker;\n\n  return (\n    <ValueContent\n      label={label}\n      hideLabel={isEditing}\n      tooltip={value}\n      dense={dense}\n      sx={{ display: \"flex\", flexDirection: \"column\" }}\n    >\n      {isEditing ? (\n        <EditPickerComponent\n          value={editValue}\n          format={fmt}\n          label={label}\n          onChange={(newValue) => setEditValue(newValue ? newValue : undefined)}\n          slots={{\n            textField: (params) => (\n              <TextField\n                {...params}\n                size=\"small\"\n                InputProps={{\n                  ...params.InputProps,\n                  endAdornment: (\n                    <>\n                      {params.InputProps?.endAdornment}\n                      <ValueEditButtons\n                        onClickCancel={cancelEdit}\n                        onClickSubmit={submitEdit}\n                        sx={{ ml: 2 }}\n                      />\n                    </>\n                  ),\n                  sx: { marginY: !dense ? 1 : 0.2 },\n                }}\n              />\n            ),\n          }}\n        />\n      ) : (\n        <Box display=\"flex\" alignItems=\"center\">\n          <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n            {value}\n          </Typography>\n          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n        </Box>\n      )}\n    </ValueContent>\n  );\n};\n","import { Typography, TextField } from \"@mui/material\";\nimport React, { useEffect, useRef } from \"react\";\nimport {\n  BaseValueProps,\n  DefaultPlaceholder,\n  EditableValueProps,\n  useEditableValueDisplay,\n  ValueEditButton,\n  ValueEditButtons,\n} from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;\n\n/**\n * Displays a string value with a label\n */\nexport const ValueText = ({\n  label,\n  value: valueProp,\n  placeholder = DefaultPlaceholder,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueTextProps) => {\n  const editInputRef = useRef<HTMLInputElement>(null);\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(valueProp?.toString(), onEdit);\n  const id = getValueContentLabelId(label);\n  const value = valueProp?.toString() || placeholder;\n\n  const editKeyPressListener = (e: KeyboardEvent) => {\n    if (e.key === \"Enter\") {\n      onEdit((e.target as any).value);\n    }\n  };\n\n  useEffect(() => {\n    editInputRef.current?.addEventListener(\"keypress\", editKeyPressListener);\n    return () => editInputRef.current?.removeEventListener(\"keypress\", editKeyPressListener);\n  }, [editInputRef.current]);\n\n  return (\n    <ValueContent hideLabel={isEditing} label={label} tooltip={value} dense={dense}>\n      {isEditing ? (\n        <TextField\n          inputRef={editInputRef}\n          value={editValue}\n          label={label}\n          size=\"small\"\n          onChange={(e) => setEditValue(e.target.value)}\n          InputProps={{\n            endAdornment: (\n              <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n            ),\n          }}\n          sx={{ marginY: !dense ? 1 : 0 }}\n        />\n      ) : (\n        <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n          {value}\n          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n        </Typography>\n      )}\n    </ValueContent>\n  );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import { Grid, Paper, Box, Typography, useTheme } from \"@mui/material\";\nimport React from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils/theme\";\nimport { ValueItemElement } from \"../value-item/value-item\";\n\nexport interface GroupValueCardProps {\n  title: string;\n  subtitle?: string;\n  centered?: boolean;\n  children: ValueItemElement | ValueItemElement[];\n  dense?: boolean;\n}\n\nexport const GroupValueCard = ({\n  title,\n  subtitle,\n  centered,\n  children,\n  dense,\n}: GroupValueCardProps) => {\n  const { typography } = useTheme();\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n\n  return (\n    <Paper\n      sx={{\n        paddingBottom: dense ? 0 : 1,\n      }}\n    >\n      <Box\n        bgcolor={defaultColor}\n        px={dense ? 1 : 2}\n        py={dense ? 0.5 : 1}\n        lineHeight={dense ? 0 : undefined}\n      >\n        <Typography variant={dense ? \"body1\" : \"h6\"} role=\"heading\" aria-level={1}>\n          {title}\n        </Typography>\n        {subtitle && (\n          <Typography\n            variant={dense ? \"caption\" : \"body2\"}\n            role=\"heading\"\n            aria-level={2}\n            lineHeight={dense ? typography.pxToRem(15) : undefined}\n          >\n            {subtitle}\n          </Typography>\n        )}\n      </Box>\n      <Grid\n        container\n        padding={1}\n        rowSpacing={dense ? 1 : 2}\n        justifyContent={centered ? \"center\" : \"flex-start\"}\n      >\n        {children}\n      </Grid>\n    </Paper>\n  );\n};\n","import { GridProps, Grid, Box } from \"@mui/material\";\nimport { ResponsiveStyleValue } from \"@mui/system\";\nimport React, { PropsWithChildren, FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"~/utils\";\n\nexport type ValueItemProps = PropsWithChildren<\n  Omit<GridProps, \"item\" | \"container\"> & { bordered?: ResponsiveStyleValue<boolean> }\n>;\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n  root: \"RdsValueItem-root\",\n  content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {\n  const borderStyle = `solid ${color} 1px`;\n  const noBorder = \"none\";\n\n  if (!bordered) {\n    return undefined;\n  }\n\n  if (Array.isArray(bordered)) {\n    return bordered.map((b) => (b ? borderStyle : noBorder));\n  }\n\n  if (typeof bordered === \"object\") {\n    const style: Record<string, string | undefined> = {};\n    Object.entries(bordered).forEach(([key, value]) => {\n      style[key] = value ? borderStyle : noBorder;\n    });\n    return style;\n  }\n\n  return borderStyle;\n};\n\nexport const ValueItem: ValueItemComponent = ({\n  children,\n  bordered = true,\n  ...rest\n}: ValueItemProps) => {\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n  const borderLeft = resolveBorderStyle(bordered, defaultColor);\n  return (\n    <Grid item className={valueItemClasses.root} {...rest}>\n      <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n        {children}\n      </Box>\n    </Grid>\n  );\n};\n","import React from \"react\";\nimport { Grid } from \"@mui/material\";\nimport { newBreakpointsCounter } from \"~/utils/breakpoints\";\nimport { DataGrid, GridColDef } from \"@mui/x-data-grid\";\nimport { ValueBoolean } from \"~/value-boolean\";\nimport { ValueDatetime } from \"~/value-datetime\";\nimport { ValueText } from \"~/value-text\";\nimport { GroupValueCard } from \"~/group-value-card\";\nimport { ValueItem } from \"~/value-item\";\nimport {\n  ArrayGroupField,\n  ArrayInstanceType,\n  BasicModelInstance,\n  GroupField,\n  GroupInstanceType,\n  Model,\n  ModelField,\n} from \"~/generators/generators.model\";\n\ninterface SingleDetailValueFactoryOptions {\n  dense?: boolean;\n}\n\nconst singleDetailValueFactory = <T extends BasicModelInstance>(\n  field: ModelField,\n  instance: T | GroupInstanceType,\n  { dense }: SingleDetailValueFactoryOptions = {},\n) => {\n  const { id, name, type } = field;\n  const value = instance[id];\n  if (type === \"boolean\") {\n    return <ValueBoolean dense={dense} label={name} value={value as boolean} />;\n  } else if (type === \"date\" || type === \"time\" || type === \"datetime\") {\n    return <ValueDatetime dense={dense} label={name} value={value as Date} format={field.format} />;\n  }\n\n  if (typeof value === \"object\" && !Array.isArray(value)) {\n    return <ValueText dense={dense} label={name} value={JSON.stringify(value)} />;\n  }\n  return <ValueText dense={dense} label={name} value={value?.toString()} />;\n};\n\ninterface ObjectArrayGroupProps {\n  field: ArrayGroupField;\n  instance: ArrayInstanceType;\n  dense?: boolean;\n}\n\nconst ObjectArrayGroup = ({\n  field: { name, description, value },\n  instance,\n  dense,\n}: ObjectArrayGroupProps) => {\n  const columns: GridColDef[] = [{ field: \"id\", headerName: \"ID\", width: 70 }];\n\n  value.forEach((column) => {\n    columns.push({\n      field: column.id,\n      headerName: column.name,\n    });\n  });\n\n  const rows = instance.map((f, id) => ({\n    id,\n    ...f,\n  }));\n\n  return (\n    <GroupValueCard title={name} subtitle={description} dense={dense}>\n      <Grid item xs={12}>\n        <DataGrid\n          rows={rows}\n          columns={columns}\n          density={dense ? \"compact\" : \"standard\"}\n          disableRowSelectionOnClick\n          pageSizeOptions={[5]}\n          initialState={{\n            pagination: {\n              paginationModel: {\n                pageSize: 5,\n              },\n            },\n          }}\n          sx={{ height: 400 }}\n        />\n      </Grid>\n    </GroupValueCard>\n  );\n};\n\ninterface ObjectDetailGroupProps {\n  field: GroupField;\n  instance: GroupInstanceType;\n  dense?: boolean;\n}\n\nconst ObjectDetailGroup = ({\n  field: { name, description, value },\n  instance,\n  dense,\n}: ObjectDetailGroupProps) => {\n  const breakpointsCounter = newBreakpointsCounter();\n\n  return (\n    <GroupValueCard title={name} subtitle={description} dense={dense}>\n      {value.map((field) => {\n        const { id, xs, sm, md, lg, xl } = field;\n        const bordered = breakpointsCounter.increment(field);\n        return (\n          <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>\n            {singleDetailValueFactory(field, instance, { dense })}\n          </ValueItem>\n        );\n      })}\n    </GroupValueCard>\n  );\n};\n\nexport interface ObjectDetailsProps<T extends BasicModelInstance> {\n  model: Model;\n  dense?: boolean;\n  instance: T;\n}\n\nexport const ObjectDetails = <T extends BasicModelInstance>({\n  model,\n  instance,\n  dense,\n}: ObjectDetailsProps<T>) => {\n  const breakpointsCounter = newBreakpointsCounter();\n  return (\n    <Grid container spacing={dense ? 1 : 2}>\n      {model.fields.map((field) => {\n        const { id, type, xs = 3, sm = 0, md = 0, lg = 0, xl = 0 } = field;\n\n        if (type === \"group\") {\n          breakpointsCounter.increment({ xs: 12 });\n          return (\n            <Grid item key={id} xs={12}>\n              <ObjectDetailGroup\n                field={field}\n                instance={instance[id] as GroupInstanceType}\n                dense={dense}\n              />\n            </Grid>\n          );\n        }\n\n        if (type === \"group[]\") {\n          breakpointsCounter.increment({ xs: 12 });\n          return (\n            <Grid item key={id} xs={12}>\n              <ObjectArrayGroup field={field} instance={instance[id] as any} dense={dense} />\n            </Grid>\n          );\n        }\n\n        const bordered = breakpointsCounter.increment(field);\n        return (\n          <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>\n            {singleDetailValueFactory(field, instance, { dense })}\n          </ValueItem>\n        );\n      })}\n    </Grid>\n  );\n};\n"],"names":["newBreakpointsCounter","breakpoint","calculateBreakpointIncrement","breakpointsCounter","key","value","initialValue","xs","sm","md","lg","xl","increment","smInc","mdInc","lgInc","xlInc","this","ValueEditButtons","onClickCancel","onClickSubmit","sx","React","createElement","InputAdornment","position","Button","variant","size","color","startIcon","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","useEditableValueDisplay","onEdit","isEditing","setIsEditing","useState","editValue","setEditValue","cancelEdit","startEdit","submitEdit","ValueEditButton","dense","typography","useTheme","IconButton","ml","EditIcon","pxToRem","getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","children","id","Box","width","lineHeight","undefined","Typography","role","Tooltip","title","placement","enterDelay","ValueBoolean","placeholder","editable","iconSx","h6","h5","display","alignItems","Switch","checked","onChange","e","target","CloseIcon","ValueDatetime","valueProp","format","fmt","editInputType","EditPickerComponent","DateTimePicker","TimePicker","DatePicker","flexDirection","newValue","slots","textField","params","TextField","InputProps","endAdornment","Fragment","marginY","noWrap","ValueText","editInputRef","useRef","toString","editKeyPressListener","useEffect","current","addEventListener","removeEventListener","inputRef","useGetDefaultThemeColor","lightWeight","darkWeight","palette","mode","grey","GroupValueCard","subtitle","centered","defaultColor","Paper","paddingBottom","bgcolor","px","py","Grid","container","padding","rowSpacing","justifyContent","valueItemClasses","ValueItem","bordered","rest","borderLeft","borderStyle","noBorder","Array","isArray","map","b","style","Object","entries","forEach","resolveBorderStyle","item","className","singleDetailValueFactory","field","instance","name","type","JSON","stringify","ObjectArrayGroup","description","columns","headerName","column","push","rows","f","DataGrid","density","disableRowSelectionOnClick","pageSizeOptions","initialState","pagination","paginationModel","pageSize","height","ObjectDetailGroup","ObjectDetails","model","spacing","fields"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/utils/breakpoints.ts","../../src/value-base/value-edit.tsx","../../src/value-content/value-content.tsx","../../src/value-boolean/value-boolean.tsx","../../src/value-base/value-displays.types.ts","../../src/value-datetime/value-datetime.tsx","../../src/value-text/value-text.tsx","../../src/utils/theme.ts","../../src/group-value-card/group-value-card.tsx","../../src/value-item/value-item.tsx","../../src/object-details/object-details.tsx"],"sourcesContent":["import { ResponsiveStyleValue } from \"@mui/system\";\n\ninterface Breakpoints {\n  xs: number;\n  sm: number;\n  md: number;\n  lg: number;\n  xl: number;\n}\n\ninterface BreakpointsCounter extends Breakpoints {\n  increment(breakpoints: Partial<Breakpoints>): ResponsiveStyleValue<boolean>;\n}\n\nexport const newBreakpointsCounter = (breakpoint = 12): BreakpointsCounter => {\n  const calculateBreakpointIncrement = (\n    breakpointsCounter: BreakpointsCounter,\n    key: keyof Breakpoints,\n    value: number,\n  ): boolean => {\n    const initialValue = breakpointsCounter[key];\n    breakpointsCounter[key] += value;\n    if (breakpointsCounter[key] > breakpoint) {\n      breakpointsCounter[key] = value;\n      return false;\n    }\n\n    if (breakpointsCounter[key] == breakpoint) {\n      breakpointsCounter[key] = 0;\n    }\n\n    return initialValue > 0;\n  };\n\n  return {\n    xs: 0,\n    sm: 0,\n    md: 0,\n    lg: 0,\n    xl: 0,\n    increment: function ({\n      xs = 0,\n      sm = 0,\n      md = 0,\n      lg = 0,\n      xl = 0,\n    }): ResponsiveStyleValue<boolean> {\n      const smInc = sm || xs;\n      const mdInc = md || smInc;\n      const lgInc = lg || mdInc;\n      const xlInc = xl || lgInc;\n\n      return {\n        xs: calculateBreakpointIncrement(this, \"xs\", xs),\n        sm: calculateBreakpointIncrement(this, \"sm\", smInc),\n        md: calculateBreakpointIncrement(this, \"md\", mdInc),\n        lg: calculateBreakpointIncrement(this, \"lg\", lgInc),\n        xl: calculateBreakpointIncrement(this, \"xl\", xlInc),\n      };\n    },\n  };\n};\n","import { useState } from \"react\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Button from \"@mui/material/Button\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport EditIcon from \"@mui/icons-material/Edit\";\n\nexport interface ValueEditButtonsProps {\n  onClickCancel: () => void;\n  onClickSubmit: () => void;\n  sx?: SxProps<Theme>;\n}\n\nexport const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {\n  return (\n    <InputAdornment position=\"end\" sx={sx}>\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        color=\"error\"\n        aria-label=\"cancel button\"\n        startIcon={<ClearIcon sx={{ fontSize: 12 }} />}\n        onClick={onClickCancel}\n        sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}\n      />\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        color=\"primary\"\n        aria-label=\"submit button\"\n        startIcon={<CheckIcon sx={{ fontSize: 12 }} />}\n        onClick={onClickSubmit}\n        sx={{ paddingRight: 0, minWidth: 0 }}\n      />\n    </InputAdornment>\n  );\n};\n\n/**\n * Hook to manage the editing behaviour\n */\nexport const useEditableValueDisplay = <T,>(\n  initialValue: T | undefined,\n  onEdit: (value?: T) => void,\n) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState<T | undefined>(initialValue);\n\n  const cancelEdit = () => {\n    setIsEditing(false);\n    setEditValue(initialValue);\n  };\n  const startEdit = () => {\n    setIsEditing(true);\n  };\n\n  const submitEdit = () => {\n    onEdit(editValue);\n    cancelEdit();\n  };\n\n  return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };\n};\n\nexport interface ValueEditButtonProps {\n  dense?: boolean;\n  onClick: () => void;\n}\n\nexport const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {\n  const { typography } = useTheme();\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={onClick}\n      sx={{ ml: dense ? 0.5 : 1 }}\n      aria-label=\"edit button\"\n    >\n      <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />\n    </IconButton>\n  );\n};\n","import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n  `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * If true, the label will not be shown\n   */\n  hideLabel?: boolean;\n\n  /**\n   * If defined, a tooltip is going to be added arround the children;\n   */\n  tooltip?: string;\n\n  /**\n   * Timeout before the tooltip appears when the user hovers the value\n   */\n  tooltipEnterDelay?: number;\n\n  /**\n   * Component that's going to be renderd under the label\n   */\n  children: React.ReactElement<any, any>;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n\n  /**\n   * Custom styles for the root component\n   */\n  sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n  label,\n  hideLabel,\n  tooltip,\n  tooltipEnterDelay = 2000,\n  children,\n  dense,\n  sx,\n}: ValueContentProps) => {\n  const { typography } = useTheme();\n  const id = getValueContentLabelId(label);\n\n  return (\n    <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n      {!hideLabel && (\n        <Typography\n          variant={dense ? \"caption\" : \"subtitle2\"}\n          role=\"label\"\n          id={id}\n          lineHeight={dense ? typography.pxToRem(15) : undefined}\n        >\n          {label}\n        </Typography>\n      )}\n      {tooltip ? (\n        <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n          {children}\n        </Tooltip>\n      ) : (\n        children\n      )}\n    </Box>\n  );\n};\n","import { useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Switch from \"@mui/material/Switch\";\nimport Typography from \"@mui/material/Typography\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport {\n  BaseValueProps,\n  DefaultPlaceholder,\n  EditableValueProps,\n  useEditableValueDisplay,\n  ValueEditButton,\n  ValueEditButtons,\n} from \"~/value-base\";\nimport { ValueContent, getValueContentLabelId } from \"~/value-content\";\n\nexport type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;\n\n/**\n * Displays a boolean value with a label\n */\nexport const ValueBoolean = ({\n  label,\n  value,\n  placeholder = DefaultPlaceholder,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueBooleanProps) => {\n  const id = getValueContentLabelId(label);\n  const { typography } = useTheme();\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(value, onEdit);\n\n  const iconSx = { fontSize: dense ? typography.h6.fontSize : typography.h5.fontSize };\n\n  return (\n    <ValueContent label={label} dense={dense}>\n      {isEditing ? (\n        <Box display=\"flex\" alignItems=\"center\">\n          <Switch\n            size={dense ? \"small\" : \"medium\"}\n            checked={editValue}\n            onChange={(e) => setEditValue(e.target.checked)}\n          />\n          <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n        </Box>\n      ) : (\n        <Box\n          display=\"flex\"\n          alignItems=\"center\"\n          aria-labelledby={id}\n          role=\"checkbox\"\n          aria-checked={value}\n        >\n          {value === undefined ? (\n            <Typography variant=\"h5\">{placeholder}</Typography>\n          ) : value ? (\n            <CheckIcon color=\"success\" sx={iconSx} />\n          ) : (\n            <CloseIcon color=\"error\" sx={iconSx} />\n          )}\n          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n        </Box>\n      )}\n    </ValueContent>\n  );\n};\n","export interface BaseValueProps<T> {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * Value displayed\n   */\n  value?: T;\n\n  /**\n   * String rendered if value is undefined\n   */\n  placeholder?: string;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n  /**\n   * This field can be edited or not\n   */\n  editable?: boolean;\n\n  /**\n   * Callback executed when the value is edited\n   */\n  onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n","import Box from \"@mui/material/Box\";\nimport TextField from \"@mui/material/TextField\";\nimport Typography from \"@mui/material/Typography\";\nimport { format } from \"date-fns\";\nimport { BaseValueProps, DefaultPlaceholder, EditableValueProps } from \"~/value-base\";\nimport { getValueContentLabelId, ValueContent } from \"~/value-content\";\nimport { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from \"~/value-base\";\nimport { DatePicker } from \"@mui/x-date-pickers/DatePicker\";\nimport { DateTimePicker } from \"@mui/x-date-pickers/DateTimePicker\";\nimport { TimePicker } from \"@mui/x-date-pickers/TimePicker\";\n\nexport type EditInputType = \"datetime\" | \"date\" | \"time\";\n\nexport interface ValueDatetimeProps extends BaseValueProps<Date>, EditableValueProps<Date> {\n  /**\n   * Datetime format\n   */\n  format: string;\n\n  /**\n   * Edit input type\n   */\n  editInputType?: EditInputType;\n}\n\n/**\n * Displays a formated datetime with a label\n */\nexport const ValueDatetime = ({\n  label,\n  value: valueProp,\n  format: fmt,\n  placeholder = DefaultPlaceholder,\n  editable,\n  editInputType = \"datetime\",\n  dense,\n  onEdit = () => null,\n}: ValueDatetimeProps) => {\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(valueProp, onEdit);\n  const id = getValueContentLabelId(label);\n  const value = (valueProp && format(valueProp, fmt)) || placeholder;\n\n  const EditPickerComponent =\n    editInputType === \"datetime\"\n      ? DateTimePicker\n      : editInputType === \"time\"\n      ? TimePicker\n      : DatePicker;\n\n  return (\n    <ValueContent\n      label={label}\n      hideLabel={isEditing}\n      tooltip={value}\n      dense={dense}\n      sx={{ display: \"flex\", flexDirection: \"column\" }}\n    >\n      {isEditing ? (\n        <EditPickerComponent\n          value={editValue}\n          format={fmt}\n          label={label}\n          onChange={(newValue) => setEditValue(newValue ? newValue : undefined)}\n          slots={{\n            textField: (params) => (\n              <TextField\n                {...params}\n                size=\"small\"\n                InputProps={{\n                  ...params.InputProps,\n                  endAdornment: (\n                    <>\n                      {params.InputProps?.endAdornment}\n                      <ValueEditButtons\n                        onClickCancel={cancelEdit}\n                        onClickSubmit={submitEdit}\n                        sx={{ ml: 2 }}\n                      />\n                    </>\n                  ),\n                  sx: { marginY: !dense ? 1 : 0.2 },\n                }}\n              />\n            ),\n          }}\n        />\n      ) : (\n        <Box display=\"flex\" alignItems=\"center\">\n          <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n            {value}\n          </Typography>\n          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n        </Box>\n      )}\n    </ValueContent>\n  );\n};\n","import Typography from \"@mui/material/Typography\";\nimport TextField from \"@mui/material/TextField\";\nimport { useEffect, useRef } from \"react\";\nimport {\n  BaseValueProps,\n  DefaultPlaceholder,\n  EditableValueProps,\n  useEditableValueDisplay,\n  ValueEditButton,\n  ValueEditButtons,\n} from \"~/value-base\";\nimport { getValueContentLabelId, ValueContent } from \"~/value-content\";\n\nexport type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;\n\n/**\n * Displays a string value with a label\n */\nexport const ValueText = ({\n  label,\n  value: valueProp,\n  placeholder = DefaultPlaceholder,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueTextProps) => {\n  const editInputRef = useRef<HTMLInputElement>(null);\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(valueProp?.toString(), onEdit);\n  const id = getValueContentLabelId(label);\n  const value = valueProp?.toString() || placeholder;\n\n  const editKeyPressListener = (e: KeyboardEvent) => {\n    if (e.key === \"Enter\") {\n      onEdit((e.target as any).value);\n    }\n  };\n\n  useEffect(() => {\n    editInputRef.current?.addEventListener(\"keypress\", editKeyPressListener);\n    return () => editInputRef.current?.removeEventListener(\"keypress\", editKeyPressListener);\n  }, [editInputRef.current]);\n\n  return (\n    <ValueContent hideLabel={isEditing} label={label} tooltip={value} dense={dense}>\n      {isEditing ? (\n        <TextField\n          inputRef={editInputRef}\n          value={editValue}\n          label={label}\n          size=\"small\"\n          onChange={(e) => setEditValue(e.target.value)}\n          InputProps={{\n            endAdornment: (\n              <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n            ),\n          }}\n          sx={{ marginY: !dense ? 1 : 0 }}\n        />\n      ) : (\n        <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n          {value}\n          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n        </Typography>\n      )}\n    </ValueContent>\n  );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import Grid from \"@mui/material/Grid\";\nimport Paper from \"@mui/material/Paper\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { useGetDefaultThemeColor } from \"~/utils\";\nimport { ValueItemElement } from \"~/value-item\";\n\nexport interface GroupValueCardProps {\n  title: string;\n  subtitle?: string;\n  centered?: boolean;\n  children: ValueItemElement | ValueItemElement[];\n  dense?: boolean;\n}\n\nexport const GroupValueCard = ({\n  title,\n  subtitle,\n  centered,\n  children,\n  dense,\n}: GroupValueCardProps) => {\n  const { typography } = useTheme();\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n\n  return (\n    <Paper\n      sx={{\n        paddingBottom: dense ? 0 : 1,\n      }}\n    >\n      <Box\n        bgcolor={defaultColor}\n        px={dense ? 1 : 2}\n        py={dense ? 0.5 : 1}\n        lineHeight={dense ? 0 : undefined}\n      >\n        <Typography variant={dense ? \"body1\" : \"h6\"} role=\"heading\" aria-level={1}>\n          {title}\n        </Typography>\n        {subtitle && (\n          <Typography\n            variant={dense ? \"caption\" : \"body2\"}\n            role=\"heading\"\n            aria-level={2}\n            lineHeight={dense ? typography.pxToRem(15) : undefined}\n          >\n            {subtitle}\n          </Typography>\n        )}\n      </Box>\n      <Grid\n        container\n        padding={1}\n        rowSpacing={dense ? 1 : 2}\n        justifyContent={centered ? \"center\" : \"flex-start\"}\n      >\n        {children}\n      </Grid>\n    </Paper>\n  );\n};\n","import Grid, { GridProps } from \"@mui/material/Grid\";\nimport Box from \"@mui/material/Box\";\nimport { ResponsiveStyleValue } from \"@mui/system\";\nimport { PropsWithChildren, FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"~/utils\";\n\nexport type ValueItemProps = PropsWithChildren<\n  Omit<GridProps, \"item\" | \"container\"> & { bordered?: ResponsiveStyleValue<boolean> }\n>;\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n  root: \"RdsValueItem-root\",\n  content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {\n  const borderStyle = `solid ${color} 1px`;\n  const noBorder = \"none\";\n\n  if (!bordered) {\n    return undefined;\n  }\n\n  if (Array.isArray(bordered)) {\n    return bordered.map((b) => (b ? borderStyle : noBorder));\n  }\n\n  if (typeof bordered === \"object\") {\n    const style: Record<string, string | undefined> = {};\n    Object.entries(bordered).forEach(([key, value]) => {\n      style[key] = value ? borderStyle : noBorder;\n    });\n    return style;\n  }\n\n  return borderStyle;\n};\n\nexport const ValueItem: ValueItemComponent = ({\n  children,\n  bordered = true,\n  ...rest\n}: ValueItemProps) => {\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n  const borderLeft = resolveBorderStyle(bordered, defaultColor);\n  return (\n    <Grid item className={valueItemClasses.root} {...rest}>\n      <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n        {children}\n      </Box>\n    </Grid>\n  );\n};\n","import Grid from \"@mui/material/Grid\";\nimport { newBreakpointsCounter } from \"~/utils/breakpoints\";\nimport { ValueBoolean } from \"~/value-boolean\";\nimport { ValueDatetime } from \"~/value-datetime\";\nimport { ValueText } from \"~/value-text\";\nimport { GroupValueCard } from \"~/group-value-card\";\nimport { ValueItem } from \"~/value-item\";\nimport {\n  ArrayGroupField,\n  ArrayInstanceType,\n  BasicModelInstance,\n  GroupField,\n  GroupInstanceType,\n  Model,\n  ModelField,\n} from \"~/generators/generators.model\";\nimport { GridColDef, DataGrid } from \"@mui/x-data-grid\";\n\ninterface SingleDetailValueFactoryOptions {\n  dense?: boolean;\n}\n\nconst singleDetailValueFactory = <T extends BasicModelInstance>(\n  field: ModelField,\n  instance: T | GroupInstanceType,\n  { dense }: SingleDetailValueFactoryOptions = {},\n) => {\n  const { id, name, type } = field;\n  const value = instance[id];\n  if (type === \"boolean\") {\n    return <ValueBoolean dense={dense} label={name} value={value as boolean} />;\n  } else if (type === \"date\" || type === \"time\" || type === \"datetime\") {\n    return <ValueDatetime dense={dense} label={name} value={value as Date} format={field.format} />;\n  }\n\n  if (typeof value === \"object\" && !Array.isArray(value)) {\n    return <ValueText dense={dense} label={name} value={JSON.stringify(value)} />;\n  }\n  return <ValueText dense={dense} label={name} value={value?.toString()} />;\n};\n\ninterface ObjectArrayGroupProps {\n  field: ArrayGroupField;\n  instance: ArrayInstanceType;\n  dense?: boolean;\n}\n\nconst ObjectArrayGroup = ({\n  field: { name, description, value },\n  instance,\n  dense,\n}: ObjectArrayGroupProps) => {\n  const columns: GridColDef[] = [{ field: \"id\", headerName: \"ID\", width: 70 }];\n\n  value.forEach((column) => {\n    columns.push({\n      field: column.id,\n      headerName: column.name,\n    });\n  });\n\n  const rows = instance.map((f, id) => ({\n    id,\n    ...f,\n  }));\n\n  return (\n    <GroupValueCard title={name} subtitle={description} dense={dense}>\n      <Grid item xs={12}>\n        <DataGrid\n          rows={rows}\n          columns={columns}\n          density={dense ? \"compact\" : \"standard\"}\n          disableRowSelectionOnClick\n          pageSizeOptions={[5]}\n          initialState={{\n            pagination: {\n              paginationModel: {\n                pageSize: 5,\n              },\n            },\n          }}\n          sx={{ height: 400 }}\n        />\n      </Grid>\n    </GroupValueCard>\n  );\n};\n\ninterface ObjectDetailGroupProps {\n  field: GroupField;\n  instance: GroupInstanceType;\n  dense?: boolean;\n}\n\nconst ObjectDetailGroup = ({\n  field: { name, description, value },\n  instance,\n  dense,\n}: ObjectDetailGroupProps) => {\n  const breakpointsCounter = newBreakpointsCounter();\n\n  return (\n    <GroupValueCard title={name} subtitle={description} dense={dense}>\n      {value.map((field) => {\n        const { id, xs, sm, md, lg, xl } = field;\n        const bordered = breakpointsCounter.increment(field);\n        return (\n          <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>\n            {singleDetailValueFactory(field, instance, { dense })}\n          </ValueItem>\n        );\n      })}\n    </GroupValueCard>\n  );\n};\n\nexport interface ObjectDetailsProps<T extends BasicModelInstance> {\n  model: Model;\n  dense?: boolean;\n  instance: T;\n}\n\nexport const ObjectDetails = <T extends BasicModelInstance>({\n  model,\n  instance,\n  dense,\n}: ObjectDetailsProps<T>) => {\n  const breakpointsCounter = newBreakpointsCounter();\n  return (\n    <Grid container spacing={dense ? 1 : 2}>\n      {model.fields.map((field) => {\n        const { id, type, xs = 3, sm = 0, md = 0, lg = 0, xl = 0 } = field;\n\n        if (type === \"group\") {\n          breakpointsCounter.increment({ xs: 12 });\n          return (\n            <Grid item key={id} xs={12}>\n              <ObjectDetailGroup\n                field={field}\n                instance={instance[id] as GroupInstanceType}\n                dense={dense}\n              />\n            </Grid>\n          );\n        }\n\n        if (type === \"group[]\") {\n          breakpointsCounter.increment({ xs: 12 });\n          return (\n            <Grid item key={id} xs={12}>\n              <ObjectArrayGroup field={field} instance={instance[id] as any} dense={dense} />\n            </Grid>\n          );\n        }\n\n        const bordered = breakpointsCounter.increment(field);\n        return (\n          <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>\n            {singleDetailValueFactory(field, instance, { dense })}\n          </ValueItem>\n        );\n      })}\n    </Grid>\n  );\n};\n"],"names":["newBreakpointsCounter","breakpoint","calculateBreakpointIncrement","breakpointsCounter","key","value","initialValue","xs","sm","md","lg","xl","increment","smInc","mdInc","lgInc","xlInc","this","ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","useEditableValueDisplay","onEdit","isEditing","setIsEditing","useState","editValue","setEditValue","cancelEdit","startEdit","submitEdit","ValueEditButton","dense","typography","useTheme","IconButton","ml","EditIcon","pxToRem","getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","id","Box","width","lineHeight","undefined","Typography","role","Tooltip","title","placement","enterDelay","ValueBoolean","placeholder","editable","iconSx","h6","h5","display","alignItems","Switch","checked","onChange","e","target","CloseIcon","ValueDatetime","valueProp","format","fmt","editInputType","flexDirection","DateTimePicker","TimePicker","DatePicker","newValue","slots","textField","params","TextField","InputProps","endAdornment","_Fragment","marginY","noWrap","ValueText","editInputRef","useRef","toString","editKeyPressListener","useEffect","current","addEventListener","removeEventListener","inputRef","useGetDefaultThemeColor","lightWeight","darkWeight","palette","mode","grey","GroupValueCard","subtitle","centered","defaultColor","Paper","paddingBottom","bgcolor","px","py","Grid","container","padding","rowSpacing","justifyContent","valueItemClasses","ValueItem","bordered","rest","borderLeft","borderStyle","noBorder","Array","isArray","map","b","style","Object","entries","forEach","resolveBorderStyle","item","className","singleDetailValueFactory","field","instance","name","type","JSON","stringify","ObjectArrayGroup","description","columns","headerName","column","push","rows","f","DataGrid","density","disableRowSelectionOnClick","pageSizeOptions","initialState","pagination","paginationModel","pageSize","height","ObjectDetailGroup","ObjectDetails","model","spacing","fields"],"mappings":"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"}

package/object-details/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/object-details",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "description": "My custom design system on top of MUI",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/placeholder/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),r=require("@mui/material/Typography"),i=require("@mui/material/Button");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(t),n=l(r),o=l(i);exports.Placeholder=({title:t,subtitle:r,icon:i,iconSize:l=200,actions:u})=>e.jsxs(a.default,{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",children:[i&&i({size:l,color:"primary"}),e.jsx(n.default,{variant:"h4",role:"heading","aria-level":1,children:t}),e.jsx(n.default,{variant:"subtitle1",role:"heading","aria-level":2,sx:{mt:2},children:r}),u&&e.jsx(a.default,{sx:{pt:2},children:u.map((({id:t,text:r,href:i,onClick:l},a)=>e.jsx(o.default,{role:"button",variant:"contained",href:i,onClick:l,sx:{mr:a<u.length-1?2:0},children:r},t)))})]});
+//# sourceMappingURL=index.js.map

package/placeholder/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/placeholder/placeholder.tsx"],"sourcesContent":["import { ReactElement } from \"react\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport Button from \"@mui/material/Button\";\n\ntype IconColor =\n  | \"inherit\"\n  | \"action\"\n  | \"disabled\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"info\"\n  | \"success\"\n  | \"warning\";\n\nexport interface PlaceholderAction {\n  id: string;\n  text: string;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport interface PlaceholderIconArgs {\n  size: number;\n  color: IconColor;\n}\n\nexport type PlaceholderIcon = ({ size, color }: PlaceholderIconArgs) => ReactElement;\n\nexport interface PlaceholderProps {\n  title: string;\n  subtitle: string;\n  iconSize?: number;\n  icon?: PlaceholderIcon;\n  actions?: PlaceholderAction[];\n}\n\nexport const Placeholder = ({\n  title,\n  subtitle,\n  icon,\n  iconSize = 200,\n  actions,\n}: PlaceholderProps) => {\n  return (\n    <Box\n      display=\"flex\"\n      flexDirection=\"column\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      textAlign=\"center\"\n    >\n      {icon && icon({ size: iconSize, color: \"primary\" })}\n      <Typography variant=\"h4\" role=\"heading\" aria-level={1}>\n        {title}\n      </Typography>\n      <Typography variant=\"subtitle1\" role=\"heading\" aria-level={2} sx={{ mt: 2 }}>\n        {subtitle}\n      </Typography>\n      {actions && (\n        <Box sx={{ pt: 2 }}>\n          {actions.map(({ id, text, href, onClick }, index) => (\n            <Button\n              key={id}\n              role=\"button\"\n              variant=\"contained\"\n              href={href}\n              onClick={onClick}\n              sx={{ mr: index < actions.length - 1 ? 2 : 0 }}\n            >\n              {text}\n            </Button>\n          ))}\n        </Box>\n      )}\n    </Box>\n  );\n};\n"],"names":["title","subtitle","icon","iconSize","actions","_jsxs","jsxs","Box","display","flexDirection","justifyContent","alignItems","textAlign","children","size","color","_jsx","Typography","variant","role","sx","mt","pt","map","id","text","href","onClick","index","jsx","Button","mr","length"],"mappings":"mUAsC2B,EACzBA,QACAC,WACAC,OACAC,WAAW,IACXC,aAGEC,EAACC,KAAAC,UACC,CAAAC,QAAQ,OACRC,cAAc,SACdC,eAAe,SACfC,WAAW,SACXC,UAAU,SAAQC,SAAA,CAEjBX,GAAQA,EAAK,CAAEY,KAAMX,EAAUY,MAAO,YACvCC,EAAAA,IAACC,EAAU,QAAA,CAACC,QAAQ,KAAKC,KAAK,UAAS,aAAa,EAACN,SAClDb,IAEHgB,MAACC,UAAU,CAACC,QAAQ,YAAYC,KAAK,UAAS,aAAa,EAAGC,GAAI,CAAEC,GAAI,GAAGR,SACxEZ,IAEFG,GACCY,EAAAA,IAACT,EAAG,SAACa,GAAI,CAAEE,GAAI,GACZT,SAAAT,EAAQmB,KAAI,EAAGC,KAAIC,OAAMC,OAAMC,WAAWC,IACzCZ,EAACa,IAAAC,WAECX,KAAK,SACLD,QAAQ,YACRQ,KAAMA,EACNC,QAASA,EACTP,GAAI,CAAEW,GAAIH,EAAQxB,EAAQ4B,OAAS,EAAI,EAAI,GAE1CnB,SAAAY,GAPID"}