@servicetitan/design-system 10.8.0 → 11.0.0

package/dist/components/Dialog/Dialog.d.ts

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { ModalWindow, ModalHeader, ModalHeaderProps, ModalFooter, ModalContent } from '../Modal/components';
-import { FocusScopeOptions } from '../../hooks/useFocusScope';
-export interface DialogProps extends ModalHeaderProps {
+import { ModalWindow, ModalWindowProps, ModalHeader, ModalHeaderProps, ModalFooter, ModalContent } from '../Modal/components';
+import { FocusTrapProps } from '../../utilities/FocusTrap';
+export interface DialogProps extends ModalHeaderProps, ModalWindowProps {
     /** Action buttons layout direction */
     actionsLayout?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
     /** Adds one or more classnames for an element */
@@ -14,12 +14,14 @@ export interface DialogProps extends ModalHeaderProps {
     onSecondaryActionClick?: (e: React.SyntheticEvent<HTMLElement>) => void;
     /** Whether the dialog is open or not */
     open?: boolean;
+    /** Render in a React Portal */
+    portal?: boolean;
     /** Text for the primary button */
     primaryActionName: string;
     /** Text for the secondary button */
     secondaryActionName?: string;
-    /** Options passed into useFocusScope hook */
-    focusScopeOptions?: FocusScopeOptions;
+    /** Options passed into FocusTrap */
+    focusTrapOptions?: FocusTrapProps;
 }
 interface Dialog extends FC<DialogProps> {
     /** Subcomponents */

package/dist/components/Dialog/Dialog.js

@@ -32,18 +32,13 @@ var components_1 = require("../Modal/components");
 var Button_1 = require("../Button");
 var Stack_1 = require("../Stack");
 var Dialog = function (_a) {
-    var _b = _a.open, open = _b === void 0 ? false : _b, children = _a.children, className = _a.className, onClose = _a.onClose, title = _a.title, actionsLayout = _a.actionsLayout, negative = _a.negative, onPrimaryActionClick = _a.onPrimaryActionClick, onSecondaryActionClick = _a.onSecondaryActionClick, primaryActionName = _a.primaryActionName, secondaryActionName = _a.secondaryActionName, focusScopeOptions = _a.focusScopeOptions, rest = __rest(_a, ["open", "children", "className", "onClose", "title", "actionsLayout", "negative", "onPrimaryActionClick", "onSecondaryActionClick", "primaryActionName", "secondaryActionName", "focusScopeOptions"]);
-    react_1.default.useEffect(function () {
-        if (rest.closable) {
-            console.warn('@servicetitan/design-system: The `closable` prop of the Dialog component will be removed in a future release. It also never worked. Please remove.');
-        }
-    });
+    var _b = _a.open, open = _b === void 0 ? false : _b, children = _a.children, className = _a.className, onClose = _a.onClose, title = _a.title, actionsLayout = _a.actionsLayout, negative = _a.negative, onPrimaryActionClick = _a.onPrimaryActionClick, onSecondaryActionClick = _a.onSecondaryActionClick, _c = _a.portal, portal = _c === void 0 ? true : _c, primaryActionName = _a.primaryActionName, secondaryActionName = _a.secondaryActionName, focusTrapOptions = _a.focusTrapOptions, rest = __rest(_a, ["open", "children", "className", "onClose", "title", "actionsLayout", "negative", "onPrimaryActionClick", "onSecondaryActionClick", "portal", "primaryActionName", "secondaryActionName", "focusTrapOptions"]);
     var DialogClasses = (0, classnames_1.default)('Dialog', className);
-    return (open && (react_1.default.createElement(components_1.ModalWindow, __assign({ className: DialogClasses, onClose: onClose, size: components_1.ModalSizes.XS, focusScopeOptions: focusScopeOptions }, rest),
-        react_1.default.createElement(components_1.ModalHeader, { onClose: onClose, title: title, className: "Dialog__header" }),
+    return (react_1.default.createElement(components_1.ModalWindow, __assign({ className: DialogClasses, onClose: onClose, size: components_1.ModalSizes.XS, focusTrapOptions: focusTrapOptions, open: open, portal: portal }, rest),
+        react_1.default.createElement(components_1.ModalHeader, { title: title, className: "Dialog__header" }),
         react_1.default.createElement(components_1.ModalContent, { className: "Dialog__content" }, children),
         react_1.default.createElement(components_1.ModalFooter, { className: "Dialog__footer" },
-            react_1.default.createElement(DialogActions, { actionsLayout: actionsLayout, negative: negative, onPrimaryActionClick: onPrimaryActionClick, onSecondaryActionClick: onSecondaryActionClick, primaryActionName: primaryActionName, secondaryActionName: secondaryActionName })))));
+            react_1.default.createElement(DialogActions, { actionsLayout: actionsLayout, negative: negative, onPrimaryActionClick: onPrimaryActionClick, onSecondaryActionClick: onSecondaryActionClick, primaryActionName: primaryActionName, secondaryActionName: secondaryActionName }))));
 };
 exports.Dialog = Dialog;
 var DialogActions = function (props) {

package/dist/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAkC;AAClC,0DAAoC;AAEpC,kDAO6B;AAE7B,oCAAmC;AACnC,kCAAiC;AAwC1B,IAAM,MAAM,GAAW,UAAC,EAc9B;IAbA,IAAA,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACZ,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,OAAO,aAAA,EACP,KAAK,WAAA,EACL,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,oBAAoB,0BAAA,EACpB,sBAAsB,4BAAA,EACtB,iBAAiB,uBAAA,EACjB,mBAAmB,yBAAA,EACnB,iBAAiB,uBAAA,EACd,IAAI,cAbuB,qMAc9B,CADO;IAEP,eAAK,CAAC,SAAS,CAAC;QACf,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,CAAC,IAAI,CACX,oJAAoJ,CACpJ,CAAC;SACF;IACF,CAAC,CAAC,CAAC;IAEH,IAAM,aAAa,GAAG,IAAA,oBAAU,EAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEtD,OAAO,CACN,IAAI,IAAI,CACP,8BAAC,wBAAW,aACX,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,uBAAU,CAAC,EAAE,EACnB,iBAAiB,EAAE,iBAAiB,IAChC,IAAI;QAER,8BAAC,wBAAW,IACX,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,gBAAgB,GACzB;QACF,8BAAC,yBAAY,IAAC,SAAS,EAAC,iBAAiB,IACvC,QAAQ,CACK;QACf,8BAAC,wBAAW,IAAC,SAAS,EAAC,gBAAgB;YACtC,8BAAC,aAAa,IACb,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,EAAE,oBAAoB,EAC1C,sBAAsB,EAAE,sBAAsB,EAC9C,iBAAiB,EAAE,iBAAiB,EACpC,mBAAmB,EAAE,mBAAmB,GACvC,CACW,CACD,CACd,CACD,CAAC;AACH,CAAC,CAAC;AAvDW,QAAA,MAAM,UAuDjB;AAEF,IAAM,aAAa,GAAG,UAAC,KAAkB;IAEvC,IAAA,KAMG,KAAK,cANa,EAArB,aAAa,mBAAG,KAAK,KAAA,EACrB,QAAQ,GAKL,KAAK,SALA,EACR,oBAAoB,GAIjB,KAAK,qBAJY,EACpB,sBAAsB,GAGnB,KAAK,uBAHc,EACtB,iBAAiB,GAEd,KAAK,kBAFS,EACjB,mBAAmB,GAChB,KAAK,oBADW,CACV;IAEV,IAAM,gBAAgB,GAAG,CAAC,CAAC,CAAC,iBAAiB,IAAI,oBAAoB,CAAC,CAAC;IACvE,IAAM,kBAAkB,GAAG,CAAC,CAAC,CAC5B,mBAAmB,IAAI,sBAAsB,CAC7C,CAAC;IAEI,IAAA,KAA4B,aAAa,EAAE,EAA1C,WAAW,QAAA,EAAE,UAAU,QAAmB,CAAC;IAC5C,IAAA,KAAgC,aAAa,EAAE,EAA9C,aAAa,QAAA,EAAE,YAAY,QAAmB,CAAC;IAEtD,IAAM,mBAAmB,GACxB,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC7B,WAAW,KAAK,IAAI;QACpB,aAAa,KAAK,IAAI;QACtB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,yDAAyD;IAEjH,IAAM,eAAe,GACpB,mBAAmB,IAAI,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEzD,OAAO,kBAAkB,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAC/C,8BAAC,aAAK,IACL,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC9C,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAC3C,SAAS,EAAE,mBAAmB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,EACjE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,IAAI,EAAC,MAAM;QAEX,wCAAM,GAAG,EAAE,YAAY;YACtB,8BAAC,eAAM,IAAC,IAAI,QAAC,KAAK,QAAC,OAAO,EAAE,sBAAsB,IAChD,mBAAmB,CACZ,CACH;QACP,wCAAM,GAAG,EAAE,UAAU;YACpB,8BAAC,eAAM,IACN,IAAI,QACJ,OAAO,QACP,KAAK,QACL,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,oBAAoB,IAE5B,iBAAiB,CACV,CACH,CACA,CACR,CAAC,CAAC,CAAC,CACH,8BAAC,eAAM,IAAC,OAAO,QAAC,KAAK,QAAC,OAAO,EAAE,oBAAoB,IACjD,iBAAiB,CACV,CACT,CAAC;AACH,CAAC,CAAC;AAEF,cAAM,CAAC,MAAM,GAAG,wBAAW,CAAC;AAC5B,cAAM,CAAC,MAAM,GAAG,wBAAW,CAAC;AAC5B,cAAM,CAAC,OAAO,GAAG,yBAAY,CAAC;AAC9B,cAAM,CAAC,MAAM,GAAG,wBAAW,CAAC;AAE5B,2EAA2E;AAC3E,IAAM,aAAa,GAAG;IACf,IAAA,KAAkB,eAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAArC,IAAI,QAAA,EAAE,OAAO,QAAwB,CAAC;IAC7C,IAAM,GAAG,GAAG,eAAK,CAAC,WAAW,CAAC,UAAC,IAAI;QAClC,IAAI,IAAI,KAAK,IAAI,EAAE;YAClB,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC;SACtC;IACF,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;AACpB,CAAC,CAAC"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}

package/dist/components/Drawer/Drawer.css

@@ -14,7 +14,12 @@
   right: 0;
   top: 0;
   width: 90%;
-  z-index: 1100;
+}
+.Drawer:focus {
+  outline: none;
+}
+.Drawer:focus-visible {
+  outline: none;
 }
 .Drawer .Drawer__header {
   align-items: center;

package/dist/components/Drawer/Drawer.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Drawer/Drawer.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACSA;ACRC;EACA,OCiBa;ADfb;EACA;EDOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAlBc;EAmBd,SE0HiB;;AFxHjB;EACC;EACA;EACA,YEWiB;EFVjB;EACA;EACA;EACA;EACA;EACA;;AAGD;EAAc;;;AAGf;EAAkB;;;AAElB;EAAgB,WArCM;;;AAsCtB;EAAe,WArCM;;;AAsCrB;EAAe,WArCM;;;AAsCrB;EAAe,WArCM;;;AAuCrB;EACC;EACA;EACA;EACA,WEoFa;EFnFb;EACA;EACA,OEPmB;;;AFUpB;EACC,aEkEW;EFjEX;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC,SEiDW;EFhDX;EACA","file":"Drawer.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Drawer/Drawer.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACSA;ACRC;EACA,OCiBa;ADfb;EACA;EDOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAlBc;;AAqBd;EAAU;;AAGV;EAAkB;;AAElB;EACC;EACA;EACA,YEMiB;EFLjB;EACA;EACA;EACA;EACA;EACA;;AAGD;EAAc;;;AAGf;EAAkB;;;AAElB;EAAgB,WA1CM;;;AA2CtB;EAAe,WA1CM;;;AA2CrB;EAAe,WA1CM;;;AA2CrB;EAAe,WA1CM;;;AA4CrB;EACC;EACA;EACA;EACA,WE+Ea;EF9Eb;EACA;EACA,OEZmB;;;AFepB;EACC,aE6DW;EF5DX;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC,SE4CW;EF3CX;EACA","file":"Drawer.css"}

package/dist/components/Drawer/Drawer.d.ts

@@ -1,37 +1,28 @@
 import React, { FC } from 'react';
-import { DrawerHeader } from './DrawerHeader';
-import { DrawerFooter, DrawerFooterProps } from './DrawerFooter';
-import { DrawerWindow } from './DrawerWindow';
-import { FocusScopeOptions } from '../../hooks/useFocusScope';
-interface DrawerPropsStrict {
+import { OverlayProps } from '../../internal/Overlay';
+import { JustifyProps } from '../../utilities/justify-props';
+import { FocusTrapProps } from '../../utilities/FocusTrap';
+interface DrawerPropsStrict extends OverlayProps {
+    /** Use animation for visibility transitions */
+    animate?: boolean;
     /** Adds one or more classnames for an element */
     className?: string;
-    /** Footer for the drawer */
+    /** Footer Element */
     footer?: React.ReactElement;
-    /** Basic alignment for header */
-    footerAlign?: DrawerFooterProps['align'];
-    /** Header for the drawer */
+    /** Footer button alignment */
+    footerAlign?: JustifyProps;
+    /** Drawer Header */
     header?: React.ReactElement | string;
-    /** Give Drawer a backdrop effect */
-    backdrop?: boolean;
-    /** Opens the drawer */
+    /** Visibility of Drawer */
     open?: boolean;
-    /** Makes Drawer open through ReactDOM.createPortal */
-    portal?: boolean;
-    /** Define the width property of the drawer */
+    /** Width of the Drawer */
     width?: 'xs' | 's' | 'm' | 'l';
-    /** Options passed into useFocusScope hook */
-    focusScopeOptions?: FocusScopeOptions;
+    /** Options passed into FocusTrap */
+    focusTrapOptions?: FocusTrapProps;
 }
-interface DrawerProps extends DrawerPropsStrict {
+export interface DrawerProps extends DrawerPropsStrict {
     /** Unstrict Props */
     [propName: string]: any;
 }
-interface Drawer extends FC<DrawerProps> {
-    /** Subcomponents */
-    Header: typeof DrawerHeader;
-    Footer: typeof DrawerFooter;
-    Window: typeof DrawerWindow;
-}
-export declare const Drawer: Drawer;
+export declare const Drawer: FC<DrawerProps>;
 export {};

package/dist/components/Drawer/Drawer.js

@@ -46,24 +46,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = void 0;
 var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
 var framer_motion_1 = require("framer-motion");
+var classnames_1 = __importDefault(require("classnames"));
 var tokens_1 = __importDefault(require("@servicetitan/tokens"));
-var DrawerHeader_1 = require("./DrawerHeader");
-var DrawerFooter_1 = require("./DrawerFooter");
-var DrawerWindow_1 = require("./DrawerWindow");
-var OverlayContext_1 = require("../../utilities/OverlayContext");
-var Portal_1 = require("../../internal/Portal");
-var useFocusScope_1 = require("../../hooks/useFocusScope");
-var focus_utils_1 = require("../../utilities/focus-utils");
+var __1 = require("../");
+var Overlay_1 = require("../../internal/Overlay");
+var FocusTrap_1 = require("../../utilities/FocusTrap");
 var Drawer = function (_a) {
     var _b;
-    var children = _a.children, className = _a.className, footer = _a.footer, footerAlign = _a.footerAlign, header = _a.header, onClose = _a.onClose, open = _a.open, _c = _a.portal, portal = _c === void 0 ? true : _c, backdrop = _a.backdrop, _d = _a.width, width = _d === void 0 ? 's' : _d, focusScopeOptions = _a.focusScopeOptions, rest = __rest(_a, ["children", "className", "footer", "footerAlign", "header", "onClose", "open", "portal", "backdrop", "width", "focusScopeOptions"]);
-    var overlayContext = (0, react_1.useContext)(OverlayContext_1.OverlayContext);
+    var _c = _a.animate, animate = _c === void 0 ? true : _c, children = _a.children, className = _a.className, footer = _a.footer, _d = _a.footerAlign, footerAlign = _d === void 0 ? 'right' : _d, header = _a.header, onClose = _a.onClose, open = _a.open, _e = _a.portal, portal = _e === void 0 ? true : _e, backdrop = _a.backdrop, _f = _a.width, width = _f === void 0 ? 's' : _f, focusTrapOptions = _a.focusTrapOptions, rest = __rest(_a, ["animate", "children", "className", "footer", "footerAlign", "header", "onClose", "open", "portal", "backdrop", "width", "focusTrapOptions"]);
     var drawerRef = (0, react_1.useRef)(null);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    var lastActiveElement = (0, react_1.useMemo)(function () { return (0, focus_utils_1.getActiveElement)(); }, [open]);
-    var handleTab = (0, useFocusScope_1.useFocusScope)(drawerRef, __assign({ disableAutofocus: !open, disableTrapping: !open, restoreFocusRef: { current: lastActiveElement } }, focusScopeOptions)).handleTab;
+    var _g = react_1.default.useState(1), focusWrapper = _g[0], setFocusWrapper = _g[1];
     var DrawerClasses = (0, classnames_1.default)('Drawer', className, (_b = {
             'Drawer--open': open,
             'Drawer--portal': portal || backdrop,
@@ -71,23 +64,40 @@ var Drawer = function (_a) {
         },
         _b["Drawer--w-" + width] = width,
         _b));
+    var DrawerFooterClassNames = (0, classnames_1.default)('Drawer__footer', className, {
+        'justify-content-start': footerAlign === 'left',
+        'justify-content-center': footerAlign === 'center',
+        'justify-content-end': footerAlign === 'right',
+        'justify-content-between': footerAlign === 'space-between',
+    });
     var durationSlow = parseInt(tokens_1.default.durationSlow, 10) / 1000; // '300ms' -> 0.3
-    var drawerAnimation = {
+    var framerAnimation = {
         initial: { opacity: 0, x: '100%' },
         animate: { opacity: 1, x: 0 },
         exit: { opacity: 0, x: '100%' },
         transition: { type: 'easeInOut', duration: durationSlow },
     };
-    var drawerContent = (react_1.default.createElement(framer_motion_1.motion.div, __assign({ className: DrawerClasses, ref: drawerRef, onKeyDown: handleTab }, drawerAnimation, rest),
-        react_1.default.createElement(OverlayContext_1.OverlayContext.Provider, { value: overlayContext.concat('drawer') },
-            header && (react_1.default.createElement(DrawerHeader_1.DrawerHeader, { onClose: onClose }, header)),
-            react_1.default.createElement("div", { className: "Drawer__content" }, children),
-            footer && (react_1.default.createElement(DrawerFooter_1.DrawerFooter, { align: footerAlign }, footer)))));
-    var drawer = backdrop ? (react_1.default.createElement(DrawerWindow_1.DrawerWindow, { animate: true, onClose: onClose }, drawerContent)) : (react_1.default.createElement(framer_motion_1.AnimatePresence, null, drawerContent));
-    return open && react_1.default.createElement(Portal_1.Portal, { conditional: portal && !backdrop }, drawer);
+    var DrawerEl = animate ? framer_motion_1.motion.div : 'div';
+    var DrawerProps = __assign(__assign({ className: DrawerClasses, ref: drawerRef, tabIndex: focusWrapper }, (animate && framerAnimation)), rest);
+    react_1.default.useEffect(function () {
+        // Removes wrapper to be focusable element after initial tab
+        function eventHandler(event) {
+            event.key === 'Tab' && setFocusWrapper(-1);
+            document.removeEventListener('keydown', eventHandler);
+        }
+        document.addEventListener('keydown', eventHandler);
+    }, []);
+    react_1.default.useEffect(function () {
+        setFocusWrapper(1);
+    }, [open]);
+    return (react_1.default.createElement(Overlay_1.Overlay, { animate: animate, portal: portal, backdrop: backdrop, onClose: onClose, open: open },
+        react_1.default.createElement(framer_motion_1.AnimatePresence, null, open && (react_1.default.createElement(FocusTrap_1.FocusTrap, __assign({}, focusTrapOptions),
+            react_1.default.createElement(DrawerEl, __assign({}, DrawerProps),
+                header && (react_1.default.createElement("div", { className: "Drawer__header" },
+                    react_1.default.createElement(__1.Headline, { className: "Drawer__header-title" }, header),
+                    onClose && (react_1.default.createElement(__1.Button, { fill: "subtle", className: "Drawer__header-close", iconName: "clear", size: "xsmall", onClick: onClose })))),
+                react_1.default.createElement("div", { className: "Drawer__content" }, children),
+                footer && (react_1.default.createElement("div", { className: DrawerFooterClassNames }, footer))))))));
 };
 exports.Drawer = Drawer;
-exports.Drawer.Header = DrawerHeader_1.DrawerHeader;
-exports.Drawer.Footer = DrawerFooter_1.DrawerFooter;
-exports.Drawer.Window = DrawerWindow_1.DrawerWindow;
 //# sourceMappingURL=Drawer.js.map

package/dist/components/Drawer/Drawer.js.map

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

package/dist/components/Drawer/index.css

@@ -14,7 +14,12 @@
   right: 0;
   top: 0;
   width: 90%;
-  z-index: 1100;
+}
+.Drawer:focus {
+  outline: none;
+}
+.Drawer:focus-visible {
+  outline: none;
 }
 .Drawer .Drawer__header {
   align-items: center;

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Drawer/Drawer.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACSA;ACRC;EACA,OCiBa;ADfb;EACA;EDOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAlBc;EAmBd,SE0HiB;;AFxHjB;EACC;EACA;EACA,YEWiB;EFVjB;EACA;EACA;EACA;EACA;EACA;;AAGD;EAAc;;;AAGf;EAAkB;;;AAElB;EAAgB,WArCM;;;AAsCtB;EAAe,WArCM;;;AAsCrB;EAAe,WArCM;;;AAsCrB;EAAe,WArCM;;;AAuCrB;EACC;EACA;EACA;EACA,WEoFa;EFnFb;EACA;EACA,OEPmB;;;AFUpB;EACC,aEkEW;EFjEX;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC,SEiDW;EFhDX;EACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Drawer/Drawer.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACSA;ACRC;EACA,OCiBa;ADfb;EACA;EDOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAlBc;;AAqBd;EAAU;;AAGV;EAAkB;;AAElB;EACC;EACA;EACA,YEMiB;EFLjB;EACA;EACA;EACA;EACA;EACA;;AAGD;EAAc;;;AAGf;EAAkB;;;AAElB;EAAgB,WA1CM;;;AA2CtB;EAAe,WA1CM;;;AA2CrB;EAAe,WA1CM;;;AA2CrB;EAAe,WA1CM;;;AA4CrB;EACC;EACA;EACA;EACA,WE+Ea;EF9Eb;EACA;EACA,OEZmB;;;AFepB;EACC,aE6DW;EF5DX;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC,SE4CW;EF3CX;EACA","file":"index.css"}

package/dist/components/FilterButton/FilterButton.css

@@ -0,0 +1,46 @@
+/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
+.FilterButton {
+  /* Set color on root of component. It can be overridden after the @include */
+  color: #141414;
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+  display: inline-flex;
+  padding: 4px 8px;
+  border-radius: 500em;
+  border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
+  color: var(--colorsTextDefault, #141414);
+  font-size: 12px;
+  cursor: pointer;
+  background-color: transparent;
+  align-self: flex-start;
+}
+.FilterButton .BodyText {
+  color: inherit;
+}
+.FilterButton.FilterButton--focus-visible:focus {
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
+}
+.FilterButton .FilterButton__Icon {
+  height: 21px;
+  width: 21px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+.FilterButton .FilterButton__ExpandIcon,
+.FilterButton .FilterButton__Tag {
+  margin-left: 4px;
+}
+.FilterButton.FilterButton--active {
+  color: var(--colorsTextSecondary, #6954c0);
+  border: none;
+  background-color: var(--colorsSurfaceSecondarySubdued, #f1edff);
+  padding: calc(4px + 1px) calc(8px + 1px);
+}
+.FilterButton.FilterButton--active .FilterButton__Icon,
+.FilterButton.FilterButton--active .FilterButton__ExpandIcon {
+  color: var(--colorsTextSecondary, #6954c0);
+}
+
+/*# sourceMappingURL=FilterButton.css.map */

package/dist/components/FilterButton/FilterButton.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/FilterButton/FilterButton.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACYA;ACXC;EACA,OCiBa;ADfb;EACA;EDUA;EACA;EACA,eEPoB;EFQpB;EACA,OAhBc;EAiBd,WE+Ga;EF9Gb;EACA;EACA;;AAEA;EAAY;;AAEZ;EACC;EACA,YAnBc;;AAsBf;EACC;EACA;EACA;EACA;EACA;;AAGD;AAAA;EAEC,aEuFa;;AFpFd;EACC,OAxCY;EAyCZ;EACA,kBAzCkB;EA0ClB;;AAEA;AAAA;EAEC,OA/CW","file":"FilterButton.css"}

package/dist/components/FilterButton/FilterButton.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { IconPropsStrict } from '../Icon';
+export interface FilterButtonPropsStrict {
+    /** Additional classes */
+    className?: string;
+    /** React element to be rendered as an icon */
+    icon?: IconPropsStrict['name'];
+    /** To show expand icon */
+    expandIcon?: boolean | null;
+    /** Displays the label of the Filter Button */
+    label: string;
+    /** Displays the value of the Filter Button */
+    value?: boolean | number | string;
+    /** Calls when the Filter Button is clicked  */
+    onClick?: () => void;
+}
+export interface FilterButtonProps extends FilterButtonPropsStrict {
+    [propName: string]: any;
+}
+export declare const FilterButton: FC<FilterButtonProps>;

package/dist/components/FilterButton/FilterButton.js

@@ -0,0 +1,62 @@
+"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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterButton = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var useFocusVisible_1 = require("../../hooks/useFocusVisible");
+var Stack_1 = require("../Stack");
+var Icon_1 = require("../Icon");
+var BodyText_1 = require("../BodyText");
+var Tag_1 = require("../Tag");
+exports.FilterButton = react_1.default.forwardRef(function (_a, ref) {
+    var className = _a.className, icon = _a.icon, onClick = _a.onClick, _b = _a.expandIcon, expandIcon = _b === void 0 ? null : _b, value = _a.value, label = _a.label, rest = __rest(_a, ["className", "icon", "onClick", "expandIcon", "value", "label"]);
+    var _c = react_1.default.useState(value), IValue = _c[0], setIValue = _c[1];
+    var newRef = react_1.default.useRef(null);
+    var itemRef = ref ? ref : newRef;
+    var isFocusVisible = (0, useFocusVisible_1.useFocusVisible)(itemRef).isFocusVisible;
+    var filterButtonClassName = (0, classnames_1.default)('FilterButton', className, {
+        'FilterButton--active': IValue,
+        'FilterButton--focus-visible': isFocusVisible,
+    });
+    var onClickHandler = function () {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    react_1.default.useEffect(function () {
+        setIValue(value);
+    }, [value]);
+    return (react_1.default.createElement("button", __assign({ className: filterButtonClassName, onClick: function () { return onClickHandler(); }, ref: itemRef, "aria-valuetext": "" + IValue, "aria-expanded": expandIcon, "aria-label": "Filter " + label, "aria-selected": !!IValue }, rest),
+        react_1.default.createElement(Stack_1.Stack, { alignItems: "center" },
+            icon && (react_1.default.createElement(Icon_1.Icon, { name: icon, size: "16px", className: "FilterButton__Icon" })),
+            !icon && label && (react_1.default.createElement(BodyText_1.BodyText, { el: "span", size: "small", className: "FilterButton__Label" }, label)),
+            typeof IValue === 'string' ? (react_1.default.createElement(BodyText_1.BodyText, { el: "span", size: "small" }, ": ",
+                react_1.default.createElement(BodyText_1.BodyText, { el: "span", size: "small", bold: true }, IValue))) : typeof IValue === 'number' ? (react_1.default.createElement(Tag_1.Tag, { color: "info", badge: true, compact: true, className: "FilterButton__Tag" }, IValue)) : null,
+            expandIcon !== null && (react_1.default.createElement(Icon_1.Icon, { name: expandIcon
+                    ? 'keyboard_arrow_up'
+                    : 'keyboard_arrow_down', className: "FilterButton__ExpandIcon" })))));
+});
+//# sourceMappingURL=FilterButton.js.map

package/dist/components/FilterButton/FilterButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.js","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAkC;AAClC,0DAAoC;AACpC,+DAA8D;AAC9D,kCAAiC;AACjC,gCAAgD;AAChD,wCAAuC;AACvC,8BAA6B;AA0BhB,QAAA,YAAY,GAA0B,eAAK,CAAC,UAAU,CAClE,UACC,EAAsE,EACtE,GAAiC;IAD/B,IAAA,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAK,IAAI,cAApE,gEAAsE,CAAF;IAG9D,IAAA,KAAsB,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA1C,MAAM,QAAA,EAAE,SAAS,QAAyB,CAAC;IAElD,IAAM,MAAM,GAAG,eAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAClC,IAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3B,IAAA,cAAc,GAAK,IAAA,iCAAe,EAAC,OAAO,CAAC,eAA7B,CAA8B;IAEpD,IAAM,qBAAqB,GAAG,IAAA,oBAAU,EAAC,cAAc,EAAE,SAAS,EAAE;QACnE,sBAAsB,EAAE,MAAM;QAC9B,6BAA6B,EAAE,cAAc;KAC7C,CAAC,CAAC;IAEH,IAAM,cAAc,GAAG;QACtB,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;IACb,CAAC,CAAC;IAEF,eAAK,CAAC,SAAS,CAAC;QACf,SAAS,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACN,mDACC,SAAS,EAAE,qBAAqB,EAChC,OAAO,EAAE,cAAM,OAAA,cAAc,EAAE,EAAhB,CAAgB,EAC/B,GAAG,EAAE,OAAO,oBACI,KAAG,MAAQ,mBACZ,UAAU,gBACb,YAAU,KAAO,mBACd,CAAC,CAAC,MAAM,IACnB,IAAI;QAER,8BAAC,aAAK,IAAC,UAAU,EAAC,QAAQ;YACxB,IAAI,IAAI,CACR,8BAAC,WAAI,IACJ,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,oBAAoB,GAC7B,CACF;YACA,CAAC,IAAI,IAAI,KAAK,IAAI,CAClB,8BAAC,mBAAQ,IACR,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,qBAAqB,IAE9B,KAAK,CACI,CACX;YACA,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,8BAAC,mBAAQ,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,IAC9B,IAAI;gBACL,8BAAC,mBAAQ,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,UACnC,MAAM,CACG,CACD,CACX,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAChC,8BAAC,SAAG,IACH,KAAK,EAAC,MAAM,EACZ,KAAK,QACL,OAAO,QACP,SAAS,EAAC,mBAAmB,IAE5B,MAAM,CACF,CACN,CAAC,CAAC,CAAC,IAAI;YACP,UAAU,KAAK,IAAI,IAAI,CACvB,8BAAC,WAAI,IACJ,IAAI,EACH,UAAU;oBACT,CAAC,CAAC,mBAAmB;oBACrB,CAAC,CAAC,qBAAqB,EAEzB,SAAS,EAAC,0BAA0B,GACnC,CACF,CACM,CACA,CACT,CAAC;AACH,CAAC,CACD,CAAC"}

package/dist/components/FilterButton/index.css

@@ -0,0 +1,46 @@
+/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
+.FilterButton {
+  /* Set color on root of component. It can be overridden after the @include */
+  color: #141414;
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+  display: inline-flex;
+  padding: 4px 8px;
+  border-radius: 500em;
+  border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
+  color: var(--colorsTextDefault, #141414);
+  font-size: 12px;
+  cursor: pointer;
+  background-color: transparent;
+  align-self: flex-start;
+}
+.FilterButton .BodyText {
+  color: inherit;
+}
+.FilterButton.FilterButton--focus-visible:focus {
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
+}
+.FilterButton .FilterButton__Icon {
+  height: 21px;
+  width: 21px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+.FilterButton .FilterButton__ExpandIcon,
+.FilterButton .FilterButton__Tag {
+  margin-left: 4px;
+}
+.FilterButton.FilterButton--active {
+  color: var(--colorsTextSecondary, #6954c0);
+  border: none;
+  background-color: var(--colorsSurfaceSecondarySubdued, #f1edff);
+  padding: calc(4px + 1px) calc(8px + 1px);
+}
+.FilterButton.FilterButton--active .FilterButton__Icon,
+.FilterButton.FilterButton--active .FilterButton__ExpandIcon {
+  color: var(--colorsTextSecondary, #6954c0);
+}
+
+/*# sourceMappingURL=index.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/FilterButton/FilterButton.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACYA;ACXC;EACA,OCiBa;ADfb;EACA;EDUA;EACA;EACA,eEPoB;EFQpB;EACA,OAhBc;EAiBd,WE+Ga;EF9Gb;EACA;EACA;;AAEA;EAAY;;AAEZ;EACC;EACA,YAnBc;;AAsBf;EACC;EACA;EACA;EACA;EACA;;AAGD;AAAA;EAEC,aEuFa;;AFpFd;EACC,OAxCY;EAyCZ;EACA,kBAzCkB;EA0ClB;;AAEA;AAAA;EAEC,OA/CW","file":"index.css"}

package/dist/components/FilterButton/index.d.ts

@@ -0,0 +1 @@
+export * from './FilterButton';

package/dist/components/FilterButton/index.js

@@ -0,0 +1,14 @@
+"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("./FilterButton"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,iDAA+B"}