@servicetitan/design-system 11.0.0 → 11.3.0

package/dist/components/Headline/Headline.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,24 +9,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Headline = void 0;
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-exports.Headline = react_1.default.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, el = _a.el, inline = _a.inline, italic = _a.italic, subdued = _a.subdued, _c = _a.size, size = _c === void 0 ? 'medium' : _c, props = __rest(_a, ["children", "className", "el", "inline", "italic", "subdued", "size"]);
-    var TextClasses = (0, classnames_1.default)('Headline', className, (_b = {},
-        _b["Headline--" + size] = size,
-        _b['d-i'] = inline,
-        _b['fs-italic'] = italic,
-        _b['fs-normal'] = !italic && italic != null,
-        _b['c-neutral-90'] = subdued,
-        _b));
-    var newEl = function () {
+import React from 'react';
+import classnames from 'classnames';
+export const Headline = React.forwardRef((_a, ref) => {
+    var { children, className, el, inline, italic, subdued, size = 'medium' } = _a, props = __rest(_a, ["children", "className", "el", "inline", "italic", "subdued", "size"]);
+    const TextClasses = classnames('Headline', className, {
+        [`Headline--${size}`]: size,
+        'd-i': inline,
+        'fs-italic': italic,
+        'fs-normal': !italic && italic != null,
+        'c-neutral-90': subdued,
+    });
+    const newEl = () => {
         if (!el) {
             if (size === 'xlarge')
                 return 'p';
@@ -51,7 +33,7 @@ exports.Headline = react_1.default.forwardRef(function (_a, ref) {
         }
         return el;
     };
-    var HeadlineElement = newEl();
-    return (react_1.default.createElement(HeadlineElement, __assign({ ref: ref, className: TextClasses }, props), children));
+    const HeadlineElement = newEl();
+    return (React.createElement(HeadlineElement, Object.assign({ ref: ref, className: TextClasses }, props), children));
 });
 //# sourceMappingURL=Headline.js.map

package/dist/components/Headline/Headline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Headline.js","sourceRoot":"","sources":["../../../src/components/Headline/Headline.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAkC;AAClC,0DAAoC;AA6BvB,QAAA,QAAQ,GAAsB,eAAK,CAAC,UAAU,CAC1D,UACC,EASC,EACD,GAAG;;IATF,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,EAAE,QAAA,EACF,MAAM,YAAA,EACN,MAAM,YAAA,EACN,OAAO,aAAA,EACP,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACZ,KAAK,cART,sEASC,CADQ;IAIT,IAAM,WAAW,GAAG,IAAA,oBAAU,EAAC,UAAU,EAAE,SAAS;QACnD,GAAC,eAAa,IAAM,IAAG,IAAI;QAC3B,SAAK,GAAE,MAAM;QACb,eAAW,GAAE,MAAM;QACnB,eAAW,GAAE,CAAC,MAAM,IAAI,MAAM,IAAI,IAAI;QACtC,kBAAc,GAAE,OAAO;YACtB,CAAC;IAEH,IAAM,KAAK,GAAG;QACb,IAAI,CAAC,EAAE,EAAE;YACR,IAAI,IAAI,KAAK,QAAQ;gBAAE,OAAO,GAAG,CAAC;YAClC,IAAI,IAAI,KAAK,OAAO;gBAAE,OAAO,IAAI,CAAC;YAClC,IAAI,IAAI,KAAK,QAAQ;gBAAE,OAAO,IAAI,CAAC;YACnC,IAAI,IAAI,KAAK,OAAO;gBAAE,OAAO,IAAI,CAAC;SAClC;QACD,OAAO,EAAE,CAAC;IACX,CAAC,CAAC;IAEF,IAAM,eAAe,GAAG,KAAK,EAAE,CAAC;IAEhC,OAAO,CACN,8BAAC,eAAe,aAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,IAAM,KAAK,GAC1D,QAAQ,CACQ,CAClB,CAAC;AACH,CAAC,CACD,CAAC"}
+{"version":3,"file":"Headline.js","sourceRoot":"","sources":["../../../src/components/Headline/Headline.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AA6BpC,MAAM,CAAC,MAAM,QAAQ,GAAsB,KAAK,CAAC,UAAU,CAC1D,CACC,EASC,EACD,GAAG,EACF,EAAE;QAXH,EACC,QAAQ,EACR,SAAS,EACT,EAAE,EACF,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAI,GAAG,QAAQ,OAEf,EADG,KAAK,cART,sEASC,CADQ;IAIT,MAAM,WAAW,GAAG,UAAU,CAAC,UAAU,EAAE,SAAS,EAAE;QACrD,CAAC,aAAa,IAAI,EAAE,CAAC,EAAE,IAAI;QAC3B,KAAK,EAAE,MAAM;QACb,WAAW,EAAE,MAAM;QACnB,WAAW,EAAE,CAAC,MAAM,IAAI,MAAM,IAAI,IAAI;QACtC,cAAc,EAAE,OAAO;KACvB,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,GAAG,EAAE;QAClB,IAAI,CAAC,EAAE,EAAE;YACR,IAAI,IAAI,KAAK,QAAQ;gBAAE,OAAO,GAAG,CAAC;YAClC,IAAI,IAAI,KAAK,OAAO;gBAAE,OAAO,IAAI,CAAC;YAClC,IAAI,IAAI,KAAK,QAAQ;gBAAE,OAAO,IAAI,CAAC;YACnC,IAAI,IAAI,KAAK,OAAO;gBAAE,OAAO,IAAI,CAAC;SAClC;QACD,OAAO,EAAE,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,KAAK,EAAE,CAAC;IAEhC,OAAO,CACN,oBAAC,eAAe,kBAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,IAAM,KAAK,GAC1D,QAAQ,CACQ,CAClB,CAAC;AACH,CAAC,CACD,CAAC"}

package/dist/components/Headline/index.css

@@ -4,7 +4,7 @@
   color: #141414;
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  font-weight: 600;
+  font-weight: 700;
   font-family: "Sofia Pro", SofiaPro, sans-serif;
   line-height: 1.25;
   font-size: 20px;

package/dist/components/Headline/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Headline/Headline.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA,OCiBa;ADfb;EACA;EDCA,aEoGkB;EFnGlB,aEsIqB;EFrIrB,aEsIqB;EFrIrB,WE6Ha;EF5Hb;;AAEA;EACC,WE2HY;EF1HZ;;AAGD;EACC,WEqHY;EFpHZ;;AAGD;EACC,WE+GY;EF9GZ;;AAGD;EACC,WEyGY","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Headline/Headline.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA,OCiBa;ADfb;EACA;EDCA,aEqGkB;EFpGlB,aEuIqB;EFtIrB,aEuIqB;EFtIrB,WE8Ha;EF7Hb;;AAEA;EACC,WE4HY;EF3HZ;;AAGD;EACC,WEsHY;EFrHZ;;AAGD;EACC,WEgHY;EF/GZ;;AAGD;EACC,WE0GY","file":"index.css"}

package/dist/components/Headline/index.js

@@ -1,14 +1,2 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Headline"), exports);
+export * from './Headline';
 //# sourceMappingURL=index.js.map

package/dist/components/Headline/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Headline/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAA2B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Headline/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/Icon/Icon.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,32 +9,26 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Icon = exports.IconNameArray = void 0;
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var anvil_icons_1 = require("@servicetitan/anvil-icons");
-Object.defineProperty(exports, "IconNameArray", { enumerable: true, get: function () { return anvil_icons_1.IconNameArray; } });
-var Icon = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, className = _a.className, _c = _a.el, IconElement = _c === void 0 ? 'i' : _c, name = _a.name, _d = _a.size, size = _d === void 0 ? '1em' : _d, props = __rest(_a, ["color", "className", "el", "name", "size"]);
+import React from 'react';
+import classnames from 'classnames';
+import { IconNameArray, getIconByName, } from '@servicetitan/anvil-icons';
+export { IconNameArray };
+export const Icon = (_a) => {
+    var { color = 'currentColor', className, el: IconElement = 'i', name, size = '1em' } = _a, props = __rest(_a, ["color", "className", "el", "name", "size"]);
     if (!name) {
         console.warn('No name prop passed to Icon');
         return null;
     }
-    var _e = (0, anvil_icons_1.getIconByName)(name), viewbox = _e.viewbox, content = _e.content;
+    const { viewbox, content } = getIconByName(name);
     if (!content) {
         console.warn('Icon does not exist', name);
         return null;
     }
-    var IconClasses = (0, classnames_1.default)('a-Icon', "a-Icon--" + name, className);
-    return (react_1.default.createElement(IconElement, __assign({ className: IconClasses, width: size, height: size }, props),
-        react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, height: size, width: size, viewBox: viewbox, 
+    const IconClasses = classnames('a-Icon', `a-Icon--${name}`, className);
+    return (React.createElement(IconElement, Object.assign({ className: IconClasses, width: size, height: size }, props),
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, height: size, width: size, viewBox: viewbox, 
             /* eslint-disable react/no-danger */
             dangerouslySetInnerHTML: { __html: content } })));
 };
-exports.Icon = Icon;
-exports.Icon.displayName = 'Icon';
+Icon.displayName = 'Icon';
 //# sourceMappingURL=Icon.js.map

package/dist/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAkC;AAClC,0DAAoC;AACpC,yDAImC;AAEZ,8FAJtB,2BAAa,OAIsB;AAuB7B,IAAM,IAAI,GAAkB,UAAC,EAOnC;IANA,IAAA,aAAsB,EAAtB,KAAK,mBAAG,cAAc,KAAA,EACtB,SAAS,eAAA,EACT,UAAqB,EAAjB,WAAW,mBAAG,GAAG,KAAA,EACrB,IAAI,UAAA,EACJ,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACT,KAAK,cAN2B,4CAOnC,CADQ;IAER,IAAI,CAAC,IAAI,EAAE;QACV,OAAO,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;QAC5C,OAAO,IAAI,CAAC;KACZ;IAEK,IAAA,KAAuB,IAAA,2BAAa,EAAC,IAAI,CAAC,EAAxC,OAAO,aAAA,EAAE,OAAO,aAAwB,CAAC;IAEjD,IAAI,CAAC,OAAO,EAAE;QACb,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;QAC1C,OAAO,IAAI,CAAC;KACZ;IAED,IAAM,WAAW,GAAG,IAAA,oBAAU,EAAC,QAAQ,EAAE,aAAW,IAAM,EAAE,SAAS,CAAC,CAAC;IAEvE,OAAO,CACN,8BAAC,WAAW,aACX,SAAS,EAAE,WAAW,EACtB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,IACR,KAAK;QAET,uCACC,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,OAAO;YAChB,oCAAoC;YACpC,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAC3C,CACW,CACd,CAAC;AACH,CAAC,CAAC;AAxCW,QAAA,IAAI,QAwCf;AAEF,YAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAEN,aAAa,EACb,aAAa,GACb,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAgB,aAAa,EAAE,CAAC;AAuBvC,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAOnC,EAAE,EAAE;QAP+B,EACnC,KAAK,GAAG,cAAc,EACtB,SAAS,EACT,EAAE,EAAE,WAAW,GAAG,GAAG,EACrB,IAAI,EACJ,IAAI,GAAG,KAAK,OAEZ,EADG,KAAK,cAN2B,4CAOnC,CADQ;IAER,IAAI,CAAC,IAAI,EAAE;QACV,OAAO,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;QAC5C,OAAO,IAAI,CAAC;KACZ;IAED,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAEjD,IAAI,CAAC,OAAO,EAAE;QACb,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;QAC1C,OAAO,IAAI,CAAC;KACZ;IAED,MAAM,WAAW,GAAG,UAAU,CAAC,QAAQ,EAAE,WAAW,IAAI,EAAE,EAAE,SAAS,CAAC,CAAC;IAEvE,OAAO,CACN,oBAAC,WAAW,kBACX,SAAS,EAAE,WAAW,EACtB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,IACR,KAAK;QAET,6BACC,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,OAAO;YAChB,oCAAoC;YACpC,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAC3C,CACW,CACd,CAAC;AACH,CAAC,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/components/Icon/Icon.test.js

@@ -1,17 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@testing-library/react");
-var Icon_1 = require("./Icon");
-describe('Icon', function () {
-    it('Icon should not render and console warn if no name prop', function () {
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Icon } from './Icon';
+describe('Icon', () => {
+    it('Icon should not render and console warn if no name prop', () => {
         jest.spyOn(global.console, 'warn');
         console.warn = jest.fn(); // Prevent actual console.warn from showing up in command line
-        (0, react_2.render)(react_1.default.createElement(Icon_1.Icon, { role: "img" }));
-        var icon = react_2.screen.queryByRole('img');
+        render(React.createElement(Icon, { role: "img" }));
+        const icon = screen.queryByRole('img');
         expect(icon).toBeNull();
         expect(console.warn).toBeCalled();
     });

package/dist/components/Icon/Icon.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.test.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.test.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAC1B,gDAAwD;AACxD,+BAA8B;AAE9B,QAAQ,CAAC,MAAM,EAAE;IAChB,EAAE,CAAC,yDAAyD,EAAE;QAC7D,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QACnC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,8DAA8D;QAExF,IAAA,cAAM,EAAC,8BAAC,WAAI,IAAC,IAAI,EAAC,KAAK,GAAG,CAAC,CAAC;QAC5B,IAAM,IAAI,GAAG,cAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAEvC,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;QACxB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;IACnC,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Icon.test.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAE;IACrB,EAAE,CAAC,yDAAyD,EAAE,GAAG,EAAE;QAClE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QACnC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,8DAA8D;QAExF,MAAM,CAAC,oBAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,CAAC,CAAC;QAC5B,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAEvC,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;QACxB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;IACnC,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/Icon/index.js

@@ -1,14 +1,2 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Icon"), exports);
+export * from './Icon';
 //# sourceMappingURL=index.js.map

package/dist/components/Icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,yCAAuB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/components/InlineEdit/InlineEdit.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/InlineEdit/InlineEdit.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;EACA,OCmHY;;ADhHb;AAAA;EACyB;;AAG1B;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA,SCgGc;ED/Fd;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA,OCoFa;;ADjFd;EACC;EACA,cCwEU;;ADtEV;AAAA;AAAA;EAGC;;AAIF;EAEC;;AAEA;EACC;EACA;EACA;EACA,kBC5BgB;ED6BhB;EACA;EACA;EACA;EACA,eChEe;;ADmEhB;EACC;EACA;;AAGD;EACC;;AAEA;EACC;;;AAMJ;EACC,OC3DgB;;;AD8DjB;EACC,OCNe;;;ADWd;EACC;EACA;EACA;EACA;EACA;;AAKD;EACC,qBCvBa;;;AD4BhB;EACC;;;AAIA;EACC;;;AAKD;EAAgC;;AAChC;EAAiC;;AACjC;EAAgC;;;AAGjC;EACC;;AAEA;EACC;;AAGD;EAEC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EAEC;EACA;;AAGD;EAEC;EACA;;AAGD;EAEC;EACA;;AAGD;EAEC;EACA;;AAGD;EAEC;EACA;;AAGD;EAEC;EACA","file":"InlineEdit.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/InlineEdit/InlineEdit.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;EACA,OCoHY;;ADjHb;AAAA;EACyB;;AAG1B;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA,SCiGc;EDhGd;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA,OCqFa;;ADlFd;EACC;EACA,cCyEU;;ADvEV;AAAA;AAAA;EAGC;;AAIF;EAEC;;AAEA;EACC;EACA;EACA;EACA,kBC5BgB;ED6BhB;EACA;EACA;EACA;EACA,eChEe;;ADmEhB;EACC;EACA;;AAGD;EACC;;AAEA;EACC;;;AAMJ;EACC,OC3DgB;;;AD8DjB;EACC,OCNe;;;ADWd;EACC;EACA;EACA;EACA;EACA;;AAKD;EACC,qBCvBa;;;AD4BhB;EACC;;;AAIA;EACC;;;AAKD;EAAgC;;AAChC;EAAiC;;AACjC;EAAgC;;;AAGjC;EACC;;AAEA;EACC;;AAGD;EAEC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EAEC;EACA;;AAGD;EAEC;EACA;;AAGD;EAEC;EACA;;AAGD;EAEC;EACA;;AAGD;EAEC;EACA;;AAGD;EAEC;EACA","file":"InlineEdit.css"}

package/dist/components/InlineEdit/InlineEdit.d.ts

@@ -8,17 +8,17 @@ export interface InlineEditPropsStrict {
     content?: any;
     /** Value to be displayed on read mode */
     value?: AnvilSelectOptionsProps | AnvilSelectOptionsProps[] | string | number | any;
-    /** decoration on displayed value */
+    /** Decoration on displayed value */
     decoration?: InlineEditDecorationProps;
     /** If true, read content and control will show error state */
     error?: boolean;
-    /** Callback fired on save. */
+    /** Callback fired on save */
     onSave?: (data?: any) => void;
-    /** Callback fired on cancel. */
+    /** Callback fired on cancel */
     onCancel?: () => void;
-    /** Callback fired on click. */
+    /** Callback fired on click */
     onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
-    /** Callback fired on click. */
+    /** Callback fired when a user changes the value */
     onChange?: (event?: React.ChangeEvent<HTMLElement>, data?: any) => void;
     /** Position of the save and cancel action buttons. */
     actionDirection?: PopoverProps['direction'];

package/dist/components/InlineEdit/InlineEdit.js

@@ -1,34 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -40,37 +9,31 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InlineEdit = void 0;
-var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var Popover_1 = require("../Popover");
-var ButtonGroup_1 = require("../ButtonGroup");
-var TagGroup_1 = require("../TagGroup");
-var Button_1 = require("../Button");
-var Icon_1 = require("../Icon");
-var Tag_1 = require("../Tag");
-var keyCodes_1 = require("../../utilities/keyCodes");
-var defaultDecoration = { icon: true, underline: true, color: true };
-exports.InlineEdit = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b;
-    var Control = _a.control, _c = _a.decoration, decoration = _c === void 0 ? defaultDecoration : _c, onSave = _a.onSave, onCancel = _a.onCancel, onChange = _a.onChange, onClick = _a.onClick, _d = _a.error, errorState = _d === void 0 ? false : _d, _e = _a.actionDirection, actionDirection = _e === void 0 ? 'rb' : _e, _f = _a.actionLayout, actionLayout = _f === void 0 ? 'inline' : _f, className = _a.className, style = _a.style, _g = _a.mode, mode = _g === void 0 ? 'read' : _g, value = _a.value, width = _a.width, showContentOnEdit = _a.showContentOnEdit, Content = _a.content, _h = _a.autoFocusControl, autoFocusControl = _h === void 0 ? true : _h, id = _a.id, _j = _a.placeholder, placeholder = _j === void 0 ? 'Enter value' : _j, props = __rest(_a, ["control", "decoration", "onSave", "onCancel", "onChange", "onClick", "error", "actionDirection", "actionLayout", "className", "style", "mode", "value", "width", "showContentOnEdit", "content", "autoFocusControl", "id", "placeholder"]);
-    var _k = react_1.default.useState(value), newValue = _k[0], setNewValue = _k[1];
-    var _l = react_1.default.useState(mode === 'edit'), editing = _l[0], setEditing = _l[1];
-    var _m = react_1.default.useState(16), fontsize = _m[0], setFontsize = _m[1];
-    var _o = react_1.default.useState(false), isClosed = _o[0], setIsClosed = _o[1];
-    var controlRef = react_1.default.useRef(null);
-    var saveRef = react_1.default.useRef(null);
-    var cancelRef = react_1.default.useRef(null);
-    var textRef = react_1.default.useRef(null);
-    var getDecoration = function () { return (__assign(__assign({}, defaultDecoration), decoration)); };
-    react_1.default.useEffect(function () {
+import React, { forwardRef } from 'react';
+import classnames from 'classnames';
+import { Popover } from '../Popover';
+import { ButtonGroup } from '../ButtonGroup';
+import { TagGroup } from '../TagGroup';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { Tag } from '../Tag';
+import { keys } from '../../utilities/keyCodes';
+const defaultDecoration = { icon: true, underline: true, color: true };
+export const InlineEdit = forwardRef((_a, ref) => {
+    var { control: Control, decoration = defaultDecoration, onSave, onCancel, onChange, onClick, error: errorState = false, actionDirection = 'rb', actionLayout = 'inline', className, style, mode = 'read', value, width, showContentOnEdit, content: Content, autoFocusControl = true, id, placeholder = 'Enter value' } = _a, props = __rest(_a, ["control", "decoration", "onSave", "onCancel", "onChange", "onClick", "error", "actionDirection", "actionLayout", "className", "style", "mode", "value", "width", "showContentOnEdit", "content", "autoFocusControl", "id", "placeholder"]);
+    const [newValue, setNewValue] = React.useState(value);
+    const [editing, setEditing] = React.useState(mode === 'edit');
+    const [fontsize, setFontsize] = React.useState(16);
+    const [isClosed, setIsClosed] = React.useState(false);
+    const controlRef = React.useRef(null);
+    const saveRef = React.useRef(null);
+    const cancelRef = React.useRef(null);
+    const textRef = React.useRef(null);
+    const getDecoration = () => (Object.assign(Object.assign({}, defaultDecoration), decoration));
+    React.useEffect(() => {
         setNewValue(value);
     }, [value]);
-    react_1.default.useEffect(function () {
+    React.useEffect(() => {
         if (textRef.current) {
             setFontsize(Number(window
                 .getComputedStyle(textRef.current)
@@ -78,22 +41,22 @@ exports.InlineEdit = (0, react_1.forwardRef)(function (_a, ref) {
                 .replace('px', '')));
         }
     }, []);
-    var handleOpen = function () {
+    const handleOpen = () => {
         onClick === null || onClick === void 0 ? void 0 : onClick();
         setEditing(true);
         setIsClosed(false);
     };
-    var handleClose = function () {
-        setEditing(function (prevState) {
+    const handleClose = () => {
+        setEditing((prevState) => {
             prevState === true && setIsClosed(true);
             return false;
         });
     };
-    react_1.default.useEffect(function () {
+    React.useEffect(() => {
         var _a;
         isClosed && ((_a = textRef === null || textRef === void 0 ? void 0 : textRef.current) === null || _a === void 0 ? void 0 : _a.focus());
     }, [isClosed]);
-    react_1.default.useEffect(function () {
+    React.useEffect(() => {
         if (mode === 'edit')
             setEditing(true);
         if (mode === 'read') {
@@ -101,26 +64,26 @@ exports.InlineEdit = (0, react_1.forwardRef)(function (_a, ref) {
             setNewValue(value);
         }
     }, [mode, value]);
-    var InlineEditKeyDown = function (e) {
-        var isSpacePressed = e.key === keyCodes_1.keys.space;
-        var isEnterPressed = e.key === keyCodes_1.keys.enter;
+    const InlineEditKeyDown = (e) => {
+        const isSpacePressed = e.key === keys.space;
+        const isEnterPressed = e.key === keys.enter;
         if (isSpacePressed || isEnterPressed) {
             handleOpen();
             e.preventDefault();
         }
     };
-    var handleCancel = function () {
+    const handleCancel = () => {
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
         setNewValue(value);
         handleClose();
     };
-    var handleSave = function () {
+    const handleSave = () => {
         if (errorState)
             return; // if error is true, do not save
-        onSave === null || onSave === void 0 ? void 0 : onSave(__assign(__assign({}, controlProps), { value: newValue }));
+        onSave === null || onSave === void 0 ? void 0 : onSave(Object.assign(Object.assign({}, controlProps), { value: newValue }));
         handleClose();
     };
-    var handleOnChange = function (e, data) {
+    const handleOnChange = (e, data) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(e, data);
         if ((e === null || e === void 0 ? void 0 : e.target) instanceof HTMLInputElement ||
             (e === null || e === void 0 ? void 0 : e.target) instanceof HTMLTextAreaElement) {
@@ -130,9 +93,9 @@ exports.InlineEdit = (0, react_1.forwardRef)(function (_a, ref) {
             setNewValue(e);
         }
     };
-    var escapeOnKeyDown = function (e) {
+    const escapeOnKeyDown = (e) => {
         var _a;
-        var isESCPressed = e.key === keyCodes_1.keys.esc;
+        const isESCPressed = e.key === keys.esc;
         if (isESCPressed) {
             if (((_a = controlRef.current.state) === null || _a === void 0 ? void 0 : _a.openState) === true) {
                 return e;
@@ -141,9 +104,9 @@ exports.InlineEdit = (0, react_1.forwardRef)(function (_a, ref) {
             e.preventDefault();
         }
     };
-    var keyOnCancel = function (e) {
+    const keyOnCancel = (e) => {
         escapeOnKeyDown(e);
-        var isTabPressed = e.key === keyCodes_1.keys.tab && actionLayout !== 'none';
+        const isTabPressed = e.key === keys.tab && actionLayout !== 'none';
         if (!isTabPressed)
             return;
         e.preventDefault();
@@ -156,9 +119,9 @@ exports.InlineEdit = (0, react_1.forwardRef)(function (_a, ref) {
             saveRef.current.focus();
         }
     };
-    var keyOnControl = function (e) {
+    const keyOnControl = (e) => {
         escapeOnKeyDown(e);
-        var isTabPressed = e.key === keyCodes_1.keys.tab && actionLayout !== 'none';
+        const isTabPressed = e.key === keys.tab && actionLayout !== 'none';
         if (!isTabPressed)
             return;
         e.preventDefault();
@@ -170,9 +133,9 @@ exports.InlineEdit = (0, react_1.forwardRef)(function (_a, ref) {
             cancelRef.current.focus();
         }
     };
-    var keyOnSave = function (e) {
+    const keyOnSave = (e) => {
         escapeOnKeyDown(e);
-        var isTabPressed = e.key === keyCodes_1.keys.tab && actionLayout !== 'none';
+        const isTabPressed = e.key === keys.tab && actionLayout !== 'none';
         if (!isTabPressed)
             return;
         e.preventDefault();
@@ -184,90 +147,88 @@ exports.InlineEdit = (0, react_1.forwardRef)(function (_a, ref) {
             controlRef.current.focus();
         }
     };
-    var left = ['l', 'lb', 'lt'];
-    var bottom = ['b', 'br', 'bl'];
-    var top = ['t', 'tr', 'tl'];
-    var InlineEditClasses = (0, classnames_1.default)('InlineEdit', className, {
+    const left = ['l', 'lb', 'lt'];
+    const bottom = ['b', 'br', 'bl'];
+    const top = ['t', 'tr', 'tl'];
+    const InlineEditClasses = classnames('InlineEdit', className, {
         'flex-column': bottom.includes(actionDirection) && actionLayout !== 'floating',
         'flex-column-reverse': top.includes(actionDirection) && actionLayout !== 'floating',
         'flex-row-reverse': left.includes(actionDirection) && actionLayout !== 'floating',
         'InlineEdit--fluid': width === 'fluid',
     });
-    var ContentClasses = (0, classnames_1.default)('InlineEdit__content', {
+    const ContentClasses = classnames('InlineEdit__content', {
         'InlineEdit__content--textcolor': !Content && getDecoration().color,
         'InlineEdit__content--underline': !Content && getDecoration().underline,
         'InlineEdit__content--icon': getDecoration().icon,
         'InlineEdit__content--error': errorState,
     });
-    var ActionClasses = (0, classnames_1.default)("InlineEdit__action", (_b = {},
-        _b["InlineEdit__action--" + actionDirection] = actionLayout !== 'floating',
-        _b['InlineEdit__action--floating'] = actionLayout === 'floating',
-        _b));
-    var EditIconClasses = (0, classnames_1.default)('InlineEdit__editIcon c-neutral-80 m-l-half', {
+    const ActionClasses = classnames(`InlineEdit__action`, {
+        [`InlineEdit__action--${actionDirection}`]: actionLayout !== 'floating',
+        'InlineEdit__action--floating': actionLayout === 'floating',
+    });
+    const EditIconClasses = classnames('InlineEdit__editIcon c-neutral-80 m-l-half', {
         'InlineEdit__editIcon--small': fontsize <= 16,
         'InlineEdit__editIcon--medium': fontsize <= 26 && fontsize > 16,
         'InlineEdit__editIcon--large': fontsize > 26,
     });
-    var getValues = function () {
+    const getValues = () => {
         var _a;
-        var value = newValue;
+        const value = newValue;
         if (Content !== undefined)
             return Content();
         if (typeof value === 'string' || typeof value === 'number')
             return value;
         if (Array.isArray(value) && value.length > 0) {
-            var valueArray_1 = value.length > 3
+            const valueArray = value.length > 3
                 ? value
                     .slice(0, 3)
-                    .concat({ text: "+" + (value.length - 3) })
+                    .concat({ text: `+${value.length - 3}` })
                 : value.slice(0, 3);
-            var tagArray = function () {
-                return valueArray_1.map(function (singleValue, index) {
-                    var tagText = singleValue.text
-                        ? singleValue.text
-                        : typeof singleValue.content === 'string' ||
-                            typeof singleValue.content === 'number'
-                            ? singleValue.content
-                            : String(singleValue.value);
-                    return (react_1.default.createElement(Tag_1.Tag, { key: index, color: singleValue.color }, tagText));
-                });
-            };
-            return react_1.default.createElement(TagGroup_1.TagGroup, null, tagArray());
+            const tagArray = () => valueArray.map((singleValue, index) => {
+                const tagText = singleValue.text
+                    ? singleValue.text
+                    : typeof singleValue.content === 'string' ||
+                        typeof singleValue.content === 'number'
+                        ? singleValue.content
+                        : String(singleValue.value);
+                return (React.createElement(Tag, { key: index, color: singleValue.color }, tagText));
+            });
+            return React.createElement(TagGroup, null, tagArray());
         }
         return String((_a = value === null || value === void 0 ? void 0 : value.text) !== null && _a !== void 0 ? _a : '');
     };
-    var ValueClasses = (0, classnames_1.default)('InlineEdit__value', {
+    const ValueClasses = classnames('InlineEdit__value', {
         'InlineEdit__value--placeholder': getValues().length === 0,
     });
-    var readComponent = (react_1.default.createElement("span", __assign({ className: ContentClasses, ref: textRef, onClick: handleOpen, tabIndex: 0, onKeyDown: InlineEditKeyDown }, props),
-        react_1.default.createElement("span", { className: ValueClasses }, getValues().length === 0 ? placeholder : getValues()),
-        react_1.default.createElement(Icon_1.Icon, { name: "edit", className: EditIconClasses })));
-    var controlProps = {
-        id: id,
-        className: "InlineEdit__control",
+    const readComponent = (React.createElement("span", Object.assign({ className: ContentClasses, ref: textRef, onClick: handleOpen, tabIndex: 0, onKeyDown: InlineEditKeyDown }, props),
+        React.createElement("span", { className: ValueClasses }, getValues().length === 0 ? placeholder : getValues()),
+        React.createElement(Icon, { name: "edit", className: EditIconClasses })));
+    const controlProps = {
+        id,
+        className: `InlineEdit__control`,
         ref: controlRef,
         error: errorState,
         autoFocus: autoFocusControl,
         onKeyDown: keyOnControl,
         onChange: handleOnChange,
-        placeholder: placeholder,
-        trigger: { placeholder: placeholder },
+        placeholder,
+        trigger: { placeholder },
         value: newValue,
     };
-    var internalCompProps = {
+    const internalCompProps = {
         save: handleSave,
         cancel: handleCancel,
         open: editing,
     };
-    var actions = (react_1.default.createElement(ButtonGroup_1.ButtonGroup, { attached: true, className: ActionClasses },
-        react_1.default.createElement(Button_1.Button, { small: true, ref: saveRef, className: "InlineEdit__save", primary: true, disabled: errorState, onClick: handleSave, onKeyDown: keyOnSave, type: "submit", iconName: "done" }),
-        react_1.default.createElement(Button_1.Button, { small: true, ref: cancelRef, className: "InlineEdit__cancel", type: "reset", iconName: "clear", onClick: handleCancel, onKeyDown: keyOnCancel })));
-    var updateStyle = __assign({ maxWidth: width !== undefined && typeof width === 'string'
-            ? "" + width
+    const actions = (React.createElement(ButtonGroup, { attached: true, className: ActionClasses },
+        React.createElement(Button, { small: true, ref: saveRef, className: "InlineEdit__save", primary: true, disabled: errorState, onClick: handleSave, onKeyDown: keyOnSave, type: "submit", iconName: "done" }),
+        React.createElement(Button, { small: true, ref: cancelRef, className: "InlineEdit__cancel", type: "reset", iconName: "clear", onClick: handleCancel, onKeyDown: keyOnCancel })));
+    const updateStyle = Object.assign({ maxWidth: width !== undefined && typeof width === 'string'
+            ? `${width}`
             : width }, style);
-    return (react_1.default.createElement("span", { className: InlineEditClasses, style: updateStyle, ref: ref }, editing ? (actionLayout === 'floating' ? (react_1.default.createElement(Popover_1.Popover, { trigger: Control(controlProps, internalCompProps), portal: true, direction: actionDirection, contentNoPadding: true, padding: null, width: "auto", className: "InlineEdit__floating__body", open: editing, offset: {
+    return (React.createElement("span", { className: InlineEditClasses, style: updateStyle, ref: ref }, editing ? (actionLayout === 'floating' ? (React.createElement(Popover, { trigger: Control(controlProps, internalCompProps), portal: true, direction: actionDirection, contentNoPadding: true, padding: null, width: "auto", className: "InlineEdit__floating__body", open: editing, offset: {
             distance: 8,
-        }, el: width === 'fluid' ? 'div' : 'span' }, actions)) : (react_1.default.createElement(react_1.default.Fragment, null,
+        }, el: width === 'fluid' ? 'div' : 'span' }, actions)) : (React.createElement(React.Fragment, null,
         showContentOnEdit && readComponent,
         Control(controlProps, internalCompProps),
         actionLayout !== 'none' && actions))) : (readComponent)));