@optiaxiom/proteus 0.2.6 → 0.2.7

package/dist/esm/assets/src/proteus-chart/{ProteusChart.css.ts.vanilla-UlV5bM-e.css → ProteusChart.css.ts.vanilla-BO0-TwP_.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._10u9e24;
-@layer optiaxiom._10u9e24 {
+@layer optiaxiom._1fgw1dd;
+@layer optiaxiom._1fgw1dd {
   .ProteusChart__jmlqij1 {
     border-radius: 16px;
   }

package/dist/esm/assets/src/proteus-chart/{ProteusChartTooltipContent.css.ts.vanilla-DFvGuq6I.css → ProteusChartTooltipContent.css.ts.vanilla-ETMXhILd.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._10u9e24;
-@layer optiaxiom._10u9e24 {
+@layer optiaxiom._1fgw1dd;
+@layer optiaxiom._1fgw1dd {
   .ProteusChartTooltipContent__1gsvq810 {
     min-width: 128px;
     position: absolute;

package/dist/esm/assets/src/proteus-document/{ProteusDocumentShell.css.ts.vanilla-C3__yEhR.css → ProteusDocumentShell.css.ts.vanilla-CDxANCyw.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._10u9e24;
-@layer optiaxiom._10u9e24 {
+@layer optiaxiom._1fgw1dd;
+@layer optiaxiom._1fgw1dd {
   .ProteusDocumentShell__vpuvfj1 {
     margin: -4px;
   }

package/dist/esm/assets/src/proteus-image-carousel/{ProteusImageCarousel.css.ts.vanilla-bCVJ5JAJ.css → ProteusImageCarousel.css.ts.vanilla-CVLALefb.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._10u9e24;
-@layer optiaxiom._10u9e24 {
+@layer optiaxiom._1fgw1dd;
+@layer optiaxiom._1fgw1dd {
   .ProteusImageCarousel__1t6qej70 {
     outline: none;
     user-select: none;

package/dist/esm/assets/src/proteus-question/{ProteusQuestion.css.ts.vanilla-usVGixHc.css → ProteusQuestion.css.ts.vanilla-DKDk8HIF.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._10u9e24;
-@layer optiaxiom._10u9e24 {
+@layer optiaxiom._1fgw1dd;
+@layer optiaxiom._1fgw1dd {
   .ProteusQuestion__8f590p0 {
     outline: none;
   }

package/dist/esm/hooks/useObserveValue.js

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+
+const useObserveValue = (inputRef, setValue) => {
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const descriptor = Object.getOwnPropertyDescriptor(
+      input.constructor.prototype,
+      "value"
+    );
+    Object.defineProperty(input, "value", {
+      configurable: true,
+      enumerable: true,
+      get: function() {
+        return descriptor?.get?.call(input);
+      },
+      set: function(value) {
+        descriptor?.set?.call(input, value);
+      }
+    });
+  }, [inputRef, setValue]);
+  return (value) => {
+    if (!inputRef.current) {
+      return;
+    }
+    inputRef.current.value = value;
+    inputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+  };
+};
+
+export { useObserveValue };

package/dist/esm/proteus-chart/ProteusChart-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-UlV5bM-e.css';
+import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-BO0-TwP_.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var chart = recipe({base:[{border:'1',borderColor:'border.tertiary',fontSize:'sm',p:'16'},'ProteusChart__jmlqij1','ProteusChart__jmlqij0']});

package/dist/esm/proteus-chart/ProteusChartTooltipContent-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-DFvGuq6I.css';
+import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-ETMXhILd.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var tooltip = recipe({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'grid',fontSize:'sm',gap:'6',pointerEvents:'none',px:'8',py:'10',rounded:'lg',shadow:'lg',transition:'all',z:'popover'},'ProteusChartTooltipContent__1gsvq810']});

package/dist/esm/proteus-document/ProteusDocumentShell-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-C3__yEhR.css';
+import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-CDxANCyw.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var body = recipe({base:[{flexDirection:'column',gap:'16'},'ProteusDocumentShell__vpuvfj0'],variants:{truncate:{false:{},true:[{maxH:'sm',overflow:'auto',p:'4'},'ProteusDocumentShell__vpuvfj1']}}});

package/dist/esm/proteus-file-upload/ProteusFileUpload.js

@@ -1,19 +1,26 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Flex } from '@optiaxiom/react';
-import { FileUpload, FileUploadList, FileUploadDropzone, FileUploadTrigger } from '@optiaxiom/react/unstable';
-import { useState, useCallback } from 'react';
+import { FileUpload, VisuallyHidden, FileUploadList, FileUploadDropzone, FileUploadTrigger } from '@optiaxiom/react/unstable';
+import { useRef, useState, useCallback } from 'react';
+import { useObserveValue } from '../hooks/useObserveValue.js';
 import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
 
-function ProteusFileUpload({ accept, name }) {
+function ProteusFileUpload({
+  accept,
+  name,
+  required
+}) {
   const { onDataChange, onUpload, readOnly } = useProteusDocumentContext(
     "@optiaxiom/proteus/ProteusFileUpload"
   );
   const { path: parentPath } = useProteusDocumentPathContext(
     "@optiaxiom/proteus/ProteusFileUpload"
   );
+  const inputRef = useRef(null);
   const [item, setItem] = useState(null);
+  const forceValueChange = useObserveValue(inputRef);
   const writeUrl = useCallback(
     (url) => {
       if (!name)
@@ -30,34 +37,55 @@ function ProteusFileUpload({ accept, name }) {
       const file = incoming[0];
       setItem({ file, status: "uploading" });
       writeUrl(null);
+      if (inputRef.current) {
+        forceValueChange("");
+      }
       try {
         const url = await onUpload(file);
         setItem(
           (curr) => curr?.file === file ? { file, status: "complete" } : curr
         );
         writeUrl(url);
+        if (inputRef.current) {
+          forceValueChange("1");
+        }
       } catch {
         setItem(
           (curr) => curr?.file === file ? { file, status: "error" } : curr
         );
       }
     },
-    [onUpload, readOnly, writeUrl]
+    [forceValueChange, onUpload, readOnly, writeUrl]
   );
   const handleRemove = useCallback(() => {
     setItem(null);
     writeUrl(null);
-  }, [writeUrl]);
-  return /* @__PURE__ */ jsx(
+    if (inputRef.current) {
+      forceValueChange("");
+    }
+  }, [forceValueChange, writeUrl]);
+  return /* @__PURE__ */ jsxs(
     FileUpload,
     {
       accept,
       disabled: !onUpload || readOnly,
       onFilesDrop: handleFilesDrop,
-      children: item ? /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: "8", children: [
-        /* @__PURE__ */ jsx(FileUploadList, { items: [item], onRemove: handleRemove }),
-        /* @__PURE__ */ jsx(FileUploadDropzone, { overlay: true })
-      ] }) : /* @__PURE__ */ jsx(FileUploadDropzone, { children: /* @__PURE__ */ jsx(FileUploadTrigger, {}) })
+      children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            "aria-hidden": true,
+            name,
+            ref: inputRef,
+            required,
+            tabIndex: -1
+          }
+        ) }),
+        item ? /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: "8", children: [
+          /* @__PURE__ */ jsx(FileUploadList, { items: [item], onRemove: handleRemove }),
+          /* @__PURE__ */ jsx(FileUploadDropzone, { overlay: true })
+        ] }) : /* @__PURE__ */ jsx(FileUploadDropzone, { children: /* @__PURE__ */ jsx(FileUploadTrigger, {}) })
+      ]
     }
   );
 }

package/dist/esm/proteus-image-carousel/ProteusImageCarousel-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-bCVJ5JAJ.css';
+import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-CVLALefb.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var carousel = recipe({base:[{flexDirection:'column',gap:'12'},'ProteusImageCarousel__1t6qej70']});

package/dist/esm/proteus-question/ProteusQuestion-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-usVGixHc.css';
+import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-DKDk8HIF.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var addon = recipe({base:[{display:'grid',fontWeight:'500',placeItems:'center',rounded:'lg',size:'md',transition:'colors'},'ProteusQuestion__8f590p3'],variants:{cursor:{pointer:{cursor:'pointer'}}}});

package/dist/index.d.ts

@@ -94,7 +94,7 @@ type ProteusFileUploadProps = {
      */
     required?: boolean;
 };
-declare function ProteusFileUpload({ accept, name }: ProteusFileUploadProps): react_jsx_runtime.JSX.Element;
+declare function ProteusFileUpload({ accept, name, required, }: ProteusFileUploadProps): react_jsx_runtime.JSX.Element;
 declare namespace ProteusFileUpload {
     var displayName: string;
 }

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "files": [
     "dist/**",
     "LICENSE"
@@ -18,6 +18,7 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/esm/index.js"
     },
+    "./package.json": "./package.json",
     "./spec": {
       "types": "./dist/spec.d.ts",
       "import": "./dist/esm/spec.js"
@@ -38,8 +39,8 @@
     "embla-carousel-react": "^8.6.0",
     "jsonpointer": "^5.0.1",
     "recharts": "^3.8.1",
-    "@optiaxiom/icons": "^1.1.1",
-    "@optiaxiom/react": "^1.9.31"
+    "@optiaxiom/icons": "^1.1.2",
+    "@optiaxiom/react": "^1.9.32"
   },
   "devDependencies": {
     "@emotion/hash": "^0.9.2",