@pautena/react-design-system 0.14.1 → 0.14.3

package/object-details/index.js.map

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

package/object-details/object-details.d.ts

@@ -1,4 +1,4 @@
-import { BasicModelInstance, Model } from "~/generators/generators.model";
+import { BasicModelInstance, Model } from "../generators/generators.model";
 export interface ObjectDetailsProps<T extends BasicModelInstance> {
     model: Model;
     dense?: boolean;

package/package.json

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

package/placeholder/cjs/index.js

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

package/placeholder/cjs/index.js.map

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

package/placeholder/index.js

@@ -1,2 +1,2 @@
-import e from"react";import{Box as t,Typography as i,Button as r}from"@mui/material";const n=({title:n,subtitle:a,icon:l,iconSize:o=200,actions:c})=>e.createElement(t,{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center"},l&&l({size:o,color:"primary"}),e.createElement(i,{variant:"h4",role:"heading","aria-level":1},n),e.createElement(i,{variant:"subtitle1",role:"heading","aria-level":2,sx:{mt:2}},a),c&&e.createElement(t,{sx:{pt:2}},c.map((({id:t,text:i,href:n,onClick:a},l)=>e.createElement(r,{key:t,role:"button",variant:"contained",href:n,onClick:a,sx:{mr:l<c.length-1?2:0}},i)))));export{n as Placeholder};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"@mui/material/Box";import r from"@mui/material/Typography";import n from"@mui/material/Button";const l=({title:l,subtitle:o,icon:a,iconSize:m=200,actions:c})=>e(t,{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",children:[a&&a({size:m,color:"primary"}),i(r,{variant:"h4",role:"heading","aria-level":1,children:l}),i(r,{variant:"subtitle1",role:"heading","aria-level":2,sx:{mt:2},children:o}),c&&i(t,{sx:{pt:2},children:c.map((({id:e,text:t,href:r,onClick:l},o)=>i(n,{role:"button",variant:"contained",href:r,onClick:l,sx:{mr:o<c.length-1?2:0},children:t},e)))})]});export{l as Placeholder};
 //# sourceMappingURL=index.js.map

package/placeholder/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/placeholder/placeholder.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { Box, Typography, Button } from \"@mui/material\";\n\ntype IconColor =\n  | \"inherit\"\n  | \"action\"\n  | \"disabled\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"info\"\n  | \"success\"\n  | \"warning\";\n\nexport interface PlaceholderAction {\n  id: string;\n  text: string;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport interface PlaceholderIconArgs {\n  size: number;\n  color: IconColor;\n}\n\nexport type PlaceholderIcon = ({ size, color }: PlaceholderIconArgs) => ReactElement;\n\nexport interface PlaceholderProps {\n  title: string;\n  subtitle: string;\n  iconSize?: number;\n  icon?: PlaceholderIcon;\n  actions?: PlaceholderAction[];\n}\n\nexport const Placeholder = ({\n  title,\n  subtitle,\n  icon,\n  iconSize = 200,\n  actions,\n}: PlaceholderProps) => {\n  return (\n    <Box\n      display=\"flex\"\n      flexDirection=\"column\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      textAlign=\"center\"\n    >\n      {icon && icon({ size: iconSize, color: \"primary\" })}\n      <Typography variant=\"h4\" role=\"heading\" aria-level={1}>\n        {title}\n      </Typography>\n      <Typography variant=\"subtitle1\" role=\"heading\" aria-level={2} sx={{ mt: 2 }}>\n        {subtitle}\n      </Typography>\n      {actions && (\n        <Box sx={{ pt: 2 }}>\n          {actions.map(({ id, text, href, onClick }, index) => (\n            <Button\n              key={id}\n              role=\"button\"\n              variant=\"contained\"\n              href={href}\n              onClick={onClick}\n              sx={{ mr: index < actions.length - 1 ? 2 : 0 }}\n            >\n              {text}\n            </Button>\n          ))}\n        </Box>\n      )}\n    </Box>\n  );\n};\n"],"names":["Placeholder","title","subtitle","icon","iconSize","actions","React","Box","display","flexDirection","justifyContent","alignItems","textAlign","size","color","createElement","Typography","variant","role","sx","mt","pt","map","id","text","href","onClick","index","Button","key","mr","length"],"mappings":"qFAoCa,MAAAA,EAAc,EACzBC,QACAC,WACAC,OACAC,WAAW,IACXC,aAGEC,gBAACC,EAAG,CACFC,QAAQ,OACRC,cAAc,SACdC,eAAe,SACfC,WAAW,SACXC,UAAU,UAETT,GAAQA,EAAK,CAAEU,KAAMT,EAAUU,MAAO,YACvCR,EAAAS,cAACC,EAAU,CAACC,QAAQ,KAAKC,KAAK,UAAS,aAAa,GACjDjB,GAEHK,EAACS,cAAAC,GAAWC,QAAQ,YAAYC,KAAK,UAAS,aAAa,EAAGC,GAAI,CAAEC,GAAI,IACrElB,GAEFG,GACCC,EAAAS,cAACR,EAAI,CAAAY,GAAI,CAAEE,GAAI,IACZhB,EAAQiB,KAAI,EAAGC,KAAIC,OAAMC,OAAMC,WAAWC,IACzCrB,EAAAS,cAACa,EACC,CAAAC,IAAKN,EACLL,KAAK,SACLD,QAAQ,YACRQ,KAAMA,EACNC,QAASA,EACTP,GAAI,CAAEW,GAAIH,EAAQtB,EAAQ0B,OAAS,EAAI,EAAI,IAE1CP"}
+{"version":3,"file":"index.js","sources":["../../src/placeholder/placeholder.tsx"],"sourcesContent":["import { ReactElement } from \"react\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport Button from \"@mui/material/Button\";\n\ntype IconColor =\n  | \"inherit\"\n  | \"action\"\n  | \"disabled\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"info\"\n  | \"success\"\n  | \"warning\";\n\nexport interface PlaceholderAction {\n  id: string;\n  text: string;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport interface PlaceholderIconArgs {\n  size: number;\n  color: IconColor;\n}\n\nexport type PlaceholderIcon = ({ size, color }: PlaceholderIconArgs) => ReactElement;\n\nexport interface PlaceholderProps {\n  title: string;\n  subtitle: string;\n  iconSize?: number;\n  icon?: PlaceholderIcon;\n  actions?: PlaceholderAction[];\n}\n\nexport const Placeholder = ({\n  title,\n  subtitle,\n  icon,\n  iconSize = 200,\n  actions,\n}: PlaceholderProps) => {\n  return (\n    <Box\n      display=\"flex\"\n      flexDirection=\"column\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      textAlign=\"center\"\n    >\n      {icon && icon({ size: iconSize, color: \"primary\" })}\n      <Typography variant=\"h4\" role=\"heading\" aria-level={1}>\n        {title}\n      </Typography>\n      <Typography variant=\"subtitle1\" role=\"heading\" aria-level={2} sx={{ mt: 2 }}>\n        {subtitle}\n      </Typography>\n      {actions && (\n        <Box sx={{ pt: 2 }}>\n          {actions.map(({ id, text, href, onClick }, index) => (\n            <Button\n              key={id}\n              role=\"button\"\n              variant=\"contained\"\n              href={href}\n              onClick={onClick}\n              sx={{ mr: index < actions.length - 1 ? 2 : 0 }}\n            >\n              {text}\n            </Button>\n          ))}\n        </Box>\n      )}\n    </Box>\n  );\n};\n"],"names":["Placeholder","title","subtitle","icon","iconSize","actions","_jsxs","Box","display","flexDirection","justifyContent","alignItems","textAlign","children","size","color","_jsx","Typography","variant","role","sx","mt","pt","map","id","text","href","onClick","index","Button","mr","length"],"mappings":"+JAsCa,MAAAA,EAAc,EACzBC,QACAC,WACAC,OACAC,WAAW,IACXC,aAGEC,EAACC,EACC,CAAAC,QAAQ,OACRC,cAAc,SACdC,eAAe,SACfC,WAAW,SACXC,UAAU,SAAQC,SAAA,CAEjBV,GAAQA,EAAK,CAAEW,KAAMV,EAAUW,MAAO,YACvCC,EAACC,EAAU,CAACC,QAAQ,KAAKC,KAAK,UAAS,aAAa,EAACN,SAClDZ,IAEHe,EAACC,EAAU,CAACC,QAAQ,YAAYC,KAAK,UAAS,aAAa,EAAGC,GAAI,CAAEC,GAAI,GAAGR,SACxEX,IAEFG,GACCW,EAACT,GAAIa,GAAI,CAAEE,GAAI,GACZT,SAAAR,EAAQkB,KAAI,EAAGC,KAAIC,OAAMC,OAAMC,WAAWC,IACzCZ,EAACa,GAECV,KAAK,SACLD,QAAQ,YACRQ,KAAMA,EACNC,QAASA,EACTP,GAAI,CAAEU,GAAIF,EAAQvB,EAAQ0B,OAAS,EAAI,EAAI,GAE1ClB,SAAAY,GAPID"}

package/query-container/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=r(require("react"));const a=()=>t.default.createElement(e.Box,{width:1,height:1,display:"flex",justifyContent:"center",alignItems:"center"},t.default.createElement(e.CircularProgress,null));exports.QueryContainer=function({fetching:r=!1,loading:l=!1,error:n,success:s,children:i}){const c=Array.isArray(r)?r.some((e=>e)):r;return(Array.isArray(l)?l.some((e=>e)):l)?t.default.createElement(a,null):n?t.default.createElement(e.Alert,{severity:"error",role:"alert","aria-describedby":"error"},n.name&&t.default.createElement(e.AlertTitle,{role:"heading"},n.name),n.message):t.default.createElement(e.Box,null,s&&t.default.createElement(e.Alert,{severity:"success",role:"alert","aria-describedby":"success",sx:{mb:2}},s.name&&t.default.createElement(e.AlertTitle,{role:"heading"},s.name),s.message),c&&t.default.createElement(e.LinearProgress,{sx:{width:1,mb:1}}),i)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material/Alert"),i=require("@mui/material/AlertTitle"),s=require("@mui/material/Box"),t=require("@mui/material/LinearProgress"),a=require("@mui/material/CircularProgress");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(r),n=l(i),d=l(s),c=l(t),o=l(a);const m=()=>e.jsx(d.default,{width:1,height:1,display:"flex",justifyContent:"center",alignItems:"center",children:e.jsx(o.default,{})});exports.QueryContainer=function({fetching:r=!1,loading:i=!1,error:s,success:t,children:a}){const l=Array.isArray(r)?r.some((e=>e)):r;return(Array.isArray(i)?i.some((e=>e)):i)?e.jsx(m,{}):s?e.jsxs(u.default,{severity:"error",role:"alert","aria-describedby":"error",children:[s.name&&e.jsx(n.default,{role:"heading",children:s.name}),s.message]}):e.jsxs(d.default,{children:[t&&e.jsxs(u.default,{severity:"success",role:"alert","aria-describedby":"success",sx:{mb:2},children:[t.name&&e.jsx(n.default,{role:"heading",children:t.name}),t.message]}),l&&e.jsx(c.default,{sx:{width:1,mb:1}}),a]})};
 //# sourceMappingURL=index.js.map

package/query-container/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/loading-area/loading-area.tsx","../../../src/query-container/query-container.tsx"],"sourcesContent":["import { CircularProgress, Box } from \"@mui/material\";\nimport React from \"react\";\n\n/**\n * Displays a centered loading indicator\n */\nexport const LoadingArea = () => {\n  return (\n    <Box width={1} height={1} display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n      <CircularProgress />\n    </Box>\n  );\n};\n","import { Alert, AlertTitle, Box, LinearProgress } from \"@mui/material\";\nimport React from \"react\";\nimport { PropsWithChildren } from \"react\";\nimport { LoadingArea } from \"../loading-area\";\n\nexport interface QueryContainerError {\n  /**\n   * The error title\n   */\n  name?: string;\n  /**\n   * The description of the error\n   */\n  message: string;\n}\n\nexport interface QueryContainerSuccess {\n  /**\n   * The success title\n   */\n  name?: string;\n  /**\n   * The success text\n   */\n  message: string;\n}\n\nexport type QueryContainerProps = PropsWithChildren<{\n  /**\n   * There is a query in progress and we have available data\n   */\n  fetching?: boolean | boolean[];\n\n  /**\n   * There is a query in progress and we don't have available data\n   */\n  loading?: boolean | boolean[];\n  /**\n   * The query has returned an error\n   */\n  error?: QueryContainerError;\n  /**\n   * The query has finished successfully\n   */\n  success?: QueryContainerSuccess;\n}>;\n\n/**\n * Component to show different indicators based on the usual api query statuses\n */\nexport function QueryContainer({\n  fetching: fetchingProp = false,\n  loading: loadingProp = false,\n  error,\n  success,\n  children,\n}: QueryContainerProps) {\n  const fetching = Array.isArray(fetchingProp) ? fetchingProp.some((f) => f) : fetchingProp;\n  const loading = Array.isArray(loadingProp) ? loadingProp.some((f) => f) : loadingProp;\n\n  if (loading) {\n    return <LoadingArea />;\n  }\n\n  if (error) {\n    return (\n      <Alert severity=\"error\" role=\"alert\" aria-describedby=\"error\">\n        {error.name && <AlertTitle role=\"heading\">{error.name}</AlertTitle>}\n        {error.message}\n      </Alert>\n    );\n  }\n\n  return (\n    <Box>\n      {success && (\n        <Alert severity=\"success\" role=\"alert\" aria-describedby=\"success\" sx={{ mb: 2 }}>\n          {success.name && <AlertTitle role=\"heading\">{success.name}</AlertTitle>}\n          {success.message}\n        </Alert>\n      )}\n      {fetching && <LinearProgress sx={{ width: 1, mb: 1 }} />}\n      {children}\n    </Box>\n  );\n}\n"],"names":["LoadingArea","React","Box","width","height","display","justifyContent","alignItems","createElement","CircularProgress","fetching","fetchingProp","loading","loadingProp","error","success","children","Array","isArray","some","f","Alert","severity","role","name","AlertTitle","message","sx","mb","LinearProgress"],"mappings":"qMAMO,MAAMA,EAAc,IAEvBC,wBAACC,EAAGA,IAAA,CAACC,MAAO,EAAGC,OAAQ,EAAGC,QAAQ,OAAOC,eAAe,SAASC,WAAW,UAC1EN,EAAAA,QAAAO,cAACC,mBAAgB,8BCyCjB,UACJC,SAAUC,GAAe,EACzBC,QAASC,GAAc,EAAKC,MAC5BA,EAAKC,QACLA,EAAOC,SACPA,IAEA,MAAMN,EAAWO,MAAMC,QAAQP,GAAgBA,EAAaQ,MAAMC,GAAMA,IAAKT,EAG7E,OAFgBM,MAAMC,QAAQL,GAAeA,EAAYM,MAAMC,GAAMA,IAAKP,GAGjEZ,UAAAO,cAACR,EAAW,MAGjBc,EAEAb,EAAA,QAAAO,cAACa,EAAAA,MAAK,CAACC,SAAS,QAAQC,KAAK,QAAO,mBAAkB,SACnDT,EAAMU,MAAQvB,EAAA,QAAAO,cAACiB,EAAAA,WAAU,CAACF,KAAK,WAAWT,EAAMU,MAChDV,EAAMY,SAMXzB,wBAACC,EAAAA,IAAG,KACDa,GACCd,EAAC,QAAAO,cAAAa,EAAKA,OAACC,SAAS,UAAUC,KAAK,QAAO,mBAAkB,UAAUI,GAAI,CAAEC,GAAI,IACzEb,EAAQS,MAAQvB,EAAA,QAAAO,cAACiB,EAAAA,WAAU,CAACF,KAAK,WAAWR,EAAQS,MACpDT,EAAQW,SAGZhB,GAAYT,EAAA,QAAAO,cAACqB,EAAAA,eAAc,CAACF,GAAI,CAAExB,MAAO,EAAGyB,GAAI,KAChDZ,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../src/loading-area/loading-area.tsx","../../../src/query-container/query-container.tsx"],"sourcesContent":["import CircularProgress from \"@mui/material/CircularProgress\";\nimport Box from \"@mui/material/Box\";\n\n/**\n * Displays a centered loading indicator\n */\nexport const LoadingArea = () => {\n  return (\n    <Box width={1} height={1} display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n      <CircularProgress />\n    </Box>\n  );\n};\n","import Alert from \"@mui/material/Alert\";\nimport AlertTitle from \"@mui/material/AlertTitle\";\nimport Box from \"@mui/material/Box\";\nimport LinearProgress from \"@mui/material/LinearProgress\";\nimport { PropsWithChildren } from \"react\";\nimport { LoadingArea } from \"../loading-area\";\n\nexport interface QueryContainerError {\n  /**\n   * The error title\n   */\n  name?: string;\n  /**\n   * The description of the error\n   */\n  message: string;\n}\n\nexport interface QueryContainerSuccess {\n  /**\n   * The success title\n   */\n  name?: string;\n  /**\n   * The success text\n   */\n  message: string;\n}\n\nexport type QueryContainerProps = PropsWithChildren<{\n  /**\n   * There is a query in progress and we have available data\n   */\n  fetching?: boolean | boolean[];\n\n  /**\n   * There is a query in progress and we don't have available data\n   */\n  loading?: boolean | boolean[];\n  /**\n   * The query has returned an error\n   */\n  error?: QueryContainerError;\n  /**\n   * The query has finished successfully\n   */\n  success?: QueryContainerSuccess;\n}>;\n\n/**\n * Component to show different indicators based on the usual api query statuses\n */\nexport function QueryContainer({\n  fetching: fetchingProp = false,\n  loading: loadingProp = false,\n  error,\n  success,\n  children,\n}: QueryContainerProps) {\n  const fetching = Array.isArray(fetchingProp) ? fetchingProp.some((f) => f) : fetchingProp;\n  const loading = Array.isArray(loadingProp) ? loadingProp.some((f) => f) : loadingProp;\n\n  if (loading) {\n    return <LoadingArea />;\n  }\n\n  if (error) {\n    return (\n      <Alert severity=\"error\" role=\"alert\" aria-describedby=\"error\">\n        {error.name && <AlertTitle role=\"heading\">{error.name}</AlertTitle>}\n        {error.message}\n      </Alert>\n    );\n  }\n\n  return (\n    <Box>\n      {success && (\n        <Alert severity=\"success\" role=\"alert\" aria-describedby=\"success\" sx={{ mb: 2 }}>\n          {success.name && <AlertTitle role=\"heading\">{success.name}</AlertTitle>}\n          {success.message}\n        </Alert>\n      )}\n      {fetching && <LinearProgress sx={{ width: 1, mb: 1 }} />}\n      {children}\n    </Box>\n  );\n}\n"],"names":["LoadingArea","_jsx","jsx","Box","width","height","display","justifyContent","alignItems","children","CircularProgress","fetching","fetchingProp","loading","loadingProp","error","success","Array","isArray","some","f","_jsxs","Alert","severity","role","name","AlertTitle","message","jsxs","sx","mb","LinearProgress"],"mappings":"kZAMO,MAAMA,EAAc,IAEvBC,EAAAC,IAACC,EAAG,QAAA,CAACC,MAAO,EAAGC,OAAQ,EAAGC,QAAQ,OAAOC,eAAe,SAASC,WAAW,SAAQC,SAClFR,EAACC,IAAAQ,UAAmB,CAAA,4BC2CpB,UACJC,SAAUC,GAAe,EACzBC,QAASC,GAAc,EAAKC,MAC5BA,EAAKC,QACLA,EAAOP,SACPA,IAEA,MAAME,EAAWM,MAAMC,QAAQN,GAAgBA,EAAaO,MAAMC,GAAMA,IAAKR,EAG7E,OAFgBK,MAAMC,QAAQJ,GAAeA,EAAYK,MAAMC,GAAMA,IAAKN,GAGjEb,EAAAC,IAACF,EAAW,CAAA,GAGjBe,EAEAM,OAACC,EAAAA,QAAK,CAACC,SAAS,QAAQC,KAAK,QAAO,mBAAkB,QAAOf,SAAA,CAC1DM,EAAMU,MAAQxB,EAAAC,IAACwB,UAAW,CAAAF,KAAK,mBAAWT,EAAMU,OAChDV,EAAMY,WAMXN,OAAClB,EAAAA,QAAG,CAAAM,SAAA,CACDO,GACCK,EAACO,KAAAN,UAAM,CAAAC,SAAS,UAAUC,KAAK,QAAO,mBAAkB,UAAUK,GAAI,CAAEC,GAAI,aACzEd,EAAQS,MAAQxB,MAACyB,EAAAA,QAAU,CAACF,KAAK,UAASf,SAAEO,EAAQS,OACpDT,EAAQW,WAGZhB,GAAYV,MAAC8B,EAAAA,QAAe,CAAAF,GAAI,CAAEzB,MAAO,EAAG0B,GAAI,KAChDrB,IAGP"}

package/query-container/index.js

@@ -1,2 +1,2 @@
-import{Box as e,CircularProgress as r,Alert as t,AlertTitle as a,LinearProgress as n}from"@mui/material";import s from"react";const l=()=>s.createElement(e,{width:1,height:1,display:"flex",justifyContent:"center",alignItems:"center"},s.createElement(r,null));function m({fetching:r=!1,loading:m=!1,error:c,success:i,children:o}){const d=Array.isArray(r)?r.some((e=>e)):r;return(Array.isArray(m)?m.some((e=>e)):m)?s.createElement(l,null):c?s.createElement(t,{severity:"error",role:"alert","aria-describedby":"error"},c.name&&s.createElement(a,{role:"heading"},c.name),c.message):s.createElement(e,null,i&&s.createElement(t,{severity:"success",role:"alert","aria-describedby":"success",sx:{mb:2}},i.name&&s.createElement(a,{role:"heading"},i.name),i.message),d&&s.createElement(n,{sx:{width:1,mb:1}}),o)}export{m as QueryContainer};
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import i from"@mui/material/Alert";import t from"@mui/material/AlertTitle";import a from"@mui/material/Box";import m from"@mui/material/LinearProgress";import s from"@mui/material/CircularProgress";const o=()=>r(a,{width:1,height:1,display:"flex",justifyContent:"center",alignItems:"center",children:r(s,{})});function n({fetching:s=!1,loading:n=!1,error:l,success:c,children:d}){const h=Array.isArray(s)?s.some((r=>r)):s;return(Array.isArray(n)?n.some((r=>r)):n)?r(o,{}):l?e(i,{severity:"error",role:"alert","aria-describedby":"error",children:[l.name&&r(t,{role:"heading",children:l.name}),l.message]}):e(a,{children:[c&&e(i,{severity:"success",role:"alert","aria-describedby":"success",sx:{mb:2},children:[c.name&&r(t,{role:"heading",children:c.name}),c.message]}),h&&r(m,{sx:{width:1,mb:1}}),d]})}export{n as QueryContainer};
 //# sourceMappingURL=index.js.map

package/query-container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/loading-area/loading-area.tsx","../../src/query-container/query-container.tsx"],"sourcesContent":["import { CircularProgress, Box } from \"@mui/material\";\nimport React from \"react\";\n\n/**\n * Displays a centered loading indicator\n */\nexport const LoadingArea = () => {\n  return (\n    <Box width={1} height={1} display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n      <CircularProgress />\n    </Box>\n  );\n};\n","import { Alert, AlertTitle, Box, LinearProgress } from \"@mui/material\";\nimport React from \"react\";\nimport { PropsWithChildren } from \"react\";\nimport { LoadingArea } from \"../loading-area\";\n\nexport interface QueryContainerError {\n  /**\n   * The error title\n   */\n  name?: string;\n  /**\n   * The description of the error\n   */\n  message: string;\n}\n\nexport interface QueryContainerSuccess {\n  /**\n   * The success title\n   */\n  name?: string;\n  /**\n   * The success text\n   */\n  message: string;\n}\n\nexport type QueryContainerProps = PropsWithChildren<{\n  /**\n   * There is a query in progress and we have available data\n   */\n  fetching?: boolean | boolean[];\n\n  /**\n   * There is a query in progress and we don't have available data\n   */\n  loading?: boolean | boolean[];\n  /**\n   * The query has returned an error\n   */\n  error?: QueryContainerError;\n  /**\n   * The query has finished successfully\n   */\n  success?: QueryContainerSuccess;\n}>;\n\n/**\n * Component to show different indicators based on the usual api query statuses\n */\nexport function QueryContainer({\n  fetching: fetchingProp = false,\n  loading: loadingProp = false,\n  error,\n  success,\n  children,\n}: QueryContainerProps) {\n  const fetching = Array.isArray(fetchingProp) ? fetchingProp.some((f) => f) : fetchingProp;\n  const loading = Array.isArray(loadingProp) ? loadingProp.some((f) => f) : loadingProp;\n\n  if (loading) {\n    return <LoadingArea />;\n  }\n\n  if (error) {\n    return (\n      <Alert severity=\"error\" role=\"alert\" aria-describedby=\"error\">\n        {error.name && <AlertTitle role=\"heading\">{error.name}</AlertTitle>}\n        {error.message}\n      </Alert>\n    );\n  }\n\n  return (\n    <Box>\n      {success && (\n        <Alert severity=\"success\" role=\"alert\" aria-describedby=\"success\" sx={{ mb: 2 }}>\n          {success.name && <AlertTitle role=\"heading\">{success.name}</AlertTitle>}\n          {success.message}\n        </Alert>\n      )}\n      {fetching && <LinearProgress sx={{ width: 1, mb: 1 }} />}\n      {children}\n    </Box>\n  );\n}\n"],"names":["LoadingArea","React","Box","width","height","display","justifyContent","alignItems","createElement","CircularProgress","QueryContainer","fetching","fetchingProp","loading","loadingProp","error","success","children","Array","isArray","some","f","Alert","severity","role","name","AlertTitle","message","sx","mb","LinearProgress"],"mappings":"8HAMO,MAAMA,EAAc,IAEvBC,gBAACC,EAAG,CAACC,MAAO,EAAGC,OAAQ,EAAGC,QAAQ,OAAOC,eAAe,SAASC,WAAW,UAC1EN,EAAAO,cAACC,EAAgB,OCyCjB,SAAUC,GACdC,SAAUC,GAAe,EACzBC,QAASC,GAAc,EAAKC,MAC5BA,EAAKC,QACLA,EAAOC,SACPA,IAEA,MAAMN,EAAWO,MAAMC,QAAQP,GAAgBA,EAAaQ,MAAMC,GAAMA,IAAKT,EAG7E,OAFgBM,MAAMC,QAAQL,GAAeA,EAAYM,MAAMC,GAAMA,IAAKP,GAGjEb,EAAAO,cAACR,EAAW,MAGjBe,EAEAd,EAAAO,cAACc,EAAK,CAACC,SAAS,QAAQC,KAAK,QAAO,mBAAkB,SACnDT,EAAMU,MAAQxB,EAAAO,cAACkB,EAAU,CAACF,KAAK,WAAWT,EAAMU,MAChDV,EAAMY,SAMX1B,gBAACC,EAAG,KACDc,GACCf,EAACO,cAAAc,GAAMC,SAAS,UAAUC,KAAK,QAAO,mBAAkB,UAAUI,GAAI,CAAEC,GAAI,IACzEb,EAAQS,MAAQxB,EAAAO,cAACkB,EAAU,CAACF,KAAK,WAAWR,EAAQS,MACpDT,EAAQW,SAGZhB,GAAYV,EAAAO,cAACsB,EAAc,CAACF,GAAI,CAAEzB,MAAO,EAAG0B,GAAI,KAChDZ,EAGP"}
+{"version":3,"file":"index.js","sources":["../../src/loading-area/loading-area.tsx","../../src/query-container/query-container.tsx"],"sourcesContent":["import CircularProgress from \"@mui/material/CircularProgress\";\nimport Box from \"@mui/material/Box\";\n\n/**\n * Displays a centered loading indicator\n */\nexport const LoadingArea = () => {\n  return (\n    <Box width={1} height={1} display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n      <CircularProgress />\n    </Box>\n  );\n};\n","import Alert from \"@mui/material/Alert\";\nimport AlertTitle from \"@mui/material/AlertTitle\";\nimport Box from \"@mui/material/Box\";\nimport LinearProgress from \"@mui/material/LinearProgress\";\nimport { PropsWithChildren } from \"react\";\nimport { LoadingArea } from \"../loading-area\";\n\nexport interface QueryContainerError {\n  /**\n   * The error title\n   */\n  name?: string;\n  /**\n   * The description of the error\n   */\n  message: string;\n}\n\nexport interface QueryContainerSuccess {\n  /**\n   * The success title\n   */\n  name?: string;\n  /**\n   * The success text\n   */\n  message: string;\n}\n\nexport type QueryContainerProps = PropsWithChildren<{\n  /**\n   * There is a query in progress and we have available data\n   */\n  fetching?: boolean | boolean[];\n\n  /**\n   * There is a query in progress and we don't have available data\n   */\n  loading?: boolean | boolean[];\n  /**\n   * The query has returned an error\n   */\n  error?: QueryContainerError;\n  /**\n   * The query has finished successfully\n   */\n  success?: QueryContainerSuccess;\n}>;\n\n/**\n * Component to show different indicators based on the usual api query statuses\n */\nexport function QueryContainer({\n  fetching: fetchingProp = false,\n  loading: loadingProp = false,\n  error,\n  success,\n  children,\n}: QueryContainerProps) {\n  const fetching = Array.isArray(fetchingProp) ? fetchingProp.some((f) => f) : fetchingProp;\n  const loading = Array.isArray(loadingProp) ? loadingProp.some((f) => f) : loadingProp;\n\n  if (loading) {\n    return <LoadingArea />;\n  }\n\n  if (error) {\n    return (\n      <Alert severity=\"error\" role=\"alert\" aria-describedby=\"error\">\n        {error.name && <AlertTitle role=\"heading\">{error.name}</AlertTitle>}\n        {error.message}\n      </Alert>\n    );\n  }\n\n  return (\n    <Box>\n      {success && (\n        <Alert severity=\"success\" role=\"alert\" aria-describedby=\"success\" sx={{ mb: 2 }}>\n          {success.name && <AlertTitle role=\"heading\">{success.name}</AlertTitle>}\n          {success.message}\n        </Alert>\n      )}\n      {fetching && <LinearProgress sx={{ width: 1, mb: 1 }} />}\n      {children}\n    </Box>\n  );\n}\n"],"names":["LoadingArea","_jsx","Box","width","height","display","justifyContent","alignItems","children","CircularProgress","QueryContainer","fetching","fetchingProp","loading","loadingProp","error","success","Array","isArray","some","f","_jsxs","Alert","severity","role","name","AlertTitle","message","sx","mb","LinearProgress"],"mappings":"wPAMO,MAAMA,EAAc,IAEvBC,EAACC,EAAG,CAACC,MAAO,EAAGC,OAAQ,EAAGC,QAAQ,OAAOC,eAAe,SAASC,WAAW,SAAQC,SAClFP,EAACQ,EAAmB,CAAA,KC2CpB,SAAUC,GACdC,SAAUC,GAAe,EACzBC,QAASC,GAAc,EAAKC,MAC5BA,EAAKC,QACLA,EAAOR,SACPA,IAEA,MAAMG,EAAWM,MAAMC,QAAQN,GAAgBA,EAAaO,MAAMC,GAAMA,IAAKR,EAG7E,OAFgBK,MAAMC,QAAQJ,GAAeA,EAAYK,MAAMC,GAAMA,IAAKN,GAGjEb,EAACD,EAAW,CAAA,GAGjBe,EAEAM,EAACC,EAAK,CAACC,SAAS,QAAQC,KAAK,QAAO,mBAAkB,QAAOhB,SAAA,CAC1DO,EAAMU,MAAQxB,EAACyB,EAAW,CAAAF,KAAK,mBAAWT,EAAMU,OAChDV,EAAMY,WAMXN,EAACnB,EAAG,CAAAM,SAAA,CACDQ,GACCK,EAACC,EAAM,CAAAC,SAAS,UAAUC,KAAK,QAAO,mBAAkB,UAAUI,GAAI,CAAEC,GAAI,aACzEb,EAAQS,MAAQxB,EAACyB,EAAU,CAACF,KAAK,UAAShB,SAAEQ,EAAQS,OACpDT,EAAQW,WAGZhB,GAAYV,EAAC6B,EAAe,CAAAF,GAAI,CAAEzB,MAAO,EAAG0B,GAAI,KAChDrB,IAGP"}

package/search-input/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material"),t=require("react"),l=require("@mui/icons-material/Tune"),a=require("@mui/icons-material/Search"),r=require("@mui/icons-material/Clear"),n=require("@mui/x-date-pickers");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=u(t),o=u(l),s=u(a),c=u(r);const d={position:"absolute"},m=e=>{const t={search:""},l={search:!1};return e.forEach((({id:e,type:a})=>{t[e]="text"===a?"":"number"===a?0:"boolean"!==a&&Date.now(),l[e]=!1})),{initialData:t,fields:l}};exports.SearchInput=({label:l,placeholder:a,helperText:r,size:u="medium",fullWidth:f,dateFormat:p,filters:E=[],onSearch:h,sx:x})=>{const{initialData:b,fields:C}=m(E),[y,v]=t.useState(b),[k,g]=t.useState(C),[S,I]=t.useState(!1),q=E.length>0,z=Object.values(k).some((e=>!!e)),D=()=>{const{initialData:e,fields:t}=m(E);v(e),g(t)},F=(e,t)=>{v((l=>({...l,[e]:t}))),g((l=>({...l,[e]:!!t})))};return i.default.createElement("form",{onSubmit:e=>{e.preventDefault(),I(!1);const t={};Object.entries(k).forEach((([e,l])=>{l&&(t[e]=y[e])})),h(t),D()}},i.default.createElement(e.TextField,{label:l,required:!0,value:y.search,onChange:e=>F("search",e.target.value),fullWidth:f,helperText:r,size:u,sx:x,InputProps:{placeholder:a,startAdornment:i.default.createElement(e.InputAdornment,{position:"start"},i.default.createElement(e.IconButton,{type:"submit",size:u,sx:{mr:1}},i.default.createElement(s.default,null))),endAdornment:q&&i.default.createElement(e.InputAdornment,{position:"end"},z&&i.default.createElement(e.IconButton,{size:u,sx:{ml:1},onClick:D},i.default.createElement(c.default,null)),i.default.createElement(e.IconButton,{size:u,onClick:()=>I((e=>!e))},i.default.createElement(o.default,null)))}}),q&&i.default.createElement(e.Paper,{sx:{filtersSx:d}},i.default.createElement(e.Collapse,{in:S},i.default.createElement(e.Grid,{container:!0,sx:{p:2},spacing:1},S&&E.map((({id:t,label:l,type:a})=>"boolean"===a?i.default.createElement(e.Grid,{key:t,item:!0,xs:12},i.default.createElement(e.FormGroup,null,i.default.createElement(e.FormControlLabel,{control:i.default.createElement(e.Checkbox,null),label:l,checked:y[t],onChange:(e,l)=>F(t,l)}))):"datetime"===a?i.default.createElement(e.Grid,{key:t,item:!0,xs:12},i.default.createElement(n.DateTimePicker,{label:l,format:p,value:y[t],onChange:e=>F(t,e),slotProps:{textField:{size:"small"}},sx:{width:1}})):i.default.createElement(e.Grid,{key:t,item:!0,xs:12},i.default.createElement(e.TextField,{type:a,size:"small",label:l,value:y[t],onChange:e=>F(t,"number"===a?parseInt(e.target.value,10):e.target.value),fullWidth:!0})))),i.default.createElement(e.Grid,{item:!0,xs:12,display:"flex",justifyContent:"flex-end"},i.default.createElement(e.Button,{color:"error",onClick:()=>I(!1),sx:{mr:1}},"Close"),i.default.createElement(e.Button,{type:"submit"},"Search"))))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Button"),r=require("@mui/material/Checkbox"),i=require("@mui/material/Collapse"),a=require("@mui/material/FormControlLabel"),l=require("@mui/material/FormGroup"),s=require("@mui/material/Grid"),u=require("@mui/material/IconButton"),n=require("@mui/material/InputAdornment"),d=require("@mui/material/Paper"),o=require("@mui/material/TextField"),c=require("react"),m=require("@mui/icons-material/Tune"),x=require("@mui/icons-material/Search"),f=require("@mui/icons-material/Clear"),h=require("@mui/x-date-pickers/DateTimePicker");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=p(t),b=p(r),q=p(i),C=p(a),v=p(l),g=p(s),y=p(u),S=p(n),k=p(d),z=p(o),D=p(m),P=p(x),T=p(f);const F={position:"absolute"},I=e=>{const t={search:""},r={search:!1};return e.forEach((({id:e,type:i})=>{t[e]="text"===i?"":"number"===i?0:"boolean"!==i&&Date.now(),r[e]=!1})),{initialData:t,fields:r}};exports.SearchInput=({label:t,placeholder:r,helperText:i,size:a="medium",fullWidth:l,dateFormat:s,filters:u=[],onSearch:n,sx:d})=>{const{initialData:o,fields:m}=I(u),[x,f]=c.useState(o),[p,A]=c.useState(m),[O,W]=c.useState(!1),w=u.length>0,B=Object.values(p).some((e=>!!e)),E=()=>{const{initialData:e,fields:t}=I(u);f(e),A(t)},G=(e,t)=>{f((r=>({...r,[e]:t}))),A((r=>({...r,[e]:!!t})))};return e.jsxs("form",{onSubmit:e=>{e.preventDefault(),W(!1);const t={};Object.entries(p).forEach((([e,r])=>{r&&(t[e]=x[e])})),n(t),E()},children:[e.jsx(z.default,{label:t,required:!0,value:x.search,onChange:e=>G("search",e.target.value),fullWidth:l,helperText:i,size:a,sx:d,InputProps:{placeholder:r,startAdornment:e.jsx(S.default,{position:"start",children:e.jsx(y.default,{type:"submit",size:a,sx:{mr:1},children:e.jsx(P.default,{})})}),endAdornment:w&&e.jsxs(S.default,{position:"end",children:[B&&e.jsx(y.default,{size:a,sx:{ml:1},onClick:E,children:e.jsx(T.default,{})}),e.jsx(y.default,{size:a,onClick:()=>W((e=>!e)),children:e.jsx(D.default,{})})]})}}),w&&e.jsx(k.default,{sx:{filtersSx:F},children:e.jsx(q.default,{in:O,children:e.jsxs(g.default,{container:!0,sx:{p:2},spacing:1,children:[O&&u.map((({id:t,label:r,type:i})=>"boolean"===i?e.jsx(g.default,{item:!0,xs:12,children:e.jsx(v.default,{children:e.jsx(C.default,{control:e.jsx(b.default,{}),label:r,checked:x[t],onChange:(e,r)=>G(t,r)})})},t):"datetime"===i?e.jsx(g.default,{item:!0,xs:12,children:e.jsx(h.DateTimePicker,{label:r,format:s,value:x[t],onChange:e=>G(t,e),slotProps:{textField:{size:"small"}},sx:{width:1}})},t):e.jsx(g.default,{item:!0,xs:12,children:e.jsx(z.default,{type:i,size:"small",label:r,value:x[t],onChange:e=>G(t,"number"===i?parseInt(e.target.value,10):e.target.value),fullWidth:!0})},t))),e.jsxs(g.default,{item:!0,xs:12,display:"flex",justifyContent:"flex-end",children:[e.jsx(j.default,{color:"error",onClick:()=>W(!1),sx:{mr:1},children:"Close"}),e.jsx(j.default,{type:"submit",children:"Search"})]})]})})})]})};
 //# sourceMappingURL=index.js.map

package/search-input/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/search-input/search-input.tsx"],"sourcesContent":["import {\n  Button,\n  Checkbox,\n  Collapse,\n  FormControlLabel,\n  FormGroup,\n  Grid,\n  IconButton,\n  InputAdornment,\n  Paper,\n  SxProps,\n  TextField,\n  Theme,\n} from \"@mui/material\";\nimport React, { FormEvent, useState } from \"react\";\nimport TuneIcon from \"@mui/icons-material/Tune\";\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { DateTimePicker } from \"@mui/x-date-pickers\";\n\nexport type SearchInputSize = \"small\" | \"medium\";\n\nexport interface SearchFilter {\n  id: string;\n  label: string;\n  type: \"text\" | \"number\" | \"boolean\" | \"datetime\";\n}\n\nexport interface SearchInputProps<T> {\n  label?: string;\n  placeholder?: string;\n  fullWidth?: boolean;\n  helperText?: string;\n  size?: SearchInputSize;\n  filters?: SearchFilter[];\n  sx?: SxProps<Theme>;\n  dateFormat?: string;\n  onSearch: (data: T) => void;\n}\n\nconst filtersSx = {\n  position: \"absolute\",\n};\n\nconst createInitialData = <T,>(filters: SearchFilter[]) => {\n  const data: Record<string, unknown> = {\n    search: \"\",\n  };\n  const fields: Record<string, boolean> = { search: false };\n\n  filters.forEach(({ id, type }) => {\n    if (type === \"text\") {\n      data[id] = \"\";\n    } else if (type === \"number\") {\n      data[id] = 0;\n    } else if (type === \"boolean\") {\n      data[id] = false;\n    } else {\n      data[id] = Date.now();\n    }\n    fields[id] = false;\n  });\n\n  return {\n    initialData: data as T,\n    fields,\n  };\n};\n\nexport const SearchInput = <T,>({\n  label,\n  placeholder,\n  helperText,\n  size = \"medium\",\n  fullWidth,\n  dateFormat,\n  filters = [],\n  onSearch,\n  sx,\n}: SearchInputProps<T>) => {\n  const { initialData, fields } = createInitialData(filters);\n  const [data, setData] = useState<any>(initialData);\n  const [changedFields, setChangedFields] = useState(fields);\n  const [expanded, setExpanded] = useState(false);\n  const hasFilters = filters.length > 0;\n  const hasData = Object.values(changedFields).some((field) => !!field);\n\n  const clearSearch = () => {\n    const { initialData, fields } = createInitialData(filters);\n    setData(initialData);\n    setChangedFields(fields);\n  };\n\n  const handleNewData = (id: string, value: unknown) => {\n    setData((d: any) => ({ ...d, [id]: value }));\n    setChangedFields((f) => ({ ...f, [id]: !!value }));\n  };\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    setExpanded(false);\n\n    const search: any = {};\n    Object.entries(changedFields).forEach(([key, value]) => {\n      if (value) {\n        search[key] = data[key];\n      }\n    });\n\n    onSearch(search);\n    clearSearch();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <TextField\n        label={label}\n        required\n        value={data.search}\n        onChange={(e) => handleNewData(\"search\", e.target.value)}\n        fullWidth={fullWidth}\n        helperText={helperText}\n        size={size}\n        sx={sx}\n        InputProps={{\n          placeholder,\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <IconButton type=\"submit\" size={size} sx={{ mr: 1 }}>\n                <SearchIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n          endAdornment: hasFilters && (\n            <InputAdornment position=\"end\">\n              {hasData && (\n                <IconButton size={size} sx={{ ml: 1 }} onClick={clearSearch}>\n                  <ClearIcon />\n                </IconButton>\n              )}\n              <IconButton size={size} onClick={() => setExpanded((e) => !e)}>\n                <TuneIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n        }}\n      />\n      {hasFilters && (\n        <Paper sx={{ filtersSx }}>\n          <Collapse in={expanded}>\n            <Grid container sx={{ p: 2 }} spacing={1}>\n              {expanded &&\n                filters.map(({ id, label, type }) => {\n                  if (type === \"boolean\") {\n                    return (\n                      <Grid key={id} item xs={12}>\n                        <FormGroup>\n                          <FormControlLabel\n                            control={<Checkbox />}\n                            label={label}\n                            checked={data[id]}\n                            onChange={(_, value) => handleNewData(id, value)}\n                          />\n                        </FormGroup>\n                      </Grid>\n                    );\n                  }\n\n                  if (type === \"datetime\") {\n                    return (\n                      <Grid key={id} item xs={12}>\n                        <DateTimePicker\n                          label={label}\n                          format={dateFormat}\n                          value={data[id]}\n                          onChange={(value) => handleNewData(id, value)}\n                          slotProps={{\n                            textField: {\n                              size: \"small\",\n                            },\n                          }}\n                          sx={{ width: 1 }}\n                        />\n                      </Grid>\n                    );\n                  }\n\n                  return (\n                    <Grid key={id} item xs={12}>\n                      <TextField\n                        type={type}\n                        size=\"small\"\n                        label={label}\n                        value={data[id]}\n                        onChange={(e) =>\n                          handleNewData(\n                            id,\n                            type === \"number\" ? parseInt(e.target.value, 10) : e.target.value,\n                          )\n                        }\n                        fullWidth\n                      />\n                    </Grid>\n                  );\n                })}\n              <Grid item xs={12} display=\"flex\" justifyContent=\"flex-end\">\n                <Button color=\"error\" onClick={() => setExpanded(false)} sx={{ mr: 1 }}>\n                  Close\n                </Button>\n                <Button type=\"submit\">Search</Button>\n              </Grid>\n            </Grid>\n          </Collapse>\n        </Paper>\n      )}\n    </form>\n  );\n};\n"],"names":["filtersSx","position","createInitialData","filters","data","search","fields","forEach","id","type","Date","now","initialData","label","placeholder","helperText","size","fullWidth","dateFormat","onSearch","sx","setData","useState","changedFields","setChangedFields","expanded","setExpanded","hasFilters","length","hasData","Object","values","some","field","clearSearch","handleNewData","value","d","f","React","createElement","onSubmit","e","preventDefault","entries","key","TextField","required","onChange","target","InputProps","startAdornment","InputAdornment","IconButton","mr","SearchIcon","endAdornment","ml","onClick","ClearIcon","TuneIcon","Paper","Collapse","in","Grid","container","p","spacing","map","item","xs","FormGroup","FormControlLabel","control","Checkbox","checked","_","DateTimePicker","format","slotProps","textField","width","parseInt","display","justifyContent","Button","color"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/search-input/search-input.tsx"],"sourcesContent":["import Button from \"@mui/material/Button\";\nimport Checkbox from \"@mui/material/Checkbox\";\nimport Collapse from \"@mui/material/Collapse\";\nimport FormControlLabel from \"@mui/material/FormControlLabel\";\nimport FormGroup from \"@mui/material/FormGroup\";\nimport Grid from \"@mui/material/Grid\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport Paper from \"@mui/material/Paper\";\nimport TextField from \"@mui/material/TextField\";\nimport { SxProps, Theme } from \"@mui/material/styles\";\nimport { FormEvent, useState } from \"react\";\nimport TuneIcon from \"@mui/icons-material/Tune\";\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { DateTimePicker } from \"@mui/x-date-pickers/DateTimePicker\";\n\nexport type SearchInputSize = \"small\" | \"medium\";\n\nexport interface SearchFilter {\n  id: string;\n  label: string;\n  type: \"text\" | \"number\" | \"boolean\" | \"datetime\";\n}\n\nexport interface SearchInputProps<T> {\n  label?: string;\n  placeholder?: string;\n  fullWidth?: boolean;\n  helperText?: string;\n  size?: SearchInputSize;\n  filters?: SearchFilter[];\n  sx?: SxProps<Theme>;\n  dateFormat?: string;\n  onSearch: (data: T) => void;\n}\n\nconst filtersSx = {\n  position: \"absolute\",\n};\n\nconst createInitialData = <T,>(filters: SearchFilter[]) => {\n  const data: Record<string, unknown> = {\n    search: \"\",\n  };\n  const fields: Record<string, boolean> = { search: false };\n\n  filters.forEach(({ id, type }) => {\n    if (type === \"text\") {\n      data[id] = \"\";\n    } else if (type === \"number\") {\n      data[id] = 0;\n    } else if (type === \"boolean\") {\n      data[id] = false;\n    } else {\n      data[id] = Date.now();\n    }\n    fields[id] = false;\n  });\n\n  return {\n    initialData: data as T,\n    fields,\n  };\n};\n\nexport const SearchInput = <T,>({\n  label,\n  placeholder,\n  helperText,\n  size = \"medium\",\n  fullWidth,\n  dateFormat,\n  filters = [],\n  onSearch,\n  sx,\n}: SearchInputProps<T>) => {\n  const { initialData, fields } = createInitialData(filters);\n  const [data, setData] = useState<any>(initialData);\n  const [changedFields, setChangedFields] = useState(fields);\n  const [expanded, setExpanded] = useState(false);\n  const hasFilters = filters.length > 0;\n  const hasData = Object.values(changedFields).some((field) => !!field);\n\n  const clearSearch = () => {\n    const { initialData, fields } = createInitialData(filters);\n    setData(initialData);\n    setChangedFields(fields);\n  };\n\n  const handleNewData = (id: string, value: unknown) => {\n    setData((d: any) => ({ ...d, [id]: value }));\n    setChangedFields((f) => ({ ...f, [id]: !!value }));\n  };\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    setExpanded(false);\n\n    const search: any = {};\n    Object.entries(changedFields).forEach(([key, value]) => {\n      if (value) {\n        search[key] = data[key];\n      }\n    });\n\n    onSearch(search);\n    clearSearch();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <TextField\n        label={label}\n        required\n        value={data.search}\n        onChange={(e) => handleNewData(\"search\", e.target.value)}\n        fullWidth={fullWidth}\n        helperText={helperText}\n        size={size}\n        sx={sx}\n        InputProps={{\n          placeholder,\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <IconButton type=\"submit\" size={size} sx={{ mr: 1 }}>\n                <SearchIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n          endAdornment: hasFilters && (\n            <InputAdornment position=\"end\">\n              {hasData && (\n                <IconButton size={size} sx={{ ml: 1 }} onClick={clearSearch}>\n                  <ClearIcon />\n                </IconButton>\n              )}\n              <IconButton size={size} onClick={() => setExpanded((e) => !e)}>\n                <TuneIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n        }}\n      />\n      {hasFilters && (\n        <Paper sx={{ filtersSx }}>\n          <Collapse in={expanded}>\n            <Grid container sx={{ p: 2 }} spacing={1}>\n              {expanded &&\n                filters.map(({ id, label, type }) => {\n                  if (type === \"boolean\") {\n                    return (\n                      <Grid key={id} item xs={12}>\n                        <FormGroup>\n                          <FormControlLabel\n                            control={<Checkbox />}\n                            label={label}\n                            checked={data[id]}\n                            onChange={(_, value) => handleNewData(id, value)}\n                          />\n                        </FormGroup>\n                      </Grid>\n                    );\n                  }\n\n                  if (type === \"datetime\") {\n                    return (\n                      <Grid key={id} item xs={12}>\n                        <DateTimePicker\n                          label={label}\n                          format={dateFormat}\n                          value={data[id]}\n                          onChange={(value) => handleNewData(id, value)}\n                          slotProps={{\n                            textField: {\n                              size: \"small\",\n                            },\n                          }}\n                          sx={{ width: 1 }}\n                        />\n                      </Grid>\n                    );\n                  }\n\n                  return (\n                    <Grid key={id} item xs={12}>\n                      <TextField\n                        type={type}\n                        size=\"small\"\n                        label={label}\n                        value={data[id]}\n                        onChange={(e) =>\n                          handleNewData(\n                            id,\n                            type === \"number\" ? parseInt(e.target.value, 10) : e.target.value,\n                          )\n                        }\n                        fullWidth\n                      />\n                    </Grid>\n                  );\n                })}\n              <Grid item xs={12} display=\"flex\" justifyContent=\"flex-end\">\n                <Button color=\"error\" onClick={() => setExpanded(false)} sx={{ mr: 1 }}>\n                  Close\n                </Button>\n                <Button type=\"submit\">Search</Button>\n              </Grid>\n            </Grid>\n          </Collapse>\n        </Paper>\n      )}\n    </form>\n  );\n};\n"],"names":["filtersSx","position","createInitialData","filters","data","search","fields","forEach","id","type","Date","now","initialData","label","placeholder","helperText","size","fullWidth","dateFormat","onSearch","sx","setData","useState","changedFields","setChangedFields","expanded","setExpanded","hasFilters","length","hasData","Object","values","some","field","clearSearch","handleNewData","value","d","f","_jsxs","onSubmit","e","preventDefault","entries","key","children","_jsx","jsx","TextField","required","onChange","target","InputProps","startAdornment","InputAdornment","IconButton","mr","SearchIcon","endAdornment","jsxs","ml","onClick","ClearIcon","TuneIcon","Paper","Collapse","in","Grid","container","p","spacing","map","item","xs","FormGroup","FormControlLabel","control","Checkbox","checked","_","DateTimePicker","format","slotProps","textField","width","parseInt","display","justifyContent","Button","color"],"mappings":"uzBAqCA,MAAMA,EAAY,CAChBC,SAAU,YAGNC,EAAyBC,IAC7B,MAAMC,EAAgC,CACpCC,OAAQ,IAEJC,EAAkC,CAAED,QAAQ,GAelD,OAbAF,EAAQI,SAAQ,EAAGC,KAAIC,WAEnBL,EAAKI,GADM,SAATC,EACS,GACO,WAATA,EACE,EACO,YAATA,GAGEC,KAAKC,MAElBL,EAAOE,IAAM,CAAK,IAGb,CACLI,YAAaR,EACbE,SACD,sBAGwB,EACzBO,QACAC,cACAC,aACAC,OAAO,SACPC,YACAC,aACAf,UAAU,GACVgB,WACAC,SAEA,MAAMR,YAAEA,EAAWN,OAAEA,GAAWJ,EAAkBC,IAC3CC,EAAMiB,GAAWC,EAAQA,SAAMV,IAC/BW,EAAeC,GAAoBF,EAAQA,SAAChB,IAC5CmB,EAAUC,GAAeJ,EAAQA,UAAC,GACnCK,EAAaxB,EAAQyB,OAAS,EAC9BC,EAAUC,OAAOC,OAAOR,GAAeS,MAAMC,KAAYA,IAEzDC,EAAc,KAClB,MAAMtB,YAAEA,EAAWN,OAAEA,GAAWJ,EAAkBC,GAClDkB,EAAQT,GACRY,EAAiBlB,EAAO,EAGpB6B,EAAgB,CAAC3B,EAAY4B,KACjCf,GAASgB,IAAM,IAAWA,EAAG7B,CAACA,GAAK4B,MACnCZ,GAAkBc,IAAO,IAAKA,EAAG9B,CAACA,KAAO4B,KAAS,EAkBpD,OACEG,EAAAA,KAAM,OAAA,CAAAC,SAjBcC,IACpBA,EAAEC,iBAEFhB,GAAY,GAEZ,MAAMrB,EAAc,CAAA,EACpByB,OAAOa,QAAQpB,GAAehB,SAAQ,EAAEqC,EAAKR,MACvCA,IACF/B,EAAOuC,GAAOxC,EAAKwC,GACpB,IAGHzB,EAASd,GACT6B,GAAa,EAKXW,SAAA,CAAAC,EAAAC,IAACC,EAAS,QAAA,CACRnC,MAAOA,EACPoC,UACA,EAAAb,MAAOhC,EAAKC,OACZ6C,SAAWT,GAAMN,EAAc,SAAUM,EAAEU,OAAOf,OAClDnB,UAAWA,EACXF,WAAYA,EACZC,KAAMA,EACNI,GAAIA,EACJgC,WAAY,CACVtC,cACAuC,eACEP,EAACC,IAAAO,WAAerD,SAAS,QAAO4C,SAC9BC,MAACS,EAAAA,QAAW,CAAA9C,KAAK,SAASO,KAAMA,EAAMI,GAAI,CAAEoC,GAAI,YAC9CV,EAACC,IAAAU,UAAa,CAAA,OAIpBC,aAAc/B,GACZY,EAACoB,KAAAL,UAAe,CAAArD,SAAS,MACtB4C,SAAA,CAAAhB,GACCiB,EAAAC,IAACQ,EAAU,QAAA,CAACvC,KAAMA,EAAMI,GAAI,CAAEwC,GAAI,GAAKC,QAAS3B,EAAWW,SACzDC,EAAAA,IAACgB,EAAAA,QAAY,CAAA,KAGjBhB,MAACS,EAAU,QAAA,CAACvC,KAAMA,EAAM6C,QAAS,IAAMnC,GAAae,IAAOA,IAAEI,SAC3DC,EAAAA,IAACiB,EAAQ,QAAG,YAMrBpC,GACCmB,MAACkB,EAAAA,QAAM,CAAA5C,GAAI,CAAEpB,aAAW6C,SACtBC,EAAAA,IAACmB,EAAQ,SAACC,GAAIzC,EAAQoB,SACpBN,OAAC4B,EAAI,QAAA,CAACC,WAAS,EAAChD,GAAI,CAAEiD,EAAG,GAAKC,QAAS,YACpC7C,GACCtB,EAAQoE,KAAI,EAAG/D,KAAIK,QAAOJ,UACX,YAATA,EAEAqC,EAAAA,IAACqB,EAAAA,QAAc,CAAAK,QAAKC,GAAI,GAAE5B,SACxBC,EAACC,IAAA2B,EAAS,kBACR5B,EAACC,IAAA4B,EAAgB,QACf,CAAAC,QAAS9B,EAAAA,IAAC+B,EAAQ,QAAA,CAAA,GAClBhE,MAAOA,EACPiE,QAAS1E,EAAKI,GACd0C,SAAU,CAAC6B,EAAG3C,IAAUD,EAAc3B,EAAI4B,QANrC5B,GAaF,aAATC,EAEAqC,MAACqB,EAAAA,SAAcK,MAAI,EAACC,GAAI,YACtB3B,EAAAA,IAACkC,EAAcA,gBACbnE,MAAOA,EACPoE,OAAQ/D,EACRkB,MAAOhC,EAAKI,GACZ0C,SAAWd,GAAUD,EAAc3B,EAAI4B,GACvC8C,UAAW,CACTC,UAAW,CACTnE,KAAM,UAGVI,GAAI,CAAEgE,MAAO,MAXN5E,GAkBbsC,EAAAC,IAACoB,EAAI,QAAA,CAAUK,MAAK,EAAAC,GAAI,YACtB3B,MAACE,EAAAA,QACC,CAAAvC,KAAMA,EACNO,KAAK,QACLH,MAAOA,EACPuB,MAAOhC,EAAKI,GACZ0C,SAAWT,GACTN,EACE3B,EACS,WAATC,EAAoB4E,SAAS5C,EAAEU,OAAOf,MAAO,IAAMK,EAAEU,OAAOf,OAGhEnB,WACA,KAbOT,KAiBjB+B,EAAAA,KAAC4B,EAAI,QAAA,CAACK,MAAI,EAACC,GAAI,GAAIa,QAAQ,OAAOC,eAAe,WAAU1C,SAAA,CACzDC,EAACC,IAAAyC,UAAO,CAAAC,MAAM,QAAQ5B,QAAS,IAAMnC,GAAY,GAAQN,GAAI,CAAEoC,GAAI,GAE1DX,SAAA,UACTC,EAAAA,IAAC0C,EAAM,QAAC,CAAA/E,KAAK,SAAwBoC,SAAA,uBAOjD"}

package/search-input/index.js

@@ -1,2 +1,2 @@
-import{TextField as e,InputAdornment as t,IconButton as l,Paper as a,Collapse as r,Grid as n,FormGroup as i,FormControlLabel as m,Checkbox as o,Button as s}from"@mui/material";import c,{useState as u}from"react";import p from"@mui/icons-material/Tune";import E from"@mui/icons-material/Search";import d from"@mui/icons-material/Clear";import{DateTimePicker as h}from"@mui/x-date-pickers";const f={position:"absolute"},x=e=>{const t={search:""},l={search:!1};return e.forEach((({id:e,type:a})=>{t[e]="text"===a?"":"number"===a?0:"boolean"!==a&&Date.now(),l[e]=!1})),{initialData:t,fields:l}},b=({label:b,placeholder:y,helperText:C,size:g="medium",fullWidth:k,dateFormat:v,filters:z=[],onSearch:D,sx:S})=>{const{initialData:j,fields:T}=x(z),[W,w]=u(j),[A,F]=u(T),[I,O]=u(!1),P=z.length>0,q=Object.values(A).some((e=>!!e)),B=()=>{const{initialData:e,fields:t}=x(z);w(e),F(t)},G=(e,t)=>{w((l=>({...l,[e]:t}))),F((l=>({...l,[e]:!!t})))};return c.createElement("form",{onSubmit:e=>{e.preventDefault(),O(!1);const t={};Object.entries(A).forEach((([e,l])=>{l&&(t[e]=W[e])})),D(t),B()}},c.createElement(e,{label:b,required:!0,value:W.search,onChange:e=>G("search",e.target.value),fullWidth:k,helperText:C,size:g,sx:S,InputProps:{placeholder:y,startAdornment:c.createElement(t,{position:"start"},c.createElement(l,{type:"submit",size:g,sx:{mr:1}},c.createElement(E,null))),endAdornment:P&&c.createElement(t,{position:"end"},q&&c.createElement(l,{size:g,sx:{ml:1},onClick:B},c.createElement(d,null)),c.createElement(l,{size:g,onClick:()=>O((e=>!e))},c.createElement(p,null)))}}),P&&c.createElement(a,{sx:{filtersSx:f}},c.createElement(r,{in:I},c.createElement(n,{container:!0,sx:{p:2},spacing:1},I&&z.map((({id:t,label:l,type:a})=>"boolean"===a?c.createElement(n,{key:t,item:!0,xs:12},c.createElement(i,null,c.createElement(m,{control:c.createElement(o,null),label:l,checked:W[t],onChange:(e,l)=>G(t,l)}))):"datetime"===a?c.createElement(n,{key:t,item:!0,xs:12},c.createElement(h,{label:l,format:v,value:W[t],onChange:e=>G(t,e),slotProps:{textField:{size:"small"}},sx:{width:1}})):c.createElement(n,{key:t,item:!0,xs:12},c.createElement(e,{type:a,size:"small",label:l,value:W[t],onChange:e=>G(t,"number"===a?parseInt(e.target.value,10):e.target.value),fullWidth:!0})))),c.createElement(n,{item:!0,xs:12,display:"flex",justifyContent:"flex-end"},c.createElement(s,{color:"error",onClick:()=>O(!1),sx:{mr:1}},"Close"),c.createElement(s,{type:"submit"},"Search"))))))};export{b as SearchInput};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import r from"@mui/material/Button";import t from"@mui/material/Checkbox";import l from"@mui/material/Collapse";import o from"@mui/material/FormControlLabel";import a from"@mui/material/FormGroup";import m from"@mui/material/Grid";import n from"@mui/material/IconButton";import s from"@mui/material/InputAdornment";import c from"@mui/material/Paper";import d from"@mui/material/TextField";import{useState as p}from"react";import u from"@mui/icons-material/Tune";import h from"@mui/icons-material/Search";import f from"@mui/icons-material/Clear";import{DateTimePicker as x}from"@mui/x-date-pickers/DateTimePicker";const b={position:"absolute"},C=e=>{const i={search:""},r={search:!1};return e.forEach((({id:e,type:t})=>{i[e]="text"===t?"":"number"===t?0:"boolean"!==t&&Date.now(),r[e]=!1})),{initialData:i,fields:r}},g=({label:g,placeholder:v,helperText:k,size:y="medium",fullWidth:z,dateFormat:D,filters:F=[],onSearch:S,sx:T})=>{const{initialData:j,fields:I}=C(F),[P,A]=p(j),[W,w]=p(I),[B,E]=p(!1),G=F.length>0,O=Object.values(W).some((e=>!!e)),q=()=>{const{initialData:e,fields:i}=C(F);A(e),w(i)},L=(e,i)=>{A((r=>({...r,[e]:i}))),w((r=>({...r,[e]:!!i})))};return e("form",{onSubmit:e=>{e.preventDefault(),E(!1);const i={};Object.entries(W).forEach((([e,r])=>{r&&(i[e]=P[e])})),S(i),q()},children:[i(d,{label:g,required:!0,value:P.search,onChange:e=>L("search",e.target.value),fullWidth:z,helperText:k,size:y,sx:T,InputProps:{placeholder:v,startAdornment:i(s,{position:"start",children:i(n,{type:"submit",size:y,sx:{mr:1},children:i(h,{})})}),endAdornment:G&&e(s,{position:"end",children:[O&&i(n,{size:y,sx:{ml:1},onClick:q,children:i(f,{})}),i(n,{size:y,onClick:()=>E((e=>!e)),children:i(u,{})})]})}}),G&&i(c,{sx:{filtersSx:b},children:i(l,{in:B,children:e(m,{container:!0,sx:{p:2},spacing:1,children:[B&&F.map((({id:e,label:r,type:l})=>i(m,"boolean"===l?{item:!0,xs:12,children:i(a,{children:i(o,{control:i(t,{}),label:r,checked:P[e],onChange:(i,r)=>L(e,r)})})}:"datetime"===l?{item:!0,xs:12,children:i(x,{label:r,format:D,value:P[e],onChange:i=>L(e,i),slotProps:{textField:{size:"small"}},sx:{width:1}})}:{item:!0,xs:12,children:i(d,{type:l,size:"small",label:r,value:P[e],onChange:i=>L(e,"number"===l?parseInt(i.target.value,10):i.target.value),fullWidth:!0})},e))),e(m,{item:!0,xs:12,display:"flex",justifyContent:"flex-end",children:[i(r,{color:"error",onClick:()=>E(!1),sx:{mr:1},children:"Close"}),i(r,{type:"submit",children:"Search"})]})]})})})]})};export{g as SearchInput};
 //# sourceMappingURL=index.js.map

package/search-input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/search-input/search-input.tsx"],"sourcesContent":["import {\n  Button,\n  Checkbox,\n  Collapse,\n  FormControlLabel,\n  FormGroup,\n  Grid,\n  IconButton,\n  InputAdornment,\n  Paper,\n  SxProps,\n  TextField,\n  Theme,\n} from \"@mui/material\";\nimport React, { FormEvent, useState } from \"react\";\nimport TuneIcon from \"@mui/icons-material/Tune\";\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { DateTimePicker } from \"@mui/x-date-pickers\";\n\nexport type SearchInputSize = \"small\" | \"medium\";\n\nexport interface SearchFilter {\n  id: string;\n  label: string;\n  type: \"text\" | \"number\" | \"boolean\" | \"datetime\";\n}\n\nexport interface SearchInputProps<T> {\n  label?: string;\n  placeholder?: string;\n  fullWidth?: boolean;\n  helperText?: string;\n  size?: SearchInputSize;\n  filters?: SearchFilter[];\n  sx?: SxProps<Theme>;\n  dateFormat?: string;\n  onSearch: (data: T) => void;\n}\n\nconst filtersSx = {\n  position: \"absolute\",\n};\n\nconst createInitialData = <T,>(filters: SearchFilter[]) => {\n  const data: Record<string, unknown> = {\n    search: \"\",\n  };\n  const fields: Record<string, boolean> = { search: false };\n\n  filters.forEach(({ id, type }) => {\n    if (type === \"text\") {\n      data[id] = \"\";\n    } else if (type === \"number\") {\n      data[id] = 0;\n    } else if (type === \"boolean\") {\n      data[id] = false;\n    } else {\n      data[id] = Date.now();\n    }\n    fields[id] = false;\n  });\n\n  return {\n    initialData: data as T,\n    fields,\n  };\n};\n\nexport const SearchInput = <T,>({\n  label,\n  placeholder,\n  helperText,\n  size = \"medium\",\n  fullWidth,\n  dateFormat,\n  filters = [],\n  onSearch,\n  sx,\n}: SearchInputProps<T>) => {\n  const { initialData, fields } = createInitialData(filters);\n  const [data, setData] = useState<any>(initialData);\n  const [changedFields, setChangedFields] = useState(fields);\n  const [expanded, setExpanded] = useState(false);\n  const hasFilters = filters.length > 0;\n  const hasData = Object.values(changedFields).some((field) => !!field);\n\n  const clearSearch = () => {\n    const { initialData, fields } = createInitialData(filters);\n    setData(initialData);\n    setChangedFields(fields);\n  };\n\n  const handleNewData = (id: string, value: unknown) => {\n    setData((d: any) => ({ ...d, [id]: value }));\n    setChangedFields((f) => ({ ...f, [id]: !!value }));\n  };\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    setExpanded(false);\n\n    const search: any = {};\n    Object.entries(changedFields).forEach(([key, value]) => {\n      if (value) {\n        search[key] = data[key];\n      }\n    });\n\n    onSearch(search);\n    clearSearch();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <TextField\n        label={label}\n        required\n        value={data.search}\n        onChange={(e) => handleNewData(\"search\", e.target.value)}\n        fullWidth={fullWidth}\n        helperText={helperText}\n        size={size}\n        sx={sx}\n        InputProps={{\n          placeholder,\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <IconButton type=\"submit\" size={size} sx={{ mr: 1 }}>\n                <SearchIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n          endAdornment: hasFilters && (\n            <InputAdornment position=\"end\">\n              {hasData && (\n                <IconButton size={size} sx={{ ml: 1 }} onClick={clearSearch}>\n                  <ClearIcon />\n                </IconButton>\n              )}\n              <IconButton size={size} onClick={() => setExpanded((e) => !e)}>\n                <TuneIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n        }}\n      />\n      {hasFilters && (\n        <Paper sx={{ filtersSx }}>\n          <Collapse in={expanded}>\n            <Grid container sx={{ p: 2 }} spacing={1}>\n              {expanded &&\n                filters.map(({ id, label, type }) => {\n                  if (type === \"boolean\") {\n                    return (\n                      <Grid key={id} item xs={12}>\n                        <FormGroup>\n                          <FormControlLabel\n                            control={<Checkbox />}\n                            label={label}\n                            checked={data[id]}\n                            onChange={(_, value) => handleNewData(id, value)}\n                          />\n                        </FormGroup>\n                      </Grid>\n                    );\n                  }\n\n                  if (type === \"datetime\") {\n                    return (\n                      <Grid key={id} item xs={12}>\n                        <DateTimePicker\n                          label={label}\n                          format={dateFormat}\n                          value={data[id]}\n                          onChange={(value) => handleNewData(id, value)}\n                          slotProps={{\n                            textField: {\n                              size: \"small\",\n                            },\n                          }}\n                          sx={{ width: 1 }}\n                        />\n                      </Grid>\n                    );\n                  }\n\n                  return (\n                    <Grid key={id} item xs={12}>\n                      <TextField\n                        type={type}\n                        size=\"small\"\n                        label={label}\n                        value={data[id]}\n                        onChange={(e) =>\n                          handleNewData(\n                            id,\n                            type === \"number\" ? parseInt(e.target.value, 10) : e.target.value,\n                          )\n                        }\n                        fullWidth\n                      />\n                    </Grid>\n                  );\n                })}\n              <Grid item xs={12} display=\"flex\" justifyContent=\"flex-end\">\n                <Button color=\"error\" onClick={() => setExpanded(false)} sx={{ mr: 1 }}>\n                  Close\n                </Button>\n                <Button type=\"submit\">Search</Button>\n              </Grid>\n            </Grid>\n          </Collapse>\n        </Paper>\n      )}\n    </form>\n  );\n};\n"],"names":["filtersSx","position","createInitialData","filters","data","search","fields","forEach","id","type","Date","now","initialData","SearchInput","label","placeholder","helperText","size","fullWidth","dateFormat","onSearch","sx","setData","useState","changedFields","setChangedFields","expanded","setExpanded","hasFilters","length","hasData","Object","values","some","field","clearSearch","handleNewData","value","d","f","React","createElement","onSubmit","e","preventDefault","entries","key","TextField","required","onChange","target","InputProps","startAdornment","InputAdornment","IconButton","mr","SearchIcon","endAdornment","ml","onClick","ClearIcon","TuneIcon","Paper","Collapse","in","Grid","container","p","spacing","map","item","xs","FormGroup","FormControlLabel","control","Checkbox","checked","_","DateTimePicker","format","slotProps","textField","width","parseInt","display","justifyContent","Button","color"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/search-input/search-input.tsx"],"sourcesContent":["import Button from \"@mui/material/Button\";\nimport Checkbox from \"@mui/material/Checkbox\";\nimport Collapse from \"@mui/material/Collapse\";\nimport FormControlLabel from \"@mui/material/FormControlLabel\";\nimport FormGroup from \"@mui/material/FormGroup\";\nimport Grid from \"@mui/material/Grid\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport Paper from \"@mui/material/Paper\";\nimport TextField from \"@mui/material/TextField\";\nimport { SxProps, Theme } from \"@mui/material/styles\";\nimport { FormEvent, useState } from \"react\";\nimport TuneIcon from \"@mui/icons-material/Tune\";\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { DateTimePicker } from \"@mui/x-date-pickers/DateTimePicker\";\n\nexport type SearchInputSize = \"small\" | \"medium\";\n\nexport interface SearchFilter {\n  id: string;\n  label: string;\n  type: \"text\" | \"number\" | \"boolean\" | \"datetime\";\n}\n\nexport interface SearchInputProps<T> {\n  label?: string;\n  placeholder?: string;\n  fullWidth?: boolean;\n  helperText?: string;\n  size?: SearchInputSize;\n  filters?: SearchFilter[];\n  sx?: SxProps<Theme>;\n  dateFormat?: string;\n  onSearch: (data: T) => void;\n}\n\nconst filtersSx = {\n  position: \"absolute\",\n};\n\nconst createInitialData = <T,>(filters: SearchFilter[]) => {\n  const data: Record<string, unknown> = {\n    search: \"\",\n  };\n  const fields: Record<string, boolean> = { search: false };\n\n  filters.forEach(({ id, type }) => {\n    if (type === \"text\") {\n      data[id] = \"\";\n    } else if (type === \"number\") {\n      data[id] = 0;\n    } else if (type === \"boolean\") {\n      data[id] = false;\n    } else {\n      data[id] = Date.now();\n    }\n    fields[id] = false;\n  });\n\n  return {\n    initialData: data as T,\n    fields,\n  };\n};\n\nexport const SearchInput = <T,>({\n  label,\n  placeholder,\n  helperText,\n  size = \"medium\",\n  fullWidth,\n  dateFormat,\n  filters = [],\n  onSearch,\n  sx,\n}: SearchInputProps<T>) => {\n  const { initialData, fields } = createInitialData(filters);\n  const [data, setData] = useState<any>(initialData);\n  const [changedFields, setChangedFields] = useState(fields);\n  const [expanded, setExpanded] = useState(false);\n  const hasFilters = filters.length > 0;\n  const hasData = Object.values(changedFields).some((field) => !!field);\n\n  const clearSearch = () => {\n    const { initialData, fields } = createInitialData(filters);\n    setData(initialData);\n    setChangedFields(fields);\n  };\n\n  const handleNewData = (id: string, value: unknown) => {\n    setData((d: any) => ({ ...d, [id]: value }));\n    setChangedFields((f) => ({ ...f, [id]: !!value }));\n  };\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    setExpanded(false);\n\n    const search: any = {};\n    Object.entries(changedFields).forEach(([key, value]) => {\n      if (value) {\n        search[key] = data[key];\n      }\n    });\n\n    onSearch(search);\n    clearSearch();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <TextField\n        label={label}\n        required\n        value={data.search}\n        onChange={(e) => handleNewData(\"search\", e.target.value)}\n        fullWidth={fullWidth}\n        helperText={helperText}\n        size={size}\n        sx={sx}\n        InputProps={{\n          placeholder,\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <IconButton type=\"submit\" size={size} sx={{ mr: 1 }}>\n                <SearchIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n          endAdornment: hasFilters && (\n            <InputAdornment position=\"end\">\n              {hasData && (\n                <IconButton size={size} sx={{ ml: 1 }} onClick={clearSearch}>\n                  <ClearIcon />\n                </IconButton>\n              )}\n              <IconButton size={size} onClick={() => setExpanded((e) => !e)}>\n                <TuneIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n        }}\n      />\n      {hasFilters && (\n        <Paper sx={{ filtersSx }}>\n          <Collapse in={expanded}>\n            <Grid container sx={{ p: 2 }} spacing={1}>\n              {expanded &&\n                filters.map(({ id, label, type }) => {\n                  if (type === \"boolean\") {\n                    return (\n                      <Grid key={id} item xs={12}>\n                        <FormGroup>\n                          <FormControlLabel\n                            control={<Checkbox />}\n                            label={label}\n                            checked={data[id]}\n                            onChange={(_, value) => handleNewData(id, value)}\n                          />\n                        </FormGroup>\n                      </Grid>\n                    );\n                  }\n\n                  if (type === \"datetime\") {\n                    return (\n                      <Grid key={id} item xs={12}>\n                        <DateTimePicker\n                          label={label}\n                          format={dateFormat}\n                          value={data[id]}\n                          onChange={(value) => handleNewData(id, value)}\n                          slotProps={{\n                            textField: {\n                              size: \"small\",\n                            },\n                          }}\n                          sx={{ width: 1 }}\n                        />\n                      </Grid>\n                    );\n                  }\n\n                  return (\n                    <Grid key={id} item xs={12}>\n                      <TextField\n                        type={type}\n                        size=\"small\"\n                        label={label}\n                        value={data[id]}\n                        onChange={(e) =>\n                          handleNewData(\n                            id,\n                            type === \"number\" ? parseInt(e.target.value, 10) : e.target.value,\n                          )\n                        }\n                        fullWidth\n                      />\n                    </Grid>\n                  );\n                })}\n              <Grid item xs={12} display=\"flex\" justifyContent=\"flex-end\">\n                <Button color=\"error\" onClick={() => setExpanded(false)} sx={{ mr: 1 }}>\n                  Close\n                </Button>\n                <Button type=\"submit\">Search</Button>\n              </Grid>\n            </Grid>\n          </Collapse>\n        </Paper>\n      )}\n    </form>\n  );\n};\n"],"names":["filtersSx","position","createInitialData","filters","data","search","fields","forEach","id","type","Date","now","initialData","SearchInput","label","placeholder","helperText","size","fullWidth","dateFormat","onSearch","sx","setData","useState","changedFields","setChangedFields","expanded","setExpanded","hasFilters","length","hasData","Object","values","some","field","clearSearch","handleNewData","value","d","f","_jsxs","onSubmit","e","preventDefault","entries","key","children","_jsx","TextField","required","onChange","target","InputProps","startAdornment","InputAdornment","IconButton","mr","SearchIcon","endAdornment","ml","onClick","ClearIcon","TuneIcon","Paper","Collapse","in","Grid","container","p","spacing","map","item","xs","FormGroup","FormControlLabel","control","Checkbox","checked","_","DateTimePicker","format","slotProps","textField","width","parseInt","display","justifyContent","Button","color"],"mappings":"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"}

package/search-input/search-input.d.ts

@@ -1,4 +1,4 @@
-import { SxProps, Theme } from "@mui/material";
+import { SxProps, Theme } from "@mui/material/styles";
 export type SearchInputSize = "small" | "medium";
 export interface SearchFilter {
     id: string;

package/select/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@mui/material");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=l(e);function n({children:e,centerVertical:l=!0,centerHorizontal:n=!0,sx:i}){return r.default.createElement(t.Box,{width:1,height:1,sx:{...i,display:"flex",flexDirection:"column",justifyContent:l?"center":"flex-start",alignItems:n?"center":"flex-start"}},e)}const i={small:15,medium:20};exports.Select=({label:l,value:o,loading:a=!1,fetching:c=!1,size:u="medium",fullWidth:d=!1,color:s,children:f,onChange:m})=>{const h=e.useId(),x=t.styled(t.FormControl)((()=>s?{label:{color:s},".MuiOutlinedInput-notchedOutline":{borderColor:`${s} !important`},".MuiInputBase-root":{color:s},".MuiSelect-icon":{fill:s}}:{}));return r.default.createElement(x,{fullWidth:d},r.default.createElement(t.InputLabel,{id:h},l),r.default.createElement(t.Select,{labelId:h,id:h,value:o,label:l,onChange:m,disabled:c,size:u,renderValue:e=>c?r.default.createElement(n,{centerVertical:!0,centerHorizontal:!0},r.default.createElement(t.CircularProgress,{color:"inherit",size:i[u]})):a?r.default.createElement(t.Box,{display:"flex",flexDirection:"column"},e,r.default.createElement(t.LinearProgress,{color:"inherit",sx:{position:"absolute",left:0,right:0,bottom:0}})):e},f))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/styles"),i=require("@mui/material/Box"),l=require("@mui/material/CircularProgress"),a=require("@mui/material/FormControl"),n=require("@mui/material/InputLabel"),u=require("@mui/material/LinearProgress"),o=require("@mui/material/Select");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(i),d=s(l),m=s(a),f=s(n),x=s(u),h=s(o);function j({children:r,centerVertical:t=!0,centerHorizontal:i=!0,sx:l}){return e.jsx(c.default,{width:1,height:1,sx:{...l,display:"flex",flexDirection:"column",justifyContent:t?"center":"flex-start",alignItems:i?"center":"flex-start"},children:r})}const b={small:15,medium:20};exports.Select=({label:i,value:l,loading:a=!1,fetching:n=!1,size:u="medium",fullWidth:o=!1,color:s,children:p,onChange:g})=>{const q=r.useId(),y=t.styled(m.default)((()=>s?{label:{color:s},".MuiOutlinedInput-notchedOutline":{borderColor:`${s} !important`},".MuiInputBase-root":{color:s},".MuiSelect-icon":{fill:s}}:{}));return e.jsxs(y,{fullWidth:o,children:[e.jsx(f.default,{id:q,children:i}),e.jsx(h.default,{labelId:q,id:q,value:l,label:i,onChange:g,disabled:n,size:u,renderValue:r=>n?e.jsx(j,{centerVertical:!0,centerHorizontal:!0,children:e.jsx(d.default,{color:"inherit",size:b[u]})}):a?e.jsxs(c.default,{display:"flex",flexDirection:"column",children:[r,e.jsx(x.default,{color:"inherit",sx:{position:"absolute",left:0,right:0,bottom:0}})]}):r,children:p})]})};
 //# sourceMappingURL=index.js.map

package/select/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/center-container/center-container.tsx","../../../src/select/select.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport { Box, SxProps, Theme } from \"@mui/material\";\n\nexport interface CenterContainerProps {\n  children: ReactNode | undefined;\n  centerVertical?: boolean;\n  centerHorizontal?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function CenterContainer({\n  children,\n  centerVertical = true,\n  centerHorizontal = true,\n  sx,\n}: CenterContainerProps) {\n  return (\n    <Box\n      width={1}\n      height={1}\n      sx={{\n        ...sx,\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: centerVertical ? \"center\" : \"flex-start\",\n        alignItems: centerHorizontal ? \"center\" : \"flex-start\",\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n","import React, { ReactNode, useId } from \"react\";\nimport {\n  Box,\n  CircularProgress,\n  FormControl,\n  InputLabel,\n  LinearProgress,\n  Select as MuiSelect,\n  styled,\n} from \"@mui/material\";\nimport { CenterContainer } from \"../center-container\";\nimport { SelectInputProps } from \"@mui/material/Select/SelectInput\";\n\nexport type SelectSize = \"small\" | \"medium\";\n\nexport interface SelectProps<T> {\n  label: string;\n  value: T;\n  loading?: boolean;\n  fetching?: boolean;\n  size?: SelectSize;\n  color?: string;\n  fullWidth?: boolean;\n  children?: ReactNode;\n  onChange?: SelectInputProps<T>[\"onChange\"];\n}\n\nconst ProgressSize: Record<SelectSize, number> = {\n  small: 15,\n  medium: 20,\n};\n\nexport const Select = <T extends ReactNode>({\n  label,\n  value,\n  loading = false,\n  fetching = false,\n  size = \"medium\",\n  fullWidth = false,\n  color,\n  children,\n  onChange,\n}: SelectProps<T>) => {\n  const id = useId();\n\n  const renderValue = (value: T): ReactNode => {\n    if (fetching) {\n      return (\n        <CenterContainer centerVertical centerHorizontal>\n          <CircularProgress color=\"inherit\" size={ProgressSize[size]} />\n        </CenterContainer>\n      );\n    }\n\n    if (loading) {\n      return (\n        <Box display=\"flex\" flexDirection=\"column\">\n          {value}\n          <LinearProgress\n            color=\"inherit\"\n            sx={{ position: \"absolute\", left: 0, right: 0, bottom: 0 }}\n          />\n        </Box>\n      );\n    }\n\n    return value;\n  };\n\n  const StyledFormControl = styled(FormControl)(() => {\n    if (!color) {\n      return {};\n    }\n\n    return {\n      label: {\n        color,\n      },\n      \".MuiOutlinedInput-notchedOutline\": {\n        borderColor: `${color} !important`,\n      },\n      \".MuiInputBase-root\": {\n        color,\n      },\n      \".MuiSelect-icon\": {\n        fill: color,\n      },\n    };\n  });\n\n  return (\n    <StyledFormControl fullWidth={fullWidth}>\n      <InputLabel id={id}>{label}</InputLabel>\n      <MuiSelect\n        labelId={id}\n        id={id}\n        value={value}\n        label={label}\n        onChange={onChange}\n        disabled={fetching}\n        size={size}\n        renderValue={renderValue}\n      >\n        {children}\n      </MuiSelect>\n    </StyledFormControl>\n  );\n};\n"],"names":["CenterContainer","children","centerVertical","centerHorizontal","sx","React","createElement","Box","width","height","display","flexDirection","justifyContent","alignItems","ProgressSize","small","medium","label","value","loading","fetching","size","fullWidth","color","onChange","id","useId","StyledFormControl","styled","FormControl","borderColor","fill","InputLabel","MuiSelect","Select","labelId","disabled","renderValue","CircularProgress","LinearProgress","position","left","right","bottom"],"mappings":"yMAUgB,SAAAA,GAAgBC,SAC9BA,EAAQC,eACRA,GAAiB,EAAIC,iBACrBA,GAAmB,EAAIC,GACvBA,IAEA,OACEC,EAAA,QAAAC,cAACC,MAAG,CACFC,MAAO,EACPC,OAAQ,EACRL,GAAI,IACCA,EACHM,QAAS,OACTC,cAAe,SACfC,eAAgBV,EAAiB,SAAW,aAC5CW,WAAYV,EAAmB,SAAW,eAG3CF,EAGP,CCJA,MAAMa,EAA2C,CAC/CC,MAAO,GACPC,OAAQ,mBAGY,EACpBC,QACAC,QACAC,WAAU,EACVC,YAAW,EACXC,OAAO,SACPC,aAAY,EACZC,QACAtB,WACAuB,eAEA,MAAMC,EAAKC,EAAAA,QA0BLC,EAAoBC,EAAAA,OAAOC,EAAWA,YAAlBD,EAAoB,IACvCL,EAIE,CACLN,MAAO,CACLM,SAEF,mCAAoC,CAClCO,YAAa,GAAGP,gBAElB,qBAAsB,CACpBA,SAEF,kBAAmB,CACjBQ,KAAMR,IAdD,KAmBX,OACElB,EAAC,QAAAC,cAAAqB,EAAkB,CAAAL,UAAWA,GAC5BjB,EAAA,QAAAC,cAAC0B,EAAUA,WAAC,CAAAP,GAAIA,GAAKR,GACrBZ,UAAAC,cAAC2B,EAASC,OACR,CAAAC,QAASV,EACTA,GAAIA,EACJP,MAAOA,EACPD,MAAOA,EACPO,SAAUA,EACVY,SAAUhB,EACVC,KAAMA,EACNgB,YAxDenB,GACfE,EAEAf,EAAAA,QAACC,cAAAN,EAAgB,CAAAE,kBAAeC,kBAAgB,GAC9CE,EAAAA,QAAAC,cAACgC,mBAAgB,CAACf,MAAM,UAAUF,KAAMP,EAAaO,MAKvDF,EAEAd,EAAAA,QAACC,cAAAC,EAAGA,IAAC,CAAAG,QAAQ,OAAOC,cAAc,UAC/BO,EACDb,EAAA,QAAAC,cAACiC,iBAAc,CACbhB,MAAM,UACNnB,GAAI,CAAEoC,SAAU,WAAYC,KAAM,EAAGC,MAAO,EAAGC,OAAQ,MAMxDzB,GAqCFjB,GAGL"}
+{"version":3,"file":"index.js","sources":["../../../src/center-container/center-container.tsx","../../../src/select/select.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport Box from \"@mui/material/Box\";\nimport { SxProps, Theme } from \"@mui/material/styles\";\n\nexport interface CenterContainerProps {\n  children: ReactNode | undefined;\n  centerVertical?: boolean;\n  centerHorizontal?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function CenterContainer({\n  children,\n  centerVertical = true,\n  centerHorizontal = true,\n  sx,\n}: CenterContainerProps) {\n  return (\n    <Box\n      width={1}\n      height={1}\n      sx={{\n        ...sx,\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: centerVertical ? \"center\" : \"flex-start\",\n        alignItems: centerHorizontal ? \"center\" : \"flex-start\",\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n","import { ReactNode, useId } from \"react\";\nimport { styled } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport CircularProgress from \"@mui/material/CircularProgress\";\nimport FormControl from \"@mui/material/FormControl\";\nimport InputLabel from \"@mui/material/InputLabel\";\nimport LinearProgress from \"@mui/material/LinearProgress\";\nimport MuiSelect from \"@mui/material/Select\";\nimport { CenterContainer } from \"../center-container\";\nimport { SelectInputProps } from \"@mui/material/Select/SelectInput\";\n\nexport type SelectSize = \"small\" | \"medium\";\n\nexport interface SelectProps<T> {\n  label: string;\n  value: T;\n  loading?: boolean;\n  fetching?: boolean;\n  size?: SelectSize;\n  color?: string;\n  fullWidth?: boolean;\n  children?: ReactNode;\n  onChange?: SelectInputProps<T>[\"onChange\"];\n}\n\nconst ProgressSize: Record<SelectSize, number> = {\n  small: 15,\n  medium: 20,\n};\n\nexport const Select = <T extends ReactNode>({\n  label,\n  value,\n  loading = false,\n  fetching = false,\n  size = \"medium\",\n  fullWidth = false,\n  color,\n  children,\n  onChange,\n}: SelectProps<T>) => {\n  const id = useId();\n\n  const renderValue = (value: T): ReactNode => {\n    if (fetching) {\n      return (\n        <CenterContainer centerVertical centerHorizontal>\n          <CircularProgress color=\"inherit\" size={ProgressSize[size]} />\n        </CenterContainer>\n      );\n    }\n\n    if (loading) {\n      return (\n        <Box display=\"flex\" flexDirection=\"column\">\n          {value}\n          <LinearProgress\n            color=\"inherit\"\n            sx={{ position: \"absolute\", left: 0, right: 0, bottom: 0 }}\n          />\n        </Box>\n      );\n    }\n\n    return value;\n  };\n\n  const StyledFormControl = styled(FormControl)(() => {\n    if (!color) {\n      return {};\n    }\n\n    return {\n      label: {\n        color,\n      },\n      \".MuiOutlinedInput-notchedOutline\": {\n        borderColor: `${color} !important`,\n      },\n      \".MuiInputBase-root\": {\n        color,\n      },\n      \".MuiSelect-icon\": {\n        fill: color,\n      },\n    };\n  });\n\n  return (\n    <StyledFormControl fullWidth={fullWidth}>\n      <InputLabel id={id}>{label}</InputLabel>\n      <MuiSelect\n        labelId={id}\n        id={id}\n        value={value}\n        label={label}\n        onChange={onChange}\n        disabled={fetching}\n        size={size}\n        renderValue={renderValue}\n      >\n        {children}\n      </MuiSelect>\n    </StyledFormControl>\n  );\n};\n"],"names":["CenterContainer","children","centerVertical","centerHorizontal","sx","_jsx","Box","width","height","display","flexDirection","justifyContent","alignItems","ProgressSize","small","medium","label","value","loading","fetching","size","fullWidth","color","onChange","id","useId","StyledFormControl","styled","FormControl","borderColor","fill","_jsxs","InputLabel","MuiSelect","labelId","disabled","renderValue","CircularProgress","jsxs","LinearProgress","position","left","right","bottom"],"mappings":"sfAWgB,SAAAA,GAAgBC,SAC9BA,EAAQC,eACRA,GAAiB,EAAIC,iBACrBA,GAAmB,EAAIC,GACvBA,IAEA,OACEC,EAAAA,IAACC,EAAAA,QAAG,CACFC,MAAO,EACPC,OAAQ,EACRJ,GAAI,IACCA,EACHK,QAAS,OACTC,cAAe,SACfC,eAAgBT,EAAiB,SAAW,aAC5CU,WAAYT,EAAmB,SAAW,cAG3CF,SAAAA,GAGP,CCPA,MAAMY,EAA2C,CAC/CC,MAAO,GACPC,OAAQ,mBAGY,EACpBC,QACAC,QACAC,WAAU,EACVC,YAAW,EACXC,OAAO,SACPC,aAAY,EACZC,QACArB,WACAsB,eAEA,MAAMC,EAAKC,EAAAA,QA0BLC,EAAoBC,EAAAA,OAAOC,EAAW,QAAlBD,EAAoB,IACvCL,EAIE,CACLN,MAAO,CACLM,SAEF,mCAAoC,CAClCO,YAAa,GAAGP,gBAElB,qBAAsB,CACpBA,SAEF,kBAAmB,CACjBQ,KAAMR,IAdD,KAmBX,OACES,EAAAA,KAACL,EAAkB,CAAAL,UAAWA,EAC5BpB,SAAA,CAAAI,EAAAA,IAAC2B,EAAU,QAAA,CAACR,GAAIA,EAAKvB,SAAAe,IACrBX,MAAC4B,EAAAA,QACC,CAAAC,QAASV,EACTA,GAAIA,EACJP,MAAOA,EACPD,MAAOA,EACPO,SAAUA,EACVY,SAAUhB,EACVC,KAAMA,EACNgB,YAxDenB,GACfE,EAEAd,EAAAA,IAACL,EAAgB,CAAAE,kBAAeC,kBAAgB,EAAAF,SAC9CI,EAAAA,IAACgC,EAAAA,QAAiB,CAAAf,MAAM,UAAUF,KAAMP,EAAaO,OAKvDF,EAEAa,EAACO,KAAAhC,EAAG,SAACG,QAAQ,OAAOC,cAAc,SAAQT,SAAA,CACvCgB,EACDZ,MAACkC,EAAAA,QACC,CAAAjB,MAAM,UACNlB,GAAI,CAAEoC,SAAU,WAAYC,KAAM,EAAGC,MAAO,EAAGC,OAAQ,QAMxD1B,EAmCqBhB,SAEvBA,MAGL"}