@byline/ui 2.2.9 → 2.3.0

package/src/forms/form-renderer.tsx

@@ -32,7 +32,7 @@ import { FormProvider, useFieldValue, useFormContext } from './form-context'
 import styles from './form-renderer.module.css'
 import { useNavigationGuardAdapter } from './navigation-guard'
 import { PathWidget } from './path-widget'
-import { executeUploads } from './upload-executor'
+import { executeUploadsWithProgress } from './upload-executor'
 import type { UseNavigationGuard } from './navigation-guard'
 
 /** Metadata about a previously published version that is still live. */
@@ -321,6 +321,7 @@ const FormContent = ({
     setFieldError,
     getPendingUploads,
     clearPendingUploads,
+    setFieldUploading,
   } = useFormContext()
 
   const [errors, setErrors] = useState(initialErrors)
@@ -511,7 +512,13 @@ const FormContent = ({
       if (pendingUploads.size > 0) {
         setIsUploading(true)
         try {
-          const uploadResult = await executeUploads(pendingUploads, uploadField)
+          const uploadResult = await executeUploadsWithProgress(
+            pendingUploads,
+            uploadField,
+            ({ fieldPath, status }) => {
+              setFieldUploading(fieldPath, status === 'uploading')
+            }
+          )
 
           // Check for upload errors
           if (!uploadResult.allSucceeded) {

package/src/icons/index.ts

@@ -49,6 +49,7 @@ export * from './stopwatch-icon.js'
 export * from './success-icon.js'
 export * from './user-icon.js'
 export * from './users-icon.js'
+export * from './video-icon.js'
 export * from './wallet-icon.js'
 export * from './warning-icon.js'
 export * from './x-icon.js'

package/src/icons/video-icon.tsx

@@ -0,0 +1,32 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const VideoIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('video-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4z" />
+        <path d="M3 6m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" />
+      </svg>
+    </IconElement>
+  )
+}
+
+VideoIcon.displayName = 'VideoIcon'

package/src/react.ts

@@ -49,6 +49,7 @@ export * from './fields/draggable-context-menu.js'
 export * from './fields/field-helpers.js'
 export * from './fields/field-renderer.js'
 export * from './fields/file/file-field.js'
+export * from './fields/file/file-upload-field.js'
 export * from './fields/group/group-field.js'
 export * from './fields/image/image-field.js'
 export * from './fields/image/image-upload-field.js'