npm - @servicetitan/design-system - Versions diffs - 13.4.0 → 14.0.0 - Mend

@servicetitan/design-system 13.4.0 → 14.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (520) hide show

package/dist/utilities/AnvilProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnvilProvider.js","sourceRoot":"","sources":["../../src/utilities/AnvilProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,aAAa,EAAsB,MAAM,iBAAiB,CAAC;AAEpE,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5E,OAAO,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAiB,CAAC;AAChE,CAAC,CAAC"}
1	+ {"version":3,"file":"AnvilProvider.js","sourceRoot":"","sources":["../../src/utilities/AnvilProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,aAAa,EAAsB,MAAM,iBAAiB,CAAC;AAEpE,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5E,OAAO,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAiB,CAAC;AAChE,CAAC,CAAC","sourcesContent":["import React, { FC } from 'react';\nimport { ThemeProvider, themeProviderProps } from './ThemeProvider';\n\nexport const AnvilProvider: FC<themeProviderProps> = ({ children, theme }) => {\n\treturn <ThemeProvider theme={theme}>{children}</ThemeProvider>;\n};\n"]}

package/dist/utilities/ConditionalWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConditionalWrapper.js","sourceRoot":"","sources":["../../src/utilities/ConditionalWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAOlC,MAAM,CAAC,MAAM,kBAAkB,GAAgC,CAAC,EAC/D,SAAS,EACT,OAAO,EACP,QAAQ,GACR,EAAE,EAAE;IACJ,MAAM,SAAS,GAAG,oBAAC,KAAK,CAAC,QAAQ,QAAE,QAAQ,CAAkB,CAAC;IAE9D,OAAO,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AACnD,CAAC,CAAC"}
1	+ {"version":3,"file":"ConditionalWrapper.js","sourceRoot":"","sources":["../../src/utilities/ConditionalWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAOlC,MAAM,CAAC,MAAM,kBAAkB,GAAgC,CAAC,EAC/D,SAAS,EACT,OAAO,EACP,QAAQ,GACR,EAAE,EAAE;IACJ,MAAM,SAAS,GAAG,oBAAC,KAAK,CAAC,QAAQ,QAAE,QAAQ,CAAkB,CAAC;IAE9D,OAAO,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AACnD,CAAC,CAAC","sourcesContent":["import React, { FC } from 'react';\ninterface ConditionalWrapperProps {\n\tcondition: boolean;\n\twrapper: (child: React.ReactElement) => React.ReactElement;\n\tchildren: React.ReactElement \| React.ReactElement[];\n}\n\nexport const ConditionalWrapper: FC<ConditionalWrapperProps> = ({\n\tcondition,\n\twrapper,\n\tchildren,\n}) => {\n\tconst container = <React.Fragment>{children}</React.Fragment>;\n\n\treturn condition ? wrapper(container) : container;\n};\n"]}

package/dist/utilities/DefaultPortalContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DefaultPortalContext.js","sourceRoot":"","sources":["../../src/utilities/DefaultPortalContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAE/C,IAAI,CAAC,CAAC"}
1	+ {"version":3,"file":"DefaultPortalContext.js","sourceRoot":"","sources":["../../src/utilities/DefaultPortalContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAE/C,IAAI,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\n/\n Provides default element for the portal property\n */\nexport const DefaultPortalContext = createContext<\n\tHTMLElement \| ShadowRoot \| null\n>(null);\n"]}

package/dist/utilities/KeyboardAccessTests/KeyboardAccess.test.js CHANGED Viewed

@@ -10,9 +10,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { mockResizeObserver, expectLog, keypressLegacy } from './utils';
+import { mockResizeObserver, mockElementOffset, expectLog, keypressLegacy, } from './utils';
 import { KeyboardTester, DatePickerWithValue, DateRangePickerWithValue, TimePickerWithValue, SelectWithValue, FocusTrapTest, ModalTest, DrawerTest, DialogTest, PopoverTest, TakeoverTest, ActionMenuTest, SideNavTest, TabTest, ButtonToggleTest, } from './components';
 mockResizeObserver();
+mockElementOffset();
 window.HTMLElement.prototype.scrollIntoView = () => { };
 describe('DatePicker', () => {
     beforeEach(() => jest.spyOn(console, 'error'));
@@ -20,8 +21,7 @@ describe('DatePicker', () => {
         const user = userEvent.setup();
         render(React.createElement(KeyboardTester, null,
             React.createElement(DatePickerWithValue, null)));
-        const cal = () => screen.getByRole('grid') || global.document;
-        // focus on icon → enter → arrow keys → enter to select value  → tab to exit
+        const cal = () => screen.getAllByRole('grid')[0] || global.document;
         yield expectLog({ text: 'first focusable' });
         yield user.tab();
         yield expectLog({ text: 'toggle calendar' });
@@ -46,10 +46,7 @@ describe('DatePicker', () => {
         const user = userEvent.setup();
         render(React.createElement(KeyboardTester, null,
             React.createElement(DatePickerWithValue, null)));
-        const cal = () => screen.getByRole('grid') || global.document;
-        /*
-         * focus input → arrow keys → enter to select value → tab to exit
-         */
+        const cal = () => screen.getAllByRole('grid')[0] || global.document;
         yield expectLog({ text: 'first focusable' });
         yield user.tab();
         yield expectLog({ text: 'toggle calendar' }); // Icon focused
@@ -72,10 +69,9 @@ describe('DatePicker', () => {
 describe('DateRangePicker', () => {
     const user = userEvent.setup();
     beforeEach(() => jest.spyOn(console, 'error'));
-    it('keyboard nav: (TBD) {enter} or {arrowDown} on mask to open picker, autofocus on start, tab to end date, tab to navigation over calendar', () => __awaiter(void 0, void 0, void 0, function* () {
+    it('keyboard nav: {enter} or {arrowDown} on mask to open picker, autofocus on start, tab to end date, tab to navigation over calendar', () => __awaiter(void 0, void 0, void 0, function* () {
         render(React.createElement(KeyboardTester, null,
             React.createElement(DateRangePickerWithValue, null)));
-        // focus on icon → enter → arrow keys → enter to select value  → tab to exit
         yield expectLog({ text: 'first focusable' });
         yield user.tab();
         yield expectLog({ text: 'Nov 7, 2022 - Nov 15, 2022' });
@@ -92,7 +88,6 @@ describe('TimePicker', () => {
         const user = userEvent.setup();
         render(React.createElement(KeyboardTester, null,
             React.createElement(TimePickerWithValue, null)));
-        // focus on input → arrow down → enter to select value  → tab to exit
         yield expectLog({ text: 'first focusable' });
         yield user.tab();
         yield expectLog({ text: '08:00 AM' });
@@ -166,7 +161,7 @@ describe('AnvilSelect', () => {
 });
 describe('ActionMenu', () => {
     beforeEach(() => jest.spyOn(console, 'error'));
-    it('keyboard nav: (TBD) arrow keys should move focus, {Enter} should open submenu', () => __awaiter(void 0, void 0, void 0, function* () {
+    it('keyboard nav: arrow keys moves focus, {Enter}, {ArrowRight} opens submenu, {ArrowLeft} closes, {Escape} closes all menus', () => __awaiter(void 0, void 0, void 0, function* () {
         const user = userEvent.setup();
         render(React.createElement(KeyboardTester, null,
             React.createElement(ActionMenuTest, null)));
@@ -174,25 +169,94 @@ describe('ActionMenu', () => {
         yield user.tab();
         yield expectLog({ text: 'Open' });
         yield user.keyboard('{Enter}'); // Render ActionMenu
-        // TBD write test keyboard here, keyboard yet is not supported
-        yield user.tab();
-        yield expectLog({ text: 'last focusable' });
+        yield expectLog({ text: 'Item 1' }); // Focus is inside
+        yield user.keyboard('{ArrowDown}');
+        yield expectLog({ text: 'Item 2 (cascading)' }); // Focus is moving
+        yield user.keyboard('{ArrowRight}');
+        yield expectLog({ text: 'Item 21' }); // Submenu opened
+        yield user.keyboard('{ArrowDown}{ArrowDown}{ArrowDown}');
+        yield expectLog({ text: 'Item 24' }); // Last item focused
+        yield user.keyboard('{ArrowDown}');
+        yield expectLog({ text: 'Item 21' }); // Looping
+        yield user.keyboard('{ArrowLeft}');
+        yield expectLog({ text: 'Item 2 (cascading)' }); // Submenu closed
+        yield user.keyboard('{ }'); // Submenu opened on Space keypress
+        yield expectLog({ text: 'Item 21' });
+        yield user.keyboard('{ArrowLeft}');
+        yield expectLog({ text: 'Item 2 (cascading)' }); // Submenu closed
+        yield user.keyboard('{ArrowDown}');
+        yield expectLog({ text: 'Item 3' }); // Focus is moving
+        yield user.keyboard('{ArrowDown}');
+        yield expectLog({ text: 'Item 4' });
+        yield user.keyboard('{ArrowDown}');
+        yield expectLog({ text: 'Item 1' }); // Looping
+        yield user.keyboard('{Escape}');
+        yield expectLog({ text: 'Open' }); // Menu closed
+        yield user.keyboard('{Enter}{ArrowDown}{ArrowRight}{ArrowDown}');
+        yield expectLog({ text: 'Item 22 (cascading)' });
+        yield user.keyboard('{Escape}');
+        yield expectLog({ text: 'Open' }); // Escape to close all the menus
+        yield user.keyboard('{Enter}');
+        yield user.tab({ shift: true });
+        yield expectLog({ text: 'Open' }); // Focus not locked, shift+tab sends focus back to the trigger
+        yield user.keyboard('{ }');
+        yield expectLog({ text: 'Item 1' }); // Space to open the menu and focus first item
+        yield user.keyboard('{ArrowDown}');
+        yield expectLog({ text: 'Item 2 (cascading)' });
+        yield user.keyboard('{ArrowDown}');
+        yield expectLog({ text: 'Item 3' });
     }));
 });
 describe('SideNav', () => {
     beforeEach(() => jest.spyOn(console, 'error'));
-    it('keyboard nav: arrow keys should navigate over SideNav, {Enter} should open submenu', () => __awaiter(void 0, void 0, void 0, function* () {
+    it('keyboard nav: {Enter}, {Space} should make selection', () => __awaiter(void 0, void 0, void 0, function* () {
         const user = userEvent.setup();
         render(React.createElement(KeyboardTester, null,
             React.createElement(SideNavTest, null)));
         yield expectLog({ text: 'first focusable' });
         yield user.tab();
         yield user.tab();
-        yield expectLog({ text: 'Item 1' });
+        yield expectLog({ text: 'Item 21' }); // Focus on selected item
         yield user.keyboard('{ArrowDown}');
-        yield expectLog({ text: 'Item 2' }); // Collapsible
+        yield expectLog({ text: 'Item 22' });
+        yield user.keyboard('{Enter}'); // Makes selection
+        yield expectLog({ text: 'Item 22' });
         yield user.keyboard('{ArrowDown}');
-        yield expectLog({ text: 'Item 3' });
+        yield expectLog({ text: 'Item 23' });
+        yield user.tab();
+        yield expectLog({ text: 'last focusable' });
+        yield user.tab({ shift: true });
+        yield expectLog({ text: 'Item 22' }); // Focus back on selected
+        yield user.tab({ shift: true });
+        yield user.tab({ shift: true });
+        yield expectLog({ text: 'first focusable' });
+        yield user.tab();
+        yield user.tab();
+        yield expectLog({ text: 'Item 22' }); // Focus back on selected
+        yield user.keyboard('{ArrowDown}');
+        yield user.keyboard('{ }'); // {Space} make selection
+        yield user.tab();
+        yield user.tab({ shift: true });
+        yield expectLog({ text: 'Item 23' }); // Focus back on selected
+    }));
+    it('keyboard nav: arrow keys should navigate over SideNav, {Enter}, {ArrowLeft}, {ArrowRight} should toggle submenu', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        render(React.createElement(KeyboardTester, null,
+            React.createElement(SideNavTest, null)));
+        yield expectLog({ text: 'first focusable' });
+        yield user.tab();
+        yield user.tab();
+        yield expectLog({ text: 'Item 21' }); // Focus on selected item
+        yield user.keyboard('{ArrowDown}');
+        yield expectLog({ text: 'Item 22' });
+        yield user.keyboard('{ArrowLeft}');
+        yield expectLog({ text: 'Item 2' }); // Left should move focus on collapsible parent
+        yield user.keyboard('{ArrowLeft}');
+        yield expectLog({ text: 'Item 2' }); // Closes collapsible
+        yield user.keyboard('{ArrowLeft}');
+        yield expectLog({ text: 'Item 2' }); // Should do nothing
+        yield user.keyboard('{ArrowDown}');
+        yield expectLog({ text: 'Item 3' }); // Collapsible is really closed
         yield user.keyboard('{ArrowUp}');
         yield user.keyboard('{Enter}'); // Opens collapsible
         yield user.keyboard('{ArrowDown}');
@@ -201,46 +265,93 @@ describe('SideNav', () => {
         yield expectLog({ text: 'Item 3' });
         yield user.keyboard('{ArrowDown}');
         yield expectLog({ text: 'Item 4' });
-        yield user.keyboard('{ArrowDown}'); // Nowhere to go
-        yield expectLog({ text: 'Item 4' });
+        yield user.keyboard('{ArrowDown}');
+        yield expectLog({ text: 'Item 4' }); // Looping is disabled
+        yield user.keyboard('{Home}');
+        yield expectLog({ text: 'Item 1' }); // Home works
+        yield user.keyboard('{End}');
+        yield expectLog({ text: 'Item 4' }); // End works
+        yield user.keyboard('{Home}');
+        yield user.keyboard('{ArrowDown}');
+        yield user.keyboard('{Enter}'); // Closes collapsible
+        yield user.keyboard('{ArrowRight}'); // Opens collapsible
+        yield expectLog({ text: 'Item 2' }); // Collapsible is opened
+        yield user.keyboard('{ArrowRight}');
+        yield expectLog({ text: 'Item 21' });
+        yield user.keyboard('{ArrowDown}');
+        yield expectLog({ text: 'Item 22' });
         yield user.tab();
         yield expectLog({ text: 'last focusable' });
     }));
 });
 describe('Tab', () => {
     beforeEach(() => jest.spyOn(console, 'error'));
-    it('keyboard nav: (TBD) arrow keys should move focus, {Enter} or {Space} should activate Tab', () => __awaiter(void 0, void 0, void 0, function* () {
+    it('keyboard nav: arrow keys should move focus, {Enter} or {Space} should activate Tab', () => __awaiter(void 0, void 0, void 0, function* () {
         const user = userEvent.setup();
         render(React.createElement(KeyboardTester, null,
             React.createElement(TabTest, null)));
         yield expectLog({ text: 'first focusable' });
         yield user.tab();
-        yield expectLog({ text: 'Tab 1' });
-        // TBD write test keyboard here, keyboard yet is not supported
-        yield user.tab();
+        yield expectLog({ text: 'Tab 2' }); // Focus on selected item
+        yield user.keyboard('{ArrowRight}');
+        yield expectLog({ text: 'Tab 3' });
+        yield user.keyboard('{ArrowRight}');
+        yield expectLog({ text: 'Tab 1' }); // Looping works
+        yield user.keyboard('{ArrowLeft}');
+        yield expectLog({ text: 'Tab 3' });
+        yield user.keyboard('{ArrowRight}{ArrowRight}');
         yield expectLog({ text: 'Tab 2' });
         yield user.tab();
-        yield expectLog({ text: 'Tab 3' });
+        yield expectLog({ text: 'Action' });
         yield user.tab();
         yield expectLog({ text: 'last focusable' });
+        yield user.tab({ shift: true });
+        yield expectLog({ text: 'Action' });
+        yield user.tab({ shift: true });
+        yield expectLog({ text: 'Tab 2' }); // Focus back on selected
+        yield user.keyboard('{ArrowRight}');
+        yield expectLog({ text: 'Tab 3' });
+        yield user.keyboard('{ }'); // {Space} make selection
+        yield expectLog({ text: 'Tab 3' });
+        yield user.tab({ shift: true });
+        yield expectLog({ text: 'first focusable' });
+        yield user.tab();
+        yield expectLog({ text: 'Tab 3' }); // Focus back
+        yield user.keyboard('{ArrowUp}');
+        yield expectLog({ text: 'Tab 3' }); // Do nothing
+        yield user.keyboard('{ArrowDown}');
+        yield expectLog({ text: 'Tab 3' }); // Do nothing
     }));
 });
 describe('ButtonToggle', () => {
     beforeEach(() => jest.spyOn(console, 'error'));
-    it('keyboard nav: (TBD) arrow keys should move focus, {Enter} or {Space} should activate', () => __awaiter(void 0, void 0, void 0, function* () {
+    it('keyboard nav: arrow left and right keys should move selection', () => __awaiter(void 0, void 0, void 0, function* () {
         const user = userEvent.setup();
         render(React.createElement(KeyboardTester, null,
             React.createElement(ButtonToggleTest, null)));
         yield expectLog({ text: 'first focusable' });
         yield user.tab();
+        yield expectLog({ text: 'Item 2' }); // Focus on selected item
+        yield user.keyboard('{ArrowRight}');
+        yield expectLog({ text: 'Item 3' });
+        yield user.keyboard('{ArrowRight}');
+        yield expectLog({ text: 'Item 1' }); // Loop from 3 to 1, skipping disabled (4)
+        yield user.keyboard('{ArrowRight}');
+        yield expectLog({ text: 'Item 2' });
+        yield user.keyboard('{ArrowLeft}');
         yield expectLog({ text: 'Item 1' });
-        // TBD write test keyboard here, keyboard yet is not supported
+        yield user.keyboard('{ArrowDown}');
+        yield expectLog({ text: 'Item 1' }); // Nothing happens
         yield user.tab();
+        yield expectLog({ text: 'last focusable' });
+        yield user.tab({ shift: true });
+        yield expectLog({ text: 'Item 1' }); // Focus back
+        yield user.keyboard('{ArrowRight}');
         yield expectLog({ text: 'Item 2' });
+        yield user.tab({ shift: true });
+        yield expectLog({ text: 'first focusable' });
         yield user.tab();
-        yield expectLog({ text: 'Item 3' });
-        yield user.tab();
-        yield expectLog({ text: 'last focusable' });
+        yield expectLog({ text: 'Item 2' }); // Focus back
     }));
 });
 describe('useFocusTrap', () => {
@@ -257,7 +368,7 @@ describe('useFocusTrap', () => {
         yield user.tab();
         yield expectLog({ text: 'Inside 3 (shard)' });
         yield user.tab();
-        yield expectLog({ text: 'Inside 1' });
+        yield expectLog({ text: 'Inside 1' }); // Focus is trapped
         // Reversed tabbing
         yield user.tab({ shift: true });
         yield expectLog({ text: 'Inside 3 (shard)' });
@@ -266,7 +377,7 @@ describe('useFocusTrap', () => {
         yield user.tab({ shift: true });
         yield expectLog({ text: 'Inside 1' });
         yield user.tab({ shift: true });
-        yield expectLog({ text: 'Inside 3 (shard)' });
+        yield expectLog({ text: 'Inside 3 (shard)' }); // Focus is trapped
     }));
     it('Modal: focus trap, auto focus and restore focus should work inside Modal', () => __awaiter(void 0, void 0, void 0, function* () {
         const user = userEvent.setup();

package/dist/utilities/KeyboardAccessTests/KeyboardAccess.test.js.map CHANGED Viewed

package/dist/utilities/KeyboardAccessTests/components/KeyboardTester.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KeyboardTester.js","sourceRoot":"","sources":["../../../../src/utilities/KeyboardAccessTests/components/KeyboardTester.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAU,EAAE,EAAE;IAC5C,MAAM,GAAG,GAAG,CAAC,CAAM,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB;IAEhF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACpB,MAAC,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAS,0CAAE,KAAK,EAAE,CAAC,CAAC,YAAY;QAEvE,IAAI,KAAK,CAAC,UAAU,EAAE;YACrB,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;YACxC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;YAC1C,OAAO,GAAG,EAAE;gBACX,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;gBAC3C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;YAC9C,CAAC,CAAC;SACF;IACF,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;IAEvB,OAAO,CACN,6BAAK,SAAS,EAAC,qBAAqB;QACnC,2BAAG,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAC,aAAa,sBAEjD;QACJ,iCAAM,KAAK,CAAC,QAAQ,CAAO;QAC3B,2BAAG,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAC,aAAa,qBAEjD,CACC,CACN,CAAC;AACH,CAAC,CAAC"}
1	+ {"version":3,"file":"KeyboardTester.js","sourceRoot":"","sources":["../../../../src/utilities/KeyboardAccessTests/components/KeyboardTester.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAU,EAAE,EAAE;IAC5C,MAAM,GAAG,GAAG,CAAC,CAAM,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB;IAEhF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACpB,MAAC,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAS,0CAAE,KAAK,EAAE,CAAC,CAAC,YAAY;QAEvE,IAAI,KAAK,CAAC,UAAU,EAAE;YACrB,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;YACxC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;YAC1C,OAAO,GAAG,EAAE;gBACX,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;gBAC3C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;YAC9C,CAAC,CAAC;SACF;IACF,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;IAEvB,OAAO,CACN,6BAAK,SAAS,EAAC,qBAAqB;QACnC,2BAAG,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAC,aAAa,sBAEjD;QACJ,iCAAM,KAAK,CAAC,QAAQ,CAAO;QAC3B,2BAAG,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAC,aAAa,qBAEjD,CACC,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { logActiveElement } from '../utils';\n\nexport const KeyboardTester = (props: any) => {\n\tconst log = (e: any) => setTimeout(() => logActiveElement(e)); // Delayed log fn\n\n\tReact.useEffect(() => {\n\t\t(document.querySelector('a.focusable-1') as any)?.focus(); // Autofocus\n\n\t\tif (props.logOnEvent) {\n\t\t\tdocument.addEventListener('click', log);\n\t\t\tdocument.addEventListener('keydown', log);\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener('click', log);\n\t\t\t\tdocument.removeEventListener('keydown', log);\n\t\t\t};\n\t\t}\n\t}, [props.logOnEvent]);\n\n\treturn (\n\t\t<div className=\"KeyboardTestWrapper\">\n\t\t\t<a role=\"button\" tabIndex={0} className=\"focusable-1\">\n\t\t\t\tfirst focusable\n\t\t\t</a>\n\t\t\t<div>{props.children}</div>\n\t\t\t<a role=\"button\" tabIndex={0} className=\"focusable-2\">\n\t\t\t\tlast focusable\n\t\t\t</a>\n\t\t</div>\n\t);\n};\n"]}

package/dist/utilities/KeyboardAccessTests/components/components.d.ts CHANGED Viewed

@@ -13,3 +13,4 @@ export declare const ActionMenuTest: () => JSX.Element;
 export declare const SideNavTest: () => JSX.Element;
 export declare const TabTest: () => JSX.Element;
 export declare const ButtonToggleTest: () => JSX.Element;
+export declare const ColorPickerTest: () => JSX.Element;