@servicetitan/design-system 10.8.0 → 11.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/design-system",
-    "version": "10.8.0",
+    "version": "11.2.0",
     "description": "",
     "homepage": "https://anvil.servicetitan.com",
     "repository": {
@@ -12,6 +12,9 @@
         "url": "https://anvil.st.dev"
     },
     "main": "./dist/system.js",
+    "sideEffects": [
+        "**/*.css"
+    ],
     "scripts": {
         "start": "npm run watch --silent",
         "build": "npm run build:init && run-p build:css build:js --silent",
@@ -53,7 +56,7 @@
         "access": "public"
     },
     "dependencies": {
-        "@popperjs/core": "2.9.2",
+        "@popperjs/core": "2.11.0",
         "@progress/kendo-data-query": "~1.5.4",
         "@progress/kendo-drawing": "~1.11.0",
         "@progress/kendo-licensing": "~1.2.0",
@@ -70,23 +73,23 @@
         "@progress/kendo-react-treeview": "~4.10.0",
         "@react-aria/focus": "^3.2.3",
         "@react-hook/window-size": "^3.0.7",
-        "@servicetitan/anvil-fonts": "^10.8.0",
-        "@servicetitan/anvil-icons": "^10.8.0",
-        "@servicetitan/anvil-themes": "^10.8.0",
-        "@servicetitan/tokens": "^10.8.0",
+        "@servicetitan/anvil-fonts": "^11.2.0",
+        "@servicetitan/anvil-icons": "^11.2.0",
+        "@servicetitan/anvil-themes": "^11.2.0",
+        "@servicetitan/tokens": "^11.2.0",
         "classnames": "2.3.1",
         "framer-motion": "4.1.17",
         "memoize-one": "5.2.1",
         "moment": "2.29.1",
         "nanoid": "3.1.25",
         "react-animate-height": "^2.0.22",
+        "react-focus-lock": "^2.5.2",
         "react-input-mask": "2.0.4",
         "react-is": "17.0.2",
         "react-popper": "2.2.5",
         "react-textarea-autosize": "8.3.3",
         "react-transition-group": "4.4.2",
         "semantic-ui-react": "2.0.3",
-        "tabbable": "5.2.1",
         "tinycolor2": "1.4.2"
     },
     "peerDependencies": {
@@ -94,9 +97,9 @@
         "react-dom": "^16 || ^17"
     },
     "devDependencies": {
-        "@lib/semantic": "^10.8.0",
+        "@lib/semantic": "^11.2.0",
         "@progress/kendo-theme-default": "4.42.0",
-        "@servicetitan/anvil-css-utilities": "^10.8.0",
+        "@servicetitan/anvil-css-utilities": "^11.2.0",
         "@testing-library/jest-dom": "5.14.1",
         "@testing-library/react": "12.1.0",
         "@testing-library/user-event": "13.2.1",
@@ -123,5 +126,5 @@
         "ts-jest": "27.0.5",
         "typescript": "4.4.3"
     },
-    "gitHead": "1a7961393b530e9bb0dee2c3b0311559fcb0f149"
+    "gitHead": "4f1b2aae8a247b69896c39289a5da3f684272c38"
 }

package/dist/hooks/useFocusScope.d.ts

@@ -1,16 +0,0 @@
-import React, { MutableRefObject } from 'react';
-export interface FocusScopeOptions {
-    /** Disables focus trap */
-    disableTrapping?: boolean;
-    /** Disables autofocusing of first focusable descendant. Note this autofocus doesn't override descendant autofocus.  */
-    disableAutofocus?: boolean;
-    /** Disables restoring focus upon unmounting  */
-    disableRestoreFocus?: boolean;
-    /** Restores focus upon unmounting of custom element. Defaults to last active element before mount. */
-    restoreFocusRef?: MutableRefObject<any>;
-}
-export declare const useFocusScope: (focusScopeRef: MutableRefObject<any> | MutableRefObject<any>[], options?: FocusScopeOptions) => {
-    handleTab: (e: React.KeyboardEvent<HTMLElement>) => void;
-    autofocus: () => void;
-    restoreFocus: () => void;
-};

package/dist/hooks/useFocusScope.js

@@ -1,89 +0,0 @@
-"use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFocusScope = void 0;
-var react_1 = require("react");
-var tabbable_1 = require("tabbable");
-var keyCodes_1 = require("../utilities/keyCodes");
-var focus_utils_1 = require("../utilities/focus-utils");
-var react_dom_1 = require("react-dom");
-var useFocusScope = function (focusScopeRef, options) {
-    var _a = options !== null && options !== void 0 ? options : {}, disableTrapping = _a.disableTrapping, disableAutofocus = _a.disableAutofocus, disableRestoreFocus = _a.disableRestoreFocus, restoreFocusRef = _a.restoreFocusRef;
-    var tabbableNodes = (0, react_1.useRef)([]);
-    var focusScope = (0, react_1.useMemo)(function () { return (Array.isArray(focusScopeRef) ? focusScopeRef : [focusScopeRef]); }, [focusScopeRef]);
-    var defaultRestoreFocusElement = (0, react_1.useMemo)(function () { return (0, focus_utils_1.getActiveElement)(); }, []);
-    var handleTab = function (e) {
-        if (e.code === keyCodes_1.Keys.Tab) {
-            if (disableTrapping)
-                return;
-            if (tabbableNodes.current.length > 0)
-                e.preventDefault();
-            e.stopPropagation();
-            if (e.shiftKey) {
-                (0, focus_utils_1.focusPrev)(tabbableNodes.current);
-            }
-            else {
-                (0, focus_utils_1.focusNext)(tabbableNodes.current);
-            }
-        }
-    };
-    var getElementFromRef = function (ref) {
-        if (ref.current instanceof Element)
-            return ref.current;
-        /**
-         * React refs can either be DOM Elements or React Components.
-         * Since we use DOM Element methods such as 'contains' and
-         * 'querySelectorAll' (tabbable package), we convert the refs
-         * here to DOM Element refs. Currently doesn't seem to be a
-         * better way besides findDOMNode.
-         */
-        // eslint-disable-next-line react/no-find-dom-node
-        return (0, react_dom_1.findDOMNode)(ref.current);
-    };
-    var autofocus = function () {
-        if (tabbableNodes.current.length > 0) {
-            (0, focus_utils_1.focusNext)((0, tabbable_1.tabbable)(tabbableNodes.current[0], {
-                includeContainer: true,
-            }));
-        }
-    };
-    var restoreFocus = function () {
-        var _a;
-        (0, focus_utils_1.tryFocus)((_a = restoreFocusRef === null || restoreFocusRef === void 0 ? void 0 : restoreFocusRef.current) !== null && _a !== void 0 ? _a : defaultRestoreFocusElement);
-    };
-    (0, react_1.useEffect)(function () {
-        var setTabbableNodes = function () {
-            tabbableNodes.current = focusScope.reduce(function (nodes, ref) {
-                if (!ref.current)
-                    return nodes;
-                var element = getElementFromRef(ref);
-                return __spreadArray(__spreadArray([], nodes, true), (0, tabbable_1.tabbable)(element, { includeContainer: true }), true);
-            }, []);
-        };
-        !disableTrapping && setTabbableNodes();
-    });
-    (0, react_1.useEffect)(function () {
-        var isAlreadyAutofocused = function (ref) {
-            var _a, _b;
-            var element = getElementFromRef(ref);
-            return (_b = (_a = element === null || element === void 0 ? void 0 : element.contains) === null || _a === void 0 ? void 0 : _a.call(element, document.activeElement)) !== null && _b !== void 0 ? _b : false;
-        };
-        if (disableAutofocus || focusScope.some(isAlreadyAutofocused))
-            return;
-        autofocus();
-    }, [focusScopeRef, disableAutofocus, focusScope]);
-    (0, react_1.useEffect)(function () { return function () { return !disableRestoreFocus && restoreFocus(); }; }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [disableRestoreFocus, focusScopeRef]);
-    return { handleTab: handleTab, autofocus: autofocus, restoreFocus: restoreFocus };
-};
-exports.useFocusScope = useFocusScope;
-//# sourceMappingURL=useFocusScope.js.map

package/dist/hooks/useFocusScope.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFocusScope.js","sourceRoot":"","sources":["../../src/hooks/useFocusScope.ts"],"names":[],"mappings":"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"}

package/dist/utilities/focus-utils.d.ts

@@ -1,4 +0,0 @@
-export declare const getActiveElement: (element?: Element) => Element;
-export declare const focusNext: (tabbables: Node[]) => void;
-export declare const focusPrev: (tabbables: Node[]) => void;
-export declare const tryFocus: (el: HTMLElement) => void;

package/dist/utilities/focus-utils.js

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tryFocus = exports.focusPrev = exports.focusNext = exports.getActiveElement = void 0;
-var getActiveElement = function (element) {
-    if (typeof window === 'undefined')
-        return null;
-    var currentActive = element !== null && element !== void 0 ? element : document.activeElement;
-    var shadowRoot = currentActive.shadowRoot;
-    var contentDocument = currentActive
-        .contentDocument;
-    if (shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.activeElement)
-        return (0, exports.getActiveElement)(shadowRoot.activeElement);
-    if (contentDocument === null || contentDocument === void 0 ? void 0 : contentDocument.activeElement)
-        return (0, exports.getActiveElement)(contentDocument.activeElement);
-    return currentActive;
-};
-exports.getActiveElement = getActiveElement;
-var getActiveIndex = function (tabbables) {
-    return tabbables.indexOf((0, exports.getActiveElement)());
-};
-var focusNext = function (tabbables) {
-    var nextNode = tabbables[getActiveIndex(tabbables) + 1] || tabbables[0];
-    (0, exports.tryFocus)(nextNode);
-};
-exports.focusNext = focusNext;
-var focusPrev = function (tabbables) {
-    var prevNode = tabbables[getActiveIndex(tabbables) - 1] ||
-        tabbables[tabbables.length - 1];
-    (0, exports.tryFocus)(prevNode);
-};
-exports.focusPrev = focusPrev;
-var tryFocus = function (el) {
-    if (el === document.activeElement)
-        return;
-    if (!el || !el.focus) {
-        return;
-    }
-    el.focus({ preventScroll: true }); // Configurable
-    if (isSelectableInput(el)) {
-        el.select();
-    }
-};
-exports.tryFocus = tryFocus;
-var isSelectableInput = function (el) {
-    var _a;
-    return ((_a = el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'input' &&
-        typeof el.select === 'function';
-};
-//# sourceMappingURL=focus-utils.js.map

package/dist/utilities/focus-utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"focus-utils.js","sourceRoot":"","sources":["../../src/utilities/focus-utils.ts"],"names":[],"mappings":";;;AAAO,IAAM,gBAAgB,GAAG,UAAC,OAAiB;IACjD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,IAAI,CAAC;IAC/C,IAAM,aAAa,GAAG,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,QAAQ,CAAC,aAAa,CAAC;IACxD,IAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC;IAC5C,IAAM,eAAe,GAAI,aAAmC;SAC1D,eAAe,CAAC;IAElB,IAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa;QAC5B,OAAO,IAAA,wBAAgB,EAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACnD,IAAI,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,aAAa;QACjC,OAAO,IAAA,wBAAgB,EAAC,eAAe,CAAC,aAAa,CAAC,CAAC;IAExD,OAAO,aAAa,CAAC;AACtB,CAAC,CAAC;AAbW,QAAA,gBAAgB,oBAa3B;AAEF,IAAM,cAAc,GAAG,UAAC,SAAiB;IACxC,OAAA,SAAS,CAAC,OAAO,CAAC,IAAA,wBAAgB,GAAE,CAAC;AAArC,CAAqC,CAAC;AAEhC,IAAM,SAAS,GAAG,UAAC,SAAiB;IAC1C,IAAM,QAAQ,GAAG,SAAS,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;IAC1E,IAAA,gBAAQ,EAAC,QAAuB,CAAC,CAAC;AACnC,CAAC,CAAC;AAHW,QAAA,SAAS,aAGpB;AAEK,IAAM,SAAS,GAAG,UAAC,SAAiB;IAC1C,IAAM,QAAQ,GACb,SAAS,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QACxC,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAEjC,IAAA,gBAAQ,EAAC,QAAuB,CAAC,CAAC;AACnC,CAAC,CAAC;AANW,QAAA,SAAS,aAMpB;AAEK,IAAM,QAAQ,GAAG,UAAC,EAAe;IACvC,IAAI,EAAE,KAAK,QAAQ,CAAC,aAAa;QAAE,OAAO;IAC1C,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,OAAO;KACP;IACD,EAAE,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe;IAClD,IAAI,iBAAiB,CAAC,EAAE,CAAC,EAAE;QACzB,EAAuB,CAAC,MAAM,EAAE,CAAC;KAClC;AACF,CAAC,CAAC;AATW,QAAA,QAAQ,YASnB;AAEF,IAAM,iBAAiB,GAAG,UAAC,EAAe;;IACzC,OAAA,CAAA,MAAA,EAAE,CAAC,OAAO,0CAAE,WAAW,EAAE,MAAK,OAAO;QACrC,OAAQ,EAAuB,CAAC,MAAM,KAAK,UAAU,CAAA;CAAA,CAAC"}