@mrshmllw/smores-react 4.0.1 → 5.0.0

package/dist/Pagination/Pagination.js

@@ -1,107 +1,147 @@
-import React, { useEffect, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { Box } from '../Box';
-import { Text } from '../Text';
-import { Icon } from '../Icon';
-import { theme } from '../theme';
-import { focusOutlineStyle } from '../utils/focusOutline';
+import { Box } from '../Box/Box.js';
+import { Text } from '../Text/Text.js';
+import { Icon } from '../Icon/Icon.js';
+import { theme } from '../theme.js';
+import { focusOutlineStyle } from '../utils/focusOutline.js';
+
 const MAX_PAGES = 7;
 const MAX_ADDITIONAL_PAGES = Math.ceil(MAX_PAGES / 2);
-export const Pagination = ({ total, partition, handlePageChange, currentPage, ...marginProps }) => {
-    const [lastPage, setLastPage] = useState(0);
-    const [activePage, setActivePage] = useState(1);
-    const [pages, setPages] = useState([]);
-    const [shownPages, setShownPages] = useState([]);
-    const [showFirstDots, setShowFirstDots] = useState(false);
-    const [showLastDots, setShowLastDots] = useState(false);
-    useEffect(() => {
-        // This is a rather hacky fix, in theory it should be listening to total, but because the total comes from the same endpoint as the data, it forces a reset to 1 every time
-        // Using lastPage seems to bypass that
-        if (currentPage) {
-            setActivePage(currentPage);
-        }
-        else {
-            setActivePage(1);
-        }
-    }, [lastPage, currentPage]);
-    useEffect(() => {
-        const numberOfPages = Math.ceil(total / partition);
-        if (numberOfPages > 1) {
-            setLastPage(numberOfPages);
-        }
-        else if (numberOfPages === 1) {
-            // Sets last page to be null to avoid the last page being kept from previous state.
-            setLastPage(0);
-        }
-        if (numberOfPages > 2) {
-            const allPages = Array.from({ length: numberOfPages }, (_, i) => i + 1);
-            setPages(allPages.slice(1, numberOfPages - 1));
-        }
-        else {
-            // Sets pages to empty to avoid using the previous state if pages set before.
-            setPages([]);
-        }
-    }, [total, partition]);
-    useEffect(() => {
-        if (lastPage <= MAX_PAGES) {
-            setShownPages(pages);
-        }
-        else if (activePage <= MAX_ADDITIONAL_PAGES) {
-            setShownPages(pages.slice(0, MAX_ADDITIONAL_PAGES));
-        }
-        else if (activePage > lastPage - MAX_ADDITIONAL_PAGES) {
-            setShownPages(pages.slice(pages.length - MAX_ADDITIONAL_PAGES));
-        }
-        else {
-            const activePageIndex = pages.indexOf(activePage);
-            setShownPages(pages.slice(activePageIndex - 1, activePageIndex + 2));
-        }
-    }, [lastPage, activePage, pages]);
-    useEffect(() => {
-        setShowFirstDots(shownPages[0] !== pages[0]);
-        setShowLastDots(shownPages[shownPages.length - 1] !== pages[pages.length - 1]);
-    }, [shownPages, pages]);
-    const movePage = (page) => {
-        if (page > 0 && page <= lastPage) {
-            setActivePage(page);
-            handlePageChange(page);
-        }
-    };
-    return (React.createElement(Container, { flex: true, direction: "row", ...marginProps },
-        activePage - 1 > 0 && (React.createElement(IconBox, { firstPage: true, onClick: () => movePage(activePage - 1), onKeyDown: (e) => {
-                if (e.key === 'Enter') {
-                    movePage(activePage - 1);
-                }
-            } },
-            React.createElement(Icon, { size: 18, render: "arrow" }))),
-        React.createElement(PageBox, { active: activePage === 1, onClick: () => movePage(1) },
-            React.createElement(Text, { typo: activePage === 1 ? 'desc-medium' : 'desc-light', tag: "p" }, "1")),
-        showFirstDots && (React.createElement(PageBox, null,
-            React.createElement(Text, { tag: "p" }, "..."))),
-        shownPages.map((i) => {
-            return (React.createElement(PageBox, { active: activePage === i, key: i, onClick: () => movePage(i), onKeyDown: (e) => {
-                    if (e.key === 'Enter') {
-                        movePage(i);
-                    }
-                } },
-                React.createElement(Text, { typo: activePage === i ? 'desc-medium' : 'desc-light', tag: "p" }, i)));
-        }),
-        showLastDots && (React.createElement(PageBox, null,
-            React.createElement(Text, { tag: "p" }, "..."))),
-        Boolean(lastPage) && (React.createElement(PageBox, { active: activePage === lastPage, onClick: () => movePage(lastPage), onKeyDown: (e) => {
-                if (e.key === 'Enter') {
-                    movePage(lastPage);
-                }
-            } },
-            React.createElement(Text, { typo: activePage === lastPage ? 'desc-medium' : 'desc-light', tag: "p" }, lastPage))),
-        activePage + 1 <= lastPage && (React.createElement(IconBox, { onClick: () => movePage(activePage + 1), onKeyDown: (e) => {
-                if (e.key === 'Enter') {
-                    movePage(activePage + 1);
-                }
-            } },
-            React.createElement(Icon, { size: 18, render: "arrow", rotate: 180 })))));
+const Pagination = ({
+  total,
+  partition,
+  handlePageChange,
+  currentPage,
+  ...marginProps
+}) => {
+  const [lastPage, setLastPage] = useState(0);
+  const [activePage, setActivePage] = useState(1);
+  const [pages, setPages] = useState([]);
+  const [shownPages, setShownPages] = useState([]);
+  const [showFirstDots, setShowFirstDots] = useState(false);
+  const [showLastDots, setShowLastDots] = useState(false);
+  useEffect(() => {
+    if (currentPage) {
+      setActivePage(currentPage);
+    } else {
+      setActivePage(1);
+    }
+  }, [lastPage, currentPage]);
+  useEffect(() => {
+    const numberOfPages = Math.ceil(total / partition);
+    if (numberOfPages > 1) {
+      setLastPage(numberOfPages);
+    } else if (numberOfPages === 1) {
+      setLastPage(0);
+    }
+    if (numberOfPages > 2) {
+      const allPages = Array.from({ length: numberOfPages }, (_, i) => i + 1);
+      setPages(allPages.slice(1, numberOfPages - 1));
+    } else {
+      setPages([]);
+    }
+  }, [total, partition]);
+  useEffect(() => {
+    if (lastPage <= MAX_PAGES) {
+      setShownPages(pages);
+    } else if (activePage <= MAX_ADDITIONAL_PAGES) {
+      setShownPages(pages.slice(0, MAX_ADDITIONAL_PAGES));
+    } else if (activePage > lastPage - MAX_ADDITIONAL_PAGES) {
+      setShownPages(pages.slice(pages.length - MAX_ADDITIONAL_PAGES));
+    } else {
+      const activePageIndex = pages.indexOf(activePage);
+      setShownPages(pages.slice(activePageIndex - 1, activePageIndex + 2));
+    }
+  }, [lastPage, activePage, pages]);
+  useEffect(() => {
+    setShowFirstDots(shownPages[0] !== pages[0]);
+    setShowLastDots(
+      shownPages[shownPages.length - 1] !== pages[pages.length - 1]
+    );
+  }, [shownPages, pages]);
+  const movePage = (page) => {
+    if (page > 0 && page <= lastPage) {
+      setActivePage(page);
+      handlePageChange(page);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Container, { flex: true, direction: "row", ...marginProps, children: [
+    activePage - 1 > 0 && /* @__PURE__ */ jsx(
+      IconBox,
+      {
+        firstPage: true,
+        onClick: () => movePage(activePage - 1),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            movePage(activePage - 1);
+          }
+        },
+        children: /* @__PURE__ */ jsx(Icon, { size: 18, render: "arrow" })
+      }
+    ),
+    /* @__PURE__ */ jsx(PageBox, { active: activePage === 1, onClick: () => movePage(1), children: /* @__PURE__ */ jsx(Text, { typo: activePage === 1 ? "desc-medium" : "desc-light", tag: "p", children: "1" }) }),
+    showFirstDots && /* @__PURE__ */ jsx(PageBox, { children: /* @__PURE__ */ jsx(Text, { tag: "p", children: "..." }) }),
+    shownPages.map((i) => {
+      return /* @__PURE__ */ jsx(
+        PageBox,
+        {
+          active: activePage === i,
+          onClick: () => movePage(i),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              movePage(i);
+            }
+          },
+          children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              typo: activePage === i ? "desc-medium" : "desc-light",
+              tag: "p",
+              children: i
+            }
+          )
+        },
+        i
+      );
+    }),
+    showLastDots && /* @__PURE__ */ jsx(PageBox, { children: /* @__PURE__ */ jsx(Text, { tag: "p", children: "..." }) }),
+    Boolean(lastPage) && /* @__PURE__ */ jsx(
+      PageBox,
+      {
+        active: activePage === lastPage,
+        onClick: () => movePage(lastPage),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            movePage(lastPage);
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            typo: activePage === lastPage ? "desc-medium" : "desc-light",
+            tag: "p",
+            children: lastPage
+          }
+        )
+      }
+    ),
+    activePage + 1 <= lastPage && /* @__PURE__ */ jsx(
+      IconBox,
+      {
+        onClick: () => movePage(activePage + 1),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            movePage(activePage + 1);
+          }
+        },
+        children: /* @__PURE__ */ jsx(Icon, { size: 18, render: "arrow", rotate: 180 })
+      }
+    )
+  ] });
 };
-const Container = styled(Box) `
+const Container = styled(Box)`
   align-items: center;
   > button {
     margin-right: 4px;
@@ -111,7 +151,7 @@ const Container = styled(Box) `
     }
   }
 `;
-const PageBox = styled.button `
+const PageBox = styled.button`
   background: ${({ active }) => active ? theme.colors.custard : theme.colors.cream};
   cursor: pointer;
   display: flex;
@@ -129,9 +169,10 @@ const PageBox = styled.button `
 
   ${focusOutlineStyle}
 `;
-const IconBox = styled.button `
+const IconBox = styled.button`
   cursor: pointer;
 
   ${focusOutlineStyle}
 `;
-//# sourceMappingURL=Pagination.js.map
+
+export { Pagination };

package/dist/RadioGroup/RadioElement.js

@@ -1,19 +1,36 @@
-import React, { forwardRef } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { theme } from '../theme';
-import { focusOutline } from '../utils/focusOutline';
-import { visuallyHidden } from '../utils/visuallyHidden';
-import { Box } from '../Box';
-export const RadioElement = forwardRef(function RadioElement({ name, id, value, checked, onChange, onBlur, isError, ...marginProps }, ref) {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(StyledInput, { ref: ref, type: "radio", name: name, id: id, value: `${value}`, checked: checked, onChange: () => onChange(value), onBlur: onBlur }),
-        React.createElement(RadioCircle, { isError: isError, checked: checked, ...marginProps })));
-});
-const StyledInput = styled.input `
+import { theme } from '../theme.js';
+import { focusOutline } from '../utils/focusOutline.js';
+import { visuallyHidden } from '../utils/visuallyHidden.js';
+import { Box } from '../Box/Box.js';
+
+const RadioElement = forwardRef(
+  function RadioElement2({ name, id, value, checked, onChange, onBlur, isError, ...marginProps }, ref) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        StyledInput,
+        {
+          ref,
+          type: "radio",
+          name,
+          id,
+          value: `${value}`,
+          checked,
+          onChange: () => onChange(value),
+          onBlur
+        }
+      ),
+      /* @__PURE__ */ jsx(RadioCircle, { isError, checked, ...marginProps })
+    ] });
+  }
+);
+const StyledInput = styled.input`
   ${visuallyHidden}
 `;
 const RADIO_SIZE = 24;
-const RadioCircle = styled(Box) `
+const RadioCircle = styled(Box)`
   flex-shrink: 0;
   width: ${RADIO_SIZE}px;
   height: ${RADIO_SIZE}px;
@@ -22,17 +39,15 @@ const RadioCircle = styled(Box) `
   border: 2px solid
     ${({ isError }) => isError ? theme.colors.strawberry : theme.colors.sesame};
 
-  ${({ checked, isError }) => !checked &&
-    !isError &&
-    `
+  ${({ checked, isError }) => !checked && !isError && `
     &:hover {
       border: 2px solid ${theme.colors.liquorice};
     }
   `}
 
-  ${({ checked, isError }) => checked &&
-    `border: 8px solid ${isError ? theme.colors.strawberry : theme.colors.liquorice};`}
+  ${({ checked, isError }) => checked && `border: 8px solid ${isError ? theme.colors.strawberry : theme.colors.liquorice};`}
 
   ${focusOutline({ selector: `${StyledInput}:focus-visible + &` })}
 `;
-//# sourceMappingURL=RadioElement.js.map
+
+export { RadioElement };

package/dist/RadioGroup/RadioGroup.js

@@ -1,44 +1,75 @@
-import React, { forwardRef, useImperativeHandle, useRef, } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import styled from 'styled-components';
-import { useUniqueId } from '../utils/id';
-import { Fieldset } from '../fields/Fieldset';
-import { ITEM_GAP } from './constants';
-import { RadioItem } from './RadioItem';
-const RadioGroupComponent = ({ options, onChange, onBlur, value, displayType = 'normal', renderAsTitle = false, error = false, fallbackStyle = false, ...fieldProps }, ref) => {
-    const name = useUniqueId();
-    const optionRefs = useRef([]);
-    useImperativeHandle(ref, () => {
-        return {
-            focus: () => {
-                const selectedIndex = options.findIndex((item) => item.value === value);
-                const elementToFocus = selectedIndex === -1 ? 0 : selectedIndex;
-                optionRefs.current[elementToFocus].current?.focus();
-            },
-        };
-    });
-    return (React.createElement(Fieldset, { renderAsTitle: renderAsTitle, error: error, ...fieldProps },
-        React.createElement(RadioItemList, { displayType: displayType }, options.map((option, index) => {
-            const isSelected = option.value === value;
-            return (React.createElement(RadioItem, { ref: (radioOptionRef) => {
-                    optionRefs.current[index] = {
-                        current: radioOptionRef,
-                    };
-                }, key: `${option.value}`, name: name, visual: option.visual, icon: option.icon, iconPosition: option.iconPosition, label: option.label, value: option.value, checked: isSelected, onChange: onChange, onBlur: onBlur, displayType: displayType, isError: error, fallbackStyle: fallbackStyle, bodyCopy: option.bodyCopy }));
-        }))));
+import { useUniqueId } from '../utils/id.js';
+import { Fieldset } from '../fields/Fieldset/Fieldset.js';
+import { ITEM_GAP } from './constants.js';
+import { RadioItem } from './RadioItem.js';
+
+const RadioGroupComponent = ({
+  options,
+  onChange,
+  onBlur,
+  value,
+  displayType = "normal",
+  renderAsTitle = false,
+  error = false,
+  fallbackStyle = false,
+  ...fieldProps
+}, ref) => {
+  const name = useUniqueId();
+  const optionRefs = useRef([]);
+  useImperativeHandle(ref, () => {
+    return {
+      focus: () => {
+        const selectedIndex = options.findIndex((item) => item.value === value);
+        const elementToFocus = selectedIndex === -1 ? 0 : selectedIndex;
+        optionRefs.current[elementToFocus].current?.focus();
+      }
+    };
+  });
+  return /* @__PURE__ */ jsx(Fieldset, { renderAsTitle, error, ...fieldProps, children: /* @__PURE__ */ jsx(RadioItemList, { displayType, children: options.map((option, index) => {
+    const isSelected = option.value === value;
+    return /* @__PURE__ */ jsx(
+      RadioItem,
+      {
+        ref: (radioOptionRef) => {
+          optionRefs.current[index] = {
+            current: radioOptionRef
+          };
+        },
+        name,
+        visual: option.visual,
+        icon: option.icon,
+        iconPosition: option.iconPosition,
+        label: option.label,
+        value: option.value,
+        checked: isSelected,
+        onChange,
+        onBlur,
+        displayType,
+        isError: error,
+        fallbackStyle,
+        bodyCopy: option.bodyCopy
+      },
+      `${option.value}`
+    );
+  }) }) });
 };
-export const RadioGroup = forwardRef(RadioGroupComponent);
-const RadioItemList = styled.div `
+const RadioGroup = forwardRef(RadioGroupComponent);
+const RadioItemList = styled.div`
   display: flex;
   gap: ${ITEM_GAP}px;
 
   ${({ displayType }) => {
-    if (displayType === 'horizontal-card') {
-        return `
+  if (displayType === "horizontal-card") {
+    return `
         flex-direction: row;
         flex-wrap: wrap;
       `;
-    }
-    return `flex-direction: column;`;
+  }
+  return `flex-direction: column;`;
 }}
 `;
-//# sourceMappingURL=RadioGroup.js.map
+
+export { RadioGroup };

package/dist/RadioGroup/RadioItem.js

@@ -1,46 +1,86 @@
-import React, { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { theme } from '../theme';
-import { useUniqueId } from '../utils/id';
-import { Box } from '../Box';
-import { Icon } from '../Icon';
-import { Text } from '../Text';
-import { RadioElement } from './RadioElement';
-import { ITEM_GAP } from './constants';
-export const RadioItem = forwardRef(function RadioItem({ name, visual, icon, iconPosition = 'center', label, value, checked, onChange, onBlur, displayType, isError, fallbackStyle, bodyCopy, }, ref) {
+import { theme } from '../theme.js';
+import { useUniqueId } from '../utils/id.js';
+import { Box } from '../Box/Box.js';
+import { Icon } from '../Icon/Icon.js';
+import { Text } from '../Text/Text.js';
+import { RadioElement } from './RadioElement.js';
+import { ITEM_GAP } from './constants.js';
+
+const RadioItem = forwardRef(
+  function RadioItem2({
+    name,
+    visual,
+    icon,
+    iconPosition = "center",
+    label,
+    value,
+    checked,
+    onChange,
+    onBlur,
+    displayType,
+    isError,
+    fallbackStyle,
+    bodyCopy
+  }, ref) {
     const id = useUniqueId();
-    return (React.createElement(Wrapper, { htmlFor: id, checked: checked, displayType: displayType, "data-testid": value, isError: isError, fallbackStyle: fallbackStyle },
-        visual && !icon && (React.createElement(VisualWrapper, null,
-            React.createElement(Visual, { visualUrl: visual }))),
-        !visual && icon && (React.createElement(IconWrapper, { iconPosition: iconPosition },
-            React.createElement(Icon, { render: icon, size: 24 }))),
-        React.createElement(Box, { flex: true, alignItems: "center" },
-            React.createElement(RadioElement, { ref: ref, name: name, id: id, value: value, checked: checked, onChange: onChange, onBlur: onBlur, isError: isError, mr: "8px" }),
-            React.createElement(Box, null,
-                React.createElement(RadioText, { isError: isError }, label),
-                bodyCopy && (React.createElement(Box, null,
-                    React.createElement(Text, { typo: "caption" }, bodyCopy)))))));
-});
-const VisualWrapper = styled.div `
+    return /* @__PURE__ */ jsxs(
+      Wrapper,
+      {
+        htmlFor: id,
+        checked,
+        displayType,
+        "data-testid": value,
+        isError,
+        fallbackStyle,
+        children: [
+          visual && !icon && /* @__PURE__ */ jsx(VisualWrapper, { children: /* @__PURE__ */ jsx(Visual, { visualUrl: visual }) }),
+          !visual && icon && /* @__PURE__ */ jsx(IconWrapper, { iconPosition, children: /* @__PURE__ */ jsx(Icon, { render: icon, size: 24 }) }),
+          /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(
+              RadioElement,
+              {
+                ref,
+                name,
+                id,
+                value,
+                checked,
+                onChange,
+                onBlur,
+                isError,
+                mr: "8px"
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(RadioText, { isError, children: label }),
+              bodyCopy && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { typo: "caption", children: bodyCopy }) })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+const VisualWrapper = styled.div`
   width: 100%;
   max-width: 120px;
   margin: 0 auto 8px;
 `;
-const IconWrapper = styled.div `
+const IconWrapper = styled.div`
   display: flex;
   padding-bottom: 12px;
 
-  ${({ iconPosition }) => iconPosition === 'center' &&
-    css `
+  ${({ iconPosition }) => iconPosition === "center" && css`
       justify-content: center;
     `}
 
-  ${({ iconPosition }) => iconPosition === 'start' &&
-    css `
+  ${({ iconPosition }) => iconPosition === "start" && css`
       justify-content: flex-start;
     `}
 `;
-const Visual = styled.div `
+const Visual = styled.div`
   width: 100%;
   padding-top: 100%;
   background-image: url('${(p) => p.visualUrl}');
@@ -48,32 +88,23 @@ const Visual = styled.div `
   background-repeat: no-repeat;
   background-position: center;
 `;
-const Wrapper = styled.label `
+const Wrapper = styled.label`
   display: flex;
   flex-direction: column;
   cursor: pointer;
 
-  ${({ displayType, checked, isError, fallbackStyle }) => css `
-    ${(displayType === 'horizontal-card' || displayType === 'vertical-card') &&
-    css `
+  ${({ displayType, checked, isError, fallbackStyle }) => css`
+    ${(displayType === "horizontal-card" || displayType === "vertical-card") && css`
       border-radius: 12px;
-      background-color: ${fallbackStyle
-        ? theme.colors.cream
-        : theme.colors.custard};
-      padding: ${checked ? '10px' : '12px'};
-      border: ${checked &&
-        (isError
-            ? `2px solid ${theme.colors.strawberry}`
-            : `2px solid ${theme.colors.liquorice}`)};
+      background-color: ${fallbackStyle ? theme.colors.cream : theme.colors.custard};
+      padding: ${checked ? "10px" : "12px"};
+      border: ${checked && (isError ? `2px solid ${theme.colors.strawberry}` : `2px solid ${theme.colors.liquorice}`)};
 
       &:hover {
-        background-color: ${fallbackStyle
-        ? theme.colors.coconut
-        : theme.colors.oatmeal};
+        background-color: ${fallbackStyle ? theme.colors.coconut : theme.colors.oatmeal};
       }
     `}
-    ${displayType === 'horizontal-card' &&
-    css `
+    ${displayType === "horizontal-card" && css`
       width: 100%;
       justify-content: center;
 
@@ -87,11 +118,12 @@ const Wrapper = styled.label `
     `}
   `}
 `;
-const RadioText = styled.span `
+const RadioText = styled.span`
   line-height: 16px;
   font-size: 16px;
   font-weight: ${theme.font.weight.medium};
   color: ${({ isError }) => isError ? theme.colors.strawberry : theme.colors.liquorice};
   margin-top: 4px;
 `;
-//# sourceMappingURL=RadioItem.js.map
+
+export { RadioItem };

package/dist/RadioGroup/constants.js

@@ -1,2 +1,3 @@
-export const ITEM_GAP = 12;
-//# sourceMappingURL=constants.js.map
+const ITEM_GAP = 12;
+
+export { ITEM_GAP };