@wavv/ui 2.4.13 → 2.4.15-alpha.1

package/build/components/Audio.js

@@ -13,6 +13,9 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
     const [displayCurrent, setDisplayCurrent] = useState('');
     const [displayDuration, setDisplayDuration] = useState('0:00');
     const audioRef = useRef(null);
+    const isSeekingRef = useRef(false);
+    const seekedTimeoutRef = useRef(null);
+    const END_EPSILON_SECONDS = 0.75;
     const { height = 30, showHoverTime = false, playedColor, unplayedColor } = 'object' == typeof waveform ? waveform : {};
     const play = ()=>{
         const { current: audio } = audioRef;
@@ -88,6 +91,9 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
         src,
         fallbackDuration
     ]);
+    useEffect(()=>()=>{
+            if (seekedTimeoutRef.current) clearTimeout(seekedTimeoutRef.current);
+        }, []);
     const formatTime = (time)=>{
         if (!Number.isFinite(time) || time < 0) return '0:00';
         const mins = Math.floor(time / 60);
@@ -95,6 +101,7 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
         return `${mins}:${secs.toString().padStart(2, '0')}`;
     };
     const updateProgress = ()=>{
+        if (isSeekingRef.current) return;
         const { current: audio } = audioRef;
         if (audio) {
             const { currentTime } = audio;
@@ -128,9 +135,27 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
             }, 100);
         }
     };
+    const handleSeeked = ()=>{
+        isSeekingRef.current = false;
+        if (seekedTimeoutRef.current) {
+            clearTimeout(seekedTimeoutRef.current);
+            seekedTimeoutRef.current = null;
+        }
+    };
     const handleControlGrab = (value)=>{
         const sliderPosition = Array.isArray(value) ? value[0] : value;
-        if (audioRef?.current && Number.isFinite(sliderPosition) && Number.isFinite(totalDuration) && totalDuration > 0) audioRef.current.currentTime = Math.max(0, Math.min(sliderPosition, totalDuration));
+        if (!audioRef?.current || !Number.isFinite(sliderPosition) || !Number.isFinite(totalDuration) || totalDuration <= 0) return;
+        const maxSeekTarget = Math.max(0, totalDuration - END_EPSILON_SECONDS);
+        const clamped = Math.min(Math.max(sliderPosition, 0), maxSeekTarget);
+        isSeekingRef.current = true;
+        if (seekedTimeoutRef.current) clearTimeout(seekedTimeoutRef.current);
+        seekedTimeoutRef.current = setTimeout(()=>{
+            isSeekingRef.current = false;
+            seekedTimeoutRef.current = null;
+        }, 300);
+        setProgress(clamped);
+        setDisplayCurrent(formatTime(clamped));
+        audioRef.current.currentTime = clamped;
     };
     const hideSlider = isCleared && hideSliderOnStop;
     const hideTime = isCleared && hideTimeOnStop;
@@ -199,6 +224,7 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
                 onEmptied: handleAudioStop,
                 onEnded: handleAudioStop,
                 onTimeUpdate: updateProgress,
+                onSeeked: handleSeeked,
                 onDurationChange: handleLoad,
                 onLoadedMetadata: handleLoad,
                 onLoadedData: handleLoad,

package/build/components/DraftEditor.js

@@ -84,7 +84,7 @@ const DraftEditor = ({ value, onChange, onEnterKey, onFocus, onBlur, mergeFields
         height: height,
         editorMaxHeight: editorMaxHeight,
         noPadding: noPadding || textOnly,
-        readOnly: readOnly,
+        readOnly: readOnly || disabled,
         color: color,
         overflow: overflow,
         clampLines: clampLines,
@@ -106,7 +106,7 @@ const DraftEditor = ({ value, onChange, onEnterKey, onFocus, onBlur, mergeFields
         className: className,
         children: [
             /*#__PURE__*/ jsxs(InputWrapper, {
-                readOnly: readOnly,
+                readOnly: readOnly || disabled,
                 children: [
                     label && /*#__PURE__*/ jsx(Label, {
                         filled: isInputFilled(value),
@@ -119,7 +119,7 @@ const DraftEditor = ({ value, onChange, onEnterKey, onFocus, onBlur, mergeFields
                         editorState: editorState,
                         onChange: handleChange,
                         placeholder: placeholder,
-                        readOnly: readOnly,
+                        readOnly: readOnly || disabled,
                         handleReturn: handleEditorReturn,
                         handlePastedText: handlePaste,
                         onFocus: handleFocus,
@@ -143,10 +143,10 @@ const EditorContainer = styled(InputContainer)(({ theme, height, noPadding, disa
         color: disabled ? theme.input.color.disabled : color || theme.input.color.default,
         cursor: readOnly ? 'inherit' : 'text',
         '&:hover': {
-            backgroundColor: readOnly ? theme.input.background.default : void 0,
-            borderBottom: readOnly ? `1px solid ${theme.input.borderColor.default}` : void 0,
+            backgroundColor: readOnly && !disabled ? theme.input.background.default : void 0,
+            borderBottom: readOnly && !disabled ? `1px solid ${theme.input.borderColor.default}` : void 0,
             Label: {
-                color: readOnly ? theme.input.labelColor.filled : void 0
+                color: readOnly && !disabled ? theme.input.labelColor.filled : void 0
             }
         }
     }), ({ theme, height, hasLabel, editorMaxHeight, overflow, clampLines, hideEditor, fontSize, noPadding, filled })=>({

package/build/components/Select.js

@@ -27,11 +27,11 @@ const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fo
     const [internalValue, setInternalValue] = useState(()=>{
         if (isMultiple) {
             const defaultValueArray = defaultValue;
-            return Array.isArray(defaultValueArray) ? defaultValueArray.map(String) : defaultValueArray ? [
-                String(defaultValueArray)
+            return Array.isArray(defaultValueArray) ? defaultValueArray : defaultValueArray ? [
+                defaultValueArray
             ] : [];
         }
-        return defaultValue ? String(defaultValue) : '';
+        return defaultValue ?? '';
     });
     const isControlled = void 0 !== value;
     const currentValue = isControlled ? value : internalValue;

package/build/components/typeDefs/selectionTypes.d.ts

@@ -68,9 +68,9 @@ type SingleSelectInputProps = BaseSelectInputProps & {
     /** The selection mode for the select */
     selectionMode?: 'single';
     /** The controlled value of the input */
-    value?: Key;
+    value?: string;
     /** The uncontrolled initial value of the input */
-    defaultValue?: Key;
+    defaultValue?: string;
     /** The function to be called when an option is selected */
     onChange?: (key: string) => void;
 };
@@ -78,9 +78,9 @@ type MultipleSelectInputProps = BaseSelectInputProps & {
     /** The selection mode for the select */
     selectionMode: 'multiple';
     /** The controlled value of the input */
-    value?: Key | Key[];
+    value?: string | string[];
     /** The uncontrolled initial value of the input */
-    defaultValue?: Key | Key[];
+    defaultValue?: string | string[];
     onChange?: (keys: string | string[]) => void;
 };
 export type SelectInputProps = SingleSelectInputProps | MultipleSelectInputProps;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.4.13",
+	"version": "2.4.15-alpha.1",
 	"type": "module",
 	"exports": {
 		".": {