@servicetitan/form 16.1.0 → 17.1.1

package/dist/phone-number-input/phone-number-input.d.ts

@@ -3,5 +3,5 @@ import { FormInputProps } from '@servicetitan/design-system';
 export interface PhoneNumberInputProps extends FormInputProps {
     sip?: boolean;
 }
-export declare const PhoneNumberInput: import("react").ForwardRefExoticComponent<Pick<PhoneNumberInputProps, string | number> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const PhoneNumberInput: import("react").ForwardRefExoticComponent<Pick<PhoneNumberInputProps, keyof PhoneNumberInputProps> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=phone-number-input.d.ts.map

package/dist/phone-number-input/phone-number-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"phone-number-input.d.ts","sourceRoot":"","sources":["../../src/phone-number-input/phone-number-input.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAQ,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEnE,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IACzD,GAAG,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,2IAS5B,CAAC"}
+{"version":3,"file":"phone-number-input.d.ts","sourceRoot":"","sources":["../../src/phone-number-input/phone-number-input.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAQ,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEnE,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IACzD,GAAG,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,uJAS5B,CAAC"}

package/dist/phone-number-input/phone-number-input.js

@@ -19,8 +19,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_input_mask_1 = __importDefault(require("react-input-mask"));
 const design_system_1 = require("@servicetitan/design-system");
-exports.PhoneNumberInput = react_1.forwardRef((_a, ref) => {
+exports.PhoneNumberInput = (0, react_1.forwardRef)((_a, ref) => {
     var { sip } = _a, props = __rest(_a, ["sip"]);
-    return sip ? (jsx_runtime_1.jsx(design_system_1.Form.Input, Object.assign({}, props, { ref: ref }), void 0)) : (jsx_runtime_1.jsx(react_input_mask_1.default, Object.assign({ maskChar: null, mask: "(999) 999-9999" }, props, { children: () => jsx_runtime_1.jsx(design_system_1.Form.Input, Object.assign({ ref: ref }, props), void 0) }), void 0));
+    return sip ? ((0, jsx_runtime_1.jsx)(design_system_1.Form.Input, Object.assign({}, props, { ref: ref }), void 0)) : ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, Object.assign({ maskChar: null, mask: "(999) 999-9999" }, props, { children: () => (0, jsx_runtime_1.jsx)(design_system_1.Form.Input, Object.assign({ ref: ref }, props), void 0) }), void 0));
 });
 //# sourceMappingURL=phone-number-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"phone-number-input.js","sourceRoot":"","sources":["../../src/phone-number-input/phone-number-input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAAmC;AACnC,wEAAyC;AAEzC,+DAAmE;AAMtD,QAAA,gBAAgB,GAAG,kBAAU,CACtC,CAAC,EAAiB,EAAE,GAAG,EAAE,EAAE;QAA1B,EAAE,GAAG,OAAY,EAAP,KAAK,cAAf,OAAiB,CAAF;IACZ,OAAA,GAAG,CAAC,CAAC,CAAC,CACF,kBAAC,oBAAI,CAAC,KAAK,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,YAAI,CACtC,CAAC,CAAC,CAAC,CACA,kBAAC,0BAAS,kBAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAC,gBAAgB,IAAK,KAAK,cACrD,GAAG,EAAE,CAAC,kBAAC,oBAAI,CAAC,KAAK,kBAAC,GAAG,EAAE,GAAG,IAAM,KAAK,UAAI,YAClC,CACf,CAAA;CAAA,CACR,CAAC"}
+{"version":3,"file":"phone-number-input.js","sourceRoot":"","sources":["../../src/phone-number-input/phone-number-input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAAmC;AACnC,wEAAyC;AAEzC,+DAAmE;AAMtD,QAAA,gBAAgB,GAAG,IAAA,kBAAU,EACtC,CAAC,EAAiB,EAAE,GAAG,EAAE,EAAE;QAA1B,EAAE,GAAG,OAAY,EAAP,KAAK,cAAf,OAAiB,CAAF;IACZ,OAAA,GAAG,CAAC,CAAC,CAAC,CACF,uBAAC,oBAAI,CAAC,KAAK,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,YAAI,CACtC,CAAC,CAAC,CAAC,CACA,uBAAC,0BAAS,kBAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAC,gBAAgB,IAAK,KAAK,cACrD,GAAG,EAAE,CAAC,uBAAC,oBAAI,CAAC,KAAK,kBAAC,GAAG,EAAE,GAAG,IAAM,KAAK,UAAI,YAClC,CACf,CAAA;CAAA,CACR,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/form",
-    "version": "16.1.0",
+    "version": "17.1.1",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/form",
     "repository": {
@@ -15,14 +15,14 @@
         "src"
     ],
     "devDependencies": {
-        "@servicetitan/confirm": "^16.1.0",
-        "@servicetitan/culture": "^16.1.0",
-        "@servicetitan/data-query": "^16.1.0",
-        "@servicetitan/design-system": "~10.2.1",
-        "@servicetitan/react-ioc": "^16.1.0",
-        "@servicetitan/tokens": "~10.2.1",
+        "@servicetitan/confirm": "^17.1.1",
+        "@servicetitan/culture": "^17.1.1",
+        "@servicetitan/data-query": "^17.1.1",
+        "@servicetitan/design-system": "~10.3.3",
+        "@servicetitan/react-ioc": "^17.1.1",
+        "@servicetitan/tokens": "~10.3.3",
         "@types/debounce": "~1.2.1",
-        "@types/react": "~17.0.24",
+        "@types/react": "~17.0.27",
         "@types/react-input-mask": "~2.0.5",
         "@types/uuid": "~8.3.1",
         "accounting": "~0.4.1",
@@ -38,9 +38,9 @@
         "@servicetitan/confirm": "^14.0.0",
         "@servicetitan/culture": "^14.0.0",
         "@servicetitan/data-query": "^14.0.0",
-        "@servicetitan/design-system": "~10.2.1",
+        "@servicetitan/design-system": "~10.3.3",
         "@servicetitan/react-ioc": "^14.0.0",
-        "@servicetitan/tokens": "~10.2.1",
+        "@servicetitan/tokens": "~10.3.3",
         "accounting": "~0.4.1",
         "formstate": "~2.0.0",
         "mobx": "~6.3.3",
@@ -65,5 +65,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "3790506ef903e0e9bf129dcf4d2ed352f42b007d"
+    "gitHead": "01f27439e67c569dd6534738dfba79d6dbbb41a5"
 }

package/src/date-range-picker/date-range-picker.module.css

@@ -10,7 +10,7 @@
     overflow: hidden;
 }
 .date-range-picker .date-range-picker-kendo :global(.k-textbox-container) {
-    padding-top: 0;
+    padding-top: var(--spacing-0);
     height: var(--spacing-4);
 }
 
@@ -30,7 +30,7 @@
 }
 
 .end-label {
-    margin: 0 var(--spacing-half);
+    margin: var(--spacing-0) var(--spacing-half);
     color: var(--color-neutral-80);
     font-size: var(--typescale-4);
     width: var(--spacing-3);

package/src/dropdown-state.ts

@@ -84,7 +84,9 @@ export class DropdownState<T extends DropdownOption<any>> {
     }
 
     @computed private get searchFilter() {
-        if (!this.search) return undefined;
+        if (!this.search) {
+            return undefined;
+        }
 
         const filter = { operator: 'contains', value: this.search, ignoreCase: true };
 

package/src/number-input/number-input.tsx

@@ -1,4 +1,12 @@
-import { useCallback, useState, useEffect, SyntheticEvent, KeyboardEvent, FocusEvent } from 'react';
+import {
+    useCallback,
+    useState,
+    useEffect,
+    useRef,
+    SyntheticEvent,
+    KeyboardEvent,
+    FocusEvent,
+} from 'react';
 
 import { useOptionalDependencies } from '@servicetitan/react-ioc';
 
@@ -10,8 +18,11 @@ import { FormatNumber, getFormattedString } from './get-formatted-string';
 import { EmptyValue, NumberValue } from './common-interfaces';
 import { formatNumber as formatNumberDefault } from 'accounting';
 
+import debounce from 'debounce';
+
 const ARROW_UP_KEY = 38;
 const ARROW_DOWN_KEY = 40;
+const DEBOUNCE_WAIT = 300;
 
 export interface NumberInputProps<TEmpty extends EmptyValue>
     extends Omit<InputProps, 'value' | 'onChange'> {
@@ -104,7 +115,13 @@ export const NumberInput = <TEmpty extends EmptyValue>({
         }
     };
 
-    const updateValue = (value: string, silent = false) => {
+    /*
+     ** "updateImmediateValue" updates the value immediately without clamping min/max,
+     ** then "updateClampedValueDebounced" updates applying the min/max after debounce delay
+     **
+     ** Example: User can type "100" if min is "5" without the "1" immediately being clamped
+     */
+    const updateImmediateValue = (value: string, silent = false) => {
         const newState = processValue(
             value,
             {
@@ -114,10 +131,6 @@ export const NumberInput = <TEmpty extends EmptyValue>({
                     thousand: thousandsSeparator,
                     decimal: decimalSeparator,
                 },
-                range: {
-                    min,
-                    max,
-                },
             },
             formatNumber
         );
@@ -129,6 +142,56 @@ export const NumberInput = <TEmpty extends EmptyValue>({
         }
     };
 
+    const updateClampedValueDebounced = useRef<(value: string, silent: boolean) => void>();
+
+    useEffect(() => {
+        let isCurrent = true;
+
+        const updateClampedValue = (value: string, silent = false) => {
+            if (isCurrent) {
+                const newState = processValue(
+                    value,
+                    {
+                        emptyValue,
+                        precision: decimalPlaces,
+                        separators: {
+                            thousand: thousandsSeparator,
+                            decimal: decimalSeparator,
+                        },
+                        range: { min, max },
+                    },
+                    formatNumber
+                );
+
+                setState(newState);
+
+                if (!silent) {
+                    onChange(newState.numberValue);
+                }
+            }
+        };
+
+        updateClampedValueDebounced.current = debounce(updateClampedValue, DEBOUNCE_WAIT);
+
+        return () => {
+            isCurrent = false;
+        };
+    }, [
+        emptyValue,
+        decimalPlaces,
+        thousandsSeparator,
+        decimalSeparator,
+        min,
+        max,
+        formatNumber,
+        onChange,
+    ]);
+
+    const updateValue = (value: string, silent = false) => {
+        updateImmediateValue(value, silent);
+        updateClampedValueDebounced.current?.(value, silent);
+    };
+
     const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
         if (state.numberValue !== undefined) {
             updateValue(String(state.numberValue), true);