@chem-po/react-web 0.0.44 → 0.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chem-po/react-web",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,8 +40,8 @@
     "react-window-infinite-loader": "^1.0.9",
     "@hello-pangea/dnd": "^18.0.1",
     "zustand": "^4.3.3",
-    "@chem-po/core": "0.0.44",
-    "@chem-po/react": "0.0.44"
+    "@chem-po/core": "0.0.46",
+    "@chem-po/react": "0.0.46"
   },
   "peerDependencies": {
     "react": "~19.1.0",

package/src/components/form/input/Editable.tsx

@@ -8,7 +8,7 @@ import {
   useColorModeValue,
   useEditable,
 } from '@chem-po/react'
-import React, { CSSProperties, useCallback, useEffect, useMemo } from 'react'
+import React, { CSSProperties, useCallback, useEffect } from 'react'
 import { CustomInputProps } from '../../../types/forms'
 import { LoadingOverlay } from '../../loading/Loading'
 import { UploadProgress } from '../UploadProgress'
@@ -30,7 +30,7 @@ export const Editable = <T extends Field>({
 }: EditableProps<CSSProperties, CSSProperties, T>) => {
   const {
     inputRef,
-    setValue,
+    onChange,
     isLoading,
     uploads,
     editHovered,
@@ -39,6 +39,7 @@ export const Editable = <T extends Field>({
     isEditing,
     value,
     setEditHovered,
+    shouldSubmitOnChange,
     submit,
     submitValue,
   } = useEditable({
@@ -49,10 +50,7 @@ export const Editable = <T extends Field>({
     onEditOpen,
     onEditClose,
   })
-  const alwaysEditing = useMemo(
-    () => field && (field._type === 'file' || field._type === 'boolean'),
-    [field],
-  )
+
   useEffect(() => {
     if (isEditing) {
       inputRef.current?.focus()
@@ -98,21 +96,21 @@ export const Editable = <T extends Field>({
           border={`1px dashed ${isEditing ? editingBorderColor : 'transparent'}`}
           flex={1}
           minW="0">
-          {isEditing || alwaysEditing ? (
+          {isEditing || shouldSubmitOnChange ? (
             <RenderInput
               ref={inputRef}
               value={value}
               inEditable
               style={{ padding: 0, ...style }}
               size={size}
-              onChange={alwaysEditing ? v => submitValue(v) : setValue}
+              onChange={shouldSubmitOnChange ? v => void submitValue(v) : onChange}
               inputStyle={style}
             />
           ) : (
             <RenderView inEditable size={size} value={value} />
           )}
         </Flex>
-        {alwaysEditing ? null : (
+        {shouldSubmitOnChange ? null : (
           <>
             <IconButton
               aria-label="Edit"
@@ -122,7 +120,7 @@ export const Editable = <T extends Field>({
               onMouseLeave={() => setEditHovered(false)}
               onClick={() => {
                 if (isEditing) {
-                  setValue(value)
+                  onChange(value)
                   handleEditClose()
                 } else handleEditOpen()
               }}

package/src/components/form/input/boolean/index.tsx

@@ -1,6 +1,6 @@
 import { Checkbox, Flex, Switch, Text } from '@chakra-ui/react'
 import { InputRef } from '@chem-po/core'
-import { BooleanField } from '@chem-po/react'
+import { BooleanField, useBooleanFieldText } from '@chem-po/react'
 import React, { ForwardedRef, forwardRef, useImperativeHandle } from 'react'
 import { FieldProps } from '../types'
 
@@ -8,14 +8,14 @@ const BaseCheckboxComponent = (
   { field, input: { onChange, value, ...input } }: FieldProps<BooleanField>,
   ref: ForwardedRef<InputRef>,
 ) => {
-  const { placeholder } = field
   useImperativeHandle(ref, () => ({
     focus: () => {},
     blur: () => {},
   }))
+  const text = useBooleanFieldText(field, value)
   return (
     <Checkbox isChecked={value} onChange={e => onChange(e.target.checked)} {...input}>
-      {placeholder}
+      {text}
     </Checkbox>
   )
 }
@@ -28,16 +28,16 @@ const BaseSwitchComponent = (
   { field, input: { onChange, value, ...input } }: FieldProps<BooleanField>,
   ref: ForwardedRef<InputRef>,
 ) => {
-  const { placeholder } = field
   useImperativeHandle(ref, () => ({
     focus: () => {},
     blur: () => {},
   }))
+  const text = useBooleanFieldText(field, value)
   return (
     <Flex gap={1} align="center">
       <Switch isChecked={value} onChange={e => onChange(e.target.checked)} {...input} />
       <Text fontWeight={600} opacity={value ? 0.9 : 0.6}>
-        {placeholder}
+        {text}
       </Text>
     </Flex>
   )

package/src/components/form/input/file.tsx

@@ -326,7 +326,7 @@ export const FileComponent = forwardRef<InputRef, FieldProps<FileField>>(
       },
     }))
     const isImageField = useMemo(
-      () => field.accept && field.accept.length === 1 && field.accept[0] === 'image',
+      () => field.accept?.length === 1 && field.accept[0] === 'image',
       [field],
     )
     const imgOptions = useMemo<ImageViewOptions | undefined>(