@mrshmllw/smores-react 4.0.1 → 6.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.d.ts

@@ -1,10 +1,11 @@
 import React, { FocusEvent, ReactElement } from 'react';
+import { Icons } from 'Icon/iconsList';
 import { CommonFieldProps } from '../fields/commonFieldTypes';
 import { BaseValueType, DisplayType, IconPosition } from './types';
 export type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {
     options: Array<{
         visual?: string;
-        icon?: string;
+        icon?: Icons;
         iconPosition?: IconPosition;
         label: string;
         value: Value;
@@ -22,7 +23,7 @@ export type RadioGroupElement = {
 export declare const RadioGroup: <Value extends BaseValueType = BaseValueType>(p: {
     options: {
         visual?: string | undefined;
-        icon?: string | undefined;
+        icon?: "link" | "filter" | "key" | "id" | "property" | "security" | "aa-inverted" | "accidental-damage" | "account-breakdown" | "account-mlp" | "activity-clipboard" | "add-ons" | "address-mta" | "album-audio" | "alert-engine" | "apple-pay" | "approved-file" | "breakdown-alt" | "cancel-bw" | "car-mta" | "car-repairs" | "car-replacement" | "car-usage" | "chat-bubble" | "checkout-with-text" | "circle-tick" | "claim-line" | "clipboard-check" | "close-panel" | "confused-blue" | "contact-email" | "dashboard-high" | "direct-debit" | "doc-download" | "doc-upload" | "edit-contact" | "edit-outline" | "email-filled" | "falling-items" | "file-badge-2" | "file-cabinet" | "fraud-alert" | "freezer-food" | "google-play-badge" | "help-aboutus" | "help-buypolicy" | "help-center" | "help-idcheck" | "help-manage-policy" | "help-ncd" | "help-verification" | "home-excluded" | "house-tree" | "ios-store-badge" | "live-chat" | "live-chat2" | "log-out" | "manage-drivers" | "manage-policy" | "maximise-window" | "minus-circle" | "money-bag" | "money-heart" | "more-dots" | "new-window" | "no-excess" | "open-panel" | "out-of-home" | "padlock-outline" | "phone-filled" | "phone-outline" | "pin-code" | "plus-circle" | "policy-details" | "policy-doc" | "policy-docs" | "pound-bold" | "pound-filled-circle" | "pound-medium" | "pound-outline" | "pound-regular" | "question-help" | "refer-a-friend" | "reg-plate" | "renewal-line" | "repeat-charge" | "schedule-quote" | "send-message" | "shield-check" | "thumbs-up" | "tow-truck" | "trace-and-access" | "up-down" | "upload-documents" | "upload-email" | "wheel-flat" | "windscreen-repair" | "windscreen-replacement" | "aa" | "addons" | "alert" | "amex" | "arrow" | "at" | "axa" | "bank" | "basket" | "bicycle" | "boost" | "breakdown" | "briefcase" | "burger" | "calendar" | "camera" | "cancel" | "car" | "card" | "caret" | "charge" | "chat" | "checkout" | "city" | "claim" | "clipboard" | "clock" | "collpase" | "confused" | "copy" | "crop" | "cross" | "download" | "earth" | "edit" | "engine" | "europe" | "excluded" | "expand" | "facebook" | "fence" | "file" | "fire" | "flag" | "folder" | "fuel" | "globe" | "gpay" | "house" | "inbox" | "included" | "info" | "injury" | "instagram" | "intercom" | "intercom2" | "iphone" | "jewellery" | "laptop" | "leaks" | "lightbulb" | "linkedin" | "location" | "marshmallow" | "mastercard" | "maximise" | "medical" | "minimise" | "minus" | "mulsanne" | "notes" | "notification" | "onfido" | "other" | "padlock" | "people" | "person" | "photo" | "plus" | "policy" | "premfina" | "profile" | "prohibited" | "rac" | "ravelin" | "refund" | "renewal" | "return" | "search" | "settings" | "shield" | "shopping" | "sofa" | "stack" | "storm" | "stripe" | "subsidence" | "theft" | "tick" | "training" | "trash" | "twitter" | "upload" | "vandalism" | "village" | "visa" | "warning" | "watch" | "wave" | "wellbeing" | "windscreen" | undefined;
         iconPosition?: IconPosition | undefined;
         label: string;
         value: Value;

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.d.ts

@@ -1,9 +1,10 @@
 import React, { FocusEvent } from 'react';
+import { Icons } from 'Icon/iconsList';
 import { BaseValueType, DisplayType, IconPosition } from './types';
 type RadioItemProps = {
     name: string;
     visual?: string;
-    icon?: string;
+    icon?: Icons;
     iconPosition?: IconPosition;
     value: BaseValueType;
     label: string;