analysis-ui-components - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

lib-esm/index.d.ts

@@ -7,2 +7,5 @@ import { Accordion } from './layout/Accordion';
 import { Toolbar } from './layout/Toolbar';
-export { Accordion, Header, Modal, RootLayout, SplitPane, Toolbar };
+import { useAccordionContext, useToggleAccordion } from './layout/context/AccordionContext';
+import { useSplitPaneSize } from './layout/hooks/useSplitPaneSize';
+import { useToggle } from './layout/hooks/useToggle';
+export { Accordion, Header, Modal, RootLayout, SplitPane, Toolbar, useSplitPaneSize, useAccordionContext, useToggle, useToggleAccordion, };

lib-esm/index.js

@@ -7,3 +7,6 @@ import { Accordion } from './layout/Accordion';
 import { Toolbar } from './layout/Toolbar';
-export { Accordion, Header, Modal, RootLayout, SplitPane, Toolbar };
+import { useAccordionContext, useToggleAccordion, } from './layout/context/AccordionContext';
+import { useSplitPaneSize } from './layout/hooks/useSplitPaneSize';
+import { useToggle } from './layout/hooks/useToggle';
+export { Accordion, Header, Modal, RootLayout, SplitPane, Toolbar, useSplitPaneSize, useAccordionContext, useToggle, useToggleAccordion, };
 //# sourceMappingURL=index.js.map

lib-esm/layout/__tests__/accordion.test.js

@@ -5,6 +5,8 @@ import { render, screen } from '@testing-library/react';
 import { Accordion } from '../..';
+import { RootLayout } from '../RootLayout';
 beforeEach(() => {
-    render(React.createElement(Accordion, null,
-        React.createElement(Accordion.Item, { title: "first" }, "first element"),
-        React.createElement(Accordion.Item, { title: "second", defaultOpened: true }, "second element")));
+    render(React.createElement(RootLayout, null,
+        React.createElement(Accordion, null,
+            React.createElement(Accordion.Item, { title: "first" }, "first element"),
+            React.createElement(Accordion.Item, { title: "second", defaultOpened: true }, "second element"))));
 });
@@ -11,0 +13,0 @@ describe('<Accordion />', () => {

lib-esm/layout/Accordion.js

 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { AccordionProvider, useAccordionContext, } from './context/AccordionContext';
+import { useAccordionContext } from './context/AccordionContext';
 import { useDoubleClick } from './hooks/useDoubleClick';
@@ -40,3 +40,3 @@ const styles = {
 export function Accordion(props) {
-    return (_jsx(AccordionProvider, { children: _jsx("div", Object.assign({ css: styles.container }, { children: props.children }), void 0) }, void 0));
+    return _jsx("div", Object.assign({ css: styles.container }, { children: props.children }), void 0);
 }
@@ -43,0 +43,0 @@ Accordion.Item = function AccordionItem(props) {

lib-esm/layout/context/AccordionContext.d.ts

@@ -9,2 +9,6 @@ import { ReactNode } from 'react';
 }
+export declare function useToggleAccordion(): {
+    open: (title: string) => void;
+    close: (title: string) => void;
+};
 export declare function useAccordionContext(title: string, defaultOpened?: boolean): {
@@ -11,0 +15,0 @@ item: AccordionItemState | undefined;

lib-esm/layout/context/AccordionContext.js

@@ -34,2 +34,7 @@ import { produce } from 'immer';
         }
+        case 'CHANGE_ITEM': {
+            const item = getItemOrThrow(actions.payload.title, draft.items);
+            item.isOpen = actions.payload.isOpen;
+            return draft;
+        }
         default: {
@@ -40,2 +45,15 @@ return draft;
 });
+export function useToggleAccordion() {
+    const context = useContext(accordionContext);
+    if (!context) {
+        throw new Error('AccordionContext was not found');
+    }
+    const [, utils] = context;
+    return useMemo(() => {
+        return {
+            open: (title) => utils.change(title, true),
+            close: (title) => utils.change(title, false),
+        };
+    }, [utils]);
+}
 export function useAccordionContext(title, defaultOpened) {
@@ -67,2 +85,8 @@ const context = useContext(accordionContext);
     const utils = useMemo(() => ({
+        change: (title, isOpen) => {
+            return dispatch({
+                type: 'CHANGE_ITEM',
+                payload: { isOpen, title },
+            });
+        },
         clear: (except) => {
@@ -92,2 +116,9 @@ return dispatch({ type: 'CLEAR', payload: except });
 }
+function getItemOrThrow(title, items) {
+    const item = items.find((element) => element.title === title);
+    if (!item) {
+        throw new Error('item not found');
+    }
+    return item;
+}
 //# sourceMappingURL=AccordionContext.js.map

lib-esm/layout/Header.js

@@ -9,4 +9,2 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
         flexDirection: 'row',
-        paddingLeft: '5px',
-        paddingRight: '5px',
         justifyContent: 'space-between',
@@ -13,0 +11,0 @@ boxShadow: 'rgb(255, 255, 255) 0px 1px 0px 0px inset',

lib-esm/layout/hooks/useDoubleClick.d.ts

 export interface UseDoubleClickOptions<EventData> {
-    onClick?: (data: EventData) => void;
-    onDoubleClick?: (data: EventData) => void;
+    onClick: (data: EventData) => void;
+    onDoubleClick: (data: EventData) => void;
     delay?: number;
 }
 export declare function useDoubleClick<EventData>({ onClick, onDoubleClick, delay, }: UseDoubleClickOptions<EventData>): (data: EventData) => void;

lib-esm/layout/RootLayout.js

 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
+import { AccordionProvider } from './context/AccordionContext';
 const style = {
@@ -10,4 +11,4 @@ width: '100%',
 export function RootLayout(props) {
-    return (_jsx("div", Object.assign({ css: css([{ ...style }, { ...props.style }]) }, { children: props.children }), void 0));
+    return (_jsx(AccordionProvider, { children: _jsx("div", Object.assign({ css: css([{ ...style }, { ...props.style }]) }, { children: props.children }), void 0) }, void 0));
 }
 //# sourceMappingURL=RootLayout.js.map

lib-esm/layout/SplitPane.d.ts

 import { ReactNode } from 'react';
-declare type SplitOrientation = 'vertical' | 'horizontal';
-declare type SideSeparation = 'start' | 'end';
-declare type InitialSeperation = `${number}%` | `${number}px`;
+export declare type SplitOrientation = 'vertical' | 'horizontal';
+export declare type SideSeparation = 'start' | 'end';
+export declare type InitialSeperation = `${number}%` | `${number}px`;
 export interface SplitPaneProps {
@@ -13,2 +13,1 @@ orientation?: SplitOrientation;
 export declare function SplitPane(props: SplitPaneProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

lib-esm/layout/SplitPane.js

@@ -5,12 +5,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useRef, useState } from 'react';
+import { useSplitPaneSize } from './hooks/useSplitPaneSize';
+import { useToggle } from './hooks/useToggle';
 const cssStyles = {
-    separator: (orientation) => {
+    separator: (orientation, enabled) => {
         return css([
             orientation === 'horizontal' && {
                 width: '10px',
-                cursor: 'ew-resize',
+                cursor: enabled ? 'ew-resize' : 'pointer',
             },
             orientation === 'vertical' && {
                 height: '10px',
-                cursor: 'ns-resize',
+                cursor: enabled ? 'ns-resize' : 'pointer',
             },
@@ -33,2 +35,3 @@ {
     const { orientation = 'horizontal', sideSeparation = 'start', initialSeparation = '50%', onChange = () => null, children, } = props;
+    const [isDisplayedSidePane, toggle] = useToggle(true);
     const parentRef = useRef(null);
@@ -39,63 +42,30 @@ const [[size, type], setSize] = useState(() => {
     });
-    const [isMouseMoving, setMouseMoving] = useState(false);
-    function onMouseMove(event) {
-        if (isMouseMoving) {
-            const { movementX, movementY } = event;
-            if (type === 'px') {
-                setSize(([currentSize]) => {
-                    return [
-                        getValueFromSplitter(sideSeparation, orientation === 'horizontal' ? movementX : movementY, currentSize),
-                        type,
-                    ];
-                });
-            }
-            else if (type === '%') {
-                if (parentRef.current) {
-                    setSize(([currentSize]) => {
-                        if (parentRef.current) {
-                            const diffX = (movementX / parentRef.current?.clientWidth) * 100;
-                            const diffY = (movementY / parentRef.current?.clientHeight) * 100;
-                            return [
-                                getValueFromSplitter(sideSeparation, orientation === 'horizontal' ? diffX : diffY, currentSize),
-                                type,
-                            ];
-                        }
-                        return [currentSize, type];
-                    });
-                }
-            }
-            onChange(`${size}${type}`);
-        }
-    }
-    return (_jsxs("div", Object.assign({ ref: parentRef, onMouseMove: onMouseMove, onMouseLeave: () => setMouseMoving(false), onMouseUp: () => setMouseMoving(false), css: css([
+    const { onMouseDown, onMouseUp } = useSplitPaneSize({
+        onChange,
+        orientation,
+        parentRef,
+        sideSeparation,
+        state: { setSize, size, type },
+    });
+    return (_jsxs("div", Object.assign({ ref: parentRef, onMouseUp: onMouseUp, css: css([
             { display: 'flex', height: '100%', width: '100%' },
             orientation === 'vertical' && { flexDirection: 'column' },
-        ]) }, { children: [_jsx("div", Object.assign({ css: sideSeparation === 'start'
-                    ? getSize(orientation, `${size}${type}`)
-                    : { flex: '1 1 0%' } }, { children: children[0] }), void 0), _jsx("div", Object.assign({ onMouseDown: () => setMouseMoving(true), onMouseUp: () => setMouseMoving(false), css: cssStyles.separator(orientation) }, { children: _jsx("div", Object.assign({ css: css({ fontSize: 10 }) }, { children: orientation === 'horizontal' ? _jsx("span", { children: "\u22EE" }, void 0) : _jsx("span", { children: "\u22EF" }, void 0) }), void 0) }), void 0), _jsx("div", Object.assign({ css: sideSeparation === 'end'
-                    ? getSize(orientation, `${size}${type}`)
-                    : { flex: '1 1 0%' } }, { children: children[1] }), void 0)] }), void 0));
+        ]) }, { children: [sideSeparation === 'start' && !isDisplayedSidePane ? (_jsx("div", {}, void 0)) : (_jsx("div", Object.assign({ style: sideSeparation === 'start'
+                    ? getSize(orientation, { size, type })
+                    : { flex: '1 1 0%' } }, { children: children[0] }), void 0)), _jsx("div", Object.assign({ onDoubleClick: toggle, onMouseDown: onMouseDown, onMouseUp: onMouseUp, css: cssStyles.separator(orientation, isDisplayedSidePane) }, { children: _jsx("div", Object.assign({ css: css({ fontSize: 10 }) }, { children: orientation === 'horizontal' ? _jsx("span", { children: "\u22EE" }, void 0) : _jsx("span", { children: "\u22EF" }, void 0) }), void 0) }), void 0), sideSeparation === 'end' && !isDisplayedSidePane ? (_jsx("div", {}, void 0)) : (_jsx("div", Object.assign({ style: sideSeparation === 'end'
+                    ? getSize(orientation, { size, type })
+                    : { flex: '1 1 0%' } }, { children: children[1] }), void 0))] }), void 0));
 }
 function getSize(orientation, separation) {
-    return css([
-        orientation === 'horizontal' && {
-            width: separation,
-            display: 'flex',
-        },
-        orientation === 'vertical' && {
-            height: separation,
-            display: 'flex',
-        },
-    ]);
-}
-function getValueFromSplitter(position, value, currentSize) {
-    let val = 0;
-    if (position === 'end') {
-        val = currentSize - value;
+    const style = {
+        display: 'flex',
+    };
+    if (orientation === 'horizontal') {
+        style.width = `${separation.size}${separation.type}`;
     }
     else {
-        val = currentSize + value;
+        style.height = `${separation.size}${separation.type}`;
     }
-    return Math.round((val + Number.EPSILON) * 100) / 100;
+    return style;
 }
 //# sourceMappingURL=SplitPane.js.map

lib-esm/layout/Toolbar.js

@@ -5,3 +5,2 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { ToolbarProvider, useToolbarContext } from './context/ToolbarContext';
-const size = '30px';
 const border = '1px solid rgb(247, 247, 247)';
@@ -15,3 +14,2 @@ const styles = {
                     flexDirection: 'column',
-                    maxWidth: size,
                     minHeight: '100%',
@@ -22,3 +20,2 @@ borderRight: border,
                     flexDirection: 'row',
-                    maxHeight: size,
                     minWidth: '100%',
@@ -31,6 +28,6 @@ borderBottom: border,
         return css([
-            active && { backgroundColor: 'rgb(247, 247, 247)' },
+            active && { backgroundColor: 'rgb(247, 247, 247)', borderRadius: 5 },
             {
-                width: size,
-                height: size,
+                width: '35px',
+                height: '35px',
                 outline: 'none',
@@ -89,3 +86,3 @@ alignItems: 'center',
     const { active = false, children, onClick, title, titleOrientation = 'auto', id, ...other } = props;
-    return (_jsxs("div", Object.assign({ style: { position: 'relative' } }, other, { children: [_jsx("button", Object.assign({ type: "button", css: styles.item(active), onClick: () => {
+    return (_jsxs("div", Object.assign({ style: { position: 'relative', margin: 5 } }, other, { children: [_jsx("button", Object.assign({ type: "button", css: styles.item(active), onClick: () => {
                     if (onClick) {
@@ -92,0 +89,0 @@ onClick(props);

lib/index.js

@@ -7,2 +7,5 @@ import { Accordion } from './layout/Accordion';
 import { Toolbar } from './layout/Toolbar';
-export { Accordion, Header, Modal, RootLayout, SplitPane, Toolbar };
+import { useAccordionContext, useToggleAccordion, } from './layout/context/AccordionContext';
+import { useSplitPaneSize } from './layout/hooks/useSplitPaneSize';
+import { useToggle } from './layout/hooks/useToggle';
+export { Accordion, Header, Modal, RootLayout, SplitPane, Toolbar, useSplitPaneSize, useAccordionContext, useToggle, useToggleAccordion, };

lib/layout/__tests__/accordion.test.js

@@ -5,6 +5,8 @@ import { render, screen } from '@testing-library/react';
 import { Accordion } from '../..';
+import { RootLayout } from '../RootLayout';
 beforeEach(() => {
-    render(React.createElement(Accordion, null,
-        React.createElement(Accordion.Item, { title: "first" }, "first element"),
-        React.createElement(Accordion.Item, { title: "second", defaultOpened: true }, "second element")));
+    render(React.createElement(RootLayout, null,
+        React.createElement(Accordion, null,
+            React.createElement(Accordion.Item, { title: "first" }, "first element"),
+            React.createElement(Accordion.Item, { title: "second", defaultOpened: true }, "second element"))));
 });
@@ -11,0 +13,0 @@ describe('<Accordion />', () => {

lib/layout/Accordion.js

 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { AccordionProvider, useAccordionContext, } from './context/AccordionContext';
+import { useAccordionContext } from './context/AccordionContext';
 import { useDoubleClick } from './hooks/useDoubleClick';
@@ -40,3 +40,3 @@ const styles = {
 export function Accordion(props) {
-    return (_jsx(AccordionProvider, { children: _jsx("div", Object.assign({ css: styles.container }, { children: props.children }), void 0) }, void 0));
+    return _jsx("div", Object.assign({ css: styles.container }, { children: props.children }), void 0);
 }
@@ -43,0 +43,0 @@ Accordion.Item = function AccordionItem(props) {

lib/layout/context/AccordionContext.js

@@ -34,2 +34,7 @@ import { produce } from 'immer';
         }
+        case 'CHANGE_ITEM': {
+            const item = getItemOrThrow(actions.payload.title, draft.items);
+            item.isOpen = actions.payload.isOpen;
+            return draft;
+        }
         default: {
@@ -40,2 +45,15 @@ return draft;
 });
+export function useToggleAccordion() {
+    const context = useContext(accordionContext);
+    if (!context) {
+        throw new Error('AccordionContext was not found');
+    }
+    const [, utils] = context;
+    return useMemo(() => {
+        return {
+            open: (title) => utils.change(title, true),
+            close: (title) => utils.change(title, false),
+        };
+    }, [utils]);
+}
 export function useAccordionContext(title, defaultOpened) {
@@ -67,2 +85,8 @@ const context = useContext(accordionContext);
     const utils = useMemo(() => ({
+        change: (title, isOpen) => {
+            return dispatch({
+                type: 'CHANGE_ITEM',
+                payload: { isOpen, title },
+            });
+        },
         clear: (except) => {
@@ -92,1 +116,8 @@ return dispatch({ type: 'CLEAR', payload: except });
 }
+function getItemOrThrow(title, items) {
+    const item = items.find((element) => element.title === title);
+    if (!item) {
+        throw new Error('item not found');
+    }
+    return item;
+}

lib/layout/Header.js

@@ -9,4 +9,2 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
         flexDirection: 'row',
-        paddingLeft: '5px',
-        paddingRight: '5px',
         justifyContent: 'space-between',
@@ -13,0 +11,0 @@ boxShadow: 'rgb(255, 255, 255) 0px 1px 0px 0px inset',

lib/layout/RootLayout.js

 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
+import { AccordionProvider } from './context/AccordionContext';
 const style = {
@@ -10,3 +11,3 @@ width: '100%',
 export function RootLayout(props) {
-    return (_jsx("div", Object.assign({ css: css([{ ...style }, { ...props.style }]) }, { children: props.children }), void 0));
+    return (_jsx(AccordionProvider, { children: _jsx("div", Object.assign({ css: css([{ ...style }, { ...props.style }]) }, { children: props.children }), void 0) }, void 0));
 }

lib/layout/SplitPane.js

@@ -5,12 +5,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useRef, useState } from 'react';
+import { useSplitPaneSize } from './hooks/useSplitPaneSize';
+import { useToggle } from './hooks/useToggle';
 const cssStyles = {
-    separator: (orientation) => {
+    separator: (orientation, enabled) => {
         return css([
             orientation === 'horizontal' && {
                 width: '10px',
-                cursor: 'ew-resize',
+                cursor: enabled ? 'ew-resize' : 'pointer',
             },
             orientation === 'vertical' && {
                 height: '10px',
-                cursor: 'ns-resize',
+                cursor: enabled ? 'ns-resize' : 'pointer',
             },
@@ -33,2 +35,3 @@ {
     const { orientation = 'horizontal', sideSeparation = 'start', initialSeparation = '50%', onChange = () => null, children, } = props;
+    const [isDisplayedSidePane, toggle] = useToggle(true);
     const parentRef = useRef(null);
@@ -39,62 +42,29 @@ const [[size, type], setSize] = useState(() => {
     });
-    const [isMouseMoving, setMouseMoving] = useState(false);
-    function onMouseMove(event) {
-        if (isMouseMoving) {
-            const { movementX, movementY } = event;
-            if (type === 'px') {
-                setSize(([currentSize]) => {
-                    return [
-                        getValueFromSplitter(sideSeparation, orientation === 'horizontal' ? movementX : movementY, currentSize),
-                        type,
-                    ];
-                });
-            }
-            else if (type === '%') {
-                if (parentRef.current) {
-                    setSize(([currentSize]) => {
-                        if (parentRef.current) {
-                            const diffX = (movementX / parentRef.current?.clientWidth) * 100;
-                            const diffY = (movementY / parentRef.current?.clientHeight) * 100;
-                            return [
-                                getValueFromSplitter(sideSeparation, orientation === 'horizontal' ? diffX : diffY, currentSize),
-                                type,
-                            ];
-                        }
-                        return [currentSize, type];
-                    });
-                }
-            }
-            onChange(`${size}${type}`);
-        }
-    }
-    return (_jsxs("div", Object.assign({ ref: parentRef, onMouseMove: onMouseMove, onMouseLeave: () => setMouseMoving(false), onMouseUp: () => setMouseMoving(false), css: css([
+    const { onMouseDown, onMouseUp } = useSplitPaneSize({
+        onChange,
+        orientation,
+        parentRef,
+        sideSeparation,
+        state: { setSize, size, type },
+    });
+    return (_jsxs("div", Object.assign({ ref: parentRef, onMouseUp: onMouseUp, css: css([
             { display: 'flex', height: '100%', width: '100%' },
             orientation === 'vertical' && { flexDirection: 'column' },
-        ]) }, { children: [_jsx("div", Object.assign({ css: sideSeparation === 'start'
-                    ? getSize(orientation, `${size}${type}`)
-                    : { flex: '1 1 0%' } }, { children: children[0] }), void 0), _jsx("div", Object.assign({ onMouseDown: () => setMouseMoving(true), onMouseUp: () => setMouseMoving(false), css: cssStyles.separator(orientation) }, { children: _jsx("div", Object.assign({ css: css({ fontSize: 10 }) }, { children: orientation === 'horizontal' ? _jsx("span", { children: "\u22EE" }, void 0) : _jsx("span", { children: "\u22EF" }, void 0) }), void 0) }), void 0), _jsx("div", Object.assign({ css: sideSeparation === 'end'
-                    ? getSize(orientation, `${size}${type}`)
-                    : { flex: '1 1 0%' } }, { children: children[1] }), void 0)] }), void 0));
+        ]) }, { children: [sideSeparation === 'start' && !isDisplayedSidePane ? (_jsx("div", {}, void 0)) : (_jsx("div", Object.assign({ style: sideSeparation === 'start'
+                    ? getSize(orientation, { size, type })
+                    : { flex: '1 1 0%' } }, { children: children[0] }), void 0)), _jsx("div", Object.assign({ onDoubleClick: toggle, onMouseDown: onMouseDown, onMouseUp: onMouseUp, css: cssStyles.separator(orientation, isDisplayedSidePane) }, { children: _jsx("div", Object.assign({ css: css({ fontSize: 10 }) }, { children: orientation === 'horizontal' ? _jsx("span", { children: "\u22EE" }, void 0) : _jsx("span", { children: "\u22EF" }, void 0) }), void 0) }), void 0), sideSeparation === 'end' && !isDisplayedSidePane ? (_jsx("div", {}, void 0)) : (_jsx("div", Object.assign({ style: sideSeparation === 'end'
+                    ? getSize(orientation, { size, type })
+                    : { flex: '1 1 0%' } }, { children: children[1] }), void 0))] }), void 0));
 }
 function getSize(orientation, separation) {
-    return css([
-        orientation === 'horizontal' && {
-            width: separation,
-            display: 'flex',
-        },
-        orientation === 'vertical' && {
-            height: separation,
-            display: 'flex',
-        },
-    ]);
-}
-function getValueFromSplitter(position, value, currentSize) {
-    let val = 0;
-    if (position === 'end') {
-        val = currentSize - value;
+    const style = {
+        display: 'flex',
+    };
+    if (orientation === 'horizontal') {
+        style.width = `${separation.size}${separation.type}`;
     }
     else {
-        val = currentSize + value;
+        style.height = `${separation.size}${separation.type}`;
     }
-    return Math.round((val + Number.EPSILON) * 100) / 100;
+    return style;
 }

lib/layout/Toolbar.js

@@ -5,3 +5,2 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { ToolbarProvider, useToolbarContext } from './context/ToolbarContext';
-const size = '30px';
 const border = '1px solid rgb(247, 247, 247)';
@@ -15,3 +14,2 @@ const styles = {
                     flexDirection: 'column',
-                    maxWidth: size,
                     minHeight: '100%',
@@ -22,3 +20,2 @@ borderRight: border,
                     flexDirection: 'row',
-                    maxHeight: size,
                     minWidth: '100%',
@@ -31,6 +28,6 @@ borderBottom: border,
         return css([
-            active && { backgroundColor: 'rgb(247, 247, 247)' },
+            active && { backgroundColor: 'rgb(247, 247, 247)', borderRadius: 5 },
             {
-                width: size,
-                height: size,
+                width: '35px',
+                height: '35px',
                 outline: 'none',
@@ -89,3 +86,3 @@ alignItems: 'center',
     const { active = false, children, onClick, title, titleOrientation = 'auto', id, ...other } = props;
-    return (_jsxs("div", Object.assign({ style: { position: 'relative' } }, other, { children: [_jsx("button", Object.assign({ type: "button", css: styles.item(active), onClick: () => {
+    return (_jsxs("div", Object.assign({ style: { position: 'relative', margin: 5 } }, other, { children: [_jsx("button", Object.assign({ type: "button", css: styles.item(active), onClick: () => {
                     if (onClick) {
@@ -92,0 +89,0 @@ onClick(props);

package.json

 {
   "name": "analysis-ui-components",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "React components to build analysis UI",
@@ -61,2 +61,3 @@ "main": "lib/index.js",
     "react-dom": "^17.0.0",
+    "react-icons": "^4.2.0",
     "rimraf": "^3.0.2",
@@ -63,0 +64,0 @@ "ts-jest": "^27.0.5",

README.md

@@ -20,2 +20,3 @@ # analysis-ui-components
 > npm i analysis-ui-components
+> npm i react-icons
 ```
@@ -34,2 +35,11 @@
 
+import {
+  FaMeteor,
+  FaBook,
+  FaCogs,
+  FaTabletAlt,
+  FaGlasses,
+  FaArrowsAlt,
+} from 'react-icons/fa';
+
 function BasicExample() {
@@ -48,3 +58,3 @@ return (
             <Toolbar.Item titleOrientation="horizontal" id="logo" title="Logo">
-              <i className="fas fa-meteor" />
+              <FaMeteor />
             </Toolbar.Item>
@@ -54,9 +64,9 @@ </Toolbar>
             <Toolbar.Item id="a" title="User manual">
-              <i className="fas fa-book" />
+              <FaBook />
             </Toolbar.Item>
             <Toolbar.Item id="b" title="General settings">
-              <i className="fas fa-cogs" />
+              <FaCogs>
             </Toolbar.Item>
             <Toolbar.Item id="c" title="Full screen">
-              <i className="fas fa-tablet-alt" />
+              <FaTabletAlt />
             </Toolbar.Item>
@@ -75,6 +85,6 @@ </Toolbar>
             <Toolbar.Item id="a" title="Glasses" active>
-              <i className="fas fa-glasses" />
+              <FaGlasses />
             </Toolbar.Item>
             <Toolbar.Item id="b" title="Open in large mode">
-              <i className="fas fa-arrows-alt" />
+              <FaArrowsAlt />
             </Toolbar.Item>
@@ -81,0 +91,0 @@ </Toolbar>

No alert changes

Improved metrics

Total package byte prevSize

98340

increased by17.59%

Number of package files

83

increased by16.9%

Lines of code

1560

increased by16.94%

Number of lines in readme file

127

increased by8.55%

Worsened metrics

Dev dependency count

27

increased by3.85%

No dependency changes