@dnanpm/styleguide 4.0.9 → 4.0.10

package/build/es/components/Toaster/Toaster.js

@@ -9,52 +9,67 @@ import ButtonClose from '../ButtonClose/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
 
 const iconsMap = {
-    info: Info,
-    success: Check,
-    warning: Warning,
-    error: Error,
+  info: Info,
+  success: Check,
+  warning: Warning,
+  error: Error
 };
-const ToasterWrapper = styled.div `
-    width: 300px;
-`;
-const StyledBox = styled(Box) `
-    position: relative;
-    font-size: ${theme.fontSize.s};
-    font-weight: ${theme.fontWeight.medium};
-    line-height: ${theme.lineHeight.default};
-    border-left: 5px solid ${({ type }) => theme.color.notification[type]};
-    display: flex;
-    align-items: center;
-    padding-right: ${getMultipliedSize(theme.base.baseWidth, 4.5)};
-`;
-const IconWrapper = styled.div `
-    display: none;
-    align-items: center;
-    width: ${getMultipliedSize(theme.base.baseWidth, 4)};
-    overflow: hidden;
-
-    ${media.xs `
+const ToasterWrapper = styled.div.withConfig({
+  displayName: "Toaster__ToasterWrapper",
+  componentId: "sc-1q29lby-0"
+})(["width:300px;"]);
+const StyledBox = styled(Box).withConfig({
+  displayName: "Toaster__StyledBox",
+  componentId: "sc-1q29lby-1"
+})(["position:relative;font-size:", ";font-weight:", ";line-height:", ";border-left:5px solid ", ";display:flex;align-items:center;padding-right:", ";"], theme.fontSize.s, theme.fontWeight.medium, theme.lineHeight.default, ({
+  type
+}) => theme.color.notification[type], getMultipliedSize(theme.base.baseWidth, 4.5));
+const IconWrapper = styled.div.withConfig({
+  displayName: "Toaster__IconWrapper",
+  componentId: "sc-1q29lby-2"
+})(["display:none;align-items:center;width:", ";overflow:hidden;", ""], getMultipliedSize(theme.base.baseWidth, 4), media.xs`
         display: flex;
-    `}
-`;
-const ContentWrapper = styled.div `
-    flex: 1;
-`;
-const ButtonCloseStyled = styled(ButtonClose) `
-    display: flex;
-    top: auto;
-`;
-const Toaster = (_a) => {
-    var { type = 'info', 'data-testid': dataTestId, closeLabel } = _a, props = __rest(_a, ["type", 'data-testid', "closeLabel"]);
-    if (props.dismissed)
-        return null;
-    return (React__default.createElement(ToasterWrapper, { className: props.className, "data-testid": dataTestId, role: "alert", "aria-live": "assertive", "aria-atomic": "true" },
-        React__default.createElement(StyledBox, { type: type, padding: getMultipliedSize(theme.base.baseWidth, 1), elevation: "extraHigh" },
-            React__default.createElement(IconWrapper, null,
-                React__default.createElement(Icon, { icon: iconsMap[type], size: "2rem", color: theme.color.notification[type], "aria-hidden": true, "data-testid": "toaster-icon" })),
-            React__default.createElement(ContentWrapper, null, props.children),
-            React__default.createElement(ButtonCloseStyled, { "aria-label": closeLabel, onClick: props.onClickCloseButton },
-                React__default.createElement(Icon, { icon: Close, color: theme.color.text.black, "aria-hidden": true })))));
+    `);
+const ContentWrapper = styled.div.withConfig({
+  displayName: "Toaster__ContentWrapper",
+  componentId: "sc-1q29lby-3"
+})(["flex:1;"]);
+const ButtonCloseStyled = styled(ButtonClose).withConfig({
+  displayName: "Toaster__ButtonCloseStyled",
+  componentId: "sc-1q29lby-4"
+})(["display:flex;top:auto;"]);
+const Toaster = _a => {
+  var {
+      type = 'info',
+      'data-testid': dataTestId,
+      closeLabel
+    } = _a,
+    props = __rest(_a, ["type", 'data-testid', "closeLabel"]);
+  if (props.dismissed) return null;
+  return /*#__PURE__*/React__default.createElement(ToasterWrapper, {
+    className: props.className,
+    "data-testid": dataTestId,
+    role: "alert",
+    "aria-live": "assertive",
+    "aria-atomic": "true"
+  }, /*#__PURE__*/React__default.createElement(StyledBox, {
+    type: type,
+    padding: getMultipliedSize(theme.base.baseWidth, 1),
+    elevation: "extraHigh"
+  }, /*#__PURE__*/React__default.createElement(IconWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: iconsMap[type],
+    size: "2rem",
+    color: theme.color.notification[type],
+    "aria-hidden": true,
+    "data-testid": "toaster-icon"
+  })), /*#__PURE__*/React__default.createElement(ContentWrapper, null, props.children), /*#__PURE__*/React__default.createElement(ButtonCloseStyled, {
+    "aria-label": closeLabel,
+    onClick: props.onClickCloseButton
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: Close,
+    color: theme.color.text.black,
+    "aria-hidden": true
+  }))));
 };
 
 export { Toaster as default };

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

@@ -8,101 +8,88 @@ import getElevationShadow from '../../utils/common.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
 
-const Helper = styled.button `
-    display: inline-block;
-    vertical-align: middle;
-    background: transparent;
-    border: none;
-    padding: 0;
-    margin: 0;
-    color: inherit;
-    font: inherit;
-    text-align: inherit;
-    text-decoration: none;
-    outline: inherit;
-    pointer-events: auto;
-    height: 1rem;
-
-    &:focus-visible {
-        outline: none;
-        box-shadow:
-            0px 0px 0px 2px ${theme.color.focus.light},
-            0px 0px 0px 4px ${theme.color.focus.dark};
-        border-radius: 100%;
-    }
-
-    ${({ $isClickable }) => $isClickable && `cursor: pointer`};
-`;
+const Helper = styled.button.withConfig({
+  displayName: "Tooltip__Helper",
+  componentId: "sc-1yyn2pp-0"
+})(["display:inline-block;vertical-align:middle;background:transparent;border:none;padding:0;margin:0;color:inherit;font:inherit;text-align:inherit;text-decoration:none;outline:inherit;pointer-events:auto;height:1rem;&:focus-visible{outline:none;box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";border-radius:100%;}", ";"], theme.color.focus.light, theme.color.focus.dark, ({
+  $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]) => `
+  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('');
+    `).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: left;
-    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, isClickable = false, isHoverable = false } = _a, props = __rest(_a, ['data-testid', "closeWithEsc", "isClickable", "isHoverable"]);
-    const handleReactTooltipOpenEvents = {
-        mouseover: !isClickable,
-        focus: !isClickable,
-        mouseenter: !isClickable,
-        mousedown: !isClickable && !isHoverable,
-        click: isClickable,
-        dblclick: isClickable,
-    };
-    const handleReactTooltipCloseEvents = {
-        mouseout: !isClickable && !isHoverable,
-        blur: !isClickable && !isHoverable,
-        mouseleave: !isClickable,
-        mouseup: !isClickable,
-        click: isClickable,
-        dblclick: isClickable,
-    };
-    const handleReactTooltipGlobalCloseEvents = {
-        escape: closeWithEsc,
-        clickOutsideAnchor: true,
-        scroll: true,
-    };
-    return (React__default.createElement(React__default.Fragment, null,
-        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, "$isClickable": isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500 },
-            React__default.createElement(Icon, { icon: Info, size: "1rem", position: props.position, "aria-hidden": true }))),
-        React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, openOnClick: isClickable, clickable: isHoverable, "$isMultiline": props.isMultiline, disableStyleInjection: true, role: isHoverable ? 'dialog' : 'tooltip', openEvents: handleReactTooltipOpenEvents, globalCloseEvents: handleReactTooltipGlobalCloseEvents, closeEvents: handleReactTooltipCloseEvents, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
+const StyledReactTooltip = styled(Tooltip$1).withConfig({
+  displayName: "Tooltip__StyledReactTooltip",
+  componentId: "sc-1yyn2pp-1"
+})(["--rt-opacity:1;border:1px solid ", ";padding:", ";text-align:left;font-size:", ";line-height:", ";width:max-content;max-width:", ";color:", ";background-color:", ";border-radius:", ";", " & .react-tooltip-arrow{width:", ";height:", ";border-bottom:1px solid ", ";border-right:1px solid ", ";}", ""], theme.color.line.L02, getMultipliedSize(theme.base.baseWidth, 1.5), theme.fontSize.default, theme.lineHeight.default, getMultipliedSize(theme.base.baseWidth, 25), theme.color.text.black, theme.color.background.white.default, theme.radius.s, getElevationShadow({
+  elevation: 'low'
+}), getMultipliedSize(theme.base.baseWidth, 1.2), getMultipliedSize(theme.base.baseHeight, 1.2), theme.color.line.L02, theme.color.line.L02, getArrowOverrides());
+const Tooltip = _a => {
+  var {
+      'data-testid': dataTestId,
+      closeWithEsc = true,
+      isClickable = false,
+      isHoverable = false
+    } = _a,
+    props = __rest(_a, ['data-testid', "closeWithEsc", "isClickable", "isHoverable"]);
+  const handleReactTooltipOpenEvents = {
+    mouseover: !isClickable,
+    focus: !isClickable,
+    mouseenter: !isClickable,
+    mousedown: !isClickable && !isHoverable,
+    click: isClickable,
+    dblclick: isClickable
+  };
+  const handleReactTooltipCloseEvents = {
+    mouseout: !isClickable && !isHoverable,
+    blur: !isClickable && !isHoverable,
+    mouseleave: !isClickable,
+    mouseup: !isClickable,
+    click: isClickable,
+    dblclick: isClickable
+  };
+  const handleReactTooltipGlobalCloseEvents = {
+    escape: closeWithEsc,
+    clickOutsideAnchor: true,
+    scroll: true
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !props.hideTriggerElement && (/*#__PURE__*/React__default.createElement(Helper, {
+    "data-tooltip-id": props.id,
+    "$isClickable": isClickable,
+    className: props.className,
+    "data-testid": dataTestId,
+    type: "button",
+    "data-tooltip-delay-hide": 500
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: Info,
+    size: "1rem",
+    position: props.position,
+    "aria-hidden": true
+  }))), /*#__PURE__*/React__default.createElement(StyledReactTooltip, {
+    id: props.id,
+    place: props.placement,
+    openOnClick: isClickable,
+    clickable: isHoverable,
+    "$isMultiline": props.isMultiline,
+    disableStyleInjection: true,
+    role: isHoverable ? 'dialog' : 'tooltip',
+    openEvents: handleReactTooltipOpenEvents,
+    globalCloseEvents: handleReactTooltipGlobalCloseEvents,
+    closeEvents: handleReactTooltipCloseEvents,
+    "data-testid": dataTestId && `${dataTestId}-content`
+  }, props.children));
 };
 
 export { Tooltip as default };

package/build/es/hooks/useCloseOutsideOrElementClicked.js

@@ -7,28 +7,30 @@ import { useEffect } from 'react';
  * @param closeWhenTagClicked - provided array of tag names in lowercase which will also close dropdown. Works if tag or first parent is clicked.
  * @param callback - callback
  */
-const useCloseOutsideOrElementClicked = ({ ref, closeWhenTagClicked }, callback) => {
-    const handleClick = (e) => {
-        const target = e.target;
-        const parent = target.parentNode;
-        const isElementInList = closeWhenTagClicked.some(tag => {
-            var _a, _b, _c;
-            if (!target.parentNode) {
-                return tag === ((_a = target.tagName) === null || _a === void 0 ? void 0 : _a.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.closest('.no-close'))) {
-            callback();
-        }
-    };
-    useEffect(() => {
-        document.addEventListener('click', handleClick);
-        return () => {
-            document.removeEventListener('click', handleClick);
-        };
+const useCloseOutsideOrElementClicked = ({
+  ref,
+  closeWhenTagClicked
+}, callback) => {
+  const handleClick = e => {
+    const target = e.target;
+    const parent = target.parentNode;
+    const isElementInList = closeWhenTagClicked.some(tag => {
+      var _a, _b, _c;
+      if (!target.parentNode) {
+        return tag === ((_a = target.tagName) === null || _a === void 0 ? void 0 : _a.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.closest('.no-close')) {
+      callback();
+    }
+  };
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  });
 };
 
 export { useCloseOutsideOrElementClicked as default };

package/build/es/hooks/useDebounce.js

@@ -5,15 +5,15 @@ 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]);
+  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.js

@@ -3,19 +3,19 @@ import useDebounce from './useDebounce.js';
 
 const DEBOUNCE_DELAY = 100;
 const useDocHeight = () => {
-    const setDocHeight = useCallback(() => {
-        document.documentElement.style.setProperty('--vh100', `${window.innerHeight}px`);
-    }, []);
-    const debounceSetDocHeight = useDebounce(setDocHeight, DEBOUNCE_DELAY);
-    useEffect(() => {
-        setDocHeight();
-        window.addEventListener('resize', debounceSetDocHeight);
-        window.addEventListener('orientationchange', debounceSetDocHeight);
-        return () => {
-            window.removeEventListener('resize', debounceSetDocHeight);
-            window.removeEventListener('orientationchange', debounceSetDocHeight);
-        };
-    }, [debounceSetDocHeight, setDocHeight]);
+  const setDocHeight = useCallback(() => {
+    document.documentElement.style.setProperty('--vh100', `${window.innerHeight}px`);
+  }, []);
+  const debounceSetDocHeight = useDebounce(setDocHeight, DEBOUNCE_DELAY);
+  useEffect(() => {
+    setDocHeight();
+    window.addEventListener('resize', debounceSetDocHeight);
+    window.addEventListener('orientationchange', debounceSetDocHeight);
+    return () => {
+      window.removeEventListener('resize', debounceSetDocHeight);
+      window.removeEventListener('orientationchange', debounceSetDocHeight);
+    };
+  }, [debounceSetDocHeight, setDocHeight]);
 };
 
 export { useDocHeight as default };

package/build/es/hooks/useOutsideClick.js

@@ -7,17 +7,17 @@ import { useEffect } from 'react';
  * @param {Function} callback - callback
  */
 const useOutsideClick = (ref, callback) => {
-    const handleClick = (e) => {
-        if (ref.current && !ref.current.contains(e.target)) {
-            callback();
-        }
+  const handleClick = e => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      callback();
+    }
+  };
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
     };
-    useEffect(() => {
-        document.addEventListener('click', handleClick);
-        return () => {
-            document.removeEventListener('click', handleClick);
-        };
-    });
+  });
 };
 
 export { useOutsideClick as default };

package/build/es/hooks/useResizeObserver.js

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

package/build/es/hooks/useScrollPosition.js

@@ -1,66 +1,67 @@
 import { useRef, useEffect } from 'react';
 
 const isBrowser = typeof window !== 'undefined';
-const getScrollPosition = (ref) => {
-    const { element } = ref;
-    const { useWindow } = ref;
+const getScrollPosition = ref => {
+  const {
+    element
+  } = ref;
+  const {
+    useWindow
+  } = ref;
+  if (!isBrowser) {
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+  const target = element ? element.current : document.body;
+  const position = target.getBoundingClientRect();
+  return useWindow ? {
+    x: window.scrollX,
+    y: window.scrollY
+  } : {
+    x: position.left,
+    y: position.top
+  };
+};
+const useScrollPosition = (effect, element, useWindow, wait) => {
+  const position = useRef(getScrollPosition({
+    useWindow
+  }));
+  const throttleTimeout = useRef(null);
+  const callBack = () => {
+    const currPos = getScrollPosition({
+      element,
+      useWindow
+    });
+    effect({
+      prevPos: position.current,
+      currPos
+    });
+    position.current = currPos;
+    throttleTimeout.current = null;
+  };
+  useEffect(() => {
     if (!isBrowser) {
-        return {
-            x: 0,
-            y: 0,
-        };
+      return undefined;
     }
-    const target = element ? element.current : document.body;
-    const position = target.getBoundingClientRect();
-    return useWindow
-        ? {
-            x: window.scrollX,
-            y: window.scrollY,
+    const handleScroll = () => {
+      if (wait) {
+        if (throttleTimeout.current === null) {
+          throttleTimeout.current = setTimeout(callBack, wait);
         }
-        : {
-            x: position.left,
-            y: position.top,
-        };
-};
-const useScrollPosition = (effect, element, useWindow, wait) => {
-    const position = useRef(getScrollPosition({
-        useWindow,
-    }));
-    const throttleTimeout = useRef(null);
-    const callBack = () => {
-        const currPos = getScrollPosition({
-            element,
-            useWindow,
-        });
-        effect({
-            prevPos: position.current,
-            currPos,
-        });
-        position.current = currPos;
-        throttleTimeout.current = null;
+      } else {
+        callBack();
+      }
     };
-    useEffect(() => {
-        if (!isBrowser) {
-            return undefined;
-        }
-        const handleScroll = () => {
-            if (wait) {
-                if (throttleTimeout.current === null) {
-                    throttleTimeout.current = setTimeout(callBack, wait);
-                }
-            }
-            else {
-                callBack();
-            }
-        };
-        window.addEventListener('scroll', handleScroll);
-        return () => window.removeEventListener('scroll', handleScroll);
-    });
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  });
 };
 useScrollPosition.defaultProps = {
-    element: false,
-    useWindow: false,
-    wait: null,
+  element: false,
+  useWindow: false,
+  wait: null
 };
 
 export { useScrollPosition as default };