@mrshmllw/smores-react 4.0.1 → 5.0.0

package/dist/Tooltip/Tooltip.js

@@ -1,148 +1,173 @@
-import React, { useCallback, useEffect, useRef, useState, } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
-import { v4 as uuidv4 } from 'uuid';
-import { Box } from '../Box';
-import { Text } from '../Text';
-import { useEventListener } from '../hooks';
-import { theme } from '../theme';
-import { debounce } from '../utils/debounce';
-export const Tooltip = ({ children, title, content, position = 'top', maxWidth = 500, underline = false, fallbackStyle = false, zIndex = 10, portalContainer = document.body, }) => {
-    const documentRef = useRef(document);
-    const tipContainer = useRef(null);
-    const [showTip, setShowTip] = useState(false);
-    const [tooltipPosition, setTooltipPosition] = useState(position);
-    const [childEl, setChildEl] = useState(null);
-    const [tooltipCoords, setTooltipCoords] = useState({ top: 0, left: 0 });
-    const randomId = uuidv4();
-    const checkInbounds = (element) => element.top >= 0 &&
-        element.left >= 0 &&
-        element.bottom <= window.innerHeight &&
-        element.right <= window.innerWidth;
-    const handleTipViewport = useCallback(() => {
-        const dimensions = tipContainer.current?.getBoundingClientRect();
-        if (!dimensions)
-            return;
-        if (checkInbounds(dimensions))
-            return;
-        // If in bounds but not defaulted to top; default
-        if (dimensions.top >= 0 && tooltipPosition !== 'top') {
-            setTooltipPosition('top');
-            return;
-        }
-        // if top out of bounds
-        if (dimensions.top < 0) {
-            setTooltipPosition('bottom');
-            return;
-        }
-        // if right out of bounds
-        if (dimensions.right > window.innerWidth) {
-            setTooltipPosition('left');
-            return;
-        }
-        // if left out of bounds
-        if (dimensions.left < 0) {
-            setTooltipPosition('right');
-            return;
-        }
-        // If bottom out of bounds
-        if (dimensions.bottom > window.innerHeight) {
-            setTooltipPosition('top');
-            return;
-        }
-    }, [tipContainer, tooltipPosition]);
-    useEffect(() => {
-        handleTipViewport();
-        setChildEl(document.getElementById(randomId));
-    }, []);
-    useEffect(() => {
-        setTooltipPosition(position);
-    }, [position]);
-    const arrowSize = 18;
-    const calculateTooltipPosition = () => {
-        if (!childEl)
-            return { top: 0, left: 0 };
-        if (!tipContainer.current)
-            return { top: 0, left: 0 };
-        const childPosition = childEl.getBoundingClientRect();
-        const tipDimensions = tipContainer.current.getBoundingClientRect();
-        let top = 0;
-        let left = 0;
-        switch (tooltipPosition) {
-            case 'top':
-                top =
-                    childPosition.top + window.scrollY - tipDimensions.height - arrowSize;
-                left =
-                    childPosition.left +
-                        window.scrollX +
-                        childPosition.width / 2 -
-                        tipDimensions.width / 2;
-                break;
-            case 'bottom':
-                top = childPosition.bottom + window.scrollY + arrowSize;
-                left =
-                    childPosition.left +
-                        window.scrollX +
-                        childPosition.width / 2 -
-                        tipDimensions.width / 2;
-                break;
-            case 'left':
-                left =
-                    childPosition.left + window.scrollX - tipDimensions.width - arrowSize;
-                top =
-                    childPosition.top +
-                        window.scrollY +
-                        childPosition.height / 2 -
-                        tipDimensions.height / 2;
-                break;
-            case 'right':
-                left = childPosition.right + window.scrollX + arrowSize;
-                top =
-                    childPosition.top +
-                        window.scrollY +
-                        childPosition.height / 2 -
-                        tipDimensions.height / 2;
-                break;
-            default:
-                break;
-        }
-        return { top, left };
-    };
-    useEffect(() => {
-        if (childEl) {
-            setTooltipCoords(calculateTooltipPosition());
+import { v4 } from 'uuid';
+import { Box } from '../Box/Box.js';
+import { Text } from '../Text/Text.js';
+import { useEventListener } from '../hooks/useEventListener/index.js';
+import { theme } from '../theme.js';
+import { debounce } from '../utils/debounce.js';
+
+const Tooltip = ({
+  children,
+  title,
+  content,
+  position = "top",
+  maxWidth = 500,
+  underline = false,
+  fallbackStyle = false,
+  zIndex = 10,
+  portalContainer = document.body
+}) => {
+  const documentRef = useRef(document);
+  const tipContainer = useRef(null);
+  const [showTip, setShowTip] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState(position);
+  const [childEl, setChildEl] = useState(null);
+  const [tooltipCoords, setTooltipCoords] = useState({ top: 0, left: 0 });
+  const randomId = v4();
+  const checkInbounds = (element) => element.top >= 0 && element.left >= 0 && element.bottom <= window.innerHeight && element.right <= window.innerWidth;
+  const handleTipViewport = useCallback(() => {
+    const dimensions = tipContainer.current?.getBoundingClientRect();
+    if (!dimensions)
+      return;
+    if (checkInbounds(dimensions))
+      return;
+    if (dimensions.top >= 0 && tooltipPosition !== "top") {
+      setTooltipPosition("top");
+      return;
+    }
+    if (dimensions.top < 0) {
+      setTooltipPosition("bottom");
+      return;
+    }
+    if (dimensions.right > window.innerWidth) {
+      setTooltipPosition("left");
+      return;
+    }
+    if (dimensions.left < 0) {
+      setTooltipPosition("right");
+      return;
+    }
+    if (dimensions.bottom > window.innerHeight) {
+      setTooltipPosition("top");
+      return;
+    }
+  }, [tipContainer, tooltipPosition]);
+  useEffect(() => {
+    handleTipViewport();
+    setChildEl(document.getElementById(randomId));
+  }, []);
+  useEffect(() => {
+    setTooltipPosition(position);
+  }, [position]);
+  const arrowSize = 18;
+  const calculateTooltipPosition = () => {
+    if (!childEl)
+      return { top: 0, left: 0 };
+    if (!tipContainer.current)
+      return { top: 0, left: 0 };
+    const childPosition = childEl.getBoundingClientRect();
+    const tipDimensions = tipContainer.current.getBoundingClientRect();
+    let top2 = 0;
+    let left2 = 0;
+    switch (tooltipPosition) {
+      case "top":
+        top2 = childPosition.top + window.scrollY - tipDimensions.height - arrowSize;
+        left2 = childPosition.left + window.scrollX + childPosition.width / 2 - tipDimensions.width / 2;
+        break;
+      case "bottom":
+        top2 = childPosition.bottom + window.scrollY + arrowSize;
+        left2 = childPosition.left + window.scrollX + childPosition.width / 2 - tipDimensions.width / 2;
+        break;
+      case "left":
+        left2 = childPosition.left + window.scrollX - tipDimensions.width - arrowSize;
+        top2 = childPosition.top + window.scrollY + childPosition.height / 2 - tipDimensions.height / 2;
+        break;
+      case "right":
+        left2 = childPosition.right + window.scrollX + arrowSize;
+        top2 = childPosition.top + window.scrollY + childPosition.height / 2 - tipDimensions.height / 2;
+        break;
+    }
+    return { top: top2, left: left2 };
+  };
+  useEffect(() => {
+    if (childEl) {
+      setTooltipCoords(calculateTooltipPosition());
+    }
+  }, [
+    position,
+    window.scrollY,
+    tipContainer.current,
+    childEl,
+    childEl?.getBoundingClientRect().top,
+    childEl?.getBoundingClientRect().left
+  ]);
+  useEventListener({
+    eventName: "resize",
+    callback: debounce(handleTipViewport, 100),
+    ref: documentRef
+  });
+  useEventListener({
+    eventName: "scroll",
+    callback: debounce(handleTipViewport, 100),
+    ref: documentRef
+  });
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(
+      UnderlinedChild,
+      {
+        id: randomId,
+        underline,
+        onMouseEnter: () => setShowTip(true),
+        onMouseLeave: () => setShowTip(false),
+        children
+      }
+    ),
+    childEl && createPortal(
+      /* @__PURE__ */ jsxs(
+        Tip,
+        {
+          className: "tooltip",
+          showTip,
+          position,
+          arrowPosition: tooltipPosition,
+          ref: tipContainer,
+          maxWidth,
+          fallbackStyle,
+          zIndex,
+          style: {
+            position: "absolute",
+            top: `${tooltipCoords.top}px`,
+            left: `${tooltipCoords.left}px`
+          },
+          children: [
+            title && /* @__PURE__ */ jsx(
+              Text,
+              {
+                tag: "h5",
+                typo: "desc-medium",
+                color: fallbackStyle ? "cream" : "liquorice",
+                children: title
+              }
+            ),
+            typeof content === "string" && /* @__PURE__ */ jsx(
+              Text,
+              {
+                typo: "desc-light",
+                color: fallbackStyle ? "cream" : "liquorice",
+                children: content
+              }
+            ) || content
+          ]
         }
-    }, [
-        position,
-        window.scrollY,
-        tipContainer.current,
-        childEl,
-        childEl?.getBoundingClientRect().top,
-        childEl?.getBoundingClientRect().left,
-    ]);
-    useEventListener({
-        eventName: 'resize',
-        callback: debounce(handleTipViewport, 100),
-        ref: documentRef,
-    });
-    useEventListener({
-        eventName: 'scroll',
-        callback: debounce(handleTipViewport, 100),
-        ref: documentRef,
-    });
-    return (React.createElement(Container, null,
-        React.createElement(UnderlinedChild, { id: randomId, underline: underline, onMouseEnter: () => setShowTip(true), onMouseLeave: () => setShowTip(false) }, children),
-        childEl &&
-            createPortal(React.createElement(Tip, { className: "tooltip", showTip: showTip, position: position, arrowPosition: tooltipPosition, ref: tipContainer, maxWidth: maxWidth, fallbackStyle: fallbackStyle, zIndex: zIndex, style: {
-                    position: 'absolute',
-                    top: `${tooltipCoords.top}px`,
-                    left: `${tooltipCoords.left}px`,
-                } },
-                title && (React.createElement(Text, { tag: "h5", typo: "desc-medium", color: fallbackStyle ? 'cream' : 'liquorice' }, title)),
-                (typeof content === 'string' && (React.createElement(Text, { typo: "desc-light", color: fallbackStyle ? 'cream' : 'liquorice' }, content))) ||
-                    content), portalContainer)));
+      ),
+      portalContainer
+    )
+  ] });
 };
-export const Container = styled.div `
+const Container = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -151,96 +176,95 @@ export const Container = styled.div `
     opacity: 1;
   }
 `;
-const UnderlinedChild = styled(Box) `
+const UnderlinedChild = styled(Box)`
   cursor: pointer;
-  ${({ underline }) => underline &&
-    css `
+  ${({ underline }) => underline && css`
       border-bottom: 1px dashed ${theme.colors.marshmallowPink};
     `}
 `;
 const arrowInset = 26;
-const arrowCenterPosition = 'calc(50% - 6px)';
-const arrowVerticalCenter = 'calc(50% - 12px)';
+const arrowCenterPosition = "calc(50% - 6px)";
+const arrowVerticalCenter = "calc(50% - 12px)";
 const handleHorizontalArrowPosition = (arrowPosition) => {
-    switch (arrowPosition) {
-        case 'left':
-            return css `
+  switch (arrowPosition) {
+    case "left":
+      return css`
         left: ${arrowInset}px;
       `;
-        case 'right':
-            return css `
+    case "right":
+      return css`
         right: ${arrowInset}px;
       `;
-        default:
-            return css `
+    default:
+      return css`
         left: ${arrowCenterPosition};
       `;
-    }
+  }
 };
 const handleVerticalArrowPosition = (arrowPosition) => {
-    switch (arrowPosition) {
-        case 'top':
-            return css `
+  switch (arrowPosition) {
+    case "top":
+      return css`
         top: ${arrowInset}px;
       `;
-        case 'bottom':
-            return css `
+    case "bottom":
+      return css`
         bottom: ${arrowInset}px;
       `;
-        default:
-            return css `
+    default:
+      return css`
         top: ${arrowVerticalCenter};
       `;
-    }
+  }
 };
-const top = css `
+const top = css`
   &:before {
     bottom: -15px;
     transform: rotate(-90deg);
     ${({ arrowPosition }) => handleHorizontalArrowPosition(arrowPosition)}
   }
 `;
-const bottom = css `
+const bottom = css`
   &:before {
     top: -15px;
     transform: rotate(90deg);
     ${({ arrowPosition }) => handleHorizontalArrowPosition(arrowPosition)}
   }
 `;
-const left = css `
+const left = css`
   &:before {
     right: -11px;
     transform: rotate(180deg);
     ${({ arrowPosition }) => handleVerticalArrowPosition(arrowPosition)}
   }
 `;
-const right = css `
+const right = css`
   &:before {
     left: -11px;
     ${({ arrowPosition }) => handleVerticalArrowPosition(arrowPosition)}
   }
 `;
-export const Tip = styled.div `
+const Tip = styled.div`
   position: absolute;
   margin: auto;
   background: ${theme.colors.custard};
   padding: 16px 12px 20px;
   border-radius: 16px;
   max-width: 450px;
-  opacity: ${({ showTip }) => (showTip ? '1' : '0')};
+  opacity: ${({ showTip }) => showTip ? "1" : "0"};
   transition: opacity 0.2s ease-in-out;
   pointer-events: none;
   cursor: default;
-  z-index: ${({ zIndex }) => (zIndex ? zIndex : '10')};
+  z-index: ${({ zIndex }) => zIndex ? zIndex : "10"};
 
   // this is the trick that will make sure the content can go up to maxWidth
-  margin-right: ${({ maxWidth }) => maxWidth && -maxWidth / 2 + 'px'};
-  max-width: ${({ maxWidth }) => maxWidth && maxWidth + 'px'};
+  margin-right: ${({ maxWidth }) => maxWidth && -maxWidth / 2 + "px"};
+  max-width: ${({ maxWidth }) => maxWidth && maxWidth + "px"};
 
-  ${({ arrowPosition }) => arrowPosition === 'top' && top}
-  ${({ arrowPosition }) => arrowPosition === 'bottom' && bottom}
-	${({ arrowPosition }) => arrowPosition === 'left' && left}
-	${({ arrowPosition }) => arrowPosition === 'right' && right}
+  ${({ arrowPosition }) => arrowPosition === "top" && top}
+  ${({ arrowPosition }) => arrowPosition === "bottom" && bottom}
+	${({ arrowPosition }) => arrowPosition === "left" && left}
+	${({ arrowPosition }) => arrowPosition === "right" && right}
 
   &:before {
     content: '';
@@ -250,12 +274,12 @@ export const Tip = styled.div `
     position: absolute;
   }
 
-  ${({ fallbackStyle }) => fallbackStyle &&
-    css `
+  ${({ fallbackStyle }) => fallbackStyle && css`
       background: ${theme.colors.feijoa};
       &:before {
         border-color: transparent ${theme.colors.feijoa} transparent transparent;
       }
     `};
 `;
-//# sourceMappingURL=Tooltip.js.map
+
+export { Container, Tip, Tooltip };

package/dist/fields/Field/Field.js

@@ -1,6 +1,8 @@
-import React from 'react';
-import { InternalField } from '../components/InternalField';
-export const Field = ({ children, ...fieldProps }) => {
-    return (React.createElement(InternalField, { fieldType: "field", ...fieldProps }, children));
+import { jsx } from 'react/jsx-runtime';
+import { InternalField } from '../components/InternalField.js';
+
+const Field = ({ children, ...fieldProps }) => {
+  return /* @__PURE__ */ jsx(InternalField, { fieldType: "field", ...fieldProps, children });
 };
-//# sourceMappingURL=Field.js.map
+
+export { Field };

package/dist/fields/Fieldset/Fieldset.js

@@ -1,6 +1,22 @@
-import React from 'react';
-import { InternalField } from '../components/InternalField';
-export const Fieldset = ({ children, renderAsTitle = true, id, ...fieldProps }) => {
-    return (React.createElement(InternalField, { htmlFor: id, fieldType: "fieldset", renderAsTitle: renderAsTitle, ...fieldProps }, children));
+import { jsx } from 'react/jsx-runtime';
+import { InternalField } from '../components/InternalField.js';
+
+const Fieldset = ({
+  children,
+  renderAsTitle = true,
+  id,
+  ...fieldProps
+}) => {
+  return /* @__PURE__ */ jsx(
+    InternalField,
+    {
+      htmlFor: id,
+      fieldType: "fieldset",
+      renderAsTitle,
+      ...fieldProps,
+      children
+    }
+  );
 };
-//# sourceMappingURL=Fieldset.js.map
+
+export { Fieldset };

package/dist/fields/commonFieldTypes.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { MarginProps } from '../utils/space';
 export interface CommonFieldProps extends MarginProps {
     id?: string;

package/dist/fields/components/CommonInput.js

@@ -1,22 +1,21 @@
-import { Icon } from '../../Icon';
 import styled, { css } from 'styled-components';
-import { theme } from '../../theme';
-export const Input = styled.input `
+import { Icon } from '../../Icon/Icon.js';
+import { theme } from '../../theme.js';
+
+const Input = styled.input`
   border: none;
-  color: ${({ error }) => theme.colors[`${error ? 'strawberry' : 'liquorice'}`]};
+  color: ${({ error }) => theme.colors[`${error ? "strawberry" : "liquorice"}`]};
   font-size: 16px;
   width: 100%;
   outline: none;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};
-  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "initial"};
+  opacity: ${({ disabled }) => disabled ? "0.5" : "1"};
   padding: 18px 14px;
   background-color: ${({ fallbackStyle }) => fallbackStyle ? theme.colors.custard : theme.colors.cream};
   border: 2px solid
-    ${({ error }) => (error ? theme.colors.strawberry : theme.colors.oatmeal)};
+    ${({ error }) => error ? theme.colors.strawberry : theme.colors.oatmeal};
 
-  ${({ disabled, error }) => !disabled &&
-    !error &&
-    css `
+  ${({ disabled, error }) => !disabled && !error && css`
       &:hover,
       &:focus-within {
         border-color: ${theme.colors.marzipan};
@@ -26,15 +25,11 @@ export const Input = styled.input `
   border-radius: 12px;
   height: auto;
 
-  ${({ frontIcon }) => frontIcon &&
-    frontIcon != '' &&
-    `
+  ${({ frontIcon }) => frontIcon && `
       padding-left: 42px;
     `}
 
-  ${({ trailingIcon }) => trailingIcon &&
-    trailingIcon != '' &&
-    `
+  ${({ trailingIcon }) => trailingIcon && `
       padding-right: 42px;
     `}
 
@@ -51,19 +46,20 @@ export const Input = styled.input `
     color: ${theme.colors.sesame};
   }
 `;
-export const StyledFrontIcon = styled(Icon) `
+const StyledFrontIcon = styled(Icon)`
   position: relative;
   left: 36px;
   margin-left: -24px;
   z-index: 1;
-  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+  opacity: ${({ disabled }) => disabled ? "0.5" : "1"};
   color: ${theme.colors.liquorice};
 `;
-export const StyledTrailingIcon = styled(Icon) `
+const StyledTrailingIcon = styled(Icon)`
   position: relative;
   right: 36px;
   margin-right: -36px;
-  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+  opacity: ${({ disabled }) => disabled ? "0.5" : "1"};
   color: ${theme.colors.liquorice};
 `;
-//# sourceMappingURL=CommonInput.js.map
+
+export { Input, StyledFrontIcon, StyledTrailingIcon };