@oliasoft-open-source/react-ui-library 3.12.0-beta-20 → 3.12.0-beta-21

package/dist/components/select/select.test.js

@@ -0,0 +1,303 @@
+import { isMulti, isSimpleOptions, isSimpleSelectedOptions, standardizeOptions, standardizeSelectedOptions, standardizeSelectedOption, getFirstSelectedOptionIndex, nonExistentValue, } from './select.input';
+describe('select (inputs)', () => {
+    test('is multi select', () => {
+        expect(isMulti([])).toBe(true);
+        expect(isMulti([{ label: 'Monkeys', value: 'bananas' }])).toBe(true);
+        expect(isMulti(null)).toBe(false);
+        expect(isMulti('Monkeys')).toBe(false);
+        expect(isMulti({ label: 'Monkeys', value: 'bananas' })).toBe(false);
+    });
+    test('is simple options', () => {
+        expect(isSimpleOptions(['Cat', 'Mouse'])).toBe(true);
+        expect(isSimpleOptions([1, 2])).toBe(true);
+        expect(isSimpleOptions([
+            { label: 'Cat', value: 'Cat' },
+            { label: 'Mouse', value: 'Mouse' },
+        ])).toBe(false);
+        expect(isSimpleOptions([{ label: 'Cat', value: 'Cat' }, 'Mouse', 4])).toBe(true);
+        expect(isSimpleOptions([])).toBe(false);
+        expect(isSimpleOptions(undefined)).toBe(false);
+    });
+    test('is simple selected options', () => {
+        expect(isSimpleSelectedOptions(['Cat', 'Mouse'])).toBe(true);
+        expect(isSimpleSelectedOptions([11, 12])).toBe(true);
+        expect(isSimpleSelectedOptions('Cat')).toBe(true);
+        expect(isSimpleSelectedOptions(6)).toBe(true);
+        expect(isSimpleOptions([
+            { label: 'Cat', value: 'Cat' },
+            { label: 'Mouse', value: 'Mouse' },
+        ])).toBe(false);
+        expect(isSimpleOptions([{ label: 'Cat', value: 'Cat' }, 'Mouse', 7])).toBe(true);
+        expect(isSimpleOptions([])).toBe(false);
+        expect(isSimpleOptions(undefined)).toBe(false);
+    });
+    test('standardize options', () => {
+        expect(standardizeOptions([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+        ], false)).toStrictEqual([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+        ]);
+        expect(standardizeOptions(['Cat', 'Mouse'], true)).toStrictEqual([
+            { label: 'Cat', value: 'Cat' },
+            { label: 'Mouse', value: 'Mouse' },
+        ]);
+        expect(standardizeOptions([5, 6], true)).toStrictEqual([
+            { label: 5, value: 5 },
+            { label: 6, value: 6 },
+        ]);
+        expect(standardizeOptions([{ label: 'Cat', value: 'cat' }, 'Mouse', 9], true)).toStrictEqual([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'Mouse' },
+            { label: 9, value: 9 },
+        ]);
+        expect(standardizeOptions([], true)).toStrictEqual([]);
+        expect(standardizeOptions(undefined, true)).toBeUndefined();
+    });
+    test('standardize selected options (single select)', () => {
+        expect(standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], {
+            label: 'Cat',
+            value: 'cat',
+        })).toStrictEqual({ label: 'Cat', value: 'cat' });
+        expect(standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], 'cat')).toStrictEqual({
+            label: 'Cat',
+            value: 'cat',
+        });
+        expect(standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], {
+            value: 'cat',
+            monkeys: 'bananas',
+        })).toStrictEqual({
+            label: 'Cat',
+            value: 'cat',
+        });
+        expect(standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], 'Foobar')).toStrictEqual({ label: 'Foobar', value: 'Foobar' });
+        expect(standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], {
+            value: '',
+        })).toBeUndefined();
+        expect(standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], null)).toBeUndefined();
+        expect(standardizeSelectedOptions([{ label: 8, value: 8 }], 8)).toStrictEqual({
+            label: 8,
+            value: 8,
+        });
+        expect(standardizeSelectedOptions([{ label: 8, value: 8 }], '8')).toStrictEqual({
+            label: 8,
+            value: 8,
+        });
+        expect(standardizeSelectedOptions([], null)).toBeUndefined();
+        expect(standardizeSelectedOptions([], undefined)).toBeUndefined();
+    });
+    test('standardize selected options (multi-select)', () => {
+        expect(standardizeSelectedOptions(null, [
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+        ])).toStrictEqual([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+        ]);
+        expect(standardizeSelectedOptions([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+        ], ['cat', 'mouse'])).toStrictEqual([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+        ]);
+        expect(standardizeSelectedOptions([
+            { label: 1, value: 1 },
+            { label: 2, value: 2 },
+        ], [1, 2])).toStrictEqual([
+            { label: 1, value: 1 },
+            { label: 2, value: 2 },
+        ]);
+        expect(standardizeSelectedOptions([
+            { label: 1, value: 1 },
+            { label: 2, value: 2 },
+        ], ['1', '2'])).toStrictEqual([
+            { label: 1, value: 1 },
+            { label: 2, value: 2 },
+        ]);
+        expect(standardizeSelectedOptions([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 5, value: 5 },
+        ], ['cat', { label: 'Mouse', value: 'mouse' }, 5])).toStrictEqual([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 5, value: 5 },
+        ]);
+        expect(standardizeSelectedOptions([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 5, value: 5 },
+        ], [
+            { value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            null,
+            undefined,
+            '',
+        ])).toStrictEqual([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+        ]);
+        expect(standardizeSelectedOptions(null, [])).toStrictEqual([]);
+    });
+    test('standardize selected option', () => {
+        expect(standardizeSelectedOption([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+        ], { label: 'Mouse', value: 'mouse' })).toStrictEqual({ label: 'Mouse', value: 'mouse' });
+        expect(standardizeSelectedOption([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+        ], { value: 'mouse' })).toStrictEqual({ label: 'Mouse', value: 'mouse' });
+        expect(standardizeSelectedOption([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+        ], 'mouse')).toStrictEqual({ label: 'Mouse', value: 'mouse' });
+        expect(standardizeSelectedOption([
+            { label: 'Cat', value: 1 },
+            { label: 'Mouse', value: 2 },
+        ], { value: 1 })).toStrictEqual({ label: 'Cat', value: 1 });
+        expect(standardizeSelectedOption([
+            { label: 'Cat', value: 1 },
+            { label: 'Mouse', value: 2 },
+        ], { value: '1' })).toStrictEqual({ label: 'Cat', value: 1 });
+        expect(standardizeSelectedOption([
+            { label: 'Cat', value: 1 },
+            { label: 'Mouse', value: 2 },
+        ], 1)).toStrictEqual({ label: 'Cat', value: 1 });
+        expect(standardizeSelectedOption([
+            { label: 'Cat', value: 1 },
+            { label: 'Mouse', value: 2 },
+        ], '1')).toStrictEqual({ label: 'Cat', value: 1 });
+        expect(standardizeSelectedOption([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+        ], null)).toBeUndefined();
+        expect(standardizeSelectedOption([], 'mouse')).toStrictEqual({
+            label: 'mouse',
+            value: 'mouse',
+        });
+        //non-existent values
+        expect(standardizeSelectedOption(undefined, 'mouse')).toStrictEqual({
+            label: 'mouse',
+            value: 'mouse',
+        });
+        expect(standardizeSelectedOption([
+            { label: 'Cat', value: 1 },
+            { label: 'Mouse', value: 2 },
+        ], { label: 'Vampire', value: 'vampire' })).toStrictEqual({ label: 'Vampire', value: 'vampire' });
+        expect(standardizeSelectedOption(['Cat', 'Mouse'], 'Vampire')).toStrictEqual({ label: 'Vampire', value: 'Vampire' });
+    });
+    test('get first selected option index', () => {
+        expect(getFirstSelectedOptionIndex([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ], { label: 'Mouse', value: 'mouse' })).toBe(1);
+        expect(getFirstSelectedOptionIndex([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ], [
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ])).toBe(1);
+        expect(getFirstSelectedOptionIndex([
+            { label: 'Cat', value: 1 },
+            { label: 'Mouse', value: 2 },
+            { label: 'Dog', value: 3 },
+        ], { label: 'Mouse', value: 2 })).toBe(1);
+        expect(getFirstSelectedOptionIndex([
+            { label: 'Cat', value: 1 },
+            { label: 'Mouse', value: 2 },
+            { label: 'Dog', value: 3 },
+        ], { label: 'Mouse', value: '2' })).toBe(1);
+        expect(
+        //with headings (should be omitted from index)
+        getFirstSelectedOptionIndex([
+            { type: 'Heading', label: 'Enemies' },
+            { label: 'Cat', value: 1 },
+            { type: 'Heading', label: 'Friends' },
+            { label: 'Mouse', value: 2 },
+            { label: 'Dog', value: 3 },
+        ], { label: 'Mouse', value: '2' })).toBe(1);
+        expect(getFirstSelectedOptionIndex(['Cat', 'Mouse', 'Dog'], 'Mouse')).toBe(1);
+        expect(getFirstSelectedOptionIndex([1, 2, 3], 2)).toBe(1);
+        expect(getFirstSelectedOptionIndex([1, 2, 3], '2')).toBe(
+        //allow coercion
+        1);
+        expect(getFirstSelectedOptionIndex(['Cat', 'Mouse', 'Dog'], ['Mouse', 'Dog'])).toBe(1);
+        expect(getFirstSelectedOptionIndex([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ], { label: 'Camel', value: 'camel' })).toBeNull();
+        expect(getFirstSelectedOptionIndex([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ], [{ label: 'Camel', value: 'camel' }])).toBeNull();
+        expect(getFirstSelectedOptionIndex(['Cat', 'Mouse', 'Dog'], 'Camel')).toBeNull();
+        expect(getFirstSelectedOptionIndex(['Cat', 'Mouse', 'Dog'], ['Camel', 'Sheep'])).toBeNull();
+        expect(getFirstSelectedOptionIndex([], 'Camel')).toBeNull();
+        expect(getFirstSelectedOptionIndex([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ], null)).toBeNull();
+        expect(getFirstSelectedOptionIndex([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ], [])).toBeNull();
+        expect(getFirstSelectedOptionIndex([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ], undefined)).toBeNull();
+    });
+    test('non-existent value', () => {
+        expect(nonExistentValue([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ], { label: 'Cat', value: 'cat' })).toBe(false);
+        expect(nonExistentValue([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ], { label: 'Vampire', value: 'vampire' })).toBe(true);
+        expect(nonExistentValue([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ], null)).toBe(false);
+        expect(nonExistentValue([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ], undefined)).toBe(false);
+        expect(nonExistentValue([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ], '')).toBe(false);
+        expect(nonExistentValue([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ], [
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+        ])).toBe(false);
+        expect(nonExistentValue([
+            { label: 'Cat', value: 'cat' },
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Dog', value: 'dog' },
+        ], [
+            { label: 'Mouse', value: 'mouse' },
+            { label: 'Vampire', value: 'vampire' },
+        ])).toBe(true);
+    });
+});

package/dist/components/side-bar/link.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+export interface ISideBarLinkProps {
+    isOpen: boolean;
+    items: {
+        value: string;
+        isActive?: boolean;
+        isExperimental?: boolean;
+        label: string | ReactNode;
+        icon: any;
+        invalid?: boolean;
+        onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    }[];
+    sectionIndex: number;
+    onClick: (evt: React.MouseEvent<HTMLAnchorElement, MouseEvent>, value: string, label: string | ReactNode, onClickCallback?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) => void;
+    testId?: string;
+}
+export declare const Link: ({ isOpen, items, sectionIndex, onClick, testId, }: ISideBarLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/side-bar/link.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import cx from 'classnames';
+import isEqual from 'react-fast-compare';
+import styles from './side-bar.module.less';
+import { Tooltip } from '../tooltip/tooltip';
+import { Icon } from '../icon/icon';
+import { Badge } from '../badge/badge';
+import { Color } from '../../common-enum';
+const TooltipIcon = memo(({ isOpen, label, icon, invalid }) => {
+    const Unbadged = () => (_jsx(Tooltip, { text: label, enabled: !isOpen, placement: "right-center", possiblePlacements: ['right-center'], triggerOffset: 30, fontSize: 16, padding: "10px 16px", display: "block", children: _jsx(Icon, { icon: icon, size: 30, color: Color.WHITE }) }));
+    const Badged = () => (_jsx(Badge, { small: true, margin: "-2px", title: "!", children: _jsx(Unbadged, {}) }));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.icon, children: invalid ? _jsx(Badged, {}) : _jsx(Unbadged, {}) }), _jsx("span", { className: styles.label, children: label })] }));
+}, (prevProps, nextProps) => isEqual(prevProps, nextProps));
+export const Link = ({ isOpen, items, sectionIndex, onClick, testId, }) => {
+    return (_jsx("div", { className: styles.list, children: items.map((link, i) => {
+            const key = `${sectionIndex}_${i}`;
+            return (_jsx("a", { href: link.value, className: cx(styles.item, link.isActive ? styles.active : '', link.isExperimental ? styles.experimental : ''), onClick: (evt) => onClick(evt, link.value, link.label, link.onClick), "data-testid": testId, children: _jsx(TooltipIcon, { label: link.label, icon: link.icon, invalid: link.invalid, isOpen: isOpen }, key) }, key));
+        }) }));
+};

package/dist/components/side-bar/sections.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+interface ISection {
+    heading: string;
+    items: {
+        value: string;
+        isActive?: boolean;
+        isExperimental?: boolean;
+        label: string | ReactNode;
+        icon: any;
+        invalid?: boolean;
+        onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    }[];
+    testId?: string;
+}
+export interface ISideBarSectionsProps {
+    isOpen: boolean;
+    sections: ISection[];
+    onClick: (evt: React.MouseEvent<HTMLAnchorElement, MouseEvent>, value: string, label: string | ReactNode, onClickCallback?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) => void;
+}
+export declare const Sections: ({ isOpen, sections, onClick, }: ISideBarSectionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/side-bar/sections.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Link } from './link';
+import styles from './side-bar.module.less';
+export const Sections = ({ isOpen, sections, onClick, }) => {
+    return (_jsx(_Fragment, { children: sections.map((section, i) => (_jsxs(React.Fragment, { children: [_jsx("h5", { className: styles.subtitle, children: section.heading.toUpperCase() }), _jsx(Link, { isOpen: isOpen, items: section.items, sectionIndex: i, onClick: onClick, testId: section.testId })] }, i))) }));
+};

package/dist/components/side-bar/side-bar.d.ts

@@ -0,0 +1,26 @@
+import React, { MouseEvent, ReactNode } from "react";
+interface IOptionItem {
+    label: ReactNode;
+    value: string;
+    icon: ReactNode;
+    onClick: (event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) => void;
+    isActive?: boolean;
+    isExperimental?: boolean;
+    invalid?: boolean;
+    testId?: string;
+}
+interface IOptionSection {
+    heading: string;
+    items: IOptionItem[];
+}
+export interface ISideBarProps {
+    options: {
+        title: string;
+        sections: IOptionSection[];
+    };
+    startOpen?: boolean;
+    onShiftClickToggleOpen?: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
+    top?: string | number;
+}
+export declare const SideBar: React.MemoExoticComponent<({ options, startOpen, onShiftClickToggleOpen, top }: ISideBarProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/side-bar/side-bar.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from "react";
+import cx from "classnames";
+import isEqual from "react-fast-compare";
+import { Drawer } from "../drawer/drawer";
+import { Sections } from "./sections";
+import styles from "./side-bar.module.less";
+import { Button } from "../button/button";
+import { ButtonPosition, IconType } from "../../common-enum";
+export const SideBar = memo(({ options, startOpen = false, onShiftClickToggleOpen = () => { }, top }) => {
+    const [isOpen, setIsOpen] = useState(startOpen);
+    const onClick = (evt, value, label, clickHandler) => {
+        evt.preventDefault();
+        if (typeof clickHandler === 'function') {
+            evt.currentTarget.value = value;
+            evt.currentTarget.label = label;
+            clickHandler(evt);
+        }
+        setIsOpen(false);
+    };
+    const visible = options.sections.length > 0;
+    return (_jsx(Drawer, { fixed: true, open: isOpen, top: top, background: "var(--color-background-sidebar)", closedWidth: 70, buttonPosition: ButtonPosition.BOTTOM, buttonAnimate: true, button: visible && (_jsx(Button, { onClick: (evt) => {
+                if (evt.shiftKey && onShiftClickToggleOpen) {
+                    onShiftClickToggleOpen(evt);
+                }
+                setIsOpen(!isOpen);
+            }, colored: true, round: true, icon: IconType.LEFT })), children: _jsx("div", { className: cx(styles.sidebar, !isOpen ? styles.collapsed : ''), children: visible && (_jsxs("div", { className: styles.inner, children: [_jsx("h4", { className: styles.title, children: options.title }), _jsx(Sections, { isOpen: isOpen, sections: options.sections, onClick: onClick })] })) }) }));
+}, (prevProps, nextProps) => isEqual(prevProps, nextProps));

package/dist/components/side-bar/side-bar.stories.d.ts

@@ -0,0 +1,5 @@
+import { ISideBarProps } from './side-bar';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ISideBarProps>;
+export declare const StartOpen: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ISideBarProps>;

package/dist/components/side-bar/side-bar.stories.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SideBar } from './side-bar';
+import { Flex } from '../layout/flex/flex';
+import { Badge } from '../badge/badge';
+import svgIcon from '../../images/icons/icons8-junction.svg';
+const sections = [
+    {
+        heading: 'First Heading',
+        items: [
+            {
+                label: 'Section A',
+                value: '/path/to/something',
+                onClick: () => { },
+                icon: svgIcon,
+            },
+            {
+                label: (_jsxs(Flex, { alignItems: "center", gap: "10px", children: ["Section B", _jsx(Badge, { small: true, title: "BETA" })] })),
+                value: '/path/to/something',
+                onClick: () => { },
+                icon: svgIcon,
+                isActive: true,
+            },
+            {
+                label: 'Section C',
+                value: '/path/to/something',
+                onClick: () => { },
+                icon: svgIcon,
+            },
+            {
+                label: 'Experimental Section',
+                value: '/path/to/something',
+                onClick: () => { },
+                icon: svgIcon,
+                isExperimental: true,
+            },
+        ],
+    },
+    {
+        heading: 'Second Heading',
+        items: [
+            {
+                label: 'Section 1',
+                value: '/path/to/something',
+                onClick: () => { },
+                icon: svgIcon,
+            },
+            {
+                label: 'Section 2',
+                value: '/path/to/something',
+                onClick: () => { },
+                icon: svgIcon,
+            },
+            {
+                label: 'Invalid Section',
+                value: '/path/to/something',
+                onClick: () => { },
+                icon: svgIcon,
+                invalid: true,
+            },
+        ],
+    },
+];
+export default {
+    title: 'Navigation/SideBar',
+    component: SideBar,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            story: {
+                inline: false,
+                iframeHeight: 400,
+            },
+        },
+    },
+    args: {
+        options: {
+            title: 'Title',
+            sections,
+        },
+        startOpen: false,
+    },
+    argTypes: {
+        top: { control: { type: 'text' } },
+        startOpen: { control: { type: 'boolean' } },
+    },
+};
+const Template = (args) => _jsx(SideBar, { ...args });
+export const Default = Template.bind({});
+export const StartOpen = Template.bind({});
+StartOpen.args = { startOpen: true };

package/dist/components/slider/slider-tooltip.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface ISliderTooltipProps {
+    text: string | number | ReactNode;
+}
+export declare const SliderTooltip: ({ text }: ISliderTooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/slider/slider-tooltip.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TooltipLayer } from '../tooltip/tooltip-layer';
+export const SliderTooltip = ({ text }) => {
+    return (_jsx(TooltipLayer, { text: text, layerProps: {
+            style: {
+                whiteSpace: 'nowrap',
+                position: 'fixed',
+                transform: 'translate(-50%, -100%)',
+                marginTop: -15,
+                marginLeft: 5,
+            },
+        } }));
+};

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import './rc-slider.less';
+export type TSliderMark = {
+    value: number | string;
+    label?: number | string | ReactNode;
+    tooltip?: number | string | ReactNode;
+};
+export interface ISliderProps {
+    name?: string;
+    label?: string | number | ReactNode;
+    width?: string | number;
+    labelWidth?: string | number;
+    value: number | number[];
+    min: number;
+    max: number;
+    step?: number;
+    marks?: TSliderMark[];
+    showArrows?: boolean;
+    showTooltip?: boolean;
+    tooltipFormatter?: (value: number | number[]) => string | number | ReactNode;
+    disabled?: boolean;
+    range?: boolean;
+    small?: boolean;
+    vertical?: {
+        enabled: boolean;
+        width?: string;
+        height?: string;
+    };
+    onChange: (event: {
+        target: {
+            name?: string;
+            value: number | number[];
+            label?: string | number | ReactNode;
+        };
+    }) => void;
+}
+export declare const Slider: ({ name, label, width, labelWidth, value, min, max, step, marks, showArrows, showTooltip, tooltipFormatter, disabled, range, small, vertical, onChange, }: ISliderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/slider/slider.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _ from 'lodash';
+import { useContext } from 'react';
+import RcSlider from 'rc-slider';
+import memoizeOne from 'memoize-one';
+import isEqual from 'react-fast-compare';
+import cx from 'classnames';
+import Handle from 'rc-slider/lib/Handles/Handle.js';
+import { SliderTooltip } from './slider-tooltip';
+import './rc-slider.less';
+import styles from './slider.module.less';
+import { Tooltip } from '../tooltip/tooltip';
+import { Button } from '../button/button';
+import { DisabledContext } from '../../helpers/disabled-context';
+import { IconType } from "../../common-enum";
+const formatMarkers = (marks) => {
+    return marks.reduce((acc, { label, tooltip, value }) => {
+        const isTooltip = tooltip !== undefined;
+        const formattedValue = isTooltip ? (_jsx(Tooltip, { text: tooltip, children: label })) : (label || value);
+        acc[value] = formattedValue;
+        return acc;
+    }, {});
+};
+const memoizedFormatMarkers = memoizeOne(formatMarkers, isEqual);
+// TODO - revisit - fix handle warning
+export const Slider = ({ name, label, width = '100%', labelWidth = 'auto', value, min, max, step = 1, marks = [], showArrows = false, showTooltip = false, tooltipFormatter = (v) => v, disabled = false, range = false, small = false, vertical = {
+    enabled: false,
+    width: '100px',
+    height: '400px',
+}, onChange, }) => {
+    const disabledContext = useContext(DisabledContext);
+    const formattedMarks = memoizedFormatMarkers(marks);
+    const onChangeValue = (value) => {
+        //rc-slider doesn't pass the Synthetic event
+        //but we can still follow the standard event format
+        onChange({
+            target: {
+                name,
+                value,
+                label,
+            },
+        });
+    };
+    const ButtonMin = () => (_jsx("div", { className: styles.button, children: _jsx(Button, { basic: true, small: true, round: true, onClick: () => onChangeValue(range ? [min, value?.[1]] : min), disabled: disabled || value === min || disabledContext, icon: IconType.FAST_BACKWARD }) }));
+    const ButtonMax = () => (_jsx("div", { className: styles.button, children: _jsx(Button, { basic: true, small: true, round: true, onClick: () => onChangeValue(range ? value?.[0] : max), disabled: disabled || value === max || disabledContext, icon: IconType.FAST_FORWARD }) }));
+    return (_jsxs("div", { className: cx(styles.container, small ? styles.small : '', vertical.enabled ? styles.vertical : '', !_.isEmpty(marks) ? styles.hasMarks : ''), style: vertical.enabled
+            ? { width: vertical.width, height: vertical.height }
+            : { width }, children: [showArrows && (vertical.enabled ? _jsx(ButtonMax, {}) : _jsx(ButtonMin, {})), range ? (_jsx(RcSlider, { range: true, allowCross: false, className: cx((disabled || disabledContext) && styles.rcSliderDisabled, showArrows && styles.hasArrows), value: value, max: max, min: min, step: step, marks: formattedMarks, onChange: (v) => onChangeValue(v), disabled: disabled || disabledContext, vertical: vertical.enabled, 
+                // @ts-ignore: write explicit reason: write explicit reason
+                handle: showTooltip
+                    ? ({ index, value, dragging, ...handleProps }) => (_jsx(Handle, { value: value, ...handleProps, children: dragging && (_jsx(SliderTooltip, { text: tooltipFormatter(value) })) }, index))
+                    : undefined })) : (_jsx(RcSlider, { className: cx((disabled || disabledContext) && styles.rcSliderDisabled, showArrows && styles.hasArrows), value: value, max: max, min: min, step: step, marks: formattedMarks, onChange: (v) => onChangeValue(v), disabled: disabled || disabledContext, vertical: vertical.enabled, 
+                // @ts-ignore: write explicit reason: write explicit reason
+                handle: showTooltip
+                    ? ({ index, value, dragging, ...handleProps }) => (_jsx(Handle, { value: value, ...handleProps, children: dragging && (_jsx(SliderTooltip, { text: tooltipFormatter(value) })) }, index))
+                    : undefined })), showArrows && (vertical.enabled ? _jsx(ButtonMin, {}) : _jsx(ButtonMax, {})), label && (_jsx("label", { className: styles.label, style: { width: labelWidth }, children: label }))] }));
+};