@pautena/react-design-system 0.14.2 → 0.14.3

package/value-boolean/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-boolean/value-boolean.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 { useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Switch from \"@mui/material/Switch\";\nimport Typography from \"@mui/material/Typography\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport {\n  BaseValueProps,\n  DefaultPlaceholder,\n  EditableValueProps,\n  useEditableValueDisplay,\n  ValueEditButton,\n  ValueEditButtons,\n} from \"~/value-base\";\nimport { ValueContent, getValueContentLabelId } from \"~/value-content\";\n\nexport type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;\n\n/**\n * Displays a boolean value with a label\n */\nexport const ValueBoolean = ({\n  label,\n  value,\n  placeholder = DefaultPlaceholder,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueBooleanProps) => {\n  const id = getValueContentLabelId(label);\n  const { typography } = useTheme();\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(value, onEdit);\n\n  const iconSx = { fontSize: dense ? typography.h6.fontSize : typography.h5.fontSize };\n\n  return (\n    <ValueContent label={label} dense={dense}>\n      {isEditing ? (\n        <Box display=\"flex\" alignItems=\"center\">\n          <Switch\n            size={dense ? \"small\" : \"medium\"}\n            checked={editValue}\n            onChange={(e) => setEditValue(e.target.checked)}\n          />\n          <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n        </Box>\n      ) : (\n        <Box\n          display=\"flex\"\n          alignItems=\"center\"\n          aria-labelledby={id}\n          role=\"checkbox\"\n          aria-checked={value}\n        >\n          {value === undefined ? (\n            <Typography variant=\"h5\">{placeholder}</Typography>\n          ) : value ? (\n            <CheckIcon color=\"success\" sx={iconSx} />\n          ) : (\n            <CloseIcon color=\"error\" sx={iconSx} />\n          )}\n          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n        </Box>\n      )}\n    </ValueContent>\n  );\n};\n","export interface BaseValueProps<T> {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * Value displayed\n   */\n  value?: T;\n\n  /**\n   * String rendered if value is undefined\n   */\n  placeholder?: string;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n  /**\n   * This field can be edited or not\n   */\n  editable?: boolean;\n\n  /**\n   * Callback executed when the value is edited\n   */\n  onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n"],"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","ValueBoolean","value","placeholder","editable","onEdit","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","iconSx","h6","h5","display","alignItems","Switch","checked","onChange","e","target","CloseIcon"],"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-boolean/value-boolean.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 { useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Switch from \"@mui/material/Switch\";\nimport Typography from \"@mui/material/Typography\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport {\n  BaseValueProps,\n  DefaultPlaceholder,\n  EditableValueProps,\n  useEditableValueDisplay,\n  ValueEditButton,\n  ValueEditButtons,\n} from \"../value-base\";\nimport { ValueContent, getValueContentLabelId } from \"../value-content\";\n\nexport type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;\n\n/**\n * Displays a boolean value with a label\n */\nexport const ValueBoolean = ({\n  label,\n  value,\n  placeholder = DefaultPlaceholder,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueBooleanProps) => {\n  const id = getValueContentLabelId(label);\n  const { typography } = useTheme();\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(value, onEdit);\n\n  const iconSx = { fontSize: dense ? typography.h6.fontSize : typography.h5.fontSize };\n\n  return (\n    <ValueContent label={label} dense={dense}>\n      {isEditing ? (\n        <Box display=\"flex\" alignItems=\"center\">\n          <Switch\n            size={dense ? \"small\" : \"medium\"}\n            checked={editValue}\n            onChange={(e) => setEditValue(e.target.checked)}\n          />\n          <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n        </Box>\n      ) : (\n        <Box\n          display=\"flex\"\n          alignItems=\"center\"\n          aria-labelledby={id}\n          role=\"checkbox\"\n          aria-checked={value}\n        >\n          {value === undefined ? (\n            <Typography variant=\"h5\">{placeholder}</Typography>\n          ) : value ? (\n            <CheckIcon color=\"success\" sx={iconSx} />\n          ) : (\n            <CloseIcon color=\"error\" sx={iconSx} />\n          )}\n          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n        </Box>\n      )}\n    </ValueContent>\n  );\n};\n","export interface BaseValueProps<T> {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * Value displayed\n   */\n  value?: T;\n\n  /**\n   * String rendered if value is undefined\n   */\n  placeholder?: string;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n  /**\n   * This field can be edited or not\n   */\n  editable?: boolean;\n\n  /**\n   * Callback executed when the value is edited\n   */\n  onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n"],"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","ValueBoolean","value","placeholder","editable","onEdit","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","iconSx","h6","h5","display","alignItems","Switch","checked","onChange","e","target","CloseIcon"],"mappings":"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"}

package/value-boolean/value-boolean.d.ts

@@ -1,4 +1,4 @@
-import { BaseValueProps, EditableValueProps } from "~/value-base";
+import { BaseValueProps, EditableValueProps } from "../value-base";
 export type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;
 /**
  * Displays a boolean value with a label

package/value-datetime/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-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","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","format","fmt","placeholder","editable","editInputType","onEdit","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","EditPickerComponent","DateTimePicker","TimePicker","DatePicker","display","flexDirection","onChange","newValue","slots","textField","params","TextField","InputProps","endAdornment","_Fragment","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\">\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","format","fmt","placeholder","editable","editInputType","onEdit","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","EditPickerComponent","DateTimePicker","TimePicker","DatePicker","display","flexDirection","onChange","newValue","slots","textField","params","TextField","InputProps","endAdornment","_Fragment","Fragment","marginY","alignItems","noWrap"],"mappings":"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"}

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":"svBAeO,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,ECrDSwC,EAAgB,EAC3BjB,QACAkB,MAAOC,EACPC,OAAQC,EACRC,cCGgC,IDFhCC,WACAC,gBAAgB,WAChBhC,QACAiC,SAAS,KAAM,UAEf,MAAMC,UAAEA,EAASC,UAAEA,EAASC,UAAEA,EAASC,WAAEA,EAAUC,aAAEA,EAAYC,WAAEA,GFK9B,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,EExB9EM,CAAwBhB,EAAWM,GAC/BnB,EAAKP,EAAuBC,GAC5BkB,EAASC,GAAaC,EAAOD,EAAWE,IAASC,EASvD,OACE5C,EAACwB,EAAY,CACXF,MAAOA,EACPG,UAAWuB,EACXtB,QAASc,EACT1B,MAAOA,EACPnB,GAAI,CAAE+D,QAAS,OAAQC,cAAe,UAErC5D,SAAAiD,EACChD,EAfc,aAAlB8C,EACIc,EACkB,SAAlBd,EACAe,EACAC,EAWoB,CAClBtB,MAAOS,EACPP,OAAQC,EACRrB,MAAOA,EACPyC,SAAWC,GAAaZ,EAAaY,QAAsBhC,GAC3DiC,MAAO,CACLC,UAAYC,GACVnE,EAACoE,EAAS,IACJD,EACJhE,KAAK,QACLkE,WAAY,IACPF,EAAOE,WACVC,aACE1E,EACG2E,EAAA,CAAAxE,SAAA,CAAAoE,EAAOE,YAAYC,aACpBtE,EAACR,EAAgB,CACfC,cAAe0D,EACfzD,cAAe2D,EACf1D,GAAI,CAAEuB,GAAI,QAIhBvB,GAAI,CAAE6E,QAAU1D,EAAY,GAAJ,SAOlClB,EAACiC,EAAG,CAAC6B,QAAQ,OAAOe,WAAW,SAC7B1E,SAAA,CAAAC,EAACiC,EAAU,CAAC/B,QAASY,EAAQ,QAAU,KAAM4D,QAAwB,EAAA,kBAAA9C,EAClE7B,SAAAyC,IAEFK,GAAY7C,EAACa,GAAgBC,MAAOA,EAAON,QAAS0C,QAI3D"}
+{"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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"}

package/value-datetime/value-datetime.d.ts

@@ -1,4 +1,4 @@
-import { BaseValueProps, EditableValueProps } from "~/value-base";
+import { BaseValueProps, EditableValueProps } from "../value-base";
 export type EditInputType = "datetime" | "date" | "time";
 export interface ValueDatetimeProps extends BaseValueProps<Date>, EditableValueProps<Date> {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/value-content/value-content.tsx","../../../src/value-image/value-image.tsx"],"sourcesContent":["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 { ValueContent } from \"~/value-content\";\nimport { BaseValueProps } from \"~/value-base\";\n\nexport interface ValueImageProps extends BaseValueProps<string> {\n  /**\n   * Image size\n   */\n  size?: number;\n}\n\nconst DefaultSize = 100;\nconst DefaultDenseSize = 50;\n\n/**\n * Displays a image value with a label\n */\nexport const ValueImage = ({ label, value, size: sizeArg, dense }: ValueImageProps) => {\n  const size = sizeArg || (dense ? DefaultDenseSize : DefaultSize);\n  return (\n    <ValueContent label={label} dense={dense}>\n      <Box component=\"img\" src={value} alt={label} sx={{ width: size, height: size }} />\n    </ValueContent>\n  );\n};\n"],"names":["ValueContent","label","hideLabel","tooltip","tooltipEnterDelay","children","dense","sx","typography","useTheme","id","replace","getValueContentLabelId","_jsxs","Box","width","lineHeight","undefined","_jsx","Typography","variant","role","pxToRem","jsx","Tooltip","title","placement","enterDelay","value","size","sizeArg","component","src","alt","height"],"mappings":"kVAKO,MA4CMA,EAAe,EAC1BC,QACAC,YACAC,UACAC,oBAAoB,IACpBC,WACAC,QACAC,SAEA,MAAMC,WAAEA,GAAeC,EAAAA,WACjBC,EAtD8B,CAACT,GACrC,SAASA,EAAMU,QAAQ,KAAM,OAqDlBC,CAAuBX,GAElC,OACEY,OAACC,EAAAA,QAAG,CAACC,MAAO,EAAGC,WAAYV,EAAQ,OAAIW,EAAWV,GAAIA,EAAEF,SAAA,EACpDH,GACAgB,EAAAA,IAACC,EAAU,SACTC,QAASd,EAAQ,UAAY,YAC7Be,KAAK,QACLX,GAAIA,EACJM,WAAYV,EAAQE,EAAWc,QAAQ,SAAML,EAE5CZ,SAAAJ,IAGJE,EACCe,EAAAK,IAACC,EAAO,QAAC,CAAAC,MAAOtB,EAASuB,UAAU,MAAMC,WAAYvB,WAClDC,IACO,IAKd,qBChEsB,EAAGJ,QAAO2B,QAAOC,KAAMC,EAASxB,YACxD,MAAMuB,EAAOC,IAAYxB,EANF,GADL,KAQlB,OACEY,MAAClB,GAAaC,MAAOA,EAAOK,MAAOA,WACjCY,EAAAA,IAACJ,EAAG,SAACiB,UAAU,MAAMC,IAAKJ,EAAOK,IAAKhC,EAAOM,GAAI,CAAEQ,MAAOc,EAAMK,OAAQL,MAE1E"}
+{"version":3,"file":"index.js","sources":["../../../src/value-content/value-content.tsx","../../../src/value-image/value-image.tsx"],"sourcesContent":["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 { ValueContent } from \"../value-content\";\nimport { BaseValueProps } from \"../value-base\";\n\nexport interface ValueImageProps extends BaseValueProps<string> {\n  /**\n   * Image size\n   */\n  size?: number;\n}\n\nconst DefaultSize = 100;\nconst DefaultDenseSize = 50;\n\n/**\n * Displays a image value with a label\n */\nexport const ValueImage = ({ label, value, size: sizeArg, dense }: ValueImageProps) => {\n  const size = sizeArg || (dense ? DefaultDenseSize : DefaultSize);\n  return (\n    <ValueContent label={label} dense={dense}>\n      <Box component=\"img\" src={value} alt={label} sx={{ width: size, height: size }} />\n    </ValueContent>\n  );\n};\n"],"names":["ValueContent","label","hideLabel","tooltip","tooltipEnterDelay","children","dense","sx","typography","useTheme","id","replace","getValueContentLabelId","_jsxs","Box","width","lineHeight","undefined","_jsx","Typography","variant","role","pxToRem","jsx","Tooltip","title","placement","enterDelay","value","size","sizeArg","component","src","alt","height"],"mappings":"kVAKO,MA4CMA,EAAe,EAC1BC,QACAC,YACAC,UACAC,oBAAoB,IACpBC,WACAC,QACAC,SAEA,MAAMC,WAAEA,GAAeC,EAAAA,WACjBC,EAtD8B,CAACT,GACrC,SAASA,EAAMU,QAAQ,KAAM,OAqDlBC,CAAuBX,GAElC,OACEY,OAACC,EAAAA,QAAG,CAACC,MAAO,EAAGC,WAAYV,EAAQ,OAAIW,EAAWV,GAAIA,EAAEF,SAAA,EACpDH,GACAgB,EAAAA,IAACC,EAAU,SACTC,QAASd,EAAQ,UAAY,YAC7Be,KAAK,QACLX,GAAIA,EACJM,WAAYV,EAAQE,EAAWc,QAAQ,SAAML,EAE5CZ,SAAAJ,IAGJE,EACCe,EAAAK,IAACC,EAAO,QAAC,CAAAC,MAAOtB,EAASuB,UAAU,MAAMC,WAAYvB,WAClDC,IACO,IAKd,qBChEsB,EAAGJ,QAAO2B,QAAOC,KAAMC,EAASxB,YACxD,MAAMuB,EAAOC,IAAYxB,EANF,GADL,KAQlB,OACEY,MAAClB,GAAaC,MAAOA,EAAOK,MAAOA,WACjCY,EAAAA,IAACJ,EAAG,SAACiB,UAAU,MAAMC,IAAKJ,EAAOK,IAAKhC,EAAOM,GAAI,CAAEQ,MAAOc,EAAMK,OAAQL,MAE1E"}

package/value-image/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/value-content/value-content.tsx","../../src/value-image/value-image.tsx"],"sourcesContent":["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 { ValueContent } from \"~/value-content\";\nimport { BaseValueProps } from \"~/value-base\";\n\nexport interface ValueImageProps extends BaseValueProps<string> {\n  /**\n   * Image size\n   */\n  size?: number;\n}\n\nconst DefaultSize = 100;\nconst DefaultDenseSize = 50;\n\n/**\n * Displays a image value with a label\n */\nexport const ValueImage = ({ label, value, size: sizeArg, dense }: ValueImageProps) => {\n  const size = sizeArg || (dense ? DefaultDenseSize : DefaultSize);\n  return (\n    <ValueContent label={label} dense={dense}>\n      <Box component=\"img\" src={value} alt={label} sx={{ width: size, height: size }} />\n    </ValueContent>\n  );\n};\n"],"names":["ValueContent","label","hideLabel","tooltip","tooltipEnterDelay","children","dense","sx","typography","useTheme","id","replace","getValueContentLabelId","_jsxs","Box","width","lineHeight","undefined","_jsx","Typography","variant","role","pxToRem","Tooltip","title","placement","enterDelay","ValueImage","value","size","sizeArg","component","src","alt","height"],"mappings":"gNAKO,MA4CMA,EAAe,EAC1BC,QACAC,YACAC,UACAC,oBAAoB,IACpBC,WACAC,QACAC,SAEA,MAAMC,WAAEA,GAAeC,IACjBC,EAtD8B,CAACT,GACrC,SAASA,EAAMU,QAAQ,KAAM,OAqDlBC,CAAuBX,GAElC,OACEY,EAACC,EAAG,CAACC,MAAO,EAAGC,WAAYV,EAAQ,OAAIW,EAAWV,GAAIA,EAAEF,SAAA,EACpDH,GACAgB,EAACC,GACCC,QAASd,EAAQ,UAAY,YAC7Be,KAAK,QACLX,GAAIA,EACJM,WAAYV,EAAQE,EAAWc,QAAQ,SAAML,EAE5CZ,SAAAJ,IAGJE,EACCe,EAACK,EAAQ,CAAAC,MAAOrB,EAASsB,UAAU,MAAMC,WAAYtB,WAClDC,IACO,IAKd,EChESsB,EAAa,EAAG1B,QAAO2B,QAAOC,KAAMC,EAASxB,YACxD,MAAMuB,EAAOC,IAAYxB,EANF,GADL,KAQlB,OACEY,EAAClB,GAAaC,MAAOA,EAAOK,MAAOA,WACjCY,EAACJ,GAAIiB,UAAU,MAAMC,IAAKJ,EAAOK,IAAKhC,EAAOM,GAAI,CAAEQ,MAAOc,EAAMK,OAAQL,MAE1E"}
+{"version":3,"file":"index.js","sources":["../../src/value-content/value-content.tsx","../../src/value-image/value-image.tsx"],"sourcesContent":["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 { ValueContent } from \"../value-content\";\nimport { BaseValueProps } from \"../value-base\";\n\nexport interface ValueImageProps extends BaseValueProps<string> {\n  /**\n   * Image size\n   */\n  size?: number;\n}\n\nconst DefaultSize = 100;\nconst DefaultDenseSize = 50;\n\n/**\n * Displays a image value with a label\n */\nexport const ValueImage = ({ label, value, size: sizeArg, dense }: ValueImageProps) => {\n  const size = sizeArg || (dense ? DefaultDenseSize : DefaultSize);\n  return (\n    <ValueContent label={label} dense={dense}>\n      <Box component=\"img\" src={value} alt={label} sx={{ width: size, height: size }} />\n    </ValueContent>\n  );\n};\n"],"names":["ValueContent","label","hideLabel","tooltip","tooltipEnterDelay","children","dense","sx","typography","useTheme","id","replace","getValueContentLabelId","_jsxs","Box","width","lineHeight","undefined","_jsx","Typography","variant","role","pxToRem","Tooltip","title","placement","enterDelay","ValueImage","value","size","sizeArg","component","src","alt","height"],"mappings":"gNAKO,MA4CMA,EAAe,EAC1BC,QACAC,YACAC,UACAC,oBAAoB,IACpBC,WACAC,QACAC,SAEA,MAAMC,WAAEA,GAAeC,IACjBC,EAtD8B,CAACT,GACrC,SAASA,EAAMU,QAAQ,KAAM,OAqDlBC,CAAuBX,GAElC,OACEY,EAACC,EAAG,CAACC,MAAO,EAAGC,WAAYV,EAAQ,OAAIW,EAAWV,GAAIA,EAAEF,SAAA,EACpDH,GACAgB,EAACC,GACCC,QAASd,EAAQ,UAAY,YAC7Be,KAAK,QACLX,GAAIA,EACJM,WAAYV,EAAQE,EAAWc,QAAQ,SAAML,EAE5CZ,SAAAJ,IAGJE,EACCe,EAACK,EAAQ,CAAAC,MAAOrB,EAASsB,UAAU,MAAMC,WAAYtB,WAClDC,IACO,IAKd,EChESsB,EAAa,EAAG1B,QAAO2B,QAAOC,KAAMC,EAASxB,YACxD,MAAMuB,EAAOC,IAAYxB,EANF,GADL,KAQlB,OACEY,EAAClB,GAAaC,MAAOA,EAAOK,MAAOA,WACjCY,EAACJ,GAAIiB,UAAU,MAAMC,IAAKJ,EAAOK,IAAKhC,EAAOM,GAAI,CAAEQ,MAAOc,EAAMK,OAAQL,MAE1E"}

package/value-image/value-image.d.ts

@@ -1,4 +1,4 @@
-import { BaseValueProps } from "~/value-base";
+import { BaseValueProps } from "../value-base";
 export interface ValueImageProps extends BaseValueProps<string> {
     /**
      * Image size

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/utils/theme.ts","../../../src/value-item/value-item.tsx"],"sourcesContent":["import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import Grid, { GridProps } from \"@mui/material/Grid\";\nimport Box from \"@mui/material/Box\";\nimport { ResponsiveStyleValue } from \"@mui/system\";\nimport { PropsWithChildren, FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"~/utils\";\n\nexport type ValueItemProps = PropsWithChildren<\n  Omit<GridProps, \"item\" | \"container\"> & { bordered?: ResponsiveStyleValue<boolean> }\n>;\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n  root: \"RdsValueItem-root\",\n  content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {\n  const borderStyle = `solid ${color} 1px`;\n  const noBorder = \"none\";\n\n  if (!bordered) {\n    return undefined;\n  }\n\n  if (Array.isArray(bordered)) {\n    return bordered.map((b) => (b ? borderStyle : noBorder));\n  }\n\n  if (typeof bordered === \"object\") {\n    const style: Record<string, string | undefined> = {};\n    Object.entries(bordered).forEach(([key, value]) => {\n      style[key] = value ? borderStyle : noBorder;\n    });\n    return style;\n  }\n\n  return borderStyle;\n};\n\nexport const ValueItem: ValueItemComponent = ({\n  children,\n  bordered = true,\n  ...rest\n}: ValueItemProps) => {\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n  const borderLeft = resolveBorderStyle(bordered, defaultColor);\n  return (\n    <Grid item className={valueItemClasses.root} {...rest}>\n      <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n        {children}\n      </Box>\n    </Grid>\n  );\n};\n"],"names":["valueItemClasses","root","content","children","bordered","rest","borderLeft","color","borderStyle","noBorder","Array","isArray","map","b","style","Object","entries","forEach","key","value","resolveBorderStyle","lightWeight","darkWeight","palette","useTheme","mode","grey","useGetDefaultThemeColor","_jsx","Grid","item","className","Box","px"],"mappings":"2RAIO,MCQMA,EAAmB,CAC9BC,KAAM,oBACNC,QAAS,0CA0BkC,EAC3CC,WACAC,YAAW,KACRC,MAEH,MACMC,EA7BmB,EAACF,EAAyCG,KACnE,MAAMC,EAAc,SAASD,QACvBE,EAAW,OAEjB,GAAKL,EAAL,CAIA,GAAIM,MAAMC,QAAQP,GAChB,OAAOA,EAASQ,KAAKC,GAAOA,EAAIL,EAAcC,IAGhD,GAAwB,iBAAbL,EAAuB,CAChC,MAAMU,EAA4C,CAAA,EAIlD,OAHAC,OAAOC,QAAQZ,GAAUa,SAAQ,EAAEC,EAAKC,MACtCL,EAAMI,GAAOC,EAAQX,EAAcC,CAAQ,IAEtCK,CACR,CAED,OAAON,CAdN,CAciB,EASCY,CAAmBhB,ED1CD,GACrCiB,cAAc,IACdC,aAAa,KACwC,MACrD,MAAMC,QAAEA,GAAYC,EAAAA,WACpB,MAAwB,UAAjBD,EAAQE,KAAmBF,EAAQG,KAAKL,GAAeE,EAAQG,KAAKJ,EAAW,ECoCjEK,CAAwB,CAAEN,YAAa,IAAKC,WAAY,OAE7E,OACEM,MAACC,EAAAA,QAAI,CAACC,MAAK,EAAAC,UAAW/B,EAAiBC,QAAUI,EAAIF,SACnDyB,MAACI,UAAG,CAACD,UAAW/B,EAAiBE,QAAS+B,GAAI,EAAG3B,WAAYA,EAC1DH,SAAAA,KAGL"}
+{"version":3,"file":"index.js","sources":["../../../src/utils/theme.ts","../../../src/value-item/value-item.tsx"],"sourcesContent":["import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import Grid, { GridProps } from \"@mui/material/Grid\";\nimport Box from \"@mui/material/Box\";\nimport { ResponsiveStyleValue } from \"@mui/system\";\nimport { PropsWithChildren, FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils\";\n\nexport type ValueItemProps = PropsWithChildren<\n  Omit<GridProps, \"item\" | \"container\"> & { bordered?: ResponsiveStyleValue<boolean> }\n>;\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n  root: \"RdsValueItem-root\",\n  content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {\n  const borderStyle = `solid ${color} 1px`;\n  const noBorder = \"none\";\n\n  if (!bordered) {\n    return undefined;\n  }\n\n  if (Array.isArray(bordered)) {\n    return bordered.map((b) => (b ? borderStyle : noBorder));\n  }\n\n  if (typeof bordered === \"object\") {\n    const style: Record<string, string | undefined> = {};\n    Object.entries(bordered).forEach(([key, value]) => {\n      style[key] = value ? borderStyle : noBorder;\n    });\n    return style;\n  }\n\n  return borderStyle;\n};\n\nexport const ValueItem: ValueItemComponent = ({\n  children,\n  bordered = true,\n  ...rest\n}: ValueItemProps) => {\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n  const borderLeft = resolveBorderStyle(bordered, defaultColor);\n  return (\n    <Grid item className={valueItemClasses.root} {...rest}>\n      <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n        {children}\n      </Box>\n    </Grid>\n  );\n};\n"],"names":["valueItemClasses","root","content","children","bordered","rest","borderLeft","color","borderStyle","noBorder","Array","isArray","map","b","style","Object","entries","forEach","key","value","resolveBorderStyle","lightWeight","darkWeight","palette","useTheme","mode","grey","useGetDefaultThemeColor","_jsx","Grid","item","className","Box","px"],"mappings":"2RAIO,MCQMA,EAAmB,CAC9BC,KAAM,oBACNC,QAAS,0CA0BkC,EAC3CC,WACAC,YAAW,KACRC,MAEH,MACMC,EA7BmB,EAACF,EAAyCG,KACnE,MAAMC,EAAc,SAASD,QACvBE,EAAW,OAEjB,GAAKL,EAAL,CAIA,GAAIM,MAAMC,QAAQP,GAChB,OAAOA,EAASQ,KAAKC,GAAOA,EAAIL,EAAcC,IAGhD,GAAwB,iBAAbL,EAAuB,CAChC,MAAMU,EAA4C,CAAA,EAIlD,OAHAC,OAAOC,QAAQZ,GAAUa,SAAQ,EAAEC,EAAKC,MACtCL,EAAMI,GAAOC,EAAQX,EAAcC,CAAQ,IAEtCK,CACR,CAED,OAAON,CAdN,CAciB,EASCY,CAAmBhB,ED1CD,GACrCiB,cAAc,IACdC,aAAa,KACwC,MACrD,MAAMC,QAAEA,GAAYC,EAAAA,WACpB,MAAwB,UAAjBD,EAAQE,KAAmBF,EAAQG,KAAKL,GAAeE,EAAQG,KAAKJ,EAAW,ECoCjEK,CAAwB,CAAEN,YAAa,IAAKC,WAAY,OAE7E,OACEM,MAACC,EAAAA,QAAI,CAACC,MAAK,EAAAC,UAAW/B,EAAiBC,QAAUI,EAAIF,SACnDyB,MAACI,UAAG,CAACD,UAAW/B,EAAiBE,QAAS+B,GAAI,EAAG3B,WAAYA,EAC1DH,SAAAA,KAGL"}

package/value-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/utils/theme.ts","../../src/value-item/value-item.tsx"],"sourcesContent":["import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import Grid, { GridProps } from \"@mui/material/Grid\";\nimport Box from \"@mui/material/Box\";\nimport { ResponsiveStyleValue } from \"@mui/system\";\nimport { PropsWithChildren, FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"~/utils\";\n\nexport type ValueItemProps = PropsWithChildren<\n  Omit<GridProps, \"item\" | \"container\"> & { bordered?: ResponsiveStyleValue<boolean> }\n>;\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n  root: \"RdsValueItem-root\",\n  content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {\n  const borderStyle = `solid ${color} 1px`;\n  const noBorder = \"none\";\n\n  if (!bordered) {\n    return undefined;\n  }\n\n  if (Array.isArray(bordered)) {\n    return bordered.map((b) => (b ? borderStyle : noBorder));\n  }\n\n  if (typeof bordered === \"object\") {\n    const style: Record<string, string | undefined> = {};\n    Object.entries(bordered).forEach(([key, value]) => {\n      style[key] = value ? borderStyle : noBorder;\n    });\n    return style;\n  }\n\n  return borderStyle;\n};\n\nexport const ValueItem: ValueItemComponent = ({\n  children,\n  bordered = true,\n  ...rest\n}: ValueItemProps) => {\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n  const borderLeft = resolveBorderStyle(bordered, defaultColor);\n  return (\n    <Grid item className={valueItemClasses.root} {...rest}>\n      <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n        {children}\n      </Box>\n    </Grid>\n  );\n};\n"],"names":["valueItemClasses","root","content","ValueItem","children","bordered","rest","borderLeft","color","borderStyle","noBorder","Array","isArray","map","b","style","Object","entries","forEach","key","value","resolveBorderStyle","lightWeight","darkWeight","palette","useTheme","mode","grey","useGetDefaultThemeColor","_jsx","Grid","item","className","Box","px"],"mappings":"oJAIO,MCQMA,EAAmB,CAC9BC,KAAM,oBACNC,QAAS,wBA0BEC,EAAgC,EAC3CC,WACAC,YAAW,KACRC,MAEH,MACMC,EA7BmB,EAACF,EAAyCG,KACnE,MAAMC,EAAc,SAASD,QACvBE,EAAW,OAEjB,GAAKL,EAAL,CAIA,GAAIM,MAAMC,QAAQP,GAChB,OAAOA,EAASQ,KAAKC,GAAOA,EAAIL,EAAcC,IAGhD,GAAwB,iBAAbL,EAAuB,CAChC,MAAMU,EAA4C,CAAA,EAIlD,OAHAC,OAAOC,QAAQZ,GAAUa,SAAQ,EAAEC,EAAKC,MACtCL,EAAMI,GAAOC,EAAQX,EAAcC,CAAQ,IAEtCK,CACR,CAED,OAAON,CAdN,CAciB,EASCY,CAAmBhB,ED1CD,GACrCiB,cAAc,IACdC,aAAa,KACwC,MACrD,MAAMC,QAAEA,GAAYC,IACpB,MAAwB,UAAjBD,EAAQE,KAAmBF,EAAQG,KAAKL,GAAeE,EAAQG,KAAKJ,EAAW,ECoCjEK,CAAwB,CAAEN,YAAa,IAAKC,WAAY,OAE7E,OACEM,EAACC,EAAI,CAACC,MAAK,EAAAC,UAAWhC,EAAiBC,QAAUK,EAAIF,SACnDyB,EAACI,EAAG,CAACD,UAAWhC,EAAiBE,QAASgC,GAAI,EAAG3B,WAAYA,EAC1DH,SAAAA,KAGL"}
+{"version":3,"file":"index.js","sources":["../../src/utils/theme.ts","../../src/value-item/value-item.tsx"],"sourcesContent":["import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import Grid, { GridProps } from \"@mui/material/Grid\";\nimport Box from \"@mui/material/Box\";\nimport { ResponsiveStyleValue } from \"@mui/system\";\nimport { PropsWithChildren, FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils\";\n\nexport type ValueItemProps = PropsWithChildren<\n  Omit<GridProps, \"item\" | \"container\"> & { bordered?: ResponsiveStyleValue<boolean> }\n>;\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n  root: \"RdsValueItem-root\",\n  content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {\n  const borderStyle = `solid ${color} 1px`;\n  const noBorder = \"none\";\n\n  if (!bordered) {\n    return undefined;\n  }\n\n  if (Array.isArray(bordered)) {\n    return bordered.map((b) => (b ? borderStyle : noBorder));\n  }\n\n  if (typeof bordered === \"object\") {\n    const style: Record<string, string | undefined> = {};\n    Object.entries(bordered).forEach(([key, value]) => {\n      style[key] = value ? borderStyle : noBorder;\n    });\n    return style;\n  }\n\n  return borderStyle;\n};\n\nexport const ValueItem: ValueItemComponent = ({\n  children,\n  bordered = true,\n  ...rest\n}: ValueItemProps) => {\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n  const borderLeft = resolveBorderStyle(bordered, defaultColor);\n  return (\n    <Grid item className={valueItemClasses.root} {...rest}>\n      <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n        {children}\n      </Box>\n    </Grid>\n  );\n};\n"],"names":["valueItemClasses","root","content","ValueItem","children","bordered","rest","borderLeft","color","borderStyle","noBorder","Array","isArray","map","b","style","Object","entries","forEach","key","value","resolveBorderStyle","lightWeight","darkWeight","palette","useTheme","mode","grey","useGetDefaultThemeColor","_jsx","Grid","item","className","Box","px"],"mappings":"oJAIO,MCQMA,EAAmB,CAC9BC,KAAM,oBACNC,QAAS,wBA0BEC,EAAgC,EAC3CC,WACAC,YAAW,KACRC,MAEH,MACMC,EA7BmB,EAACF,EAAyCG,KACnE,MAAMC,EAAc,SAASD,QACvBE,EAAW,OAEjB,GAAKL,EAAL,CAIA,GAAIM,MAAMC,QAAQP,GAChB,OAAOA,EAASQ,KAAKC,GAAOA,EAAIL,EAAcC,IAGhD,GAAwB,iBAAbL,EAAuB,CAChC,MAAMU,EAA4C,CAAA,EAIlD,OAHAC,OAAOC,QAAQZ,GAAUa,SAAQ,EAAEC,EAAKC,MACtCL,EAAMI,GAAOC,EAAQX,EAAcC,CAAQ,IAEtCK,CACR,CAED,OAAON,CAdN,CAciB,EASCY,CAAmBhB,ED1CD,GACrCiB,cAAc,IACdC,aAAa,KACwC,MACrD,MAAMC,QAAEA,GAAYC,IACpB,MAAwB,UAAjBD,EAAQE,KAAmBF,EAAQG,KAAKL,GAAeE,EAAQG,KAAKJ,EAAW,ECoCjEK,CAAwB,CAAEN,YAAa,IAAKC,WAAY,OAE7E,OACEM,EAACC,EAAI,CAACC,MAAK,EAAAC,UAAWhC,EAAiBC,QAAUK,EAAIF,SACnDyB,EAACI,EAAG,CAACD,UAAWhC,EAAiBE,QAASgC,GAAI,EAAG3B,WAAYA,EAC1DH,SAAAA,KAGL"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/value-base/value-displays.types.ts","../../../src/value-content/value-content.tsx","../../../src/label/label.tsx","../../../src/value-label/value-label.tsx"],"sourcesContent":["export interface BaseValueProps<T> {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * Value displayed\n   */\n  value?: T;\n\n  /**\n   * String rendered if value is undefined\n   */\n  placeholder?: string;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n  /**\n   * This field can be edited or not\n   */\n  editable?: boolean;\n\n  /**\n   * Callback executed when the value is edited\n   */\n  onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n","import { 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 { SxProps, Theme, useTheme } from \"@mui/material/styles\";\n\nexport type LabelVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"default\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport const labelClasses = {\n  root: \"RdsLabel-root\",\n};\n\nexport interface LabelProps {\n  /**\n   * Content of the component\n   */\n  text: string;\n  /**\n   * Color palette used to draw the component\n   */\n  variant?: LabelVariant;\n\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n\n  /**\n   * Show the text as uppercase\n   */\n  textTransform?: \"none\" | \"capitalize\" | \"uppercase\";\n}\n\n/**\n * Compact element to represent a text\n */\nexport const Label = ({\n  text,\n  variant = \"default\",\n  textTransform = \"capitalize\",\n  sx,\n}: LabelProps) => {\n  const { palette, typography } = useTheme();\n\n  const backgroundColor: Record<LabelVariant, string> = {\n    default: palette.mode === \"light\" ? palette.grey[100] : palette.grey[900],\n    primary: palette.primary.light,\n    secondary: palette.secondary.light,\n    info: palette.info.light,\n    warning: palette.warning.light,\n    error: palette.error.light,\n    success: palette.success.light,\n  };\n\n  const textColor: Record<LabelVariant, string> = {\n    default: palette.getContrastText(backgroundColor.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    info: palette.info.contrastText,\n    warning: palette.warning.contrastText,\n    error: palette.error.contrastText,\n    success: palette.success.contrastText,\n  };\n\n  return (\n    <Box\n      height={24}\n      minWidth={22}\n      display=\"inline-flex\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bgcolor={backgroundColor[variant]}\n      color={textColor[variant]}\n      fontSize={typography.caption.fontSize}\n      fontWeight={typography.fontWeightBold}\n      lineHeight={0}\n      textTransform={textTransform}\n      whiteSpace=\"nowrap\"\n      borderRadius={2}\n      role=\"label\"\n      aria-label={`${text} ${variant} label`}\n      py={0}\n      px={1}\n      sx={{ cursor: \"default\", ...sx }}\n    >\n      {text}\n    </Box>\n  );\n};\n","import { BaseValueProps, DefaultPlaceholder } from \"~/value-base\";\nimport { getValueContentLabelId, ValueContent } from \"~/value-content\";\nimport { Label, LabelVariant } from \"~/label\";\nimport Grid from \"@mui/material/Grid\";\n\nexport type ValueLabelProps = BaseValueProps<string | number | string[] | number[]> & {\n  variant: LabelVariant | LabelVariant[];\n};\n\n/**\n * Displays a label component value with a label\n */\nexport const ValueLabel = ({\n  label,\n  value: valueProp,\n  placeholder = DefaultPlaceholder,\n  variant,\n}: ValueLabelProps) => {\n  const id = getValueContentLabelId(label);\n  let value;\n\n  Array.isArray(valueProp)\n    ? (value = valueProp.map((value, i) => (\n        <Label\n          text={value.toString() || placeholder}\n          variant={Array.isArray(variant) ? variant[i] : variant}\n          key={i}\n        />\n      )))\n    : (value = (\n        <Label\n          text={valueProp?.toString() || placeholder}\n          variant={Array.isArray(variant) ? variant[0] : variant}\n        />\n      ));\n\n  return (\n    <ValueContent label={label}>\n      <Grid container gap={1} aria-labelledby={id}>\n        {value}\n      </Grid>\n    </ValueContent>\n  );\n};\n"],"names":["getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","children","dense","sx","typography","useTheme","id","_jsxs","Box","width","lineHeight","undefined","_jsx","Typography","variant","role","pxToRem","jsx","Tooltip","title","placement","enterDelay","Label","text","textTransform","palette","backgroundColor","default","mode","grey","primary","light","secondary","info","warning","error","success","textColor","getContrastText","contrastText","height","minWidth","display","justifyContent","alignItems","bgcolor","color","fontSize","caption","fontWeight","fontWeightBold","whiteSpace","borderRadius","py","px","cursor","value","valueProp","placeholder","Array","isArray","map","i","toString","Grid","container","gap"],"mappings":"4mBAmCO,MC9BMA,EAA0BC,GACrC,SAASA,EAAMC,QAAQ,KAAM,OA2ClBC,EAAe,EAC1BF,QACAG,YACAC,UACAC,oBAAoB,IACpBC,WACAC,QACAC,SAEA,MAAMC,WAAEA,GAAeC,EAAAA,WACjBC,EAAKZ,EAAuBC,GAElC,OACEY,OAACC,EAAAA,QAAG,CAACC,MAAO,EAAGC,WAAYR,EAAQ,OAAIS,EAAWR,GAAIA,EAAEF,SAAA,EACpDH,GACAc,EAAAA,IAACC,EAAU,SACTC,QAASZ,EAAQ,UAAY,YAC7Ba,KAAK,QACLT,GAAIA,EACJI,WAAYR,EAAQE,EAAWY,QAAQ,SAAML,EAE5CV,SAAAN,IAGJI,EACCa,EAAAK,IAACC,EAAO,QAAC,CAAAC,MAAOpB,EAASqB,UAAU,MAAMC,WAAYrB,WAClDC,IACO,IAKd,ECzCSqB,EAAQ,EACnBC,OACAT,UAAU,UACVU,gBAAgB,aAChBrB,SAEA,MAAMsB,QAAEA,EAAOrB,WAAEA,GAAeC,EAAQA,WAElCqB,EAAgD,CACpDC,QAA0B,UAAjBF,EAAQG,KAAmBH,EAAQI,KAAK,KAAOJ,EAAQI,KAAK,KACrEC,QAASL,EAAQK,QAAQC,MACzBC,UAAWP,EAAQO,UAAUD,MAC7BE,KAAMR,EAAQQ,KAAKF,MACnBG,QAAST,EAAQS,QAAQH,MACzBI,MAAOV,EAAQU,MAAMJ,MACrBK,QAASX,EAAQW,QAAQL,OAGrBM,EAA0C,CAC9CV,QAASF,EAAQa,gBAAgBZ,EAAgBC,SACjDG,QAASL,EAAQK,QAAQS,aACzBP,UAAWP,EAAQO,UAAUO,aAC7BN,KAAMR,EAAQQ,KAAKM,aACnBL,QAAST,EAAQS,QAAQK,aACzBJ,MAAOV,EAAQU,MAAMI,aACrBH,QAASX,EAAQW,QAAQG,cAG3B,OACE3B,MAACJ,EAAG,QAAA,CACFgC,OAAQ,GACRC,SAAU,GACVC,QAAQ,cACRC,eAAe,SACfC,WAAW,SACXC,QAASnB,EAAgBZ,GACzBgC,MAAOT,EAAUvB,GACjBiC,SAAU3C,EAAW4C,QAAQD,SAC7BE,WAAY7C,EAAW8C,eACvBxC,WAAY,EACZc,cAAeA,EACf2B,WAAW,SACXC,aAAc,EACdrC,KAAK,QAAO,aACA,GAAGQ,KAAQT,UACvBuC,GAAI,EACJC,GAAI,EACJnD,GAAI,CAAEoD,OAAQ,aAAcpD,GAE3BF,SAAAsB,GAEH,qBC/EsB,EACxB5B,QACA6D,MAAOC,EACPC,cHoBgC,IGnBhC5C,cAEA,MAAMR,EAAKZ,EAAuBC,GAClC,IAAI6D,EAiBJ,OAdKA,EADLG,MAAMC,QAAQH,GACDA,EAAUI,KAAI,CAACL,EAAOM,IAC7BlD,EAAAK,IAACK,EAAK,CACJC,KAAMiC,EAAMO,YAAcL,EAC1B5C,QAAS6C,MAAMC,QAAQ9C,GAAWA,EAAQgD,GAAKhD,GAC1CgD,KAIPlD,MAACU,EAAK,CACJC,KAAMkC,GAAWM,YAAcL,EAC/B5C,QAAS6C,MAAMC,QAAQ9C,GAAWA,EAAQ,GAAKA,IAKrDF,MAACf,EAAY,CAACF,MAAOA,EACnBM,SAAAW,EAAAA,IAACoD,EAAAA,QAAI,CAACC,WAAU,EAAAC,IAAK,EAAoB,kBAAA5D,WACtCkD,KAGL"}
+{"version":3,"file":"index.js","sources":["../../../src/value-base/value-displays.types.ts","../../../src/value-content/value-content.tsx","../../../src/label/label.tsx","../../../src/value-label/value-label.tsx"],"sourcesContent":["export interface BaseValueProps<T> {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * Value displayed\n   */\n  value?: T;\n\n  /**\n   * String rendered if value is undefined\n   */\n  placeholder?: string;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n  /**\n   * This field can be edited or not\n   */\n  editable?: boolean;\n\n  /**\n   * Callback executed when the value is edited\n   */\n  onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n","import { 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 { SxProps, Theme, useTheme } from \"@mui/material/styles\";\n\nexport type LabelVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"default\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport const labelClasses = {\n  root: \"RdsLabel-root\",\n};\n\nexport interface LabelProps {\n  /**\n   * Content of the component\n   */\n  text: string;\n  /**\n   * Color palette used to draw the component\n   */\n  variant?: LabelVariant;\n\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n\n  /**\n   * Show the text as uppercase\n   */\n  textTransform?: \"none\" | \"capitalize\" | \"uppercase\";\n}\n\n/**\n * Compact element to represent a text\n */\nexport const Label = ({\n  text,\n  variant = \"default\",\n  textTransform = \"capitalize\",\n  sx,\n}: LabelProps) => {\n  const { palette, typography } = useTheme();\n\n  const backgroundColor: Record<LabelVariant, string> = {\n    default: palette.mode === \"light\" ? palette.grey[100] : palette.grey[900],\n    primary: palette.primary.light,\n    secondary: palette.secondary.light,\n    info: palette.info.light,\n    warning: palette.warning.light,\n    error: palette.error.light,\n    success: palette.success.light,\n  };\n\n  const textColor: Record<LabelVariant, string> = {\n    default: palette.getContrastText(backgroundColor.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    info: palette.info.contrastText,\n    warning: palette.warning.contrastText,\n    error: palette.error.contrastText,\n    success: palette.success.contrastText,\n  };\n\n  return (\n    <Box\n      height={24}\n      minWidth={22}\n      display=\"inline-flex\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bgcolor={backgroundColor[variant]}\n      color={textColor[variant]}\n      fontSize={typography.caption.fontSize}\n      fontWeight={typography.fontWeightBold}\n      lineHeight={0}\n      textTransform={textTransform}\n      whiteSpace=\"nowrap\"\n      borderRadius={2}\n      role=\"label\"\n      aria-label={`${text} ${variant} label`}\n      py={0}\n      px={1}\n      sx={{ cursor: \"default\", ...sx }}\n    >\n      {text}\n    </Box>\n  );\n};\n","import { BaseValueProps, DefaultPlaceholder } from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\nimport { Label, LabelVariant } from \"../label\";\nimport Grid from \"@mui/material/Grid\";\n\nexport type ValueLabelProps = BaseValueProps<string | number | string[] | number[]> & {\n  variant: LabelVariant | LabelVariant[];\n};\n\n/**\n * Displays a label component value with a label\n */\nexport const ValueLabel = ({\n  label,\n  value: valueProp,\n  placeholder = DefaultPlaceholder,\n  variant,\n}: ValueLabelProps) => {\n  const id = getValueContentLabelId(label);\n  let value;\n\n  Array.isArray(valueProp)\n    ? (value = valueProp.map((value, i) => (\n        <Label\n          text={value.toString() || placeholder}\n          variant={Array.isArray(variant) ? variant[i] : variant}\n          key={i}\n        />\n      )))\n    : (value = (\n        <Label\n          text={valueProp?.toString() || placeholder}\n          variant={Array.isArray(variant) ? variant[0] : variant}\n        />\n      ));\n\n  return (\n    <ValueContent label={label}>\n      <Grid container gap={1} aria-labelledby={id}>\n        {value}\n      </Grid>\n    </ValueContent>\n  );\n};\n"],"names":["getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","children","dense","sx","typography","useTheme","id","_jsxs","Box","width","lineHeight","undefined","_jsx","Typography","variant","role","pxToRem","jsx","Tooltip","title","placement","enterDelay","Label","text","textTransform","palette","backgroundColor","default","mode","grey","primary","light","secondary","info","warning","error","success","textColor","getContrastText","contrastText","height","minWidth","display","justifyContent","alignItems","bgcolor","color","fontSize","caption","fontWeight","fontWeightBold","whiteSpace","borderRadius","py","px","cursor","value","valueProp","placeholder","Array","isArray","map","i","toString","Grid","container","gap"],"mappings":"4mBAmCO,MC9BMA,EAA0BC,GACrC,SAASA,EAAMC,QAAQ,KAAM,OA2ClBC,EAAe,EAC1BF,QACAG,YACAC,UACAC,oBAAoB,IACpBC,WACAC,QACAC,SAEA,MAAMC,WAAEA,GAAeC,EAAAA,WACjBC,EAAKZ,EAAuBC,GAElC,OACEY,OAACC,EAAAA,QAAG,CAACC,MAAO,EAAGC,WAAYR,EAAQ,OAAIS,EAAWR,GAAIA,EAAEF,SAAA,EACpDH,GACAc,EAAAA,IAACC,EAAU,SACTC,QAASZ,EAAQ,UAAY,YAC7Ba,KAAK,QACLT,GAAIA,EACJI,WAAYR,EAAQE,EAAWY,QAAQ,SAAML,EAE5CV,SAAAN,IAGJI,EACCa,EAAAK,IAACC,EAAO,QAAC,CAAAC,MAAOpB,EAASqB,UAAU,MAAMC,WAAYrB,WAClDC,IACO,IAKd,ECzCSqB,EAAQ,EACnBC,OACAT,UAAU,UACVU,gBAAgB,aAChBrB,SAEA,MAAMsB,QAAEA,EAAOrB,WAAEA,GAAeC,EAAQA,WAElCqB,EAAgD,CACpDC,QAA0B,UAAjBF,EAAQG,KAAmBH,EAAQI,KAAK,KAAOJ,EAAQI,KAAK,KACrEC,QAASL,EAAQK,QAAQC,MACzBC,UAAWP,EAAQO,UAAUD,MAC7BE,KAAMR,EAAQQ,KAAKF,MACnBG,QAAST,EAAQS,QAAQH,MACzBI,MAAOV,EAAQU,MAAMJ,MACrBK,QAASX,EAAQW,QAAQL,OAGrBM,EAA0C,CAC9CV,QAASF,EAAQa,gBAAgBZ,EAAgBC,SACjDG,QAASL,EAAQK,QAAQS,aACzBP,UAAWP,EAAQO,UAAUO,aAC7BN,KAAMR,EAAQQ,KAAKM,aACnBL,QAAST,EAAQS,QAAQK,aACzBJ,MAAOV,EAAQU,MAAMI,aACrBH,QAASX,EAAQW,QAAQG,cAG3B,OACE3B,MAACJ,EAAG,QAAA,CACFgC,OAAQ,GACRC,SAAU,GACVC,QAAQ,cACRC,eAAe,SACfC,WAAW,SACXC,QAASnB,EAAgBZ,GACzBgC,MAAOT,EAAUvB,GACjBiC,SAAU3C,EAAW4C,QAAQD,SAC7BE,WAAY7C,EAAW8C,eACvBxC,WAAY,EACZc,cAAeA,EACf2B,WAAW,SACXC,aAAc,EACdrC,KAAK,QAAO,aACA,GAAGQ,KAAQT,UACvBuC,GAAI,EACJC,GAAI,EACJnD,GAAI,CAAEoD,OAAQ,aAAcpD,GAE3BF,SAAAsB,GAEH,qBC/EsB,EACxB5B,QACA6D,MAAOC,EACPC,cHoBgC,IGnBhC5C,cAEA,MAAMR,EAAKZ,EAAuBC,GAClC,IAAI6D,EAiBJ,OAdKA,EADLG,MAAMC,QAAQH,GACDA,EAAUI,KAAI,CAACL,EAAOM,IAC7BlD,EAAAK,IAACK,EAAK,CACJC,KAAMiC,EAAMO,YAAcL,EAC1B5C,QAAS6C,MAAMC,QAAQ9C,GAAWA,EAAQgD,GAAKhD,GAC1CgD,KAIPlD,MAACU,EAAK,CACJC,KAAMkC,GAAWM,YAAcL,EAC/B5C,QAAS6C,MAAMC,QAAQ9C,GAAWA,EAAQ,GAAKA,IAKrDF,MAACf,EAAY,CAACF,MAAOA,EACnBM,SAAAW,EAAAA,IAACoD,EAAAA,QAAI,CAACC,WAAU,EAAAC,IAAK,EAAoB,kBAAA5D,WACtCkD,KAGL"}

package/value-label/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/value-base/value-displays.types.ts","../../src/value-content/value-content.tsx","../../src/label/label.tsx","../../src/value-label/value-label.tsx"],"sourcesContent":["export interface BaseValueProps<T> {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * Value displayed\n   */\n  value?: T;\n\n  /**\n   * String rendered if value is undefined\n   */\n  placeholder?: string;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n  /**\n   * This field can be edited or not\n   */\n  editable?: boolean;\n\n  /**\n   * Callback executed when the value is edited\n   */\n  onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n","import { 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 { SxProps, Theme, useTheme } from \"@mui/material/styles\";\n\nexport type LabelVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"default\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport const labelClasses = {\n  root: \"RdsLabel-root\",\n};\n\nexport interface LabelProps {\n  /**\n   * Content of the component\n   */\n  text: string;\n  /**\n   * Color palette used to draw the component\n   */\n  variant?: LabelVariant;\n\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n\n  /**\n   * Show the text as uppercase\n   */\n  textTransform?: \"none\" | \"capitalize\" | \"uppercase\";\n}\n\n/**\n * Compact element to represent a text\n */\nexport const Label = ({\n  text,\n  variant = \"default\",\n  textTransform = \"capitalize\",\n  sx,\n}: LabelProps) => {\n  const { palette, typography } = useTheme();\n\n  const backgroundColor: Record<LabelVariant, string> = {\n    default: palette.mode === \"light\" ? palette.grey[100] : palette.grey[900],\n    primary: palette.primary.light,\n    secondary: palette.secondary.light,\n    info: palette.info.light,\n    warning: palette.warning.light,\n    error: palette.error.light,\n    success: palette.success.light,\n  };\n\n  const textColor: Record<LabelVariant, string> = {\n    default: palette.getContrastText(backgroundColor.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    info: palette.info.contrastText,\n    warning: palette.warning.contrastText,\n    error: palette.error.contrastText,\n    success: palette.success.contrastText,\n  };\n\n  return (\n    <Box\n      height={24}\n      minWidth={22}\n      display=\"inline-flex\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bgcolor={backgroundColor[variant]}\n      color={textColor[variant]}\n      fontSize={typography.caption.fontSize}\n      fontWeight={typography.fontWeightBold}\n      lineHeight={0}\n      textTransform={textTransform}\n      whiteSpace=\"nowrap\"\n      borderRadius={2}\n      role=\"label\"\n      aria-label={`${text} ${variant} label`}\n      py={0}\n      px={1}\n      sx={{ cursor: \"default\", ...sx }}\n    >\n      {text}\n    </Box>\n  );\n};\n","import { BaseValueProps, DefaultPlaceholder } from \"~/value-base\";\nimport { getValueContentLabelId, ValueContent } from \"~/value-content\";\nimport { Label, LabelVariant } from \"~/label\";\nimport Grid from \"@mui/material/Grid\";\n\nexport type ValueLabelProps = BaseValueProps<string | number | string[] | number[]> & {\n  variant: LabelVariant | LabelVariant[];\n};\n\n/**\n * Displays a label component value with a label\n */\nexport const ValueLabel = ({\n  label,\n  value: valueProp,\n  placeholder = DefaultPlaceholder,\n  variant,\n}: ValueLabelProps) => {\n  const id = getValueContentLabelId(label);\n  let value;\n\n  Array.isArray(valueProp)\n    ? (value = valueProp.map((value, i) => (\n        <Label\n          text={value.toString() || placeholder}\n          variant={Array.isArray(variant) ? variant[i] : variant}\n          key={i}\n        />\n      )))\n    : (value = (\n        <Label\n          text={valueProp?.toString() || placeholder}\n          variant={Array.isArray(variant) ? variant[0] : variant}\n        />\n      ));\n\n  return (\n    <ValueContent label={label}>\n      <Grid container gap={1} aria-labelledby={id}>\n        {value}\n      </Grid>\n    </ValueContent>\n  );\n};\n"],"names":["getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","children","dense","sx","typography","useTheme","id","_jsxs","Box","width","lineHeight","undefined","_jsx","Typography","variant","role","pxToRem","Tooltip","title","placement","enterDelay","Label","text","textTransform","palette","backgroundColor","default","mode","grey","primary","light","secondary","info","warning","error","success","textColor","getContrastText","contrastText","height","minWidth","display","justifyContent","alignItems","bgcolor","color","fontSize","caption","fontWeight","fontWeightBold","whiteSpace","borderRadius","py","px","cursor","ValueLabel","value","valueProp","placeholder","Array","isArray","map","i","toString","Grid","container","gap"],"mappings":"wcAmCO,MC9BMA,EAA0BC,GACrC,SAASA,EAAMC,QAAQ,KAAM,OA2ClBC,EAAe,EAC1BF,QACAG,YACAC,UACAC,oBAAoB,IACpBC,WACAC,QACAC,SAEA,MAAMC,WAAEA,GAAeC,IACjBC,EAAKZ,EAAuBC,GAElC,OACEY,EAACC,EAAG,CAACC,MAAO,EAAGC,WAAYR,EAAQ,OAAIS,EAAWR,GAAIA,EAAEF,SAAA,EACpDH,GACAc,EAACC,GACCC,QAASZ,EAAQ,UAAY,YAC7Ba,KAAK,QACLT,GAAIA,EACJI,WAAYR,EAAQE,EAAWY,QAAQ,SAAML,EAE5CV,SAAAN,IAGJI,EACCa,EAACK,EAAQ,CAAAC,MAAOnB,EAASoB,UAAU,MAAMC,WAAYpB,WAClDC,IACO,IAKd,ECzCSoB,EAAQ,EACnBC,OACAR,UAAU,UACVS,gBAAgB,aAChBpB,SAEA,MAAMqB,QAAEA,EAAOpB,WAAEA,GAAeC,IAE1BoB,EAAgD,CACpDC,QAA0B,UAAjBF,EAAQG,KAAmBH,EAAQI,KAAK,KAAOJ,EAAQI,KAAK,KACrEC,QAASL,EAAQK,QAAQC,MACzBC,UAAWP,EAAQO,UAAUD,MAC7BE,KAAMR,EAAQQ,KAAKF,MACnBG,QAAST,EAAQS,QAAQH,MACzBI,MAAOV,EAAQU,MAAMJ,MACrBK,QAASX,EAAQW,QAAQL,OAGrBM,EAA0C,CAC9CV,QAASF,EAAQa,gBAAgBZ,EAAgBC,SACjDG,QAASL,EAAQK,QAAQS,aACzBP,UAAWP,EAAQO,UAAUO,aAC7BN,KAAMR,EAAQQ,KAAKM,aACnBL,QAAST,EAAQS,QAAQK,aACzBJ,MAAOV,EAAQU,MAAMI,aACrBH,QAASX,EAAQW,QAAQG,cAG3B,OACE1B,EAACJ,EAAG,CACF+B,OAAQ,GACRC,SAAU,GACVC,QAAQ,cACRC,eAAe,SACfC,WAAW,SACXC,QAASnB,EAAgBX,GACzB+B,MAAOT,EAAUtB,GACjBgC,SAAU1C,EAAW2C,QAAQD,SAC7BE,WAAY5C,EAAW6C,eACvBvC,WAAY,EACZa,cAAeA,EACf2B,WAAW,SACXC,aAAc,EACdpC,KAAK,QAAO,aACA,GAAGO,KAAQR,UACvBsC,GAAI,EACJC,GAAI,EACJlD,GAAI,CAAEmD,OAAQ,aAAcnD,GAE3BF,SAAAqB,GAEH,EC/ESiC,EAAa,EACxB5D,QACA6D,MAAOC,EACPC,cHoBgC,IGnBhC5C,cAEA,MAAMR,EAAKZ,EAAuBC,GAClC,IAAI6D,EAiBJ,OAdKA,EADLG,MAAMC,QAAQH,GACDA,EAAUI,KAAI,CAACL,EAAOM,IAC7BlD,EAACS,EAAK,CACJC,KAAMkC,EAAMO,YAAcL,EAC1B5C,QAAS6C,MAAMC,QAAQ9C,GAAWA,EAAQgD,GAAKhD,GAC1CgD,KAIPlD,EAACS,EAAK,CACJC,KAAMmC,GAAWM,YAAcL,EAC/B5C,QAAS6C,MAAMC,QAAQ9C,GAAWA,EAAQ,GAAKA,IAKrDF,EAACf,EAAY,CAACF,MAAOA,EACnBM,SAAAW,EAACoD,EAAI,CAACC,WAAU,EAAAC,IAAK,EAAoB,kBAAA5D,WACtCkD,KAGL"}
+{"version":3,"file":"index.js","sources":["../../src/value-base/value-displays.types.ts","../../src/value-content/value-content.tsx","../../src/label/label.tsx","../../src/value-label/value-label.tsx"],"sourcesContent":["export interface BaseValueProps<T> {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * Value displayed\n   */\n  value?: T;\n\n  /**\n   * String rendered if value is undefined\n   */\n  placeholder?: string;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n  /**\n   * This field can be edited or not\n   */\n  editable?: boolean;\n\n  /**\n   * Callback executed when the value is edited\n   */\n  onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n","import { 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 { SxProps, Theme, useTheme } from \"@mui/material/styles\";\n\nexport type LabelVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"default\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport const labelClasses = {\n  root: \"RdsLabel-root\",\n};\n\nexport interface LabelProps {\n  /**\n   * Content of the component\n   */\n  text: string;\n  /**\n   * Color palette used to draw the component\n   */\n  variant?: LabelVariant;\n\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n\n  /**\n   * Show the text as uppercase\n   */\n  textTransform?: \"none\" | \"capitalize\" | \"uppercase\";\n}\n\n/**\n * Compact element to represent a text\n */\nexport const Label = ({\n  text,\n  variant = \"default\",\n  textTransform = \"capitalize\",\n  sx,\n}: LabelProps) => {\n  const { palette, typography } = useTheme();\n\n  const backgroundColor: Record<LabelVariant, string> = {\n    default: palette.mode === \"light\" ? palette.grey[100] : palette.grey[900],\n    primary: palette.primary.light,\n    secondary: palette.secondary.light,\n    info: palette.info.light,\n    warning: palette.warning.light,\n    error: palette.error.light,\n    success: palette.success.light,\n  };\n\n  const textColor: Record<LabelVariant, string> = {\n    default: palette.getContrastText(backgroundColor.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    info: palette.info.contrastText,\n    warning: palette.warning.contrastText,\n    error: palette.error.contrastText,\n    success: palette.success.contrastText,\n  };\n\n  return (\n    <Box\n      height={24}\n      minWidth={22}\n      display=\"inline-flex\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bgcolor={backgroundColor[variant]}\n      color={textColor[variant]}\n      fontSize={typography.caption.fontSize}\n      fontWeight={typography.fontWeightBold}\n      lineHeight={0}\n      textTransform={textTransform}\n      whiteSpace=\"nowrap\"\n      borderRadius={2}\n      role=\"label\"\n      aria-label={`${text} ${variant} label`}\n      py={0}\n      px={1}\n      sx={{ cursor: \"default\", ...sx }}\n    >\n      {text}\n    </Box>\n  );\n};\n","import { BaseValueProps, DefaultPlaceholder } from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\nimport { Label, LabelVariant } from \"../label\";\nimport Grid from \"@mui/material/Grid\";\n\nexport type ValueLabelProps = BaseValueProps<string | number | string[] | number[]> & {\n  variant: LabelVariant | LabelVariant[];\n};\n\n/**\n * Displays a label component value with a label\n */\nexport const ValueLabel = ({\n  label,\n  value: valueProp,\n  placeholder = DefaultPlaceholder,\n  variant,\n}: ValueLabelProps) => {\n  const id = getValueContentLabelId(label);\n  let value;\n\n  Array.isArray(valueProp)\n    ? (value = valueProp.map((value, i) => (\n        <Label\n          text={value.toString() || placeholder}\n          variant={Array.isArray(variant) ? variant[i] : variant}\n          key={i}\n        />\n      )))\n    : (value = (\n        <Label\n          text={valueProp?.toString() || placeholder}\n          variant={Array.isArray(variant) ? variant[0] : variant}\n        />\n      ));\n\n  return (\n    <ValueContent label={label}>\n      <Grid container gap={1} aria-labelledby={id}>\n        {value}\n      </Grid>\n    </ValueContent>\n  );\n};\n"],"names":["getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","children","dense","sx","typography","useTheme","id","_jsxs","Box","width","lineHeight","undefined","_jsx","Typography","variant","role","pxToRem","Tooltip","title","placement","enterDelay","Label","text","textTransform","palette","backgroundColor","default","mode","grey","primary","light","secondary","info","warning","error","success","textColor","getContrastText","contrastText","height","minWidth","display","justifyContent","alignItems","bgcolor","color","fontSize","caption","fontWeight","fontWeightBold","whiteSpace","borderRadius","py","px","cursor","ValueLabel","value","valueProp","placeholder","Array","isArray","map","i","toString","Grid","container","gap"],"mappings":"wcAmCO,MC9BMA,EAA0BC,GACrC,SAASA,EAAMC,QAAQ,KAAM,OA2ClBC,EAAe,EAC1BF,QACAG,YACAC,UACAC,oBAAoB,IACpBC,WACAC,QACAC,SAEA,MAAMC,WAAEA,GAAeC,IACjBC,EAAKZ,EAAuBC,GAElC,OACEY,EAACC,EAAG,CAACC,MAAO,EAAGC,WAAYR,EAAQ,OAAIS,EAAWR,GAAIA,EAAEF,SAAA,EACpDH,GACAc,EAACC,GACCC,QAASZ,EAAQ,UAAY,YAC7Ba,KAAK,QACLT,GAAIA,EACJI,WAAYR,EAAQE,EAAWY,QAAQ,SAAML,EAE5CV,SAAAN,IAGJI,EACCa,EAACK,EAAQ,CAAAC,MAAOnB,EAASoB,UAAU,MAAMC,WAAYpB,WAClDC,IACO,IAKd,ECzCSoB,EAAQ,EACnBC,OACAR,UAAU,UACVS,gBAAgB,aAChBpB,SAEA,MAAMqB,QAAEA,EAAOpB,WAAEA,GAAeC,IAE1BoB,EAAgD,CACpDC,QAA0B,UAAjBF,EAAQG,KAAmBH,EAAQI,KAAK,KAAOJ,EAAQI,KAAK,KACrEC,QAASL,EAAQK,QAAQC,MACzBC,UAAWP,EAAQO,UAAUD,MAC7BE,KAAMR,EAAQQ,KAAKF,MACnBG,QAAST,EAAQS,QAAQH,MACzBI,MAAOV,EAAQU,MAAMJ,MACrBK,QAASX,EAAQW,QAAQL,OAGrBM,EAA0C,CAC9CV,QAASF,EAAQa,gBAAgBZ,EAAgBC,SACjDG,QAASL,EAAQK,QAAQS,aACzBP,UAAWP,EAAQO,UAAUO,aAC7BN,KAAMR,EAAQQ,KAAKM,aACnBL,QAAST,EAAQS,QAAQK,aACzBJ,MAAOV,EAAQU,MAAMI,aACrBH,QAASX,EAAQW,QAAQG,cAG3B,OACE1B,EAACJ,EAAG,CACF+B,OAAQ,GACRC,SAAU,GACVC,QAAQ,cACRC,eAAe,SACfC,WAAW,SACXC,QAASnB,EAAgBX,GACzB+B,MAAOT,EAAUtB,GACjBgC,SAAU1C,EAAW2C,QAAQD,SAC7BE,WAAY5C,EAAW6C,eACvBvC,WAAY,EACZa,cAAeA,EACf2B,WAAW,SACXC,aAAc,EACdpC,KAAK,QAAO,aACA,GAAGO,KAAQR,UACvBsC,GAAI,EACJC,GAAI,EACJlD,GAAI,CAAEmD,OAAQ,aAAcnD,GAE3BF,SAAAqB,GAEH,EC/ESiC,EAAa,EACxB5D,QACA6D,MAAOC,EACPC,cHoBgC,IGnBhC5C,cAEA,MAAMR,EAAKZ,EAAuBC,GAClC,IAAI6D,EAiBJ,OAdKA,EADLG,MAAMC,QAAQH,GACDA,EAAUI,KAAI,CAACL,EAAOM,IAC7BlD,EAACS,EAAK,CACJC,KAAMkC,EAAMO,YAAcL,EAC1B5C,QAAS6C,MAAMC,QAAQ9C,GAAWA,EAAQgD,GAAKhD,GAC1CgD,KAIPlD,EAACS,EAAK,CACJC,KAAMmC,GAAWM,YAAcL,EAC/B5C,QAAS6C,MAAMC,QAAQ9C,GAAWA,EAAQ,GAAKA,IAKrDF,EAACf,EAAY,CAACF,MAAOA,EACnBM,SAAAW,EAACoD,EAAI,CAACC,WAAU,EAAAC,IAAK,EAAoB,kBAAA5D,WACtCkD,KAGL"}

package/value-label/value-label.d.ts

@@ -1,5 +1,5 @@
-import { BaseValueProps } from "~/value-base";
-import { LabelVariant } from "~/label";
+import { BaseValueProps } from "../value-base";
+import { LabelVariant } from "../label";
 export type ValueLabelProps = BaseValueProps<string | number | string[] | number[]> & {
     variant: LabelVariant | LabelVariant[];
 };

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":"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"}
+{"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":"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"}

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\">\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"}

package/value-rating/value-rating.d.ts

@@ -1,4 +1,4 @@
-import { BaseValueProps, EditableValueProps } from "~/value-base";
+import { BaseValueProps, EditableValueProps } from "../value-base";
 export type ValueRatingProps = BaseValueProps<number> & {
     maxRating?: number;
 } & EditableValueProps<number>;