@onesy/ui-react 1.0.0 → 1.0.2

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';
-declare type TPadding = 'start' | 'end' | 'both' | 'none';
+type TPadding = 'start' | 'end' | 'both' | 'none';
 export interface IAccordion extends ISurface {
     tonal?: ITonal;
     color?: IColor;

package/Accordion/Accordion.js

@@ -130,7 +130,7 @@ const Accordion = react_1.default.forwardRef((props_, ref) => {
             button: react_1.default.useId(),
             data: react_1.default.useId()
         },
-        expandInProgress: react_1.default.useRef()
+        expandInProgress: react_1.default.useRef(null)
     };
     const { classes } = useStyle();
     let TransitionComponent = TransitionComponent_;

package/Append/Append.d.ts

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

package/AreaChartItem/AreaChartItem.js

@@ -58,15 +58,15 @@ const AreaChartItem = react_1.default.forwardRef((props_, ref) => {
     const [init, setInit] = react_1.default.useState();
     const { classes } = useStyle();
     const refs = {
-        minMax: react_1.default.useRef(undefined),
-        smooth: react_1.default.useRef(undefined),
-        theme: react_1.default.useRef(undefined),
-        path: react_1.default.useRef(),
-        pathBackground: react_1.default.useRef(),
+        minMax: react_1.default.useRef(null),
+        smooth: react_1.default.useRef(null),
+        theme: react_1.default.useRef(null),
+        path: react_1.default.useRef(null),
+        pathBackground: react_1.default.useRef(null),
         pathStyle: react_1.default.useRef({}),
-        animate: react_1.default.useRef(undefined),
-        animateTimeout: react_1.default.useRef(),
-        init: react_1.default.useRef(undefined)
+        animate: react_1.default.useRef(null),
+        animateTimeout: react_1.default.useRef(null),
+        init: react_1.default.useRef(null)
     };
     const keys = react_1.default.useMemo(() => {
         const result = [];

package/AudioPlayer/AudioPlayer.js

@@ -146,22 +146,22 @@ const AudioPlayer = react_1.default.forwardRef((props_, ref) => {
     const [playbackSpeed, setPlaybackSpeed] = react_1.default.useState(1);
     const [openMenu, setOpenMenu] = react_1.default.useState();
     const refs = {
-        root: react_1.default.useRef(undefined),
-        audio: react_1.default.useRef(),
-        controls: react_1.default.useRef(undefined),
-        duration: react_1.default.useRef(undefined),
-        time: react_1.default.useRef(undefined),
-        play: react_1.default.useRef(undefined),
-        updating: react_1.default.useRef(undefined),
-        onPlay: react_1.default.useRef(undefined),
-        onPause: react_1.default.useRef(undefined),
-        onTimeChange: react_1.default.useRef(undefined),
-        onBackward: react_1.default.useRef(undefined),
-        onForward: react_1.default.useRef(undefined),
-        onStop: react_1.default.useRef(undefined),
-        startMediaSession: react_1.default.useRef(undefined),
-        updateMediaSession: react_1.default.useRef(undefined),
-        startMediaSessionOnPlay: react_1.default.useRef(undefined)
+        root: react_1.default.useRef(null),
+        audio: react_1.default.useRef(null),
+        controls: react_1.default.useRef(null),
+        duration: react_1.default.useRef(null),
+        time: react_1.default.useRef(null),
+        play: react_1.default.useRef(null),
+        updating: react_1.default.useRef(null),
+        onPlay: react_1.default.useRef(null),
+        onPause: react_1.default.useRef(null),
+        onTimeChange: react_1.default.useRef(null),
+        onBackward: react_1.default.useRef(null),
+        onForward: react_1.default.useRef(null),
+        onStop: react_1.default.useRef(null),
+        startMediaSession: react_1.default.useRef(null),
+        updateMediaSession: react_1.default.useRef(null),
+        startMediaSessionOnPlay: react_1.default.useRef(null)
     };
     refs.duration.current = duration;
     refs.time.current = time;

package/AudioRecorder/AudioRecorder.js

@@ -83,14 +83,14 @@ const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
     const [value, setValue] = react_1.default.useState(0);
     const { classes } = useStyle();
     const refs = {
-        root: react_1.default.useRef(undefined),
-        mediaRecorder: react_1.default.useRef(),
+        root: react_1.default.useRef(null),
+        mediaRecorder: react_1.default.useRef(null),
         mediaRecorderBytes: react_1.default.useRef([]),
         start: react_1.default.useRef(0),
         valuePaused: react_1.default.useRef(0),
-        value: react_1.default.useRef(undefined),
-        animationFrame: react_1.default.useRef(undefined),
-        onData: react_1.default.useRef(undefined)
+        value: react_1.default.useRef(null),
+        animationFrame: react_1.default.useRef(null),
+        onData: react_1.default.useRef(null)
     };
     refs.onData.current = onData;
     const supported = (0, utils_1.isEnvironment)('browser') && ((_a = window.navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia);

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 declare type TAutoCompleteValue = string | Array<string>;
-export declare type TAutoCompleteOption = {
+export type TAutoCompleteValue = string | Array<string>;
+export type TAutoCompleteOption = {
     label?: string;
     version?: 'text' | 'subheader';
     noOptions?: boolean;

package/Avatar/Avatar.js

@@ -16,11 +16,11 @@ 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 utils_1 = require("@onesy/utils");
 const style_react_1 = require("@onesy/style-react");
 const Button_1 = __importDefault(require("../Button"));
 const Type_1 = __importDefault(require("../Type"));
-const utils_1 = require("../utils");
-const utils_2 = require("@onesy/utils");
+const utils_2 = require("../utils");
 const useStyle = (0, style_react_1.style)(theme => ({
     root: {
         '&.onesy-Button-root': {
@@ -72,9 +72,9 @@ const Avatar = react_1.default.forwardRef((props_, ref) => {
             typeProps.size = `${(size * 0.4) / 16}rem`;
         children = ((0, jsx_runtime_1.jsx)(Type, Object.assign({}, typeProps, TypeProps, { children: children })));
     }
-    const color = color_ === 'auto' ? (0, utils_2.stringToColor)(children_) : color_;
+    const color = color_ === 'auto' ? (0, utils_1.stringToColor)(children_ || '') : color_;
     return ((0, jsx_runtime_1.jsx)(Button, Object.assign({ ref: ref, tonal: tonal, color: color, elevation: elevation, version: version, size: size, disabled: disabled, icon: true, InteractionProps: Object.assign({ background: false, wave: false }, InteractionProps), Component: Component, className: (0, style_react_1.classNames)([
-            (0, utils_1.staticClassName)('Avatar', theme) && [
+            (0, utils_2.staticClassName)('Avatar', theme) && [
                 'onesy-Avatar-root',
                 `onesy-Avatar-version-${version}`,
                 `onesy-Avatar-size-${size}`

package/BubbleChartItem/BubbleChartItem.js

@@ -43,13 +43,13 @@ const BubbleChartItem = react_1.default.forwardRef((props_, ref) => {
     const { tonal = true, color = 'primary', name, values, minSize, maxSize, refs: refs_, rects, updateDefs, updateLegend, minMax, animate: animate_, animateTimeout: animateTimeout_, PathProps, LegendItemProps, className } = props, other = __rest(props, ["tonal", "color", "name", "values", "minSize", "maxSize", "refs", "rects", "updateDefs", "updateLegend", "minMax", "animate", "animateTimeout", "PathProps", "LegendItemProps", "className"]);
     const { classes } = useStyle();
     const refs = {
-        minMax: react_1.default.useRef(undefined),
-        theme: react_1.default.useRef(undefined),
-        path: react_1.default.useRef(),
+        minMax: react_1.default.useRef(null),
+        theme: react_1.default.useRef(null),
+        path: react_1.default.useRef(null),
         pathStyle: react_1.default.useRef({}),
-        animate: react_1.default.useRef(undefined),
-        animateTimeout: react_1.default.useRef(),
-        init: react_1.default.useRef(undefined)
+        animate: react_1.default.useRef(null),
+        animateTimeout: react_1.default.useRef(null),
+        init: react_1.default.useRef(null)
     };
     const keys = react_1.default.useMemo(() => {
         const result = [];

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 declare type TGetOnesyDates = (value: TCalendarMonthValue, calendar: TCalendarMonthCalendar, props: IPropsAny) => Array<{
+export type TGetOnesyDates = (value: TCalendarMonthValue, calendar: TCalendarMonthCalendar, props: IPropsAny) => Array<{
     value: OnesyDate;
 }>;
-export declare type TCalendarUnit = 'day' | 'month' | 'year';
+export type TCalendarUnit = 'day' | 'month' | 'year';
 export interface ICalendar extends Omit<ISurface, 'version'> {
     tonal?: ITonal;
     color?: IColor;

package/Calendar/Calendar.js

@@ -162,10 +162,10 @@ const Calendar = react_1.default.forwardRef((props__, ref) => {
     const { tonal = true, color = 'default', version = 'regular', size = 'regular', value: value_, valueDefault, onChange, calendar: calendar_, calendarDefault, onChangeCalendar, start, end, menu = 'month-year', range, now, calendars = props.range ? 2 : 1, min, max, validate, menu_month_previous_unit, menu_month_next_unit, valid: valid_, getMonths: getMonths_, getYears: getYears_, belowCalendars, disabled, IconPrevious = IconMaterialNavigateBeforeW100_1.default, IconNext = IconMaterialNavigateNextW100_1.default, IconDropDown = IconMaterialArrowDropDownW100_1.default, CalendarMonthProps, OptionButtonProps, PaginationItemsProps, renderDay, renderDayName, className } = props, other = __rest(props, ["tonal", "color", "version", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "start", "end", "menu", "range", "now", "calendars", "min", "max", "validate", "menu_month_previous_unit", "menu_month_next_unit", "valid", "getMonths", "getYears", "belowCalendars", "disabled", "IconPrevious", "IconNext", "IconDropDown", "CalendarMonthProps", "OptionButtonProps", "PaginationItemsProps", "renderDay", "renderDayName", "className"]);
     const { classes } = useStyle();
     const refs = {
-        root: react_1.default.useRef(undefined),
-        month: react_1.default.useRef(undefined),
-        year: react_1.default.useRef(undefined),
-        inProgressTransition: react_1.default.useRef()
+        root: react_1.default.useRef(null),
+        month: react_1.default.useRef(null),
+        year: react_1.default.useRef(null),
+        inProgressTransition: react_1.default.useRef(null)
     };
     const [value, setValue] = react_1.default.useState(() => {
         const valueResult = (valueDefault !== undefined ? valueDefault : value_) || (now && (range ? [new date_1.OnesyDate(), new date_1.OnesyDate()] : [new date_1.OnesyDate()]));

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 declare type TCalendarMonthValue = OnesyDate | [OnesyDate, OnesyDate];
-export declare type TCalendarMonthCalendar = OnesyDate;
+export type TCalendarMonthValue = OnesyDate | [OnesyDate, OnesyDate];
+export type TCalendarMonthCalendar = OnesyDate;
 export interface ICalendarMonthValuesValue {
     day: string;
     month: string;
@@ -16,7 +16,7 @@ export interface ICalendarMonthValuesValue {
     previous: OnesyDate;
     move: 'previous' | 'next';
 }
-export declare type TCalendarMonthValues = [ICalendarMonthValuesValue, ICalendarMonthValuesValue];
+export type TCalendarMonthValues = [ICalendarMonthValuesValue, ICalendarMonthValuesValue];
 export interface ICalenarDays extends ILine {
     tonal?: ITonal;
     color?: IColor;

package/CalendarMonth/CalendarMonth.js

@@ -209,8 +209,8 @@ const CalendarMonth = react_1.default.forwardRef((props__, ref) => {
         id: react_1.default.useRef(`${(month).year} ${(month).month}`),
         previous: react_1.default.useRef(month),
         previousTheme: react_1.default.useRef(theme.palette.light),
-        move: react_1.default.useRef(),
-        noTransition: react_1.default.useRef(undefined)
+        move: react_1.default.useRef(null),
+        noTransition: react_1.default.useRef(null)
     };
     const weekStartDay = !['Monday', 'Sunday'].includes(weekStartDay_) ? 'Monday' : weekStartDay_;
     // Value

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 declare type ICalendarViewsView = 'day' | 'week' | 'month';
+export 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 declare type TCarouselItem = string | null | IElement | {
+export type TCarouselItem = string | null | IElement | {
     element: IElement;
 };
-export declare type TCarouseOnUpdate = (to: string | number, values: TCarouselItem[]) => any;
+export 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 declare type IChartValueValues = Array<any>;
+export 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 declare type TClockValue = OnesyDate;
-export declare type TClockFormat = '12' | '24';
-export declare type TClockUnit = 'hour' | 'minute' | 'second';
-export declare type TClockDayTime = 'am' | 'pm';
+export type TClockValue = OnesyDate;
+export type TClockFormat = '12' | '24';
+export type TClockUnit = 'hour' | 'minute' | 'second';
+export type TClockDayTime = 'am' | 'pm';
 export interface IClock extends IRoundMeter {
     tonal?: ITonal;
     color?: IColor;

package/Clock/Clock.js

@@ -50,17 +50,17 @@ const Clock = react_1.default.forwardRef((props__, ref) => {
     const [selecting, setSelecting] = react_1.default.useState((selectingDefault !== undefined ? selectingDefault : selecting_) || 'hour');
     const [mouseDown, setMouseDown] = react_1.default.useState(false);
     const refs = {
-        root: react_1.default.useRef(undefined),
-        middle: react_1.default.useRef(undefined),
-        mouseDown: react_1.default.useRef(undefined),
-        value: react_1.default.useRef(),
-        selecting: react_1.default.useRef(),
-        autoNext: react_1.default.useRef(),
-        hour: react_1.default.useRef(),
-        minute: react_1.default.useRef(),
-        second: react_1.default.useRef(),
-        format: react_1.default.useRef(),
-        dayTime: react_1.default.useRef(undefined),
+        root: react_1.default.useRef(null),
+        middle: react_1.default.useRef(null),
+        mouseDown: react_1.default.useRef(null),
+        value: react_1.default.useRef(null),
+        selecting: react_1.default.useRef(null),
+        autoNext: react_1.default.useRef(null),
+        hour: react_1.default.useRef(null),
+        minute: react_1.default.useRef(null),
+        second: react_1.default.useRef(null),
+        format: react_1.default.useRef(null),
+        dayTime: react_1.default.useRef(null),
         previous: react_1.default.useRef(selecting)
     };
     refs.mouseDown.current = mouseDown;

package/ColumnChartItem/ColumnChartItem.js

@@ -42,13 +42,13 @@ const ColumnChartItem = react_1.default.forwardRef((props_, ref) => {
     const { tonal = true, color = 'primary', name, values, width: widthItem = 14, refs: refs_, rects, updateDefs, updateLegend, minMax, animate: animate_, animateTimeout: animateTimeout_, PathProps, BackgroundProps, BorderProps, LegendItemProps, className } = props, other = __rest(props, ["tonal", "color", "name", "values", "width", "refs", "rects", "updateDefs", "updateLegend", "minMax", "animate", "animateTimeout", "PathProps", "BackgroundProps", "BorderProps", "LegendItemProps", "className"]);
     const { classes } = useStyle();
     const refs = {
-        minMax: react_1.default.useRef(undefined),
-        theme: react_1.default.useRef(undefined),
-        path: react_1.default.useRef(),
+        minMax: react_1.default.useRef(null),
+        theme: react_1.default.useRef(null),
+        path: react_1.default.useRef(null),
         pathStyle: react_1.default.useRef({}),
-        animate: react_1.default.useRef(undefined),
-        animateTimeout: react_1.default.useRef(),
-        init: react_1.default.useRef(undefined)
+        animate: react_1.default.useRef(null),
+        animateTimeout: react_1.default.useRef(null),
+        init: react_1.default.useRef(null)
     };
     const keys = react_1.default.useMemo(() => {
         const result = [];

package/Confirm/Confirm.js

@@ -62,11 +62,11 @@ const Confirm = react_1.default.forwardRef((props_, ref) => {
     const [openModal, setOpenModal] = react_1.default.useState(false);
     const refs = {
         value: react_1.default.useRef({}),
-        modal: react_1.default.useRef(),
-        props: react_1.default.useRef(undefined),
+        modal: react_1.default.useRef(null),
+        props: react_1.default.useRef(null),
         promise: {
-            resolve: react_1.default.useRef(undefined),
-            reject: react_1.default.useRef(undefined)
+            resolve: react_1.default.useRef(null),
+            reject: react_1.default.useRef(null)
         }
     };
     refs.props.current = props;

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 declare type TDateTimePicker = OnesyDate;
+export type TDateTimePicker = OnesyDate;
 export interface IDateTimePicker extends Omit<IAdvancedTextField, 'version'> {
     tonal?: ITonal;
     color?: IColor;

package/DragAndDropList/DragAndDropList.js

@@ -27,11 +27,11 @@ const DragAndDropList = react_1.default.forwardRef((props_, ref) => {
     const { onChange: onChange_, items, image, delay = 0, precise = true, draggedIsElement = true, isEqual, getDraggingElement, onDraggedElement, onDragStart: onDragStart_, className, children } = props, other = __rest(props, ["onChange", "items", "image", "delay", "precise", "draggedIsElement", "isEqual", "getDraggingElement", "onDraggedElement", "onDragStart", "className", "children"]);
     const { classes } = useStyle();
     const refs = {
-        root: react_1.default.useRef(undefined),
-        dragging: react_1.default.useRef(undefined),
-        rectDragged: react_1.default.useRef(undefined),
-        isDragging: react_1.default.useRef(),
-        previous: react_1.default.useRef(undefined)
+        root: react_1.default.useRef(null),
+        dragging: react_1.default.useRef(null),
+        rectDragged: react_1.default.useRef(null),
+        isDragging: react_1.default.useRef(null),
+        previous: react_1.default.useRef(null)
     };
     const onChange = react_1.default.useMemo(() => {
         return (0, utils_1.debounce)((indexPrevious, indexNew) => onChange_(indexPrevious, indexNew), delay);

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 declare type TDrawingValue = Array<{
+export 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 declare type TFileChooseValue = File | Array<File>;
+export 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 declare type IGridValues = Partial<Record<IValueBreakpoints, number>>;
+export type IGridValues = Partial<Record<IValueBreakpoints, number>>;
 export interface IGrid extends ILine {
     auto?: boolean;
     columns?: number | IGridValues;

package/HTMLCanvas/HTMLCanvas.js

@@ -120,16 +120,16 @@ const HTMLCanvas = react_1.default.forwardRef((props_, ref) => {
     const [keyDown, setKeyDown] = react_1.default.useState();
     const [showGuidelines, setShowGuidelines] = react_1.default.useState(!!showGuidelinesDefault);
     const refs = {
-        root: react_1.default.useRef(undefined),
-        container: react_1.default.useRef(undefined),
-        miniMap: react_1.default.useRef(undefined),
+        root: react_1.default.useRef(null),
+        container: react_1.default.useRef(null),
+        miniMap: react_1.default.useRef(null),
         minZoom: react_1.default.useRef(minZoom),
         maxZoom: react_1.default.useRef(maxZoom),
         positions: react_1.default.useRef(positions),
-        previousMouseEvent: react_1.default.useRef(),
+        previousMouseEvent: react_1.default.useRef(null),
         mouseDown: react_1.default.useRef(false),
         mouseDownMiniMap: react_1.default.useRef(false),
-        keyDown: react_1.default.useRef(undefined),
+        keyDown: react_1.default.useRef(null),
         boundaries: react_1.default.useRef({ x: [width * (positions === null || positions === void 0 ? void 0 : positions.zoom) * -1, 0], y: [height * (positions === null || positions === void 0 ? void 0 : positions.zoom) * -1, 0] }),
         width: react_1.default.useRef(width),
         height: react_1.default.useRef(height),

package/ImageCrop/ImageCrop.d.ts

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

package/ImageCrop/ImageCrop.js

@@ -248,28 +248,28 @@ const ImageCrop = react_1.default.forwardRef((props_, ref) => {
     const [selector, setSelector] = react_1.default.useState(selectorDefault !== undefined ? selectorDefault : selector_);
     const [selectorRelative, setSelectorRelative] = react_1.default.useState();
     const refs = {
-        root: react_1.default.useRef(undefined),
-        image: react_1.default.useRef(undefined),
-        mouseDown: react_1.default.useRef(undefined),
-        selector: react_1.default.useRef(undefined),
-        imageSelectorMain: react_1.default.useRef(undefined),
-        imageSelector: react_1.default.useRef(undefined),
-        previousMouseEvent: react_1.default.useRef(undefined),
-        canvasMain: react_1.default.useRef(),
-        canvasImageSelector: react_1.default.useRef(),
-        move: react_1.default.useRef(undefined),
-        borderTop: react_1.default.useRef(undefined),
-        borderLeft: react_1.default.useRef(undefined),
-        borderRight: react_1.default.useRef(undefined),
-        borderBottom: react_1.default.useRef(undefined),
-        dotTopLeft: react_1.default.useRef(undefined),
-        dotTopRight: react_1.default.useRef(undefined),
-        dotBottomLeft: react_1.default.useRef(undefined),
-        dotBottomRight: react_1.default.useRef(undefined),
-        props: react_1.default.useRef(undefined),
-        dynamicParent: react_1.default.useRef(undefined),
-        focus: react_1.default.useRef(undefined),
-        aspectRatio: react_1.default.useRef(undefined)
+        root: react_1.default.useRef(null),
+        image: react_1.default.useRef(null),
+        mouseDown: react_1.default.useRef(null),
+        selector: react_1.default.useRef(null),
+        imageSelectorMain: react_1.default.useRef(null),
+        imageSelector: react_1.default.useRef(null),
+        previousMouseEvent: react_1.default.useRef(null),
+        canvasMain: react_1.default.useRef(null),
+        canvasImageSelector: react_1.default.useRef(null),
+        move: react_1.default.useRef(null),
+        borderTop: react_1.default.useRef(null),
+        borderLeft: react_1.default.useRef(null),
+        borderRight: react_1.default.useRef(null),
+        borderBottom: react_1.default.useRef(null),
+        dotTopLeft: react_1.default.useRef(null),
+        dotTopRight: react_1.default.useRef(null),
+        dotBottomLeft: react_1.default.useRef(null),
+        dotBottomRight: react_1.default.useRef(null),
+        props: react_1.default.useRef(null),
+        dynamicParent: react_1.default.useRef(null),
+        focus: react_1.default.useRef(null),
+        aspectRatio: react_1.default.useRef(null)
     };
     refs.image.current = image;
     refs.mouseDown.current = mouseDown;

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 declare type TImageEditFilter = {
+export type TImageEditFilter = {
     label?: string;
     Icon?: IElementReference;
     value?: string;

package/ImageEdit/ImageEdit.js

@@ -161,15 +161,15 @@ const ImageEdit = react_1.default.forwardRef((props_, ref) => {
     const [size, setSize] = react_1.default.useState('');
     const { classes } = useStyle();
     const refs = {
-        root: react_1.default.useRef(undefined),
-        option: react_1.default.useRef(undefined),
-        value: react_1.default.useRef(undefined),
-        valueCopy: react_1.default.useRef(undefined),
-        canvasMain: react_1.default.useRef(),
-        open: react_1.default.useRef(),
-        resizeAspectRatio: react_1.default.useRef(undefined),
-        filterValues: react_1.default.useRef(undefined),
-        filterValuesCopy: react_1.default.useRef(undefined)
+        root: react_1.default.useRef(null),
+        option: react_1.default.useRef(null),
+        value: react_1.default.useRef(null),
+        valueCopy: react_1.default.useRef(null),
+        canvasMain: react_1.default.useRef(null),
+        open: react_1.default.useRef(null),
+        resizeAspectRatio: react_1.default.useRef(null),
+        filterValues: react_1.default.useRef(null),
+        filterValuesCopy: react_1.default.useRef(null)
     };
     refs.value.current = value;
     refs.valueCopy.current = valueCopy;

package/ImageGallery/ImageGallery.js

@@ -173,18 +173,18 @@ const ImageGallery = react_1.default.forwardRef((props_, ref) => {
     const [imageRef, setImageRef] = react_1.default.useState();
     const [keyDown, setKeyDown] = react_1.default.useState();
     const refs = {
-        root: react_1.default.useRef(undefined),
+        root: react_1.default.useRef(null),
         version: react_1.default.useRef(version),
-        more: react_1.default.useRef(undefined),
-        image: react_1.default.useRef(),
-        imageWrapper: react_1.default.useRef(undefined),
-        media: react_1.default.useRef(undefined),
-        zoom: react_1.default.useRef(undefined),
-        incrementZoom: react_1.default.useRef(undefined),
-        minZoom: react_1.default.useRef(undefined),
-        maxZoom: react_1.default.useRef(undefined),
-        mouseDown: react_1.default.useRef(undefined),
-        mouseMovePrevious: react_1.default.useRef(undefined),
+        more: react_1.default.useRef(null),
+        image: react_1.default.useRef(null),
+        imageWrapper: react_1.default.useRef(null),
+        media: react_1.default.useRef(null),
+        zoom: react_1.default.useRef(null),
+        incrementZoom: react_1.default.useRef(null),
+        minZoom: react_1.default.useRef(null),
+        maxZoom: react_1.default.useRef(null),
+        mouseDown: react_1.default.useRef(null),
+        mouseMovePrevious: react_1.default.useRef(null),
         keyDown: react_1.default.useRef(keyDown),
         useZoom: react_1.default.useRef(false)
     };

package/Interaction/Interaction.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import OnesySubscription from '@onesy/subscription/OnesySubscription';
 import { IBaseElement } from '../types';
-export declare type TMethodsVersion = 'add' | 'pulse' | 'remove';
+export 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 declare type TKeyframesStatus = 'appended' | 'add' | 'adding' | 'added' | 'removed';
+export 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 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 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 interface ILine extends IBaseElement {
     display?: TLineDisplay | Partial<Record<IValueBreakpoints, TLineDisplay>>;
     direction?: TLineDirection | Partial<Record<IValueBreakpoints, TLineDirection>>;