@onesy/ui-react 1.0.28 → 1.0.29

package/Accordion/Accordion.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IColor, IElement, IElementReference, IElevation, IPropsAny, ITonal } from '../types';
-type TPadding = 'start' | 'end' | 'both' | 'none';
+declare type TPadding = 'start' | 'end' | 'both' | 'none';
 export interface IAccordion extends ISurface {
     tonal?: ITonal;
     color?: IColor;

package/Append/Append.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IChildren, IHTMLElement, IStyle } from '../types';
-export type TAppendPadding = Array<number>;
+export declare type TAppendPadding = Array<number>;
 export interface IAppendValue {
     x?: number;
     y?: number;

package/AudioRecorder/AudioRecorder.js

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
+const webm_duration_fix_1 = __importDefault(require("webm-duration-fix"));
 const utils_1 = require("@onesy/utils");
 const style_react_1 = require("@onesy/style-react");
 const date_1 = require("@onesy/date");
@@ -91,6 +92,7 @@ const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
         value: react_1.default.useRef(null),
         animationFrame: react_1.default.useRef(null),
         onData: react_1.default.useRef(null),
+        previousAction: react_1.default.useRef('start'),
         // fallback to duration calculation on desktop
         // ie. for mobile where we can't easily determine duration
         duration: react_1.default.useRef(0)
@@ -148,6 +150,8 @@ const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
         setStatus('running');
         if ((0, utils_1.is)('function', onStart_))
             onStart_(event);
+        // previous action
+        refs.previousAction.current = 'start';
     }, [onStart_, onError]);
     const onPause = react_1.default.useCallback((event) => {
         // media recorder
@@ -161,6 +165,8 @@ const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
         setStatus('paused');
         if ((0, utils_1.is)('function', onPause_))
             onPause_(event);
+        // previous action
+        refs.previousAction.current = 'pause';
     }, [onPause_]);
     const onStop = react_1.default.useCallback((event) => {
         // media recorder
@@ -178,21 +184,27 @@ const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
         var _a;
         // Stop
         onStop(event);
-        // add so far to duration
-        refs.duration.current += date_1.OnesyDate.milliseconds - refs.startedAt.current;
+        // duration
+        if (refs.previousAction.current === 'resume') {
+            // add so far to duration
+            refs.duration.current += date_1.OnesyDate.milliseconds - refs.startedAt.current;
+        }
+        const meta = {
+            // duration in seconds
+            duration: refs.duration.current / 1e3
+        };
         await (0, utils_1.wait)(40);
         // Get the blob
         const mimeType = (_a = refs.mediaRecorder.current) === null || _a === void 0 ? void 0 : _a.mimeType;
         let blob = new Blob(refs.mediaRecorderBytes.current, { type: mimeType });
+        try {
+            blob = await (0, webm_duration_fix_1.default)(blob);
+        }
+        catch (error) {
+            console.log('AudioRecorder onConfirm error', error);
+        }
         // clean up
         refs.mediaRecorderBytes.current = [];
-        const meta = {
-            // duration in seconds
-            duration: refs.duration.current / 1e3
-        };
-        const { blob: blobAudioFix, error } = await (0, utils_2.audioFix)(blob, meta.duration);
-        if (!error)
-            blob = blobAudioFix;
         if ((0, utils_1.is)('function', onConfirm_))
             onConfirm_(blob, meta);
     }, [onStop, onConfirm_]);
@@ -207,6 +219,8 @@ const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
         setStatus('running');
         if ((0, utils_1.is)('function', onResume_))
             onResume_(event);
+        // previous action
+        refs.previousAction.current = 'resume';
     }, [onResume_]);
     const valueFormat = (valueNew_) => {
         let valueNew = '';

package/AutoComplete/AutoComplete.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ITextField } from '../TextField/TextField';
 import { IElement, IElementReference, IPropsAny } from '../types';
-export type TAutoCompleteValue = string | Array<string>;
-export type TAutoCompleteOption = {
+export declare type TAutoCompleteValue = string | Array<string>;
+export declare type TAutoCompleteOption = {
     label?: string;
     version?: 'text' | 'subheader';
     noOptions?: boolean;

package/Calendar/Calendar.d.ts

@@ -3,10 +3,10 @@ import { OnesyDate } from '@onesy/date';
 import { ICalenarDays, TCalendarMonthCalendar, TCalendarMonthValue } from '../CalendarMonth/CalendarMonth';
 import { ISurface } from '../Surface/Surface';
 import { IColor, IElementReference, IPropsAny, ISize, ITonal } from '../types';
-export type TGetOnesyDates = (value: TCalendarMonthValue, calendar: TCalendarMonthCalendar, props: IPropsAny) => Array<{
+export declare type TGetOnesyDates = (value: TCalendarMonthValue, calendar: TCalendarMonthCalendar, props: IPropsAny) => Array<{
     value: OnesyDate;
 }>;
-export type TCalendarUnit = 'day' | 'month' | 'year';
+export declare type TCalendarUnit = 'day' | 'month' | 'year';
 export interface ICalendar extends Omit<ISurface, 'version'> {
     tonal?: ITonal;
     color?: IColor;

package/CalendarMonth/CalendarMonth.d.ts

@@ -3,8 +3,8 @@ import { OnesyDate } from '@onesy/date';
 import { ILine } from '../Line/Line';
 import { IColor, IPropsAny, ISize, ITonal } from '../types';
 import { ICalendarViewsView } from '../CalendarViews/CalendarViews';
-export type TCalendarMonthValue = OnesyDate | [OnesyDate, OnesyDate];
-export type TCalendarMonthCalendar = OnesyDate;
+export declare type TCalendarMonthValue = OnesyDate | [OnesyDate, OnesyDate];
+export declare type TCalendarMonthCalendar = OnesyDate;
 export interface ICalendarMonthValuesValue {
     day: string;
     month: string;
@@ -16,7 +16,7 @@ export interface ICalendarMonthValuesValue {
     previous: OnesyDate;
     move: 'previous' | 'next';
 }
-export type TCalendarMonthValues = [ICalendarMonthValuesValue, ICalendarMonthValuesValue];
+export declare type TCalendarMonthValues = [ICalendarMonthValuesValue, ICalendarMonthValuesValue];
 export interface ICalenarDays extends ILine {
     tonal?: ITonal;
     color?: IColor;

package/CalendarViews/CalendarViews.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { OnesyDate } from '@onesy/date';
 import { ICalendar } from '../Calendar/Calendar';
 import { ICalendarEvent } from '../CalendarAvailability/CalendarAvailability';
-export type ICalendarViewsView = 'day' | 'week' | 'month';
+export declare type ICalendarViewsView = 'day' | 'week' | 'month';
 export interface ICalendarViews extends ICalendar {
     viewDefault?: ICalendarViewsView;
     dateDefault?: OnesyDate;

package/Carousel/Carousel.d.ts

@@ -8,10 +8,10 @@ export interface ICarouselValue {
     x?: number;
     y?: number;
 }
-export type TCarouselItem = string | null | IElement | {
+export declare type TCarouselItem = string | null | IElement | {
     element: IElement;
 };
-export type TCarouseOnUpdate = (to: string | number, values: TCarouselItem[]) => any;
+export declare type TCarouseOnUpdate = (to: string | number, values: TCarouselItem[]) => any;
 export interface ICarousel extends Omit<ISurface, 'version'> {
     version?: 'regular' | 'transition' | Partial<Record<IValueBreakpoints, 'regular' | 'transition'>>;
     valueDefault?: ICarouselValue;

package/Chart/Chart.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TColorValues } from '@onesy/style-react';
 import { ISurface } from '../Surface/Surface';
 import { IColor, IStyle, ITonal, IElementAny, IElement, IValueBreakpoints, IPropsAny } from '../types';
-export type IChartValueValues = Array<any>;
+export declare type IChartValueValues = Array<any>;
 export interface IItemValue {
     value: number;
     label: number;

package/Clock/Clock.d.ts

@@ -2,10 +2,10 @@ import React from 'react';
 import { OnesyDate } from '@onesy/date';
 import { IRoundMeter } from '../RoundMeter/RoundMeter';
 import { ITonal, IColor, ISize } from '../types';
-export type TClockValue = OnesyDate;
-export type TClockFormat = '12' | '24';
-export type TClockUnit = 'hour' | 'minute' | 'second';
-export type TClockDayTime = 'am' | 'pm';
+export declare type TClockValue = OnesyDate;
+export declare type TClockFormat = '12' | '24';
+export declare type TClockUnit = 'hour' | 'minute' | 'second';
+export declare type TClockDayTime = 'am' | 'pm';
 export interface IClock extends IRoundMeter {
     tonal?: ITonal;
     color?: IColor;

package/DateTimePicker/DateTimePicker.d.ts

@@ -5,7 +5,7 @@ import { TCalendarMonthValue } from '../CalendarMonth/CalendarMonth';
 import { TCalendarUnit } from '../Calendar/Calendar';
 import { TClockUnit } from '../Clock/Clock';
 import { ITonal, IColor, IValueBreakpoints, IElementReference, IPropsAny } from '../types';
-export type TDateTimePicker = OnesyDate;
+export declare type TDateTimePicker = OnesyDate;
 export interface IDateTimePicker extends Omit<IAdvancedTextField, 'version'> {
     tonal?: ITonal;
     color?: IColor;

package/Drawing/Drawing.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IElement, IElementReference, IPropsAny, IRef } from '../types';
-export type TDrawingValue = Array<{
+export declare type TDrawingValue = Array<{
     d?: string;
     stroke?: string;
     strokeWidth?: number;

package/FileChoose/FileChoose.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { ITonal, IColor, IRef, IElementReference, IPropsAny, ISize } from '../types';
-export type TFileChooseValue = File | Array<File>;
+export declare type TFileChooseValue = File | Array<File>;
 export interface IFileChoose extends ILine {
     tonal?: ITonal;
     color?: IColor;

package/Grid/Grid.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IValueBreakpoints, IPropsAny } from '../types';
-export type IGridValues = Partial<Record<IValueBreakpoints, number>>;
+export declare type IGridValues = Partial<Record<IValueBreakpoints, number>>;
 export interface IGrid extends ILine {
     auto?: boolean;
     columns?: number | IGridValues;

package/ImageCrop/ImageCrop.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IPropsAny } from '../types';
-export type TImageCrop = {
+export declare type TImageCrop = {
     x?: number;
     y?: number;
     width?: number;

package/ImageEdit/ImageEdit.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TMethod } from '@onesy/models';
 import { ILine } from '../Line/Line';
 import { IElementReference, IElement, ITonal, IColor, IPropsAny } from '../types';
-export type TImageEditFilter = {
+export declare type TImageEditFilter = {
     label?: string;
     Icon?: IElementReference;
     value?: string;

package/Interaction/Interaction.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import OnesySubscription from '@onesy/subscription/OnesySubscription';
 import { IBaseElement } from '../types';
-export type TMethodsVersion = 'add' | 'pulse' | 'remove';
+export declare type TMethodsVersion = 'add' | 'pulse' | 'remove';
 export interface IInteraction extends IBaseElement {
     wave?: boolean;
     background?: boolean;

package/Keyframes/Keyframes.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TTransitionsDurationProperties } from '@onesy/style-react';
 import { IBaseElement, IRef } from '../types';
-export type TKeyframesStatus = 'appended' | 'add' | 'adding' | 'added' | 'removed';
+export declare type TKeyframesStatus = 'appended' | 'add' | 'adding' | 'added' | 'removed';
 export interface IKeyframe {
     name: string;
     timeout: number;

package/Line/Line.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { IBaseElement, IPropsAny, IValueBreakpoints } from '../types';
-export type TLineAlign = 'inherit' | 'initial' | 'flex-start' | 'center' | 'flex-end' | 'baseline' | 'stretch' | 'unset';
-export type TLineJustify = 'inherit' | 'initial' | 'flex-start' | 'center' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly' | 'unset';
-export type TLineDirection = 'inherit' | 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export type TLineWrap = 'inherit' | 'wrap' | 'nowrap' | 'wrap-reverse';
-export type TLineDisplay = 'inherit' | 'flex' | 'inline-flex';
+export declare type TLineAlign = 'inherit' | 'initial' | 'flex-start' | 'center' | 'flex-end' | 'baseline' | 'stretch' | 'unset';
+export declare type TLineJustify = 'inherit' | 'initial' | 'flex-start' | 'center' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly' | 'unset';
+export declare type TLineDirection = 'inherit' | 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export declare type TLineWrap = 'inherit' | 'wrap' | 'nowrap' | 'wrap-reverse';
+export declare type TLineDisplay = 'inherit' | 'flex' | 'inline-flex';
 export interface ILine extends IBaseElement {
     display?: TLineDisplay | Partial<Record<IValueBreakpoints, TLineDisplay>>;
     direction?: TLineDirection | Partial<Record<IValueBreakpoints, TLineDirection>>;

package/Medias/Medias.d.ts

@@ -5,7 +5,7 @@ export interface IMediasItem {
     value: IMediaObject;
     props?: any;
 }
-export type IMediasMediaVersion = 'embed' | 'image' | 'audio' | 'video' | 'other';
+export declare type IMediasMediaVersion = 'embed' | 'image' | 'audio' | 'video' | 'other';
 export interface IMedias extends ILine {
     size?: 'small' | 'regular' | 'large';
     values?: IMediasItem | IMediasItem[];

package/MenuDesktop/MenuDesktop.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { TTransitionStatus } from '../Transition';
 import { ILine } from '../Line/Line';
 import { IElement, ITonal, IStyle, IElementReference, IPropsAny, IVersion, IColor } from '../types';
-export type TMenuDesktopValue = string | number;
-export type TMenuDesktopItem = {
+export declare type TMenuDesktopValue = string | number;
+export declare type TMenuDesktopItem = {
     value?: TMenuDesktopValue;
     label?: IElement;
     name?: IElement;

package/NavigationBar/NavigationBar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { INavigationItemVersion } from '../NavigationItem/NavigationItem';
-export type TNavigationBarValue = Array<string>;
+export declare type TNavigationBarValue = Array<string>;
 export interface INavigationBar extends Omit<ISurface, 'version'> {
     value?: TNavigationBarValue;
     valueDefault?: TNavigationBarValue;

package/NavigationItem/NavigationItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ITooltip } from '../Tooltip/Tooltip';
 import { ITonal, IColor, IElement, IElementReference, IPropsAny } from '../types';
-export type INavigationItemVersion = 'regular' | 'auto';
+export declare type INavigationItemVersion = 'regular' | 'auto';
 export interface INavigationItem extends ITooltip {
     tonal?: ITonal;
     color?: IColor;

package/Parallax/Parallax.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IPropsAny, IStyle, IValueBreakpoints } from '../types';
-export type TParallaxDirection = 'vertical' | 'horizontal';
+export declare type TParallaxDirection = 'vertical' | 'horizontal';
 export interface IParallax extends IBaseElement {
     value?: number;
     root?: Element | DocumentFragment;

package/ScreenCapture/ScreenCapture.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IElementReference, IPropsAny } from '../types';
-export type TTrackValueVersion = 'image' | 'canvas';
+export declare type TTrackValueVersion = 'image' | 'canvas';
 export interface IScreenCapture extends ISurface {
     nameDefault?: string;
     name?: string;

package/Section/Section.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TPaletteVersion } from '@onesy/style-react';
 import { ILine } from '../Line/Line';
 import { IValueBreakpoints, IMediaObject, IPropsAny } from '../types';
-export type ISize = 'extra_small' | 'small' | 'regular' | 'large' | 'extra_large' | 'extra_extra_large';
+export declare type ISize = 'extra_small' | 'small' | 'regular' | 'large' | 'extra_large' | 'extra_extra_large';
 export interface ISection extends ILine {
     themed?: boolean;
     title?: string | Partial<Record<IValueBreakpoints, string>>;

package/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, ITonal, IColor, ISize, IElement, IPropsAny } from '../types';
-export type TSliderValue = number | Array<number>;
+export declare type TSliderValue = number | Array<number>;
 export interface ISlider extends IBaseElement {
     tonal?: ITonal;
     color?: IColor;

package/TableCell/TableCell.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TLineAlign, TLineJustify } from '../Line/Line';
 import { IBaseElement, ITonal, IColor, ISize, IPropsAny } from '../types';
-export type ITableCellSort = 'asc' | 'desc';
+export declare type ITableCellSort = 'asc' | 'desc';
 export interface ITableCell extends IBaseElement {
     tonal?: ITonal;
     color?: IColor;

package/TimePicker/TimePicker.d.ts

@@ -3,8 +3,8 @@ import { OnesyDate } from '@onesy/date';
 import { TClockUnit } from '../Clock/Clock';
 import { IAdvancedTextField } from '../AdvancedTextField/AdvancedTextField';
 import { ISize, IValueBreakpoints, IElementReference, IPropsAny } from '../types';
-export type TTimePickerValue = OnesyDate | [OnesyDate, OnesyDate];
-export type TTimePickerSelecting = TClockUnit | [TClockUnit, TClockUnit];
+export declare type TTimePickerValue = OnesyDate | [OnesyDate, OnesyDate];
+export declare type TTimePickerSelecting = TClockUnit | [TClockUnit, TClockUnit];
 export interface ITimePicker extends Omit<IAdvancedTextField, 'version'> {
     version?: 'auto' | 'mobile' | 'desktop';
     value?: TTimePickerValue;

package/Transition/Transition.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TTransitionsDurationProperties } from '@onesy/style-react';
 import { IBaseElement } from '../types';
-export type TTransitionStatus = 'appended' | 'add' | 'adding' | 'added' | 'enter' | 'entering' | 'entered' | 'exit' | 'exiting' | 'exited' | 'removed';
+export declare type TTransitionStatus = 'appended' | 'add' | 'adding' | 'added' | 'enter' | 'entering' | 'entered' | 'exit' | 'exiting' | 'exited' | 'removed';
 export declare const STATUS: Record<TTransitionStatus, TTransitionStatus>;
 export interface ITransitionDelay {
     default?: number;

package/Transitions/Transitions.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IPropsAny } from '../types';
-export type TTransitionsMode = 'in-out' | 'in-out-follow' | 'out-in';
+export declare type TTransitionsMode = 'in-out' | 'in-out-follow' | 'out-in';
 export interface ITransitions {
     id?: string;
     mode?: TTransitionsMode;

package/Weather/Weather.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { ISize, IElementReference, IPropsAny } from '../types';
-export type TWeatherDayTime = 'day' | 'night';
-export type TWeather = 'clear' | 'partly clear' | 'rainy' | 'partly rainy' | 'snowy' | 'partly snowy';
-export type TTemperature = number;
+export declare type TWeatherDayTime = 'day' | 'night';
+export declare type TWeather = 'clear' | 'partly clear' | 'rainy' | 'partly rainy' | 'snowy' | 'partly snowy';
+export declare type TTemperature = number;
 export interface IWeather extends ISurface {
     size?: ISize;
     shadow?: boolean;

package/Whiteboard/Whiteboard.d.ts

@@ -4,8 +4,8 @@ export interface IWhiteboardAction {
     v: 'a' | 'r';
     i: IWhiteboardItem | IWhiteboardItem[];
 }
-export type IWhiteboardTool = 'pen' | 'eraser' | 'pan' | 'zoom' | 'select' | 'circle' | 'rectangle' | 'triangle' | 'line' | 'line-arrow' | 'text' | 'image';
-export type IWhiteboardValue = IWhiteboardItem[];
+export declare type IWhiteboardTool = 'pen' | 'eraser' | 'pan' | 'zoom' | 'select' | 'circle' | 'rectangle' | 'triangle' | 'line' | 'line-arrow' | 'text' | 'image';
+export declare type IWhiteboardValue = IWhiteboardItem[];
 export interface IWhiteboard extends IBaseElement {
     valueDefault?: IWhiteboardValue;
     onChange?: (value: IWhiteboardValue) => any;

package/esm/AudioRecorder/AudioRecorder.js

@@ -5,6 +5,7 @@ const _excluded = ["size", "pause", "renderMain", "renderTime", "loading", "disa
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
+import audioFix from 'webm-duration-fix';
 import { getLeadingZerosNumber, is, isEnvironment, wait } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import { OnesyDate, duration } from '@onesy/date';
@@ -18,7 +19,7 @@ import FadeElement from '../Fade';
 import TypeElement from '../Type';
 import TooltipElement from '../Tooltip';
 import IconButtonElement from '../IconButton';
-import { audioFix, staticClassName } from '../utils';
+import { staticClassName } from '../utils';
 const useStyle = styleMethod(theme => ({
   '@keyframes pulse': {
     '0%': {
@@ -108,6 +109,7 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     value: React.useRef(null),
     animationFrame: React.useRef(null),
     onData: React.useRef(null),
+    previousAction: React.useRef('start'),
     // fallback to duration calculation on desktop
     // ie. for mobile where we can't easily determine duration
     duration: React.useRef(0)
@@ -171,6 +173,9 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     refs.animationFrame.current = requestAnimationFrame(update);
     setStatus('running');
     if (is('function', onStart_)) onStart_(event);
+
+    // previous action
+    refs.previousAction.current = 'start';
   }, [onStart_, onError]);
   const onPause = React.useCallback(event => {
     // media recorder
@@ -184,6 +189,9 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     refs.valuePaused.current = refs.value.current;
     setStatus('paused');
     if (is('function', onPause_)) onPause_(event);
+
+    // previous action
+    refs.previousAction.current = 'pause';
   }, [onPause_]);
   const onStop = React.useCallback(event => {
     // media recorder
@@ -199,8 +207,15 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     // Stop
     onStop(event);
 
-    // add so far to duration
-    refs.duration.current += OnesyDate.milliseconds - refs.startedAt.current;
+    // duration
+    if (refs.previousAction.current === 'resume') {
+      // add so far to duration
+      refs.duration.current += OnesyDate.milliseconds - refs.startedAt.current;
+    }
+    const meta = {
+      // duration in seconds
+      duration: refs.duration.current / 1e3
+    };
     await wait(40);
 
     // Get the blob
@@ -208,18 +223,14 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     let blob = new Blob(refs.mediaRecorderBytes.current, {
       type: mimeType
     });
+    try {
+      blob = await audioFix(blob);
+    } catch (error) {
+      console.log('AudioRecorder onConfirm error', error);
+    }
 
     // clean up
     refs.mediaRecorderBytes.current = [];
-    const meta = {
-      // duration in seconds
-      duration: refs.duration.current / 1e3
-    };
-    const {
-      blob: blobAudioFix,
-      error
-    } = await audioFix(blob, meta.duration);
-    if (!error) blob = blobAudioFix;
     if (is('function', onConfirm_)) onConfirm_(blob, meta);
   }, [onStop, onConfirm_]);
   const onResume = React.useCallback(event => {
@@ -233,6 +244,9 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     refs.animationFrame.current = requestAnimationFrame(update);
     setStatus('running');
     if (is('function', onResume_)) onResume_(event);
+
+    // previous action
+    refs.previousAction.current = 'resume';
   }, [onResume_]);
   const valueFormat = valueNew_ => {
     let valueNew = '';

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.28
+/** @license UiReact v1.0.29
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/utils.js

@@ -1253,46 +1253,4 @@ export const currencies = [{
   rounding: 0,
   code: 'ZMK',
   name_plural: 'Zambian kwachas'
-}];
-export const audioFix = async (blob, duration) => {
-  try {
-    const arrayBuffer = await blob.arrayBuffer();
-    const uint8Array = new Uint8Array(arrayBuffer);
-
-    // Function to find an EBML element by its ID
-    function findElement(idHex) {
-      const idBytes = new Uint8Array(idHex.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
-      for (let i = 0; i < uint8Array.length - idBytes.length; i++) {
-        if (uint8Array.slice(i, i + idBytes.length).toString() === idBytes.toString()) return i + idBytes.length; // Return position after the ID
-      }
-      return -1;
-    }
-
-    // WebM duration EBML ID: 0x4489 (Segment Information -> Duration)
-    const durationPos = findElement('4489');
-    if (durationPos === -1) {
-      throw new Error('Duration element not found in the WebM file.');
-    }
-
-    // Encode new duration in IEEE 754 Float64 (Big Endian, 8 bytes)
-    const durationBytes = new Uint8Array(new Float64Array([duration]).buffer).reverse();
-
-    // Overwrite duration bytes in the WebM file
-    uint8Array.set(durationBytes, durationPos);
-
-    // Convert back to Blob
-    const blobUpdated = new Blob([uint8Array], {
-      type: 'audio/webm'
-    });
-    return {
-      blob: blobUpdated,
-      duration
-    };
-  } catch (error) {
-    return {
-      blob,
-      duration,
-      error
-    };
-  }
-};
+}];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar <lazareric2@gmail.com>",
@@ -41,7 +41,8 @@
     "@onesy/icons-material-rounded-react": "^1.0.2",
     "@onesy/log": "^1.0.0",
     "@onesy/subscription": "^1.0.0",
-    "@onesy/utils": "^1.0.2"
+    "@onesy/utils": "^1.0.2",
+    "webm-duration-fix": "^1.0.4"
   },
   "publishConfig": {
     "access": "public",

package/types.d.ts

@@ -1,26 +1,26 @@
 /// <reference types="react" />
 import { IBreakpoint, TPaletteVersion } from '@onesy/style-react';
-export type IPoint = [number, number];
-export type ITonal = true | false | 'secondary';
-type RGB = `rgb(${number}, ${number}, ${number})`;
-type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
-type HSL = `hsl(${number}, ${number}, ${number})`;
-type HSLA = `hsla(${number}, ${number}, ${number}, ${number})`;
-type HEX = `#${string}`;
-type Color = RGB | RGBA | HSL | HSLA | HEX;
-export type IColor = 'default' | 'themed' | 'inverted' | 'inherit' | TPaletteVersion | Color;
-export type IVersion = 'filled' | 'outlined' | 'outlined-without-background' | 'text';
-export type ISize = 'small' | 'regular' | 'large';
-export type ISizeAny = ISize | number;
-export type IElevation = 0 | 1 | 2 | 3 | 4 | 6 | 8 | 9 | 12 | 16 | 24;
-export type IElementReference = string | React.FC<any> | (React.ForwardRefExoticComponent<any>);
-export type IElement = React.ReactNode | React.ReactNode[] | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-export type IElementAny = IElement | string | number | boolean | null | undefined;
-export type IHTMLElement = Element | HTMLElement;
-export type IPropsAny = Record<string, any>;
-export type IStyle = React.CSSProperties | undefined;
-export type IChildren = React.ReactNode | React.ReactNode[];
-export type IRef = React.MutableRefObject<any>;
+export declare type IPoint = [number, number];
+export declare type ITonal = true | false | 'secondary';
+declare type RGB = `rgb(${number}, ${number}, ${number})`;
+declare type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
+declare type HSL = `hsl(${number}, ${number}, ${number})`;
+declare type HSLA = `hsla(${number}, ${number}, ${number}, ${number})`;
+declare type HEX = `#${string}`;
+declare type Color = RGB | RGBA | HSL | HSLA | HEX;
+export declare type IColor = 'default' | 'themed' | 'inverted' | 'inherit' | TPaletteVersion | Color;
+export declare type IVersion = 'filled' | 'outlined' | 'outlined-without-background' | 'text';
+export declare type ISize = 'small' | 'regular' | 'large';
+export declare type ISizeAny = ISize | number;
+export declare type IElevation = 0 | 1 | 2 | 3 | 4 | 6 | 8 | 9 | 12 | 16 | 24;
+export declare type IElementReference = string | React.FC<any> | (React.ForwardRefExoticComponent<any>);
+export declare type IElement = React.ReactNode | React.ReactNode[] | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare type IElementAny = IElement | string | number | boolean | null | undefined;
+export declare type IHTMLElement = Element | HTMLElement;
+export declare type IPropsAny = Record<string, any>;
+export declare type IStyle = React.CSSProperties | undefined;
+export declare type IChildren = React.ReactNode | React.ReactNode[];
+export declare type IRef = React.MutableRefObject<any>;
 export interface IBaseElement {
     Component?: any;
     className?: string;
@@ -28,8 +28,8 @@ export interface IBaseElement {
     children?: IChildren;
     [property: string]: any;
 }
-export type IMethodTransition = (element?: IHTMLElement) => any;
-export type IValueBreakpoints = IBreakpoint | 'default';
+export declare type IMethodTransition = (element?: IHTMLElement) => any;
+export declare type IValueBreakpoints = IBreakpoint | 'default';
 export interface IMediaObject {
     id?: string;
     name?: string;
@@ -38,9 +38,4 @@ export interface IMediaObject {
     urlSmall?: string;
     urlEmbed?: string;
 }
-export interface IAudioFix {
-    blob: Blob;
-    duration?: number;
-    error?: any;
-}
 export {};

package/useForm/validate.d.ts

@@ -19,9 +19,9 @@ export interface IValidateModelValueMethodOptions {
     object: IValidateModelValue;
     options: IValidateOptions;
 }
-export type IValidateModelValueMethod = (value: any, options: IValidateModelValueMethodOptions) => Promise<any> | any;
-export type IValidateModelValueValidations = 'required' | 'is' | 'isValid' | 'of' | 'ofValid' | 'equal' | 'notEqual' | 'equalDeep' | 'notEqualDeep' | 'some' | 'in' | 'every' | 'properties' | 'notProperties' | 'min' | 'max' | 'length' | 'method';
-export type IValidateModelMessages = {
+export declare type IValidateModelValueMethod = (value: any, options: IValidateModelValueMethodOptions) => Promise<any> | any;
+export declare type IValidateModelValueValidations = 'required' | 'is' | 'isValid' | 'of' | 'ofValid' | 'equal' | 'notEqual' | 'equalDeep' | 'notEqualDeep' | 'some' | 'in' | 'every' | 'properties' | 'notProperties' | 'min' | 'max' | 'length' | 'method';
+export declare type IValidateModelMessages = {
     [p in IValidateModelValueValidations]?: string;
 };
 export interface IValidateModelValue {
@@ -52,14 +52,14 @@ export interface IValidateModelValue {
     capitalize?: boolean;
     propertyNameUpdate?: (value: any) => string;
 }
-export type IUseFormValues = Record<string, IValidateModelValue>;
+export declare type IUseFormValues = Record<string, IValidateModelValue>;
 export interface IForm {
     value: any;
     values: IUseFormValues;
     valid: boolean;
 }
-export type IValidateValidation = (property: IValidateModelValue, form: IForm) => void | Error | Promise<void | Error>;
-export type IValidateVales = Record<string, IValidateModelValue>;
+export declare type IValidateValidation = (property: IValidateModelValue, form: IForm) => void | Error | Promise<void | Error>;
+export declare type IValidateVales = Record<string, IValidateModelValue>;
 export declare const onValidateError: (options: IValidateOptions, model: IValidateModelValue, message?: any) => never;
 declare const validate: (model: IValidateModelValue, property: string, form: IForm, options_?: IValidateOptions) => Promise<void>;
 export default validate;

package/useScroll/useScroll.d.ts

@@ -1,4 +1,4 @@
-export type TUseScrollDirection = 'up' | 'down';
+export declare type TUseScrollDirection = 'up' | 'down';
 export interface IUseScroll {
     offset?: number;
     direction?: TUseScrollDirection;

package/utils.d.ts

@@ -1,4 +1,4 @@
-import { IAudioFix, IPoint } from './types';
+import { IPoint } from './types';
 export declare function reflow(element: HTMLElement): void;
 export declare const staticClassName: (name: string, theme: any) => any;
 export declare const iconSizeToFontSize: (value: string | number) => any;
@@ -46,4 +46,3 @@ export declare const currencies: {
     code: string;
     name_plural: string;
 }[];
-export declare const audioFix: (blob: Blob, duration: number) => Promise<IAudioFix>;

package/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.audioFix = exports.currencies = exports.iconFontSize = exports.formats = exports.toNumber = exports.caret = exports.keyboardStyleCommands = exports.keyboardStandardCommands = exports.getOverflowParent = exports.importIframeStyles = exports.replace = exports.sanitize = exports.minMaxBetweenNumbers = exports.controlPoint = exports.line = exports.angleToCoordinates = exports.matches = exports.save = exports.print = exports.canvasOldPhoto = exports.canvasInvert = exports.canvasFade = exports.canvasSaturation = exports.canvasContrast = exports.canvasBrightness = exports.image = exports.valueBreakpoints = exports.iconSizeToFontSize = exports.staticClassName = exports.reflow = void 0;
+exports.currencies = exports.iconFontSize = exports.formats = exports.toNumber = exports.caret = exports.keyboardStyleCommands = exports.keyboardStandardCommands = exports.getOverflowParent = exports.importIframeStyles = exports.replace = exports.sanitize = exports.minMaxBetweenNumbers = exports.controlPoint = exports.line = exports.angleToCoordinates = exports.matches = exports.save = exports.print = exports.canvasOldPhoto = exports.canvasInvert = exports.canvasFade = exports.canvasSaturation = exports.canvasContrast = exports.canvasBrightness = exports.image = exports.valueBreakpoints = exports.iconSizeToFontSize = exports.staticClassName = exports.reflow = void 0;
 const utils_1 = require("@onesy/utils");
 function reflow(element) {
     element === null || element === void 0 ? void 0 : element.offsetHeight;
@@ -1420,41 +1420,3 @@ exports.currencies = [
         name_plural: 'Zambian kwachas'
     }
 ];
-const audioFix = async (blob, duration) => {
-    try {
-        const arrayBuffer = await blob.arrayBuffer();
-        const uint8Array = new Uint8Array(arrayBuffer);
-        // Function to find an EBML element by its ID
-        function findElement(idHex) {
-            const idBytes = new Uint8Array(idHex.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
-            for (let i = 0; i < uint8Array.length - idBytes.length; i++) {
-                if (uint8Array.slice(i, i + idBytes.length).toString() === idBytes.toString())
-                    return i + idBytes.length; // Return position after the ID
-            }
-            return -1;
-        }
-        // WebM duration EBML ID: 0x4489 (Segment Information -> Duration)
-        const durationPos = findElement('4489');
-        if (durationPos === -1) {
-            throw new Error('Duration element not found in the WebM file.');
-        }
-        // Encode new duration in IEEE 754 Float64 (Big Endian, 8 bytes)
-        const durationBytes = new Uint8Array(new Float64Array([duration]).buffer).reverse();
-        // Overwrite duration bytes in the WebM file
-        uint8Array.set(durationBytes, durationPos);
-        // Convert back to Blob
-        const blobUpdated = new Blob([uint8Array], { type: 'audio/webm' });
-        return {
-            blob: blobUpdated,
-            duration
-        };
-    }
-    catch (error) {
-        return {
-            blob,
-            duration,
-            error
-        };
-    }
-};
-exports.audioFix = audioFix;