@servicetitan/form 31.2.0 → 31.3.0

package/dist/date-range-picker/date-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker.js","sourceRoot":"","sources":["../../src/date-range-picker/date-range-picker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../src/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import { ComponentType, Component, SyntheticEvent } from 'react';\nimport {\n    DateRangePicker as DateRangePickerKendo,\n    DateRangePickerChangeEvent,\n    CalendarHeaderTitleProps,\n    MultiViewCalendarProps,\n    CalendarCellProps,\n    ActiveView,\n} from '@progress/kendo-react-dateinputs';\nimport { Icon, InputDateMask, Stack } from '@servicetitan/design-system';\nimport { DateRange } from '@servicetitan/form-state';\nimport { observable, action, makeObservable } from 'mobx';\nimport { observer } from 'mobx-react';\nimport classnames from 'classnames';\nimport moment from 'moment';\nimport * as Styles from './date-range-picker.module.css';\nimport { FieldState } from 'formstate';\n\nexport interface DateRangePickerProps {\n    field: FieldState<DateRange | undefined>;\n    ['qa-testing']: string;\n    placeHolder?: string;\n    minDate?: Date;\n    maxDate?: Date;\n    calendarMinDate?: Date;\n    calendarMaxDate?: Date;\n    topView?: ActiveView;\n    bottomView?: ActiveView;\n    className?: string;\n    calendarComponent?: ComponentType<MultiViewCalendarProps>;\n    headerTitleComponent?: ComponentType<CalendarHeaderTitleProps>;\n    cellComponent?: ComponentType<CalendarCellProps>;\n    inputFormat?: string;\n    horizontalAlign?: 'left' | 'center' | 'right';\n    disabled?: boolean;\n    small?: boolean;\n    disableRangeValidation?: boolean;\n    maskChar?: string;\n}\n\n@observer\nexport class DateRangePicker extends Component<DateRangePickerProps> {\n    // `HTMLDivElement` leads to issues with Node/SSR\n    @observable wrapElem?: any /* HTMLDivElement */;\n    isFocused = false;\n    @observable showDatePicker = false;\n    isIconClicked = false;\n    isDateRangePickerClicked = false;\n\n    constructor(props: DateRangePickerProps) {\n        super(props);\n        makeObservable(this);\n    }\n\n    @action\n    handleRef = (wrapElem: HTMLDivElement) => {\n        this.wrapElem = wrapElem;\n    };\n\n    @action\n    toggleShow(show?: boolean) {\n        this.showDatePicker = show !== undefined ? show : !this.showDatePicker;\n    }\n\n    handleClickGlobal = (evt: Event) => {\n        if (!(evt.target instanceof Node)) {\n            return;\n        }\n\n        const isPrevFocused = this.isFocused;\n\n        this.isFocused = this.isDateRangePickerClicked;\n\n        if (!this.isFocused && isPrevFocused) {\n            // click outside\n            this.props.field.enableAutoValidationAndValidate();\n\n            this.toggleShow(false);\n        } else if (this.isFocused && !isPrevFocused && !this.isIconClicked) {\n            // click inside but outside icons\n            this.props.field.disableAutoValidation();\n        }\n\n        this.isIconClicked = false;\n        this.isDateRangePickerClicked = false;\n    };\n\n    handleClickDateRangePicker = () => {\n        this.isDateRangePickerClicked = true;\n    };\n\n    handleClickIcon = () => {\n        this.isIconClicked = true;\n\n        if (this.showDatePicker) {\n            this.props.field.enableAutoValidationAndValidate();\n        } else {\n            this.props.field.disableAutoValidation();\n        }\n\n        this.toggleShow();\n    };\n\n    componentDidMount() {\n        window.addEventListener('click', this.handleClickGlobal);\n    }\n\n    componentWillUnmount() {\n        window.removeEventListener('click', this.handleClickGlobal);\n    }\n\n    handleChange = (event: DateRangePickerChangeEvent) => {\n        const value = event.target.value;\n\n        if (value.start && value.end && value.start > value.end) {\n            [value.start, value.end] = [value.end, value.start];\n        }\n\n        this.props.field.onChange({ from: value.start ?? undefined, to: value.end ?? undefined });\n    };\n\n    handleFromChange = (from?: Date) => {\n        const to = this.props.field.value ? this.props.field.value.to : undefined;\n\n        if (from || to) {\n            this.props.field.onChange({ from, to });\n        } else {\n            this.props.field.onChange(undefined);\n        }\n    };\n\n    handleToChange = (to?: Date) => {\n        const from = this.props.field.value ? this.props.field.value.from : undefined;\n\n        if (from || to) {\n            this.props.field.onChange({ from, to });\n        } else {\n            this.props.field.onChange(undefined);\n        }\n    };\n\n    render() {\n        const { hasError } = this.props.field;\n        const {\n            'qa-testing': qaTestingLocator,\n            placeHolder,\n            inputFormat,\n            className,\n            calendarComponent,\n            headerTitleComponent,\n            cellComponent,\n            minDate,\n            maxDate,\n            calendarMinDate,\n            calendarMaxDate,\n            topView,\n            bottomView,\n            horizontalAlign,\n            disabled = false,\n            small,\n            maskChar,\n        } = this.props;\n\n        const value = this.props.field.value ? this.props.field.value : {};\n\n        const horizontalAlignClass = classnames({\n            [Styles.popupCenter]: horizontalAlign === 'center',\n            [Styles.popupRight]: horizontalAlign === 'right',\n        });\n\n        return (\n            <div\n                className={classnames(Styles.dateRangePicker, className)}\n                ref={this.handleRef}\n                onClick={this.handleClickDateRangePicker}\n            >\n                <DateRangePickerKendo\n                    className={Styles.dateRangePickerKendo}\n                    calendarSettings={{\n                        min: minDate ?? calendarMinDate,\n                        max: maxDate ?? calendarMaxDate,\n                        topView,\n                        bottomView,\n                        disabled,\n                        mode: 'range',\n                        headerTitle: headerTitleComponent,\n                        cell: cellComponent,\n                    }}\n                    popupSettings={{\n                        appendTo: this.wrapElem,\n                        className: horizontalAlignClass,\n                    }}\n                    startDateInputSettings={{\n                        tabIndex: -1,\n                    }}\n                    endDateInputSettings={{\n                        tabIndex: -1,\n                    }}\n                    show={this.showDatePicker}\n                    value={{ start: value.from ?? null, end: value.to ?? null }}\n                    onChange={this.handleChange}\n                    min={minDate}\n                    max={maxDate}\n                    calendar={calendarComponent}\n                />\n                <Stack alignItems=\"center\" className=\"flex-grow-1\">\n                    <Stack.Item fill>\n                        <InputDateMask\n                            shortLabel={\n                                <Icon\n                                    name=\"today\"\n                                    className={classnames(\n                                        Styles.icon,\n                                        `${qaTestingLocator}-icon-from`\n                                    )}\n                                    onClick={this.handleClickIcon}\n                                />\n                            }\n                            placeholder={placeHolder}\n                            value={value.from}\n                            onChange={this.handleFromChange}\n                            onBlur={this.handleFromChange}\n                            error={hasError}\n                            disabled={disabled}\n                            qa-testing={`${qaTestingLocator}-from`}\n                            dateFormat={inputFormat}\n                            minDate={minDate}\n                            maxDate={this.maxFromDate}\n                            small={small}\n                            maskChar={maskChar}\n                        />\n                    </Stack.Item>\n                    <Icon name=\"arrow_forward\" className={Styles.endLabel} />\n                    <Stack.Item fill>\n                        <InputDateMask\n                            shortLabel={\n                                <Icon\n                                    name=\"today\"\n                                    className={classnames(\n                                        Styles.icon,\n                                        `${qaTestingLocator}-icon-to`\n                                    )}\n                                    onClick={this.handleClickIcon}\n                                />\n                            }\n                            placeholder={placeHolder}\n                            value={value.to}\n                            onChange={this.handleToChange}\n                            onBlur={this.handleToChange}\n                            error={hasError}\n                            disabled={disabled}\n                            qa-testing={`${qaTestingLocator}-to`}\n                            dateFormat={inputFormat}\n                            minDate={this.minToDate}\n                            maxDate={maxDate}\n                            small={small}\n                            maskChar={maskChar}\n                        />\n                    </Stack.Item>\n                </Stack>\n                <input\n                    hidden\n                    // eslint-disable-next-line react/no-unknown-property\n                    qa-testing={qaTestingLocator}\n                    onChange={this.handleHiddenInputChange}\n                />\n            </div>\n        );\n    }\n\n    formatDate(date?: Date, inputFormat = 'L') {\n        return date ? moment(date).format(inputFormat) : '';\n    }\n\n    handleHiddenInputChange = (ev: SyntheticEvent<HTMLInputElement>) => {\n        const values = ev.currentTarget.value.split('-').map(v => new Date(v));\n        this.props.field.onChange({ from: values[0] || undefined, to: values[1] || undefined });\n    };\n\n    get maxFromDate() {\n        const { disableRangeValidation, maxDate, field } = this.props;\n        if (disableRangeValidation) {\n            return maxDate;\n        }\n\n        const to = field.value ? field.value.to : undefined;\n\n        if (maxDate && to) {\n            return maxDate > to ? to : maxDate;\n        }\n\n        return maxDate ?? to;\n    }\n\n    get minToDate() {\n        const { disableRangeValidation, minDate, field } = this.props;\n        if (disableRangeValidation) {\n            return minDate;\n        }\n\n        const from = field.value ? field.value.from : undefined;\n        if (minDate && from) {\n            return minDate < from ? from : minDate;\n        }\n\n        return minDate ?? from;\n    }\n}\n"],"names":["Component","DateRangePicker","DateRangePickerKendo","Icon","InputDateMask","Stack","observable","action","makeObservable","observer","classnames","moment","Styles","toggleShow","show","showDatePicker","undefined","componentDidMount","window","addEventListener","handleClickGlobal","componentWillUnmount","removeEventListener","render","hasError","props","field","qaTestingLocator","placeHolder","inputFormat","className","calendarComponent","headerTitleComponent","cellComponent","minDate","maxDate","calendarMinDate","calendarMaxDate","topView","bottomView","horizontalAlign","disabled","small","maskChar","value","horizontalAlignClass","popupCenter","popupRight","div","dateRangePicker","ref","handleRef","onClick","handleClickDateRangePicker","dateRangePickerKendo","calendarSettings","min","max","mode","headerTitle","cell","popupSettings","appendTo","wrapElem","startDateInputSettings","tabIndex","endDateInputSettings","start","from","end","to","onChange","handleChange","calendar","alignItems","Item","fill","shortLabel","name","icon","handleClickIcon","placeholder","handleFromChange","onBlur","error","qa-testing","dateFormat","maxFromDate","endLabel","handleToChange","minToDate","input","hidden","handleHiddenInputChange","formatDate","date","format","disableRangeValidation","constructor","isFocused","isIconClicked","isDateRangePickerClicked","evt","target","Node","isPrevFocused","enableAutoValidationAndValidate","disableAutoValidation","event","ev","values","currentTarget","split","map","v","Date"],"mappings":"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"}

package/dist/date-range-picker/date-range-picker.module.css.d.ts

@@ -0,0 +1,8 @@
+export const __esModule: true;
+export const dateRangePicker: string;
+export const dateRangePickerKendo: string;
+export const endLabel: string;
+export const icon: string;
+export const popupCenter: string;
+export const popupRight: string;
+

package/dist/date-range-picker/index.js

@@ -1,2 +1,3 @@
 export * from './date-range-picker';
+
 //# sourceMappingURL=index.js.map

package/dist/date-range-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/date-range-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}
+{"version":3,"sources":["../../src/date-range-picker/index.ts"],"sourcesContent":["export * from './date-range-picker';\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB"}

package/dist/demo/color-picker.js

@@ -4,13 +4,48 @@ import { observer } from 'mobx-react';
 import { Text, Card, Tag } from '@servicetitan/design-system';
 import { ColorPicker } from '..';
 import { FieldState } from 'formstate';
-const Preview = ({ color, label }) => (_jsxs(Fragment, { children: [_jsx(Text, { size: 2, className: "m-t-3 m-b-1", children: "Preview" }), _jsx(Card, { light: true, padding: "none", children: _jsx(Tag, { color: color, className: "m-1-i", children: label }) })] }));
+const Preview = ({ color, label })=>/*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Text, {
+                size: 2,
+                className: "m-t-3 m-b-1",
+                children: "Preview"
+            }),
+            /*#__PURE__*/ _jsx(Card, {
+                light: true,
+                padding: "none",
+                children: /*#__PURE__*/ _jsx(Tag, {
+                    color: color,
+                    className: "m-1-i",
+                    children: label
+                })
+            })
+        ]
+    });
 function useColorField(initial) {
     return useRef(new FieldState(initial)).current;
 }
-export const ColorPickerExample = observer(() => {
+export const ColorPickerExample = observer(()=>{
     const defaultField = useColorField(undefined);
-    const preview = useMemo(() => ({ color }) => _jsx(Preview, { label: "Confirmed Appointment", color: color }), []);
-    return (_jsxs(Fragment, { children: [_jsx(Text, { size: 4, className: "m-b-half", children: "Default" }), _jsx(ColorPicker, { label: "Tag Color", value: defaultField.value, onChange: defaultField.onChange, preview: preview })] }));
+    const preview = useMemo(()=>({ color })=>/*#__PURE__*/ _jsx(Preview, {
+                label: "Confirmed Appointment",
+                color: color
+            }), []);
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Text, {
+                size: 4,
+                className: "m-b-half",
+                children: "Default"
+            }),
+            /*#__PURE__*/ _jsx(ColorPicker, {
+                label: "Tag Color",
+                value: defaultField.value,
+                onChange: defaultField.onChange,
+                preview: preview
+            })
+        ]
+    });
 });
+
 //# sourceMappingURL=color-picker.js.map

package/dist/demo/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../src/demo/color-picker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAM,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAE9D,OAAO,EAAE,WAAW,EAA2B,MAAM,IAAI,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAMvC,MAAM,OAAO,GAAqB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACpD,MAAC,QAAQ,eACL,KAAC,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAC,aAAa,wBAE/B,EACP,KAAC,IAAI,IAAC,KAAK,QAAC,OAAO,EAAC,MAAM,YACtB,KAAC,GAAG,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,OAAO,YAC/B,KAAK,GACJ,GACH,IACA,CACd,CAAC;AAEF,SAAS,aAAa,CAA+B,OAAU;IAC3D,OAAO,MAAM,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;AACnD,CAAC;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAO,QAAQ,CAAC,GAAG,EAAE;IAChD,MAAM,YAAY,GAAG,aAAa,CAAqB,SAAS,CAAC,CAAC;IAElE,MAAM,OAAO,GAAgC,OAAO,CAChD,GAAG,EAAE,CACD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAC,OAAO,IAAC,KAAK,EAAC,uBAAuB,EAAC,KAAK,EAAE,KAAK,GAAI,EAC1E,EAAE,CACL,CAAC;IAEF,OAAO,CACH,MAAC,QAAQ,eACL,KAAC,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAC,UAAU,wBAE5B,EACP,KAAC,WAAW,IACR,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAC/B,OAAO,EAAE,OAAO,GAClB,IACK,CACd,CAAC;AACN,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/demo/color-picker.tsx"],"sourcesContent":["import { Fragment, useRef, useMemo, FC } from 'react';\n\nimport { observer } from 'mobx-react';\n\nimport { Text, Card, Tag } from '@servicetitan/design-system';\n\nimport { ColorPicker, ColorPickerPreviewProps } from '..';\n\nimport { FieldState } from 'formstate';\n\ninterface PreviewProps extends ColorPickerPreviewProps {\n    label: string;\n}\n\nconst Preview: FC<PreviewProps> = ({ color, label }) => (\n    <Fragment>\n        <Text size={2} className=\"m-t-3 m-b-1\">\n            Preview\n        </Text>\n        <Card light padding=\"none\">\n            <Tag color={color} className=\"m-1-i\">\n                {label}\n            </Tag>\n        </Card>\n    </Fragment>\n);\n\nfunction useColorField<T extends string | undefined>(initial: T) {\n    return useRef(new FieldState(initial)).current;\n}\n\nexport const ColorPickerExample: FC = observer(() => {\n    const defaultField = useColorField<string | undefined>(undefined);\n\n    const preview: FC<ColorPickerPreviewProps> = useMemo(\n        () =>\n            ({ color }) => <Preview label=\"Confirmed Appointment\" color={color} />,\n        []\n    );\n\n    return (\n        <Fragment>\n            <Text size={4} className=\"m-b-half\">\n                Default\n            </Text>\n            <ColorPicker\n                label=\"Tag Color\"\n                value={defaultField.value}\n                onChange={defaultField.onChange}\n                preview={preview}\n            />\n        </Fragment>\n    );\n});\n"],"names":["Fragment","useRef","useMemo","observer","Text","Card","Tag","ColorPicker","FieldState","Preview","color","label","size","className","light","padding","useColorField","initial","current","ColorPickerExample","defaultField","undefined","preview","value","onChange"],"mappings":";AAAA,SAASA,QAAQ,EAAEC,MAAM,EAAEC,OAAO,QAAY,QAAQ;AAEtD,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,IAAI,EAAEC,IAAI,EAAEC,GAAG,QAAQ,8BAA8B;AAE9D,SAASC,WAAW,QAAiC,KAAK;AAE1D,SAASC,UAAU,QAAQ,YAAY;AAMvC,MAAMC,UAA4B,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC/C,MAACX;;0BACG,KAACI;gBAAKQ,MAAM;gBAAGC,WAAU;0BAAc;;0BAGvC,KAACR;gBAAKS,KAAK;gBAACC,SAAQ;0BAChB,cAAA,KAACT;oBAAII,OAAOA;oBAAOG,WAAU;8BACxBF;;;;;AAMjB,SAASK,cAA4CC,OAAU;IAC3D,OAAOhB,OAAO,IAAIO,WAAWS,UAAUC,OAAO;AAClD;AAEA,OAAO,MAAMC,qBAAyBhB,SAAS;IAC3C,MAAMiB,eAAeJ,cAAkCK;IAEvD,MAAMC,UAAuCpB,QACzC,IACI,CAAC,EAAEQ,KAAK,EAAE,iBAAK,KAACD;gBAAQE,OAAM;gBAAwBD,OAAOA;gBACjE,EAAE;IAGN,qBACI,MAACV;;0BACG,KAACI;gBAAKQ,MAAM;gBAAGC,WAAU;0BAAW;;0BAGpC,KAACN;gBACGI,OAAM;gBACNY,OAAOH,aAAaG,KAAK;gBACzBC,UAAUJ,aAAaI,QAAQ;gBAC/BF,SAASA;;;;AAIzB,GAAG"}

package/dist/demo/date-range-picker.js

@@ -7,8 +7,24 @@ import { FieldState } from 'formstate';
 function useDateRangeField(initial) {
     return useRef(new FieldState(initial)).current;
 }
-export const DateRangePickerExample = observer(() => {
+export const DateRangePickerExample = observer(()=>{
     const defaultField = useDateRangeField(undefined);
-    return (_jsxs(Fragment, { children: [_jsx(Text, { size: 4, className: "m-b-half", children: "Default" }), _jsx(DateRangePicker, { maskChar: "X", field: defaultField, "qa-testing": "qa-date-range-picker", horizontalAlign: "right", small: true })] }));
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Text, {
+                size: 4,
+                className: "m-b-half",
+                children: "Default"
+            }),
+            /*#__PURE__*/ _jsx(DateRangePicker, {
+                maskChar: "X",
+                field: defaultField,
+                "qa-testing": "qa-date-range-picker",
+                horizontalAlign: "right",
+                small: true
+            })
+        ]
+    });
 });
+
 //# sourceMappingURL=date-range-picker.js.map

package/dist/demo/date-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker.js","sourceRoot":"","sources":["../../src/demo/date-range-picker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAM,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAGnD,OAAO,EAAE,eAAe,EAAE,MAAM,IAAI,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,SAAS,iBAAiB,CAAkC,OAAU;IAClE,OAAO,MAAM,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;AACnD,CAAC;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAO,QAAQ,CAAC,GAAG,EAAE;IACpD,MAAM,YAAY,GAAG,iBAAiB,CAAwB,SAAS,CAAC,CAAC;IAEzE,OAAO,CACH,MAAC,QAAQ,eACL,KAAC,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAC,UAAU,wBAE5B,EACP,KAAC,eAAe,IACZ,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE,YAAY,gBACR,sBAAsB,EACjC,eAAe,EAAC,OAAO,EACvB,KAAK,SACP,IACK,CACd,CAAC;AACN,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/demo/date-range-picker.tsx"],"sourcesContent":["import { Fragment, useRef, FC } from 'react';\n\nimport { observer } from 'mobx-react';\n\nimport { Text } from '@servicetitan/design-system';\nimport { DateRange } from '@servicetitan/form-state';\n\nimport { DateRangePicker } from '..';\n\nimport { FieldState } from 'formstate';\n\nfunction useDateRangeField<T extends DateRange | undefined>(initial: T) {\n    return useRef(new FieldState(initial)).current;\n}\n\nexport const DateRangePickerExample: FC = observer(() => {\n    const defaultField = useDateRangeField<DateRange | undefined>(undefined);\n\n    return (\n        <Fragment>\n            <Text size={4} className=\"m-b-half\">\n                Default\n            </Text>\n            <DateRangePicker\n                maskChar=\"X\"\n                field={defaultField}\n                qa-testing=\"qa-date-range-picker\"\n                horizontalAlign=\"right\"\n                small\n            />\n        </Fragment>\n    );\n});\n"],"names":["Fragment","useRef","observer","Text","DateRangePicker","FieldState","useDateRangeField","initial","current","DateRangePickerExample","defaultField","undefined","size","className","maskChar","field","qa-testing","horizontalAlign","small"],"mappings":";AAAA,SAASA,QAAQ,EAAEC,MAAM,QAAY,QAAQ;AAE7C,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,IAAI,QAAQ,8BAA8B;AAGnD,SAASC,eAAe,QAAQ,KAAK;AAErC,SAASC,UAAU,QAAQ,YAAY;AAEvC,SAASC,kBAAmDC,OAAU;IAClE,OAAON,OAAO,IAAII,WAAWE,UAAUC,OAAO;AAClD;AAEA,OAAO,MAAMC,yBAA6BP,SAAS;IAC/C,MAAMQ,eAAeJ,kBAAyCK;IAE9D,qBACI,MAACX;;0BACG,KAACG;gBAAKS,MAAM;gBAAGC,WAAU;0BAAW;;0BAGpC,KAACT;gBACGU,UAAS;gBACTC,OAAOL;gBACPM,cAAW;gBACXC,iBAAgB;gBAChBC,KAAK;;;;AAIrB,GAAG"}

package/dist/demo/file-uploader.js

@@ -7,23 +7,105 @@ import { FieldState } from 'formstate';
 function useFilesField(initial) {
     return useRef(new FieldState(initial)).current;
 }
-export const FileUploaderExample = observer(() => {
+export const FileUploaderExample = observer(()=>{
     const defaultField = useFilesField([]);
     const multipleField = useFilesField([
-        { file: 'multiple-1.png' },
-        { file: 'multiple-2.png' },
-        { file: 'multiple-3.png' },
+        {
+            file: 'multiple-1.png'
+        },
+        {
+            file: 'multiple-2.png'
+        },
+        {
+            file: 'multiple-3.png'
+        }
+    ]);
+    const displayField = useFilesField([
+        {
+            file: 'display.png'
+        }
     ]);
-    const displayField = useFilesField([{ file: 'display.png' }]);
     const customField = useFilesField([]);
     const withExtensionValidation = useFilesField([]);
-    return (_jsxs(Fragment, { children: [_jsx(BodyText, { size: "large", className: "m-b-half", children: "Default" }), _jsx(FileUploader, { value: defaultField.value, onChange: defaultField.onChange, folderName: "test" }), _jsx(BodyText, { size: "large", className: "m-t-4 m-b-half", children: "Multiple mode" }), _jsx(FileUploader, { value: multipleField.value, onChange: multipleField.onChange, folderName: "test", multiple: true }), _jsx(BodyText, { size: "large", className: "m-t-4 m-b-half", children: "Display mode" }), _jsx(FileUploader, { value: displayField.value, folderName: "test", multiple: true }), _jsx(BodyText, { size: "large", className: "m-t-4 m-b-half", children: "Custom configuration" }), _jsx(FileUploaderConfigurationProvider, { value: {
-                    target: '/Custom/Upload/Url',
-                }, children: _jsx(FileUploader, { value: customField.value, onChange: customField.onChange, folderName: "test", multiple: true, config: {
-                        simultaneousUploads: 3,
-                    } }) }), _jsxs(BodyText, { size: "large", className: "m-t-4 m-b-half", children: ["With file extension validation", ' ', _jsx(BodyText, { inline: true, el: "span", children: "Try uploading not png" })] }), _jsx(FileUploader, { value: withExtensionValidation.value, onChange: withExtensionValidation.onChange, folderName: "test", multiple: true, config: {
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(BodyText, {
+                size: "large",
+                className: "m-b-half",
+                children: "Default"
+            }),
+            /*#__PURE__*/ _jsx(FileUploader, {
+                value: defaultField.value,
+                onChange: defaultField.onChange,
+                folderName: "test"
+            }),
+            /*#__PURE__*/ _jsx(BodyText, {
+                size: "large",
+                className: "m-t-4 m-b-half",
+                children: "Multiple mode"
+            }),
+            /*#__PURE__*/ _jsx(FileUploader, {
+                value: multipleField.value,
+                onChange: multipleField.onChange,
+                folderName: "test",
+                multiple: true
+            }),
+            /*#__PURE__*/ _jsx(BodyText, {
+                size: "large",
+                className: "m-t-4 m-b-half",
+                children: "Display mode"
+            }),
+            /*#__PURE__*/ _jsx(FileUploader, {
+                value: displayField.value,
+                folderName: "test",
+                multiple: true
+            }),
+            /*#__PURE__*/ _jsx(BodyText, {
+                size: "large",
+                className: "m-t-4 m-b-half",
+                children: "Custom configuration"
+            }),
+            /*#__PURE__*/ _jsx(FileUploaderConfigurationProvider, {
+                value: {
+                    target: '/Custom/Upload/Url'
+                },
+                children: /*#__PURE__*/ _jsx(FileUploader, {
+                    value: customField.value,
+                    onChange: customField.onChange,
+                    folderName: "test",
+                    multiple: true,
+                    config: {
+                        simultaneousUploads: 3
+                    }
+                })
+            }),
+            /*#__PURE__*/ _jsxs(BodyText, {
+                size: "large",
+                className: "m-t-4 m-b-half",
+                children: [
+                    "With file extension validation",
+                    ' ',
+                    /*#__PURE__*/ _jsx(BodyText, {
+                        inline: true,
+                        el: "span",
+                        children: "Try uploading not png"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(FileUploader, {
+                value: withExtensionValidation.value,
+                onChange: withExtensionValidation.onChange,
+                folderName: "test",
+                multiple: true,
+                config: {
                     simultaneousUploads: 3,
-                    fileType: ['png'],
-                } })] }));
+                    fileType: [
+                        'png'
+                    ]
+                }
+            })
+        ]
+    });
 });
+
 //# sourceMappingURL=file-uploader.js.map

package/dist/demo/file-uploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-uploader.js","sourceRoot":"","sources":["../../src/demo/file-uploader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAM,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,iCAAiC,EAAkB,MAAM,IAAI,CAAC;AAErF,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,SAAS,aAAa,CAAC,OAAyB;IAC5C,OAAO,MAAM,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;AACnD,CAAC;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAO,QAAQ,CAAC,GAAG,EAAE;IACjD,MAAM,YAAY,GAAG,aAAa,CAAC,EAAE,CAAC,CAAC;IAEvC,MAAM,aAAa,GAAG,aAAa,CAAC;QAChC,EAAE,IAAI,EAAE,gBAAgB,EAAE;QAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;QAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;KAC7B,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC;IAE9D,MAAM,WAAW,GAAG,aAAa,CAAC,EAAE,CAAC,CAAC;IACtC,MAAM,uBAAuB,GAAG,aAAa,CAAC,EAAE,CAAC,CAAC;IAElD,OAAO,CACH,MAAC,QAAQ,eACL,KAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,UAAU,wBAEhC,EACX,KAAC,YAAY,IACT,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAC/B,UAAU,EAAC,MAAM,GACnB,EAEF,KAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,gBAAgB,8BAEtC,EACX,KAAC,YAAY,IACT,KAAK,EAAE,aAAa,CAAC,KAAK,EAC1B,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,UAAU,EAAC,MAAM,EACjB,QAAQ,SACV,EAEF,KAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,gBAAgB,6BAEtC,EACX,KAAC,YAAY,IAAC,KAAK,EAAE,YAAY,CAAC,KAAK,EAAE,UAAU,EAAC,MAAM,EAAC,QAAQ,SAAG,EAEtE,KAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,gBAAgB,qCAEtC,EACX,KAAC,iCAAiC,IAC9B,KAAK,EAAE;oBACH,MAAM,EAAE,oBAAoB;iBAC/B,YAED,KAAC,YAAY,IACT,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,QAAQ,EAAE,WAAW,CAAC,QAAQ,EAC9B,UAAU,EAAC,MAAM,EACjB,QAAQ,QACR,MAAM,EAAE;wBACJ,mBAAmB,EAAE,CAAC;qBACzB,GACH,GAC8B,EAEpC,MAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,gBAAgB,+CACd,GAAG,EAClC,KAAC,QAAQ,IAAC,MAAM,QAAC,EAAE,EAAC,MAAM,sCAEf,IACJ,EAEX,KAAC,YAAY,IACT,KAAK,EAAE,uBAAuB,CAAC,KAAK,EACpC,QAAQ,EAAE,uBAAuB,CAAC,QAAQ,EAC1C,UAAU,EAAC,MAAM,EACjB,QAAQ,QACR,MAAM,EAAE;oBACJ,mBAAmB,EAAE,CAAC;oBACtB,QAAQ,EAAE,CAAC,KAAK,CAAC;iBACpB,GACH,IACK,CACd,CAAC;AACN,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/demo/file-uploader.tsx"],"sourcesContent":["import { useRef, Fragment, FC } from 'react';\nimport { observer } from 'mobx-react';\nimport { BodyText } from '@servicetitan/design-system';\nimport { FileUploader, FileUploaderConfigurationProvider, FileDescriptor } from '..';\n\nimport { FieldState } from 'formstate';\n\nfunction useFilesField(initial: FileDescriptor[]) {\n    return useRef(new FieldState(initial)).current;\n}\n\nexport const FileUploaderExample: FC = observer(() => {\n    const defaultField = useFilesField([]);\n\n    const multipleField = useFilesField([\n        { file: 'multiple-1.png' },\n        { file: 'multiple-2.png' },\n        { file: 'multiple-3.png' },\n    ]);\n\n    const displayField = useFilesField([{ file: 'display.png' }]);\n\n    const customField = useFilesField([]);\n    const withExtensionValidation = useFilesField([]);\n\n    return (\n        <Fragment>\n            <BodyText size=\"large\" className=\"m-b-half\">\n                Default\n            </BodyText>\n            <FileUploader\n                value={defaultField.value}\n                onChange={defaultField.onChange}\n                folderName=\"test\"\n            />\n\n            <BodyText size=\"large\" className=\"m-t-4 m-b-half\">\n                Multiple mode\n            </BodyText>\n            <FileUploader\n                value={multipleField.value}\n                onChange={multipleField.onChange}\n                folderName=\"test\"\n                multiple\n            />\n\n            <BodyText size=\"large\" className=\"m-t-4 m-b-half\">\n                Display mode\n            </BodyText>\n            <FileUploader value={displayField.value} folderName=\"test\" multiple />\n\n            <BodyText size=\"large\" className=\"m-t-4 m-b-half\">\n                Custom configuration\n            </BodyText>\n            <FileUploaderConfigurationProvider\n                value={{\n                    target: '/Custom/Upload/Url',\n                }}\n            >\n                <FileUploader\n                    value={customField.value}\n                    onChange={customField.onChange}\n                    folderName=\"test\"\n                    multiple\n                    config={{\n                        simultaneousUploads: 3,\n                    }}\n                />\n            </FileUploaderConfigurationProvider>\n\n            <BodyText size=\"large\" className=\"m-t-4 m-b-half\">\n                With file extension validation{' '}\n                <BodyText inline el=\"span\">\n                    Try uploading not png\n                </BodyText>\n            </BodyText>\n\n            <FileUploader\n                value={withExtensionValidation.value}\n                onChange={withExtensionValidation.onChange}\n                folderName=\"test\"\n                multiple\n                config={{\n                    simultaneousUploads: 3,\n                    fileType: ['png'],\n                }}\n            />\n        </Fragment>\n    );\n});\n"],"names":["useRef","Fragment","observer","BodyText","FileUploader","FileUploaderConfigurationProvider","FieldState","useFilesField","initial","current","FileUploaderExample","defaultField","multipleField","file","displayField","customField","withExtensionValidation","size","className","value","onChange","folderName","multiple","target","config","simultaneousUploads","inline","el","fileType"],"mappings":";AAAA,SAASA,MAAM,EAAEC,QAAQ,QAAY,QAAQ;AAC7C,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,YAAY,EAAEC,iCAAiC,QAAwB,KAAK;AAErF,SAASC,UAAU,QAAQ,YAAY;AAEvC,SAASC,cAAcC,OAAyB;IAC5C,OAAOR,OAAO,IAAIM,WAAWE,UAAUC,OAAO;AAClD;AAEA,OAAO,MAAMC,sBAA0BR,SAAS;IAC5C,MAAMS,eAAeJ,cAAc,EAAE;IAErC,MAAMK,gBAAgBL,cAAc;QAChC;YAAEM,MAAM;QAAiB;QACzB;YAAEA,MAAM;QAAiB;QACzB;YAAEA,MAAM;QAAiB;KAC5B;IAED,MAAMC,eAAeP,cAAc;QAAC;YAAEM,MAAM;QAAc;KAAE;IAE5D,MAAME,cAAcR,cAAc,EAAE;IACpC,MAAMS,0BAA0BT,cAAc,EAAE;IAEhD,qBACI,MAACN;;0BACG,KAACE;gBAASc,MAAK;gBAAQC,WAAU;0BAAW;;0BAG5C,KAACd;gBACGe,OAAOR,aAAaQ,KAAK;gBACzBC,UAAUT,aAAaS,QAAQ;gBAC/BC,YAAW;;0BAGf,KAAClB;gBAASc,MAAK;gBAAQC,WAAU;0BAAiB;;0BAGlD,KAACd;gBACGe,OAAOP,cAAcO,KAAK;gBAC1BC,UAAUR,cAAcQ,QAAQ;gBAChCC,YAAW;gBACXC,QAAQ;;0BAGZ,KAACnB;gBAASc,MAAK;gBAAQC,WAAU;0BAAiB;;0BAGlD,KAACd;gBAAae,OAAOL,aAAaK,KAAK;gBAAEE,YAAW;gBAAOC,QAAQ;;0BAEnE,KAACnB;gBAASc,MAAK;gBAAQC,WAAU;0BAAiB;;0BAGlD,KAACb;gBACGc,OAAO;oBACHI,QAAQ;gBACZ;0BAEA,cAAA,KAACnB;oBACGe,OAAOJ,YAAYI,KAAK;oBACxBC,UAAUL,YAAYK,QAAQ;oBAC9BC,YAAW;oBACXC,QAAQ;oBACRE,QAAQ;wBACJC,qBAAqB;oBACzB;;;0BAIR,MAACtB;gBAASc,MAAK;gBAAQC,WAAU;;oBAAiB;oBACf;kCAC/B,KAACf;wBAASuB,MAAM;wBAACC,IAAG;kCAAO;;;;0BAK/B,KAACvB;gBACGe,OAAOH,wBAAwBG,KAAK;gBACpCC,UAAUJ,wBAAwBI,QAAQ;gBAC1CC,YAAW;gBACXC,QAAQ;gBACRE,QAAQ;oBACJC,qBAAqB;oBACrBG,UAAU;wBAAC;qBAAM;gBACrB;;;;AAIhB,GAAG"}

package/dist/demo/index.js

@@ -5,4 +5,5 @@ export * from './number-input';
 export * from './phone-number-input';
 export * from './original-number-input';
 export * from './input-date-mask';
+
 //# sourceMappingURL=index.js.map

package/dist/demo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/demo/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC"}
+{"version":3,"sources":["../../src/demo/index.ts"],"sourcesContent":["export * from './color-picker';\nexport * from './date-range-picker';\nexport * from './file-uploader';\nexport * from './number-input';\nexport * from './phone-number-input';\nexport * from './original-number-input';\nexport * from './input-date-mask';\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,0BAA0B;AACxC,cAAc,oBAAoB"}

package/dist/demo/input-date-mask.js

@@ -7,8 +7,24 @@ import { InputDateMask } from '..';
 function useInputDateMaskField(initial) {
     return useRef(new FieldState(initial)).current;
 }
-export const InputDateMaskExample = observer(() => {
+export const InputDateMaskExample = observer(()=>{
     const defaultField = useInputDateMaskField(undefined);
-    return (_jsxs(Fragment, { children: [_jsx(Text, { size: 4, className: "m-b-half", children: "Default" }), _jsx(InputDateMask, { value: defaultField.value, onChange: defaultField.onChange, shortLabel: _jsx(Icon, { name: "event" }) })] }));
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Text, {
+                size: 4,
+                className: "m-b-half",
+                children: "Default"
+            }),
+            /*#__PURE__*/ _jsx(InputDateMask, {
+                value: defaultField.value,
+                onChange: defaultField.onChange,
+                shortLabel: /*#__PURE__*/ _jsx(Icon, {
+                    name: "event"
+                })
+            })
+        ]
+    });
 });
+
 //# sourceMappingURL=input-date-mask.js.map

package/dist/demo/input-date-mask.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-date-mask.js","sourceRoot":"","sources":["../../src/demo/input-date-mask.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAEnC,SAAS,qBAAqB,CAA6B,OAAU;IACjE,OAAO,MAAM,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;AACnD,CAAC;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAO,QAAQ,CAAC,GAAG,EAAE;IAClD,MAAM,YAAY,GAAG,qBAAqB,CAAC,SAAS,CAAC,CAAC;IAEtD,OAAO,CACH,MAAC,QAAQ,eACL,KAAC,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAC,UAAU,wBAE5B,EACP,KAAC,aAAa,IACV,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAC/B,UAAU,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACnC,IACK,CACd,CAAC;AACN,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/demo/input-date-mask.tsx"],"sourcesContent":["import { FC, Fragment, useRef } from 'react';\n\nimport { observer } from 'mobx-react';\n\nimport { Text, Icon } from '@servicetitan/design-system';\nimport { FieldState } from 'formstate';\n\nimport { InputDateMask } from '..';\n\nfunction useInputDateMaskField<T extends Date | undefined>(initial: T) {\n    return useRef(new FieldState(initial)).current;\n}\n\nexport const InputDateMaskExample: FC = observer(() => {\n    const defaultField = useInputDateMaskField(undefined);\n\n    return (\n        <Fragment>\n            <Text size={4} className=\"m-b-half\">\n                Default\n            </Text>\n            <InputDateMask\n                value={defaultField.value}\n                onChange={defaultField.onChange}\n                shortLabel={<Icon name=\"event\" />}\n            />\n        </Fragment>\n    );\n});\n"],"names":["Fragment","useRef","observer","Text","Icon","FieldState","InputDateMask","useInputDateMaskField","initial","current","InputDateMaskExample","defaultField","undefined","size","className","value","onChange","shortLabel","name"],"mappings":";AAAA,SAAaA,QAAQ,EAAEC,MAAM,QAAQ,QAAQ;AAE7C,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,IAAI,EAAEC,IAAI,QAAQ,8BAA8B;AACzD,SAASC,UAAU,QAAQ,YAAY;AAEvC,SAASC,aAAa,QAAQ,KAAK;AAEnC,SAASC,sBAAkDC,OAAU;IACjE,OAAOP,OAAO,IAAII,WAAWG,UAAUC,OAAO;AAClD;AAEA,OAAO,MAAMC,uBAA2BR,SAAS;IAC7C,MAAMS,eAAeJ,sBAAsBK;IAE3C,qBACI,MAACZ;;0BACG,KAACG;gBAAKU,MAAM;gBAAGC,WAAU;0BAAW;;0BAGpC,KAACR;gBACGS,OAAOJ,aAAaI,KAAK;gBACzBC,UAAUL,aAAaK,QAAQ;gBAC/BC,0BAAY,KAACb;oBAAKc,MAAK;;;;;AAIvC,GAAG"}

package/dist/demo/number-input.js

@@ -7,7 +7,7 @@ import { FieldState } from 'formstate';
 function useNumberField(initial) {
     return useRef(new FieldState(initial)).current;
 }
-export const NumberInputExample = observer(() => {
+export const NumberInputExample = observer(()=>{
     const defaultField = useNumberField(undefined);
     const zeroEmptyValueField = useNumberField(0);
     const precisionField = useNumberField(undefined);
@@ -16,7 +16,125 @@ export const NumberInputExample = observer(() => {
     const limitedRangeFieldPreset = useNumberField(100);
     const precisionFieldPreset = useNumberField(3.6666666);
     const precisionFieldPresetExtreme = useNumberField(3.6666666);
-    return (_jsxs(Fragment, { children: [_jsx(Text, { size: 4, className: "m-b-half", children: "Default" }), _jsx(NumberInput, { value: defaultField.value, onChange: defaultField.onChange, emptyValue: undefined }), _jsx(Text, { size: 4, className: "m-t-4 m-b-half", children: "Zero as empty value" }), _jsx(NumberInput, { value: zeroEmptyValueField.value, onChange: zeroEmptyValueField.onChange, emptyValue: 0 }), _jsx(Text, { size: 4, className: "m-t-4 m-b-half", children: "Precision" }), _jsx(NumberInput, { value: precisionField.value, onChange: precisionField.onChange, emptyValue: undefined, decimalPlaces: 3 }), _jsx(Text, { size: 4, className: "m-t-4 m-b-half", children: "Limited range" }), _jsx(NumberInput, { value: limitedRangeField.value, onChange: limitedRangeField.onChange, emptyValue: undefined, min: 3, max: 7 }), _jsx(Text, { size: 4, className: "m-t-4 m-b-half", children: "Without thousands separator" }), _jsx(NumberInput, { value: withoutThousandsSeparator.value, onChange: withoutThousandsSeparator.onChange, emptyValue: undefined, decimalPlaces: 0, useEmptyThousandsSeparator: true }), _jsx("hr", { className: "m-y-4" }), _jsx(Text, { size: 4, className: "m-t-4 m-b-half", children: "Preset value out of range" }), _jsx(StoredValueWrapper, { value: limitedRangeFieldPreset.value, children: _jsx(NumberInput, { value: limitedRangeFieldPreset.value, onChange: limitedRangeFieldPreset.onChange, emptyValue: undefined, min: 3, max: 7 }) }), _jsx(Text, { size: 4, className: "m-t-4 m-b-half", children: "Preset value with precision out of limit" }), _jsx(StoredValueWrapper, { value: precisionFieldPreset.value, children: _jsx(NumberInput, { value: precisionFieldPreset.value, onChange: precisionFieldPreset.onChange, emptyValue: undefined, decimalPlaces: 3 }) }), _jsx(Text, { size: 4, className: "m-t-4 m-b-half", children: "Preset value with precision out of limit (zero decimals allowed)" }), _jsx(StoredValueWrapper, { value: precisionFieldPresetExtreme.value, children: _jsx(NumberInput, { value: precisionFieldPresetExtreme.value, onChange: precisionFieldPresetExtreme.onChange, emptyValue: undefined, decimalPlaces: 0 }) })] }));
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Text, {
+                size: 4,
+                className: "m-b-half",
+                children: "Default"
+            }),
+            /*#__PURE__*/ _jsx(NumberInput, {
+                value: defaultField.value,
+                onChange: defaultField.onChange,
+                emptyValue: undefined
+            }),
+            /*#__PURE__*/ _jsx(Text, {
+                size: 4,
+                className: "m-t-4 m-b-half",
+                children: "Zero as empty value"
+            }),
+            /*#__PURE__*/ _jsx(NumberInput, {
+                value: zeroEmptyValueField.value,
+                onChange: zeroEmptyValueField.onChange,
+                emptyValue: 0
+            }),
+            /*#__PURE__*/ _jsx(Text, {
+                size: 4,
+                className: "m-t-4 m-b-half",
+                children: "Precision"
+            }),
+            /*#__PURE__*/ _jsx(NumberInput, {
+                value: precisionField.value,
+                onChange: precisionField.onChange,
+                emptyValue: undefined,
+                decimalPlaces: 3
+            }),
+            /*#__PURE__*/ _jsx(Text, {
+                size: 4,
+                className: "m-t-4 m-b-half",
+                children: "Limited range"
+            }),
+            /*#__PURE__*/ _jsx(NumberInput, {
+                value: limitedRangeField.value,
+                onChange: limitedRangeField.onChange,
+                emptyValue: undefined,
+                min: 3,
+                max: 7
+            }),
+            /*#__PURE__*/ _jsx(Text, {
+                size: 4,
+                className: "m-t-4 m-b-half",
+                children: "Without thousands separator"
+            }),
+            /*#__PURE__*/ _jsx(NumberInput, {
+                value: withoutThousandsSeparator.value,
+                onChange: withoutThousandsSeparator.onChange,
+                emptyValue: undefined,
+                decimalPlaces: 0,
+                useEmptyThousandsSeparator: true
+            }),
+            /*#__PURE__*/ _jsx("hr", {
+                className: "m-y-4"
+            }),
+            /*#__PURE__*/ _jsx(Text, {
+                size: 4,
+                className: "m-t-4 m-b-half",
+                children: "Preset value out of range"
+            }),
+            /*#__PURE__*/ _jsx(StoredValueWrapper, {
+                value: limitedRangeFieldPreset.value,
+                children: /*#__PURE__*/ _jsx(NumberInput, {
+                    value: limitedRangeFieldPreset.value,
+                    onChange: limitedRangeFieldPreset.onChange,
+                    emptyValue: undefined,
+                    min: 3,
+                    max: 7
+                })
+            }),
+            /*#__PURE__*/ _jsx(Text, {
+                size: 4,
+                className: "m-t-4 m-b-half",
+                children: "Preset value with precision out of limit"
+            }),
+            /*#__PURE__*/ _jsx(StoredValueWrapper, {
+                value: precisionFieldPreset.value,
+                children: /*#__PURE__*/ _jsx(NumberInput, {
+                    value: precisionFieldPreset.value,
+                    onChange: precisionFieldPreset.onChange,
+                    emptyValue: undefined,
+                    decimalPlaces: 3
+                })
+            }),
+            /*#__PURE__*/ _jsx(Text, {
+                size: 4,
+                className: "m-t-4 m-b-half",
+                children: "Preset value with precision out of limit (zero decimals allowed)"
+            }),
+            /*#__PURE__*/ _jsx(StoredValueWrapper, {
+                value: precisionFieldPresetExtreme.value,
+                children: /*#__PURE__*/ _jsx(NumberInput, {
+                    value: precisionFieldPresetExtreme.value,
+                    onChange: precisionFieldPresetExtreme.onChange,
+                    emptyValue: undefined,
+                    decimalPlaces: 0
+                })
+            })
+        ]
+    });
 });
-const StoredValueWrapper = ({ children, value }) => (_jsxs(Stack, { alignItems: "baseline", children: [children, _jsxs(Text, { size: 3, className: "m-l-3", children: ["Stored value: ", value] })] }));
+const StoredValueWrapper = ({ children, value })=>/*#__PURE__*/ _jsxs(Stack, {
+        alignItems: "baseline",
+        children: [
+            children,
+            /*#__PURE__*/ _jsxs(Text, {
+                size: 3,
+                className: "m-l-3",
+                children: [
+                    "Stored value: ",
+                    value
+                ]
+            })
+        ]
+    });
+
 //# sourceMappingURL=number-input.js.map

package/dist/demo/number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.js","sourceRoot":"","sources":["../../src/demo/number-input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../src/demo/number-input.tsx"],"sourcesContent":["import { useRef, Fragment, FC, PropsWithChildren } from 'react';\n\nimport { observer } from 'mobx-react';\n\nimport { Stack, Text } from '@servicetitan/design-system';\n\nimport { NumberInput } from '..';\n\nimport { FieldState } from 'formstate';\n\nfunction useNumberField<T extends number | undefined>(initial: T) {\n    return useRef(new FieldState(initial)).current;\n}\n\nexport const NumberInputExample: FC = observer(() => {\n    const defaultField = useNumberField<number | undefined>(undefined);\n    const zeroEmptyValueField = useNumberField<number>(0);\n    const precisionField = useNumberField<number | undefined>(undefined);\n    const limitedRangeField = useNumberField<number | undefined>(undefined);\n    const withoutThousandsSeparator = useNumberField<number | undefined>(undefined);\n\n    const limitedRangeFieldPreset = useNumberField<number | undefined>(100);\n    const precisionFieldPreset = useNumberField<number | undefined>(3.6666666);\n    const precisionFieldPresetExtreme = useNumberField<number | undefined>(3.6666666);\n\n    return (\n        <Fragment>\n            <Text size={4} className=\"m-b-half\">\n                Default\n            </Text>\n            <NumberInput\n                value={defaultField.value}\n                onChange={defaultField.onChange}\n                emptyValue={undefined}\n            />\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Zero as empty value\n            </Text>\n            <NumberInput\n                value={zeroEmptyValueField.value}\n                onChange={zeroEmptyValueField.onChange}\n                emptyValue={0}\n            />\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Precision\n            </Text>\n            <NumberInput\n                value={precisionField.value}\n                onChange={precisionField.onChange}\n                emptyValue={undefined}\n                decimalPlaces={3}\n            />\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Limited range\n            </Text>\n            <NumberInput\n                value={limitedRangeField.value}\n                onChange={limitedRangeField.onChange}\n                emptyValue={undefined}\n                min={3}\n                max={7}\n            />\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Without thousands separator\n            </Text>\n            <NumberInput\n                value={withoutThousandsSeparator.value}\n                onChange={withoutThousandsSeparator.onChange}\n                emptyValue={undefined}\n                decimalPlaces={0}\n                useEmptyThousandsSeparator\n            />\n\n            <hr className=\"m-y-4\" />\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Preset value out of range\n            </Text>\n            <StoredValueWrapper value={limitedRangeFieldPreset.value}>\n                <NumberInput\n                    value={limitedRangeFieldPreset.value}\n                    onChange={limitedRangeFieldPreset.onChange}\n                    emptyValue={undefined}\n                    min={3}\n                    max={7}\n                />\n            </StoredValueWrapper>\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Preset value with precision out of limit\n            </Text>\n            <StoredValueWrapper value={precisionFieldPreset.value}>\n                <NumberInput\n                    value={precisionFieldPreset.value}\n                    onChange={precisionFieldPreset.onChange}\n                    emptyValue={undefined}\n                    decimalPlaces={3}\n                />\n            </StoredValueWrapper>\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Preset value with precision out of limit (zero decimals allowed)\n            </Text>\n            <StoredValueWrapper value={precisionFieldPresetExtreme.value}>\n                <NumberInput\n                    value={precisionFieldPresetExtreme.value}\n                    onChange={precisionFieldPresetExtreme.onChange}\n                    emptyValue={undefined}\n                    decimalPlaces={0}\n                />\n            </StoredValueWrapper>\n        </Fragment>\n    );\n});\n\nconst StoredValueWrapper: FC<PropsWithChildren<{ value?: number }>> = ({ children, value }) => (\n    <Stack alignItems=\"baseline\">\n        {children}\n        <Text size={3} className=\"m-l-3\">\n            Stored value: {value}\n        </Text>\n    </Stack>\n);\n"],"names":["useRef","Fragment","observer","Stack","Text","NumberInput","FieldState","useNumberField","initial","current","NumberInputExample","defaultField","undefined","zeroEmptyValueField","precisionField","limitedRangeField","withoutThousandsSeparator","limitedRangeFieldPreset","precisionFieldPreset","precisionFieldPresetExtreme","size","className","value","onChange","emptyValue","decimalPlaces","min","max","useEmptyThousandsSeparator","hr","StoredValueWrapper","children","alignItems"],"mappings":";AAAA,SAASA,MAAM,EAAEC,QAAQ,QAA+B,QAAQ;AAEhE,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,KAAK,EAAEC,IAAI,QAAQ,8BAA8B;AAE1D,SAASC,WAAW,QAAQ,KAAK;AAEjC,SAASC,UAAU,QAAQ,YAAY;AAEvC,SAASC,eAA6CC,OAAU;IAC5D,OAAOR,OAAO,IAAIM,WAAWE,UAAUC,OAAO;AAClD;AAEA,OAAO,MAAMC,qBAAyBR,SAAS;IAC3C,MAAMS,eAAeJ,eAAmCK;IACxD,MAAMC,sBAAsBN,eAAuB;IACnD,MAAMO,iBAAiBP,eAAmCK;IAC1D,MAAMG,oBAAoBR,eAAmCK;IAC7D,MAAMI,4BAA4BT,eAAmCK;IAErE,MAAMK,0BAA0BV,eAAmC;IACnE,MAAMW,uBAAuBX,eAAmC;IAChE,MAAMY,8BAA8BZ,eAAmC;IAEvE,qBACI,MAACN;;0BACG,KAACG;gBAAKgB,MAAM;gBAAGC,WAAU;0BAAW;;0BAGpC,KAAChB;gBACGiB,OAAOX,aAAaW,KAAK;gBACzBC,UAAUZ,aAAaY,QAAQ;gBAC/BC,YAAYZ;;0BAGhB,KAACR;gBAAKgB,MAAM;gBAAGC,WAAU;0BAAiB;;0BAG1C,KAAChB;gBACGiB,OAAOT,oBAAoBS,KAAK;gBAChCC,UAAUV,oBAAoBU,QAAQ;gBACtCC,YAAY;;0BAGhB,KAACpB;gBAAKgB,MAAM;gBAAGC,WAAU;0BAAiB;;0BAG1C,KAAChB;gBACGiB,OAAOR,eAAeQ,KAAK;gBAC3BC,UAAUT,eAAeS,QAAQ;gBACjCC,YAAYZ;gBACZa,eAAe;;0BAGnB,KAACrB;gBAAKgB,MAAM;gBAAGC,WAAU;0BAAiB;;0BAG1C,KAAChB;gBACGiB,OAAOP,kBAAkBO,KAAK;gBAC9BC,UAAUR,kBAAkBQ,QAAQ;gBACpCC,YAAYZ;gBACZc,KAAK;gBACLC,KAAK;;0BAGT,KAACvB;gBAAKgB,MAAM;gBAAGC,WAAU;0BAAiB;;0BAG1C,KAAChB;gBACGiB,OAAON,0BAA0BM,KAAK;gBACtCC,UAAUP,0BAA0BO,QAAQ;gBAC5CC,YAAYZ;gBACZa,eAAe;gBACfG,0BAA0B;;0BAG9B,KAACC;gBAAGR,WAAU;;0BAEd,KAACjB;gBAAKgB,MAAM;gBAAGC,WAAU;0BAAiB;;0BAG1C,KAACS;gBAAmBR,OAAOL,wBAAwBK,KAAK;0BACpD,cAAA,KAACjB;oBACGiB,OAAOL,wBAAwBK,KAAK;oBACpCC,UAAUN,wBAAwBM,QAAQ;oBAC1CC,YAAYZ;oBACZc,KAAK;oBACLC,KAAK;;;0BAIb,KAACvB;gBAAKgB,MAAM;gBAAGC,WAAU;0BAAiB;;0BAG1C,KAACS;gBAAmBR,OAAOJ,qBAAqBI,KAAK;0BACjD,cAAA,KAACjB;oBACGiB,OAAOJ,qBAAqBI,KAAK;oBACjCC,UAAUL,qBAAqBK,QAAQ;oBACvCC,YAAYZ;oBACZa,eAAe;;;0BAIvB,KAACrB;gBAAKgB,MAAM;gBAAGC,WAAU;0BAAiB;;0BAG1C,KAACS;gBAAmBR,OAAOH,4BAA4BG,KAAK;0BACxD,cAAA,KAACjB;oBACGiB,OAAOH,4BAA4BG,KAAK;oBACxCC,UAAUJ,4BAA4BI,QAAQ;oBAC9CC,YAAYZ;oBACZa,eAAe;;;;;AAKnC,GAAG;AAEH,MAAMK,qBAAgE,CAAC,EAAEC,QAAQ,EAAET,KAAK,EAAE,iBACtF,MAACnB;QAAM6B,YAAW;;YACbD;0BACD,MAAC3B;gBAAKgB,MAAM;gBAAGC,WAAU;;oBAAQ;oBACdC"}

package/dist/demo/original-number-input.js

@@ -7,8 +7,24 @@ import { OrdinalNumberInput } from '..';
 function useOrdinalNumberInputField(initial) {
     return useRef(new FieldState(initial)).current;
 }
-export const OrdinalNumberInputExample = observer(() => {
+export const OrdinalNumberInputExample = observer(()=>{
     const defaultField = useOrdinalNumberInputField(undefined);
-    return (_jsxs(Fragment, { children: [_jsx(Text, { size: 4, className: "m-b-half", children: "Default" }), _jsx(OrdinalNumberInput, { value: defaultField.value, onChange: defaultField.onChange, min: 1, max: 31, placeholder: "1 - 31" })] }));
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Text, {
+                size: 4,
+                className: "m-b-half",
+                children: "Default"
+            }),
+            /*#__PURE__*/ _jsx(OrdinalNumberInput, {
+                value: defaultField.value,
+                onChange: defaultField.onChange,
+                min: 1,
+                max: 31,
+                placeholder: "1 - 31"
+            })
+        ]
+    });
 });
+
 //# sourceMappingURL=original-number-input.js.map

package/dist/demo/original-number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"original-number-input.js","sourceRoot":"","sources":["../../src/demo/original-number-input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,IAAI,CAAC;AAExC,SAAS,0BAA0B,CAA+B,OAAU;IACxE,OAAO,MAAM,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;AACnD,CAAC;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAO,QAAQ,CAAC,GAAG,EAAE;IACvD,MAAM,YAAY,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAE3D,OAAO,CACH,MAAC,QAAQ,eACL,KAAC,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAC,UAAU,wBAE5B,EACP,KAAC,kBAAkB,IACf,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAC/B,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,EAAE,EACP,WAAW,EAAC,QAAQ,GACtB,IACK,CACd,CAAC;AACN,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/demo/original-number-input.tsx"],"sourcesContent":["import { FC, Fragment, useRef } from 'react';\n\nimport { observer } from 'mobx-react';\n\nimport { Text } from '@servicetitan/design-system';\n\nimport { FieldState } from 'formstate';\n\nimport { OrdinalNumberInput } from '..';\n\nfunction useOrdinalNumberInputField<T extends number | undefined>(initial: T) {\n    return useRef(new FieldState(initial)).current;\n}\n\nexport const OrdinalNumberInputExample: FC = observer(() => {\n    const defaultField = useOrdinalNumberInputField(undefined);\n\n    return (\n        <Fragment>\n            <Text size={4} className=\"m-b-half\">\n                Default\n            </Text>\n            <OrdinalNumberInput\n                value={defaultField.value}\n                onChange={defaultField.onChange}\n                min={1}\n                max={31}\n                placeholder=\"1 - 31\"\n            />\n        </Fragment>\n    );\n});\n"],"names":["Fragment","useRef","observer","Text","FieldState","OrdinalNumberInput","useOrdinalNumberInputField","initial","current","OrdinalNumberInputExample","defaultField","undefined","size","className","value","onChange","min","max","placeholder"],"mappings":";AAAA,SAAaA,QAAQ,EAAEC,MAAM,QAAQ,QAAQ;AAE7C,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,IAAI,QAAQ,8BAA8B;AAEnD,SAASC,UAAU,QAAQ,YAAY;AAEvC,SAASC,kBAAkB,QAAQ,KAAK;AAExC,SAASC,2BAAyDC,OAAU;IACxE,OAAON,OAAO,IAAIG,WAAWG,UAAUC,OAAO;AAClD;AAEA,OAAO,MAAMC,4BAAgCP,SAAS;IAClD,MAAMQ,eAAeJ,2BAA2BK;IAEhD,qBACI,MAACX;;0BACG,KAACG;gBAAKS,MAAM;gBAAGC,WAAU;0BAAW;;0BAGpC,KAACR;gBACGS,OAAOJ,aAAaI,KAAK;gBACzBC,UAAUL,aAAaK,QAAQ;gBAC/BC,KAAK;gBACLC,KAAK;gBACLC,aAAY;;;;AAI5B,GAAG"}