@dnanpm/styleguide 3.0.0 → 3.2.0

package/build/es/components/Tooltip/Tooltip.d.ts

@@ -1,174 +1,71 @@
-import ReactTooltip from 'react-tooltip';
-interface TooltipProps {
-    /** Allows to pass a custom className */
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { ITooltip as ReactTooltipProps } from 'react-tooltip';
+type Position = 'left' | 'right' | 'middle';
+interface Props {
+    /**
+     * Unique ID for the search input element
+     */
+    id: string;
+    /**
+     * Allows to set the placement of Tooltip content
+     *
+     * @param {ReactTooltipProps['place']} top Places Tooltip above the trigger element
+     * @param {ReactTooltipProps['place']} right Places Tooltip right of the trigger element
+     * @param {ReactTooltipProps['place']} bottom Places Tooltip under the trigger element
+     * @param {ReactTooltipProps['place']} left Places Tooltip left of the trigger element
+     *
+     * @default 'top'
+     */
+    placement?: ReactTooltipProps['place'];
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to set position of Tooltip icon relative to other content and adds appropriate margins
+     *
+     * @param {Position} left Tooltip component icon is on the left side of content, add right margin
+     * @param {Position} right Tooltip component icon is on the right side of content, add left margin
+     * @param {Position} middle Tooltip component icon is in the middle of content, add left and right margins
+     *
+     * @default false
+     */
+    position?: Position;
+    /**
+     * Allows to hide trigger element. Use `data-tooltip-id` on custom trigger element to attach it to the Tooltip
+     *
+     * @default false
+     */
+    hideTriggerElement?: boolean;
+    /**
+     * Allows to close Tooltip by pressing ESC key
+     *
+     * @default true
+     */
+    closeWithEsc?: boolean;
+    /**
+     * Allows to open Tooltip by clicking the trigger element instead of hovering it
+     */
+    isClickable?: boolean;
+    /**
+     * Allows to keep Tooltip open when hovered. Useful when it contains interactive elements
+     */
+    isHoverable?: boolean;
+    /**
+     * Allows to break plain text to multiple lines.
+     * Multiline content is supported by default by passing appropriate content to `children` property
+     */
+    isMultiline?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
     className?: string;
-    children?: string;
-    width?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
 }
-declare const Tooltip: import("styled-components").StyledComponent<typeof ReactTooltip, {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    color: {
-        default: {
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        accent: {
-            lemon: string;
-            sky: string;
-            orange: string;
-        };
-        hover: {
-            pink: string;
-        };
-        text: {
-            gray: string;
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        line: {
-            L01: string;
-            L02: string;
-            L03: string;
-            L04: string;
-        };
-        notification: {
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        background: {
-            sand: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            pink: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            plum: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            lemon: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            sky: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            orange: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            white: {
-                default: string;
-            };
-        };
-        focus: {
-            dark: string;
-            light: string;
-        };
-        transparency: {
-            T0: string;
-            T10: string;
-            T20: string;
-            T30: string;
-            T40: string;
-            T50: string;
-            T60: string;
-            T70: string;
-            T80: string;
-            T90: string;
-            T100: string;
-        };
-    };
-    fontFamily: {
-        default: string;
-        heading: string; /** Allows to pass a custom className */
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
-    radius: {
-        default: string;
-        s: string;
-        xs: string;
-        circle: string;
-        pill: string;
-    };
-}, {
-    suppressClassNameWarning: boolean;
-} & TooltipProps, "suppressClassNameWarning">;
+declare const Tooltip: ({ "data-testid": dataTestId, closeWithEsc, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Tooltip;

package/build/es/components/Tooltip/Tooltip.js

@@ -1,53 +1,67 @@
-import ReactTooltip from 'react-tooltip';
+import { __rest } from 'tslib';
+import React__default from 'react';
+import { Tooltip as Tooltip$1 } from 'react-tooltip';
 import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
+import getElevationShadow from '../../utils/common.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
+import Icon from '../Icon/Icon.js';
+import hlInfo from '../Icons/hlInfo.js';
 
-const arrowSmall = '4px';
-const arrowLarge = '6px';
-const Tooltip = styled(ReactTooltip).attrs({ suppressClassNameWarning: true }) `
-    && {
-        width: ${p => (p.width ? p.width : 'auto')};
-        background-color: ${p => p.theme.color.background.white.default};
-        border: 1px solid ${p => p.theme.color.line.L01};
-        padding: ${p => p.multiline
-    ? getMultipliedSize(p.theme.base.baseHeight, 1.5)
-    : getMultipliedSize(p.theme.base.baseHeight, 0.5)}
-            ${p => getMultipliedSize(p.theme.base.baseWidth, 1.5)};
-        color: ${p => p.theme.color.text.black};
-        border-radius: 0;
-        text-align: left;
-        &&:after {
-            border-width: ${p => (p.multiline ? arrowLarge : arrowSmall)};
-            border-style: solid;
-            border-color: transparent transparent ${p => p.theme.color.background.white.default}
-                ${p => p.theme.color.background.white.default};
-            box-shadow: -1px 1px 1px 0 rgba(125, 125, 125, 0.5);
-        }
-        &.place-top:after {
-            transform: rotate(-45deg);
-            margin-left: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-            bottom: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-        }
-        &.place-bottom:after {
-            transform: rotate(135deg);
-            margin-left: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-            top: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-        }
-        &.place-left:after {
-            transform: rotate(-136deg);
-            margin-top: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-            right: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-        }
-        &.place-right:after {
-            transform: rotate(45deg);
-            margin-top: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-            left: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-        }
-        &.show {
-            opacity: 1;
-            display: block;
+const Helper = styled.div `
+    display: inline;
+    vertical-align: middle;
+    ${({ isClickable }) => isClickable && `cursor: pointer`};
+`;
+const getArrowOverrides = () => {
+    const arrowConfig = {
+        top: ['bottom', '45deg'],
+        right: ['left', '135deg'],
+        bottom: ['top', '225deg'],
+        left: ['right', '315deg'],
+    };
+    return Object.entries(arrowConfig)
+        .map(([placement, value]) => `
+        &.react-tooltip__place-${placement} {
+            & .react-tooltip-arrow {
+                ${value[0]}: -${getMultipliedSize(theme.base.baseWidth, 0.6)} !important;
+                transform: rotate(${value[1]});
+            }
         }
+    `)
+        .join('');
+};
+const StyledReactTooltip = styled(Tooltip$1) `
+    --rt-opacity: 1;
+
+    border: 1px solid ${theme.color.line.L02};
+    padding: ${getMultipliedSize(theme.base.baseWidth, 1.5)};
+    text-align: center;
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    width: max-content;
+    max-width: ${getMultipliedSize(theme.base.baseWidth, 25)};
+    color: ${theme.color.text.black};
+    background-color: ${theme.color.background.white.default};
+    border-radius: ${theme.radius.s};
+
+    ${getElevationShadow({ elevation: 'low' })}
+
+    & .react-tooltip-arrow {
+        width: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
+        height: ${getMultipliedSize(theme.base.baseHeight, 1.2)};
+        border-bottom: 1px solid ${theme.color.line.L02};
+        border-right: 1px solid ${theme.color.line.L02};
     }
-`;
+
+    ${getArrowOverrides()}
+`;
+const Tooltip = (_a) => {
+    var { 'data-testid': dataTestId, closeWithEsc = true } = _a, props = __rest(_a, ['data-testid', "closeWithEsc"]);
+    return (React__default.createElement(React__default.Fragment, null,
+        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: props.isClickable, className: props.className, "data-testid": dataTestId },
+            React__default.createElement(Icon, { icon: hlInfo, size: "1rem", position: props.position }))),
+        React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, closeOnEsc: closeWithEsc, openOnClick: props.isClickable, clickable: props.isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
+};
 
 export { Tooltip as default };

package/build/es/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.d.ts

@@ -152,7 +152,7 @@ export declare const Tail: import("styled-components").StyledComponent<"div", {
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -319,7 +319,7 @@ export declare const TailShadow: import("styled-components").StyledComponent<"di
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;

package/build/es/components/TooltipMenu/TooltipMenu.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { Props as IconProps } from '../Icon/Icon';
 export interface TooltipMenuProps {
@@ -6,7 +7,7 @@ export interface TooltipMenuProps {
     /** Allows to pass a custom className */
     className?: string;
     /** Tooltip menu content */
-    children: React.ReactNode;
+    children: ReactNode;
     /** Text selector color.Default: #121212 */
     color?: string;
     /** Text selector active color. Default: #121212 */
@@ -37,5 +38,5 @@ export interface TooltipMenuProps {
     arrowPosition?: string;
 }
 /** @visibleName Tooltip Menu */
-declare const TooltipMenu: ({ selector, className, color, children, iconSize, zIndex, tooltipTop, tooltipRight, activeColor, tooltipIconName, tooltipIcon, tooltipIconSize, tooltipChevron, arrowPosition, }: TooltipMenuProps) => JSX.Element;
+declare const TooltipMenu: ({ selector, className, color, children, iconSize, zIndex, tooltipTop, tooltipRight, activeColor, tooltipIconName, tooltipIcon, tooltipIconSize, tooltipChevron, arrowPosition, }: TooltipMenuProps) => React.JSX.Element;
 export default TooltipMenu;

package/build/es/components/index.d.ts

@@ -3,21 +3,27 @@ export { default as AccordionItem } from './AccordionItem/AccordionItem';
 export { default as AmountSelector } from './AmountSelector/AmountSelector';
 export { default as Box } from './Box/Box';
 export { default as Button } from './Button/Button';
+export { default as ButtonArrow } from './Button/ButtonArrow';
 export { default as ButtonClose } from './Button/ButtonClose';
 export { default as ButtonIcon } from './Button/ButtonIcon';
 export { default as ButtonPrimary } from './Button/ButtonPrimary';
 export { default as ButtonRound } from './Button/ButtonRound';
 export { default as ButtonSecondary } from './Button/ButtonSecondary';
 export { default as Checkbox } from './Checkbox/Checkbox';
+export { default as Chip } from './Chip/Chip';
+export { default as DateTimePicker } from './DateTimePicker/DateTimePicker';
+export { default as Divider } from './Divider/Divider';
 export { default as DnaLogo } from './DnaLogo/DnaLogo';
+export { default as Drawer } from './Drawer/Drawer';
 export { default as EmptyState } from './EmptyState/EmptyState';
+export { default as Floater } from './Floater/Floater';
 export { default as Footer } from './Footer/Footer';
-export { default as Helper } from './Helper/Helper';
 export { default as Icon } from './Icon/Icon';
 export * from './Icons';
 export { default as Input } from './Input/Input';
 export { default as Label } from './Label/Label';
 export { default as LabelText } from './LabelText/LabelText';
+export { default as MainHeaderNavigation } from './MainHeaderNavigation/MainHeaderNavigation';
 export { default as MainNavigation } from './MainNavigation/MainNavigation';
 export { default as Modal } from './Modal/Modal';
 export { default as Notification } from './Notification/Notification';
@@ -32,7 +38,7 @@ export { default as SecondaryNavigation } from './SecondaryNavigation/SecondaryN
 export { default as Selectbox } from './Selectbox/Selectbox';
 export { default as Switch } from './Switch/Switch';
 export { default as Tab, TabStyle } from './Tabs/Tab';
-export { Tablist, default as Tabs } from './Tabs/Tabs';
+export { default as Tabs, Tablist } from './Tabs/Tabs';
 export { default as Textarea } from './Textarea/Textarea';
 export { default as Toaster } from './Toaster/Toaster';
 export { default as Tooltip } from './Tooltip/Tooltip';

package/build/es/hooks/useCloseOutsideOrElementClicked.js

@@ -12,10 +12,11 @@ const useCloseOutsideOrElementClicked = ({ ref, closeWhenTagClicked }, callback)
         const target = e.target;
         const parent = target.parentNode;
         const isElementInList = closeWhenTagClicked.some(tag => {
+            var _a, _b, _c;
             if (!target.parentNode) {
-                return tag === target.tagName.toLowerCase();
+                return tag === ((_a = target.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase());
             }
-            return tag === target.tagName.toLowerCase() || tag === parent.tagName.toLowerCase();
+            return tag === ((_b = target.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || tag === ((_c = parent.tagName) === null || _c === void 0 ? void 0 : _c.toLowerCase());
         });
         if ((ref.current && !ref.current.contains(target)) ||
             (isElementInList && !target.dataset.noClose)) {

package/build/es/hooks/useDebounce.d.ts

@@ -0,0 +1,2 @@
+declare const useDebounce: (callback: () => void, delay?: number) => () => void;
+export default useDebounce;

package/build/es/hooks/useDebounce.js

@@ -0,0 +1,19 @@
+import { useRef, useCallback } from 'react';
+
+const DEFAULT_DELAY = 400;
+const useDebounce = (
+// TODO: Eventually define generic type for function arguments if needed
+// callback: <T extends (...args: Parameters<T>) => void>(...args: T[]) => void,
+callback, delay = DEFAULT_DELAY) => {
+    const debounce = useRef();
+    return useCallback(() => {
+        if (debounce.current) {
+            clearTimeout(debounce.current);
+        }
+        debounce.current = setTimeout(() => {
+            callback();
+        }, delay);
+    }, [callback, delay]);
+};
+
+export { useDebounce as default };

package/build/es/hooks/useDocHeight.d.ts

@@ -1 +1,2 @@
-export declare const useDocHeight: () => void;
+declare const useDocHeight: () => void;
+export default useDocHeight;

package/build/es/hooks/useDocHeight.js

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { useDebounceFunc } from './useDebounceFunc.js';
+import { useCallback, useEffect } from 'react';
+import useDebounce from './useDebounce.js';
 
 const DEBOUNCE_DELAY = 100;
 const useDocHeight = () => {
-    const setDocHeight = React.useCallback(() => {
+    const setDocHeight = useCallback(() => {
         document.documentElement.style.setProperty('--vh100', `${window.innerHeight}px`);
     }, []);
-    const debounceSetDocHeight = useDebounceFunc(setDocHeight, DEBOUNCE_DELAY);
-    React.useEffect(() => {
+    const debounceSetDocHeight = useDebounce(setDocHeight, DEBOUNCE_DELAY);
+    useEffect(() => {
         setDocHeight();
         window.addEventListener('resize', debounceSetDocHeight);
         window.addEventListener('orientationchange', debounceSetDocHeight);
@@ -18,4 +18,4 @@ const useDocHeight = () => {
     }, [debounceSetDocHeight, setDocHeight]);
 };
 
-export { useDocHeight };
+export { useDocHeight as default };

package/build/es/hooks/useResizeObserver.d.ts

@@ -0,0 +1,6 @@
+declare const useResizeObserver: () => {
+    ref: (instance: HTMLDivElement) => void;
+    width: number;
+    height: number;
+};
+export default useResizeObserver;

package/build/es/hooks/{useElementDimensions.js → useResizeObserver.js}

@@ -4,21 +4,21 @@ import { useState, useRef, useCallback, useEffect } from 'react';
  * Hook to get element dimensions when layout changes
  */
 const ResizeObserver = typeof window !== 'undefined' && window.ResizeObserver;
-function useResizeObserver() {
+const useResizeObserver = () => {
     const [size, setSize] = useState({ width: 0, height: 0 });
     const resizeObserver = useRef(null);
     const onResize = useCallback(entries => {
         const { width, height } = entries[0].contentRect;
         setSize({ width, height });
     }, []);
-    const ref = useCallback(node => {
-        if (node !== null && ResizeObserver) {
+    const ref = useCallback(instance => {
+        if (instance !== null && ResizeObserver) {
             if (resizeObserver.current) {
                 resizeObserver.current.disconnect();
             }
             resizeObserver.current = new ResizeObserver(onResize);
             if (resizeObserver.current) {
-                resizeObserver.current.observe(node);
+                resizeObserver.current.observe(instance);
             }
         }
     }, [onResize]);
@@ -28,6 +28,6 @@ function useResizeObserver() {
         }
     }, []);
     return { ref, width: size.width, height: size.height };
-}
+};
 
 export { useResizeObserver as default };

package/build/es/hooks/useScrollPosition.d.ts

@@ -1,4 +1,4 @@
-import type { DependencyList, MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 /**
  * Hook to follow scroll position without rerendering the view.
  * Modified to ES6 and work with SSR (fixed window undefined error) and Rocket architecture from https://www.npmjs.com/package/@n8tb1t/use-scroll-position
@@ -12,9 +12,8 @@ interface ScrollPositionProps {
     currPos: ScrollPosition;
 }
 declare const useScrollPosition: {
-    (effect: ({ prevPos, currPos }: ScrollPositionProps) => void, deps: DependencyList, element: MutableRefObject<Element> | undefined, useWindow: boolean, wait: number): void;
+    (effect: ({ prevPos, currPos }: ScrollPositionProps) => void, element: MutableRefObject<Element> | undefined, useWindow: boolean, wait: number): void;
     defaultProps: {
-        deps: never[];
         element: boolean;
         useWindow: boolean;
         wait: null;

package/build/es/hooks/useScrollPosition.js

@@ -1,6 +1,5 @@
-import React__default from 'react';
+import { useRef, useEffect } from 'react';
 
-/* eslint-disable react-hooks/exhaustive-deps */
 const isBrowser = typeof window !== 'undefined';
 const getScrollPosition = (ref) => {
     const { element } = ref;
@@ -23,11 +22,11 @@ const getScrollPosition = (ref) => {
             y: position.top,
         };
 };
-const useScrollPosition = (effect, deps, element, useWindow, wait) => {
-    const position = React__default.useRef(getScrollPosition({
+const useScrollPosition = (effect, element, useWindow, wait) => {
+    const position = useRef(getScrollPosition({
         useWindow,
     }));
-    let throttleTimeout = null;
+    const throttleTimeout = useRef(null);
     const callBack = () => {
         const currPos = getScrollPosition({
             element,
@@ -38,16 +37,16 @@ const useScrollPosition = (effect, deps, element, useWindow, wait) => {
             currPos,
         });
         position.current = currPos;
-        throttleTimeout = null;
+        throttleTimeout.current = null;
     };
-    React__default.useEffect(() => {
+    useEffect(() => {
         if (!isBrowser) {
             return undefined;
         }
         const handleScroll = () => {
             if (wait) {
-                if (throttleTimeout === null) {
-                    throttleTimeout = setTimeout(callBack, wait);
+                if (throttleTimeout.current === null) {
+                    throttleTimeout.current = setTimeout(callBack, wait);
                 }
             }
             else {
@@ -56,10 +55,9 @@ const useScrollPosition = (effect, deps, element, useWindow, wait) => {
         };
         window.addEventListener('scroll', handleScroll);
         return () => window.removeEventListener('scroll', handleScroll);
-    }, deps);
+    });
 };
 useScrollPosition.defaultProps = {
-    deps: [],
     element: false,
     useWindow: false,
     wait: null,