diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 63b4cdee02..221b655f23 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,5 +1,16 @@ # docs +## 10.10.2 + +### Patch Changes + +- Deploy 10.10.2 +- Updated dependencies + - @heathmont/moon-themes-tw@10.10.2 + - @heathmont/moon-base-tw@10.10.2 + - @heathmont/moon-cmdk-tw@10.10.2 + - @heathmont/moon-core-tw@10.10.2 + ## 10.10.1 ### Patch Changes diff --git a/docs/app/components/server/accordion/page.tsx b/docs/app/components/server/accordion/page.tsx index 1153e653a8..b5324b9879 100644 --- a/docs/app/components/server/accordion/page.tsx +++ b/docs/app/components/server/accordion/page.tsx @@ -3,15 +3,18 @@ import { Default } from '@/app/components/server/accordion/examples/Default'; import { Disabled } from '@/app/components/server/accordion/examples/Disabled'; import { Sizes } from '@/app/components/server/accordion/examples/Sizes'; import ExampleSection from '@/app/components/shared/ExampleSection'; +import QuickNav from '@/app/components/shared/QuickNav'; import { getExamples } from '@/app/utils/getExamples'; import { MDX } from '@/components/MDX'; export default async function Home() { const { server } = await getExamples(); + const examplesList = Object.keys(server.accordion.examples); return ( -
+

Accordion

+ } diff --git a/docs/app/components/server/avatar/description.md b/docs/app/components/server/avatar/description.md deleted file mode 100644 index 347d36893e..0000000000 --- a/docs/app/components/server/avatar/description.md +++ /dev/null @@ -1 +0,0 @@ -The Avatar component is typically used to display images, icons, or initials representing people or other entities. diff --git a/docs/app/components/server/avatar/examples/Active.tsx b/docs/app/components/server/avatar/examples/Active.tsx deleted file mode 100644 index 054d532fd2..0000000000 --- a/docs/app/components/server/avatar/examples/Active.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import Avatar from '@heathmont/moon-core-tw/lib/es/avatar/Avatar'; -import { GenericUser } from '@heathmont/moon-icons-tw'; - -export const Active = () => ( - <> - - - - - - md - - - - - - -); diff --git a/docs/app/components/server/avatar/examples/Default.tsx b/docs/app/components/server/avatar/examples/Default.tsx deleted file mode 100644 index 56062a94aa..0000000000 --- a/docs/app/components/server/avatar/examples/Default.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import Avatar from '@heathmont/moon-core-tw/lib/es/avatar/Avatar'; -import { GenericUser } from '@heathmont/moon-icons-tw'; - -export const Default = () => { - return - - -}; diff --git a/docs/app/components/server/avatar/page.tsx b/docs/app/components/server/avatar/page.tsx deleted file mode 100644 index 9cc2938a33..0000000000 --- a/docs/app/components/server/avatar/page.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Active } from "@/app/components/server/avatar/examples/Active"; -import { Default } from "@/app/components/server/avatar/examples/Default"; -import { getExamples } from "@/app/utils/getExamples"; -import { MDX } from "@/components/MDX"; - - -export default async function Home() { - const { server } = await getExamples(); - - return ( -
-

Avatar

- - - -
-

Default

-
- -
-
{server.avatar.examples.Default}
-
- -
-

Active

-
- -
-
{server.avatar.examples.Active}
-
-
- ) -} - diff --git a/docs/app/components/server/button/description.md b/docs/app/components/server/button/description.md new file mode 100644 index 0000000000..64d6721bd3 --- /dev/null +++ b/docs/app/components/server/button/description.md @@ -0,0 +1,8 @@ +Buttons allow users to take actions, and make choices, with a single tap. + +Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like: + +Modal windows +Forms +Cards +Toolbars diff --git a/docs/app/components/server/button/examples/Animations.tsx b/docs/app/components/server/button/examples/Animations.tsx new file mode 100644 index 0000000000..ef9b623977 --- /dev/null +++ b/docs/app/components/server/button/examples/Animations.tsx @@ -0,0 +1,18 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; + +export const Animations = () => ( + <> + + + + + +); diff --git a/docs/app/components/server/button/examples/Default.tsx b/docs/app/components/server/button/examples/Default.tsx new file mode 100644 index 0000000000..d2bffc8e77 --- /dev/null +++ b/docs/app/components/server/button/examples/Default.tsx @@ -0,0 +1,3 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; + +export const Default = () => ; diff --git a/docs/app/components/server/button/examples/Disabled.tsx b/docs/app/components/server/button/examples/Disabled.tsx new file mode 100644 index 0000000000..163423deab --- /dev/null +++ b/docs/app/components/server/button/examples/Disabled.tsx @@ -0,0 +1,3 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; + +export const Disabled = () => ; diff --git a/docs/app/components/server/button/examples/FullWidth.tsx b/docs/app/components/server/button/examples/FullWidth.tsx new file mode 100644 index 0000000000..6ab181403e --- /dev/null +++ b/docs/app/components/server/button/examples/FullWidth.tsx @@ -0,0 +1,8 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; +import { OtherFrame } from '@heathmont/moon-icons-tw'; + +export const FullWidth = () => ( + +); diff --git a/docs/app/components/server/button/examples/Icons.tsx b/docs/app/components/server/button/examples/Icons.tsx new file mode 100644 index 0000000000..33c832b146 --- /dev/null +++ b/docs/app/components/server/button/examples/Icons.tsx @@ -0,0 +1,9 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; +import { OtherFrame } from '@heathmont/moon-icons-tw'; + +export const Icons = () => ( + <> + + + +); diff --git a/docs/app/components/server/button/examples/Multiline.tsx b/docs/app/components/server/button/examples/Multiline.tsx new file mode 100644 index 0000000000..526b9889b6 --- /dev/null +++ b/docs/app/components/server/button/examples/Multiline.tsx @@ -0,0 +1,12 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; + +export const Multiline = () => ( + +); diff --git a/docs/app/components/server/button/examples/Sizes.tsx b/docs/app/components/server/button/examples/Sizes.tsx new file mode 100644 index 0000000000..95831ea1ed --- /dev/null +++ b/docs/app/components/server/button/examples/Sizes.tsx @@ -0,0 +1,11 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; + +export const Sizes = () => ( + <> + + + + + + +); diff --git a/docs/app/components/server/button/examples/Variants.tsx b/docs/app/components/server/button/examples/Variants.tsx new file mode 100644 index 0000000000..df384a83b9 --- /dev/null +++ b/docs/app/components/server/button/examples/Variants.tsx @@ -0,0 +1,9 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; + +export const Variants = () => ( + <> + + + + +); diff --git a/docs/app/components/server/button/page.tsx b/docs/app/components/server/button/page.tsx new file mode 100644 index 0000000000..dc88a8f0f4 --- /dev/null +++ b/docs/app/components/server/button/page.tsx @@ -0,0 +1,64 @@ +import { Animations } from '@/app/components/server/button/examples/Animations'; +import { Default } from '@/app/components/server/button/examples/Default'; +import { Disabled } from '@/app/components/server/button/examples/Disabled'; +import { FullWidth } from '@/app/components/server/button/examples/FullWidth'; +import { Icons } from '@/app/components/server/button/examples/Icons'; +import { Multiline } from '@/app/components/server/button/examples/Multiline'; +import { Sizes } from '@/app/components/server/button/examples/Sizes'; +import { Variants } from '@/app/components/server/button/examples/Variants'; +import ExampleSection from '@/app/components/shared/ExampleSection'; +import QuickNav from '@/app/components/shared/QuickNav'; +import { getExamples } from '@/app/utils/getExamples'; +import { MDX } from '@/components/MDX'; + +export default async function Home() { + const { server } = await getExamples(); + const examplesList = Object.keys(server.button.examples); + return ( +
+

Button

+ + + } + code={server.button.examples.Default} + /> + } + code={server.button.examples.Sizes} + /> + } + code={server.button.examples.Variants} + /> + } + code={server.button.examples.Icons} + /> + } + code={server.button.examples.FullWidth} + /> + } + code={server.button.examples.Disabled} + /> + } + code={server.button.examples.Animations} + /> + } + code={server.button.examples.Multiline} + /> +
+ ); +} diff --git a/docs/app/components/server/checkbox/description.md b/docs/app/components/server/checkbox/description.md new file mode 100644 index 0000000000..c376928764 --- /dev/null +++ b/docs/app/components/server/checkbox/description.md @@ -0,0 +1,3 @@ +The checkbox is shown as a square box that is ticked (checked) when activated. + +Checkboxes are used to let a user select one or more options of a limited number of choices. diff --git a/docs/app/components/server/checkbox/examples/Default.tsx b/docs/app/components/server/checkbox/examples/Default.tsx new file mode 100644 index 0000000000..5534f0b399 --- /dev/null +++ b/docs/app/components/server/checkbox/examples/Default.tsx @@ -0,0 +1,5 @@ +import Checkbox from '@heathmont/moon-base-tw/lib/checkbox/Checkbox'; + +export const Default = () => ; + +export default Default; diff --git a/docs/app/components/server/checkbox/page.tsx b/docs/app/components/server/checkbox/page.tsx new file mode 100644 index 0000000000..74ea2d5e6f --- /dev/null +++ b/docs/app/components/server/checkbox/page.tsx @@ -0,0 +1,22 @@ +import { Default } from '@/app/components/server/checkbox/examples/Default'; +import ExampleSection from '@/app/components/shared/ExampleSection'; +import QuickNav from '@/app/components/shared/QuickNav'; +import { getExamples } from '@/app/utils/getExamples'; +import { MDX } from '@/components/MDX'; + +export default async function Home() { + const { server } = await getExamples(); + const examplesList = Object.keys(server.checkbox.examples); + return ( +
+

Checkbox

+ + + } + code={server.checkbox.examples.Default} + /> +
+ ); +} diff --git a/docs/app/components/shared/ExampleSection.tsx b/docs/app/components/shared/ExampleSection.tsx index 6dd6842360..937f41ac13 100644 --- a/docs/app/components/shared/ExampleSection.tsx +++ b/docs/app/components/shared/ExampleSection.tsx @@ -9,7 +9,7 @@ type Props = { const ExampleSection = async ({ title, component, code }: Props) => (
-

{title}

+

{title}

diff --git a/docs/app/components/shared/QuickNav.tsx b/docs/app/components/shared/QuickNav.tsx new file mode 100644 index 0000000000..b6fe5e45dc --- /dev/null +++ b/docs/app/components/shared/QuickNav.tsx @@ -0,0 +1,11 @@ +const QuickNav = ({ items }: { items: string[] }) => ( +
    + {items.map((item) => ( +
  • + {item} +
  • + ))} +
+); + +export default QuickNav; diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts index 78b6b6f4ae..d3a9f5e9ea 100644 --- a/docs/app/components/types.ts +++ b/docs/app/components/types.ts @@ -17,16 +17,28 @@ export interface Examples { accordion: { description: 'string'; examples: { + ContentOutsideSizes: 'string'; Default: 'string'; Disabled: 'string'; Sizes: 'string'; - ContentOutsideSizes: 'string'; }; }; - avatar: { + button: { + description: 'string'; + examples: { + Default: 'string'; + Sizes: 'string'; + Variants: 'string'; + Icons: 'string'; + FullWidth: 'string'; + Disabled: 'string'; + Animations: 'string'; + Multiline: 'string'; + }; + }; + checkbox: { description: 'string'; examples: { - Active: 'string'; Default: 'string'; }; }; @@ -37,4 +49,10 @@ export interface Examples { }; }; }; + shared: { + fonts: { + 'DMSans-Regular': 'string'; + 'DMSans-Semibold': 'string'; + }; + }; } diff --git a/docs/app/page.tsx b/docs/app/page.tsx index 62b0fa044f..de2b125ef9 100644 --- a/docs/app/page.tsx +++ b/docs/app/page.tsx @@ -1,23 +1,34 @@ +import Link from 'next/link' import { getExamples } from "./utils/getExamples"; -import { MDX } from "@/components/MDX"; -import { CommandMenu } from "@/components/Search"; export default async function Home() { - const examples = await getExamples(); - - const items = [ - { label: "Aurum" }, - { label: "Argentum" }, - { label: "Zink" }, - { label: "Plumbum" }, - { label: "Test" } - ]; + const { server, client } = await getExamples(); return ( -
- Moon Design System - - +
+

Moon Design System

+ +
+

Server components

+
    + {Object.entries(server).map(([key, _value]) => ( +
  • + {key} +
  • + ))} +
+
+ +
+

Client components

+
    + {Object.entries(client).map(([key, _value]) => ( +
  • + {key} +
  • + ))} +
+
) } diff --git a/docs/package.json b/docs/package.json index 44b0ba0de5..ac38deae74 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "docs", - "version": "10.10.1", + "version": "10.10.2", "private": true, "type": "module", "scripts": { @@ -11,11 +11,11 @@ "lint": "next lint" }, "dependencies": { - "@heathmont/moon-base-tw": "workspace:^10.10.1", - "@heathmont/moon-cmdk-tw": "workspace:^10.10.1", - "@heathmont/moon-core-tw": "workspace:^10.10.1", - "@heathmont/moon-themes-tw": "workspace:^10.10.1", + "@heathmont/moon-base-tw": "workspace:^10.10.2", + "@heathmont/moon-cmdk-tw": "workspace:^10.10.2", + "@heathmont/moon-core-tw": "workspace:^10.10.2", "@heathmont/moon-icons-tw": "9.28.6", + "@heathmont/moon-themes-tw": "workspace:^10.10.2", "@types/node": "20.4.9", "@types/react": "18.2.19", "@types/react-dom": "18.2.7", diff --git a/next-docs/CHANGELOG.md b/next-docs/CHANGELOG.md index 2190150728..56aeb40386 100644 --- a/next-docs/CHANGELOG.md +++ b/next-docs/CHANGELOG.md @@ -1,5 +1,16 @@ # Change Log +## 10.10.2 + +### Patch Changes + +- Deploy 10.10.2 +- Updated dependencies + - @heathmont/moon-table-tw@10.10.2 + - @heathmont/moon-themes-tw@10.10.2 + - @heathmont/moon-cmdk-tw@10.10.2 + - @heathmont/moon-core-tw@10.10.2 + ## 10.10.1 ### Patch Changes diff --git a/next-docs/package.json b/next-docs/package.json index 6a8de91132..b5a7344da8 100644 --- a/next-docs/package.json +++ b/next-docs/package.json @@ -1,6 +1,6 @@ { "name": "next-docs", - "version": "10.10.1", + "version": "10.10.2", "private": true, "scripts": { "dev": "next dev", @@ -19,9 +19,9 @@ "@heathmont/moon-assets": "workspace:^10.7.1", "@heathmont/moon-charts": "workspace:^10.7.1", "@heathmont/moon-components": "workspace:^10.7.1", - "@heathmont/moon-cmdk-tw": "workspace:^10.10.1", + "@heathmont/moon-cmdk-tw": "workspace:^10.10.2", "@heathmont/moon-core": "workspace:^10.7.1", - "@heathmont/moon-core-tw": "workspace:^10.10.1", + "@heathmont/moon-core-tw": "workspace:^10.10.2", "@heathmont/moon-datepicker": "workspace:^10.7.1", "@heathmont/moon-draggabletable": "workspace:^10.7.1", "@heathmont/moon-icons": "workspace:^10.7.1", @@ -30,9 +30,9 @@ "@heathmont/moon-select": "workspace:^10.7.1", "@heathmont/moon-sidebar": "workspace:^10.7.1", "@heathmont/moon-table": "workspace:^10.7.1", - "@heathmont/moon-table-tw": "workspace:^10.10.1", + "@heathmont/moon-table-tw": "workspace:^10.10.2", "@heathmont/moon-themes": "workspace:^10.7.1", - "@heathmont/moon-themes-tw": "workspace:^10.10.1", + "@heathmont/moon-themes-tw": "workspace:^10.10.2", "@heathmont/moon-utils": "workspace:^10.7.1", "@heathmont/moon-icons-tw": "9.28.6", "@hookform/resolvers": "3.2.0", diff --git a/next-docs/pages/components/input.tsx b/next-docs/pages/components/input.tsx index 35527ecd09..2234263080 100644 --- a/next-docs/pages/components/input.tsx +++ b/next-docs/pages/components/input.tsx @@ -4,6 +4,7 @@ import type { ComponentNames } from '../../components/getComponent'; import Layout from '../../components/Layout'; import PropsTable from '../../components/PropsTable'; import Bg from '../../public/examples/input/Bg'; +import Controled from '../../public/examples/input/Controled'; import Default from '../../public/examples/input/Default'; import Sizes from '../../public/examples/input/Sizes'; import States from '../../public/examples/input/States'; @@ -54,6 +55,11 @@ const PageInput = () => { preview={} code={examples ? examples.Types : 'Loading'} /> + } + code={examples ? examples.Controled : 'Loading'} + /> { code={examples ? examples.DeepTable : 'Loading'} /> } code={examples ? examples.ExpandedWithModals : 'Loading'} /> + } + code={examples ? examples.ExpandableCheckboxes : 'Loading'} + /> } diff --git a/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap index b46d1af74d..675bc98288 100644 --- a/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap +++ b/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap @@ -21,7 +21,7 @@ Object { @@ -378,7 +378,7 @@ Object { @@ -506,7 +506,7 @@ Object { @@ -577,7 +577,7 @@ Object { @@ -705,7 +705,7 @@ Object { @@ -765,7 +765,7 @@ Object { @@ -828,7 +828,7 @@ Object { aria-autocomplete="list" aria-expanded="false" aria-label="Without placeholder" - class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5" + class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5" data-headlessui-state="" id="headlessui-combobox-input-:r2l:" placeholder="" @@ -837,7 +837,7 @@ Object { value="" /> @@ -888,7 +888,7 @@ Object { @@ -959,7 +959,7 @@ Object { @@ -1019,7 +1019,7 @@ Object { @@ -1082,7 +1082,7 @@ Object { aria-autocomplete="list" aria-expanded="false" aria-label="Without placeholder" - class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5" + class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5" data-headlessui-state="" id="headlessui-combobox-input-:r2l:" placeholder="" @@ -1091,7 +1091,7 @@ Object { value="" /> @@ -1142,7 +1142,7 @@ Object { @@ -1267,7 +1267,7 @@ Object { @@ -3382,7 +3382,7 @@ Object { @@ -3506,7 +3506,7 @@ Object { @@ -3573,7 +3573,7 @@ Object { @@ -3697,7 +3697,7 @@ Object { @@ -3757,7 +3757,7 @@ Object { @@ -3820,7 +3820,7 @@ Object { aria-autocomplete="list" aria-expanded="false" aria-label="Without placeholder" - class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5" + class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5" data-headlessui-state="" id="headlessui-combobox-input-:rh:" placeholder="" @@ -3829,7 +3829,7 @@ Object { value="" /> @@ -3880,7 +3880,7 @@ Object { @@ -3947,7 +3947,7 @@ Object { @@ -4007,7 +4007,7 @@ Object { @@ -4070,7 +4070,7 @@ Object { aria-autocomplete="list" aria-expanded="false" aria-label="Without placeholder" - class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5" + class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5" data-headlessui-state="" id="headlessui-combobox-input-:rh:" placeholder="" @@ -4079,7 +4079,7 @@ Object { value="" /> @@ -4130,7 +4130,7 @@ Object { @@ -4251,7 +4251,7 @@ Object { @@ -44,7 +44,7 @@ Object { Email @@ -213,7 +213,7 @@ Object { Password @@ -268,7 +268,7 @@ Object { Username @@ -289,7 +289,7 @@ Object { Email @@ -458,7 +458,7 @@ Object { Password @@ -567,11 +567,11 @@ Object { class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs" > @@ -590,11 +590,11 @@ Object { class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs" > @@ -607,11 +607,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -624,11 +624,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -674,11 +674,11 @@ Object { class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs" > @@ -697,11 +697,11 @@ Object { class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs" > @@ -714,11 +714,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -731,11 +731,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -838,7 +838,7 @@ Object { Username @@ -859,7 +859,7 @@ Object { Email @@ -1028,7 +1028,7 @@ Object { Password @@ -1079,7 +1079,7 @@ Object { Username @@ -1100,7 +1100,7 @@ Object { Email @@ -1269,7 +1269,7 @@ Object { Password @@ -1374,11 +1374,11 @@ Object { class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs" > @@ -1397,11 +1397,11 @@ Object { class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs" > @@ -1414,11 +1414,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1431,11 +1431,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1477,11 +1477,11 @@ Object { class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs" > @@ -1500,11 +1500,11 @@ Object { class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs" > @@ -1517,11 +1517,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1534,11 +1534,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > diff --git a/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap index 2181838eae..3aeb31f66f 100644 --- a/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap +++ b/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap @@ -12,14 +12,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -36,14 +36,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -120,14 +120,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -137,14 +137,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" >
@@ -164,14 +164,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -181,14 +181,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" >
@@ -265,14 +265,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-xs" >
@@ -282,14 +282,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -299,14 +299,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -327,14 +327,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-xs" >
@@ -344,14 +344,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -361,14 +361,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -446,14 +446,14 @@ Object { class="flex border-none relative h-fit bg-goku flex-col rounded-moon-i-sm shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-error" >
@@ -463,14 +463,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -480,7 +480,7 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" > @@ -488,7 +488,7 @@ Object { class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0" > @@ -507,7 +507,7 @@ Object { class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0" >
@@ -546,14 +546,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -563,7 +563,7 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" > @@ -571,7 +571,7 @@ Object { class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0" > @@ -590,7 +590,7 @@ Object { class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0" > @@ -685,11 +685,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-t-none [&_input]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0" > @@ -702,11 +702,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2" > @@ -715,11 +715,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-s-none rtl:[&_input]:input-rsb-hidden ltr:[&_input]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0" > @@ -776,7 +776,7 @@ Object { class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0" >
@@ -785,7 +785,7 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" > @@ -905,11 +905,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2" > @@ -981,11 +981,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-b-none [&_input]:input-bbb-hidden" > @@ -994,11 +994,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-t-none [&_input]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0" > @@ -1011,11 +1011,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2" > @@ -1024,11 +1024,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-s-none rtl:[&_input]:input-rsb-hidden ltr:[&_input]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0" > @@ -1085,7 +1085,7 @@ Object { class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0" >
@@ -1094,7 +1094,7 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" > @@ -1214,11 +1214,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2" > @@ -1338,14 +1338,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -1358,14 +1358,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -1438,14 +1438,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -1455,14 +1455,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" >
@@ -1478,14 +1478,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -1495,14 +1495,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" >
@@ -1575,14 +1575,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-xs" >
@@ -1592,14 +1592,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -1609,14 +1609,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -1633,14 +1633,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-xs" >
@@ -1650,14 +1650,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -1667,14 +1667,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -1748,14 +1748,14 @@ Object { class="flex border-none relative h-fit bg-goku flex-col rounded-moon-i-sm shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-error" >
@@ -1765,14 +1765,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -1782,7 +1782,7 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" > @@ -1790,7 +1790,7 @@ Object { class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0" > @@ -1809,7 +1809,7 @@ Object { class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0" >
@@ -1844,14 +1844,14 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" >
@@ -1861,7 +1861,7 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm" > @@ -1869,7 +1869,7 @@ Object { class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0" > @@ -1888,7 +1888,7 @@ Object { class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0" > @@ -1979,11 +1979,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-t-none [&_input]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0" > @@ -1996,11 +1996,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2" > @@ -2009,11 +2009,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-s-none rtl:[&_input]:input-rsb-hidden ltr:[&_input]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0" > @@ -2070,7 +2070,7 @@ Object { class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0" >
@@ -2079,7 +2079,7 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" > @@ -2199,11 +2199,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2" > @@ -2271,11 +2271,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-b-none [&_input]:input-bbb-hidden" > @@ -2284,11 +2284,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-t-none [&_input]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0" > @@ -2301,11 +2301,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2" > @@ -2314,11 +2314,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-s-none rtl:[&_input]:input-rsb-hidden ltr:[&_input]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0" > @@ -2375,7 +2375,7 @@ Object { class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0" >
@@ -2384,7 +2384,7 @@ Object { class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm" > @@ -2504,11 +2504,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2" > diff --git a/next-docs/public/examples/input/Controled.tsx b/next-docs/public/examples/input/Controled.tsx new file mode 100644 index 0000000000..e17e00c9fa --- /dev/null +++ b/next-docs/public/examples/input/Controled.tsx @@ -0,0 +1,22 @@ +import { Input } from '@heathmont/moon-core-tw'; +import { useState } from 'react'; + +const Example = () => { + const [color, setColor] = useState('FFFFFF'); + return ( +
+ { + setColor(e.target.value); + }} + /> +

+ Result: {color} +

+
+ ); +}; + +export default Example; diff --git a/next-docs/public/examples/input/CustomDate.tsx b/next-docs/public/examples/input/CustomDate.tsx new file mode 100644 index 0000000000..d18b21062e --- /dev/null +++ b/next-docs/public/examples/input/CustomDate.tsx @@ -0,0 +1,56 @@ +//This exemple should be discussed about separate date-picker component +import { Input, Label } from '@heathmont/moon-core-tw'; +import { TimeCalendarDate } from '@heathmont/moon-icons-tw'; + +const Example = () => ( + <> +
+
+ +
+ { + e.target.type = 'date'; + e.target?.showPicker(); + }} + onBlur={(e) => (e.target.type = 'text')} + /> + + + +
+
+
+ +
+ { + e.target.type = 'time'; + e.target?.showPicker(); + }} + onBlur={(e) => (e.target.type = 'text')} + /> + +
+
+
+ + +
+
+ +); + +export default Example; diff --git a/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap index 25323f6234..84cc62364d 100644 --- a/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap +++ b/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap @@ -21,7 +21,7 @@ Object { Medium (Default: md) +
+
+
+ +

+ + Result: + + + FFFFFF +

+
+
+
+ , + "container":
+
+
+ +

+ + Result: + + + FFFFFF +

+
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + exports[`Input in RTL renders Default 1`] = ` Object { "asFragment": [Function], @@ -133,7 +240,7 @@ Object { >
@@ -144,7 +251,7 @@ Object { >
, @@ -223,7 +330,7 @@ Object { Small (sm) @@ -629,7 +736,7 @@ Object { @@ -644,7 +751,7 @@ Object { Time @@ -663,7 +770,7 @@ Object { Datetime local @@ -692,7 +799,7 @@ Object { Password @@ -710,7 +817,7 @@ Object { Search @@ -724,7 +831,7 @@ Object { Tel @@ -738,7 +845,7 @@ Object { Url @@ -763,7 +870,7 @@ Object { Number @@ -778,7 +885,7 @@ Object { @@ -793,7 +900,7 @@ Object { Time @@ -812,7 +919,7 @@ Object { Datetime local @@ -841,7 +948,7 @@ Object { Password @@ -859,7 +966,7 @@ Object { Search @@ -873,7 +980,7 @@ Object { Tel @@ -887,7 +994,7 @@ Object { Url @@ -967,7 +1074,7 @@ Object { Medium (Default: md) +
+
+ +

+ + Result: + + + FFFFFF +

+
+
+ , + "container":
+
+ +

+ + Result: + + + FFFFFF +

+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + exports[`Input renders Default 1`] = ` Object { "asFragment": [Function], @@ -1071,14 +1277,14 @@ Object {
, "container":
, "debug": [Function], @@ -1153,7 +1359,7 @@ Object { Small (sm) @@ -1543,7 +1749,7 @@ Object { @@ -1558,7 +1764,7 @@ Object { Time @@ -1577,7 +1783,7 @@ Object { Datetime local @@ -1606,7 +1812,7 @@ Object { Password @@ -1624,7 +1830,7 @@ Object { Search @@ -1638,7 +1844,7 @@ Object { Tel @@ -1652,7 +1858,7 @@ Object { Url @@ -1673,7 +1879,7 @@ Object { Number @@ -1688,7 +1894,7 @@ Object { @@ -1703,7 +1909,7 @@ Object { Time @@ -1722,7 +1928,7 @@ Object { Datetime local @@ -1751,7 +1957,7 @@ Object { Password @@ -1769,7 +1975,7 @@ Object { Search @@ -1783,7 +1989,7 @@ Object { Tel @@ -1797,7 +2003,7 @@ Object { Url diff --git a/next-docs/public/examples/input/__tests__/index.test.tsx b/next-docs/public/examples/input/__tests__/index.test.tsx index 0c22827837..35913cd9e7 100644 --- a/next-docs/public/examples/input/__tests__/index.test.tsx +++ b/next-docs/public/examples/input/__tests__/index.test.tsx @@ -8,6 +8,7 @@ import Default from '../Default'; import Sizes from '../Sizes'; import Types from '../Types'; import States from '../States'; +import Controled from '../Controled'; const withRtl = (component: JSX.Element) =>
{component}
; @@ -33,6 +34,10 @@ describe('Input', () => { const tree = render(); expect(tree).toMatchSnapshot(); }); + it('renders Controled', () => { + const tree = render(); + expect(tree).toMatchSnapshot(); + }); }); describe('Input in RTL', () => { @@ -57,4 +62,8 @@ describe('Input in RTL', () => { const tree = render(withRtl()); expect(tree).toMatchSnapshot(); }); + it('renders Controled', () => { + const tree = render(withRtl()); + expect(tree).toMatchSnapshot(); + }); }); diff --git a/next-docs/public/examples/insetInput/Default.tsx b/next-docs/public/examples/insetInput/Default.tsx index 575e382f55..6b07ce9378 100644 --- a/next-docs/public/examples/insetInput/Default.tsx +++ b/next-docs/public/examples/insetInput/Default.tsx @@ -1,7 +1,7 @@ import { InsetInput } from '@heathmont/moon-core-tw'; const Example = () => ( - + Label ); diff --git a/next-docs/public/examples/insetInput/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/insetInput/__tests__/__snapshots__/index.test.tsx.snap index c6ff6e2f9b..f7801eecc4 100644 --- a/next-docs/public/examples/insetInput/__tests__/__snapshots__/index.test.tsx.snap +++ b/next-docs/public/examples/insetInput/__tests__/__snapshots__/index.test.tsx.snap @@ -18,11 +18,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-beerus [&_input]:text-piccolo" > @@ -52,11 +52,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-beerus [&_input]:text-piccolo" > @@ -137,11 +137,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -157,11 +158,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -240,12 +242,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku opacity-60 cursor-not-allowed" > @@ -264,11 +266,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -287,13 +289,13 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -323,12 +325,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku opacity-60 cursor-not-allowed" > @@ -347,11 +349,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -370,13 +372,13 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -460,12 +462,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -475,12 +477,12 @@ Object { > @@ -490,11 +492,11 @@ Object { > @@ -508,12 +510,12 @@ Object { > @@ -522,12 +524,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -536,12 +538,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -554,12 +556,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -568,12 +570,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -582,12 +584,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -607,12 +609,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -622,12 +624,12 @@ Object { > @@ -637,11 +639,11 @@ Object { > @@ -655,12 +657,12 @@ Object { > @@ -669,12 +671,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -683,12 +685,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -701,12 +703,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -715,12 +717,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -729,12 +731,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -811,11 +813,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-beerus [&_input]:text-piccolo" > @@ -841,11 +843,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-beerus [&_input]:text-piccolo" > @@ -922,11 +924,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -938,11 +941,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1017,12 +1021,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku opacity-60 cursor-not-allowed" > @@ -1041,11 +1045,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1064,13 +1068,13 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1096,12 +1100,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku opacity-60 cursor-not-allowed" > @@ -1120,11 +1124,11 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1143,13 +1147,13 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1229,12 +1233,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1244,12 +1248,12 @@ Object { > @@ -1259,11 +1263,11 @@ Object { > @@ -1277,12 +1281,12 @@ Object { > @@ -1291,12 +1295,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1305,12 +1309,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1323,12 +1327,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1337,12 +1341,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1351,12 +1355,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1372,12 +1376,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1387,12 +1391,12 @@ Object { > @@ -1402,11 +1406,11 @@ Object { > @@ -1420,12 +1424,12 @@ Object { > @@ -1434,12 +1438,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1448,12 +1452,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1466,12 +1470,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1480,12 +1484,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > @@ -1494,12 +1498,12 @@ Object { class="w-full max-w-full relative rounded-moon-i-sm bg-goku" > diff --git a/next-docs/public/examples/table/ExpandableCheckboxes.tsx b/next-docs/public/examples/table/ExpandableCheckboxes.tsx new file mode 100644 index 0000000000..02427dba2c --- /dev/null +++ b/next-docs/public/examples/table/ExpandableCheckboxes.tsx @@ -0,0 +1,317 @@ +import { Checkbox, Chip, Tooltip, mergeClassnames } from "@heathmont/moon-core-tw"; +import { OtherFrame } from "@heathmont/moon-icons-tw"; +import { Table } from "@heathmont/moon-table-tw"; +import React, { useState } from "react"; + +interface HeaderProps { + rows: []; + rowsById: { [key: string]: boolean }; + isAllRowsExpanded: boolean; + getToggleAllRowsExpandedProps: () => React.HTMLAttributes; +} + +const Example = () => { + /** + * The PREFIX is necessary if you use several different tables with checkboxes on the same page. + * Each table should have its own unique PREFIX to avoid assigning identical indexes to elements. + * When using only one table, the PREFIX can be omitted. + */ + const PREFIX = "any__unique__string__for__each__table"; + + const [selected, setSelected] = useState<{ [key: string]: boolean }>({}); + + const columnShift = (depth: number) => { + const shiftMap: { [key: number]: string } = [ + 'ps-0', + 'ps-6', + 'ps-12', + ]; + + return shiftMap[depth]; + } + + const checkIfSelected = (id: string, canExpand: boolean, rowsById: { [key: string]: boolean }) => { + return canExpand + ? Object.keys(rowsById) + .filter((rowId) => rowId.indexOf(id) === 0 && rowId !== id) + .every((rowId) => selected[rowId] === true) + : selected[id] === true; + } + + const checkIfIndeterminate = (id: string, rowsById: { [key: string]: boolean }) => { + const matches = Object.keys(rowsById) + .filter((rowId) => rowId.indexOf(id) === 0 && rowId !== id); + return !matches.every((rowId) => selected[rowId] === true) && matches.some((rowId) => selected[rowId] === true); + } + + const columnsInitial = [ + { + 'Header': 'Expand/Select', + 'sticky': 'left', + columns: [ + { + 'id': 'any_unique_string_required', + Header: ({ + rows, + rowsById, + getToggleAllRowsExpandedProps, + isAllRowsExpanded, + }: HeaderProps) => ( +
+
+ { e.stopPropagation() }} + /> +
+ { + {isAllRowsExpanded ? '👇' : '👉'} + } +
+ ), + Cell: ({ row, rowsById }: any) => ( +
{ + if ((e.target as unknown as HTMLElement).tagName === 'SPAN') e.stopPropagation(); + }} + > +
+ e.stopPropagation()} + /> +
+ {row.canExpand ? ( + + {row.isExpanded ? '👇' : '👉'} + + ) : null} +
+ ) + }, + ], + }, + { + Header: 'Name', + sticky: 'left', + columns: [ + { + Header: 'First Name', + accessor: 'firstName', + }, + ], + }, + { + Header: 'Info', + columns: [ + { + Header: 'Age', + accessor: 'age', + width: 50, + }, + { + Header: 'Visits', + accessor: 'visits', + }, + { + Header: 'Activity', + accessor: 'activity', + }, + { + Header: 'Status', + width: 60, + accessor: 'status', + }, + { + Header: 'Profile Progress', + Footer: 'Profile Progress', + accessor: 'progress', + }, + ], + }, + { + Header: 'Actions', + sticky: 'right', + columns: [ + { + Header: 'Actions', + accessor: 'actions', + Footer: '', + }, + ], + }, + ]; + + const tooltip = () => ( + + + } + /> + + + Round details + + + + ); + + const makeData = () => [ + { + firstName: 'Test lvl1', + age: 36, + visits: 50, + progress: 20, + status: 19, + activity: 54, + actions: tooltip(), + subRows: [ + { + firstName: 'Sub test lvl2', + age: 96, + visits: 8, + progress: 2, + status: 97, + activity: 23, + actions: tooltip(), + subRows: [ + { + firstName: 'Sub test lvl3', + age: 63, + visits: 82, + progress: 59, + status: 52, + activity: 46, + actions: tooltip(), + }, + { + firstName: 'Sub test lvl3', + age: 64, + visits: 35, + progress: 78, + status: 65, + activity: 5, + actions: tooltip(), + }, + { + firstName: 'Sub test lvl3', + age: 12, + visits: 4, + progress: 44, + status: 98, + activity: 5, + actions: tooltip(), + }, + ], + }, + { + firstName: 'Sub test lvl2', + age: 74, + visits: 5, + progress: 1, + status: 86, + activity: 2, + actions: tooltip(), + subRows: [ + { + firstName: 'Sub test lvl3', + age: 89, + visits: 98, + progress: 54, + status: 24, + activity: 43, + actions: tooltip(), + }, + { + firstName: 'Sub test lvl3', + age: 52, + visits: 25, + progress: 25, + status: 97, + activity: 35, + actions: tooltip(), + }, + { + firstName: 'Sub test lvl3', + age: 55, + visits: 54, + progress: 24, + status: 56, + activity: 33, + actions: tooltip(), + }, + ], + }, + { + firstName: 'Sub test lvl2', + age: 53, + visits: 63, + progress: 24, + status: 48, + activity: 3, + actions: tooltip(), + subRows: [ + { + firstName: 'Sub test lvl3', + age: 4, + visits: 653, + progress: 36, + status: 44, + activity: 43, + actions: tooltip(), + }, + { + firstName: 'Sub test lvl3', + age: 49, + visits: 45, + progress: 454, + status: 35, + activity: 4, + actions: tooltip(), + }, + ], + }, + ], + } + ]; + + const columns = React.useMemo(() => columnsInitial, [selected]); + const data = React.useMemo(() => makeData(), []); + + const defaultColumn = React.useMemo( + () => ({ + minWidth: 100, + width: 150, + maxWidth: 400, + }), []); + + return ( + (rows) => { + setSelected(rows.reduce((acc: { [key: string]: boolean }, item) => { + acc[item.id] = true; + return acc; + }, {}) + ); + }} + /> + ); +} + +export default Example; diff --git a/next-docs/public/examples/table/ExpandedWithModals.tsx b/next-docs/public/examples/table/ExpandedWithModals.tsx index df812f44a7..3ab8d4fb19 100644 --- a/next-docs/public/examples/table/ExpandedWithModals.tsx +++ b/next-docs/public/examples/table/ExpandedWithModals.tsx @@ -2,7 +2,6 @@ import React, { ReactNode, useState } from 'react'; import { Table } from '@heathmont/moon-table-tw'; import { Button, Chip, Modal, Tooltip } from '@heathmont/moon-core-tw'; import { OtherFrame } from '@heathmont/moon-icons-tw'; -import { number } from 'zod'; interface HeaderProps { isAllRowsExpanded: boolean; @@ -107,7 +106,8 @@ const Example = () => { onClick={() => { setTitle(modal.title); setPanel(modal.panel); - openModal(); }} + openModal(); + }} /> @@ -128,7 +128,7 @@ const Example = () => {
  • Activity: {Math.floor(index * 100)}
  • Actions: {Math.floor(index * 100)}
  • - ) + ) }; } diff --git a/next-docs/public/examples/table/LongData.tsx b/next-docs/public/examples/table/LongData.tsx index 60a5ea9d6a..0f511192f1 100644 --- a/next-docs/public/examples/table/LongData.tsx +++ b/next-docs/public/examples/table/LongData.tsx @@ -48,8 +48,6 @@ const Example = () => { 'Header': 'Currency', 'accessor': 'currency', 'Footer': '', - /*'maxWidth': Number.MAX_SAFE_INTEGER, - 'width': 80 */ }, ], }, diff --git a/next-docs/public/examples/table/SelectableCheckboxes.tsx b/next-docs/public/examples/table/SelectableCheckboxes.tsx index 2dfd060dd2..fa9844a9e6 100644 --- a/next-docs/public/examples/table/SelectableCheckboxes.tsx +++ b/next-docs/public/examples/table/SelectableCheckboxes.tsx @@ -1,8 +1,56 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Table } from '@heathmont/moon-table-tw'; +import { Checkbox } from '@heathmont/moon-core-tw'; + +interface HeaderProps { + rows: []; + rowsById: { [key: string]: boolean }; +} const Example = () => { + /** + * The PREFIX is necessary if you use several different tables with checkboxes on the same page. + * Each table should have its own unique PREFIX to avoid assigning identical indexes to elements. + * When using only one table, the PREFIX can be omitted. + */ + const PREFIX = "any_unique_string_for_each_table"; + + const [selected, setSelected] = useState<{ [key: string]: boolean }>({}); + const columnsInitial = [ + { + 'Header': 'Select', + 'sticky': 'left', + 'Footer': '', + columns: [ + { + 'id': '_any_unique_string_required', + Header: ({ + rows, + rowsById, + }: HeaderProps) => ( +
    + { e.stopPropagation() }} + /> +
    + ), + Cell: ({ row, rowsById }: any) => ( +
    + e.stopPropagation()} + /> +
    + ), + Footer: '', + }, + ], + }, { Header: 'Name', sticky: 'left', @@ -72,7 +120,6 @@ const Example = () => { progress: {Math.floor(index * 100)}, status: Math.floor(index * 100), activity: Math.floor(index * 100), - isSelected: index === 3, }; }); }; @@ -86,7 +133,7 @@ const Example = () => { [] ); - const columns = React.useMemo(() => columnsInitial, []); + const columns = React.useMemo(() => columnsInitial, [selected]); const data = React.useMemo(() => makeData(40), []); return ( @@ -99,8 +146,13 @@ const Example = () => { withFooter={true} selectable={true} useCheckbox={true} - getOnRowSelect={() => (rows: any) => { + getOnRowSelect={() => (rows) => { console.log(`IDs of selected rows - ${rows.map((row: any) => row.id)}`); + setSelected(rows.reduce((acc: {[key: string]: boolean}, item) => { + acc[item.id] = true; + return acc; + }, {}) + ); }} /> ); diff --git a/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap index f96be3f3c5..c3d385f921 100644 --- a/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap +++ b/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap @@ -33741,7 +33741,7 @@ Object { } `; -exports[`Table in RTL renders ExpandedRows 1`] = ` +exports[`Table in RTL renders ExpandableCheckboxes 1`] = ` Object { "asFragment": [Function], "baseElement": @@ -33760,7 +33760,7 @@ Object {
    - Expand + Expand/Select
    Info
    - Progress + Actions
    - - 👉 - +
    + +
    + + 👇 + +
    +
    + Profile Progress +
    - Profile Progress + Actions
    +
    - - 👉 - +
    + +
    + + 👇 + +
    - Test + Test lvl1
    - 0 + 36
    - 0 + 50
    - 0 -
    -
    - 0 -
    -
    - - 0 - -
    -
    -
    -
    - - 👉 - -
    -
    - Test + 54
    - - 30 - + 19
    - 100 + 20
    -
    - 100 -
    -
    - 100 -
    - - 100 - +
    - - 👉 - +
    + +
    + + 👇 + +
    - Test + Sub test lvl2
    - 60 + 96
    - 200 + 8
    - 200 -
    -
    - 200 -
    -
    - - 200 - -
    -
    -
    -
    - - 👉 - -
    -
    - Test + 23
    - - 90 - + 97
    - 300 + 2
    -
    - 300 -
    -
    - 300 -
    - - 300 - +
    - - 👉 - +
    + +
    +
    - Test + Sub test lvl3
    - 120 + 63
    - 400 + 82
    - 400 -
    -
    - 400 -
    -
    - - 400 - -
    -
    -
    -
    - - 👉 - -
    -
    - Test + 46
    - - 150 - + 52
    - 500 + 59
    -
    - 500 -
    -
    - 500 -
    - - 500 - +
    - - 👉 - +
    + +
    +
    - Test + Sub test lvl3
    - 180 + 64
    - 600 + 35
    - 600 -
    -
    - 600 -
    -
    - - 600 - -
    -
    -
    -
    - - 👉 - -
    -
    - Test + 5
    - - 210 - + 65
    - 700 + 78
    -
    - 700 -
    -
    - 700 -
    - - 700 - +
    - - 👉 - +
    + +
    +
    - Test + Sub test lvl3
    - 240 + 12
    - 800 + 4
    - 800 -
    -
    - 800 -
    -
    - - 800 - -
    -
    -
    -
    - - 👉 - -
    -
    - Test + 5
    - - 270 - + 98
    - 900 + 44
    -
    - 900 -
    -
    - 900 -
    - - 900 - +
    - - 👉 - +
    + +
    + + 👇 + +
    - Test + Sub test lvl2
    - 300 + 74
    - 1000 + 5
    - 1000 -
    -
    - 1000 -
    -
    - - 1000 - -
    -
    -
    -
    - - 👉 - -
    -
    - Test + 2
    - - 330 - + 86
    - 1100 + 1
    -
    - 1100 -
    -
    - 1100 -
    - - 1100 - +
    - - 👉 - +
    + +
    +
    - Test + Sub test lvl3
    - 360 + 89
    - 1200 + 98
    - 1200 + 43
    - 1200 + 24 +
    +
    + + 54 +
    - - 1200 - +
    - - 👉 - +
    + +
    +
    - Test + Sub test lvl3
    - 390 + 52
    - 1300 + 25
    - 1300 + 35
    - 1300 + 97 +
    +
    + + 25 +
    - - 1300 - +
    - - 👉 - +
    + +
    +
    - Test + Sub test lvl3
    - 420 + 55
    - 1400 + 54
    - 1400 + 33
    - 1400 + 56 +
    +
    + + 24 +
    - - 1400 - +
    - - 👉 - +
    + +
    + + 👇 + +
    - Test + Sub test lvl2
    - 450 + 53
    - 1500 + 63
    - 1500 + 3
    - 1500 + 48 +
    +
    + + 24 +
    - - 1500 - +
    - - 👉 - +
    + +
    +
    - Test + Sub test lvl3
    - 480 + 4
    - 1600 + 653
    - 1600 + 43
    - 1600 + 44 +
    +
    + + 36 +
    - - 1600 - +
    - - 👉 - +
    + +
    +
    - Test + Sub test lvl3
    - 510 + 49
    - 1700 + 45
    - 1700 + 4
    - 1700 + 35
    - 1700 + 454
    -
    -
    + +
    +
    +
    + + + + , + "container":
    +
    +
    +
    +
    +
    + Expand/Select + +
    + Name + +
    + Info + +
    + Actions + +
    +
    +
    +
    +
    + +
    + + 👇 + +
    + +
    + First Name + +
    + Age + +
    + Visits + +
    + Activity + +
    + Status + +
    + Profile Progress + +
    + Actions + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + + 👇 + +
    +
    +
    + Test lvl1 +
    +
    + + 36 + +
    +
    + + 50 + +
    +
    + 54 +
    +
    + 19 +
    +
    + + 20 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + + 👇 + +
    +
    +
    + Sub test lvl2 +
    +
    + + 96 + +
    +
    + + 8 + +
    +
    + 23 +
    +
    + 97 +
    +
    + + 2 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + Sub test lvl3 +
    +
    + + 63 + +
    +
    + + 82 + +
    +
    + 46 +
    +
    + 52 +
    +
    + + 59 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + Sub test lvl3 +
    +
    + + 64 + +
    +
    + + 35 + +
    +
    + 5 +
    +
    + 65 +
    +
    + + 78 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + Sub test lvl3 +
    +
    + + 12 + +
    +
    + + 4 + +
    +
    + 5 +
    +
    + 98 +
    +
    + + 44 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + + 👇 + +
    +
    +
    + Sub test lvl2 +
    +
    + + 74 + +
    +
    + + 5 + +
    +
    + 2 +
    +
    + 86 +
    +
    + + 1 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + Sub test lvl3 +
    +
    + + 89 + +
    +
    + + 98 + +
    +
    + 43 +
    +
    + 24 +
    +
    + + 54 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + Sub test lvl3 +
    +
    + + 52 + +
    +
    + + 25 + +
    +
    + 35 +
    +
    + 97 +
    +
    + + 25 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + Sub test lvl3 +
    +
    + + 55 + +
    +
    + + 54 + +
    +
    + 33 +
    +
    + 56 +
    +
    + + 24 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + + 👇 + +
    +
    +
    + Sub test lvl2 +
    +
    + + 53 + +
    +
    + + 63 + +
    +
    + 3 +
    +
    + 48 +
    +
    + + 24 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + Sub test lvl3 +
    +
    + + 4 + +
    +
    + + 653 + +
    +
    + 43 +
    +
    + 44 +
    +
    + + 36 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + Sub test lvl3 +
    +
    + + 49 + +
    +
    + + 45 + +
    +
    + 4 +
    +
    + 35 +
    +
    + + 454 + +
    +
    + +
    +
    +
    +
    +
    +
    , + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`Table in RTL renders ExpandedRows 1`] = ` +Object { + "asFragment": [Function], + "baseElement": +
    +
    +
    +
    +
    +
    + Expand + +
    + Name + +
    + Info + +
    + Progress + +
    +
    +
    + + 👉 + + +
    + First Name + +
    + Age + +
    + Visits + +
    + Activity + +
    + Status + +
    + Profile Progress + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 0 + +
    +
    + + 0 + +
    +
    + 0 +
    +
    + 0 +
    +
    + + 0 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 30 + +
    +
    + + 100 + +
    +
    + 100 +
    +
    + 100 +
    +
    + + 100 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 60 + +
    +
    + + 200 + +
    +
    + 200 +
    +
    + 200 +
    +
    + + 200 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 90 + +
    +
    + + 300 + +
    +
    + 300 +
    +
    + 300 +
    +
    + + 300 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 120 + +
    +
    + + 400 + +
    +
    + 400 +
    +
    + 400 +
    +
    + + 400 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 150 + +
    +
    + + 500 + +
    +
    + 500 +
    +
    + 500 +
    +
    + + 500 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 180 + +
    +
    + + 600 + +
    +
    + 600 +
    +
    + 600 +
    +
    + + 600 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 210 + +
    +
    + + 700 + +
    +
    + 700 +
    +
    + 700 +
    +
    + + 700 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 240 + +
    +
    + + 800 + +
    +
    + 800 +
    +
    + 800 +
    +
    + + 800 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 270 + +
    +
    + + 900 + +
    +
    + 900 +
    +
    + 900 +
    +
    + + 900 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 300 + +
    +
    + + 1000 + +
    +
    + 1000 +
    +
    + 1000 +
    +
    + + 1000 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 330 + +
    +
    + + 1100 + +
    +
    + 1100 +
    +
    + 1100 +
    +
    + + 1100 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 360 + +
    +
    + + 1200 + +
    +
    + 1200 +
    +
    + 1200 +
    +
    + + 1200 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 390 + +
    +
    + + 1300 + +
    +
    + 1300 +
    +
    + 1300 +
    +
    + + 1300 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 420 + +
    +
    + + 1400 + +
    +
    + 1400 +
    +
    + 1400 +
    +
    + + 1400 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 450 + +
    +
    + + 1500 + +
    +
    + 1500 +
    +
    + 1500 +
    +
    + + 1500 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 480 + +
    +
    + + 1600 + +
    +
    + 1600 +
    +
    + 1600 +
    +
    + + 1600 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 510 + +
    +
    + + 1700 + +
    +
    + 1700 +
    +
    + 1700 +
    +
    + + 1700 + +
    +
    +
    +
    @@ -63474,15 +67353,30 @@ Object {
    +
    + Select +
    Name
    +
    + +
    + +
    First Name
    Last Name
    +
    @@ -63748,7 +67701,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -63799,24 +67752,26 @@ Object {
    @@ -63855,7 +67810,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -63906,24 +67861,26 @@ Object {
    @@ -63962,7 +67919,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -64013,24 +67970,26 @@ Object {
    @@ -64069,7 +68028,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -64120,24 +68079,26 @@ Object {
    @@ -64176,7 +68137,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -64227,238 +68188,26 @@ Object {
    -
    -
    - -
    -
    -
    - Test -
    -
    - Test -
    -
    - - 150 - -
    -
    - - 500 - -
    -
    - 500 -
    -
    - 500 -
    -
    - - 500 - -
    -
    -
    -
    - -
    -
    -
    - Test -
    -
    - Test -
    -
    - - 180 - -
    -
    - - 600 - -
    -
    - 600 -
    -
    - 600 -
    -
    - - 600 - -
    -
    -
    -
    +
    + Test +
    +
    + + 150 + +
    +
    + + 500 + +
    +
    + 500 +
    +
    + 500 +
    +
    + + 500 + +
    +
    +
    +
    +
    + +
    +
    +
    Test
    @@ -64497,10 +68355,119 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" + > + Test +
    +
    + + 180 + +
    +
    + + 600 + +
    +
    + 600 +
    +
    + 600 +
    +
    + + 600 + +
    +
    +
    +
    +
    + +
    +
    +
    Test
    +
    + Test +
    @@ -64604,7 +68573,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -64655,24 +68624,26 @@ Object {
    @@ -64711,7 +68682,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -64762,24 +68733,26 @@ Object {
    @@ -64818,7 +68791,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -64869,24 +68842,26 @@ Object {
    @@ -64925,7 +68900,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -64976,24 +68951,26 @@ Object {
    @@ -65032,7 +69009,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -65083,24 +69060,26 @@ Object {
    @@ -65139,7 +69118,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -65190,24 +69169,26 @@ Object {
    @@ -65246,7 +69227,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -65297,24 +69278,26 @@ Object {
    @@ -65353,7 +69336,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -65404,24 +69387,26 @@ Object {
    @@ -65460,7 +69445,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -65511,24 +69496,26 @@ Object {
    @@ -65567,7 +69554,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -65618,24 +69605,26 @@ Object {
    @@ -65674,7 +69663,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -65725,24 +69714,26 @@ Object {
    @@ -65781,7 +69772,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -65832,24 +69823,26 @@ Object {
    @@ -65888,7 +69881,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -65939,24 +69932,26 @@ Object {
    @@ -65995,7 +69990,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -66046,24 +70041,26 @@ Object {
    @@ -66102,7 +70099,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -66153,24 +70150,26 @@ Object {
    @@ -66209,7 +70208,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -66260,24 +70259,26 @@ Object {
    @@ -66316,7 +70317,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -66367,24 +70368,26 @@ Object {
    @@ -66423,7 +70426,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -66474,24 +70477,26 @@ Object {
    @@ -66530,7 +70535,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -66581,24 +70586,26 @@ Object {
    @@ -66637,7 +70644,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -66688,24 +70695,26 @@ Object {
    @@ -66744,7 +70753,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -66795,24 +70804,26 @@ Object {
    @@ -66851,7 +70862,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -66902,24 +70913,26 @@ Object {
    @@ -66958,7 +70971,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -67009,24 +71022,26 @@ Object {
    @@ -67065,7 +71080,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -67116,24 +71131,26 @@ Object {
    @@ -67172,7 +71189,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -67223,24 +71240,26 @@ Object {
    @@ -67279,7 +71298,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -67330,24 +71349,26 @@ Object {
    @@ -67386,7 +71407,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -67437,24 +71458,26 @@ Object {
    @@ -67493,7 +71516,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -67544,24 +71567,26 @@ Object {
    @@ -67600,7 +71625,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -67651,24 +71676,26 @@ Object {
    @@ -67707,7 +71734,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -67758,24 +71785,26 @@ Object {
    @@ -67814,7 +71843,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -67865,24 +71894,26 @@ Object {
    @@ -67921,7 +71952,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -67976,7 +72007,7 @@ Object {
    +
    +
    +
    +
    Name footer
    +
    + Select +
    Name
    +
    + +
    + +
    First Name
    Last Name
    +
    @@ -68421,7 +72554,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -68472,24 +72605,26 @@ Object {
    @@ -68528,7 +72663,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -68579,24 +72714,26 @@ Object {
    @@ -68635,7 +72772,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -68686,238 +72823,26 @@ Object {
    -
    -
    - -
    -
    -
    - Test -
    -
    - Test -
    -
    - - 90 - -
    -
    - - 300 - -
    -
    - 300 -
    -
    - 300 -
    -
    - - 300 - -
    -
    -
    -
    - -
    -
    -
    - Test -
    -
    - Test -
    -
    - - 120 - -
    -
    - - 400 - -
    -
    - 400 -
    -
    - 400 -
    -
    - - 400 - -
    -
    -
    -
    +
    + Test +
    +
    + + 90 + +
    +
    + + 300 + +
    +
    + 300 +
    +
    + 300 +
    +
    + + 300 + +
    +
    +
    +
    +
    + +
    +
    +
    Test
    @@ -68956,10 +72990,119 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" + > + Test +
    +
    + + 120 + +
    +
    + + 400 + +
    +
    + 400 +
    +
    + 400 +
    +
    + + 400 + +
    +
    +
    +
    +
    + +
    +
    +
    Test
    +
    + Test +
    @@ -69063,7 +73208,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -69114,24 +73259,26 @@ Object {
    @@ -69170,7 +73317,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -69221,24 +73368,26 @@ Object {
    @@ -69277,7 +73426,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -69328,24 +73477,26 @@ Object {
    @@ -69384,7 +73535,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -69435,24 +73586,26 @@ Object {
    @@ -69491,7 +73644,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -69542,24 +73695,26 @@ Object {
    @@ -69598,7 +73753,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -69649,24 +73804,26 @@ Object {
    @@ -69705,7 +73862,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -69756,24 +73913,26 @@ Object {
    @@ -69812,7 +73971,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -69863,24 +74022,26 @@ Object {
    @@ -69919,7 +74080,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -69970,24 +74131,26 @@ Object {
    @@ -70026,7 +74189,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -70077,24 +74240,26 @@ Object {
    @@ -70133,7 +74298,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -70184,24 +74349,26 @@ Object {
    @@ -70240,7 +74407,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -70291,24 +74458,26 @@ Object {
    @@ -70347,7 +74516,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -70398,24 +74567,26 @@ Object {
    @@ -70454,7 +74625,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -70505,24 +74676,26 @@ Object {
    @@ -70561,7 +74734,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -70612,24 +74785,26 @@ Object {
    @@ -70668,7 +74843,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -70719,24 +74894,26 @@ Object {
    @@ -70775,7 +74952,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -70826,24 +75003,26 @@ Object {
    @@ -70882,7 +75061,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -70933,24 +75112,26 @@ Object {
    @@ -70989,7 +75170,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -71040,24 +75221,26 @@ Object {
    @@ -71096,7 +75279,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -71147,24 +75330,26 @@ Object {
    @@ -71203,7 +75388,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -71254,24 +75439,26 @@ Object {
    @@ -71310,7 +75497,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -71361,24 +75548,26 @@ Object {
    @@ -71417,7 +75606,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -71468,24 +75657,26 @@ Object {
    @@ -71524,7 +75715,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -71575,24 +75766,26 @@ Object {
    @@ -71631,7 +75824,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -71682,24 +75875,26 @@ Object {
    @@ -71738,7 +75933,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -71789,24 +75984,26 @@ Object {
    @@ -71845,7 +76042,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -71896,24 +76093,26 @@ Object {
    @@ -71952,7 +76151,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -72003,24 +76202,26 @@ Object {
    @@ -72059,7 +76260,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -72110,24 +76311,26 @@ Object {
    @@ -72166,7 +76369,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -72217,24 +76420,26 @@ Object {
    @@ -72273,7 +76478,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -72324,24 +76529,26 @@ Object {
    @@ -72380,7 +76587,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -72431,24 +76638,26 @@ Object {
    @@ -72487,7 +76696,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -72538,24 +76747,26 @@ Object {
    @@ -72594,7 +76805,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -72649,7 +76860,7 @@ Object {
    +
    +
    +
    +
    Name footer
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    +
    + USD +
    +
    +
    +
    + SUCCESS +
    +
    +
    +
    + BET +
    +
    +
    + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    +
    + USD +
    +
    +
    +
    + SUCCESS +
    +
    +
    +
    + BET +
    +
    +
    + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    +
    + USD +
    +
    +
    +
    + SUCCESS +
    +
    +
    +
    + BET +
    +
    +
    + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    +
    + USD +
    +
    +
    +
    + SUCCESS +
    +
    +
    +
    + BET +
    +
    +
    + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    +
    + USD +
    +
    +
    +
    + SUCCESS +
    +
    +
    +
    + BET +
    +
    +
    + +
    +
    +
    +
    +
    + , + "container":
    +
    +
    +
    +
    + Transactions + +
    + Info + +
    + Actions + +
    +
    +
    + Transaction UUID + +
    + User & Supplier user + +
    + Process time + +
    + Client + +
    + Game name & provider + +
    + Amount + +
    + Currency + +
    + Status + +
    + Kind + +
    + Actions + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    +
    + USD +
    +
    +
    +
    + SUCCESS +
    +
    +
    +
    + BET +
    +
    +
    + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    +
    + USD +
    +
    +
    +
    + SUCCESS +
    +
    +
    +
    + BET +
    +
    +
    + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    +
    + USD +
    +
    +
    +
    + SUCCESS +
    +
    +
    +
    + BET +
    +
    +
    + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 + USD
    +
    +
    - aleksandr@heathmonitoring.com + SUCCESS
    +
    +
    - 2023-09-19T14:31:46.105Z + BET
    +
    +
    + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    - Bender (old) Coingaming + USD
    +
    +
    - Pragmatic Play + SUCCESS
    +
    +
    - 22.97 + BET
    -
    +
    +
    + + + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    -
    - SUCCESS -
    + USD
    +
    +
    -
    - BET -
    + SUCCESS
    +
    +
    - + BET
    + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 + USD
    +
    +
    - aleksandr@heathmonitoring.com + SUCCESS
    +
    +
    - 2023-09-19T14:31:46.105Z + BET
    +
    +
    + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    - Bender (old) Coingaming + USD
    +
    +
    - Pragmatic Play + SUCCESS
    +
    +
    - 22.97 + BET
    -
    +
    +
    + + + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    -
    - SUCCESS -
    + USD
    +
    +
    -
    - BET -
    + SUCCESS
    +
    +
    - + BET
    + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 + USD
    +
    +
    - aleksandr@heathmonitoring.com + SUCCESS
    +
    +
    - 2023-09-19T14:31:46.105Z + BET
    +
    +
    + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    - Bender (old) Coingaming + USD
    +
    +
    - Pragmatic Play + SUCCESS
    +
    +
    - 22.97 + BET
    +
    +
    + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    -
    - USD -
    + USD
    +
    +
    -
    - SUCCESS -
    + SUCCESS
    +
    +
    -
    - BET -
    + BET
    -
    +
    + -
    + + +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com -
    -
    - 2023-09-19T14:31:46.105Z -
    -
    - Bender (old) Coingaming -
    -
    - Pragmatic Play -
    -
    - 22.97 -
    -
    -
    - USD -
    + USD
    +
    +
    -
    - SUCCESS -
    + SUCCESS
    +
    +
    -
    - BET -
    + BET
    -
    +
    + -
    + + +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com -
    -
    - 2023-09-19T14:31:46.105Z + USD
    +
    +
    - Bender (old) Coingaming + SUCCESS
    +
    +
    - Pragmatic Play + BET
    -
    +
    +
    + + + + +
    +
    +
    +
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    -
    - USD -
    + USD
    +
    +
    -
    - SUCCESS -
    + SUCCESS
    +
    +
    -
    - BET -
    + BET
    -
    +
    + -
    + + +
    -
    -
    - , - "container":
    -
    -
    + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    +
    + aleksandr@heathmonitoring.com +
    +
    + 2023-09-19T14:31:46.105Z +
    +
    + Bender (old) Coingaming +
    +
    + Pragmatic Play +
    +
    + 22.97 +
    +
    - Transactions
    - Info
    +
    + BET +
    +
    +
    - Actions -
    - Transaction UUID -
    - User & Supplier user -
    - Process time -
    - Client -
    - Game name & provider -
    - Amount -
    - Currency
    - Status
    - Kind
    - Actions -
    + > + 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    + > + aleksandr@heathmonitoring.com +
    + class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;" + > + 2023-09-19T14:31:46.105Z +
    + class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;" + > + Bender (old) Coingaming +
    + class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;" + > + Pragmatic Play +
    + class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;" + > + 22.97 +
    + class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;" + > +
    + USD +
    +
    + class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;" + > +
    + SUCCESS +
    +
    + class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;" + > +
    + BET +
    +
    + > + +
    -
    -
    +
    +
    +
    , + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`Table renders CustomContent 1`] = ` +Object { + "asFragment": [Function], + "baseElement": +
    +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    + + Expand + 👉 + + +
    + First Name + +
    + Age +
    - aleksandr@heathmonitoring.com +
    +
    +
    +
    +
    - 2023-09-19T14:31:46.105Z +
    + + 👉 + +
    +
    + Test +
    +
    + + 0 + +
    - Bender (old) Coingaming +
    + + 👉 + +
    +
    + Test +
    +
    + + 30 + +
    - Pragmatic Play +
    + + 👉 + +
    +
    + Test +
    +
    + + 60 + +
    - 22.97 +
    + + 👉 + +
    +
    + Test +
    +
    + + 90 + +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 120 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 150 + +
    +
    +
    +
    + + 👉 + +
    +
    + Test +
    +
    + + 180 + +
    +
    +
    - USD + + 👉 + +
    +
    + Test +
    +
    + + 210 +
    - SUCCESS + + 👉 + +
    +
    + Test +
    +
    + + 240 +
    - BET + + 👉 + +
    +
    + Test +
    +
    + + 270 +
    - + + 👉 + +
    +
    + Test +
    +
    + + 300 + +
    -
    -
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    + + 👉 + +
    +
    + Test +
    +
    + + 330 + +
    - aleksandr@heathmonitoring.com +
    + + 👉 + +
    +
    + Test +
    +
    + + 360 + +
    - 2023-09-19T14:31:46.105Z +
    + + 👉 + +
    +
    + Test +
    +
    + + 390 + +
    - Bender (old) Coingaming +
    + + 👉 + +
    +
    + Test +
    +
    + + 420 + +
    - Pragmatic Play +
    + + 👉 + +
    +
    + Test +
    +
    + + 450 + +
    - 22.97 +
    + + 👉 + +
    +
    + Test +
    +
    + + 480 + +
    - USD + + 👉 + +
    +
    + Test +
    +
    + + 510 +
    - SUCCESS + + 👉 + +
    +
    + Test +
    +
    + + 540 +
    - BET + + 👉 + +
    +
    + Test +
    +
    + + 570 +
    - + + 👉 + +
    +
    + Test +
    +
    + + 600 + +
    -
    -
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    + + 👉 + +
    +
    + Test +
    +
    + + 630 + +
    - aleksandr@heathmonitoring.com +
    + + 👉 + +
    +
    + Test +
    +
    + + 660 + +
    - 2023-09-19T14:31:46.105Z +
    + + 👉 + +
    +
    + Test +
    +
    + + 690 + +
    - Bender (old) Coingaming +
    + + 👉 + +
    +
    + Test +
    +
    + + 720 + +
    - Pragmatic Play +
    + + 👉 + +
    +
    + Test +
    +
    + + 750 + +
    - 22.97 +
    + + 👉 + +
    +
    + Test +
    +
    + + 780 + +
    - USD + + 👉 + +
    +
    + Test +
    +
    + + 810 +
    - SUCCESS + + 👉 + +
    +
    + Test +
    +
    + + 840 +
    - BET + + 👉 + +
    +
    + Test +
    +
    + + 870 +
    - + + 👉 + +
    +
    + Test +
    +
    + + 900 + +
    -
    -
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 +
    + + 👉 + +
    +
    + Test +
    +
    + + 930 + +
    - aleksandr@heathmonitoring.com +
    + + 👉 + +
    +
    + Test +
    +
    + + 960 + +
    - 2023-09-19T14:31:46.105Z +
    + + 👉 + +
    +
    + Test +
    +
    + + 990 + +
    - Bender (old) Coingaming +
    + + 👉 + +
    +
    + Test +
    +
    + + 1020 + +
    - Pragmatic Play +
    + + 👉 + +
    +
    + Test +
    +
    + + 1050 + +
    - 22.97 +
    + + 👉 + +
    +
    + Test +
    +
    + + 1080 + +
    - USD + + 👉 +
    -
    -
    - SUCCESS + Test +
    +
    + + 1110 +
    - BET + + 👉 + +
    +
    + Test +
    +
    + + 1140 +
    - + + 👉 + +
    +
    + Test +
    +
    + + 1170 + +
    +
    +
    + , + "container":
    +
    +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com -
    -
    - 2023-09-19T14:31:46.105Z -
    -
    - Bender (old) Coingaming -
    -
    - Pragmatic Play -
    -
    - 22.97 -
    -
    -
    - USD -
    + Expand + 👉 + +
    + First Name
    - SUCCESS -
    + class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0" + draggable="false" + role="separator" + style="cursor: col-resize;" + />
    + Age
    - BET -
    + class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0" + draggable="false" + role="separator" + style="cursor: col-resize;" + />
    +
    +
    - -
    + class="relative" + colspan="1" + role="columnheader" + style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;" + /> +
    +
    +
    +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com + + 👉 +
    - 2023-09-19T14:31:46.105Z + Test
    - Bender (old) Coingaming + + 0 +
    +
    +
    - Pragmatic Play + + 👉 +
    - 22.97 + Test
    -
    - USD -
    + + 30 +
    +
    +
    -
    - SUCCESS -
    + + 👉 +
    -
    - BET -
    + Test
    - + + 60 +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com + + 👉 +
    - 2023-09-19T14:31:46.105Z + Test
    - Bender (old) Coingaming + + 90 +
    +
    +
    - Pragmatic Play + + 👉 +
    - 22.97 + Test
    -
    - USD -
    + + 120 +
    +
    +
    -
    - SUCCESS -
    + + 👉 +
    -
    - BET -
    + Test
    - + + 150 +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com + + 👉 +
    - 2023-09-19T14:31:46.105Z + Test
    - Bender (old) Coingaming + + 180 +
    +
    +
    - Pragmatic Play + + 👉 +
    - 22.97 + Test
    -
    - USD -
    + + 210 +
    +
    +
    -
    - SUCCESS -
    + + 👉 +
    -
    - BET -
    + Test
    - + + 240 +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com + + 👉 +
    - 2023-09-19T14:31:46.105Z + Test
    - Bender (old) Coingaming + + 270 +
    +
    +
    - Pragmatic Play + + 👉 +
    - 22.97 + Test
    -
    - USD -
    + + 300 +
    +
    +
    -
    - SUCCESS -
    + + 👉 +
    -
    - BET -
    + Test
    - + + 330 +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com + + 👉 +
    - 2023-09-19T14:31:46.105Z + Test
    - Bender (old) Coingaming + + 360 +
    +
    +
    - Pragmatic Play + + 👉 +
    - 22.97 + Test
    -
    - USD -
    + + 390 +
    +
    +
    -
    - SUCCESS -
    + + 👉 +
    -
    - BET -
    + Test
    - + + 420 +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com + + 👉 +
    - 2023-09-19T14:31:46.105Z + Test
    - Bender (old) Coingaming + + 450 +
    +
    +
    - Pragmatic Play + + 👉 +
    - 22.97 + Test
    -
    - USD -
    + + 480 +
    +
    +
    -
    - SUCCESS -
    + + 👉 +
    -
    - BET -
    + Test
    -
    - +
    + + 510 +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com + + 👉 +
    - 2023-09-19T14:31:46.105Z + Test
    - Bender (old) Coingaming + + 540 +
    +
    +
    - Pragmatic Play + + 👉 +
    - 22.97 + Test
    -
    - USD -
    + + 570 +
    +
    +
    -
    - SUCCESS -
    + + 👉 +
    -
    - BET -
    + Test
    - + + 600 +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com + + 👉 +
    - 2023-09-19T14:31:46.105Z + Test
    - Bender (old) Coingaming + + 630 +
    +
    +
    - Pragmatic Play + + 👉 +
    - 22.97 + Test
    -
    - USD -
    + + 660 +
    +
    +
    -
    - SUCCESS -
    + + 👉 +
    -
    - BET -
    + Test
    - + + 690 +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com + + 👉 +
    - 2023-09-19T14:31:46.105Z + Test
    - Bender (old) Coingaming + + 720 +
    +
    +
    - Pragmatic Play + + 👉 +
    - 22.97 + Test
    -
    - USD -
    + + 750 +
    +
    +
    -
    - SUCCESS -
    + + 👉 +
    -
    - BET -
    + Test
    - + + 780 +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com + + 👉 +
    - 2023-09-19T14:31:46.105Z + Test
    - Bender (old) Coingaming + + 810 +
    +
    +
    - Pragmatic Play + + 👉 +
    - 22.97 + Test
    -
    - USD -
    + + 840 +
    +
    +
    -
    - SUCCESS -
    + + 👉 +
    -
    - BET -
    + Test
    - + + 870 +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com + + 👉 +
    - 2023-09-19T14:31:46.105Z + Test
    - Bender (old) Coingaming + + 900 +
    +
    +
    - Pragmatic Play + + 👉 +
    - 22.97 + Test
    -
    - USD -
    + + 930 +
    +
    +
    -
    - SUCCESS -
    + + 👉 +
    -
    - BET -
    + Test
    - + + 960 +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 -
    -
    - aleksandr@heathmonitoring.com + + 👉 +
    - 2023-09-19T14:31:46.105Z + Test
    - Bender (old) Coingaming + + 990 +
    +
    +
    - Pragmatic Play + + 👉 +
    - 22.97 + Test
    -
    - USD -
    + + 1020 +
    +
    +
    -
    - SUCCESS -
    + + 👉 +
    -
    - BET -
    + Test
    - + + 1050 +
    - 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 + + 👉 +
    - aleksandr@heathmonitoring.com + Test
    - 2023-09-19T14:31:46.105Z + + 1080 +
    +
    +
    - Bender (old) Coingaming + + 👉 +
    - Pragmatic Play + Test
    - 22.97 + + 1110 +
    +
    +
    -
    - USD -
    + + 👉 +
    -
    - SUCCESS -
    + Test
    -
    - BET -
    + + 1140 +
    +
    +
    - + + 👉 + +
    +
    + Test +
    +
    + + 1170 +
    @@ -116461,7 +123427,7 @@ Object { } `; -exports[`Table renders CustomContent 1`] = ` +exports[`Table renders DeepTable 1`] = ` Object { "asFragment": [Function], "baseElement": @@ -116477,7 +123443,7 @@ Object {
    - Expand 👉
    - First Name + Name
    +
    + Visits + +
    + Activity +
    +
    +
    - + 👉
    @@ -116578,7 +123585,7 @@ Object { Test
    @@ -116586,80 +123593,36 @@ Object { 0
    -
    -
    -
    - - 👉 - -
    - Test -
    -
    - - 30 - -
    -
    -
    -
    - 👉 + 0
    -
    - Test -
    - - 60 - + 0
    - + 👉
    @@ -116671,27 +123634,12 @@ Object { Test
    - - 90 - -
    -
    -
    -
    - 👉 + 30
    - Test + + 100 +
    - - 120 - + 100
    - + 👉
    @@ -116733,27 +123683,12 @@ Object { Test
    - - 150 - -
    -
    -
    -
    - 👉 + 60
    - Test + + 200 +
    - - 180 - + 200
    - + 👉
    @@ -116795,27 +123732,12 @@ Object { Test
    - - 210 - -
    -
    -
    -
    - 👉 + 90
    - Test + + 300 +
    - - 240 - + 300
    - + 👉
    @@ -116857,27 +123781,12 @@ Object { Test
    - - 270 - -
    -
    -
    -
    - 👉 + 120
    - Test + + 400 +
    - - 300 - + 400
    - + 👉
    @@ -116919,27 +123830,12 @@ Object { Test
    - - 330 - -
    -
    -
    -
    - 👉 + 150
    - Test + + 500 +
    - - 360 - + 500
    - + 👉
    @@ -116981,27 +123879,12 @@ Object { Test
    - - 390 - -
    -
    -
    -
    - 👉 + 180
    - Test + + 600 +
    - - 420 - + 600
    - + 👉
    @@ -117043,27 +123928,12 @@ Object { Test
    - - 450 - -
    -
    -
    -
    - 👉 + 210
    - Test + + 700 +
    - - 480 - + 700
    - + 👉
    @@ -117105,27 +123977,12 @@ Object { Test
    - - 510 - -
    -
    -
    -
    - 👉 + 240
    - Test + + 800 +
    - - 540 - + 800
    - + 👉
    @@ -117167,27 +124026,12 @@ Object { Test
    - - 570 - -
    -
    -
    -
    - 👉 + 270
    - Test + + 900 +
    - - 600 - + 900
    - + 👉
    @@ -117229,27 +124075,12 @@ Object { Test
    - - 630 - -
    -
    -
    -
    - 👉 + 300
    - Test + + 1000 +
    - - 660 - + 1000
    - + 👉
    @@ -117291,27 +124124,12 @@ Object { Test
    - - 690 - -
    -
    -
    -
    - 👉 + 330
    - Test + + 1100 +
    - - 720 - + 1100
    - + 👉
    @@ -117353,27 +124173,12 @@ Object { Test
    - - 750 - -
    -
    -
    -
    - 👉 + 360
    - Test + + 1200 +
    - - 780 - + 1200
    - + 👉
    @@ -117415,27 +124222,12 @@ Object { Test
    - - 810 - -
    -
    -
    -
    - 👉 + 390
    - Test + + 1300 +
    - - 840 - + 1300
    - + 👉
    @@ -117477,27 +124271,12 @@ Object { Test
    - - 870 - -
    -
    -
    -
    - 👉 + 420
    - Test + + 1400 +
    - - 900 - + 1400
    - + 👉
    @@ -117539,27 +124320,12 @@ Object { Test
    - - 930 - -
    -
    -
    -
    - 👉 + 450
    - Test + + 1500 +
    - - 960 - + 1500
    - + 👉
    @@ -117601,27 +124369,12 @@ Object { Test
    - - 990 - -
    -
    -
    -
    - 👉 + 480
    - Test + + 1600 +
    - - 1020 - + 1600
    - + 👉
    @@ -117663,27 +124418,12 @@ Object { Test
    - - 1050 - -
    -
    -
    -
    - 👉 + 510
    - Test + + 1700 +
    - - 1080 - + 1700
    - + 👉
    @@ -117725,27 +124467,12 @@ Object { Test
    - - 1110 - -
    -
    -
    -
    - 👉 + 540
    - Test + + 1800 +
    - - 1140 - + 1800
    - + 👉
    @@ -117787,14 +124516,30 @@ Object { Test
    - 1170 + 570 + +
    +
    + + 1900
    +
    + 1900 +
    @@ -117812,7 +124557,7 @@ Object {
    - Expand 👉
    - First Name + Name
    +
    + Visits + +
    + Activity +
    +
    +
    - + 👉
    @@ -117913,7 +124699,7 @@ Object { Test
    @@ -117921,18 +124707,36 @@ Object { 0
    +
    + + 0 + +
    +
    + 0 +
    - + 👉
    @@ -117944,7 +124748,7 @@ Object { Test
    @@ -117952,18 +124756,36 @@ Object { 30
    +
    + + 100 + +
    +
    + 100 +
    - + 👉
    @@ -117975,7 +124797,7 @@ Object { Test
    @@ -117983,18 +124805,36 @@ Object { 60
    +
    + + 200 + +
    +
    + 200 +
    - + 👉
    @@ -118006,7 +124846,7 @@ Object { Test
    @@ -118014,18 +124854,36 @@ Object { 90
    +
    + + 300 + +
    +
    + 300 +
    - + 👉
    @@ -118037,7 +124895,7 @@ Object { Test
    @@ -118045,18 +124903,36 @@ Object { 120
    +
    + + 400 + +
    +
    + 400 +
    - + 👉
    @@ -118068,7 +124944,7 @@ Object { Test
    @@ -118076,18 +124952,36 @@ Object { 150
    +
    + + 500 + +
    +
    + 500 +
    - + 👉
    @@ -118099,7 +124993,7 @@ Object { Test
    @@ -118107,18 +125001,36 @@ Object { 180
    +
    + + 600 + +
    +
    + 600 +
    - + 👉
    @@ -118130,7 +125042,7 @@ Object { Test
    @@ -118138,18 +125050,36 @@ Object { 210
    +
    + + 700 + +
    +
    + 700 +
    - + 👉
    @@ -118161,7 +125091,7 @@ Object { Test
    @@ -118169,18 +125099,36 @@ Object { 240
    +
    + + 800 + +
    +
    + 800 +
    - + 👉
    @@ -118192,7 +125140,7 @@ Object { Test
    @@ -118200,49 +125148,36 @@ Object { 270
    -
    -
    -
    - - 👉 - -
    - Test + + 900 +
    - - 300 - + 900
    - + 👉
    @@ -118254,27 +125189,12 @@ Object { Test
    - - 330 - -
    -
    -
    -
    - 👉 + 300
    - Test + + 1000 +
    - - 360 - + 1000
    - + 👉
    @@ -118316,27 +125238,12 @@ Object { Test
    - - 390 - -
    -
    -
    -
    - 👉 + 330
    - Test + + 1100 +
    - - 420 - + 1100
    - + 👉
    @@ -118378,27 +125287,12 @@ Object { Test
    - - 450 - -
    -
    -
    -
    - 👉 + 360
    - Test + + 1200 +
    - - 480 - + 1200
    - + 👉
    @@ -118440,27 +125336,12 @@ Object { Test
    - - 510 - -
    -
    -
    -
    - 👉 + 390
    - Test + + 1300 +
    - - 540 - + 1300
    - + 👉
    @@ -118502,27 +125385,12 @@ Object { Test
    - - 570 - -
    -
    -
    -
    - 👉 + 420
    - Test + + 1400 +
    - - 600 - + 1400
    - + 👉
    @@ -118564,27 +125434,12 @@ Object { Test
    - - 630 - -
    -
    -
    -
    - 👉 + 450
    - Test + + 1500 +
    - - 660 - + 1500
    - + 👉
    @@ -118626,26 +125483,44 @@ Object { Test
    - 690 + 480 + +
    +
    + + 1600
    +
    + 1600 +
    - + 👉
    @@ -118657,26 +125532,44 @@ Object { Test
    - 720 + 510 + +
    +
    + + 1700
    +
    + 1700 +
    - + 👉
    @@ -118688,26 +125581,44 @@ Object { Test
    - 750 + 540 + +
    +
    + + 1800
    +
    + 1800 +
    - + 👉
    @@ -118719,416 +125630,902 @@ Object { Test
    - 780 + 570
    -
    -
    - 👉 + 1900
    - Test + 1900 +
    +
    +
    +
    +
    , + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`Table renders Default 1`] = ` +Object { + "asFragment": [Function], + "baseElement": +
    +
    +
    +
    +
    + First Name + +
    + Last Name + +
    + Age + +
    + Visits + +
    + Activity + +
    + Status +
    - - 810 - +
    +
    +
    +
    +
    +
    - - 👉 - +
    + Test +
    +
    + Test +
    +
    + + 0 + +
    +
    + + 0 + +
    +
    + 0 +
    +
    + 0 +
    - Test +
    + Test +
    +
    + Test +
    +
    + + 30 + +
    +
    + + 100 + +
    +
    + 100 +
    +
    + 100 +
    - - 840 - +
    + Test +
    +
    + Test +
    +
    + + 60 + +
    +
    + + 200 + +
    +
    + 200 +
    +
    + 200 +
    +
    +
    +
    + Test +
    +
    + Test +
    +
    + + 90 + +
    +
    + + 300 + +
    +
    + 300 +
    +
    + 300 +
    +
    +
    +
    + Test +
    +
    + Test +
    +
    + + 120 + +
    +
    + + 400 + +
    +
    + 400 +
    +
    + 400 +
    +
    +
    + , + "container":
    +
    +
    - - 👉 - + First Name +
    - Test + Last Name +
    - - 870 - + Age + +
    + Visits + +
    + Activity + +
    + Status +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - - 👉 - + Test
    Test
    - 900 + 0
    -
    -
    - 👉 + 0
    - Test + 0
    - - 930 - + 0
    - - 👉 - + Test
    Test
    - 960 + 30
    -
    -
    - 👉 + 100
    - Test + 100
    - - 990 - + 100
    - - 👉 - + Test
    Test
    - 1020 + 60
    -
    -
    - 👉 + 200
    - Test + 200
    - - 1050 - + 200
    - - 👉 - + Test
    Test
    - 1080 + 90
    -
    -
    - 👉 + 300
    - Test + 300
    - - 1110 - + 300
    - - 👉 - + Test
    Test
    - 1140 + 120
    -
    -
    - 👉 + 400
    - Test + 400
    - - 1170 - + 400
    @@ -119188,7 +126585,7 @@ Object { } `; -exports[`Table renders DeepTable 1`] = ` +exports[`Table renders Editable 1`] = ` Object { "asFragment": [Function], "baseElement": @@ -119196,7 +126593,6 @@ Object {
    - - 👉 - + First Name
    - Name + Last Name
    Age
    Visits
    Activity
    +
    + Status +
    +
    @@ -119325,981 +126736,361 @@ Object {
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 0 - -
    -
    - - 0 - -
    -
    - 0 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 30 - -
    -
    - - 100 - -
    -
    - 100 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 60 - -
    -
    - - 200 - -
    -
    - 200 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 90 - -
    -
    - - 300 - -
    -
    - 300 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 120 - -
    -
    - - 400 - -
    -
    - 400 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 150 - -
    -
    - - 500 - -
    -
    - 500 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 180 - -
    -
    - - 600 - -
    -
    - 600 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 210 - -
    -
    - - 700 - -
    -
    - 700 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 240 - -
    -
    - - 800 - -
    -
    - 800 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 270 - -
    -
    - - 900 - -
    -
    - 900 -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 300 - +
    - - 1000 - -
    -
    - 1000 -
    -
    -
    -
    - - 👉 - +
    - Test +
    - - 330 - +
    - - 1100 - +
    - 1100 +
    - - 👉 - -
    -
    - Test -
    -
    - - 360 - +
    - - 1200 - -
    -
    - 1200 -
    -
    -
    -
    - - 👉 - +
    - Test +
    - - 390 - +
    - - 1300 - +
    - 1300 +
    - - 👉 - -
    -
    - Test -
    -
    - - 420 - +
    - - 1400 - -
    -
    - 1400 -
    -
    -
    -
    - - 👉 - +
    - Test +
    - - 450 - +
    - - 1500 - +
    - 1500 +
    - - 👉 - -
    -
    - Test -
    -
    - - 480 - +
    - - 1600 - -
    -
    - 1600 -
    -
    -
    -
    - - 👉 - +
    - Test +
    - - 510 - +
    - - 1700 - +
    - 1700 +
    - - 👉 - -
    -
    - Test -
    -
    - - 540 - +
    - - 1800 - -
    -
    - 1800 -
    -
    -
    -
    - - 👉 - +
    - Test +
    - - 570 - +
    - - 1900 - +
    - 1900 +
    @@ -120310,7 +127101,6 @@ Object {
    - - 👉 - + First Name
    - Name + Last Name
    Age
    Visits
    Activity
    +
    + Status +
    +
    @@ -120439,981 +127244,361 @@ Object {
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 0 - -
    -
    - - 0 - -
    -
    - 0 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 30 - -
    -
    - - 100 - -
    -
    - 100 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 60 - -
    -
    - - 200 - -
    -
    - 200 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 90 - -
    -
    - - 300 - -
    -
    - 300 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 120 - -
    -
    - - 400 - -
    -
    - 400 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 150 - -
    -
    - - 500 - -
    -
    - 500 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 180 - -
    -
    - - 600 - -
    -
    - 600 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 210 - -
    -
    - - 700 - -
    -
    - 700 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 240 - -
    -
    - - 800 - -
    -
    - 800 -
    -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 270 - -
    -
    - - 900 - -
    -
    - 900 -
    -
    -
    - - 👉 - -
    -
    - Test -
    -
    - - 300 - +
    - - 1000 - -
    -
    - 1000 -
    -
    -
    -
    - - 👉 - +
    - Test +
    - - 330 - +
    - - 1100 - +
    - 1100 +
    - - 👉 - -
    -
    - Test -
    -
    - - 360 - +
    - - 1200 - -
    -
    - 1200 -
    -
    -
    -
    - - 👉 - +
    - Test +
    - - 390 - +
    - - 1300 - +
    - 1300 +
    - - 👉 - -
    -
    - Test -
    -
    - - 420 - +
    - - 1400 - -
    -
    - 1400 -
    -
    -
    -
    - - 👉 - +
    - Test +
    - - 450 - +
    - - 1500 - +
    - 1500 +
    - - 👉 - -
    -
    - Test -
    -
    - - 480 - +
    - - 1600 - -
    -
    - 1600 -
    -
    -
    -
    - - 👉 - +
    - Test +
    - - 510 - +
    - - 1700 - +
    - 1700 +
    - - 👉 - -
    -
    - Test -
    -
    - - 540 - -
    -
    - - 1800 - -
    -
    - 1800 +
    -
    -
    - - 👉 - +
    - Test +
    - - 570 - +
    - - 1900 - +
    - 1900 +
    @@ -121473,7 +127658,7 @@ Object { } `; -exports[`Table renders Default 1`] = ` +exports[`Table renders ExpandableCheckboxes 1`] = ` Object { "asFragment": [Function], "baseElement": @@ -121481,6 +127666,7 @@ Object {
    + Expand/Select + +
    + Name + +
    + Info + +
    + Actions + +
    +
    +
    +
    +
    + +
    + + 👇 + +
    + +
    First Name
    + Age + +
    + Visits + +
    + Activity + +
    + Status + +
    + Profile Progress + +
    + Actions + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + + 👇 + +
    +
    +
    + Test lvl1 +
    +
    + + 36 + +
    +
    + + 50 + +
    +
    + 54 +
    +
    + 19 +
    +
    + + 20 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + + 👇 + +
    +
    +
    + Sub test lvl2 +
    +
    + + 96 + +
    +
    + + 8 + +
    +
    + 23 +
    +
    + 97 +
    +
    + + 2 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + Sub test lvl3 +
    +
    + + 63 + +
    +
    + + 82 + +
    +
    + 46 +
    +
    + 52 +
    +
    + + 59 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + Sub test lvl3 +
    +
    + + 64 + +
    +
    + + 35 + +
    +
    + 5 +
    +
    + 65 +
    +
    + + 78 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + Sub test lvl3 +
    +
    + + 12 + +
    +
    + + 4 + +
    +
    + 5 +
    +
    + 98 +
    +
    + + 44 + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + + 👇 + +
    +
    +
    + Sub test lvl2 +
    +
    + + 74 + +
    +
    - Last Name -
    - Age -
    - Visits -
    - Activity -
    - Status -
    + class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku" + data-sticky-td="true" + role="cell" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;" + > +
    +
    + +
    +
    +
    + class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + data-sticky-last-left-td="true" + data-sticky-td="true" + role="cell" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + > + Sub test lvl3 +
    + class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;" + > + + 89 + +
    + class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;" + > + + 98 + +
    + class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;" + > + 43 +
    + class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;" + > + 24 +
    +
    + + 54 + +
    +
    + +
    -
    -
    - Test +
    +
    + +
    +
    - Test + Sub test lvl3
    - 0 + 52
    - 0 + 25
    - 0 + 35
    - 0 + 97 +
    +
    + + 25 + +
    +
    +
    - Test +
    +
    + +
    +
    - Test + Sub test lvl3
    - 30 + 55
    - 100 + 54
    - 100 + 33
    - 100 + 56 +
    +
    + + 24 + +
    +
    +
    - Test +
    +
    + +
    + + 👇 + +
    - Test + Sub test lvl2
    - 60 + 53
    - 200 + 63
    - 200 + 3
    - 200 + 48 +
    +
    + + 24 + +
    +
    +
    - Test +
    +
    + +
    +
    - Test + Sub test lvl3
    - 90 + 4
    - 300 + 653
    - 300 + 43
    - 300 + 44 +
    +
    + + 36 + +
    +
    +
    - Test +
    +
    + +
    +
    - Test + Sub test lvl3
    - 120 + 49
    - 400 + 45
    - 400 + 4
    - 400 + 35 +
    +
    + + 454 + +
    +
    +
    @@ -121889,6 +129573,7 @@ Object {
    - First Name + Expand/Select
    - Last Name + Name
    + Info + +
    + Actions + +
    +
    +
    +
    +
    + +
    + + 👇 + +
    + +
    + First Name + +
    Age
    Visits
    Activity
    Status
    +
    + Profile Progress + +
    + Actions +
    +
    +
    @@ -122030,1336 +129877,1599 @@ Object { role="rowgroup" >
    - Test +
    +
    + +
    + + 👇 + +
    - Test + Test lvl1 +
    +
    + + 36 + +
    +
    + + 50 +
    - - 0 - + 54
    - - 0 - + 19
    - 0 + + 20 +
    - 0 +
    - Test +
    +
    + +
    + + 👇 + +
    - Test + Sub test lvl2
    - 30 + 96
    - 100 + 8
    - 100 + 23
    - 100 + 97 +
    +
    + + 2 + +
    +
    +
    - Test +
    +
    + +
    +
    - Test + Sub test lvl3
    - 60 + 63
    - 200 + 82
    - 200 + 46
    - 200 + 52 +
    +
    + + 59 + +
    +
    +
    - Test +
    +
    + +
    +
    - Test + Sub test lvl3
    - 90 + 64
    - 300 + 35
    - 300 + 5
    - 300 + 65 +
    +
    + + 78 + +
    +
    +
    - Test +
    +
    + +
    +
    - Test + Sub test lvl3
    - 120 + 12
    - 400 + 4
    - 400 + 5
    - 400 + 98
    -
    -
    -
    -
    , - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; - -exports[`Table renders Editable 1`] = ` -Object { - "asFragment": [Function], - "baseElement": -
    -
    -
    -
    - First Name - -
    - Last Name - -
    - Age - -
    - Visits - -
    - Activity - -
    - Status - + + 44 +
    -
    -
    -
    -
    -
    -
    +
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - +
    + +
    + + 👇 +
    -
    -
    -
    - , - "container":
    -
    -
    -
    - First Name -
    - Last Name -
    - Age -
    - Visits -
    - Activity -
    - Status - +
    +
    + class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku" + data-sticky-td="true" + role="cell" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;" + > +
    +
    + +
    +
    +
    + class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + data-sticky-last-left-td="true" + data-sticky-td="true" + role="cell" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + > + Sub test lvl3 +
    + class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;" + > + + 89 + +
    + class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;" + > + + 98 + +
    + class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;" + > + 43 +
    + class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku" + role="cell" + style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;" + > + 24 +
    +
    + + 54 + +
    +
    + +
    -
    -
    - +
    +
    + +
    +
    - + Sub test lvl3
    - + + 52 +
    - + + 25 +
    - + 35
    - + 97 +
    +
    + + 25 + +
    +
    +
    - +
    +
    + +
    +
    - + Sub test lvl3
    - + + 55 +
    - + + 54 +
    - + 33
    - + 56 +
    +
    + + 24 + +
    +
    +
    - +
    +
    + +
    + + 👇 + +
    - + Sub test lvl2
    - + + 53 +
    - + + 63 +
    - + 3
    - + 48 +
    +
    + + 24 + +
    +
    +
    - +
    +
    + +
    +
    - + Sub test lvl3
    - + + 4 +
    - + + 653 +
    - + 43
    - + 44 +
    +
    + + 36 + +
    +
    +
    - +
    +
    + +
    +
    - + Sub test lvl3
    - + + 49 +
    - + + 45 +
    - + 4
    - + 35 +
    +
    + + 454 + +
    +
    +
    @@ -153101,15 +161211,30 @@ Object {
    +
    + Select +
    Name
    +
    + +
    + +
    First Name
    Last Name
    +
    @@ -153375,7 +161559,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -153426,24 +161610,26 @@ Object {
    @@ -153482,7 +161668,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -153533,24 +161719,26 @@ Object {
    @@ -153589,7 +161777,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -153640,24 +161828,26 @@ Object {
    @@ -153696,7 +161886,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -153747,24 +161937,26 @@ Object {
    @@ -153803,7 +161995,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -153854,238 +162046,26 @@ Object {
    -
    -
    - -
    -
    -
    - Test -
    -
    - Test -
    -
    - - 150 - -
    -
    - - 500 - -
    -
    - 500 -
    -
    - 500 -
    -
    - - 500 - -
    -
    -
    -
    - -
    -
    -
    - Test -
    -
    - Test -
    -
    - - 180 - -
    -
    - - 600 - -
    -
    - 600 -
    -
    - 600 -
    -
    - - 600 - -
    -
    -
    -
    +
    + Test +
    +
    + + 150 + +
    +
    + + 500 + +
    +
    + 500 +
    +
    + 500 +
    +
    + + 500 + +
    +
    +
    +
    +
    + +
    +
    +
    Test
    @@ -154124,10 +162213,119 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" + > + Test +
    +
    + + 180 + +
    +
    + + 600 + +
    +
    + 600 +
    +
    + 600 +
    +
    + + 600 + +
    +
    +
    +
    +
    + +
    +
    +
    Test
    +
    + Test +
    @@ -154231,7 +162431,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -154282,24 +162482,26 @@ Object {
    @@ -154338,7 +162540,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -154389,24 +162591,26 @@ Object {
    @@ -154445,7 +162649,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -154496,24 +162700,26 @@ Object {
    @@ -154552,7 +162758,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -154603,24 +162809,26 @@ Object {
    @@ -154659,7 +162867,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -154710,24 +162918,26 @@ Object {
    @@ -154766,7 +162976,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -154817,24 +163027,26 @@ Object {
    @@ -154873,7 +163085,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -154924,24 +163136,26 @@ Object {
    @@ -154980,7 +163194,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -155031,24 +163245,26 @@ Object {
    @@ -155087,7 +163303,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -155138,24 +163354,26 @@ Object {
    @@ -155194,7 +163412,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -155245,24 +163463,26 @@ Object {
    @@ -155301,7 +163521,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -155352,24 +163572,26 @@ Object {
    @@ -155408,7 +163630,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -155459,24 +163681,26 @@ Object {
    @@ -155515,7 +163739,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -155566,24 +163790,26 @@ Object {
    @@ -155622,7 +163848,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -155673,24 +163899,26 @@ Object {
    @@ -155729,7 +163957,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -155780,24 +164008,26 @@ Object {
    @@ -155836,7 +164066,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -155887,24 +164117,26 @@ Object {
    @@ -155943,7 +164175,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -155994,24 +164226,26 @@ Object {
    @@ -156050,7 +164284,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -156101,24 +164335,26 @@ Object {
    @@ -156157,7 +164393,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -156208,24 +164444,26 @@ Object {
    @@ -156264,7 +164502,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -156315,24 +164553,26 @@ Object {
    @@ -156371,7 +164611,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -156422,24 +164662,26 @@ Object {
    @@ -156478,7 +164720,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -156529,24 +164771,26 @@ Object {
    @@ -156585,7 +164829,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -156636,24 +164880,26 @@ Object {
    @@ -156692,7 +164938,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -156743,24 +164989,26 @@ Object {
    @@ -156799,7 +165047,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -156850,24 +165098,26 @@ Object {
    @@ -156906,7 +165156,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -156957,24 +165207,26 @@ Object {
    @@ -157013,7 +165265,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -157064,24 +165316,26 @@ Object {
    @@ -157120,7 +165374,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -157171,24 +165425,26 @@ Object {
    @@ -157227,7 +165483,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -157278,24 +165534,26 @@ Object {
    @@ -157334,7 +165592,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -157385,24 +165643,26 @@ Object {
    @@ -157441,7 +165701,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -157492,24 +165752,26 @@ Object {
    @@ -157548,7 +165810,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -157603,7 +165865,7 @@ Object {
    +
    +
    +
    +
    Name footer
    +
    + Select +
    Name
    +
    + +
    + +
    First Name
    Last Name
    +
    @@ -158044,7 +166408,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -158095,24 +166459,26 @@ Object {
    @@ -158151,7 +166517,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -158202,24 +166568,26 @@ Object {
    @@ -158258,7 +166626,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -158309,238 +166677,26 @@ Object {
    -
    -
    - -
    -
    -
    - Test -
    -
    - Test -
    -
    - - 90 - -
    -
    - - 300 - -
    -
    - 300 -
    -
    - 300 -
    -
    - - 300 - -
    -
    -
    -
    - -
    -
    -
    - Test -
    -
    - Test -
    -
    - - 120 - -
    -
    - - 400 - -
    -
    - 400 -
    -
    - 400 -
    -
    - - 400 - -
    -
    -
    -
    +
    + Test +
    +
    + + 90 + +
    +
    + + 300 + +
    +
    + 300 +
    +
    + 300 +
    +
    + + 300 + +
    +
    +
    +
    +
    + +
    +
    +
    Test
    @@ -158579,10 +166844,119 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" + > + Test +
    +
    + + 120 + +
    +
    + + 400 + +
    +
    + 400 +
    +
    + 400 +
    +
    + + 400 + +
    +
    +
    +
    +
    + +
    +
    +
    Test
    +
    + Test +
    @@ -158686,7 +167062,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -158737,24 +167113,26 @@ Object {
    @@ -158793,7 +167171,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -158844,24 +167222,26 @@ Object {
    @@ -158900,7 +167280,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -158951,24 +167331,26 @@ Object {
    @@ -159007,7 +167389,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -159058,24 +167440,26 @@ Object {
    @@ -159114,7 +167498,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -159165,24 +167549,26 @@ Object {
    @@ -159221,7 +167607,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -159272,24 +167658,26 @@ Object {
    @@ -159328,7 +167716,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -159379,24 +167767,26 @@ Object {
    @@ -159435,7 +167825,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -159486,24 +167876,26 @@ Object {
    @@ -159542,7 +167934,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -159593,24 +167985,26 @@ Object {
    @@ -159649,7 +168043,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -159700,24 +168094,26 @@ Object {
    @@ -159756,7 +168152,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -159807,24 +168203,26 @@ Object {
    @@ -159863,7 +168261,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -159914,24 +168312,26 @@ Object {
    @@ -159970,7 +168370,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -160021,24 +168421,26 @@ Object {
    @@ -160077,7 +168479,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -160128,24 +168530,26 @@ Object {
    @@ -160184,7 +168588,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -160235,24 +168639,26 @@ Object {
    @@ -160291,7 +168697,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -160342,24 +168748,26 @@ Object {
    @@ -160398,7 +168806,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -160449,24 +168857,26 @@ Object {
    @@ -160505,7 +168915,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -160556,24 +168966,26 @@ Object {
    @@ -160612,7 +169024,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -160663,24 +169075,26 @@ Object {
    @@ -160719,7 +169133,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -160770,24 +169184,26 @@ Object {
    @@ -160826,7 +169242,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -160877,24 +169293,26 @@ Object {
    @@ -160933,7 +169351,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -160984,24 +169402,26 @@ Object {
    @@ -161040,7 +169460,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -161091,24 +169511,26 @@ Object {
    @@ -161147,7 +169569,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -161198,24 +169620,26 @@ Object {
    @@ -161254,7 +169678,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -161305,24 +169729,26 @@ Object {
    @@ -161361,7 +169787,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -161412,24 +169838,26 @@ Object {
    @@ -161468,7 +169896,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -161519,24 +169947,26 @@ Object {
    @@ -161575,7 +170005,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -161626,24 +170056,26 @@ Object {
    @@ -161682,7 +170114,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -161733,24 +170165,26 @@ Object {
    @@ -161789,7 +170223,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -161840,24 +170274,26 @@ Object {
    @@ -161896,7 +170332,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -161947,24 +170383,26 @@ Object {
    @@ -162003,7 +170441,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -162054,24 +170492,26 @@ Object {
    @@ -162110,7 +170550,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -162161,24 +170601,26 @@ Object {
    @@ -162217,7 +170659,7 @@ Object { data-sticky-last-left-td="true" data-sticky-td="true" role="cell" - style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;" + style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;" > Test
    @@ -162272,7 +170714,7 @@ Object {
    +
    +
    +
    +
    Name footer
    { const tree = render(); expect(tree).toMatchSnapshot(); }); + it('renders ExpandableCheckboxes', () => { + const tree = render(); + expect(tree).toMatchSnapshot(); + }); it('renders CustomContent', () => { const tree = render(); expect(tree).toMatchSnapshot(); @@ -160,6 +165,10 @@ describe('Table in RTL', () => { const tree = render(withRtl()); expect(tree).toMatchSnapshot(); }); + it('renders ExpandableCheckboxes', () => { + const tree = render(withRtl()); + expect(tree).toMatchSnapshot(); + }); it('renders CustomContent', () => { const tree = render(withRtl()); expect(tree).toMatchSnapshot(); diff --git a/next-docs/public/examples/tagsInput/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/tagsInput/__tests__/__snapshots__/index.test.tsx.snap index 99fdf1da34..744db0a046 100644 --- a/next-docs/public/examples/tagsInput/__tests__/__snapshots__/index.test.tsx.snap +++ b/next-docs/public/examples/tagsInput/__tests__/__snapshots__/index.test.tsx.snap @@ -19,7 +19,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -42,7 +42,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -135,7 +135,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -158,7 +158,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -181,7 +181,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -219,7 +219,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -242,7 +242,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -265,7 +265,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -401,7 +401,7 @@ Object {
    @@ -465,7 +465,7 @@ Object {
    @@ -530,7 +530,7 @@ Object {
    @@ -610,7 +610,7 @@ Object {
    @@ -674,7 +674,7 @@ Object {
    @@ -739,7 +739,7 @@ Object {
    @@ -876,7 +876,7 @@ Object {
    @@ -940,7 +940,7 @@ Object {
    @@ -1019,7 +1019,7 @@ Object {
    @@ -1083,7 +1083,7 @@ Object {
    @@ -1162,7 +1162,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -1181,7 +1181,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -1270,7 +1270,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -1293,7 +1293,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -1316,7 +1316,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -1350,7 +1350,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -1373,7 +1373,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -1396,7 +1396,7 @@ Object { class="flex flex-wrap justify-start items-start gap-1" /> @@ -1528,7 +1528,7 @@ Object {
    @@ -1592,7 +1592,7 @@ Object {
    @@ -1657,7 +1657,7 @@ Object {
    @@ -1733,7 +1733,7 @@ Object {
    @@ -1797,7 +1797,7 @@ Object {
    @@ -1862,7 +1862,7 @@ Object {
    @@ -1995,7 +1995,7 @@ Object {
    @@ -2059,7 +2059,7 @@ Object {
    @@ -2134,7 +2134,7 @@ Object {
    @@ -2198,7 +2198,7 @@ Object {
    diff --git a/package.json b/package.json index 725b4a5ce9..77edd6d861 100644 --- a/package.json +++ b/package.json @@ -129,6 +129,7 @@ } }, "dependencies": { - "@tanstack/react-table": "8.9.3" + "@tanstack/react-table": "8.9.3", + "ts-node": "^10.9.1" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8c3d204b8c..ce83a21af8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,6 +35,9 @@ importers: '@tanstack/react-table': specifier: 8.9.3 version: 8.9.3(react-dom@18.2.0)(react@18.2.0) + ts-node: + specifier: ^10.9.1 + version: 10.9.1(@types/node@20.4.9)(typescript@5.1.6) devDependencies: '@babel/cli': specifier: 7.22.10 @@ -125,7 +128,7 @@ importers: version: 3.1.0 jest: specifier: 28.1.3 - version: 28.1.3 + version: 28.1.3(@types/node@20.4.9)(ts-node@10.9.1) jest-styled-components: specifier: 7.1.1 version: 7.1.1(styled-components@5.3.11) @@ -158,24 +161,24 @@ importers: version: 5.1.6 typescript-plugin-css-modules: specifier: 5.0.1 - version: 5.0.1(typescript@5.1.6) + version: 5.0.1(ts-node@10.9.1)(typescript@5.1.6) docs: dependencies: '@heathmont/moon-base-tw': - specifier: workspace:^10.10.1 + specifier: workspace:^10.10.2 version: link:../workspaces/base '@heathmont/moon-cmdk-tw': - specifier: workspace:^10.10.1 + specifier: workspace:^10.10.2 version: link:../workspaces/cmdk '@heathmont/moon-core-tw': - specifier: workspace:^10.10.1 + specifier: workspace:^10.10.2 version: link:../workspaces/core '@heathmont/moon-icons-tw': specifier: 9.28.6 version: 9.28.6(react-dom@18.2.0)(react@18.2.0) '@heathmont/moon-themes-tw': - specifier: workspace:^10.10.1 + specifier: workspace:^10.10.2 version: link:../workspaces/themes '@types/node': specifier: 20.4.9 @@ -235,7 +238,7 @@ importers: specifier: workspace:^10.7.1 version: link:../packages/charts '@heathmont/moon-cmdk-tw': - specifier: workspace:^10.10.1 + specifier: workspace:^10.10.2 version: link:../workspaces/cmdk '@heathmont/moon-components': specifier: workspace:^10.7.1 @@ -244,7 +247,7 @@ importers: specifier: workspace:^10.7.1 version: link:../packages/core '@heathmont/moon-core-tw': - specifier: workspace:^10.10.1 + specifier: workspace:^10.10.2 version: link:../workspaces/core '@heathmont/moon-datepicker': specifier: workspace:^10.7.1 @@ -274,13 +277,13 @@ importers: specifier: workspace:^10.7.1 version: link:../packages/table '@heathmont/moon-table-tw': - specifier: workspace:^10.10.1 + specifier: workspace:^10.10.2 version: link:../workspaces/tables '@heathmont/moon-themes': specifier: workspace:^10.7.1 version: link:../packages/themes '@heathmont/moon-themes-tw': - specifier: workspace:^10.10.1 + specifier: workspace:^10.10.2 version: link:../workspaces/themes '@heathmont/moon-utils': specifier: workspace:^10.7.1 @@ -326,7 +329,7 @@ importers: version: 3.0.0 jest: specifier: 27.5.1 - version: 27.5.1 + version: 27.5.1(ts-node@10.9.1) jest-environment-jsdom: specifier: 27.5.1 version: 27.5.1 @@ -673,7 +676,7 @@ importers: version: 18.2.0 react-dnd: specifier: 14.0.3 - version: 14.0.3(@types/react@18.2.19)(react@18.2.0) + version: 14.0.3(@types/node@20.4.9)(@types/react@18.2.19)(react@18.2.0) react-dnd-html5-backend: specifier: 14.0.1 version: 14.0.1 @@ -1002,7 +1005,7 @@ importers: specifier: 1.7.16 version: 1.7.16(react-dom@18.2.0)(react@18.2.0) '@heathmont/moon-core-tw': - specifier: workspace:^10.10.1 + specifier: workspace:^10.10.2 version: link:../core cmdk: specifier: 0.2.0 @@ -1062,7 +1065,7 @@ importers: workspaces/tables: dependencies: '@heathmont/moon-core-tw': - specifier: workspace:^10.10.1 + specifier: workspace:^10.10.2 version: link:../core react: specifier: 18.2.0 @@ -2773,7 +2776,6 @@ packages: engines: {node: '>=12'} dependencies: '@jridgewell/trace-mapping': 0.3.9 - dev: false /@emotion/babel-plugin@11.10.6: resolution: {integrity: sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==} @@ -3056,7 +3058,7 @@ packages: slash: 3.0.0 dev: true - /@jest/core@27.5.1: + /@jest/core@27.5.1(ts-node@10.9.1): resolution: {integrity: sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==} engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} peerDependencies: @@ -3077,7 +3079,7 @@ packages: exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 27.5.1 - jest-config: 27.5.1 + jest-config: 27.5.1(ts-node@10.9.1) jest-haste-map: 27.5.1 jest-message-util: 27.5.1 jest-regex-util: 27.5.1 @@ -3100,7 +3102,7 @@ packages: - ts-node - utf-8-validate - /@jest/core@28.1.3: + /@jest/core@28.1.3(ts-node@10.9.1): resolution: {integrity: sha512-CIKBrlaKOzA7YG19BEqCw3SLIsEwjZkeJzf5bdooVnW4bH5cktqe3JX+G2YV1aK5vP8N9na1IGWFzYaTp6k6NA==} engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0} peerDependencies: @@ -3121,7 +3123,7 @@ packages: exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 28.1.3 - jest-config: 28.1.3(@types/node@20.4.9) + jest-config: 28.1.3(@types/node@20.4.9)(ts-node@10.9.1) jest-haste-map: 28.1.3 jest-message-util: 28.1.3 jest-regex-util: 28.0.2 @@ -3506,7 +3508,6 @@ packages: dependencies: '@jridgewell/resolve-uri': 3.1.0 '@jridgewell/sourcemap-codec': 1.4.15 - dev: false /@manypkg/find-root@1.1.0: resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==} @@ -4833,19 +4834,15 @@ packages: /@tsconfig/node10@1.0.9: resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==} - dev: false /@tsconfig/node12@1.0.11: resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==} - dev: false /@tsconfig/node14@1.0.3: resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==} - dev: false /@tsconfig/node16@1.0.4: resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==} - dev: false /@types/acorn@4.0.6: resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==} @@ -5423,7 +5420,6 @@ packages: /acorn-walk@8.2.0: resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==} engines: {node: '>=0.4.0'} - dev: false /acorn@7.4.1: resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==} @@ -9100,7 +9096,7 @@ packages: - supports-color dev: true - /jest-cli@27.5.1: + /jest-cli@27.5.1(ts-node@10.9.1): resolution: {integrity: sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==} engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} hasBin: true @@ -9110,14 +9106,14 @@ packages: node-notifier: optional: true dependencies: - '@jest/core': 27.5.1 + '@jest/core': 27.5.1(ts-node@10.9.1) '@jest/test-result': 27.5.1 '@jest/types': 27.5.1 chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 import-local: 3.1.0 - jest-config: 27.5.1 + jest-config: 27.5.1(ts-node@10.9.1) jest-util: 27.5.1 jest-validate: 27.5.1 prompts: 2.4.2 @@ -9129,7 +9125,7 @@ packages: - ts-node - utf-8-validate - /jest-cli@28.1.3: + /jest-cli@28.1.3(@types/node@20.4.9)(ts-node@10.9.1): resolution: {integrity: sha512-roY3kvrv57Azn1yPgdTebPAXvdR2xfezaKKYzVxZ6It/5NCxzJym6tUI5P1zkdWhfUYkxEI9uZWcQdaFLo8mJQ==} engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0} hasBin: true @@ -9139,14 +9135,14 @@ packages: node-notifier: optional: true dependencies: - '@jest/core': 28.1.3 + '@jest/core': 28.1.3(ts-node@10.9.1) '@jest/test-result': 28.1.3 '@jest/types': 28.1.3 chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 import-local: 3.1.0 - jest-config: 28.1.3(@types/node@20.4.9) + jest-config: 28.1.3(@types/node@20.4.9)(ts-node@10.9.1) jest-util: 28.1.3 jest-validate: 28.1.3 prompts: 2.4.2 @@ -9157,7 +9153,7 @@ packages: - ts-node dev: true - /jest-config@27.5.1: + /jest-config@27.5.1(ts-node@10.9.1): resolution: {integrity: sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==} engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} peerDependencies: @@ -9190,13 +9186,14 @@ packages: pretty-format: 27.5.1 slash: 3.0.0 strip-json-comments: 3.1.1 + ts-node: 10.9.1(@types/node@20.4.9)(typescript@5.1.6) transitivePeerDependencies: - bufferutil - canvas - supports-color - utf-8-validate - /jest-config@28.1.3(@types/node@20.4.9): + /jest-config@28.1.3(@types/node@20.4.9)(ts-node@10.9.1): resolution: {integrity: sha512-MG3INjByJ0J4AsNBm7T3hsuxKQqFIiRo/AUqb1q9LRKI5UU6Aar9JHbr9Ivn1TVwfUD9KirRoM/T6u8XlcQPHQ==} engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0} peerDependencies: @@ -9231,6 +9228,7 @@ packages: pretty-format: 28.1.3 slash: 3.0.0 strip-json-comments: 3.1.1 + ts-node: 10.9.1(@types/node@20.4.9)(typescript@5.1.6) transitivePeerDependencies: - supports-color dev: true @@ -9953,7 +9951,7 @@ packages: supports-color: 8.1.1 dev: true - /jest@27.5.1: + /jest@27.5.1(ts-node@10.9.1): resolution: {integrity: sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==} engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} hasBin: true @@ -9963,9 +9961,9 @@ packages: node-notifier: optional: true dependencies: - '@jest/core': 27.5.1 + '@jest/core': 27.5.1(ts-node@10.9.1) import-local: 3.1.0 - jest-cli: 27.5.1 + jest-cli: 27.5.1(ts-node@10.9.1) transitivePeerDependencies: - bufferutil - canvas @@ -9973,7 +9971,7 @@ packages: - ts-node - utf-8-validate - /jest@28.1.3: + /jest@28.1.3(@types/node@20.4.9)(ts-node@10.9.1): resolution: {integrity: sha512-N4GT5on8UkZgH0O5LUavMRV1EDEhNTL0KEfRmDIeZHSV7p2XgLoY9t9VDUgL6o+yfdgYHVxuz81G8oB9VG5uyA==} engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0} hasBin: true @@ -9983,10 +9981,10 @@ packages: node-notifier: optional: true dependencies: - '@jest/core': 28.1.3 + '@jest/core': 28.1.3(ts-node@10.9.1) '@jest/types': 28.1.3 import-local: 3.1.0 - jest-cli: 28.1.3 + jest-cli: 28.1.3(@types/node@20.4.9)(ts-node@10.9.1) transitivePeerDependencies: - '@types/node' - supports-color @@ -11731,7 +11729,7 @@ packages: postcss: 8.4.27 dev: false - /postcss-load-config@3.1.4(postcss@8.4.27): + /postcss-load-config@3.1.4(postcss@8.4.27)(ts-node@10.9.1): resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} engines: {node: '>= 10'} peerDependencies: @@ -11745,6 +11743,7 @@ packages: dependencies: lilconfig: 2.1.0 postcss: 8.4.27 + ts-node: 10.9.1(@types/node@20.4.9)(typescript@5.1.6) yaml: 1.10.2 dev: true @@ -12044,7 +12043,7 @@ packages: dnd-core: 14.0.0 dev: false - /react-dnd@14.0.3(@types/react@18.2.19)(react@18.2.0): + /react-dnd@14.0.3(@types/node@20.4.9)(@types/react@18.2.19)(react@18.2.0): resolution: {integrity: sha512-i73Hx5SKfDRdwXe30+CjF/DidiRdt/gwpPN14ajkPR20t/0osnNKFNHg3DLV6RZym+DJ0pO9H5APeMsBWGU3+Q==} peerDependencies: '@types/hoist-non-react-statics': '>= 3.3.1' @@ -12061,6 +12060,7 @@ packages: dependencies: '@react-dnd/invariant': 2.0.0 '@react-dnd/shallowequal': 2.0.0 + '@types/node': 20.4.9 '@types/react': 18.2.19 dnd-core: 14.0.0 fast-deep-equal: 3.1.3 @@ -12988,7 +12988,7 @@ packages: peerDependencies: jest: '>=16' dependencies: - jest: 27.5.1 + jest: 27.5.1(ts-node@10.9.1) jest-diff: 29.6.2 jest-snapshot: 29.6.2 pretty-format: 29.6.2 @@ -13788,7 +13788,6 @@ packages: typescript: 5.1.6 v8-compile-cache-lib: 3.0.1 yn: 3.1.1 - dev: false /ts-node@9.1.1(typescript@5.1.6): resolution: {integrity: sha512-hPlt7ZACERQGf03M253ytLY3dHbGNGrAq9qIHWUY9XHYl1z7wYngSr3OQ5xmui8o2AaxsONxIzjafLUiWBo1Fg==} @@ -13929,7 +13928,7 @@ packages: dependencies: is-typedarray: 1.0.0 - /typescript-plugin-css-modules@5.0.1(typescript@5.1.6): + /typescript-plugin-css-modules@5.0.1(ts-node@10.9.1)(typescript@5.1.6): resolution: {integrity: sha512-hKXObfwfjx2/myRq4JeQ8D3xIWYTFqusi0hS/Aka7RFX1xQEoEkdOGDWyXNb8LmObawsUzbI30gQnZvqYXCrkA==} peerDependencies: typescript: '>=4.0.0' @@ -13941,7 +13940,7 @@ packages: less: 4.1.3 lodash.camelcase: 4.3.0 postcss: 8.4.27 - postcss-load-config: 3.1.4(postcss@8.4.27) + postcss-load-config: 3.1.4(postcss@8.4.27)(ts-node@10.9.1) postcss-modules-extract-imports: 3.0.0(postcss@8.4.27) postcss-modules-local-by-default: 4.0.3(postcss@8.4.27) postcss-modules-scope: 3.0.0(postcss@8.4.27) @@ -14173,7 +14172,6 @@ packages: /v8-compile-cache-lib@3.0.1: resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==} - dev: false /v8-compile-cache@2.3.0: resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==} diff --git a/workspaces/base/CHANGELOG.md b/workspaces/base/CHANGELOG.md index be0f1260d1..29332b10c7 100644 --- a/workspaces/base/CHANGELOG.md +++ b/workspaces/base/CHANGELOG.md @@ -1,5 +1,11 @@ # @heathmont/moon-base-tw +## 10.10.2 + +### Patch Changes + +- Deploy 10.10.2 + ## 10.10.1 ### Patch Changes diff --git a/workspaces/base/package.json b/workspaces/base/package.json index 60df0f70dc..19426d5d81 100644 --- a/workspaces/base/package.json +++ b/workspaces/base/package.json @@ -1,7 +1,7 @@ { "name": "@heathmont/moon-base-tw", "sideEffects": false, - "version": "10.10.1", + "version": "10.10.2", "files": [ "lib" ], diff --git a/workspaces/base/src/button/Button.tsx b/workspaces/base/src/button/Button.tsx index 873944e592..33b87110d5 100644 --- a/workspaces/base/src/button/Button.tsx +++ b/workspaces/base/src/button/Button.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import mergeClassnames from '../mergeClassnames/mergeClassnames'; +import type ButtonProps from './private/types/ButtonProps'; +import type ButtonVariants from './private/types/ButtonVariants'; import AnimationContent from './private/utils/buttonAnimations/AnimationContent'; import getButtonSize from './private/utils/buttonSizes/getButtonSize'; import ButtonComponent from './styles/ButtonComponent'; import Hover from './styles/Hover'; import IconLeft from './styles/IconLeft'; import IconRight from './styles/IconRight'; -import type ButtonProps from './private/types/ButtonProps'; -import type ButtonVariants from './private/types/ButtonVariants'; +import mergeClassnames from '../mergeClassnames/mergeClassnames'; export type Props = React.PropsWithChildren< ButtonProps @@ -16,7 +16,7 @@ export type Props = React.PropsWithChildren< const Button = ({ children, - variant = 'primary', + variant = 'fill', size = 'md', iconLeft, iconRight, @@ -31,7 +31,7 @@ const Button = ({ animation === 'progress' || animation === 'success'; if (!children) { return ( - + ({ animation={animation} size={size} fullWidth={fullWidth} + variant={variant} /> ) : ( <> diff --git a/workspaces/base/src/button/private/types/ButtonSettingsProps.ts b/workspaces/base/src/button/private/types/ButtonSettingsProps.ts index 5965bebaf0..45b38bf7c8 100644 --- a/workspaces/base/src/button/private/types/ButtonSettingsProps.ts +++ b/workspaces/base/src/button/private/types/ButtonSettingsProps.ts @@ -1,4 +1,4 @@ -import ButtonAnimations from './ButtonAnimations'; +import type ButtonAnimations from './ButtonAnimations'; import type ButtonSizes from './ButtonSizes'; import type ButtonVariants from './ButtonVariants'; diff --git a/workspaces/base/src/button/private/types/ButtonVariants.ts b/workspaces/base/src/button/private/types/ButtonVariants.ts index 1ad1e2d6d5..06ca8b14c1 100644 --- a/workspaces/base/src/button/private/types/ButtonVariants.ts +++ b/workspaces/base/src/button/private/types/ButtonVariants.ts @@ -1,3 +1,9 @@ -type ButtonVariants = 'primary' | 'secondary' | 'tertiary' | 'ghost'; +type ButtonVariants = + | 'fill' + | 'outline' + | 'ghost' + | 'primary' + | 'secondary' + | 'tertiary'; export default ButtonVariants; diff --git a/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx b/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx index cd9ed3a307..862c4941c9 100644 --- a/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx +++ b/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx @@ -7,6 +7,7 @@ import IconRight from '../../../styles/IconRight'; import type ButtonSettingsProps from '../../types/ButtonSettingsProps'; import getIconSize from '../buttonSizes/getIconSize'; import getLoaderSize from '../buttonSizes/getLoaderSize'; +import getLoaderColor from '../buttonStyles/getLoaderColor'; const AnimationContent = ({ children, @@ -15,6 +16,7 @@ const AnimationContent = ({ animation, size, fullWidth, + variant, }: ButtonSettingsProps) => ( {animation === 'progress' && ( - + )} {animation === 'success' && ( { - if (variant === 'secondary') { - return 'btn-secondary'; + animation, +}: Pick): string => { + if (variant === 'secondary' || variant === 'outline') { + return animation === 'error' + ? mergeClassnames( + 'text-chichi bg-transparent ring-inset ring-1 ring-chichi', + !disabled && 'hover:bg-chichi-10' + ) + : mergeClassnames( + 'text-bulma bg-transparent ring-inset ring-1 ring-trunks', + !disabled && 'hover:ring-bulma' + ); } if (variant === 'tertiary') { - return 'btn-tertiary'; + return animation === 'error' ? 'text-goten bg-chichi' : 'text-goten bg-hit'; } if (variant === 'ghost') { - return mergeClassnames( - 'text-trunks bg-transparent', - !disabled && 'hover:text-bulma' - ); + return animation === 'error' + ? mergeClassnames( + 'text-chichi bg-transparent', + !disabled && 'hover:bg-chichi-10' + ) + : mergeClassnames( + 'text-trunks bg-transparent', + !disabled && 'hover:text-bulma' + ); } - return 'btn-primary'; + return animation === 'error' + ? 'text-goten bg-chichi' + : 'text-goten bg-piccolo'; }; export default getButtonVariants; diff --git a/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts b/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts index 43edfebcc5..4548cd2798 100644 --- a/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts +++ b/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts @@ -6,31 +6,31 @@ const getIconHorizontalPosition = ({ iconRight, iconLeft, size, -}: Props): string => { +}: Pick): string => { if (iconRight) { switch (size) { case 'xs': case 'sm': - return 'ltr:right-1 rtl:left-1'; + return 'end-1'; case 'lg': - return 'ltr:right-3 rtl:left-3'; + return 'end-3'; case 'xl': - return 'ltr:right-4 rtl:left-4'; + return 'end-4'; default: - return 'ltr:right-2 rtl:left-2'; + return 'end-2'; } } if (iconLeft) { switch (size) { case 'xs': case 'sm': - return 'ltr:left-1 rtl:right-1'; + return 'start-1'; case 'lg': - return 'ltr:left-3 rtl:right-3'; + return 'start-3'; case 'xl': - return 'ltr:left-4 rtl:right-4'; + return 'start-4'; default: - return 'ltr:left-2 rtl:right-2'; + return 'start-2'; } } return ''; diff --git a/workspaces/base/src/button/private/utils/buttonStyles/getLoaderColor.ts b/workspaces/base/src/button/private/utils/buttonStyles/getLoaderColor.ts new file mode 100644 index 0000000000..c7826486ec --- /dev/null +++ b/workspaces/base/src/button/private/utils/buttonStyles/getLoaderColor.ts @@ -0,0 +1,15 @@ +import type ButtonVariants from '../../types/ButtonVariants'; + +const getLoaderColor = (variant?: ButtonVariants): string => { + switch (variant) { + case 'secondary': + case 'outline': + return 'border-bulma'; + case 'ghost': + return 'border-trunks'; + default: + return 'border-goten'; + } +}; + +export default getLoaderColor; diff --git a/workspaces/base/src/button/styles/ButtonComponent.tsx b/workspaces/base/src/button/styles/ButtonComponent.tsx index 2a40708e3d..606e96e3eb 100644 --- a/workspaces/base/src/button/styles/ButtonComponent.tsx +++ b/workspaces/base/src/button/styles/ButtonComponent.tsx @@ -1,10 +1,10 @@ import React from 'react'; import mergeClassnames from '../../mergeClassnames/mergeClassnames'; +import type ButtonProps from '../private/types/ButtonProps'; import getAnimation from '../private/utils/buttonAnimations/getAnimation'; import getButtonSize from '../private/utils/buttonSizes/getButtonSize'; import getButtonCommonStyles from '../private/utils/buttonStyles/getButtonCommonStyles'; import getButtonVariants from '../private/utils/buttonStyles/getButtonVariants'; -import type ButtonProps from '../private/types/ButtonProps'; const ButtonComponent = ({ variant, diff --git a/workspaces/base/src/button/styles/Hover.tsx b/workspaces/base/src/button/styles/Hover.tsx index e9c68d9262..a47a6b79fd 100644 --- a/workspaces/base/src/button/styles/Hover.tsx +++ b/workspaces/base/src/button/styles/Hover.tsx @@ -10,7 +10,7 @@ const Hover = ({ className }: HoverProps) => ( className={mergeClassnames( 'hover z-[-1] block absolute inset-0 pointer-events-none', 'transition-[background-color_0.2s_ease-in-out]', - 'hover:bg-bulma/[.07]', + 'hover:bg-heles', className )} /> diff --git a/workspaces/base/src/button/styles/IconLeft.tsx b/workspaces/base/src/button/styles/IconLeft.tsx index dd01596403..a4bba78590 100644 --- a/workspaces/base/src/button/styles/IconLeft.tsx +++ b/workspaces/base/src/button/styles/IconLeft.tsx @@ -1,8 +1,8 @@ import React from 'react'; import mergeClassnames from '../../mergeClassnames/mergeClassnames'; +import type ButtonSettingsProps from '../private/types/ButtonSettingsProps'; import getIconSize from '../private/utils/buttonSizes/getIconSize'; import getIconHorizontalPosition from '../private/utils/buttonStyles/getIconHorizontalPosition'; -import type ButtonSettingsProps from '../private/types/ButtonSettingsProps'; const IconLeft = ({ fullWidth, iconLeft, size }: ButtonSettingsProps) => ( ( ( size: inputSize, error: inputError, disabled: inputDisabled, - isRtl, id, ...rest }, @@ -37,26 +37,19 @@ const Input = forwardRef( disabled={disabled} max={getMaxDate(type)} className={mergeClassnames( - 'block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2]', - 'bg-goku shadow-input hover:shadow-input-hov', - 'focus:shadow-input-focus focus:outline-none', - 'focus-visible::shadow-input-focus focus-visible::outline-none', + 'block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma', + 'transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov', + 'focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus', + 'focus-visible::outline-none before:box-border after:box-border placeholder:delay-75', + 'placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity', + 'read-only:outline-0 read-only:border-none read-only:cursor-not-allowed', + 'read-only:hover:shadow-input read-only:focus:shadow-input', + 'read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err', + 'invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err', + getSizeStyles(size), + getTypeStyles(type), error && 'shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err', - getSizeStyles(size), - 'before:box-border after:box-border', - 'placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75', - 'read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input', - type === 'number' && 'input-number-clear', - type === 'date' && 'input-d', - type === 'date' && isRtl && 'input-d-rtl', - type === 'time' && 'input-t', - type === 'time' && isRtl && 'input-t-rtl', - type === 'datetime-local' && 'input-d', - type === 'datetime-local' && isRtl && 'input-dt-local-rtl', - size === 'lg' && 'input-lg-dt-shared', - 'input-dt-shared', - 'invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err', disabled && 'opacity-60 cursor-not-allowed', className && className )} diff --git a/workspaces/core/src/input/private/utils/getBorderRadius.ts b/workspaces/core/src/input/private/utils/getBorderRadius.ts deleted file mode 100644 index 337a8d15be..0000000000 --- a/workspaces/core/src/input/private/utils/getBorderRadius.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type InputProps from '../types/InputProps'; - -const getBorderRadius = (size?: InputProps['size'] | 'xl'): string => { - switch (size) { - case 'xl': - case 'lg': - return 'rounded-moon-i-sm'; - default: - return 'rounded-moon-i-xs'; - } -}; - -export default getBorderRadius; diff --git a/workspaces/core/src/input/private/utils/getSizeStyles.ts b/workspaces/core/src/input/private/utils/getSizeStyles.ts index f66552e8f1..ab4f29f84e 100644 --- a/workspaces/core/src/input/private/utils/getSizeStyles.ts +++ b/workspaces/core/src/input/private/utils/getSizeStyles.ts @@ -1,15 +1,13 @@ import type InputProps from '../types/InputProps'; -const getSizeStyles = (size?: InputProps['size'] | 'xl'): string => { +const getSizeStyles = (size?: InputProps['size']): string => { switch (size) { - case 'xl': - return 'h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm'; case 'lg': - return 'h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm'; + return 'h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared'; case 'sm': - return 'h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs'; + return 'h-8 leading-8 rounded-moon-i-xs input-dt-shared'; default: - return 'h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm'; + return 'h-10 leading-10 rounded-moon-i-sm input-dt-shared'; } }; diff --git a/workspaces/core/src/input/private/utils/getTypeStyles.ts b/workspaces/core/src/input/private/utils/getTypeStyles.ts new file mode 100644 index 0000000000..6f6529702b --- /dev/null +++ b/workspaces/core/src/input/private/utils/getTypeStyles.ts @@ -0,0 +1,18 @@ +import type InputProps from '../types/InputProps'; + +const getTypeStyles = (type?: InputProps['type']): string | undefined => { + switch (type) { + case 'number': + return 'input-number-clear'; + case 'date': + return 'ltr:input-d rtl:input-d-rtl'; + case 'time': + return 'ltr:input-t rtl:input-t-rtl'; + case 'datetime-local': + return 'ltr:input-d rtl:input-dt-local-rtl'; + default: + return; + } +}; + +export default getTypeStyles; diff --git a/workspaces/core/src/insetInput/InsetInput.tsx b/workspaces/core/src/insetInput/InsetInput.tsx index 81078ff902..58cfb18210 100644 --- a/workspaces/core/src/insetInput/InsetInput.tsx +++ b/workspaces/core/src/insetInput/InsetInput.tsx @@ -5,6 +5,7 @@ import InsetInputContext from './private/utils/InsetInputContext'; import useInsetInputContext from './private/utils/useInsetInputContext'; import useFormItemContext from '../form/private/utils/useFormItemContext'; import getMaxDate from '../input/private/utils/getMaxDate'; +import getTypeStyles from '../input/private/utils/getTypeStyles'; import mergeClassnames from '../mergeClassnames/mergeClassnames'; import useRegisterChild from '../private/utils/useRegisterChild'; @@ -32,26 +33,21 @@ const InsetInputRoot = forwardRef( disabled={disabled} max={getMaxDate(rest.type)} className={mergeClassnames( - 'block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2]', - 'bg-transparent shadow-input hover:shadow-input-hov', - 'focus:shadow-input-focus focus:outline-none', + 'block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma', + 'transition-shadow box-border relative z-[2] bg-transparent shadow-input', + 'hover:shadow-input-hov focus:shadow-input-focus focus:outline-none', 'focus-visible:shadow-input-focus focus-visible::outline-none', error && 'shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err', - 'h-14 leading-[3.5rem] rounded-moon-i-sm', - 'rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm', - 'ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm', - 'before:box-border after:box-border', - 'placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75', - 'read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input', - rest.type === 'number' && 'input-number-clear', - rest.type === 'date' && 'ltr:input-d rtl:input-d-rtl', - rest.type === 'time' && 'ltr:input-t rtl:input-t-rtl', - rest.type === 'datetime-local' && - 'ltr:input-d rtl:input-dt-local-rtl', - 'input-xl-dt-shared', + 'h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border', + 'placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity', + 'placeholder:delay-75 read-only:outline-0 read-only:border-none', + 'read-only:cursor-not-allowed read-only:hover:shadow-input', + 'read-only:focus:shadow-input read-only:focus-visible:shadow-input', + 'invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared', + 'invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err', + getTypeStyles(rest.type), isLabel && 'input-xl pt-[1.125rem] input-xl-dt-label', - 'invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err', disabled && 'opacity-60 cursor-not-allowed' )} {...rest} @@ -71,7 +67,7 @@ const Label = ({ children, className }: LabelProps) => { return (
    diff --git a/workspaces/tables/src/components/TH.tsx b/workspaces/tables/src/components/TH.tsx index a907405e70..0c81b51f68 100644 --- a/workspaces/tables/src/components/TH.tsx +++ b/workspaces/tables/src/components/TH.tsx @@ -16,6 +16,7 @@ const TH = forwardRef( variant, rowSize, isCellBorder, + onClick, }, ref ) => ( @@ -32,6 +33,7 @@ const TH = forwardRef( stickySide === 'right' && 'before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0' )} + onClick={onClick} > {children}
    diff --git a/workspaces/tables/src/components/Table.tsx b/workspaces/tables/src/components/Table.tsx index 6df369d4d7..314dedba9e 100644 --- a/workspaces/tables/src/components/Table.tsx +++ b/workspaces/tables/src/components/Table.tsx @@ -14,6 +14,7 @@ import { UseResizeColumnsColumnProps, UseSortByColumnProps, TableOptions, + UseExpandedRowProps, } from 'react-table'; import { useSticky } from 'react-table-sticky'; import Body from './Body'; @@ -75,6 +76,7 @@ const Table = ({ headerGroups, footerGroups, rows, + rowsById, prepareRow, visibleColumns, toggleAllRowsExpanded, @@ -101,6 +103,8 @@ const Table = ({ const { scrollState, handleScroll } = useScrollState(tableRef); const [selectedRows, setSelectedRows] = useState[]>([]); + let updateRowSelectState: (() => React.Dispatch>) | undefined = undefined; + useEffect(() => { if (expandedByDefault === undefined || !data || !data.length) return; toggleAllRowsExpanded(expandedByDefault); @@ -112,8 +116,8 @@ const Table = ({ setSelectedRows( rows?.length ? rows.filter((row: Row<{ isSelected?: boolean }>) => { - return row.original?.isSelected; - }) + return row.original?.isSelected; + }) : [] ); }, []); @@ -139,16 +143,35 @@ const Table = ({ stickySide={ // @ts-ignore (column.sticky === 'left' || column.parent?.sticky === 'left') && - scrollState.scrolledToRight + scrollState.scrolledToRight ? 'left' : // @ts-ignore column.sticky === 'right' || column.parent?.sticky === 'right' - ? 'right' - : '' + ? 'right' + : '' } isLastColumn={isLastColumn} rowSize={rowSize} isCellBorder={isCellBorder} + onClick={(e) => { + const isTargetCheckbox = (e.target as HTMLElement).closest('label[for$="root"]'); + if (isTargetCheckbox !== null) { + const checkboxInput = isTargetCheckbox?.querySelector('input[type="checkbox"]') as HTMLInputElement; + if (checkboxInput?.checked) { + setSelectedRows([]); + updateRowSelectState && updateRowSelectState()({}); + } else { + setSelectedRows(Object.values(rowsById)); + updateRowSelectState && updateRowSelectState()( + Object.keys(rowsById) + .reduce((acc: { [key: string]: boolean }, item: string) => { + acc[item] = true; + return acc; + }, {}) + ); + } + } + }} > {column.render('Header')}
    React.Dispatch>) => { + updateRowSelectState = callback; + } + + const selectCheckableRow = (selectedRow: any, target?: HTMLElement) => { + const row = selectedRow as Row<{}>; + const xRow = selectedRow as UseExpandedRowProps<{}> + const isTargetCheckbox = target && target?.closest(`label[for$="${row.id}"]`); + + if (isTargetCheckbox === null) { + return; + } + + let alreadySelectedRows = [...selectedRows]; + const alreadySelectedRow = alreadySelectedRows.filter( + (selectedRow) => row.id === selectedRow.id + )[0]; + + if (xRow.canExpand) { + /** Handling an expandable node */ + const selectedIndexes = alreadySelectedRows.map((item: Row<{}>) => item.id); + const allSelected = Object.keys(rowsById) + .filter((id) => id.indexOf(row.id) === 0) + .every((id) => selectedIndexes.indexOf(id) > -1); + + if (alreadySelectedRow && allSelected) { + /** Removing the selected row */ + alreadySelectedRows = alreadySelectedRows.filter(({ id }) => id.indexOf(row.id) !== 0); + } else { + /** Appending the selected row */ + alreadySelectedRows = Object.values(rowsById) + .reduce((acc: Row<{}>[], item: Row<{}>) => { + if (item.id.indexOf(row.id) === 0 + && selectedIndexes.indexOf(item.id) === -1 + ) + acc.push(item); + return acc; + }, alreadySelectedRows); + } + } else { + /** Handling a simple row */ + if (alreadySelectedRow) { + alreadySelectedRows = alreadySelectedRows.filter( + (selectedRow) => row.id !== selectedRow.id + ); + } else { + alreadySelectedRows.push(row); + } + } + + /** Rising up checking wether a branch is completely checked/unchecked after an item toggle */ + if (selectable && alreadySelectedRows) { + let depth = xRow.depth; + while (depth > 0) { + const mask = row.id.split('.').slice(0, depth).join('.'); + const branchRowsAtSpecifiedDepth = alreadySelectedRows + .filter(({ id }) => id.split('.').length === (depth + 1) && id.indexOf(mask) === 0 && id !== mask); + + const areThereAnySelectedRowsAtThisBranch = branchRowsAtSpecifiedDepth + .some(({ id }) => id.indexOf(mask) === 0 && id !== mask); + + if (!areThereAnySelectedRowsAtThisBranch) { + alreadySelectedRows = alreadySelectedRows.filter(({ id }) => id !== mask); + } else { + const isAllRowsSelectedAtThisBranch = branchRowsAtSpecifiedDepth.every(Boolean); + + if (isAllRowsSelectedAtThisBranch) { + const isNodeRowAlreadyAffected = alreadySelectedRows.filter(({ id }) => id === mask).length; + if (!isNodeRowAlreadyAffected) { + alreadySelectedRows.push(rowsById[mask]); + } + } + } + depth--; + } + } + + /** Toggling the "hover" state for the affected rows */ + updateRowSelectState && updateRowSelectState()( + alreadySelectedRows.reduce((acc: { [key: string]: boolean }, item) => { + acc[item.id] = true + return acc; + }, {}) || {} + ); + + /** Toggling state for the affected checkboxes */ + setSelectedRows(alreadySelectedRows); + } + + const selectCommonRow = (selectedRow: any, target?: HTMLElement) => { + const row = selectedRow as Row<{}>; + let alreadySelectedRows = [...selectedRows]; + const alreadySelectedRow = alreadySelectedRows.filter( + (selectedRow) => row.id === selectedRow.id + )[0]; + + if (alreadySelectedRow) { + alreadySelectedRows = alreadySelectedRows.filter( + (selectedRow) => row.id !== selectedRow.id + ); + } else { + alreadySelectedRows.push(row); + } + + setSelectedRows(alreadySelectedRows); + } + const renderTableComponent = () => ( - {headerGroups.map((headerGroup: HeaderGroup) => ( + {headerGroups.map((headerGroup: HeaderGroup, index) => ( {variant === 'calendar' ? renderSpanRows({ - rows, - prepareRow, - getOnRowClickHandler, - evenRowBackgroundColor, - defaultRowBackgroundColor, - rowSpanHeaders, - selectable, - useCheckbox, - rowSize, - isCellBorder, - }) + rows, + prepareRow, + getOnRowClickHandler, + evenRowBackgroundColor, + defaultRowBackgroundColor, + rowSpanHeaders, + selectable, + useCheckbox, + rowSize, + isCellBorder, + }) : renderRows({ - rows, - prepareRow, - getOnRowClickHandler, - getOnRowSelectHandler: !selectable - ? undefined - : (row) => () => { - let alreadySelectedRows = [...selectedRows]; - const alreadySelectedRow = alreadySelectedRows.filter( - (selectedRow) => row.id === selectedRow.id - )[0]; - - if (alreadySelectedRow) { - alreadySelectedRows = alreadySelectedRows.filter( - (selectedRow) => row.id !== selectedRow.id - ); - } else { - alreadySelectedRows.push(row); - } + rows, + prepareRow, + getOnRowClickHandler, + getOnRowSelectHandler: !selectable + ? undefined + : useCheckbox + ? (row) => selectCheckableRow + : (row) => selectCommonRow, - setSelectedRows(alreadySelectedRows); - }, - evenRowBackgroundColor, - defaultRowBackgroundColor, - renderRowSubComponent, - selectable, - useCheckbox, - rowSize, - isCellBorder, - textClip, - })} + evenRowBackgroundColor, + defaultRowBackgroundColor, + renderRowSubComponent, + setForceUpdateRowSelectedState, + selectable, + useCheckbox, + rowSize, + isCellBorder, + textClip, + })} {withFooter && ( diff --git a/workspaces/tables/src/private/types/RenderRowsProps.ts b/workspaces/tables/src/private/types/RenderRowsProps.ts index 52cd6a8a20..efab7c9f24 100644 --- a/workspaces/tables/src/private/types/RenderRowsProps.ts +++ b/workspaces/tables/src/private/types/RenderRowsProps.ts @@ -13,8 +13,9 @@ type RenderRowsProps = { ) => ((row: Row) => void | (() => void)) | undefined; getOnRowSelectHandler?: ( row: Row - ) => ((row: Row) => void | (() => void)) | undefined; + ) => ((row: Row, target?: HTMLElement) => void | (() => void)) | undefined; renderRowSubComponent?: (props: RowSubComponentProps) => JSX.Element; + setForceUpdateRowSelectedState?: (callback: () => React.Dispatch>) => void; selectable?: boolean; useCheckbox?: boolean; rowSize?: RowSizes; diff --git a/workspaces/tables/src/private/types/THProps.ts b/workspaces/tables/src/private/types/THProps.ts index 3020628e92..cd9858e2f1 100644 --- a/workspaces/tables/src/private/types/THProps.ts +++ b/workspaces/tables/src/private/types/THProps.ts @@ -10,6 +10,7 @@ type THProps = { variant?: TableVariant; rowSize?: RowSizes; isCellBorder?: boolean; + onClick?: (e: any) => void; }; export default THProps; diff --git a/workspaces/tables/src/private/utils/renderRows.tsx b/workspaces/tables/src/private/utils/renderRows.tsx index bc0a588060..ac137228bd 100644 --- a/workspaces/tables/src/private/utils/renderRows.tsx +++ b/workspaces/tables/src/private/utils/renderRows.tsx @@ -1,5 +1,4 @@ -import React, { Fragment, useState } from 'react'; -import { Checkbox } from '@heathmont/moon-core-tw'; +import React, { Fragment, useEffect, useState } from 'react'; import type { Cell, Row, UseExpandedRowProps } from 'react-table'; import BodyTR from '../../components/BodyTR'; import TD from '../../components/TD'; @@ -13,6 +12,7 @@ const renderRows = ({ getOnRowClickHandler, getOnRowSelectHandler, renderRowSubComponent, + setForceUpdateRowSelectedState, selectable, useCheckbox, rowSize, @@ -24,7 +24,12 @@ const renderRows = ({ {} ); - if (!rows) return; + useEffect(() => { + selectable + && useCheckbox + && setForceUpdateRowSelectedState + && setForceUpdateRowSelectedState(() => setSelectedRows); + }); return rows.map( ( @@ -51,7 +56,7 @@ const renderRows = ({ const fontColor = row.original?.fontColor; const isLastNestedRow = rowId.length > nextRowId.length; const expandedRow = row as unknown as UseExpandedRowProps<{}>; - const resolveRowClick = () => { + const resolveRowClick = (target: HTMLElement) => { const invokeClickHandler = () => { const clickHandlerInvoked = getOnRowClickHandler ? getOnRowClickHandler(row) @@ -62,12 +67,14 @@ const renderRows = ({ const selectHandlerInvoked = getOnRowSelectHandler ? getOnRowSelectHandler(row) : undefined; - if (selectHandlerInvoked) selectHandlerInvoked(row); - setSelectedRows({ - ...selectedRows, - [`${row.id}-${rowProps.key}`]: - !selectedRows[`${row.id}-${rowProps.key}`], - }); + + if (selectHandlerInvoked) selectHandlerInvoked(row, target); + if (!selectable || !useCheckbox) { + setSelectedRows({ + ...selectedRows, + [row.id]: !selectedRows[row.id], + }); + } }; if (!selectable && getOnRowClickHandler) { @@ -90,54 +97,28 @@ const renderRows = ({ hasChildren={expandedRow.canExpand} hasParent={!!expandedRow.depth} isLastNestedRow={isLastNestedRow} - isSelected={selectedRows[`${row.id}-${rowProps.key}`]} - isHovered={hoveredRow === `${row.id}-${rowProps.key}`} + isSelected={selectedRows[row.id] === true} + isHovered={hoveredRow === row.id} backgroundColor={backgroundColor} fontColor={fontColor} onHoverToggle={ getOnRowClickHandler || getOnRowSelectHandler ? (hover?: boolean) => - setHoveredRow(hover ? `${row.id}-${rowProps.key}` : '') + setHoveredRow(hover ? row.id : '') : undefined } - onClick={() => resolveRowClick()} + onClick={(target: HTMLElement) => resolveRowClick(target)} > - {useCheckbox && ( -
    - )} - {row.cells.map((cell: Cell<{}>, index) => (
    -
    - e.stopPropagation()} - /> -
    -