@pautena/react-design-system 0.14.4 → 0.14.5

package/value-datetime/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/value-base/value-edit.tsx","../../src/value-content/value-content.tsx","../../src/value-datetime/value-datetime.tsx","../../src/value-base/value-displays.types.ts"],"sourcesContent":["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 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","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"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","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","ValueDatetime","value","valueProp","format","fmt","placeholder","editable","editInputType","onEdit","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","display","flexDirection","DateTimePicker","TimePicker","DatePicker","onChange","newValue","slots","textField","params","TextField","InputProps","endAdornment","_Fragment","marginY","alignItems","noWrap"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/value-base/value-edit.tsx","../../src/value-content/value-content.tsx","../../src/value-datetime/value-datetime.tsx","../../src/value-base/value-displays.types.ts"],"sourcesContent":["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 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\" aria-labelledby={id}>\n          <Typography variant={dense ? \"body1\" : \"h5\"} noWrap>\n            {value}\n          </Typography>\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"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","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","ValueDatetime","value","valueProp","format","fmt","placeholder","editable","editInputType","onEdit","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","display","flexDirection","DateTimePicker","TimePicker","DatePicker","onChange","newValue","slots","textField","params","TextField","InputProps","endAdornment","_Fragment","marginY","alignItems","noWrap"],"mappings":"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"}

package/value-rating/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),i=require("@mui/material/Rating"),a=require("react"),l=require("@mui/icons-material/Check"),r=require("@mui/icons-material/Clear"),n=require("@mui/material/styles"),s=require("@mui/material/Button"),u=require("@mui/material/IconButton"),o=require("@mui/material/InputAdornment"),d=require("@mui/icons-material/Edit"),c=require("@mui/material/Tooltip"),m=require("@mui/material/Typography");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=x(t),b=x(i),h=x(l),g=x(r),f=x(s),j=x(u),y=x(o),C=x(d),q=x(c),E=x(m);const v=({onClickCancel:t,onClickSubmit:i,sx:a})=>e.jsxs(y.default,{position:"end",sx:a,children:[e.jsx(f.default,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:e.jsx(g.default,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0,marginRight:1}}),e.jsx(f.default,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:e.jsx(h.default,{sx:{fontSize:12}}),onClick:i,sx:{paddingRight:0,minWidth:0}})]}),k=({dense:t,onClick:i})=>{const{typography:a}=n.useTheme();return e.jsx(j.default,{size:"small",onClick:i,sx:{ml:t?.5:1},"aria-label":"edit button",children:e.jsx(C.default,{sx:{fontSize:a.pxToRem(t?18:24)}})})},R=e=>`label-${e.replace(/ /g,"-")}`,S=({label:t,hideLabel:i,tooltip:a,tooltipEnterDelay:l=2e3,children:r,dense:s,sx:u})=>{const{typography:o}=n.useTheme(),d=R(t);return e.jsxs(p.default,{width:1,lineHeight:s?0:void 0,sx:u,children:[!i&&e.jsx(E.default,{variant:s?"caption":"subtitle2",role:"label",id:d,lineHeight:s?o.pxToRem(15):void 0,children:t}),a?e.jsx(q.default,{title:a,placement:"top",enterDelay:l,children:r}):r]})};exports.ValueRating=({label:t,value:i=0,maxRating:l=5,editable:r,dense:n,onEdit:s=(()=>null)})=>{const{isEditing:u,editValue:o,startEdit:d,cancelEdit:c,setEditValue:m,submitEdit:x}=((e,t)=>{const[i,l]=a.useState(!1),[r,n]=a.useState(e),s=()=>{l(!1),n(e)};return{isEditing:i,cancelEdit:s,editValue:r,setEditValue:n,startEdit:()=>{l(!0)},submitEdit:()=>{t(r),s()}}})(i,s),h=R(t);return e.jsx(S,{label:t,tooltip:i.toString(),dense:n,children:e.jsxs(p.default,{display:"flex",alignItems:"center",children:[e.jsx(b.default,{"aria-labelledby":h,readOnly:!u,max:l,size:n?"small":"medium",value:u?o:i,onChange:(e,t)=>{Number.isNaN(t)&&e.currentTarget.value?m(parseInt(e.currentTarget.value,10)):t&&m(t)}}),r&&!u&&e.jsx(k,{dense:n,onClick:d}),u&&e.jsx(v,{onClickCancel:c,onClickSubmit:x})]})})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),i=require("@mui/material/Rating"),a=require("react"),l=require("@mui/icons-material/Check"),r=require("@mui/icons-material/Clear"),n=require("@mui/material/styles"),s=require("@mui/material/Button"),u=require("@mui/material/IconButton"),o=require("@mui/material/InputAdornment"),d=require("@mui/icons-material/Edit"),c=require("@mui/material/Tooltip"),m=require("@mui/material/Typography");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=x(t),b=x(i),h=x(l),g=x(r),f=x(s),j=x(u),y=x(o),C=x(d),q=x(c),E=x(m);const v=({onClickCancel:t,onClickSubmit:i,sx:a})=>e.jsxs(y.default,{position:"end",sx:a,children:[e.jsx(f.default,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:e.jsx(g.default,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0,marginRight:1}}),e.jsx(f.default,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:e.jsx(h.default,{sx:{fontSize:12}}),onClick:i,sx:{paddingRight:0,minWidth:0}})]}),k=({dense:t,onClick:i})=>{const{typography:a}=n.useTheme();return e.jsx(j.default,{size:"small",onClick:i,sx:{ml:t?.5:1},"aria-label":"edit button",children:e.jsx(C.default,{sx:{fontSize:a.pxToRem(t?18:24)}})})},R=e=>`label-${e.replace(/ /g,"-")}`,S=({label:t,hideLabel:i,tooltip:a,tooltipEnterDelay:l=2e3,children:r,dense:s,sx:u})=>{const{typography:o}=n.useTheme(),d=R(t);return e.jsxs(p.default,{width:1,lineHeight:s?0:void 0,sx:u,children:[!i&&e.jsx(E.default,{variant:s?"caption":"subtitle2",role:"label",id:d,lineHeight:s?o.pxToRem(15):void 0,children:t}),a?e.jsx(q.default,{title:a,placement:"top",enterDelay:l,children:r}):r]})};exports.ValueRating=({label:t,value:i=0,maxRating:l=5,editable:r,dense:n,onEdit:s=(()=>null)})=>{const{isEditing:u,editValue:o,startEdit:d,cancelEdit:c,setEditValue:m,submitEdit:x}=((e,t)=>{const[i,l]=a.useState(!1),[r,n]=a.useState(e),s=()=>{l(!1),n(e)};return{isEditing:i,cancelEdit:s,editValue:r,setEditValue:n,startEdit:()=>{l(!0)},submitEdit:()=>{t(r),s()}}})(i,s),h=R(t);return e.jsx(S,{label:t,tooltip:i.toString(),dense:n,children:e.jsxs(p.default,{display:"flex",alignItems:"center","aria-labelledby":h,children:[e.jsx(b.default,{readOnly:!u,max:l,size:n?"small":"medium",value:u?o:i,onChange:(e,t)=>{Number.isNaN(t)&&e.currentTarget.value?m(parseInt(e.currentTarget.value,10)):t&&m(t)}}),r&&!u&&e.jsx(k,{dense:n,onClick:d}),u&&e.jsx(v,{onClickCancel:c,onClickSubmit:x})]})})};
 //# sourceMappingURL=index.js.map

package/value-rating/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/value-base/value-edit.tsx","../../../src/value-content/value-content.tsx","../../../src/value-rating/value-rating.tsx"],"sourcesContent":["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 Box from \"@mui/material/Box\";\nimport Rating from \"@mui/material/Rating\";\nimport { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from \"../value-base\";\nimport { BaseValueProps, EditableValueProps } from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueRatingProps = BaseValueProps<number> & {\n  maxRating?: number;\n} & EditableValueProps<number>;\n\n/**\n * Displays a number using stars\n */\nexport const ValueRating = ({\n  label,\n  value = 0,\n  maxRating = 5,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueRatingProps) => {\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(value, onEdit);\n  const id = getValueContentLabelId(label);\n\n  return (\n    <ValueContent label={label} tooltip={value.toString()} dense={dense}>\n      <Box display=\"flex\" alignItems=\"center\">\n        <Rating\n          aria-labelledby={id}\n          readOnly={!isEditing}\n          max={maxRating}\n          size={dense ? \"small\" : \"medium\"}\n          value={isEditing ? editValue : value}\n          onChange={(e, newValue) => {\n            if (Number.isNaN(newValue) && (e.currentTarget as any).value) {\n              setEditValue(parseInt((e.currentTarget as any).value, 10));\n            } else if (newValue) {\n              setEditValue(newValue);\n            }\n          }}\n        />\n        {editable && !isEditing && <ValueEditButton dense={dense} onClick={startEdit} />}\n        {isEditing && <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />}\n      </Box>\n    </ValueContent>\n  );\n};\n"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","jsx","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","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","value","maxRating","editable","onEdit","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","toString","display","alignItems","Rating","readOnly","max","onChange","e","newValue","Number","isNaN","currentTarget","parseInt"],"mappings":"8pBAeO,MAAMA,EAAmB,EAAGC,gBAAeC,gBAAeC,QAE7DC,EAAAA,KAACC,EAAAA,QAAe,CAAAC,SAAS,MAAMH,GAAIA,EAAEI,SAAA,CACnCC,MAACC,EAAM,QAAA,CACLC,QAAQ,YACRC,KAAK,QACLC,MAAM,QAAO,aACF,gBACXC,UAAWL,EAAAM,IAACC,EAAS,QAAA,CAACZ,GAAI,CAAEa,SAAU,MACtCC,QAAShB,EACTE,GAAI,CAAEe,aAAc,EAAGC,SAAU,EAAGC,YAAa,KAEnDZ,EAACM,IAAAL,EAAM,QACL,CAAAC,QAAQ,YACRC,KAAK,QACLC,MAAM,UAAS,aACJ,gBACXC,UAAWL,EAACM,IAAAO,EAAS,SAAClB,GAAI,CAAEa,SAAU,MACtCC,QAASf,EACTC,GAAI,CAAEe,aAAc,EAAGC,SAAU,QAqC5BG,EAAkB,EAAGC,QAAON,cACvC,MAAMO,WAAEA,GAAeC,EAAAA,WACvB,OACEjB,EAACM,IAAAY,EAAU,QACT,CAAAf,KAAK,QACLM,QAASA,EACTd,GAAI,CAAEwB,GAAIJ,EAAQ,GAAM,GAAG,aAChB,cAEXhB,SAAAC,EAAAA,IAACoB,EAAAA,QAAQ,CAACzB,GAAI,CAAEa,SAAUQ,EAAWK,QAAQN,EAAQ,GAAK,QAE5D,EC7ESO,EAA0BC,GACrC,SAASA,EAAMC,QAAQ,KAAM,OA2ClBC,EAAe,EAC1BF,QACAG,YACAC,UACAC,oBAAoB,IACpB7B,WACAgB,QACApB,SAEA,MAAMqB,WAAEA,GAAeC,EAAAA,WACjBY,EAAKP,EAAuBC,GAElC,OACE3B,OAACkC,EAAAA,QAAG,CAACC,MAAO,EAAGC,WAAYjB,EAAQ,OAAIkB,EAAWtC,GAAIA,EAAEI,SAAA,EACpD2B,GACA1B,EAAAA,IAACkC,EAAU,SACThC,QAASa,EAAQ,UAAY,YAC7BoB,KAAK,QACLN,GAAIA,EACJG,WAAYjB,EAAQC,EAAWK,QAAQ,SAAMY,EAE5ClC,SAAAwB,IAGJI,EACC3B,EAAAM,IAAC8B,EAAO,QAAC,CAAAC,MAAOV,EAASW,UAAU,MAAMC,WAAYX,WAClD7B,IACO,IAKd,sBCpEuB,EACzBwB,QACAiB,QAAQ,EACRC,YAAY,EACZC,WACA3B,QACA4B,SAAS,KAAM,UAEf,MAAMC,UAAEA,EAASC,UAAEA,EAASC,UAAEA,EAASC,WAAEA,EAAUC,aAAEA,EAAYC,WAAEA,GFsB9B,EACrCC,EACAP,KAEA,MAAOC,EAAWO,GAAgBC,EAAQA,UAAC,IACpCP,EAAWG,GAAgBI,EAAQA,SAAgBF,GAEpDH,EAAa,KACjBI,GAAa,GACbH,EAAaE,EAAa,EAW5B,MAAO,CAAEN,YAAWG,aAAYF,YAAWG,eAAcF,UATvC,KAChBK,GAAa,EAAK,EAQgDF,WALjD,KACjBN,EAAOE,GACPE,GAAY,EAGkE,EEzC9EM,CAAwBb,EAAOG,GAC3Bd,EAAKP,EAAuBC,GAElC,OACEvB,EAAAM,IAACmB,EAAY,CAACF,MAAOA,EAAOI,QAASa,EAAMc,WAAYvC,MAAOA,EAAKhB,SACjEH,OAACkC,UAAG,CAACyB,QAAQ,OAAOC,WAAW,mBAC7BxD,EAACM,IAAAmD,UACkB,CAAA,kBAAA5B,EACjB6B,UAAWd,EACXe,IAAKlB,EACLtC,KAAMY,EAAQ,QAAU,SACxByB,MAAOI,EAAYC,EAAYL,EAC/BoB,SAAU,CAACC,EAAGC,KACRC,OAAOC,MAAMF,IAAcD,EAAEI,cAAsBzB,MACrDQ,EAAakB,SAAUL,EAAEI,cAAsBzB,MAAO,KAC7CsB,GACTd,EAAac,EACd,IAGJpB,IAAaE,GAAa5C,EAACM,IAAAQ,GAAgBC,MAAOA,EAAON,QAASqC,IAClEF,GAAa5C,MAACR,EAAgB,CAACC,cAAesD,EAAYrD,cAAeuD,QAG9E"}
+{"version":3,"file":"index.js","sources":["../../../src/value-base/value-edit.tsx","../../../src/value-content/value-content.tsx","../../../src/value-rating/value-rating.tsx"],"sourcesContent":["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 Box from \"@mui/material/Box\";\nimport Rating from \"@mui/material/Rating\";\nimport { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from \"../value-base\";\nimport { BaseValueProps, EditableValueProps } from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueRatingProps = BaseValueProps<number> & {\n  maxRating?: number;\n} & EditableValueProps<number>;\n\n/**\n * Displays a number using stars\n */\nexport const ValueRating = ({\n  label,\n  value = 0,\n  maxRating = 5,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueRatingProps) => {\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(value, onEdit);\n  const id = getValueContentLabelId(label);\n\n  return (\n    <ValueContent label={label} tooltip={value.toString()} dense={dense}>\n      <Box display=\"flex\" alignItems=\"center\" aria-labelledby={id}>\n        <Rating\n          readOnly={!isEditing}\n          max={maxRating}\n          size={dense ? \"small\" : \"medium\"}\n          value={isEditing ? editValue : value}\n          onChange={(e, newValue) => {\n            if (Number.isNaN(newValue) && (e.currentTarget as any).value) {\n              setEditValue(parseInt((e.currentTarget as any).value, 10));\n            } else if (newValue) {\n              setEditValue(newValue);\n            }\n          }}\n        />\n        {editable && !isEditing && <ValueEditButton dense={dense} onClick={startEdit} />}\n        {isEditing && <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />}\n      </Box>\n    </ValueContent>\n  );\n};\n"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","jsx","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","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","value","maxRating","editable","onEdit","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","toString","display","alignItems","Rating","readOnly","max","onChange","e","newValue","Number","isNaN","currentTarget","parseInt"],"mappings":"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"}

package/value-rating/index.js

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as t}from"react/jsx-runtime";import e from"@mui/material/Box";import a from"@mui/material/Rating";import{useState as r}from"react";import l from"@mui/icons-material/Check";import n from"@mui/icons-material/Clear";import{useTheme as o}from"@mui/material/styles";import m from"@mui/material/Button";import s from"@mui/material/IconButton";import c from"@mui/material/InputAdornment";import d from"@mui/icons-material/Edit";import u from"@mui/material/Tooltip";import p from"@mui/material/Typography";const b=({onClickCancel:e,onClickSubmit:a,sx:r})=>i(c,{position:"end",sx:r,children:[t(m,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:t(n,{sx:{fontSize:12}}),onClick:e,sx:{paddingRight:0,minWidth:0,marginRight:1}}),t(m,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:t(l,{sx:{fontSize:12}}),onClick:a,sx:{paddingRight:0,minWidth:0}})]}),h=({dense:i,onClick:e})=>{const{typography:a}=o();return t(s,{size:"small",onClick:e,sx:{ml:i?.5:1},"aria-label":"edit button",children:t(d,{sx:{fontSize:a.pxToRem(i?18:24)}})})},g=i=>`label-${i.replace(/ /g,"-")}`,x=({label:a,hideLabel:r,tooltip:l,tooltipEnterDelay:n=2e3,children:m,dense:s,sx:c})=>{const{typography:d}=o(),b=g(a);return i(e,{width:1,lineHeight:s?0:void 0,sx:c,children:[!r&&t(p,{variant:s?"caption":"subtitle2",role:"label",id:b,lineHeight:s?d.pxToRem(15):void 0,children:a}),l?t(u,{title:l,placement:"top",enterDelay:n,children:m}):m]})},f=({label:l,value:n=0,maxRating:o=5,editable:m,dense:s,onEdit:c=(()=>null)})=>{const{isEditing:d,editValue:u,startEdit:p,cancelEdit:f,setEditValue:C,submitEdit:y}=((i,t)=>{const[e,a]=r(!1),[l,n]=r(i),o=()=>{a(!1),n(i)};return{isEditing:e,cancelEdit:o,editValue:l,setEditValue:n,startEdit:()=>{a(!0)},submitEdit:()=>{t(l),o()}}})(n,c),E=g(l);return t(x,{label:l,tooltip:n.toString(),dense:s,children:i(e,{display:"flex",alignItems:"center",children:[t(a,{"aria-labelledby":E,readOnly:!d,max:o,size:s?"small":"medium",value:d?u:n,onChange:(i,t)=>{Number.isNaN(t)&&i.currentTarget.value?C(parseInt(i.currentTarget.value,10)):t&&C(t)}}),m&&!d&&t(h,{dense:s,onClick:p}),d&&t(b,{onClickCancel:f,onClickSubmit:y})]})})};export{f as ValueRating};
+import{jsxs as i,jsx as t}from"react/jsx-runtime";import e from"@mui/material/Box";import a from"@mui/material/Rating";import{useState as r}from"react";import l from"@mui/icons-material/Check";import n from"@mui/icons-material/Clear";import{useTheme as o}from"@mui/material/styles";import m from"@mui/material/Button";import s from"@mui/material/IconButton";import c from"@mui/material/InputAdornment";import d from"@mui/icons-material/Edit";import u from"@mui/material/Tooltip";import p from"@mui/material/Typography";const b=({onClickCancel:e,onClickSubmit:a,sx:r})=>i(c,{position:"end",sx:r,children:[t(m,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:t(n,{sx:{fontSize:12}}),onClick:e,sx:{paddingRight:0,minWidth:0,marginRight:1}}),t(m,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:t(l,{sx:{fontSize:12}}),onClick:a,sx:{paddingRight:0,minWidth:0}})]}),h=({dense:i,onClick:e})=>{const{typography:a}=o();return t(s,{size:"small",onClick:e,sx:{ml:i?.5:1},"aria-label":"edit button",children:t(d,{sx:{fontSize:a.pxToRem(i?18:24)}})})},g=i=>`label-${i.replace(/ /g,"-")}`,x=({label:a,hideLabel:r,tooltip:l,tooltipEnterDelay:n=2e3,children:m,dense:s,sx:c})=>{const{typography:d}=o(),b=g(a);return i(e,{width:1,lineHeight:s?0:void 0,sx:c,children:[!r&&t(p,{variant:s?"caption":"subtitle2",role:"label",id:b,lineHeight:s?d.pxToRem(15):void 0,children:a}),l?t(u,{title:l,placement:"top",enterDelay:n,children:m}):m]})},f=({label:l,value:n=0,maxRating:o=5,editable:m,dense:s,onEdit:c=(()=>null)})=>{const{isEditing:d,editValue:u,startEdit:p,cancelEdit:f,setEditValue:C,submitEdit:y}=((i,t)=>{const[e,a]=r(!1),[l,n]=r(i),o=()=>{a(!1),n(i)};return{isEditing:e,cancelEdit:o,editValue:l,setEditValue:n,startEdit:()=>{a(!0)},submitEdit:()=>{t(l),o()}}})(n,c),E=g(l);return t(x,{label:l,tooltip:n.toString(),dense:s,children:i(e,{display:"flex",alignItems:"center","aria-labelledby":E,children:[t(a,{readOnly:!d,max:o,size:s?"small":"medium",value:d?u:n,onChange:(i,t)=>{Number.isNaN(t)&&i.currentTarget.value?C(parseInt(i.currentTarget.value,10)):t&&C(t)}}),m&&!d&&t(h,{dense:s,onClick:p}),d&&t(b,{onClickCancel:f,onClickSubmit:y})]})})};export{f as ValueRating};
 //# sourceMappingURL=index.js.map

package/value-rating/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/value-base/value-edit.tsx","../../src/value-content/value-content.tsx","../../src/value-rating/value-rating.tsx"],"sourcesContent":["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 Box from \"@mui/material/Box\";\nimport Rating from \"@mui/material/Rating\";\nimport { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from \"../value-base\";\nimport { BaseValueProps, EditableValueProps } from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueRatingProps = BaseValueProps<number> & {\n  maxRating?: number;\n} & EditableValueProps<number>;\n\n/**\n * Displays a number using stars\n */\nexport const ValueRating = ({\n  label,\n  value = 0,\n  maxRating = 5,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueRatingProps) => {\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(value, onEdit);\n  const id = getValueContentLabelId(label);\n\n  return (\n    <ValueContent label={label} tooltip={value.toString()} dense={dense}>\n      <Box display=\"flex\" alignItems=\"center\">\n        <Rating\n          aria-labelledby={id}\n          readOnly={!isEditing}\n          max={maxRating}\n          size={dense ? \"small\" : \"medium\"}\n          value={isEditing ? editValue : value}\n          onChange={(e, newValue) => {\n            if (Number.isNaN(newValue) && (e.currentTarget as any).value) {\n              setEditValue(parseInt((e.currentTarget as any).value, 10));\n            } else if (newValue) {\n              setEditValue(newValue);\n            }\n          }}\n        />\n        {editable && !isEditing && <ValueEditButton dense={dense} onClick={startEdit} />}\n        {isEditing && <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />}\n      </Box>\n    </ValueContent>\n  );\n};\n"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","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","ValueRating","value","maxRating","editable","onEdit","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","toString","display","alignItems","Rating","readOnly","max","onChange","e","newValue","Number","isNaN","currentTarget","parseInt"],"mappings":"ugBAeO,MAAMA,EAAmB,EAAGC,gBAAeC,gBAAeC,QAE7DC,EAACC,EAAe,CAAAC,SAAS,MAAMH,GAAIA,EAAEI,SAAA,CACnCC,EAACC,EAAM,CACLC,QAAQ,YACRC,KAAK,QACLC,MAAM,QAAO,aACF,gBACXC,UAAWL,EAACM,EAAS,CAACX,GAAI,CAAEY,SAAU,MACtCC,QAASf,EACTE,GAAI,CAAEc,aAAc,EAAGC,SAAU,EAAGC,YAAa,KAEnDX,EAACC,EACC,CAAAC,QAAQ,YACRC,KAAK,QACLC,MAAM,UAAS,aACJ,gBACXC,UAAWL,EAACY,GAAUjB,GAAI,CAAEY,SAAU,MACtCC,QAASd,EACTC,GAAI,CAAEc,aAAc,EAAGC,SAAU,QAqC5BG,EAAkB,EAAGC,QAAON,cACvC,MAAMO,WAAEA,GAAeC,IACvB,OACEhB,EAACiB,EACC,CAAAd,KAAK,QACLK,QAASA,EACTb,GAAI,CAAEuB,GAAIJ,EAAQ,GAAM,GAAG,aAChB,cAEXf,SAAAC,EAACmB,EAAQ,CAACxB,GAAI,CAAEY,SAAUQ,EAAWK,QAAQN,EAAQ,GAAK,QAE5D,EC7ESO,EAA0BC,GACrC,SAASA,EAAMC,QAAQ,KAAM,OA2ClBC,EAAe,EAC1BF,QACAG,YACAC,UACAC,oBAAoB,IACpB5B,WACAe,QACAnB,SAEA,MAAMoB,WAAEA,GAAeC,IACjBY,EAAKP,EAAuBC,GAElC,OACE1B,EAACiC,EAAG,CAACC,MAAO,EAAGC,WAAYjB,EAAQ,OAAIkB,EAAWrC,GAAIA,EAAEI,SAAA,EACpD0B,GACAzB,EAACiC,GACC/B,QAASY,EAAQ,UAAY,YAC7BoB,KAAK,QACLN,GAAIA,EACJG,WAAYjB,EAAQC,EAAWK,QAAQ,SAAMY,EAE5CjC,SAAAuB,IAGJI,EACC1B,EAACmC,EAAQ,CAAAC,MAAOV,EAASW,UAAU,MAAMC,WAAYX,WAClD5B,IACO,IAKd,ECpESwC,EAAc,EACzBjB,QACAkB,QAAQ,EACRC,YAAY,EACZC,WACA5B,QACA6B,SAAS,KAAM,UAEf,MAAMC,UAAEA,EAASC,UAAEA,EAASC,UAAEA,EAASC,WAAEA,EAAUC,aAAEA,EAAYC,WAAEA,GFsB9B,EACrCC,EACAP,KAEA,MAAOC,EAAWO,GAAgBC,GAAS,IACpCP,EAAWG,GAAgBI,EAAwBF,GAEpDH,EAAa,KACjBI,GAAa,GACbH,EAAaE,EAAa,EAW5B,MAAO,CAAEN,YAAWG,aAAYF,YAAWG,eAAcF,UATvC,KAChBK,GAAa,EAAK,EAQgDF,WALjD,KACjBN,EAAOE,GACPE,GAAY,EAGkE,EEzC9EM,CAAwBb,EAAOG,GAC3Bf,EAAKP,EAAuBC,GAElC,OACEtB,EAACwB,EAAY,CAACF,MAAOA,EAAOI,QAASc,EAAMc,WAAYxC,MAAOA,EAAKf,SACjEH,EAACiC,EAAG,CAAC0B,QAAQ,OAAOC,WAAW,mBAC7BxD,EAACyD,EACkB,CAAA,kBAAA7B,EACjB8B,UAAWd,EACXe,IAAKlB,EACLtC,KAAMW,EAAQ,QAAU,SACxB0B,MAAOI,EAAYC,EAAYL,EAC/BoB,SAAU,CAACC,EAAGC,KACRC,OAAOC,MAAMF,IAAcD,EAAEI,cAAsBzB,MACrDQ,EAAakB,SAAUL,EAAEI,cAAsBzB,MAAO,KAC7CsB,GACTd,EAAac,EACd,IAGJpB,IAAaE,GAAa5C,EAACa,GAAgBC,MAAOA,EAAON,QAASsC,IAClEF,GAAa5C,EAACR,EAAgB,CAACC,cAAesD,EAAYrD,cAAeuD,QAG9E"}
+{"version":3,"file":"index.js","sources":["../../src/value-base/value-edit.tsx","../../src/value-content/value-content.tsx","../../src/value-rating/value-rating.tsx"],"sourcesContent":["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 Box from \"@mui/material/Box\";\nimport Rating from \"@mui/material/Rating\";\nimport { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from \"../value-base\";\nimport { BaseValueProps, EditableValueProps } from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueRatingProps = BaseValueProps<number> & {\n  maxRating?: number;\n} & EditableValueProps<number>;\n\n/**\n * Displays a number using stars\n */\nexport const ValueRating = ({\n  label,\n  value = 0,\n  maxRating = 5,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueRatingProps) => {\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(value, onEdit);\n  const id = getValueContentLabelId(label);\n\n  return (\n    <ValueContent label={label} tooltip={value.toString()} dense={dense}>\n      <Box display=\"flex\" alignItems=\"center\" aria-labelledby={id}>\n        <Rating\n          readOnly={!isEditing}\n          max={maxRating}\n          size={dense ? \"small\" : \"medium\"}\n          value={isEditing ? editValue : value}\n          onChange={(e, newValue) => {\n            if (Number.isNaN(newValue) && (e.currentTarget as any).value) {\n              setEditValue(parseInt((e.currentTarget as any).value, 10));\n            } else if (newValue) {\n              setEditValue(newValue);\n            }\n          }}\n        />\n        {editable && !isEditing && <ValueEditButton dense={dense} onClick={startEdit} />}\n        {isEditing && <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />}\n      </Box>\n    </ValueContent>\n  );\n};\n"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","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","ValueRating","value","maxRating","editable","onEdit","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","toString","display","alignItems","Rating","readOnly","max","onChange","e","newValue","Number","isNaN","currentTarget","parseInt"],"mappings":"ugBAeO,MAAMA,EAAmB,EAAGC,gBAAeC,gBAAeC,QAE7DC,EAACC,EAAe,CAAAC,SAAS,MAAMH,GAAIA,EAAEI,SAAA,CACnCC,EAACC,EAAM,CACLC,QAAQ,YACRC,KAAK,QACLC,MAAM,QAAO,aACF,gBACXC,UAAWL,EAACM,EAAS,CAACX,GAAI,CAAEY,SAAU,MACtCC,QAASf,EACTE,GAAI,CAAEc,aAAc,EAAGC,SAAU,EAAGC,YAAa,KAEnDX,EAACC,EACC,CAAAC,QAAQ,YACRC,KAAK,QACLC,MAAM,UAAS,aACJ,gBACXC,UAAWL,EAACY,GAAUjB,GAAI,CAAEY,SAAU,MACtCC,QAASd,EACTC,GAAI,CAAEc,aAAc,EAAGC,SAAU,QAqC5BG,EAAkB,EAAGC,QAAON,cACvC,MAAMO,WAAEA,GAAeC,IACvB,OACEhB,EAACiB,EACC,CAAAd,KAAK,QACLK,QAASA,EACTb,GAAI,CAAEuB,GAAIJ,EAAQ,GAAM,GAAG,aAChB,cAEXf,SAAAC,EAACmB,EAAQ,CAACxB,GAAI,CAAEY,SAAUQ,EAAWK,QAAQN,EAAQ,GAAK,QAE5D,EC7ESO,EAA0BC,GACrC,SAASA,EAAMC,QAAQ,KAAM,OA2ClBC,EAAe,EAC1BF,QACAG,YACAC,UACAC,oBAAoB,IACpB5B,WACAe,QACAnB,SAEA,MAAMoB,WAAEA,GAAeC,IACjBY,EAAKP,EAAuBC,GAElC,OACE1B,EAACiC,EAAG,CAACC,MAAO,EAAGC,WAAYjB,EAAQ,OAAIkB,EAAWrC,GAAIA,EAAEI,SAAA,EACpD0B,GACAzB,EAACiC,GACC/B,QAASY,EAAQ,UAAY,YAC7BoB,KAAK,QACLN,GAAIA,EACJG,WAAYjB,EAAQC,EAAWK,QAAQ,SAAMY,EAE5CjC,SAAAuB,IAGJI,EACC1B,EAACmC,EAAQ,CAAAC,MAAOV,EAASW,UAAU,MAAMC,WAAYX,WAClD5B,IACO,IAKd,ECpESwC,EAAc,EACzBjB,QACAkB,QAAQ,EACRC,YAAY,EACZC,WACA5B,QACA6B,SAAS,KAAM,UAEf,MAAMC,UAAEA,EAASC,UAAEA,EAASC,UAAEA,EAASC,WAAEA,EAAUC,aAAEA,EAAYC,WAAEA,GFsB9B,EACrCC,EACAP,KAEA,MAAOC,EAAWO,GAAgBC,GAAS,IACpCP,EAAWG,GAAgBI,EAAwBF,GAEpDH,EAAa,KACjBI,GAAa,GACbH,EAAaE,EAAa,EAW5B,MAAO,CAAEN,YAAWG,aAAYF,YAAWG,eAAcF,UATvC,KAChBK,GAAa,EAAK,EAQgDF,WALjD,KACjBN,EAAOE,GACPE,GAAY,EAGkE,EEzC9EM,CAAwBb,EAAOG,GAC3Bf,EAAKP,EAAuBC,GAElC,OACEtB,EAACwB,EAAY,CAACF,MAAOA,EAAOI,QAASc,EAAMc,WAAYxC,MAAOA,EAAKf,SACjEH,EAACiC,EAAG,CAAC0B,QAAQ,OAAOC,WAAW,2BAA0B5B,EAAE7B,SAAA,CACzDC,EAACyD,GACCC,UAAWd,EACXe,IAAKlB,EACLtC,KAAMW,EAAQ,QAAU,SACxB0B,MAAOI,EAAYC,EAAYL,EAC/BoB,SAAU,CAACC,EAAGC,KACRC,OAAOC,MAAMF,IAAcD,EAAEI,cAAsBzB,MACrDQ,EAAakB,SAAUL,EAAEI,cAAsBzB,MAAO,KAC7CsB,GACTd,EAAac,EACd,IAGJpB,IAAaE,GAAa5C,EAACa,GAAgBC,MAAOA,EAAON,QAASsC,IAClEF,GAAa5C,EAACR,EAAgB,CAACC,cAAesD,EAAYrD,cAAeuD,QAG9E"}

package/value-text/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Typography"),i=require("@mui/material/TextField"),l=require("@mui/material/Box"),a=require("react"),r=require("@mui/icons-material/Check"),n=require("@mui/icons-material/Clear"),s=require("@mui/material/styles"),u=require("@mui/material/Button"),o=require("@mui/material/IconButton"),d=require("@mui/material/InputAdornment"),c=require("@mui/icons-material/Edit"),m=require("@mui/material/Tooltip");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=x(t),h=x(i),b=x(l),f=x(r),g=x(n),j=x(u),y=x(o),E=x(d),v=x(c),C=x(m);const k=({onClickCancel:t,onClickSubmit:i,sx:l})=>e.jsxs(E.default,{position:"end",sx:l,children:[e.jsx(j.default,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:e.jsx(g.default,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0,marginRight:1}}),e.jsx(j.default,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:e.jsx(f.default,{sx:{fontSize:12}}),onClick:i,sx:{paddingRight:0,minWidth:0}})]}),q=({dense:t,onClick:i})=>{const{typography:l}=s.useTheme();return e.jsx(y.default,{size:"small",onClick:i,sx:{ml:t?.5:1},"aria-label":"edit button",children:e.jsx(v.default,{sx:{fontSize:l.pxToRem(t?18:24)}})})},S=e=>`label-${e.replace(/ /g,"-")}`,T=({label:t,hideLabel:i,tooltip:l,tooltipEnterDelay:a=2e3,children:r,dense:n,sx:u})=>{const{typography:o}=s.useTheme(),d=S(t);return e.jsxs(b.default,{width:1,lineHeight:n?0:void 0,sx:u,children:[!i&&e.jsx(p.default,{variant:n?"caption":"subtitle2",role:"label",id:d,lineHeight:n?o.pxToRem(15):void 0,children:t}),l?e.jsx(C.default,{title:l,placement:"top",enterDelay:a,children:r}):r]})};exports.ValueText=({label:t,value:i,placeholder:l="-",editable:r,dense:n,onEdit:s=(()=>null)})=>{const u=a.useRef(null),{isEditing:o,editValue:d,startEdit:c,cancelEdit:m,setEditValue:x,submitEdit:f}=((e,t)=>{const[i,l]=a.useState(!1),[r,n]=a.useState(e),s=()=>{l(!1),n(e)};return{isEditing:i,cancelEdit:s,editValue:r,setEditValue:n,startEdit:()=>{l(!0)},submitEdit:()=>{t(r),s()}}})(i?.toString(),s),g=S(t),j=i?.toString()||l,y=e=>{"Enter"===e.key&&s(e.target.value)};return a.useEffect((()=>(u.current?.addEventListener("keypress",y),()=>u.current?.removeEventListener("keypress",y))),[u.current]),e.jsx(T,{hideLabel:o,label:t,tooltip:j,dense:n,children:o?e.jsx(h.default,{inputRef:u,value:d,label:t,size:"small",onChange:e=>x(e.target.value),InputProps:{endAdornment:e.jsx(k,{onClickCancel:m,onClickSubmit:f})},sx:{marginY:n?0:1}}):e.jsxs(b.default,{display:"flex",children:[e.jsx(p.default,{variant:n?"body1":"h5",noWrap:!0,"aria-labelledby":g,children:j}),r&&e.jsx(q,{dense:n,onClick:c})]})})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Typography"),i=require("@mui/material/TextField"),l=require("@mui/material/Box"),a=require("react"),r=require("@mui/icons-material/Check"),n=require("@mui/icons-material/Clear"),s=require("@mui/material/styles"),u=require("@mui/material/Button"),o=require("@mui/material/IconButton"),d=require("@mui/material/InputAdornment"),c=require("@mui/icons-material/Edit"),m=require("@mui/material/Tooltip");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=x(t),h=x(i),b=x(l),f=x(r),g=x(n),j=x(u),y=x(o),E=x(d),v=x(c),C=x(m);const k=({onClickCancel:t,onClickSubmit:i,sx:l})=>e.jsxs(E.default,{position:"end",sx:l,children:[e.jsx(j.default,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:e.jsx(g.default,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0,marginRight:1}}),e.jsx(j.default,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:e.jsx(f.default,{sx:{fontSize:12}}),onClick:i,sx:{paddingRight:0,minWidth:0}})]}),q=({dense:t,onClick:i})=>{const{typography:l}=s.useTheme();return e.jsx(y.default,{size:"small",onClick:i,sx:{ml:t?.5:1},"aria-label":"edit button",children:e.jsx(v.default,{sx:{fontSize:l.pxToRem(t?18:24)}})})},S=e=>`label-${e.replace(/ /g,"-")}`,T=({label:t,hideLabel:i,tooltip:l,tooltipEnterDelay:a=2e3,children:r,dense:n,sx:u})=>{const{typography:o}=s.useTheme(),d=S(t);return e.jsxs(b.default,{width:1,lineHeight:n?0:void 0,sx:u,children:[!i&&e.jsx(p.default,{variant:n?"caption":"subtitle2",role:"label",id:d,lineHeight:n?o.pxToRem(15):void 0,children:t}),l?e.jsx(C.default,{title:l,placement:"top",enterDelay:a,children:r}):r]})};exports.ValueText=({label:t,value:i,placeholder:l="-",editable:r,dense:n,onEdit:s=(()=>null)})=>{const u=a.useRef(null),{isEditing:o,editValue:d,startEdit:c,cancelEdit:m,setEditValue:x,submitEdit:f}=((e,t)=>{const[i,l]=a.useState(!1),[r,n]=a.useState(e),s=()=>{l(!1),n(e)};return{isEditing:i,cancelEdit:s,editValue:r,setEditValue:n,startEdit:()=>{l(!0)},submitEdit:()=>{t(r),s()}}})(i?.toString(),s),g=S(t),j=i?.toString()||l,y=e=>{"Enter"===e.key&&s(e.target.value)};return a.useEffect((()=>(u.current?.addEventListener("keypress",y),()=>u.current?.removeEventListener("keypress",y))),[u.current]),e.jsx(T,{hideLabel:o,label:t,tooltip:j,dense:n,children:o?e.jsx(h.default,{inputRef:u,value:d,label:t,size:"small",onChange:e=>x(e.target.value),InputProps:{endAdornment:e.jsx(k,{onClickCancel:m,onClickSubmit:f})},sx:{marginY:n?0:1}}):e.jsxs(b.default,{display:"flex","aria-labelledby":g,children:[e.jsx(p.default,{variant:n?"body1":"h5",noWrap:!0,children:j}),r&&e.jsx(q,{dense:n,onClick:c})]})})};
 //# sourceMappingURL=index.js.map

package/value-text/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/value-base/value-edit.tsx","../../../src/value-content/value-content.tsx","../../../src/value-text/value-text.tsx","../../../src/value-base/value-displays.types.ts"],"sourcesContent":["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 Typography from \"@mui/material/Typography\";\nimport TextField from \"@mui/material/TextField\";\nimport Box from \"@mui/material/Box\";\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        <Box display=\"flex\">\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","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"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","jsx","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","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","value","valueProp","placeholder","editable","onEdit","editInputRef","useRef","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","toString","editKeyPressListener","e","key","target","useEffect","current","addEventListener","removeEventListener","TextField","inputRef","onChange","InputProps","endAdornment","marginY","display","noWrap"],"mappings":"iqBAeO,MAAMA,EAAmB,EAAGC,gBAAeC,gBAAeC,QAE7DC,EAAAA,KAACC,EAAAA,QAAe,CAAAC,SAAS,MAAMH,GAAIA,EAAEI,SAAA,CACnCC,MAACC,EAAM,QAAA,CACLC,QAAQ,YACRC,KAAK,QACLC,MAAM,QAAO,aACF,gBACXC,UAAWL,EAAAM,IAACC,EAAS,QAAA,CAACZ,GAAI,CAAEa,SAAU,MACtCC,QAAShB,EACTE,GAAI,CAAEe,aAAc,EAAGC,SAAU,EAAGC,YAAa,KAEnDZ,EAACM,IAAAL,EAAM,QACL,CAAAC,QAAQ,YACRC,KAAK,QACLC,MAAM,UAAS,aACJ,gBACXC,UAAWL,EAACM,IAAAO,EAAS,SAAClB,GAAI,CAAEa,SAAU,MACtCC,QAASf,EACTC,GAAI,CAAEe,aAAc,EAAGC,SAAU,QAqC5BG,EAAkB,EAAGC,QAAON,cACvC,MAAMO,WAAEA,GAAeC,EAAAA,WACvB,OACEjB,EAACM,IAAAY,EAAU,QACT,CAAAf,KAAK,QACLM,QAASA,EACTd,GAAI,CAAEwB,GAAIJ,EAAQ,GAAM,GAAG,aAChB,cAEXhB,SAAAC,EAAAA,IAACoB,EAAAA,QAAQ,CAACzB,GAAI,CAAEa,SAAUQ,EAAWK,QAAQN,EAAQ,GAAK,QAE5D,EC7ESO,EAA0BC,GACrC,SAASA,EAAMC,QAAQ,KAAM,OA2ClBC,EAAe,EAC1BF,QACAG,YACAC,UACAC,oBAAoB,IACpB7B,WACAgB,QACApB,SAEA,MAAMqB,WAAEA,GAAeC,EAAAA,WACjBY,EAAKP,EAAuBC,GAElC,OACE3B,OAACkC,EAAAA,QAAG,CAACC,MAAO,EAAGC,WAAYjB,EAAQ,OAAIkB,EAAWtC,GAAIA,EAAEI,SAAA,EACpD2B,GACA1B,EAAAA,IAACkC,EAAU,SACThC,QAASa,EAAQ,UAAY,YAC7BoB,KAAK,QACLN,GAAIA,EACJG,WAAYjB,EAAQC,EAAWK,QAAQ,SAAMY,EAE5ClC,SAAAwB,IAGJI,EACC3B,EAAAM,IAAC8B,EAAO,QAAC,CAAAC,MAAOV,EAASW,UAAU,MAAMC,WAAYX,WAClD7B,IACO,IAKd,oBC9DqB,EACvBwB,QACAiB,MAAOC,EACPC,cCagC,IDZhCC,WACA5B,QACA6B,SAAS,KAAM,UAEf,MAAMC,EAAeC,SAAyB,OACxCC,UAAEA,EAASC,UAAEA,EAASC,UAAEA,EAASC,WAAEA,EAAUC,aAAEA,EAAYC,WAAEA,GFe9B,EACrCC,EACAT,KAEA,MAAOG,EAAWO,GAAgBC,EAAQA,UAAC,IACpCP,EAAWG,GAAgBI,EAAQA,SAAgBF,GAEpDH,EAAa,KACjBI,GAAa,GACbH,EAAaE,EAAa,EAW5B,MAAO,CAAEN,YAAWG,aAAYF,YAAWG,eAAcF,UATvC,KAChBK,GAAa,EAAK,EAQgDF,WALjD,KACjBR,EAAOI,GACPE,GAAY,EAGkE,EElC9EM,CAAwBf,GAAWgB,WAAYb,GAC3Cf,EAAKP,EAAuBC,GAC5BiB,EAAQC,GAAWgB,YAAcf,EAEjCgB,EAAwBC,IACd,UAAVA,EAAEC,KACJhB,EAAQe,EAAEE,OAAerB,MAC1B,EAQH,OALAsB,EAAAA,WAAU,KACRjB,EAAakB,SAASC,iBAAiB,WAAYN,GAC5C,IAAMb,EAAakB,SAASE,oBAAoB,WAAYP,KAClE,CAACb,EAAakB,UAGf/D,EAAAA,IAACyB,EAAY,CAACC,UAAWqB,EAAWxB,MAAOA,EAAOI,QAASa,EAAOzB,MAAOA,EAAKhB,SAC3EgD,EACC/C,EAAAM,IAAC4D,UAAS,CACRC,SAAUtB,EACVL,MAAOQ,EACPzB,MAAOA,EACPpB,KAAK,QACLiE,SAAWT,GAAMR,EAAaQ,EAAEE,OAAOrB,OACvC6B,WAAY,CACVC,aACEtE,EAAAA,IAACR,EAAiB,CAAAC,cAAeyD,EAAYxD,cAAe0D,KAGhEzD,GAAI,CAAE4E,QAAUxD,EAAY,EAAJ,KAG1BnB,OAACkC,EAAG,QAAA,CAAC0C,QAAQ,OAAMzE,SAAA,CACjBC,EAACM,IAAA4B,WAAWhC,QAASa,EAAQ,QAAU,KAAM0D,QAAwB,EAAA,kBAAA5C,EAClE9B,SAAAyC,IAEFG,GAAY3C,EAAAA,IAACc,EAAe,CAACC,MAAOA,EAAON,QAASwC,QAI3D"}
+{"version":3,"file":"index.js","sources":["../../../src/value-base/value-edit.tsx","../../../src/value-content/value-content.tsx","../../../src/value-text/value-text.tsx","../../../src/value-base/value-displays.types.ts"],"sourcesContent":["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 Typography from \"@mui/material/Typography\";\nimport TextField from \"@mui/material/TextField\";\nimport Box from \"@mui/material/Box\";\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        <Box display=\"flex\" aria-labelledby={id}>\n          <Typography variant={dense ? \"body1\" : \"h5\"} noWrap>\n            {value}\n          </Typography>\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"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","jsx","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","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","value","valueProp","placeholder","editable","onEdit","editInputRef","useRef","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","toString","editKeyPressListener","e","key","target","useEffect","current","addEventListener","removeEventListener","TextField","inputRef","onChange","InputProps","endAdornment","marginY","display","noWrap"],"mappings":"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"}

package/value-text/index.js

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as t}from"react/jsx-runtime";import e from"@mui/material/Typography";import r from"@mui/material/TextField";import l from"@mui/material/Box";import{useState as n,useRef as a,useEffect as o}from"react";import m from"@mui/icons-material/Check";import s from"@mui/icons-material/Clear";import{useTheme as d}from"@mui/material/styles";import c from"@mui/material/Button";import p from"@mui/material/IconButton";import u from"@mui/material/InputAdornment";import h from"@mui/icons-material/Edit";import b from"@mui/material/Tooltip";const g=({onClickCancel:e,onClickSubmit:r,sx:l})=>i(u,{position:"end",sx:l,children:[t(c,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:t(s,{sx:{fontSize:12}}),onClick:e,sx:{paddingRight:0,minWidth:0,marginRight:1}}),t(c,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:t(m,{sx:{fontSize:12}}),onClick:r,sx:{paddingRight:0,minWidth:0}})]}),f=({dense:i,onClick:e})=>{const{typography:r}=d();return t(p,{size:"small",onClick:e,sx:{ml:i?.5:1},"aria-label":"edit button",children:t(h,{sx:{fontSize:r.pxToRem(i?18:24)}})})},x=i=>`label-${i.replace(/ /g,"-")}`,y=({label:r,hideLabel:n,tooltip:a,tooltipEnterDelay:o=2e3,children:m,dense:s,sx:c})=>{const{typography:p}=d(),u=x(r);return i(l,{width:1,lineHeight:s?0:void 0,sx:c,children:[!n&&t(e,{variant:s?"caption":"subtitle2",role:"label",id:u,lineHeight:s?p.pxToRem(15):void 0,children:r}),a?t(b,{title:a,placement:"top",enterDelay:o,children:m}):m]})},E=({label:m,value:s,placeholder:d="-",editable:c,dense:p,onEdit:u=(()=>null)})=>{const h=a(null),{isEditing:b,editValue:E,startEdit:C,cancelEdit:k,setEditValue:v,submitEdit:z}=((i,t)=>{const[e,r]=n(!1),[l,a]=n(i),o=()=>{r(!1),a(i)};return{isEditing:e,cancelEdit:o,editValue:l,setEditValue:a,startEdit:()=>{r(!0)},submitEdit:()=>{t(l),o()}}})(s?.toString(),u),S=x(m),R=s?.toString()||d,I=i=>{"Enter"===i.key&&u(i.target.value)};return o((()=>(h.current?.addEventListener("keypress",I),()=>h.current?.removeEventListener("keypress",I))),[h.current]),t(y,{hideLabel:b,label:m,tooltip:R,dense:p,children:b?t(r,{inputRef:h,value:E,label:m,size:"small",onChange:i=>v(i.target.value),InputProps:{endAdornment:t(g,{onClickCancel:k,onClickSubmit:z})},sx:{marginY:p?0:1}}):i(l,{display:"flex",children:[t(e,{variant:p?"body1":"h5",noWrap:!0,"aria-labelledby":S,children:R}),c&&t(f,{dense:p,onClick:C})]})})};export{E as ValueText};
+import{jsxs as i,jsx as t}from"react/jsx-runtime";import e from"@mui/material/Typography";import r from"@mui/material/TextField";import l from"@mui/material/Box";import{useState as n,useRef as a,useEffect as o}from"react";import m from"@mui/icons-material/Check";import s from"@mui/icons-material/Clear";import{useTheme as d}from"@mui/material/styles";import c from"@mui/material/Button";import p from"@mui/material/IconButton";import u from"@mui/material/InputAdornment";import h from"@mui/icons-material/Edit";import b from"@mui/material/Tooltip";const g=({onClickCancel:e,onClickSubmit:r,sx:l})=>i(u,{position:"end",sx:l,children:[t(c,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:t(s,{sx:{fontSize:12}}),onClick:e,sx:{paddingRight:0,minWidth:0,marginRight:1}}),t(c,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:t(m,{sx:{fontSize:12}}),onClick:r,sx:{paddingRight:0,minWidth:0}})]}),f=({dense:i,onClick:e})=>{const{typography:r}=d();return t(p,{size:"small",onClick:e,sx:{ml:i?.5:1},"aria-label":"edit button",children:t(h,{sx:{fontSize:r.pxToRem(i?18:24)}})})},x=i=>`label-${i.replace(/ /g,"-")}`,y=({label:r,hideLabel:n,tooltip:a,tooltipEnterDelay:o=2e3,children:m,dense:s,sx:c})=>{const{typography:p}=d(),u=x(r);return i(l,{width:1,lineHeight:s?0:void 0,sx:c,children:[!n&&t(e,{variant:s?"caption":"subtitle2",role:"label",id:u,lineHeight:s?p.pxToRem(15):void 0,children:r}),a?t(b,{title:a,placement:"top",enterDelay:o,children:m}):m]})},E=({label:m,value:s,placeholder:d="-",editable:c,dense:p,onEdit:u=(()=>null)})=>{const h=a(null),{isEditing:b,editValue:E,startEdit:C,cancelEdit:k,setEditValue:v,submitEdit:z}=((i,t)=>{const[e,r]=n(!1),[l,a]=n(i),o=()=>{r(!1),a(i)};return{isEditing:e,cancelEdit:o,editValue:l,setEditValue:a,startEdit:()=>{r(!0)},submitEdit:()=>{t(l),o()}}})(s?.toString(),u),S=x(m),R=s?.toString()||d,I=i=>{"Enter"===i.key&&u(i.target.value)};return o((()=>(h.current?.addEventListener("keypress",I),()=>h.current?.removeEventListener("keypress",I))),[h.current]),t(y,{hideLabel:b,label:m,tooltip:R,dense:p,children:b?t(r,{inputRef:h,value:E,label:m,size:"small",onChange:i=>v(i.target.value),InputProps:{endAdornment:t(g,{onClickCancel:k,onClickSubmit:z})},sx:{marginY:p?0:1}}):i(l,{display:"flex","aria-labelledby":S,children:[t(e,{variant:p?"body1":"h5",noWrap:!0,children:R}),c&&t(f,{dense:p,onClick:C})]})})};export{E as ValueText};
 //# sourceMappingURL=index.js.map

package/value-text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/value-base/value-edit.tsx","../../src/value-content/value-content.tsx","../../src/value-text/value-text.tsx","../../src/value-base/value-displays.types.ts"],"sourcesContent":["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 Typography from \"@mui/material/Typography\";\nimport TextField from \"@mui/material/TextField\";\nimport Box from \"@mui/material/Box\";\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        <Box display=\"flex\">\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","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"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","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","ValueText","value","valueProp","placeholder","editable","onEdit","editInputRef","useRef","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","toString","editKeyPressListener","e","key","target","useEffect","current","addEventListener","removeEventListener","TextField","inputRef","onChange","InputProps","endAdornment","marginY","display","noWrap"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/value-base/value-edit.tsx","../../src/value-content/value-content.tsx","../../src/value-text/value-text.tsx","../../src/value-base/value-displays.types.ts"],"sourcesContent":["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 Typography from \"@mui/material/Typography\";\nimport TextField from \"@mui/material/TextField\";\nimport Box from \"@mui/material/Box\";\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        <Box display=\"flex\" aria-labelledby={id}>\n          <Typography variant={dense ? \"body1\" : \"h5\"} noWrap>\n            {value}\n          </Typography>\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"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","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","ValueText","value","valueProp","placeholder","editable","onEdit","editInputRef","useRef","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","toString","editKeyPressListener","e","key","target","useEffect","current","addEventListener","removeEventListener","TextField","inputRef","onChange","InputProps","endAdornment","marginY","display","noWrap"],"mappings":"qiBAeO,MAAMA,EAAmB,EAAGC,gBAAeC,gBAAeC,QAE7DC,EAACC,EAAe,CAAAC,SAAS,MAAMH,GAAIA,EAAEI,SAAA,CACnCC,EAACC,EAAM,CACLC,QAAQ,YACRC,KAAK,QACLC,MAAM,QAAO,aACF,gBACXC,UAAWL,EAACM,EAAS,CAACX,GAAI,CAAEY,SAAU,MACtCC,QAASf,EACTE,GAAI,CAAEc,aAAc,EAAGC,SAAU,EAAGC,YAAa,KAEnDX,EAACC,EACC,CAAAC,QAAQ,YACRC,KAAK,QACLC,MAAM,UAAS,aACJ,gBACXC,UAAWL,EAACY,GAAUjB,GAAI,CAAEY,SAAU,MACtCC,QAASd,EACTC,GAAI,CAAEc,aAAc,EAAGC,SAAU,QAqC5BG,EAAkB,EAAGC,QAAON,cACvC,MAAMO,WAAEA,GAAeC,IACvB,OACEhB,EAACiB,EACC,CAAAd,KAAK,QACLK,QAASA,EACTb,GAAI,CAAEuB,GAAIJ,EAAQ,GAAM,GAAG,aAChB,cAEXf,SAAAC,EAACmB,EAAQ,CAACxB,GAAI,CAAEY,SAAUQ,EAAWK,QAAQN,EAAQ,GAAK,QAE5D,EC7ESO,EAA0BC,GACrC,SAASA,EAAMC,QAAQ,KAAM,OA2ClBC,EAAe,EAC1BF,QACAG,YACAC,UACAC,oBAAoB,IACpB5B,WACAe,QACAnB,SAEA,MAAMoB,WAAEA,GAAeC,IACjBY,EAAKP,EAAuBC,GAElC,OACE1B,EAACiC,EAAG,CAACC,MAAO,EAAGC,WAAYjB,EAAQ,OAAIkB,EAAWrC,GAAIA,EAAEI,SAAA,EACpD0B,GACAzB,EAACiC,GACC/B,QAASY,EAAQ,UAAY,YAC7BoB,KAAK,QACLN,GAAIA,EACJG,WAAYjB,EAAQC,EAAWK,QAAQ,SAAMY,EAE5CjC,SAAAuB,IAGJI,EACC1B,EAACmC,EAAQ,CAAAC,MAAOV,EAASW,UAAU,MAAMC,WAAYX,WAClD5B,IACO,IAKd,EC9DSwC,EAAY,EACvBjB,QACAkB,MAAOC,EACPC,cCagC,IDZhCC,WACA7B,QACA8B,SAAS,KAAM,UAEf,MAAMC,EAAeC,EAAyB,OACxCC,UAAEA,EAASC,UAAEA,EAASC,UAAEA,EAASC,WAAEA,EAAUC,aAAEA,EAAYC,WAAEA,GFe9B,EACrCC,EACAT,KAEA,MAAOG,EAAWO,GAAgBC,GAAS,IACpCP,EAAWG,GAAgBI,EAAwBF,GAEpDH,EAAa,KACjBI,GAAa,GACbH,EAAaE,EAAa,EAW5B,MAAO,CAAEN,YAAWG,aAAYF,YAAWG,eAAcF,UATvC,KAChBK,GAAa,EAAK,EAQgDF,WALjD,KACjBR,EAAOI,GACPE,GAAY,EAGkE,EElC9EM,CAAwBf,GAAWgB,WAAYb,GAC3ChB,EAAKP,EAAuBC,GAC5BkB,EAAQC,GAAWgB,YAAcf,EAEjCgB,EAAwBC,IACd,UAAVA,EAAEC,KACJhB,EAAQe,EAAEE,OAAerB,MAC1B,EAQH,OALAsB,GAAU,KACRjB,EAAakB,SAASC,iBAAiB,WAAYN,GAC5C,IAAMb,EAAakB,SAASE,oBAAoB,WAAYP,KAClE,CAACb,EAAakB,UAGf/D,EAACwB,EAAY,CAACC,UAAWsB,EAAWzB,MAAOA,EAAOI,QAASc,EAAO1B,MAAOA,EAAKf,SAC3EgD,EACC/C,EAACkE,EAAS,CACRC,SAAUtB,EACVL,MAAOQ,EACP1B,MAAOA,EACPnB,KAAK,QACLiE,SAAWT,GAAMR,EAAaQ,EAAEE,OAAOrB,OACvC6B,WAAY,CACVC,aACEtE,EAACR,EAAiB,CAAAC,cAAeyD,EAAYxD,cAAe0D,KAGhEzD,GAAI,CAAE4E,QAAUzD,EAAY,EAAJ,KAG1BlB,EAACiC,EAAG,CAAC2C,QAAQ,OAAM,kBAAkB5C,EAAE7B,SAAA,CACrCC,EAACiC,EAAU,CAAC/B,QAASY,EAAQ,QAAU,KAAM2D,QAC1C,EAAA1E,SAAAyC,IAEFG,GAAY3C,EAACa,EAAe,CAACC,MAAOA,EAAON,QAASyC,QAI3D"}