From e3c8ed718b64545de55ac3b8c734ea81e57d631d Mon Sep 17 00:00:00 2001 From: Laura Silva Date: Tue, 3 Dec 2024 17:11:04 -0500 Subject: [PATCH 1/7] fix(TreeView): Support 'show all' button inside TreeView component --- .changeset/tree-showAllExample.md | 5 + .../components/TreeView/TreeView.stories.tsx | 167 ++ .../src/components/TreeView/TreeView.test.js | 23 +- .../__snapshots__/TreeView.test.js.snap | 1541 +++++++++++++++++ .../src/components/TreeView/useTreeView.ts | 2 +- 5 files changed, 1736 insertions(+), 2 deletions(-) create mode 100644 .changeset/tree-showAllExample.md create mode 100644 packages/react-magma-dom/src/components/TreeView/__snapshots__/TreeView.test.js.snap diff --git a/.changeset/tree-showAllExample.md b/.changeset/tree-showAllExample.md new file mode 100644 index 000000000..461f3ca32 --- /dev/null +++ b/.changeset/tree-showAllExample.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': patch +--- + +fix(TreeView): Support "show all" button inside TreeView component diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx index 4fafb935f..d890340c9 100644 --- a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx +++ b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx @@ -25,6 +25,10 @@ import { ButtonGroup, Spacer, SpacerAxis, + Accordion, + AccordionItem, + AccordionButton, + AccordionPanel } from '../..'; import { ButtonSize } from '../Button'; import { FlexAlignContent, FlexAlignItems } from '../Flex'; @@ -1097,3 +1101,166 @@ InvalidTreeItems.parameters = { exclude: ['isInverse', 'initialExpandedItems', 'ariaLabelledBy'], }, }; + +// MAST Tree example with hidden items + +const renderTreeItemsRecursively = (terms, depth) => { + const labelStyles = { + overflow: 'hidden', + textOverflow: 'ellipsis', + width: 230 - depth * 24 + 'px', + display: 'inline-block', + }; + return terms.map(term => { + return ( + + {term.children?.length ? ( + renderTreeItemsRecursively(term.children, depth + 1) + ) : ( + <> + )} + + ); + }); +}; + +const AccordionSectionWithTreeView = props => { + const { + trees, + title, + keyForRerenderOfTagsTree, + id, + isDisabled, + onSelectedItemChange, + ...rest + } = props; + const [isShowAll, setIsShowAll] = React.useState(false); + const isSingeTaxonomyOfSuchType = trees.length === 1; + const customIndex = Number(id) || 0; + const getTermsForRender = terms => { + if (isShowAll || terms.length <= 5) return terms; + return terms.slice(0, 5); + }; + const getTreesForRender = () => { + if (isShowAll || trees.length <= 5) return trees; + return trees.slice(0, 5); + }; + const toggleShowAll = () => { + setIsShowAll(prev => !prev); + }; + const renderTrees = () => { + return ( + <> + {getTreesForRender().map(tree => { + // RM issue with types. Should be "TreeItemSelectedInterface" instead of "Object". + // eslint-disable-next-line @typescript-eslint/ban-types + const handleSelectedItemChange = selectedItems => { + // onSelectedItemChange(selectedItems, tree.groupName, tree.id); + }; + return ( + + {renderTreeItemsRecursively( + isSingeTaxonomyOfSuchType + ? getTermsForRender(tree.items) + : tree.items, + 0 + )} + + ); + })} + + ); + }; + const isShowAllButtonVisible = + trees.length === 1 ? trees[0].items.length > 5 : trees.length > 5; + return ( + + {title} + + {renderTrees()} + {isShowAllButtonVisible && ( + + )} + + + ); +}; + + +export const TreeWithShowAll = args => { + const props = { + title: 'Chapter/Subchapter', + trees: [ + { + id: 'tree-id', + groupName: 'book-table-of-contents', + items: [ + { + id: 'item-id-1', + title: 'item-title-1', + children: [], + }, + { + id: 'item-id-2', + title: 'item-title-2', + children: [], + }, + { + id: 'item-id-3', + title: 'item-title-3', + children: [], + }, + { + id: 'item-id-4', + title: 'item-title-4', + children: [ + { + id: 'item-id-4.1', + title: 'item-title-4.1', + children: [], + }, + ], + }, + { + id: 'item-id-5', + title: 'item-title-5', + children: [], + }, + { + id: 'item-id-6', + title: 'item-title-6', + children: [], + }, + ], + preselectedItems: [], + }, + ], + keyForRerenderOfTagsTree: true, + }; + + return ( + + + + ); +}; \ No newline at end of file diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.test.js b/packages/react-magma-dom/src/components/TreeView/TreeView.test.js index 33cfd80da..985f8f2bd 100644 --- a/packages/react-magma-dom/src/components/TreeView/TreeView.test.js +++ b/packages/react-magma-dom/src/components/TreeView/TreeView.test.js @@ -9,6 +9,7 @@ import { transparentize } from 'polished'; import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox'; import { Tag } from '../Tag'; import { Paragraph } from '../Paragraph'; +import { TreeWithShowAll } from './TreeView.stories'; const TEXT = 'Test Text Tree Item'; const testId = 'tree-view'; @@ -2326,7 +2327,7 @@ describe('TreeView', () => { const disabledItemId = 'item-ggchild1'; const onSelectedItemChange = jest.fn(); - const { getByTestId, debug } = render( + const { getByTestId } = render( { expect(queryByTestId('item1-expand')).not.toBeInTheDocument(); }); }); + + describe('tree with hidden items', () => { + it('renders tree with some items, and clicking show all displays the rest of the tree', () => { + const onSelectedItemChange = jest.fn(); + const { asFragment, getByLabelText, getByTestId } = render(); + + expect(asFragment()).toMatchSnapshot(); + + expect(getByLabelText('item-title-1')).toBeInTheDocument(); + expect(getByLabelText('item-title-2')).toBeInTheDocument(); + expect(getByLabelText('item-title-3')).toBeInTheDocument(); + expect(getByLabelText('item-title-4')).toBeInTheDocument(); + expect(getByLabelText('item-title-5')).toBeInTheDocument(); + + userEvent.click(getByTestId('showAllBtn')); + expect(getByLabelText('item-title-6')).toBeInTheDocument(); + userEvent.click(getByLabelText('item-title-6')); + // expect(onSelectedItemChange).toHaveBeenCalledTimes(1); + }) + }) }); diff --git a/packages/react-magma-dom/src/components/TreeView/__snapshots__/TreeView.test.js.snap b/packages/react-magma-dom/src/components/TreeView/__snapshots__/TreeView.test.js.snap new file mode 100644 index 000000000..27cf20066 --- /dev/null +++ b/packages/react-magma-dom/src/components/TreeView/__snapshots__/TreeView.test.js.snap @@ -0,0 +1,1541 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TreeView tree with hidden items renders tree with some items, and clicking show all displays the rest of the tree 1`] = ` + + .emotion-0 { + background: transparent; + border-bottom: 1px solid #D4D4D4; + color: #707070; + font-family: "Work Sans",Helvetica,sans-serif; +} + +.emotion-2 h1, +.emotion-2 h2, +.emotion-2 h3, +.emotion-2 h4, +.emotion-2 h5, +.emotion-2 h6 { + background: none; + color: inherit; + font: inherit; + line-height: inherit; + margin: 0; + padding: 0; +} + +.emotion-4 { + background: transparent; + border: 0; + border-top: 1px solid #D4D4D4; + color: #454545; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + font-weight: 500; + padding: 12px 16px; + text-align: left; + width: 100%; +} + +.emotion-4:focus { + outline: 2px solid #0074B7; + outline-offset: 0; +} + +.emotion-4.emotion-4[disabled] { + color: rgba(112,112,112,0.6); + cursor: not-allowed; +} + +.emotion-4.emotion-4[disabled] svg { + color: rgba(112,112,112,0.6); +} + +.emotion-4 svg { + color: #707070; +} + +.emotion-6 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.emotion-8 { + display: block; + height: 12px; + min-height: 12px; + min-width: 12px; + width: 12px; +} + +.emotion-10 { + background: transparent; + color: #454545; + font-family: "Work Sans",Helvetica,sans-serif; + padding: 8px 16px 12px; +} + +.emotion-12 { + padding: 0; + margin: 0; + color: #707070; +} + +.emotion-12 ul { + padding: 0; + margin: 0; +} + +.emotion-12 ul li { + margin: 0; +} + +.emotion-14 { + color: #454545; + list-style-type: none; + cursor: not-allowed; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-14:focus { + outline: none; +} + +.emotion-14:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-14>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-16 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: not-allowed; +} + +.emotion-18 { + margin-right: 8px; + vertical-align: middle; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.emotion-20 { + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + position: relative; +} + +.emotion-22 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-24 { + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + margin: 0; + padding: 8px 0; +} + +.emotion-26 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #D4D4D4; + cursor: not-allowed; + margin: 0 8px 0 0; +} + +.emotion-26:before, +.emotion-26:after { + content: ''; + position: absolute; +} + +.emotion-26:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-26 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-26:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-26:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-28 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: rgba(112,112,112,0.4); + width: 100%; +} + +.emotion-30 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-30:focus { + outline: none; +} + +.emotion-30:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-30>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-30>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-32 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: default; +} + +.emotion-42 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #454545; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-42:before, +.emotion-42:after { + content: ''; + position: absolute; +} + +.emotion-42:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-42 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-42:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-42:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-44 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + width: 100%; +} + +.emotion-62 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 8px; + padding-inline-start: 8px; +} + +.emotion-62:focus { + outline: none; +} + +.emotion-62:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-62>div:first-of-type { + position: relative; + -webkit-padding-start: 8px; + padding-inline-start: 8px; + -webkit-margin-start: -8px; + margin-inline-start: -8px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-62>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-66 { + display: inline-block; + vertical-align: middle; + margin-right: 8px; + color: #454545; + border-radius: 0; + width: 24px; + height: 24px; +} + +.emotion-80 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-98 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: none; + border: 0; + border-radius: 8px; + color: #3942B0; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + font-family: "Work Sans",Helvetica,sans-serif; + font-size: 12px; + font-weight: 500; + height: 28px; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + letter-spacing: .32px; + line-height: 16px; + margin: 0; + min-width: 0; + overflow: hidden; + padding: 4px 8px; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + text-transform: uppercase; + touch-action: manipulation; + -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + vertical-align: middle; + white-space: nowrap; + width: auto; +} + +.emotion-98:not(:disabled):focus { + outline: 2px solid #0074B7; + outline-offset: 2px; + z-index: 1; +} + +.emotion-98:not(:disabled):hover, +.emotion-98:not(:disabled):focus { + background: #E8E9F8; + color: #3942B0; +} + +.emotion-98:not(:disabled):active { + background: #BABDE9; + color: #292F7C; +} + +.emotion-98:not(:disabled):active:after { + opacity: 0.4; + -webkit-transform: translate(-50%, -50%) scale(0); + -moz-transform: translate(-50%, -50%) scale(0); + -ms-transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-98 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-100 { + visibility: visible; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-0 { + background: transparent; + border-bottom: 1px solid #D4D4D4; + color: #707070; + font-family: "Work Sans",Helvetica,sans-serif; +} + +.emotion-2 h1, +.emotion-2 h2, +.emotion-2 h3, +.emotion-2 h4, +.emotion-2 h5, +.emotion-2 h6 { + background: none; + color: inherit; + font: inherit; + line-height: inherit; + margin: 0; + padding: 0; +} + +.emotion-4 { + background: transparent; + border: 0; + border-top: 1px solid #D4D4D4; + color: #454545; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + font-weight: 500; + padding: 12px 16px; + text-align: left; + width: 100%; +} + +.emotion-4:focus { + outline: 2px solid #0074B7; + outline-offset: 0; +} + +.emotion-4.emotion-4[disabled] { + color: rgba(112,112,112,0.6); + cursor: not-allowed; +} + +.emotion-4.emotion-4[disabled] svg { + color: rgba(112,112,112,0.6); +} + +.emotion-4 svg { + color: #707070; +} + +.emotion-6 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.emotion-8 { + display: block; + height: 12px; + min-height: 12px; + min-width: 12px; + width: 12px; +} + +.emotion-10 { + background: transparent; + color: #454545; + font-family: "Work Sans",Helvetica,sans-serif; + padding: 8px 16px 12px; +} + +.emotion-12 { + padding: 0; + margin: 0; + color: #707070; +} + +.emotion-12 ul { + padding: 0; + margin: 0; +} + +.emotion-12 ul li { + margin: 0; +} + +.emotion-14 { + color: #454545; + list-style-type: none; + cursor: not-allowed; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-14:focus { + outline: none; +} + +.emotion-14:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-14>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-16 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: not-allowed; +} + +.emotion-18 { + margin-right: 8px; + vertical-align: middle; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.emotion-20 { + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + position: relative; +} + +.emotion-22 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-24 { + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + margin: 0; + padding: 8px 0; +} + +.emotion-26 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #D4D4D4; + cursor: not-allowed; + margin: 0 8px 0 0; +} + +.emotion-26:before, +.emotion-26:after { + content: ''; + position: absolute; +} + +.emotion-26:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-26 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-26:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-26:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-28 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: rgba(112,112,112,0.4); + width: 100%; +} + +.emotion-30 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-30:focus { + outline: none; +} + +.emotion-30:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-30>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-30>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-32 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: default; +} + +.emotion-42 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #454545; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-42:before, +.emotion-42:after { + content: ''; + position: absolute; +} + +.emotion-42:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-42 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-42:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-42:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-44 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + width: 100%; +} + +.emotion-62 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 8px; + padding-inline-start: 8px; +} + +.emotion-62:focus { + outline: none; +} + +.emotion-62:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-62>div:first-of-type { + position: relative; + -webkit-padding-start: 8px; + padding-inline-start: 8px; + -webkit-margin-start: -8px; + margin-inline-start: -8px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-62>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-66 { + display: inline-block; + vertical-align: middle; + margin-right: 8px; + color: #454545; + border-radius: 0; + width: 24px; + height: 24px; +} + +.emotion-80 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-98 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: none; + border: 0; + border-radius: 8px; + color: #3942B0; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + font-family: "Work Sans",Helvetica,sans-serif; + font-size: 12px; + font-weight: 500; + height: 28px; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + letter-spacing: .32px; + line-height: 16px; + margin: 0; + min-width: 0; + overflow: hidden; + padding: 4px 8px; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + text-transform: uppercase; + touch-action: manipulation; + -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + vertical-align: middle; + white-space: nowrap; + width: auto; +} + +.emotion-98:not(:disabled):focus { + outline: 2px solid #0074B7; + outline-offset: 2px; + z-index: 1; +} + +.emotion-98:not(:disabled):hover, +.emotion-98:not(:disabled):focus { + background: #E8E9F8; + color: #3942B0; +} + +.emotion-98:not(:disabled):active { + background: #BABDE9; + color: #292F7C; +} + +.emotion-98:not(:disabled):active:after { + opacity: 0.4; + -webkit-transform: translate(-50%, -50%) scale(0); + -moz-transform: translate(-50%, -50%) scale(0); + -ms-transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-98 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-100 { + visibility: visible; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +
+
+ +
+
+
    +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
  • +
    +
    +
    + + +
    +
    +
    +
    • + +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
+ +
+
+
+
+ +`; diff --git a/packages/react-magma-dom/src/components/TreeView/useTreeView.ts b/packages/react-magma-dom/src/components/TreeView/useTreeView.ts index 11b221ea8..413a21b90 100644 --- a/packages/react-magma-dom/src/components/TreeView/useTreeView.ts +++ b/packages/react-magma-dom/src/components/TreeView/useTreeView.ts @@ -208,7 +208,7 @@ export function useTreeView(props: UseTreeViewProps) { }) ); prevPreselectedItemsRef.current = preselectedItems; - }, [preselectedItems, checkParents, checkChildren, selectable, isDisabled]); + }, [preselectedItems, checkParents, checkChildren, selectable, isDisabled, children]); React.useEffect(() => { if (initializationRef.current) { From d0c42e62eb45c5a9661f016880b16595960e5edf Mon Sep 17 00:00:00 2001 From: Laura Silva Date: Mon, 9 Dec 2024 15:38:11 -0500 Subject: [PATCH 2/7] support showMore --- .../components/TreeView/TreeView.stories.tsx | 266 +- .../src/components/TreeView/TreeView.test.js | 301 +- .../__snapshots__/TreeView.test.js.snap | 7263 +++++++++++++++++ .../src/components/TreeView/useTreeView.ts | 36 +- 4 files changed, 7793 insertions(+), 73 deletions(-) diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx index d890340c9..71e4e6ede 100644 --- a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx +++ b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx @@ -28,7 +28,7 @@ import { Accordion, AccordionItem, AccordionButton, - AccordionPanel + AccordionPanel, } from '../..'; import { ButtonSize } from '../Button'; import { FlexAlignContent, FlexAlignItems } from '../Flex'; @@ -1062,14 +1062,20 @@ export const InvalidTreeItems = (args: Partial) => { - + This is a tag as a child of Grandchild 1 - + <>Invalid child @@ -1084,7 +1090,10 @@ export const InvalidTreeItems = (args: Partial) => { {null} - + {undefined} @@ -1115,6 +1124,7 @@ const renderTreeItemsRecursively = (terms, depth) => { return ( { id, isDisabled, onSelectedItemChange, + apiRef, ...rest } = props; const [isShowAll, setIsShowAll] = React.useState(false); const isSingeTaxonomyOfSuchType = trees.length === 1; const customIndex = Number(id) || 0; + const getTermsForRender = terms => { if (isShowAll || terms.length <= 5) return terms; return terms.slice(0, 5); @@ -1152,24 +1164,26 @@ const AccordionSectionWithTreeView = props => { if (isShowAll || trees.length <= 5) return trees; return trees.slice(0, 5); }; + const toggleShowAll = () => { setIsShowAll(prev => !prev); + if (!isShowAll) { + apiRef.current?.showMore(); + } }; + const renderTrees = () => { return ( <> {getTreesForRender().map(tree => { - // RM issue with types. Should be "TreeItemSelectedInterface" instead of "Object". - // eslint-disable-next-line @typescript-eslint/ban-types - const handleSelectedItemChange = selectedItems => { - // onSelectedItemChange(selectedItems, tree.groupName, tree.id); - }; return ( {renderTreeItemsRecursively( isSingeTaxonomyOfSuchType @@ -1185,6 +1199,7 @@ const AccordionSectionWithTreeView = props => { }; const isShowAllButtonVisible = trees.length === 1 ? trees[0].items.length > 5 : trees.length > 5; + return ( {title} @@ -1196,7 +1211,7 @@ const AccordionSectionWithTreeView = props => { onClick={toggleShowAll} size={ButtonSize.small} variant={ButtonVariant.link} - testId='showAllBtn' + testId="showAllBtn" > {isShowAll ? 'Show Less' : 'Show All'} @@ -1206,61 +1221,182 @@ const AccordionSectionWithTreeView = props => { ); }; +const propsFlatTree = { + title: 'Chapter/Subchapter', + trees: [ + { + id: 'tree-id', + groupName: 'book-table-of-contents', + items: [ + { + id: 'item-id-1', + title: 'item-title-1', + children: [], + }, + { + id: 'item-id-2', + title: 'item-title-2', + children: [], + }, + { + id: 'item-id-3', + title: 'item-title-3', + children: [], + }, + { + id: 'item-id-4', + title: 'item-title-4', + children: [ + { + id: 'item-id-4.1', + title: 'item-title-4.1', + children: [], + }, + ], + }, + { + id: 'item-id-5', + title: 'item-title-5', + children: [], + }, + { + id: 'item-id-6', + title: 'item-title-6', + children: [], + }, + ], + preselectedItems: [ + { + itemId: 'item-id-2', + checkedStatus: IndeterminateCheckboxStatus.checked, + }, + ], + }, + ], + keyForRerenderOfTagsTree: true, +}; -export const TreeWithShowAll = args => { - const props = { - title: 'Chapter/Subchapter', - trees: [ - { - id: 'tree-id', - groupName: 'book-table-of-contents', - items: [ - { - id: 'item-id-1', - title: 'item-title-1', - children: [], - }, - { - id: 'item-id-2', - title: 'item-title-2', - children: [], - }, - { - id: 'item-id-3', - title: 'item-title-3', - children: [], - }, - { - id: 'item-id-4', - title: 'item-title-4', - children: [ - { - id: 'item-id-4.1', - title: 'item-title-4.1', - children: [], - }, - ], - }, - { - id: 'item-id-5', - title: 'item-title-5', - children: [], - }, - { - id: 'item-id-6', - title: 'item-title-6', - children: [], - }, - ], - preselectedItems: [], - }, - ], - keyForRerenderOfTagsTree: true, - }; +const propsTreeWithParent = { + title: 'Chapter/Subchapter', + trees: [ + { + id: 'tree-id', + groupName: 'book-table-of-contents', + items: [ + { + id: 'item-id-1', + title: 'item-title-1', + children: [], + }, + { + id: 'item-id-2', + title: 'item-title-2', + children: [], + }, + { + id: 'item-id-3', + title: 'item-title-3', + children: [], + }, + { + id: 'item-id-4', + title: 'item-title-4', + children: [], + }, + { + id: 'item-id-5', + title: 'item-title-5', + children: [ + { + id: 'item-id-6', + title: 'item-title-6', + children: [], + }, + ], + }, + { + id: 'item-id-7', + title: 'item-title-7', + children: [ + { + id: 'item-id-8', + title: 'item-title-8', + children: [], + }, + { + id: 'item-id-9', + title: 'item-title-9', + children: [ + { + id: 'item-id-10', + title: 'item-title-10', + children: [], + }, + ], + }, + ], + }, + ], + preselectedItems: [ + { + itemId: 'item-id-2', + checkedStatus: IndeterminateCheckboxStatus.checked, + }, + ], + }, + ], + keyForRerenderOfTagsTree: true, +}; + +export const TreeWithShowAll = (props) => { + // const tree = propsFlatTree; + const tree = propsTreeWithParent; + + const [selectedItems, setSelectedItems] = React.useState< + TreeItemSelectedInterface[] + >(tree?.trees[0].preselectedItems); + const apiRef = React.useRef(); + + const { selected, indeterminate } = createControlledTags( + selectedItems, + apiRef?.current + ); + const total = selectedItems?.length ?? 0; + + function onSelection(items: TreeItemSelectedInterface[]) { + setSelectedItems(items); + props.onSelectedItemChange(items); + } return ( - - - + <> + + + + +

{total} total

+

Selected: {selected}

+

Indeterminate: {indeterminate}

+ ); -}; \ No newline at end of file +}; + +TreeWithShowAll.parameters = { + controls: { + exclude: [ + 'isInverse', + 'initialExpandedItems', + 'ariaLabelledBy', + 'ariaLabel', + 'testId', + 'selectable', + 'checkChildren', + 'checkParents', + ], + }, +}; diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.test.js b/packages/react-magma-dom/src/components/TreeView/TreeView.test.js index 985f8f2bd..055ed6d78 100644 --- a/packages/react-magma-dom/src/components/TreeView/TreeView.test.js +++ b/packages/react-magma-dom/src/components/TreeView/TreeView.test.js @@ -2599,9 +2599,142 @@ describe('TreeView', () => { }); describe('tree with hidden items', () => { + const propsFlatTree = { + title: 'Chapter/Subchapter', + trees: [ + { + id: 'tree-id', + groupName: 'book-table-of-contents', + items: [ + { + id: 'item-id-1', + title: 'item-title-1', + children: [], + }, + { + id: 'item-id-2', + title: 'item-title-2', + children: [], + }, + { + id: 'item-id-3', + title: 'item-title-3', + children: [], + }, + { + id: 'item-id-4', + title: 'item-title-4', + children: [ + { + id: 'item-id-4.1', + title: 'item-title-4.1', + children: [], + }, + ], + }, + { + id: 'item-id-5', + title: 'item-title-5', + children: [], + }, + { + id: 'item-id-6', + title: 'item-title-6', + children: [], + }, + ], + preselectedItems: [ + { + itemId: 'item-id-2', + checkedStatus: IndeterminateCheckboxStatus.checked, + }, + ], + }, + ], + keyForRerenderOfTagsTree: true, + }; + + const propsTreeWithParent = { + title: 'Chapter/Subchapter', + trees: [ + { + id: 'tree-id', + groupName: 'book-table-of-contents', + items: [ + { + id: 'item-id-1', + title: 'item-title-1', + children: [], + }, + { + id: 'item-id-2', + title: 'item-title-2', + children: [], + }, + { + id: 'item-id-3', + title: 'item-title-3', + children: [], + }, + { + id: 'item-id-4', + title: 'item-title-4', + children: [], + }, + { + id: 'item-id-5', + title: 'item-title-5', + children: [ + { + id: 'item-id-6', + title: 'item-title-6', + children: [], + }, + ], + }, + { + id: 'item-id-7', + title: 'item-title-7', + children: [ + { + id: 'item-id-8', + title: 'item-title-8', + children: [], + }, + { + id: 'item-id-9', + title: 'item-title-9', + children: [ + { + id: 'item-id-10', + title: 'item-title-10', + children: [], + }, + ], + }, + ], + }, + ], + preselectedItems: [ + { + itemId: 'item-id-2', + checkedStatus: IndeterminateCheckboxStatus.checked, + }, + ], + }, + ], + keyForRerenderOfTagsTree: true, + }; + it('renders tree with some items, and clicking show all displays the rest of the tree', () => { const onSelectedItemChange = jest.fn(); - const { asFragment, getByLabelText, getByTestId } = render(); + const { asFragment, getByLabelText, getByTestId } = render( + + ); expect(asFragment()).toMatchSnapshot(); @@ -2614,7 +2747,167 @@ describe('TreeView', () => { userEvent.click(getByTestId('showAllBtn')); expect(getByLabelText('item-title-6')).toBeInTheDocument(); userEvent.click(getByLabelText('item-title-6')); - // expect(onSelectedItemChange).toHaveBeenCalledTimes(1); - }) - }) + expect(getByTestId('item-id-6')).toHaveAttribute('aria-checked', 'true'); + expect(onSelectedItemChange).toHaveBeenCalledTimes(1); + }); + + it('renders tree with some items preselected, clicking show all displays the rest of the tree and preselected items remain selected', () => { + const onSelectedItemChange = jest.fn(); + const { asFragment, getByLabelText, getByTestId } = render( + + ); + + expect(asFragment()).toMatchSnapshot(); + + expect(getByLabelText('item-title-1')).toBeInTheDocument(); + expect(getByLabelText('item-title-2')).toBeInTheDocument(); + expect(getByLabelText('item-title-3')).toBeInTheDocument(); + expect(getByLabelText('item-title-4')).toBeInTheDocument(); + expect(getByLabelText('item-title-5')).toBeInTheDocument(); + + expect(getByTestId('item-id-2')).toHaveAttribute('aria-checked', 'true'); + userEvent.click(getByTestId('showAllBtn')); + expect(getByLabelText('item-title-6')).toBeInTheDocument(); + userEvent.click(getByLabelText('item-title-6')); + expect(getByTestId('item-id-2')).toHaveAttribute('aria-checked', 'true'); + expect(onSelectedItemChange).toHaveBeenCalledWith([ + { + itemId: 'item-id-2', + checkedStatus: IndeterminateCheckboxStatus.checked, + }, + { + itemId: 'item-id-6', + checkedStatus: IndeterminateCheckboxStatus.checked, + }, + ]); + }); + + it('renders tree with some items preselected, deselecting preselected items, clicking show all displays the rest of the tree and preselected items remain deselected', () => { + const onSelectedItemChange = jest.fn(); + const { asFragment, getByLabelText, getByTestId } = render( + + ); + + expect(asFragment()).toMatchSnapshot(); + + expect(getByLabelText('item-title-1')).toBeInTheDocument(); + expect(getByLabelText('item-title-2')).toBeInTheDocument(); + expect(getByLabelText('item-title-3')).toBeInTheDocument(); + expect(getByLabelText('item-title-4')).toBeInTheDocument(); + expect(getByLabelText('item-title-5')).toBeInTheDocument(); + + expect(getByTestId('item-id-2')).toHaveAttribute('aria-checked', 'true'); + userEvent.click(getByLabelText('item-title-2')); + userEvent.click(getByTestId('showAllBtn')); + expect(getByLabelText('item-title-6')).toBeInTheDocument(); + userEvent.click(getByLabelText('item-title-6')); + expect(getByTestId('item-id-2')).toHaveAttribute('aria-checked', 'false'); + expect(onSelectedItemChange).toHaveBeenCalledWith([ + { + itemId: 'item-id-6', + checkedStatus: IndeterminateCheckboxStatus.checked, + }, + ]); + }); + + it('clicking show all displays the rest of the tree, preselected items remain selected, and clicking show less maintains selected items', () => { + const onSelectedItemChange = jest.fn(); + const { asFragment, getByLabelText, getByTestId } = render( + + ); + + expect(asFragment()).toMatchSnapshot(); + + expect(getByLabelText('item-title-1')).toBeInTheDocument(); + expect(getByLabelText('item-title-2')).toBeInTheDocument(); + expect(getByLabelText('item-title-3')).toBeInTheDocument(); + expect(getByLabelText('item-title-4')).toBeInTheDocument(); + expect(getByLabelText('item-title-5')).toBeInTheDocument(); + + expect(getByTestId('item-id-2')).toHaveAttribute('aria-checked', 'true'); + userEvent.click(getByTestId('showAllBtn')); + expect(getByLabelText('item-title-6')).toBeInTheDocument(); + userEvent.click(getByLabelText('item-title-6')); + expect(getByTestId('item-id-2')).toHaveAttribute('aria-checked', 'true'); + userEvent.click(getByTestId('showAllBtn')); + expect(onSelectedItemChange).toHaveBeenCalledTimes(2); + expect(onSelectedItemChange).toHaveBeenCalledWith([ + { + itemId: 'item-id-2', + checkedStatus: IndeterminateCheckboxStatus.checked, + }, + { + itemId: 'item-id-6', + checkedStatus: IndeterminateCheckboxStatus.checked, + }, + ]); + }); + + it('can uncheck all items by clicking on the parent (including hidden one)', () => { + const onSelectedItemChange = jest.fn(); + const { asFragment, getByLabelText, getByTestId } = render( + + ); + + expect(asFragment()).toMatchSnapshot(); + + expect(getByLabelText('item-title-1')).toBeInTheDocument(); + expect(getByLabelText('item-title-2')).toBeInTheDocument(); + expect(getByLabelText('item-title-3')).toBeInTheDocument(); + expect(getByLabelText('item-title-4')).toBeInTheDocument(); + expect(getByLabelText('item-title-5')).toBeInTheDocument(); + + userEvent.click(getByTestId('showAllBtn')); + expect(getByLabelText('item-title-7')).toBeInTheDocument(); + + userEvent.click(getByLabelText('item-title-7')); + userEvent.click(getByTestId('item-id-7-expand')); + expect(getByTestId('item-id-8')).toHaveAttribute('aria-checked', 'true'); + expect(getByTestId('item-id-9')).toHaveAttribute('aria-checked', 'true'); + + userEvent.click(getByLabelText('item-title-7')); + expect(getByTestId('item-id-8')).toHaveAttribute('aria-checked', 'false'); + expect(getByTestId('item-id-9')).toHaveAttribute('aria-checked', 'false'); + + userEvent.click(getByTestId('item-id-9-expand')); + userEvent.click(getByLabelText('item-title-10')); + expect(getByTestId('item-id-10')).toHaveAttribute('aria-checked', 'true'); + expect(getByTestId('item-id-9')).toHaveAttribute('aria-checked', 'true'); + expect(getByTestId('item-id-7')).toHaveAttribute('aria-checked', 'mixed'); + + userEvent.click(getByTestId('showAllBtn')); // show less + expect(onSelectedItemChange).toHaveBeenCalledTimes(3); + }); + }); }); diff --git a/packages/react-magma-dom/src/components/TreeView/__snapshots__/TreeView.test.js.snap b/packages/react-magma-dom/src/components/TreeView/__snapshots__/TreeView.test.js.snap index 27cf20066..c47661e4f 100644 --- a/packages/react-magma-dom/src/components/TreeView/__snapshots__/TreeView.test.js.snap +++ b/packages/react-magma-dom/src/components/TreeView/__snapshots__/TreeView.test.js.snap @@ -1,5 +1,7138 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`TreeView tree with hidden items can uncheck all items by clicking on the parent (including hidden one) 1`] = ` + + .emotion-0 { + background: transparent; + border-bottom: 1px solid #D4D4D4; + color: #707070; + font-family: "Work Sans",Helvetica,sans-serif; +} + +.emotion-2 h1, +.emotion-2 h2, +.emotion-2 h3, +.emotion-2 h4, +.emotion-2 h5, +.emotion-2 h6 { + background: none; + color: inherit; + font: inherit; + line-height: inherit; + margin: 0; + padding: 0; +} + +.emotion-4 { + background: transparent; + border: 0; + border-top: 1px solid #D4D4D4; + color: #454545; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + font-weight: 500; + padding: 12px 16px; + text-align: left; + width: 100%; +} + +.emotion-4:focus { + outline: 2px solid #0074B7; + outline-offset: 0; +} + +.emotion-4.emotion-4[disabled] { + color: rgba(112,112,112,0.6); + cursor: not-allowed; +} + +.emotion-4.emotion-4[disabled] svg { + color: rgba(112,112,112,0.6); +} + +.emotion-4 svg { + color: #707070; +} + +.emotion-6 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.emotion-8 { + display: block; + height: 12px; + min-height: 12px; + min-width: 12px; + width: 12px; +} + +.emotion-10 { + background: transparent; + color: #454545; + font-family: "Work Sans",Helvetica,sans-serif; + padding: 8px 16px 12px; +} + +.emotion-12 { + padding: 0; + margin: 0; + color: #707070; +} + +.emotion-12 ul { + padding: 0; + margin: 0; +} + +.emotion-12 ul li { + margin: 0; +} + +.emotion-14 { + color: #454545; + list-style-type: none; + cursor: not-allowed; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-14:focus { + outline: none; +} + +.emotion-14:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-14>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-16 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: not-allowed; +} + +.emotion-18 { + margin-right: 8px; + vertical-align: middle; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.emotion-20 { + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + position: relative; +} + +.emotion-22 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-24 { + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + margin: 0; + padding: 8px 0; +} + +.emotion-26 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #D4D4D4; + cursor: not-allowed; + margin: 0 8px 0 0; +} + +.emotion-26:before, +.emotion-26:after { + content: ''; + position: absolute; +} + +.emotion-26:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-26 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-26:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-26:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-28 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: rgba(112,112,112,0.4); + width: 100%; +} + +.emotion-30 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-30:focus { + outline: none; +} + +.emotion-30:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-30>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-30>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-32 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: default; +} + +.emotion-42 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #454545; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-42:before, +.emotion-42:after { + content: ''; + position: absolute; +} + +.emotion-42:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-42 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-42:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-42:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-44 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + width: 100%; +} + +.emotion-78 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 8px; + padding-inline-start: 8px; +} + +.emotion-78:focus { + outline: none; +} + +.emotion-78:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-78>div:first-of-type { + position: relative; + -webkit-padding-start: 8px; + padding-inline-start: 8px; + -webkit-margin-start: -8px; + margin-inline-start: -8px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-78>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-82 { + display: inline-block; + vertical-align: middle; + margin-right: 8px; + color: #454545; + border-radius: 0; + width: 24px; + height: 24px; +} + +.emotion-96 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-98 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: none; + border: 0; + border-radius: 8px; + color: #3942B0; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + font-family: "Work Sans",Helvetica,sans-serif; + font-size: 12px; + font-weight: 500; + height: 28px; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + letter-spacing: .32px; + line-height: 16px; + margin: 0; + min-width: 0; + overflow: hidden; + padding: 4px 8px; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + text-transform: uppercase; + touch-action: manipulation; + -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + vertical-align: middle; + white-space: nowrap; + width: auto; +} + +.emotion-98:not(:disabled):focus { + outline: 2px solid #0074B7; + outline-offset: 2px; + z-index: 1; +} + +.emotion-98:not(:disabled):hover, +.emotion-98:not(:disabled):focus { + background: #E8E9F8; + color: #3942B0; +} + +.emotion-98:not(:disabled):active { + background: #BABDE9; + color: #292F7C; +} + +.emotion-98:not(:disabled):active:after { + opacity: 0.4; + -webkit-transform: translate(-50%, -50%) scale(0); + -moz-transform: translate(-50%, -50%) scale(0); + -ms-transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-98 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-100 { + visibility: visible; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-0 { + background: transparent; + border-bottom: 1px solid #D4D4D4; + color: #707070; + font-family: "Work Sans",Helvetica,sans-serif; +} + +.emotion-2 h1, +.emotion-2 h2, +.emotion-2 h3, +.emotion-2 h4, +.emotion-2 h5, +.emotion-2 h6 { + background: none; + color: inherit; + font: inherit; + line-height: inherit; + margin: 0; + padding: 0; +} + +.emotion-4 { + background: transparent; + border: 0; + border-top: 1px solid #D4D4D4; + color: #454545; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + font-weight: 500; + padding: 12px 16px; + text-align: left; + width: 100%; +} + +.emotion-4:focus { + outline: 2px solid #0074B7; + outline-offset: 0; +} + +.emotion-4.emotion-4[disabled] { + color: rgba(112,112,112,0.6); + cursor: not-allowed; +} + +.emotion-4.emotion-4[disabled] svg { + color: rgba(112,112,112,0.6); +} + +.emotion-4 svg { + color: #707070; +} + +.emotion-6 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.emotion-8 { + display: block; + height: 12px; + min-height: 12px; + min-width: 12px; + width: 12px; +} + +.emotion-10 { + background: transparent; + color: #454545; + font-family: "Work Sans",Helvetica,sans-serif; + padding: 8px 16px 12px; +} + +.emotion-12 { + padding: 0; + margin: 0; + color: #707070; +} + +.emotion-12 ul { + padding: 0; + margin: 0; +} + +.emotion-12 ul li { + margin: 0; +} + +.emotion-14 { + color: #454545; + list-style-type: none; + cursor: not-allowed; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-14:focus { + outline: none; +} + +.emotion-14:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-14>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-16 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: not-allowed; +} + +.emotion-18 { + margin-right: 8px; + vertical-align: middle; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.emotion-20 { + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + position: relative; +} + +.emotion-22 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-24 { + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + margin: 0; + padding: 8px 0; +} + +.emotion-26 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #D4D4D4; + cursor: not-allowed; + margin: 0 8px 0 0; +} + +.emotion-26:before, +.emotion-26:after { + content: ''; + position: absolute; +} + +.emotion-26:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-26 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-26:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-26:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-28 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: rgba(112,112,112,0.4); + width: 100%; +} + +.emotion-30 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-30:focus { + outline: none; +} + +.emotion-30:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-30>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-30>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-32 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: default; +} + +.emotion-42 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #454545; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-42:before, +.emotion-42:after { + content: ''; + position: absolute; +} + +.emotion-42:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-42 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-42:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-42:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-44 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + width: 100%; +} + +.emotion-78 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 8px; + padding-inline-start: 8px; +} + +.emotion-78:focus { + outline: none; +} + +.emotion-78:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-78>div:first-of-type { + position: relative; + -webkit-padding-start: 8px; + padding-inline-start: 8px; + -webkit-margin-start: -8px; + margin-inline-start: -8px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-78>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-82 { + display: inline-block; + vertical-align: middle; + margin-right: 8px; + color: #454545; + border-radius: 0; + width: 24px; + height: 24px; +} + +.emotion-96 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-98 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: none; + border: 0; + border-radius: 8px; + color: #3942B0; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + font-family: "Work Sans",Helvetica,sans-serif; + font-size: 12px; + font-weight: 500; + height: 28px; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + letter-spacing: .32px; + line-height: 16px; + margin: 0; + min-width: 0; + overflow: hidden; + padding: 4px 8px; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + text-transform: uppercase; + touch-action: manipulation; + -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + vertical-align: middle; + white-space: nowrap; + width: auto; +} + +.emotion-98:not(:disabled):focus { + outline: 2px solid #0074B7; + outline-offset: 2px; + z-index: 1; +} + +.emotion-98:not(:disabled):hover, +.emotion-98:not(:disabled):focus { + background: #E8E9F8; + color: #3942B0; +} + +.emotion-98:not(:disabled):active { + background: #BABDE9; + color: #292F7C; +} + +.emotion-98:not(:disabled):active:after { + opacity: 0.4; + -webkit-transform: translate(-50%, -50%) scale(0); + -moz-transform: translate(-50%, -50%) scale(0); + -ms-transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-98 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-100 { + visibility: visible; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +
+
+ +
+
+
    +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
  • +
    +
    +
    + + +
    +
    +
    +
    • + +
+ +
+
+
+
+

+ 1 total +

+ .emotion-0 { + border: 0; + border-radius: 16px; + background: #3942B0; + color: #FFFFFF; + font-family: "Work Sans",Helvetica,sans-serif; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: space-around; + -ms-flex-pack: space-around; + -webkit-justify-content: space-around; + justify-content: space-around; + font-size: 12px; + font-weight: 500; + letter-spacing: .32px; + min-width: 48px; + padding: 0 4px; + cursor: pointer; +} + +.emotion-0 svg:first-of-type { + opacity: inherit; + height: 16px; + width: 16px; +} + +.emotion-0 svg:last-child { + opacity: 75%; + width: 16px; +} + +.emotion-0:focus { + outline-offset: 2px; + outline: 2px solid #0074B7; +} + +.emotion-2 { + padding: 0 4px; +} + +.emotion-0 { + border: 0; + border-radius: 16px; + background: #3942B0; + color: #FFFFFF; + font-family: "Work Sans",Helvetica,sans-serif; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: space-around; + -ms-flex-pack: space-around; + -webkit-justify-content: space-around; + justify-content: space-around; + font-size: 12px; + font-weight: 500; + letter-spacing: .32px; + min-width: 48px; + padding: 0 4px; + cursor: pointer; +} + +.emotion-0 svg:first-of-type { + opacity: inherit; + height: 16px; + width: 16px; +} + +.emotion-0 svg:last-child { + opacity: 75%; + width: 16px; +} + +.emotion-0:focus { + outline-offset: 2px; + outline: 2px solid #0074B7; +} + +.emotion-2 { + padding: 0 4px; +} + +

+ Selected: + +

+

+ Indeterminate: +

+ +`; + +exports[`TreeView tree with hidden items clicking show all displays the rest of the tree, preselected items remain selected, and clicking show less maintains selected items 1`] = ` + + .emotion-0 { + background: transparent; + border-bottom: 1px solid #D4D4D4; + color: #707070; + font-family: "Work Sans",Helvetica,sans-serif; +} + +.emotion-2 h1, +.emotion-2 h2, +.emotion-2 h3, +.emotion-2 h4, +.emotion-2 h5, +.emotion-2 h6 { + background: none; + color: inherit; + font: inherit; + line-height: inherit; + margin: 0; + padding: 0; +} + +.emotion-4 { + background: transparent; + border: 0; + border-top: 1px solid #D4D4D4; + color: #454545; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + font-weight: 500; + padding: 12px 16px; + text-align: left; + width: 100%; +} + +.emotion-4:focus { + outline: 2px solid #0074B7; + outline-offset: 0; +} + +.emotion-4.emotion-4[disabled] { + color: rgba(112,112,112,0.6); + cursor: not-allowed; +} + +.emotion-4.emotion-4[disabled] svg { + color: rgba(112,112,112,0.6); +} + +.emotion-4 svg { + color: #707070; +} + +.emotion-6 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.emotion-8 { + display: block; + height: 12px; + min-height: 12px; + min-width: 12px; + width: 12px; +} + +.emotion-10 { + background: transparent; + color: #454545; + font-family: "Work Sans",Helvetica,sans-serif; + padding: 8px 16px 12px; +} + +.emotion-12 { + padding: 0; + margin: 0; + color: #707070; +} + +.emotion-12 ul { + padding: 0; + margin: 0; +} + +.emotion-12 ul li { + margin: 0; +} + +.emotion-14 { + color: #454545; + list-style-type: none; + cursor: not-allowed; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-14:focus { + outline: none; +} + +.emotion-14:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-14>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-16 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: not-allowed; +} + +.emotion-18 { + margin-right: 8px; + vertical-align: middle; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.emotion-20 { + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + position: relative; +} + +.emotion-22 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-24 { + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + margin: 0; + padding: 8px 0; +} + +.emotion-26 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #D4D4D4; + cursor: not-allowed; + margin: 0 8px 0 0; +} + +.emotion-26:before, +.emotion-26:after { + content: ''; + position: absolute; +} + +.emotion-26:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-26 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-26:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-26:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-28 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: rgba(112,112,112,0.4); + width: 100%; +} + +.emotion-30 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-30:focus { + outline: none; +} + +.emotion-30:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-30>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-30>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-32 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: default; +} + +.emotion-42 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #3942B0; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-42:before, +.emotion-42:after { + content: ''; + position: absolute; +} + +.emotion-42:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-42 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-42:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-42:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-44 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + width: 100%; +} + +.emotion-58 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #454545; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-58:before, +.emotion-58:after { + content: ''; + position: absolute; +} + +.emotion-58:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-58 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-58:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-58:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-62 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 8px; + padding-inline-start: 8px; +} + +.emotion-62:focus { + outline: none; +} + +.emotion-62:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-62>div:first-of-type { + position: relative; + -webkit-padding-start: 8px; + padding-inline-start: 8px; + -webkit-margin-start: -8px; + margin-inline-start: -8px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-62>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-66 { + display: inline-block; + vertical-align: middle; + margin-right: 8px; + color: #454545; + border-radius: 0; + width: 24px; + height: 24px; +} + +.emotion-80 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-98 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: none; + border: 0; + border-radius: 8px; + color: #3942B0; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + font-family: "Work Sans",Helvetica,sans-serif; + font-size: 12px; + font-weight: 500; + height: 28px; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + letter-spacing: .32px; + line-height: 16px; + margin: 0; + min-width: 0; + overflow: hidden; + padding: 4px 8px; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + text-transform: uppercase; + touch-action: manipulation; + -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + vertical-align: middle; + white-space: nowrap; + width: auto; +} + +.emotion-98:not(:disabled):focus { + outline: 2px solid #0074B7; + outline-offset: 2px; + z-index: 1; +} + +.emotion-98:not(:disabled):hover, +.emotion-98:not(:disabled):focus { + background: #E8E9F8; + color: #3942B0; +} + +.emotion-98:not(:disabled):active { + background: #BABDE9; + color: #292F7C; +} + +.emotion-98:not(:disabled):active:after { + opacity: 0.4; + -webkit-transform: translate(-50%, -50%) scale(0); + -moz-transform: translate(-50%, -50%) scale(0); + -ms-transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-98 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-100 { + visibility: visible; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-0 { + background: transparent; + border-bottom: 1px solid #D4D4D4; + color: #707070; + font-family: "Work Sans",Helvetica,sans-serif; +} + +.emotion-2 h1, +.emotion-2 h2, +.emotion-2 h3, +.emotion-2 h4, +.emotion-2 h5, +.emotion-2 h6 { + background: none; + color: inherit; + font: inherit; + line-height: inherit; + margin: 0; + padding: 0; +} + +.emotion-4 { + background: transparent; + border: 0; + border-top: 1px solid #D4D4D4; + color: #454545; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + font-weight: 500; + padding: 12px 16px; + text-align: left; + width: 100%; +} + +.emotion-4:focus { + outline: 2px solid #0074B7; + outline-offset: 0; +} + +.emotion-4.emotion-4[disabled] { + color: rgba(112,112,112,0.6); + cursor: not-allowed; +} + +.emotion-4.emotion-4[disabled] svg { + color: rgba(112,112,112,0.6); +} + +.emotion-4 svg { + color: #707070; +} + +.emotion-6 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.emotion-8 { + display: block; + height: 12px; + min-height: 12px; + min-width: 12px; + width: 12px; +} + +.emotion-10 { + background: transparent; + color: #454545; + font-family: "Work Sans",Helvetica,sans-serif; + padding: 8px 16px 12px; +} + +.emotion-12 { + padding: 0; + margin: 0; + color: #707070; +} + +.emotion-12 ul { + padding: 0; + margin: 0; +} + +.emotion-12 ul li { + margin: 0; +} + +.emotion-14 { + color: #454545; + list-style-type: none; + cursor: not-allowed; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-14:focus { + outline: none; +} + +.emotion-14:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-14>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-16 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: not-allowed; +} + +.emotion-18 { + margin-right: 8px; + vertical-align: middle; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.emotion-20 { + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + position: relative; +} + +.emotion-22 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-24 { + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + margin: 0; + padding: 8px 0; +} + +.emotion-26 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #D4D4D4; + cursor: not-allowed; + margin: 0 8px 0 0; +} + +.emotion-26:before, +.emotion-26:after { + content: ''; + position: absolute; +} + +.emotion-26:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-26 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-26:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-26:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-28 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: rgba(112,112,112,0.4); + width: 100%; +} + +.emotion-30 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-30:focus { + outline: none; +} + +.emotion-30:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-30>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-30>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-32 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: default; +} + +.emotion-42 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #3942B0; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-42:before, +.emotion-42:after { + content: ''; + position: absolute; +} + +.emotion-42:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-42 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-42:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-42:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-44 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + width: 100%; +} + +.emotion-58 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #454545; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-58:before, +.emotion-58:after { + content: ''; + position: absolute; +} + +.emotion-58:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-58 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-58:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-58:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-62 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 8px; + padding-inline-start: 8px; +} + +.emotion-62:focus { + outline: none; +} + +.emotion-62:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-62>div:first-of-type { + position: relative; + -webkit-padding-start: 8px; + padding-inline-start: 8px; + -webkit-margin-start: -8px; + margin-inline-start: -8px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-62>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-66 { + display: inline-block; + vertical-align: middle; + margin-right: 8px; + color: #454545; + border-radius: 0; + width: 24px; + height: 24px; +} + +.emotion-80 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-98 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: none; + border: 0; + border-radius: 8px; + color: #3942B0; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + font-family: "Work Sans",Helvetica,sans-serif; + font-size: 12px; + font-weight: 500; + height: 28px; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + letter-spacing: .32px; + line-height: 16px; + margin: 0; + min-width: 0; + overflow: hidden; + padding: 4px 8px; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + text-transform: uppercase; + touch-action: manipulation; + -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + vertical-align: middle; + white-space: nowrap; + width: auto; +} + +.emotion-98:not(:disabled):focus { + outline: 2px solid #0074B7; + outline-offset: 2px; + z-index: 1; +} + +.emotion-98:not(:disabled):hover, +.emotion-98:not(:disabled):focus { + background: #E8E9F8; + color: #3942B0; +} + +.emotion-98:not(:disabled):active { + background: #BABDE9; + color: #292F7C; +} + +.emotion-98:not(:disabled):active:after { + opacity: 0.4; + -webkit-transform: translate(-50%, -50%) scale(0); + -moz-transform: translate(-50%, -50%) scale(0); + -ms-transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-98 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-100 { + visibility: visible; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +
+
+ +
+
+
    +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
  • +
    +
    +
    + + +
    +
    +
    +
    • + +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
+ +
+
+
+
+

+ 1 total +

+ .emotion-0 { + border: 0; + border-radius: 16px; + background: #3942B0; + color: #FFFFFF; + font-family: "Work Sans",Helvetica,sans-serif; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: space-around; + -ms-flex-pack: space-around; + -webkit-justify-content: space-around; + justify-content: space-around; + font-size: 12px; + font-weight: 500; + letter-spacing: .32px; + min-width: 48px; + padding: 0 4px; + cursor: pointer; +} + +.emotion-0 svg:first-of-type { + opacity: inherit; + height: 16px; + width: 16px; +} + +.emotion-0 svg:last-child { + opacity: 75%; + width: 16px; +} + +.emotion-0:focus { + outline-offset: 2px; + outline: 2px solid #0074B7; +} + +.emotion-2 { + padding: 0 4px; +} + +.emotion-0 { + border: 0; + border-radius: 16px; + background: #3942B0; + color: #FFFFFF; + font-family: "Work Sans",Helvetica,sans-serif; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: space-around; + -ms-flex-pack: space-around; + -webkit-justify-content: space-around; + justify-content: space-around; + font-size: 12px; + font-weight: 500; + letter-spacing: .32px; + min-width: 48px; + padding: 0 4px; + cursor: pointer; +} + +.emotion-0 svg:first-of-type { + opacity: inherit; + height: 16px; + width: 16px; +} + +.emotion-0 svg:last-child { + opacity: 75%; + width: 16px; +} + +.emotion-0:focus { + outline-offset: 2px; + outline: 2px solid #0074B7; +} + +.emotion-2 { + padding: 0 4px; +} + +

+ Selected: + +

+

+ Indeterminate: +

+ +`; + +exports[`TreeView tree with hidden items renders tree with some items preselected, clicking show all displays the rest of the tree and preselected items remain selected 1`] = ` + + .emotion-0 { + background: transparent; + border-bottom: 1px solid #D4D4D4; + color: #707070; + font-family: "Work Sans",Helvetica,sans-serif; +} + +.emotion-2 h1, +.emotion-2 h2, +.emotion-2 h3, +.emotion-2 h4, +.emotion-2 h5, +.emotion-2 h6 { + background: none; + color: inherit; + font: inherit; + line-height: inherit; + margin: 0; + padding: 0; +} + +.emotion-4 { + background: transparent; + border: 0; + border-top: 1px solid #D4D4D4; + color: #454545; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + font-weight: 500; + padding: 12px 16px; + text-align: left; + width: 100%; +} + +.emotion-4:focus { + outline: 2px solid #0074B7; + outline-offset: 0; +} + +.emotion-4.emotion-4[disabled] { + color: rgba(112,112,112,0.6); + cursor: not-allowed; +} + +.emotion-4.emotion-4[disabled] svg { + color: rgba(112,112,112,0.6); +} + +.emotion-4 svg { + color: #707070; +} + +.emotion-6 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.emotion-8 { + display: block; + height: 12px; + min-height: 12px; + min-width: 12px; + width: 12px; +} + +.emotion-10 { + background: transparent; + color: #454545; + font-family: "Work Sans",Helvetica,sans-serif; + padding: 8px 16px 12px; +} + +.emotion-12 { + padding: 0; + margin: 0; + color: #707070; +} + +.emotion-12 ul { + padding: 0; + margin: 0; +} + +.emotion-12 ul li { + margin: 0; +} + +.emotion-14 { + color: #454545; + list-style-type: none; + cursor: not-allowed; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-14:focus { + outline: none; +} + +.emotion-14:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-14>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-16 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: not-allowed; +} + +.emotion-18 { + margin-right: 8px; + vertical-align: middle; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.emotion-20 { + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + position: relative; +} + +.emotion-22 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-24 { + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + margin: 0; + padding: 8px 0; +} + +.emotion-26 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #D4D4D4; + cursor: not-allowed; + margin: 0 8px 0 0; +} + +.emotion-26:before, +.emotion-26:after { + content: ''; + position: absolute; +} + +.emotion-26:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-26 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-26:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-26:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-28 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: rgba(112,112,112,0.4); + width: 100%; +} + +.emotion-30 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-30:focus { + outline: none; +} + +.emotion-30:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-30>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-30>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-32 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: default; +} + +.emotion-42 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #3942B0; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-42:before, +.emotion-42:after { + content: ''; + position: absolute; +} + +.emotion-42:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-42 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-42:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-42:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-44 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + width: 100%; +} + +.emotion-58 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #454545; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-58:before, +.emotion-58:after { + content: ''; + position: absolute; +} + +.emotion-58:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-58 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-58:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-58:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-62 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 8px; + padding-inline-start: 8px; +} + +.emotion-62:focus { + outline: none; +} + +.emotion-62:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-62>div:first-of-type { + position: relative; + -webkit-padding-start: 8px; + padding-inline-start: 8px; + -webkit-margin-start: -8px; + margin-inline-start: -8px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-62>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-66 { + display: inline-block; + vertical-align: middle; + margin-right: 8px; + color: #454545; + border-radius: 0; + width: 24px; + height: 24px; +} + +.emotion-80 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-98 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: none; + border: 0; + border-radius: 8px; + color: #3942B0; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + font-family: "Work Sans",Helvetica,sans-serif; + font-size: 12px; + font-weight: 500; + height: 28px; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + letter-spacing: .32px; + line-height: 16px; + margin: 0; + min-width: 0; + overflow: hidden; + padding: 4px 8px; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + text-transform: uppercase; + touch-action: manipulation; + -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + vertical-align: middle; + white-space: nowrap; + width: auto; +} + +.emotion-98:not(:disabled):focus { + outline: 2px solid #0074B7; + outline-offset: 2px; + z-index: 1; +} + +.emotion-98:not(:disabled):hover, +.emotion-98:not(:disabled):focus { + background: #E8E9F8; + color: #3942B0; +} + +.emotion-98:not(:disabled):active { + background: #BABDE9; + color: #292F7C; +} + +.emotion-98:not(:disabled):active:after { + opacity: 0.4; + -webkit-transform: translate(-50%, -50%) scale(0); + -moz-transform: translate(-50%, -50%) scale(0); + -ms-transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-98 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-100 { + visibility: visible; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-0 { + background: transparent; + border-bottom: 1px solid #D4D4D4; + color: #707070; + font-family: "Work Sans",Helvetica,sans-serif; +} + +.emotion-2 h1, +.emotion-2 h2, +.emotion-2 h3, +.emotion-2 h4, +.emotion-2 h5, +.emotion-2 h6 { + background: none; + color: inherit; + font: inherit; + line-height: inherit; + margin: 0; + padding: 0; +} + +.emotion-4 { + background: transparent; + border: 0; + border-top: 1px solid #D4D4D4; + color: #454545; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + font-weight: 500; + padding: 12px 16px; + text-align: left; + width: 100%; +} + +.emotion-4:focus { + outline: 2px solid #0074B7; + outline-offset: 0; +} + +.emotion-4.emotion-4[disabled] { + color: rgba(112,112,112,0.6); + cursor: not-allowed; +} + +.emotion-4.emotion-4[disabled] svg { + color: rgba(112,112,112,0.6); +} + +.emotion-4 svg { + color: #707070; +} + +.emotion-6 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.emotion-8 { + display: block; + height: 12px; + min-height: 12px; + min-width: 12px; + width: 12px; +} + +.emotion-10 { + background: transparent; + color: #454545; + font-family: "Work Sans",Helvetica,sans-serif; + padding: 8px 16px 12px; +} + +.emotion-12 { + padding: 0; + margin: 0; + color: #707070; +} + +.emotion-12 ul { + padding: 0; + margin: 0; +} + +.emotion-12 ul li { + margin: 0; +} + +.emotion-14 { + color: #454545; + list-style-type: none; + cursor: not-allowed; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-14:focus { + outline: none; +} + +.emotion-14:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-14>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-16 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: not-allowed; +} + +.emotion-18 { + margin-right: 8px; + vertical-align: middle; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.emotion-20 { + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + position: relative; +} + +.emotion-22 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-24 { + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + margin: 0; + padding: 8px 0; +} + +.emotion-26 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #D4D4D4; + cursor: not-allowed; + margin: 0 8px 0 0; +} + +.emotion-26:before, +.emotion-26:after { + content: ''; + position: absolute; +} + +.emotion-26:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-26 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-26:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-26:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-28 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: rgba(112,112,112,0.4); + width: 100%; +} + +.emotion-30 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-30:focus { + outline: none; +} + +.emotion-30:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-30>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-30>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-32 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: default; +} + +.emotion-42 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #3942B0; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-42:before, +.emotion-42:after { + content: ''; + position: absolute; +} + +.emotion-42:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-42 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-42:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-42:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-44 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + width: 100%; +} + +.emotion-58 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #454545; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-58:before, +.emotion-58:after { + content: ''; + position: absolute; +} + +.emotion-58:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-58 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-58:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-58:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-62 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 8px; + padding-inline-start: 8px; +} + +.emotion-62:focus { + outline: none; +} + +.emotion-62:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-62>div:first-of-type { + position: relative; + -webkit-padding-start: 8px; + padding-inline-start: 8px; + -webkit-margin-start: -8px; + margin-inline-start: -8px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-62>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-66 { + display: inline-block; + vertical-align: middle; + margin-right: 8px; + color: #454545; + border-radius: 0; + width: 24px; + height: 24px; +} + +.emotion-80 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-98 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: none; + border: 0; + border-radius: 8px; + color: #3942B0; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + font-family: "Work Sans",Helvetica,sans-serif; + font-size: 12px; + font-weight: 500; + height: 28px; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + letter-spacing: .32px; + line-height: 16px; + margin: 0; + min-width: 0; + overflow: hidden; + padding: 4px 8px; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + text-transform: uppercase; + touch-action: manipulation; + -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + vertical-align: middle; + white-space: nowrap; + width: auto; +} + +.emotion-98:not(:disabled):focus { + outline: 2px solid #0074B7; + outline-offset: 2px; + z-index: 1; +} + +.emotion-98:not(:disabled):hover, +.emotion-98:not(:disabled):focus { + background: #E8E9F8; + color: #3942B0; +} + +.emotion-98:not(:disabled):active { + background: #BABDE9; + color: #292F7C; +} + +.emotion-98:not(:disabled):active:after { + opacity: 0.4; + -webkit-transform: translate(-50%, -50%) scale(0); + -moz-transform: translate(-50%, -50%) scale(0); + -ms-transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-98 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-100 { + visibility: visible; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +
+
+ +
+
+
    +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
  • +
    +
    +
    + + +
    +
    +
    +
    • + +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
+ +
+
+
+
+

+ 1 total +

+ .emotion-0 { + border: 0; + border-radius: 16px; + background: #3942B0; + color: #FFFFFF; + font-family: "Work Sans",Helvetica,sans-serif; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: space-around; + -ms-flex-pack: space-around; + -webkit-justify-content: space-around; + justify-content: space-around; + font-size: 12px; + font-weight: 500; + letter-spacing: .32px; + min-width: 48px; + padding: 0 4px; + cursor: pointer; +} + +.emotion-0 svg:first-of-type { + opacity: inherit; + height: 16px; + width: 16px; +} + +.emotion-0 svg:last-child { + opacity: 75%; + width: 16px; +} + +.emotion-0:focus { + outline-offset: 2px; + outline: 2px solid #0074B7; +} + +.emotion-2 { + padding: 0 4px; +} + +.emotion-0 { + border: 0; + border-radius: 16px; + background: #3942B0; + color: #FFFFFF; + font-family: "Work Sans",Helvetica,sans-serif; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: space-around; + -ms-flex-pack: space-around; + -webkit-justify-content: space-around; + justify-content: space-around; + font-size: 12px; + font-weight: 500; + letter-spacing: .32px; + min-width: 48px; + padding: 0 4px; + cursor: pointer; +} + +.emotion-0 svg:first-of-type { + opacity: inherit; + height: 16px; + width: 16px; +} + +.emotion-0 svg:last-child { + opacity: 75%; + width: 16px; +} + +.emotion-0:focus { + outline-offset: 2px; + outline: 2px solid #0074B7; +} + +.emotion-2 { + padding: 0 4px; +} + +

+ Selected: + +

+

+ Indeterminate: +

+ +`; + +exports[`TreeView tree with hidden items renders tree with some items preselected, deselecting preselected items, clicking show all displays the rest of the tree and preselected items remain deselected 1`] = ` + + .emotion-0 { + background: transparent; + border-bottom: 1px solid #D4D4D4; + color: #707070; + font-family: "Work Sans",Helvetica,sans-serif; +} + +.emotion-2 h1, +.emotion-2 h2, +.emotion-2 h3, +.emotion-2 h4, +.emotion-2 h5, +.emotion-2 h6 { + background: none; + color: inherit; + font: inherit; + line-height: inherit; + margin: 0; + padding: 0; +} + +.emotion-4 { + background: transparent; + border: 0; + border-top: 1px solid #D4D4D4; + color: #454545; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + font-weight: 500; + padding: 12px 16px; + text-align: left; + width: 100%; +} + +.emotion-4:focus { + outline: 2px solid #0074B7; + outline-offset: 0; +} + +.emotion-4.emotion-4[disabled] { + color: rgba(112,112,112,0.6); + cursor: not-allowed; +} + +.emotion-4.emotion-4[disabled] svg { + color: rgba(112,112,112,0.6); +} + +.emotion-4 svg { + color: #707070; +} + +.emotion-6 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.emotion-8 { + display: block; + height: 12px; + min-height: 12px; + min-width: 12px; + width: 12px; +} + +.emotion-10 { + background: transparent; + color: #454545; + font-family: "Work Sans",Helvetica,sans-serif; + padding: 8px 16px 12px; +} + +.emotion-12 { + padding: 0; + margin: 0; + color: #707070; +} + +.emotion-12 ul { + padding: 0; + margin: 0; +} + +.emotion-12 ul li { + margin: 0; +} + +.emotion-14 { + color: #454545; + list-style-type: none; + cursor: not-allowed; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-14:focus { + outline: none; +} + +.emotion-14:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-14>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-16 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: not-allowed; +} + +.emotion-18 { + margin-right: 8px; + vertical-align: middle; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.emotion-20 { + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + position: relative; +} + +.emotion-22 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-24 { + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + margin: 0; + padding: 8px 0; +} + +.emotion-26 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #D4D4D4; + cursor: not-allowed; + margin: 0 8px 0 0; +} + +.emotion-26:before, +.emotion-26:after { + content: ''; + position: absolute; +} + +.emotion-26:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-26 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-26:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-26:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-28 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: rgba(112,112,112,0.4); + width: 100%; +} + +.emotion-30 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-30:focus { + outline: none; +} + +.emotion-30:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-30>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-30>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-32 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: default; +} + +.emotion-42 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #3942B0; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-42:before, +.emotion-42:after { + content: ''; + position: absolute; +} + +.emotion-42:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-42 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-42:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-42:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-44 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + width: 100%; +} + +.emotion-58 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #454545; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-58:before, +.emotion-58:after { + content: ''; + position: absolute; +} + +.emotion-58:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-58 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-58:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-58:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-62 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 8px; + padding-inline-start: 8px; +} + +.emotion-62:focus { + outline: none; +} + +.emotion-62:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-62>div:first-of-type { + position: relative; + -webkit-padding-start: 8px; + padding-inline-start: 8px; + -webkit-margin-start: -8px; + margin-inline-start: -8px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-62>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-66 { + display: inline-block; + vertical-align: middle; + margin-right: 8px; + color: #454545; + border-radius: 0; + width: 24px; + height: 24px; +} + +.emotion-80 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-98 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: none; + border: 0; + border-radius: 8px; + color: #3942B0; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + font-family: "Work Sans",Helvetica,sans-serif; + font-size: 12px; + font-weight: 500; + height: 28px; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + letter-spacing: .32px; + line-height: 16px; + margin: 0; + min-width: 0; + overflow: hidden; + padding: 4px 8px; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + text-transform: uppercase; + touch-action: manipulation; + -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + vertical-align: middle; + white-space: nowrap; + width: auto; +} + +.emotion-98:not(:disabled):focus { + outline: 2px solid #0074B7; + outline-offset: 2px; + z-index: 1; +} + +.emotion-98:not(:disabled):hover, +.emotion-98:not(:disabled):focus { + background: #E8E9F8; + color: #3942B0; +} + +.emotion-98:not(:disabled):active { + background: #BABDE9; + color: #292F7C; +} + +.emotion-98:not(:disabled):active:after { + opacity: 0.4; + -webkit-transform: translate(-50%, -50%) scale(0); + -moz-transform: translate(-50%, -50%) scale(0); + -ms-transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-98 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-100 { + visibility: visible; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-0 { + background: transparent; + border-bottom: 1px solid #D4D4D4; + color: #707070; + font-family: "Work Sans",Helvetica,sans-serif; +} + +.emotion-2 h1, +.emotion-2 h2, +.emotion-2 h3, +.emotion-2 h4, +.emotion-2 h5, +.emotion-2 h6 { + background: none; + color: inherit; + font: inherit; + line-height: inherit; + margin: 0; + padding: 0; +} + +.emotion-4 { + background: transparent; + border: 0; + border-top: 1px solid #D4D4D4; + color: #454545; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + font-weight: 500; + padding: 12px 16px; + text-align: left; + width: 100%; +} + +.emotion-4:focus { + outline: 2px solid #0074B7; + outline-offset: 0; +} + +.emotion-4.emotion-4[disabled] { + color: rgba(112,112,112,0.6); + cursor: not-allowed; +} + +.emotion-4.emotion-4[disabled] svg { + color: rgba(112,112,112,0.6); +} + +.emotion-4 svg { + color: #707070; +} + +.emotion-6 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.emotion-8 { + display: block; + height: 12px; + min-height: 12px; + min-width: 12px; + width: 12px; +} + +.emotion-10 { + background: transparent; + color: #454545; + font-family: "Work Sans",Helvetica,sans-serif; + padding: 8px 16px 12px; +} + +.emotion-12 { + padding: 0; + margin: 0; + color: #707070; +} + +.emotion-12 ul { + padding: 0; + margin: 0; +} + +.emotion-12 ul li { + margin: 0; +} + +.emotion-14 { + color: #454545; + list-style-type: none; + cursor: not-allowed; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-14:focus { + outline: none; +} + +.emotion-14:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-14>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-16 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: not-allowed; +} + +.emotion-18 { + margin-right: 8px; + vertical-align: middle; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.emotion-20 { + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + position: relative; +} + +.emotion-22 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-24 { + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-family: "Work Sans",Helvetica,sans-serif; + line-height: 24px; + margin: 0; + padding: 8px 0; +} + +.emotion-26 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #D4D4D4; + cursor: not-allowed; + margin: 0 8px 0 0; +} + +.emotion-26:before, +.emotion-26:after { + content: ''; + position: absolute; +} + +.emotion-26:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-26 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-26:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-26:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-28 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: rgba(112,112,112,0.4); + width: 100%; +} + +.emotion-30 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 40px; + padding-inline-start: 40px; +} + +.emotion-30:focus { + outline: none; +} + +.emotion-30:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-30>div:first-of-type { + position: relative; + -webkit-padding-start: 40px; + padding-inline-start: 40px; + -webkit-margin-start: -40px; + margin-inline-start: -40px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-30>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-32 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: default; +} + +.emotion-42 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #3942B0; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-42:before, +.emotion-42:after { + content: ''; + position: absolute; +} + +.emotion-42:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-42 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-42:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-42:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-44 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + color: #454545; + width: 100%; +} + +.emotion-58 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 24px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + width: 24px; + border: 2px solid; + border-color: transparent; + color: #454545; + cursor: pointer; + margin: 0 8px 0 0; +} + +.emotion-58:before, +.emotion-58:after { + content: ''; + position: absolute; +} + +.emotion-58:after { + border-radius: 50%; + height: 40px; + left: -8px; + opacity: 0; + padding: 50%; + top: -8px; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: opacity 1s,-webkit-transform 0.5s; + transition: opacity 1s,transform 0.5s; + width: 40px; +} + +.emotion-58 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + pointer-events: none; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.emotion-58:after { + background: #3942B0; + top: -10px; + left: -10px; +} + +.emotion-23:not(:disabled):active+label .emotion-58:after { + opacity: 0.4; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-62 { + color: #454545; + list-style-type: none; + cursor: default; + position: relative; + margin-bottom: 0; + -webkit-padding-start: 8px; + padding-inline-start: 8px; +} + +.emotion-62:focus { + outline: none; +} + +.emotion-62:focus>*:first-child { + outline-offset: -2px; + outline: 2px solid #0074B7; +} + +.emotion-62>div:first-of-type { + position: relative; + -webkit-padding-start: 8px; + padding-inline-start: 8px; + -webkit-margin-start: -8px; + margin-inline-start: -8px; + padding-block-end: 4px; + padding-block-start: 4px; + padding-right: 4px; +} + +.emotion-62>div:first-of-type:hover { + background: rgba(0,0,0,0.05); +} + +.emotion-66 { + display: inline-block; + vertical-align: middle; + margin-right: 8px; + color: #454545; + border-radius: 0; + width: 24px; + height: 24px; +} + +.emotion-80 { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + position: absolute; + overflow: hidden; + top: auto; + white-space: nowrap; + width: 1px; +} + +.emotion-98 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: none; + border: 0; + border-radius: 8px; + color: #3942B0; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + font-family: "Work Sans",Helvetica,sans-serif; + font-size: 12px; + font-weight: 500; + height: 28px; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + letter-spacing: .32px; + line-height: 16px; + margin: 0; + min-width: 0; + overflow: hidden; + padding: 4px 8px; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + text-transform: uppercase; + touch-action: manipulation; + -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s; + vertical-align: middle; + white-space: nowrap; + width: auto; +} + +.emotion-98:not(:disabled):focus { + outline: 2px solid #0074B7; + outline-offset: 2px; + z-index: 1; +} + +.emotion-98:not(:disabled):hover, +.emotion-98:not(:disabled):focus { + background: #E8E9F8; + color: #3942B0; +} + +.emotion-98:not(:disabled):active { + background: #BABDE9; + color: #292F7C; +} + +.emotion-98:not(:disabled):active:after { + opacity: 0.4; + -webkit-transform: translate(-50%, -50%) scale(0); + -moz-transform: translate(-50%, -50%) scale(0); + -ms-transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} + +.emotion-98 svg { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-100 { + visibility: visible; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +
+
+ +
+
+
    +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
  • +
    +
    +
    + + +
    +
    +
    +
    • + +
  • +
    +
    +
    + + +
    +
    +
    +
    • +
+ +
+
+
+
+

+ 1 total +

+ .emotion-0 { + border: 0; + border-radius: 16px; + background: #3942B0; + color: #FFFFFF; + font-family: "Work Sans",Helvetica,sans-serif; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: space-around; + -ms-flex-pack: space-around; + -webkit-justify-content: space-around; + justify-content: space-around; + font-size: 12px; + font-weight: 500; + letter-spacing: .32px; + min-width: 48px; + padding: 0 4px; + cursor: pointer; +} + +.emotion-0 svg:first-of-type { + opacity: inherit; + height: 16px; + width: 16px; +} + +.emotion-0 svg:last-child { + opacity: 75%; + width: 16px; +} + +.emotion-0:focus { + outline-offset: 2px; + outline: 2px solid #0074B7; +} + +.emotion-2 { + padding: 0 4px; +} + +.emotion-0 { + border: 0; + border-radius: 16px; + background: #3942B0; + color: #FFFFFF; + font-family: "Work Sans",Helvetica,sans-serif; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: space-around; + -ms-flex-pack: space-around; + -webkit-justify-content: space-around; + justify-content: space-around; + font-size: 12px; + font-weight: 500; + letter-spacing: .32px; + min-width: 48px; + padding: 0 4px; + cursor: pointer; +} + +.emotion-0 svg:first-of-type { + opacity: inherit; + height: 16px; + width: 16px; +} + +.emotion-0 svg:last-child { + opacity: 75%; + width: 16px; +} + +.emotion-0:focus { + outline-offset: 2px; + outline: 2px solid #0074B7; +} + +.emotion-2 { + padding: 0 4px; +} + +

+ Selected: + +

+

+ Indeterminate: +

+ +`; + exports[`TreeView tree with hidden items renders tree with some items, and clicking show all displays the rest of the tree 1`] = ` .emotion-0 { @@ -1166,6 +8299,7 @@ exports[`TreeView tree with hidden items renders tree with some items, and click + -

- 1 total -

- .emotion-0 { - border: 0; - border-radius: 16px; - background: #3942B0; - color: #FFFFFF; - font-family: "Work Sans",Helvetica,sans-serif; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: space-around; - -ms-flex-pack: space-around; - -webkit-justify-content: space-around; - justify-content: space-around; - font-size: 12px; - font-weight: 500; - letter-spacing: .32px; - min-width: 48px; - padding: 0 4px; - cursor: pointer; -} - -.emotion-0 svg:first-of-type { - opacity: inherit; - height: 16px; - width: 16px; -} - -.emotion-0 svg:last-child { - opacity: 75%; - width: 16px; -} - -.emotion-0:focus { - outline-offset: 2px; - outline: 2px solid #0074B7; -} - -.emotion-2 { - padding: 0 4px; -} - -.emotion-0 { - border: 0; - border-radius: 16px; - background: #3942B0; - color: #FFFFFF; - font-family: "Work Sans",Helvetica,sans-serif; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: space-around; - -ms-flex-pack: space-around; - -webkit-justify-content: space-around; - justify-content: space-around; - font-size: 12px; - font-weight: 500; - letter-spacing: .32px; - min-width: 48px; - padding: 0 4px; - cursor: pointer; -} - -.emotion-0 svg:first-of-type { - opacity: inherit; - height: 16px; - width: 16px; -} - -.emotion-0 svg:last-child { - opacity: 75%; - width: 16px; -} - -.emotion-0:focus { - outline-offset: 2px; - outline: 2px solid #0074B7; -} - -.emotion-2 { - padding: 0 4px; -} - -

- Selected: - -

-

- Indeterminate: -

`; @@ -2213,6 +2134,14 @@ exports[`TreeView tree with hidden items clicking show all displays the rest of } .emotion-98 { + display: block; + height: 16px; + min-height: 16px; + min-width: 1px; + width: 1px; +} + +.emotion-100 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2256,24 +2185,24 @@ exports[`TreeView tree with hidden items clicking show all displays the rest of width: auto; } -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):focus { outline: 2px solid #0074B7; outline-offset: 2px; z-index: 1; } -.emotion-98:not(:disabled):hover, -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):hover, +.emotion-100:not(:disabled):focus { background: #E8E9F8; color: #3942B0; } -.emotion-98:not(:disabled):active { +.emotion-100:not(:disabled):active { background: #BABDE9; color: #292F7C; } -.emotion-98:not(:disabled):active:after { +.emotion-100:not(:disabled):active:after { opacity: 0.4; -webkit-transform: translate(-50%, -50%) scale(0); -moz-transform: translate(-50%, -50%) scale(0); @@ -2283,13 +2212,13 @@ exports[`TreeView tree with hidden items clicking show all displays the rest of transition: transform 0s; } -.emotion-98 svg { +.emotion-100 svg { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } -.emotion-100 { +.emotion-102 { visibility: visible; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -2301,6 +2230,10 @@ exports[`TreeView tree with hidden items clicking show all displays the rest of align-items: center; } +.emotion-104 { + padding-left: 4px; +} + .emotion-0 { background: transparent; border-bottom: 1px solid #D4D4D4; @@ -2842,6 +2775,14 @@ exports[`TreeView tree with hidden items clicking show all displays the rest of } .emotion-98 { + display: block; + height: 16px; + min-height: 16px; + min-width: 1px; + width: 1px; +} + +.emotion-100 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2885,24 +2826,24 @@ exports[`TreeView tree with hidden items clicking show all displays the rest of width: auto; } -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):focus { outline: 2px solid #0074B7; outline-offset: 2px; z-index: 1; } -.emotion-98:not(:disabled):hover, -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):hover, +.emotion-100:not(:disabled):focus { background: #E8E9F8; color: #3942B0; } -.emotion-98:not(:disabled):active { +.emotion-100:not(:disabled):active { background: #BABDE9; color: #292F7C; } -.emotion-98:not(:disabled):active:after { +.emotion-100:not(:disabled):active:after { opacity: 0.4; -webkit-transform: translate(-50%, -50%) scale(0); -moz-transform: translate(-50%, -50%) scale(0); @@ -2912,13 +2853,13 @@ exports[`TreeView tree with hidden items clicking show all displays the rest of transition: transform 0s; } -.emotion-98 svg { +.emotion-100 svg { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } -.emotion-100 { +.emotion-102 { visibility: visible; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -2930,6 +2871,10 @@ exports[`TreeView tree with hidden items clicking show all displays the rest of align-items: center; } +.emotion-104 { + padding-left: 4px; +} + -

- 1 total -

- .emotion-0 { - border: 0; - border-radius: 16px; - background: #3942B0; - color: #FFFFFF; - font-family: "Work Sans",Helvetica,sans-serif; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: space-around; - -ms-flex-pack: space-around; - -webkit-justify-content: space-around; - justify-content: space-around; - font-size: 12px; - font-weight: 500; - letter-spacing: .32px; - min-width: 48px; - padding: 0 4px; - cursor: pointer; -} - -.emotion-0 svg:first-of-type { - opacity: inherit; - height: 16px; - width: 16px; -} - -.emotion-0 svg:last-child { - opacity: 75%; - width: 16px; -} - -.emotion-0:focus { - outline-offset: 2px; - outline: 2px solid #0074B7; -} - -.emotion-2 { - padding: 0 4px; -} - -.emotion-0 { - border: 0; - border-radius: 16px; - background: #3942B0; - color: #FFFFFF; - font-family: "Work Sans",Helvetica,sans-serif; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: space-around; - -ms-flex-pack: space-around; - -webkit-justify-content: space-around; - justify-content: space-around; - font-size: 12px; - font-weight: 500; - letter-spacing: .32px; - min-width: 48px; - padding: 0 4px; - cursor: pointer; -} - -.emotion-0 svg:first-of-type { - opacity: inherit; - height: 16px; - width: 16px; -} - -.emotion-0 svg:last-child { - opacity: 75%; - width: 16px; -} - -.emotion-0:focus { - outline-offset: 2px; - outline: 2px solid #0074B7; -} - -.emotion-2 { - padding: 0 4px; -} - -

- Selected: - -

-

- Indeterminate: -

`; @@ -4034,6 +3876,14 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte } .emotion-98 { + display: block; + height: 16px; + min-height: 16px; + min-width: 1px; + width: 1px; +} + +.emotion-100 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4077,24 +3927,24 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte width: auto; } -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):focus { outline: 2px solid #0074B7; outline-offset: 2px; z-index: 1; } -.emotion-98:not(:disabled):hover, -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):hover, +.emotion-100:not(:disabled):focus { background: #E8E9F8; color: #3942B0; } -.emotion-98:not(:disabled):active { +.emotion-100:not(:disabled):active { background: #BABDE9; color: #292F7C; } -.emotion-98:not(:disabled):active:after { +.emotion-100:not(:disabled):active:after { opacity: 0.4; -webkit-transform: translate(-50%, -50%) scale(0); -moz-transform: translate(-50%, -50%) scale(0); @@ -4104,13 +3954,13 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte transition: transform 0s; } -.emotion-98 svg { +.emotion-100 svg { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } -.emotion-100 { +.emotion-102 { visibility: visible; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -4122,6 +3972,10 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte align-items: center; } +.emotion-104 { + padding-left: 4px; +} + .emotion-0 { background: transparent; border-bottom: 1px solid #D4D4D4; @@ -4663,6 +4517,14 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte } .emotion-98 { + display: block; + height: 16px; + min-height: 16px; + min-width: 1px; + width: 1px; +} + +.emotion-100 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4706,24 +4568,24 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte width: auto; } -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):focus { outline: 2px solid #0074B7; outline-offset: 2px; z-index: 1; } -.emotion-98:not(:disabled):hover, -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):hover, +.emotion-100:not(:disabled):focus { background: #E8E9F8; color: #3942B0; } -.emotion-98:not(:disabled):active { +.emotion-100:not(:disabled):active { background: #BABDE9; color: #292F7C; } -.emotion-98:not(:disabled):active:after { +.emotion-100:not(:disabled):active:after { opacity: 0.4; -webkit-transform: translate(-50%, -50%) scale(0); -moz-transform: translate(-50%, -50%) scale(0); @@ -4733,13 +4595,13 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte transition: transform 0s; } -.emotion-98 svg { +.emotion-100 svg { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } -.emotion-100 { +.emotion-102 { visibility: visible; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -4751,6 +4613,10 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte align-items: center; } +.emotion-104 { + padding-left: 4px; +} + -

- 1 total -

- .emotion-0 { - border: 0; - border-radius: 16px; - background: #3942B0; - color: #FFFFFF; - font-family: "Work Sans",Helvetica,sans-serif; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: space-around; - -ms-flex-pack: space-around; - -webkit-justify-content: space-around; - justify-content: space-around; - font-size: 12px; - font-weight: 500; - letter-spacing: .32px; - min-width: 48px; - padding: 0 4px; - cursor: pointer; -} - -.emotion-0 svg:first-of-type { - opacity: inherit; - height: 16px; - width: 16px; -} - -.emotion-0 svg:last-child { - opacity: 75%; - width: 16px; -} - -.emotion-0:focus { - outline-offset: 2px; - outline: 2px solid #0074B7; -} - -.emotion-2 { - padding: 0 4px; -} - -.emotion-0 { - border: 0; - border-radius: 16px; - background: #3942B0; - color: #FFFFFF; - font-family: "Work Sans",Helvetica,sans-serif; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: space-around; - -ms-flex-pack: space-around; - -webkit-justify-content: space-around; - justify-content: space-around; - font-size: 12px; - font-weight: 500; - letter-spacing: .32px; - min-width: 48px; - padding: 0 4px; - cursor: pointer; -} - -.emotion-0 svg:first-of-type { - opacity: inherit; - height: 16px; - width: 16px; -} - -.emotion-0 svg:last-child { - opacity: 75%; - width: 16px; -} - -.emotion-0:focus { - outline-offset: 2px; - outline: 2px solid #0074B7; -} - -.emotion-2 { - padding: 0 4px; -} - -

- Selected: - -

-

- Indeterminate: -

`; @@ -5855,6 +5618,14 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte } .emotion-98 { + display: block; + height: 16px; + min-height: 16px; + min-width: 1px; + width: 1px; +} + +.emotion-100 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -5898,24 +5669,24 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte width: auto; } -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):focus { outline: 2px solid #0074B7; outline-offset: 2px; z-index: 1; } -.emotion-98:not(:disabled):hover, -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):hover, +.emotion-100:not(:disabled):focus { background: #E8E9F8; color: #3942B0; } -.emotion-98:not(:disabled):active { +.emotion-100:not(:disabled):active { background: #BABDE9; color: #292F7C; } -.emotion-98:not(:disabled):active:after { +.emotion-100:not(:disabled):active:after { opacity: 0.4; -webkit-transform: translate(-50%, -50%) scale(0); -moz-transform: translate(-50%, -50%) scale(0); @@ -5925,13 +5696,13 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte transition: transform 0s; } -.emotion-98 svg { +.emotion-100 svg { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } -.emotion-100 { +.emotion-102 { visibility: visible; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -5943,6 +5714,10 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte align-items: center; } +.emotion-104 { + padding-left: 4px; +} + .emotion-0 { background: transparent; border-bottom: 1px solid #D4D4D4; @@ -6484,6 +6259,14 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte } .emotion-98 { + display: block; + height: 16px; + min-height: 16px; + min-width: 1px; + width: 1px; +} + +.emotion-100 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -6527,24 +6310,24 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte width: auto; } -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):focus { outline: 2px solid #0074B7; outline-offset: 2px; z-index: 1; } -.emotion-98:not(:disabled):hover, -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):hover, +.emotion-100:not(:disabled):focus { background: #E8E9F8; color: #3942B0; } -.emotion-98:not(:disabled):active { +.emotion-100:not(:disabled):active { background: #BABDE9; color: #292F7C; } -.emotion-98:not(:disabled):active:after { +.emotion-100:not(:disabled):active:after { opacity: 0.4; -webkit-transform: translate(-50%, -50%) scale(0); -moz-transform: translate(-50%, -50%) scale(0); @@ -6554,13 +6337,13 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte transition: transform 0s; } -.emotion-98 svg { +.emotion-100 svg { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } -.emotion-100 { +.emotion-102 { visibility: visible; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -6572,6 +6355,10 @@ exports[`TreeView tree with hidden items renders tree with some items preselecte align-items: center; } +.emotion-104 { + padding-left: 4px; +} + -

- 1 total -

- .emotion-0 { - border: 0; - border-radius: 16px; - background: #3942B0; - color: #FFFFFF; - font-family: "Work Sans",Helvetica,sans-serif; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: space-around; - -ms-flex-pack: space-around; - -webkit-justify-content: space-around; - justify-content: space-around; - font-size: 12px; - font-weight: 500; - letter-spacing: .32px; - min-width: 48px; - padding: 0 4px; - cursor: pointer; -} - -.emotion-0 svg:first-of-type { - opacity: inherit; - height: 16px; - width: 16px; -} - -.emotion-0 svg:last-child { - opacity: 75%; - width: 16px; -} - -.emotion-0:focus { - outline-offset: 2px; - outline: 2px solid #0074B7; -} - -.emotion-2 { - padding: 0 4px; -} - -.emotion-0 { - border: 0; - border-radius: 16px; - background: #3942B0; - color: #FFFFFF; - font-family: "Work Sans",Helvetica,sans-serif; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: space-around; - -ms-flex-pack: space-around; - -webkit-justify-content: space-around; - justify-content: space-around; - font-size: 12px; - font-weight: 500; - letter-spacing: .32px; - min-width: 48px; - padding: 0 4px; - cursor: pointer; -} - -.emotion-0 svg:first-of-type { - opacity: inherit; - height: 16px; - width: 16px; -} - -.emotion-0 svg:last-child { - opacity: 75%; - width: 16px; -} - -.emotion-0:focus { - outline-offset: 2px; - outline: 2px solid #0074B7; -} - -.emotion-2 { - padding: 0 4px; -} - -

- Selected: - -

-

- Indeterminate: -

`; @@ -7601,6 +7285,14 @@ exports[`TreeView tree with hidden items renders tree with some items, and click } .emotion-98 { + display: block; + height: 16px; + min-height: 16px; + min-width: 1px; + width: 1px; +} + +.emotion-100 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -7644,24 +7336,24 @@ exports[`TreeView tree with hidden items renders tree with some items, and click width: auto; } -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):focus { outline: 2px solid #0074B7; outline-offset: 2px; z-index: 1; } -.emotion-98:not(:disabled):hover, -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):hover, +.emotion-100:not(:disabled):focus { background: #E8E9F8; color: #3942B0; } -.emotion-98:not(:disabled):active { +.emotion-100:not(:disabled):active { background: #BABDE9; color: #292F7C; } -.emotion-98:not(:disabled):active:after { +.emotion-100:not(:disabled):active:after { opacity: 0.4; -webkit-transform: translate(-50%, -50%) scale(0); -moz-transform: translate(-50%, -50%) scale(0); @@ -7671,13 +7363,13 @@ exports[`TreeView tree with hidden items renders tree with some items, and click transition: transform 0s; } -.emotion-98 svg { +.emotion-100 svg { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } -.emotion-100 { +.emotion-102 { visibility: visible; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -7689,6 +7381,10 @@ exports[`TreeView tree with hidden items renders tree with some items, and click align-items: center; } +.emotion-104 { + padding-left: 4px; +} + .emotion-0 { background: transparent; border-bottom: 1px solid #D4D4D4; @@ -8155,6 +7851,14 @@ exports[`TreeView tree with hidden items renders tree with some items, and click } .emotion-98 { + display: block; + height: 16px; + min-height: 16px; + min-width: 1px; + width: 1px; +} + +.emotion-100 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -8198,24 +7902,24 @@ exports[`TreeView tree with hidden items renders tree with some items, and click width: auto; } -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):focus { outline: 2px solid #0074B7; outline-offset: 2px; z-index: 1; } -.emotion-98:not(:disabled):hover, -.emotion-98:not(:disabled):focus { +.emotion-100:not(:disabled):hover, +.emotion-100:not(:disabled):focus { background: #E8E9F8; color: #3942B0; } -.emotion-98:not(:disabled):active { +.emotion-100:not(:disabled):active { background: #BABDE9; color: #292F7C; } -.emotion-98:not(:disabled):active:after { +.emotion-100:not(:disabled):active:after { opacity: 0.4; -webkit-transform: translate(-50%, -50%) scale(0); -moz-transform: translate(-50%, -50%) scale(0); @@ -8225,13 +7929,13 @@ exports[`TreeView tree with hidden items renders tree with some items, and click transition: transform 0s; } -.emotion-98 svg { +.emotion-100 svg { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } -.emotion-100 { +.emotion-102 { visibility: visible; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -8243,6 +7947,10 @@ exports[`TreeView tree with hidden items renders tree with some items, and click align-items: center; } +.emotion-104 { + padding-left: 4px; +} + -

- 1 total -

- .emotion-0 { - border: 0; - border-radius: 16px; - background: #3942B0; - color: #FFFFFF; - font-family: "Work Sans",Helvetica,sans-serif; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: space-around; - -ms-flex-pack: space-around; - -webkit-justify-content: space-around; - justify-content: space-around; - font-size: 12px; - font-weight: 500; - letter-spacing: .32px; - min-width: 48px; - padding: 0 4px; - cursor: pointer; -} - -.emotion-0 svg:first-of-type { - opacity: inherit; - height: 16px; - width: 16px; -} - -.emotion-0 svg:last-child { - opacity: 75%; - width: 16px; -} - -.emotion-0:focus { - outline-offset: 2px; - outline: 2px solid #0074B7; -} - -.emotion-2 { - padding: 0 4px; -} - -.emotion-0 { - border: 0; - border-radius: 16px; - background: #3942B0; - color: #FFFFFF; - font-family: "Work Sans",Helvetica,sans-serif; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: space-around; - -ms-flex-pack: space-around; - -webkit-justify-content: space-around; - justify-content: space-around; - font-size: 12px; - font-weight: 500; - letter-spacing: .32px; - min-width: 48px; - padding: 0 4px; - cursor: pointer; -} - -.emotion-0 svg:first-of-type { - opacity: inherit; - height: 16px; - width: 16px; -} - -.emotion-0 svg:last-child { - opacity: 75%; - width: 16px; -} - -.emotion-0:focus { - outline-offset: 2px; - outline: 2px solid #0074B7; -} - -.emotion-2 { - padding: 0 4px; -} - -

- Selected: - -

-

- Indeterminate: -

`; diff --git a/website/react-magma-docs/src/pages/api/tree-view.mdx b/website/react-magma-docs/src/pages/api/tree-view.mdx index 65a35cbf5..af90eaab0 100644 --- a/website/react-magma-docs/src/pages/api/tree-view.mdx +++ b/website/react-magma-docs/src/pages/api/tree-view.mdx @@ -880,6 +880,227 @@ export function Example() { } ``` +## Show All / Show Less Button + +Use the `apiRef.showAll()` prop when using a Show All / Show Less button inside your tree. + +```typescript +import React from 'react'; +import { TreeView, TreeItem, TreeViewSelectable, TreeItemSelectedInterface, Spacer, SpacerAxis, IconButton, ButtonSize, ButtonVariant } from 'react-magma-dom'; +import { KeyboardArrowUpIcon, KeyboardArrowDownIcon } from 'react-magma-icons'; + +export function Example() { + const treeContent = { + id: 'tree-id', + groupName: 'disciplines', + items: [ + { + id: 'discipline-arts-design', + title: 'Arts and Design', + children: [ + { + id: 'ad-1', + title: 'Animation', + children: [], + }, + { + id: 'ad-2', + title: 'Photography', + children: [], + }, + { + id: 'item-id-3', + title: 'Web Design', + children: [], + }, + ], + }, + { + id: 'discipline-business', + title: 'Business', + children: [ + { + id: 'bsn-1', + title: 'Accounting', + children: [], + }, + { + id: 'bsn-2', + title: 'Finance', + children: [], + }, + ], + }, + { + id: 'discipline-cs', + title: 'Computer Science', + children: [ + { + id: 'cs-1', + title: 'Software Engineering', + children: [], + }, + { + id: 'cs-2', + title: 'Information Technology', + children: [], + }, + ], + }, + { + id: 'discipline-geography', + title: 'Geography', + children: [], + }, + { + id: 'discipline-his', + title: 'History', + children: [ + { + id: 'nutr-1', + title: 'American History', + children: [], + }, + { + id: 'nutr-2', + title: 'World History', + children: [], + }, + { + id: 'nutr-3', + title: 'Western Civilization', + children: [], + }, + ], + }, + { + id: 'discipline-math', + title: 'Mathematics', + children: [ + { + id: 'math-1', + title: 'Precalculus', + children: [], + }, + { + id: 'math-2', + title: 'Calculus', + children: [], + }, + { + id: 'math-3', + title: 'Finite Math', + children: [], + }, + ], + }, + { + id: 'discipline-nutr', + title: 'Nutrition', + children: [ + { + id: 'nutr-1', + title: 'Community Nutrition', + children: [], + }, + { + id: 'nutr-2', + title: 'Sports Nutrition', + children: [], + }, + ], + }, + ], + preselectedItems: [ + { + itemId: 'bsn-1', + checkedStatus: IndeterminateCheckboxStatus.checked, + }, + ], + }; + + const apiRef = React.useRef(); + const [isShowAll, setIsShowAll] = React.useState(false); + const [selectedItems, setSelectedItems] = + React.useState(); + const total = selectedItems?.length ?? 0; + const { selected, indeterminate } = createControlledTags( + selectedItems, + apiRef?.current + ); + + function onSelection(items: TreeItemSelectedInterface[]) { + setSelectedItems(items); + } + + const getTermsForRender = (terms: any) => { + if (isShowAll || terms.length <= 5) { + return terms; + } else { + return terms.slice(0, 5); + } + }; + + const toggleShowAll = () => { + setIsShowAll(prev => !prev); + if (!isShowAll) { + apiRef.current?.showMore(); + } + }; + + const renderTreeItemsRecursively = (discipline: any[], depth: number) => { + return discipline.map(term => { + return ( + + {term.children?.length ? ( + renderTreeItemsRecursively(term.children, depth + 1) + ) : ( + <> + )} + + ); + }); + }; + + return ( + <> + + {renderTreeItemsRecursively(getTermsForRender(treeContent.items), 0)} + + + + + : } + > + {isShowAll ? 'Show Less' : 'Show All'} + + + + +

{total} total

+

Selected: {selected}

+

Indeterminate: {indeterminate}

+ + ); +} +``` + ## Inverse ```typescript From cbdc19e9027799f88f43e9d255985eef38430772 Mon Sep 17 00:00:00 2001 From: Laura Silva Date: Tue, 10 Dec 2024 08:42:14 -0500 Subject: [PATCH 4/7] fix docs example --- .changeset/tree-showAllExample.md | 2 +- .../react-magma-docs/src/pages/api/tree-view.mdx | 15 ++------------- 2 files changed, 3 insertions(+), 14 deletions(-) diff --git a/.changeset/tree-showAllExample.md b/.changeset/tree-showAllExample.md index 461f3ca32..01cb8f106 100644 --- a/.changeset/tree-showAllExample.md +++ b/.changeset/tree-showAllExample.md @@ -1,5 +1,5 @@ --- -'react-magma-dom': patch +'react-magma-dom': minor --- fix(TreeView): Support "show all" button inside TreeView component diff --git a/website/react-magma-docs/src/pages/api/tree-view.mdx b/website/react-magma-docs/src/pages/api/tree-view.mdx index af90eaab0..00e4977ba 100644 --- a/website/react-magma-docs/src/pages/api/tree-view.mdx +++ b/website/react-magma-docs/src/pages/api/tree-view.mdx @@ -1023,11 +1023,6 @@ export function Example() { const [isShowAll, setIsShowAll] = React.useState(false); const [selectedItems, setSelectedItems] = React.useState(); - const total = selectedItems?.length ?? 0; - const { selected, indeterminate } = createControlledTags( - selectedItems, - apiRef?.current - ); function onSelection(items: TreeItemSelectedInterface[]) { setSelectedItems(items); @@ -1044,7 +1039,7 @@ export function Example() { const toggleShowAll = () => { setIsShowAll(prev => !prev); if (!isShowAll) { - apiRef.current?.showMore(); + apiRef && apiRef.current && apiRef.current.showMore(); } }; @@ -1057,7 +1052,7 @@ export function Example() { testId={term.id} label={term.title} > - {term.children?.length ? ( + {term.children.length ? ( renderTreeItemsRecursively(term.children, depth + 1) ) : ( <> @@ -1090,12 +1085,6 @@ export function Example() { > {isShowAll ? 'Show Less' : 'Show All'} - - - -

{total} total

-

Selected: {selected}

-

Indeterminate: {indeterminate}

); } From abce2ce6df473099681650706eef3cc32d32abd5 Mon Sep 17 00:00:00 2001 From: Laura Silva Date: Tue, 10 Dec 2024 09:04:02 -0500 Subject: [PATCH 5/7] missing imports/exports --- .../src/components/TreeView/index.ts | 3 ++- .../react-magma-docs/src/pages/api/tree-view.mdx | 16 ++++++++++++++-- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/react-magma-dom/src/components/TreeView/index.ts b/packages/react-magma-dom/src/components/TreeView/index.ts index 9292309bb..15ae6bbae 100644 --- a/packages/react-magma-dom/src/components/TreeView/index.ts +++ b/packages/react-magma-dom/src/components/TreeView/index.ts @@ -3,4 +3,5 @@ export * from './TreeItem'; export * from './useTreeItem'; export * from './useTreeView'; export * from './utils'; -export * from './types'; \ No newline at end of file +export * from './types'; +export { TreeItemSelectedInterface, TreeViewApi } from './useTreeView'; diff --git a/website/react-magma-docs/src/pages/api/tree-view.mdx b/website/react-magma-docs/src/pages/api/tree-view.mdx index 00e4977ba..6a5b4f049 100644 --- a/website/react-magma-docs/src/pages/api/tree-view.mdx +++ b/website/react-magma-docs/src/pages/api/tree-view.mdx @@ -882,11 +882,23 @@ export function Example() { ## Show All / Show Less Button -Use the `apiRef.showAll()` prop when using a Show All / Show Less button inside your tree. +Use the `apiRef.showAll()` prop when using a Show All / Show Less button inside a tree. ```typescript import React from 'react'; -import { TreeView, TreeItem, TreeViewSelectable, TreeItemSelectedInterface, Spacer, SpacerAxis, IconButton, ButtonSize, ButtonVariant } from 'react-magma-dom'; +import { + ButtonSize, + ButtonVariant, + IconButton, + IndeterminateCheckboxStatus, + Spacer, + SpacerAxis, + TreeItem, + TreeItemSelectedInterface, + TreeView, + TreeViewApi, + TreeViewSelectable +} from 'react-magma-dom'; import { KeyboardArrowUpIcon, KeyboardArrowDownIcon } from 'react-magma-icons'; export function Example() { From 2096faddf00eb972dbf7edebafbc434e085b563d Mon Sep 17 00:00:00 2001 From: Laura Silva Date: Tue, 10 Dec 2024 09:31:09 -0500 Subject: [PATCH 6/7] clean up: docs + story --- .../components/TreeView/TreeView.stories.tsx | 46 ++++++++----------- .../src/pages/api/tree-view.mdx | 2 +- 2 files changed, 21 insertions(+), 27 deletions(-) diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx index a10c65c52..3870bd49a 100644 --- a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx +++ b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx @@ -1206,8 +1206,6 @@ const AccordionSectionWithTreeView = (props: any) => { ); }; - const isShowAllButtonVisible = - trees.length === 1 ? trees[0].items.length > 5 : trees.length > 5; return ( @@ -1215,20 +1213,16 @@ const AccordionSectionWithTreeView = (props: any) => { {renderTrees()} - {isShowAllButtonVisible && ( - : - } - > - {isShowAll ? 'Show Less' : 'Show All'} - - )} + : } + > + {isShowAll ? 'Show Less' : 'Show All'} + ); @@ -1298,16 +1292,14 @@ export const AccordionTreeWithShowAll = (props: any) => { } return ( - <> - - - - + + + ); }; @@ -1326,6 +1318,8 @@ AccordionTreeWithShowAll.parameters = { }, }; +// END of MAST Tree example with hidden items + export const ComplexTreeWithShowAll = (args: Partial) => { const treeContent = { id: 'tree-id', diff --git a/website/react-magma-docs/src/pages/api/tree-view.mdx b/website/react-magma-docs/src/pages/api/tree-view.mdx index 6a5b4f049..5b0eb83a9 100644 --- a/website/react-magma-docs/src/pages/api/tree-view.mdx +++ b/website/react-magma-docs/src/pages/api/tree-view.mdx @@ -882,7 +882,7 @@ export function Example() { ## Show All / Show Less Button -Use the `apiRef.showAll()` prop when using a Show All / Show Less button inside a tree. +Use the `apiRef.showMore()` prop when using a Show All / Show Less button inside a tree. ```typescript import React from 'react'; From 14e94c64bb0a2fb4c46f648aa9c3691c69c1530a Mon Sep 17 00:00:00 2001 From: Laura Silva Date: Tue, 10 Dec 2024 16:50:05 -0500 Subject: [PATCH 7/7] add showLess --- .../components/TreeView/TreeView.stories.tsx | 40 ++++++++++++--- .../src/components/TreeView/useTreeView.ts | 49 +++++++++++++------ .../src/pages/api/tree-view.mdx | 16 +++--- 3 files changed, 75 insertions(+), 30 deletions(-) diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx index 3870bd49a..fa37ce94b 100644 --- a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx +++ b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { TreeView, TreeItem, TreeViewSelectable, TreeViewApi } from '.'; import { magma } from '../../theme/magma'; - import { ArticleIcon, FolderIcon, @@ -33,7 +32,7 @@ import { AccordionPanel, IconButton, } from '../..'; -import { ButtonSize } from '../Button'; +import { ButtonColor, ButtonSize } from '../Button'; import { FlexAlignContent, FlexAlignItems } from '../Flex'; import { TagColor } from '../Tag'; @@ -1294,9 +1293,9 @@ export const AccordionTreeWithShowAll = (props: any) => { return ( @@ -1340,7 +1339,7 @@ export const ComplexTreeWithShowAll = (args: Partial) => { children: [], }, { - id: 'item-id-3', + id: 'ad-3', title: 'Web Design', children: [], }, @@ -1388,17 +1387,17 @@ export const ComplexTreeWithShowAll = (args: Partial) => { title: 'History', children: [ { - id: 'nutr-1', + id: 'his-1', title: 'American History', children: [], }, { - id: 'nutr-2', + id: 'his-2', title: 'World History', children: [], }, { - id: 'nutr-3', + id: 'his-3', title: 'Western Civilization', children: [], }, @@ -1474,11 +1473,25 @@ export const ComplexTreeWithShowAll = (args: Partial) => { const toggleShowAll = () => { setIsShowAll(prev => !prev); - if (!isShowAll) { + if (isShowAll) { + apiRef.current?.showLess(); + } else { apiRef.current?.showMore(); } }; + const onSelectAll = () => { + if (isShowAll) { + apiRef.current?.showLess(); + } else { + apiRef.current?.showMore(); + setIsShowAll(prev => !prev); + } + setTimeout(() => { + apiRef.current?.selectAll(); + }, 50) + }; + const renderTreeItemsRecursively = (discipline: any[], depth: number) => { return discipline.map(term => { return ( @@ -1500,6 +1513,17 @@ export const ComplexTreeWithShowAll = (args: Partial) => { return ( <> + + + + + + + ): void - action that allows to change item selection, * selectAll(): void - action that allows to select all items, * clearAll(): void - action that allows to unselect all items. - * showMore(): void - action that gets called when a tree has hidden items. + * showMore(): void - action that gets called when a tree has hidden items and they get expanded. + * showLess(): void - action that gets called when a tree has hidden items and they get collapsed. */ apiRef?: React.MutableRefObject; /** @@ -150,6 +152,8 @@ export function useTreeView(props: UseTreeViewProps) { }); const selectedItems = React.useMemo(() => { + console.log(items); + return items.filter( item => item.checkedStatus === IndeterminateCheckboxStatus.checked ); @@ -331,15 +335,7 @@ export function useTreeView(props: UseTreeViewProps) { ) { return; } - - setItems(() => { - return toggleAllMulti({ - items, - checkedStatus: IndeterminateCheckboxStatus.checked, - checkChildren, - checkParents, - }); - }); + this.showMore(true); }, clearAll() { @@ -357,16 +353,39 @@ export function useTreeView(props: UseTreeViewProps) { }); }, - showMore() { - setItemsNeedUpdate(true); + showMore(fromSelectAll: boolean = false) { + if (fromSelectAll) { + setItems(() => { + return toggleAllMulti({ + items, + checkedStatus: IndeterminateCheckboxStatus.checked, + checkChildren, + checkParents, + }); + }); + } else { + setItemsNeedUpdate(true); + } + }, + + showLess() { + setItems( + getInitialItems({ + children, + preselectedItems: selectedItems, + checkParents, + checkChildren, + selectable, + isDisabled, + }) + ); } }; } - }, [selectItem, isDisabled]); + }, [selectItem, isDisabled, children]); React.useEffect(() => { if (itemsNeedUpdate) { - setItems( getInitialItems({ children, @@ -381,7 +400,7 @@ export function useTreeView(props: UseTreeViewProps) { setItemsNeedUpdate(false); } - }, [itemsNeedUpdate]); + }, [itemsNeedUpdate, children]); const [initialExpandedItemsNeedUpdate, setInitialExpandedItemsNeedUpdate] = React.useState(false); diff --git a/website/react-magma-docs/src/pages/api/tree-view.mdx b/website/react-magma-docs/src/pages/api/tree-view.mdx index 5b0eb83a9..d65a53690 100644 --- a/website/react-magma-docs/src/pages/api/tree-view.mdx +++ b/website/react-magma-docs/src/pages/api/tree-view.mdx @@ -882,7 +882,7 @@ export function Example() { ## Show All / Show Less Button -Use the `apiRef.showMore()` prop when using a Show All / Show Less button inside a tree. +Use the `apiRef.showMore()` prop when using a Show All button inside a tree, and `apiRef.showLess()` when using a Show Less button. ```typescript import React from 'react'; @@ -921,7 +921,7 @@ export function Example() { children: [], }, { - id: 'item-id-3', + id: 'ad-3', title: 'Web Design', children: [], }, @@ -969,17 +969,17 @@ export function Example() { title: 'History', children: [ { - id: 'nutr-1', + id: 'his-1', title: 'American History', children: [], }, { - id: 'nutr-2', + id: 'his-2', title: 'World History', children: [], }, { - id: 'nutr-3', + id: 'his-3', title: 'Western Civilization', children: [], }, @@ -1049,10 +1049,12 @@ export function Example() { }; const toggleShowAll = () => { - setIsShowAll(prev => !prev); - if (!isShowAll) { + if (isShowAll) { + apiRef && apiRef.current && apiRef.current.showLess(); + } else { apiRef && apiRef.current && apiRef.current.showMore(); } + setIsShowAll(prev => !prev); }; const renderTreeItemsRecursively = (discipline: any[], depth: number) => {