@epam/uui 5.3.0-rc.1 → 5.3.0

package/components/filters/__tests__/filtersPanel.test.tsx

@@ -0,0 +1,371 @@
+import { FiltersPanel, FiltersPanelProps } from '../FiltersPanel';
+import { ArrayDataSource, TableFiltersConfig } from '@epam/uui-core';
+import { defaultPredicates } from '../defaultPredicates';
+import {
+    setupComponentForTest, screen, within, userEvent,
+} from '@epam/uui-test-utils';
+import React from 'react';
+import dayjs from 'dayjs';
+
+const now = dayjs();
+const TODAY_DAY_OF_MONTH = now.date().toString();
+const TODAY_DATE_ISO = now.format('YYYY-MM-DD');
+const TODAY_DATE_FORMATTED = now.format('MMM DD, YYYY');
+
+type TestItemType = {
+    name: string;
+    status: number;
+    position: number;
+    age: number;
+    hireDate: number;
+    exitDate: number;
+};
+
+jest.mock('react-popper', () => ({
+    ...jest.requireActual('react-popper'),
+    Popper: function PopperMock({ children }: any) {
+        return children({
+            ref: jest.fn,
+            update: jest.fn(),
+            style: {},
+            arrowProps: { ref: jest.fn },
+            placement: 'bottom-start',
+            isReferenceHidden: false,
+        });
+    },
+}));
+
+jest.mock('react-focus-lock', () => ({
+    ...jest.requireActual('react-focus-lock'),
+    __esModule: true,
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    default: ({ children }) => (<>{ children }</>),
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    FreeFocusInside: ({ children }) => (<>{ children }</>),
+}));
+
+const filtersConfigWithoutPredicatesAll: TableFiltersConfig<TestItemType>[] = [
+    {
+        field: 'status',
+        columnKey: 'status',
+        title: 'Status',
+        type: 'singlePicker',
+        dataSource: new ArrayDataSource({
+            items: [
+                { id: 1, name: 'Green' }, { id: 2, name: 'Red' }, { id: 3, name: 'White' },
+            ],
+        }),
+    }, {
+        field: 'position',
+        columnKey: 'position',
+        title: 'Position',
+        type: 'multiPicker',
+        dataSource: new ArrayDataSource({
+            items: [
+                { id: 1, name: 'Designer' }, { id: 2, name: 'QA' }, { id: 3, name: 'Dev' },
+            ],
+        }),
+    }, {
+        field: 'age',
+        columnKey: 'age',
+        title: 'Age',
+        type: 'numeric',
+    }, {
+        field: 'hireDate',
+        columnKey: 'hireDate',
+        title: 'Hire Date',
+        type: 'rangeDatePicker',
+    }, {
+        field: 'exitDate',
+        columnKey: 'exitDate',
+        title: 'Exit Date',
+        type: 'datePicker',
+    },
+];
+
+const filtersConfigWithPredicatesAll: TableFiltersConfig<TestItemType>[] = [
+    {
+        field: 'position',
+        columnKey: 'position',
+        title: 'Position',
+        type: 'multiPicker',
+        predicates: defaultPredicates.multiPicker,
+        dataSource: new ArrayDataSource({
+            items: [
+                { id: 1, name: 'Designer' }, { id: 2, name: 'QA' }, { id: 3, name: 'Dev' },
+            ],
+        }),
+    }, {
+        field: 'age',
+        columnKey: 'age',
+        title: 'Age',
+        type: 'numeric',
+        predicates: defaultPredicates.numeric,
+    }, {
+        field: 'hireDate',
+        columnKey: 'hireDate',
+        title: 'Hire Date',
+        type: 'rangeDatePicker',
+        predicates: defaultPredicates.rangeDatePicker,
+    },
+];
+
+async function setupFilterPanelComponent({ filtersConfig }: { filtersConfig: TableFiltersConfig<TestItemType>[] }) {
+    const { result, mocks } = await setupComponentForTest<FiltersPanelProps<TestItemType>>(
+        (contextRef) => {
+            return {
+                filters: filtersConfig,
+                tableState: {},
+                setTableState: jest.fn().mockImplementation((newTableState) => contextRef.current.setProperty('tableState', newTableState)),
+            };
+        },
+        (props) => <FiltersPanel { ...props } />,
+    );
+    const dom = {
+        add: screen.getByText('Add filter'),
+    };
+    return { result, dom, mocks };
+}
+
+function withinDialog() {
+    return within(screen.queryByRole('dialog'));
+}
+function expectDialog() {
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+}
+function notExpectDialog() {
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+}
+
+describe('FiltersPanel', () => {
+    describe('filter type: singlePicker', () => {
+        it('should add / view / clear / remove (without predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithoutPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const statusOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Status' });
+            expect(statusOption).toBeInTheDocument();
+            await user.click(statusOption);
+            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'Red' }));
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { status: 2 } }));
+            await user.click(screen.getByRoleAndText({ role: 'button', text: 'Status:Red' }));
+            expectDialog();
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Red' })).toHaveAttribute('aria-selected', 'true');
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR' }));
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Red' })).toHaveAttribute('aria-selected', 'false');
+            const removeButton = withinDialog().getByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+    });
+
+    describe('filter type: datePicker', () => {
+        it('should add / view / clear / remove (without predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithoutPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const exitDateOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Exit Date' });
+            expect(exitDateOption).toBeInTheDocument();
+            await user.click(exitDateOption);
+            await user.click(withinDialog().getByText(TODAY_DAY_OF_MONTH));
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { exitDate: TODAY_DATE_ISO } }));
+            await user.click(screen.getByRoleAndText({ role: 'button', text: `Exit Date:${TODAY_DATE_FORMATTED}` }));
+            expectDialog();
+            expect(withinDialog().getByText(TODAY_DAY_OF_MONTH).parentElement).toHaveClass('uui-calendar-selected-day');
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR' }));
+            expect(withinDialog().getByText(TODAY_DAY_OF_MONTH).parentElement).not.toHaveClass('uui-calendar-selected-day');
+            const removeButton = withinDialog().getByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+    });
+    describe('filter type: multiPicker', () => {
+        it('should add / view / clear / remove (without predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithoutPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const positionOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Position' });
+            expect(positionOption).toBeInTheDocument();
+            await user.click(positionOption);
+            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' }));
+            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' }));
+            await user.click(window.document.body);
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { position: [2, 3] } }));
+            await user.click(screen.getByRole('button', { name: 'Position: QA , Dev' }));
+            expectDialog();
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' })).toBeChecked();
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' })).toBeChecked();
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR ALL' }));
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' })).not.toBeChecked();
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' })).not.toBeChecked();
+            const removeButton = withinDialog().queryByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+        it('should add / view / clear / remove (with multiPicker predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const positionOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Position' });
+            expect(positionOption).toBeInTheDocument();
+            await user.click(positionOption);
+            expect(
+                withinDialog()
+                    .queryAllByRole('tab')
+                    .map((t) => t.textContent),
+            ).toEqual(['is', 'is not']);
+            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' }));
+            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' }));
+            await user.click(withinDialog().getByRoleAndText({ role: 'tab', text: 'is not' }));
+            await user.click(window.document.body);
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { position: { nin: [2, 3] } } }));
+            await user.click(screen.getByRole('button', { name: 'Position is not QA , Dev' }));
+            expectDialog();
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' })).toBeChecked();
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' })).toBeChecked();
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR ALL' }));
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' })).not.toBeChecked();
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' })).not.toBeChecked();
+            const removeButton = withinDialog().queryByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+    });
+    describe('filter type: numeric', () => {
+        it('should add / view / clear / remove (without predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithoutPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const ageOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Age' });
+            expect(ageOption).toBeInTheDocument();
+            await user.click(ageOption);
+            await user.type(withinDialog().getByRole('spinbutton'), '20');
+            await user.click(window.document.body);
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { age: 20 } }));
+            await user.click(screen.getByRoleAndText({ role: 'button', text: 'Age:20' }));
+            expectDialog();
+            const input = withinDialog().getByRole('spinbutton') as HTMLInputElement;
+            expect(input.placeholder).toEqual('20');
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR' }));
+            expect(input.placeholder).toEqual('Enter a number');
+            const removeButton = withinDialog().queryByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+        it('should add / view / clear / remove (with numeric predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const ageOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Age' });
+            expect(ageOption).toBeInTheDocument();
+            await user.click(ageOption);
+            expect(
+                withinDialog()
+                    .queryAllByRole('tab')
+                    .map((t) => t.textContent),
+            ).toEqual([
+                '=', '≠', '≤', '≥', 'In Range',
+            ]);
+            await user.type(withinDialog().getByRole('spinbutton'), '20');
+            await user.click(withinDialog().getByRoleAndText({ role: 'tab', text: '≠' }));
+            await user.click(window.document.body);
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { age: { neq: 20 } } }));
+            await user.click(screen.getByRoleAndText({ role: 'button', text: 'Age ≠20' }));
+            expectDialog();
+            const input = withinDialog().getByRole('spinbutton') as HTMLInputElement;
+            expect(input.placeholder).toEqual('20');
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR' }));
+            expect(input.placeholder).toEqual('Enter a number');
+            const removeButton = withinDialog().queryByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+    });
+    describe('filter type: rangeDatePicker', () => {
+        it('should add / view / clear / remove (without predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithoutPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const hireDateOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Hire Date' });
+            expect(hireDateOption).toBeInTheDocument();
+            await user.click(hireDateOption);
+            await user.click(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0]);
+            await user.click(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0]);
+            await user.click(window.document.body);
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { hireDate: { from: TODAY_DATE_ISO, to: TODAY_DATE_ISO } } }));
+            await user.click(screen.getByRoleAndText({ role: 'button', text: `Hire Date:${TODAY_DATE_FORMATTED} - ${TODAY_DATE_FORMATTED}` }));
+            expectDialog();
+            expect(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0].parentElement).toHaveClass('uui-calendar-selected-day');
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR ALL' }));
+            expect(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0].parentElement).not.toHaveClass('uui-calendar-selected-day');
+            const removeButton = withinDialog().getByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+        it('should add / view / clear / remove (with rangeDatePicker predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const hireDateOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Hire Date' });
+            expect(hireDateOption).toBeInTheDocument();
+            await user.click(hireDateOption);
+            expect(
+                withinDialog()
+                    .queryAllByRole('tab')
+                    .map((t) => t.textContent),
+            ).toEqual(['In Range', 'Not in Range']);
+            await user.click(withinDialog().getByRoleAndText({ role: 'tab', text: 'Not in Range' }));
+            await user.click(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0]);
+            await user.click(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0]);
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { hireDate: { notInRange: { from: TODAY_DATE_ISO, to: TODAY_DATE_ISO } } } }));
+            await user.click(screen.getByRoleAndText({ role: 'button', text: `Hire Date Not in Range${TODAY_DATE_FORMATTED} - ${TODAY_DATE_FORMATTED}` }));
+            expectDialog();
+            expect(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0].parentElement).toHaveClass('uui-calendar-selected-day');
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR ALL' }));
+            expect(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0].parentElement).not.toHaveClass('uui-calendar-selected-day');
+            const removeButton = withinDialog().getByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+    });
+});

package/components/filters/constants.ts

@@ -0,0 +1,4 @@
+export const UUI_FILTERS_PANEL_ADD_BUTTON = 'uui-filters-panel-add-button';
+export const UUI_FILTERS_PANEL_ADD_BUTTON_BODY = 'uui-filters-panel-add-button-body';
+export const UUI_FILTERS_PANEL_ITEM_BODY = 'uui-filters-panel-item-body';
+export const UUI_FILTERS_PANEL_ITEM_TOGGLER = 'uui-filters-panel-item-toggler';

package/components/filters/defaultPredicates.ts

@@ -0,0 +1,11 @@
+import { IFilterPredicate } from '@epam/uui-core';
+
+type defaultPredicateName = 'numeric' | 'multiPicker' | 'rangeDatePicker';
+
+export const defaultPredicates: Record<defaultPredicateName, IFilterPredicate[]> = {
+    numeric: [
+        { predicate: 'eq', name: '=', isDefault: true }, { predicate: 'neq', name: '≠' }, { predicate: 'lte', name: '≤' }, { predicate: 'gte', name: '≥' }, { predicate: 'inRange', name: 'In Range' },
+    ],
+    multiPicker: [{ predicate: 'in', name: 'is', isDefault: true }, { predicate: 'nin', name: 'is not' }],
+    rangeDatePicker: [{ predicate: 'inRange', name: 'In Range', isDefault: true }, { predicate: 'notInRange', name: 'Not in Range' }],
+};

package/components/filters/index.ts

@@ -0,0 +1,4 @@
+export * from './FiltersPanel';
+export * from './FilterItemBody';
+export * from './PresetPanel';
+export * from './defaultPredicates';

package/components/forms/Form.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import {
+    Form as UuiForm, FormProps, useUuiContext, INotification,
+} from '@epam/uui-core';
+import { Text, RichTextView } from '../typography';
+import { ConfirmationModal, WarningNotification } from '../overlays';
+import { i18n } from '../../i18n';
+
+export function Form<T>(props: FormProps<T>) {
+    const context = useUuiContext();
+
+    const beforeLeave = (): Promise<boolean> => {
+        return context.uuiModals.show<boolean>((modalProps) => <ConfirmationModal caption={ i18n.form.modals.beforeLeaveMessage } { ...modalProps } />);
+    };
+
+    const loadUnsavedChanges = (): Promise<void> => {
+        return context.uuiNotifications
+            .show(
+                (props: INotification) => (
+                    <WarningNotification
+                        { ...props }
+                        actions={ [
+                            {
+                                name: i18n.form.notifications.actionButtonCaption,
+                                action: props.onSuccess,
+                            },
+                        ] }
+                    >
+                        <RichTextView>
+                            <Text size="36">{i18n.form.notifications.unsavedChangesMessage}</Text>
+                        </RichTextView>
+                    </WarningNotification>
+                ),
+                { duration: 5, position: 'bot-left' },
+            );
+    };
+
+    return <UuiForm<T> loadUnsavedChanges={ loadUnsavedChanges } beforeLeave={ beforeLeave } { ...props } />;
+}

package/components/forms/index.tsx

@@ -0,0 +1,2 @@
+export * from './Form';
+export * from './useForm';

package/components/forms/useForm.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+    useUuiContext, UseFormProps, useForm as uuiUseForm, INotification,
+} from '@epam/uui-core';
+import { WarningNotification } from '../overlays';
+import { Text, RichTextView } from '../typography';
+import { ConfirmationModal } from '../overlays/ConfirmationModal';
+import { i18n } from '../../i18n';
+
+export function useForm<T>(props: UseFormProps<T>) {
+    const context = useUuiContext();
+
+    const beforeLeave = (): Promise<boolean> => {
+        return context.uuiModals.show<boolean>((modalProps) => <ConfirmationModal caption={ i18n.form.modals.beforeLeaveMessage } { ...modalProps } />);
+    };
+
+    const loadUnsavedChanges = (): Promise<void> => {
+        return context.uuiNotifications.show(
+            (props: INotification) => (
+                <WarningNotification
+                    { ...props }
+                    actions={ [
+                        {
+                            name: i18n.form.notifications.actionButtonCaption,
+                            action: props.onSuccess,
+                        },
+                    ] }
+                >
+                    <RichTextView>
+                        <Text size="36">{i18n.form.notifications.unsavedChangesMessage}</Text>
+                    </RichTextView>
+                </WarningNotification>
+            ),
+            { duration: 5, position: 'bot-left' },
+        );
+    };
+
+    return uuiUseForm({ beforeLeave, loadUnsavedChanges, ...props });
+}

package/components/index.ts

@@ -0,0 +1,15 @@
+export * from './buttons';
+export * from './datePickers';
+export * from './dnd';
+export * from './inputs';
+export * from './layout';
+export * from './overlays';
+export * from './pickers';
+export * from './typography';
+export * from './widgets';
+export * from './tables';
+export * from './types';
+export * from './filters';
+export * from './navigation';
+export * from './forms';
+export * from './fileUpload';

package/components/inputs/Checkbox.module.scss

@@ -0,0 +1,162 @@
+@use  '../../assets/styles/index.scss' as *;
+
+@mixin icon-sizes($size, $font-size, $line-height) {
+    :global(.uui-checkbox) {
+        box-sizing: border-box;
+        width: $size;
+        height: $size;
+
+        :global(.uui-icon) {
+            svg {
+                width: $size;
+            }
+        }
+    }
+
+    :global(.uui-input-label) {
+        font-size: $font-size;
+        line-height: $line-height;
+    }
+}
+
+.root {
+    --uui-checkbox-border: var(--uui-control-border);
+    --uui-checkbox-border-hover: var(--uui-color-60);
+    --uui-checkbox-border-disabled: var(--uui-control-border-disabled);
+    --uui-checkbox-border-checked: var(--uui-color-50);
+    --uui-checkbox-border-checked-disabled: var(--uui-color-20);
+    --uui-checkbox-bg: var(--uui-control-bg);
+    --uui-checkbox-bg-checked: var(--uui-color-50);
+    --uui-checkbox-bg-disabled: var(--uui-control-bg-disabled);
+    --uui-checkbox-bg-checked-hover: var(--uui-color-60);
+    --uui-checkbox-bg-checked-disabled: var(--uui-color-20);
+    --uui-checkbox-error: var(--uui-error-60);
+    --uui-checkbox-fill: var(--uui-color-contrast);
+    --uui-checkbox-label: var(--uui-text-primary);
+    --uui-checkbox-label-disabled: var(--uui-text-disabled);
+    --uui-checkbox-label-readonly: var(--uui-text-primary);
+
+    --uui-checkbox-border-radius: var(--uui-border-radius);
+
+    --uui-checkbox-font: var(--uui-font);
+    --uui-checkbox-font-weight: 400;
+    //Colors
+    &:hover, &:active, &:focus-within {
+        :global(.uui-checkbox) {
+            border-color: var(--uui-checkbox-border-hover);
+        }
+
+        :global(.uui-checked) {
+            background-color: var(--uui-checkbox-bg-checked-hover);
+        }
+    }
+
+    :global(.uui-checkbox) {
+        background-color: var(--uui-checkbox-bg);
+        border: 1px solid var(--uui-checkbox-border);
+        border-radius: var(--uui-checkbox-border-radius);
+        position: relative;
+
+        :global(input[type='checkbox']):focus-visible {
+            @include focus-visible-effect();
+            position: absolute;
+            width: inherit;
+            height: inherit;
+        }
+    }
+
+    :global(.uui-input-label) {
+        font-family: var(--uui-checkbox-font);
+        font-weight: var(--uui-checkbox-font-weigth);
+        color: var(--uui-checkbox-label);
+        margin-left: 12px;
+        flex-grow: 1;
+    }
+
+    :global(.uui-checked) {
+        background-color: var(--uui-checkbox-bg-checked);
+        border-color: var(--uui-checkbox-border-checked);
+        fill: var(--uui-checkbox-fill);
+    }
+
+    &:global(.uui-disabled),
+    &:global(.uui-readonly) {
+        cursor: default;
+
+        :global(.uui-checkbox) {
+            cursor: default;
+            background-color: var(--uui-checkbox-bg-disabled);
+            border-color: var(--uui-checkbox-border-disabled);
+        }
+
+        &:hover, &:global(.uui-checked), &:focus-within {
+            &:global(.uui-checkbox) {
+                border-color: var(--uui-checkbox-border-checked-disabled);
+            }
+
+            &:global(.uui-icon) {
+                background-color: var(--uui-checkbox-bg-checked-disabled);
+                border-color: var(--uui-checkbox-border-checked-disabled);
+            }
+        }
+
+        :global(.uui-input-label) {
+            color: var(--uui-checkbox-label-disabled);
+        }
+
+        :global(.uui-checked) {
+            background-color: var(--uui-checkbox-bg-checked-disabled);
+            border-color: var(--uui-checkbox-border-checked-disabled);
+        }
+    }
+
+    &:global(.uui-readonly) {
+        :global(.uui-input-label) {
+            color: var(--uui-checkbox-label-readonly);
+        }
+    }
+
+    &:global(.uui-invalid) {
+        :global(.uui-checkbox) {
+            border-color: var(--uui-checkbox-error);
+            fill: var(--uui-checkbox-error);
+
+            &:hover, &:active, &:focus-within {
+                border-color: var(--uui-checkbox-error);
+                fill: var(--uui-checkbox-error);
+            }
+
+            &:global(.uui-checked) {
+                fill: var(--uui-checkbox-fill);
+                background-color: var(--uui-checkbox-error);
+                border-color: var(--uui-checkbox-error);
+
+                &:hover, &:active, &:focus-within {
+                    background-color: var(--uui-checkbox-error);
+                    border-color: var(--uui-checkbox-error);
+                }
+            }
+        }
+
+        :global(.uui-input-label) {
+            color: var(--uui-checkbox-error);
+        }
+    }
+
+    //Sizes
+    &.size-18 {
+        @include icon-sizes(18px, 14px, 18px);
+    }
+
+    &.size-12 {
+        @include icon-sizes(12px, 12px, 12px);
+
+        :global(.uui-input-label) {
+            margin-left: 6px;
+        }
+    }
+
+    &.mode-cell {
+        justify-content: center;
+    }
+}