@mrshmllw/smores-react 4.0.0 → 5.0.0

package/dist/Table/components/TableRow.js

@@ -1,71 +1,113 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React, { useState } from 'react';
-import { isReactElement } from '../../utils/isReactElement';
-import { isMappedReactElement } from '../helpers';
-import { RowActions } from './RowActions';
-import { StyledCell, StyledRow } from './commonComponents';
-export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, clickableRow, }) => {
-    const [expandedRows, setExpandedRows] = useState([]);
-    const toggleRowExpansion = (rowIndex) => {
-        setExpandedRows((prevState) => prevState.includes(rowIndex)
-            ? prevState.filter((index) => index !== rowIndex)
-            : [...prevState, rowIndex]);
-    };
-    const subRowsData = subRows?.rows(rowData);
-    const subTableData = subTable?.table(rowData);
-    const showSubRowsOnExpand = subRows?.showOnExpand && subRows?.showOnExpand(rowData);
-    const showSubTableOnExpand = subTable?.showOnExpand && subTable?.showOnExpand(rowData);
-    const showActionsCell = expandable || rowActions;
-    const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(StyledRow, { stripedColor: stripedColor, rowColor: rowColor, rowBorderColor: rowBorderColor, clickableRow: !!clickableRow, onClick: () => clickableRow && clickableRow(rowData), tabIndex: clickableRow && 0 },
-            columns.map((column, columnIndex) => {
-                let cellContent;
-                if (column.cell) {
-                    cellContent = column.cell(rowData, rowIndex, column, rowIndex);
-                }
-                return (React.createElement(StyledCell, { key: columnIndex, rowPadding: rowPadding, columnPadding: columnPadding, minWidth: column.minWidth, maxWidth: column.maxWidth, noWrapContent: column.noWrapContent, truncateContent: column.truncateContent, hideOverflow: column.hideOverflow }, cellContent));
-            }),
-            (showActionsCell || showActions) && (React.createElement(RowActions, { expandable: expandable, rowActions: rowActions, rowData: rowData, isExpanded: expandedRows.includes(rowIndex), toggleExpansion: () => toggleRowExpansion(rowIndex) }))),
-        expandedRows.includes(rowIndex) && (React.createElement(React.Fragment, null,
-            subRows &&
-                subRowsData &&
-                showSubRowsOnExpand &&
-                isReactElement(subRowsData) &&
-                React.cloneElement(subRowsData, {
-                    rowPadding: rowPadding,
-                    columnPadding: columnPadding,
-                }),
-            subRows &&
-                subRowsData &&
-                showSubRowsOnExpand &&
-                isMappedReactElement(subRowsData) &&
-                subRowsData.map((row) => React.cloneElement(row, {
-                    rowPadding: rowPadding,
-                    showActions: showActionsCell,
-                })),
-            subTable && showSubTableOnExpand && subTableData && (React.createElement(StyledCell, { colSpan: expandSubProp }, React.cloneElement(subTableData, {
-                rowPadding: rowPadding,
-                columnPadding: columnPadding,
-            }))))),
-        subRows &&
-            subRowsData &&
-            !showSubRowsOnExpand &&
-            isReactElement(subRowsData) &&
-            React.cloneElement(subRowsData, {
-                rowPadding: rowPadding,
-                columnPadding: columnPadding,
-            }),
-        subRows &&
-            subRowsData &&
-            !showSubRowsOnExpand &&
-            isMappedReactElement(subRowsData) &&
-            subRowsData.map((row) => React.cloneElement(row, {
-                rowPadding: rowPadding,
-                columnPadding: columnPadding,
-            })),
-        subTable && subTableData && !showSubTableOnExpand && (React.createElement(StyledCell, { colSpan: expandSubProp }, React.cloneElement(subTableData, {
-            rowPadding: rowPadding,
-            columnPadding: columnPadding,
-        })))));
+import { isReactElement } from '../../utils/isReactElement.js';
+import { isMappedReactElement } from '../helpers.js';
+import { RowActions } from './RowActions.js';
+import { StyledRow, StyledCell } from './commonComponents.js';
+
+const TableRow = ({
+  rowData,
+  rowIndex,
+  columns,
+  subRows,
+  subTable,
+  stripedColor,
+  rowActions,
+  rowColor,
+  rowBorderColor,
+  rowPadding,
+  columnPadding,
+  showActions,
+  expandable,
+  clickableRow
+}) => {
+  const [expandedRows, setExpandedRows] = useState([]);
+  const toggleRowExpansion = (rowIndex2) => {
+    setExpandedRows(
+      (prevState) => prevState.includes(rowIndex2) ? prevState.filter((index) => index !== rowIndex2) : [...prevState, rowIndex2]
+    );
+  };
+  const subRowsData = subRows?.rows(rowData);
+  const subTableData = subTable?.table(rowData);
+  const showSubRowsOnExpand = subRows?.showOnExpand && subRows?.showOnExpand(rowData);
+  const showSubTableOnExpand = subTable?.showOnExpand && subTable?.showOnExpand(rowData);
+  const showActionsCell = expandable || rowActions;
+  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      StyledRow,
+      {
+        stripedColor,
+        rowColor,
+        rowBorderColor,
+        clickableRow: !!clickableRow,
+        onClick: () => clickableRow && clickableRow(rowData),
+        tabIndex: clickableRow && 0,
+        children: [
+          columns.map((column, columnIndex) => {
+            let cellContent;
+            if (column.cell) {
+              cellContent = column.cell(rowData, rowIndex, column, rowIndex);
+            }
+            return /* @__PURE__ */ jsx(
+              StyledCell,
+              {
+                rowPadding,
+                columnPadding,
+                minWidth: column.minWidth,
+                maxWidth: column.maxWidth,
+                noWrapContent: column.noWrapContent,
+                truncateContent: column.truncateContent,
+                hideOverflow: column.hideOverflow,
+                children: cellContent
+              },
+              columnIndex
+            );
+          }),
+          (showActionsCell || showActions) && /* @__PURE__ */ jsx(
+            RowActions,
+            {
+              expandable,
+              rowActions,
+              rowData,
+              isExpanded: expandedRows.includes(rowIndex),
+              toggleExpansion: () => toggleRowExpansion(rowIndex)
+            }
+          )
+        ]
+      }
+    ),
+    expandedRows.includes(rowIndex) && /* @__PURE__ */ jsxs(Fragment, { children: [
+      subRows && subRowsData && showSubRowsOnExpand && isReactElement(subRowsData) && React.cloneElement(subRowsData, {
+        rowPadding,
+        columnPadding
+      }),
+      subRows && subRowsData && showSubRowsOnExpand && isMappedReactElement(subRowsData) && subRowsData.map(
+        (row) => React.cloneElement(row, {
+          rowPadding,
+          showActions: showActionsCell
+        })
+      ),
+      subTable && showSubTableOnExpand && subTableData && /* @__PURE__ */ jsx(StyledCell, { colSpan: expandSubProp, children: React.cloneElement(subTableData, {
+        rowPadding,
+        columnPadding
+      }) })
+    ] }),
+    subRows && subRowsData && !showSubRowsOnExpand && isReactElement(subRowsData) && React.cloneElement(subRowsData, {
+      rowPadding,
+      columnPadding
+    }),
+    subRows && subRowsData && !showSubRowsOnExpand && isMappedReactElement(subRowsData) && subRowsData.map(
+      (row) => React.cloneElement(row, {
+        rowPadding,
+        columnPadding
+      })
+    ),
+    subTable && subTableData && !showSubTableOnExpand && /* @__PURE__ */ jsx(StyledCell, { colSpan: expandSubProp, children: React.cloneElement(subTableData, {
+      rowPadding,
+      columnPadding
+    }) })
+  ] });
 };
-//# sourceMappingURL=TableRow.js.map
+
+export { TableRow };

package/dist/Table/components/commonComponents.js

@@ -1,9 +1,10 @@
 import { darken } from 'polished';
 import styled, { css } from 'styled-components';
-import { fontStyleMapping } from '../../Text/fontMapping';
-import { theme } from '../../theme';
-import { focusOutlineStyle } from '../../utils/focusOutline';
-export const StyledTable = styled.table `
+import { fontStyleMapping } from '../../Text/fontMapping.js';
+import { theme } from '../../theme.js';
+import { focusOutlineStyle } from '../../utils/focusOutline.js';
+
+const StyledTable = styled.table`
   width: 100%;
   height: 100%;
   border-collapse: collapse;
@@ -11,127 +12,111 @@ export const StyledTable = styled.table `
   background: ${theme.colors.coconut};
   border-spacing: 30px;
 `;
-export const StyledHeaderCell = styled.th `
+const StyledHeaderCell = styled.th`
   background: ${theme.colors.coconut};
-  position: ${({ fixedHeader }) => (fixedHeader ? 'sticky' : 'auto')};
+  position: ${({ fixedHeader }) => fixedHeader ? "sticky" : "auto"};
   top: 0;
   z-index: 2;
   text-align: left;
   vertical-align: bottom;
-  ${fontStyleMapping['label']};
+  ${fontStyleMapping["label"]};
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
 
-  ${({ headerColor }) => headerColor &&
-    css `
+  ${({ headerColor }) => headerColor && css`
       background: ${theme.colors[headerColor]};
     `}
 
-  ${({ headerHeight }) => headerHeight &&
-    css `
+  ${({ headerHeight }) => headerHeight && css`
       height: ${headerHeight};
     `}
 
-  ${({ maxWidth }) => maxWidth &&
-    css `
+  ${({ maxWidth }) => maxWidth && css`
       max-width: ${maxWidth};
     `}
 
-  ${({ minWidth }) => minWidth &&
-    css `
+  ${({ minWidth }) => minWidth && css`
       min-width: ${minWidth};
     `}
     
-  ${({ columnPadding }) => columnPadding &&
-    css `
+  ${({ columnPadding }) => columnPadding && css`
       padding-left: ${columnPadding};
       padding-right: ${columnPadding};
     `};
 `;
-export const StyledCell = styled.td `
+const StyledCell = styled.td`
   vertical-align: middle;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
 
-  ${({ hideOverflow }) => hideOverflow &&
-    css `
+  ${({ hideOverflow }) => hideOverflow && css`
       overflow: hidden;
     `};
 
-  ${({ noWrapContent }) => noWrapContent &&
-    css `
+  ${({ noWrapContent }) => noWrapContent && css`
       white-space: nowrap;
     `};
 
-  ${({ truncateContent }) => truncateContent &&
-    css `
+  ${({ truncateContent }) => truncateContent && css`
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     `};
 
-  ${({ stickyCell }) => stickyCell &&
-    css `
+  ${({ stickyCell }) => stickyCell && css`
       position: sticky;
       right: 0;
     `};
 
-  ${({ rowPadding }) => rowPadding &&
-    css `
+  ${({ rowPadding }) => rowPadding && css`
       padding-top: ${rowPadding};
       padding-bottom: ${rowPadding};
     `};
 
-  ${({ columnPadding }) => columnPadding &&
-    css `
+  ${({ columnPadding }) => columnPadding && css`
       padding-left: ${columnPadding};
       padding-right: ${columnPadding};
     `};
 
-  ${({ maxWidth }) => maxWidth &&
-    css `
+  ${({ maxWidth }) => maxWidth && css`
       max-width: ${maxWidth};
     `}
 
-  ${({ rowActionsBgColor }) => rowActionsBgColor &&
-    css `
+  ${({ rowActionsBgColor }) => rowActionsBgColor && css`
       background: ${theme.colors[rowActionsBgColor]};
     `}
 `;
-export const StyledRow = styled.tr `
+const StyledRow = styled.tr`
   background: ${theme.colors.custard};
 
-  ${({ rowBorderColor }) => rowBorderColor &&
-    css `
+  ${({ rowBorderColor }) => rowBorderColor && css`
       border-bottom: 1px solid ${theme.colors[rowBorderColor]};
     `}
 
-  ${({ rowColor }) => rowColor &&
-    css `
+  ${({ rowColor }) => rowColor && css`
       background: ${theme.colors[rowColor]};
     `}
 
-  ${({ stripedColor }) => stripedColor &&
-    css `
+  ${({ stripedColor }) => stripedColor && css`
       &:nth-child(even) {
         background: ${theme.colors[stripedColor]};
       }
     `}
 
-    ${({ clickableRow, rowColor }) => clickableRow &&
-    css `
+    ${({ clickableRow, rowColor }) => clickableRow && css`
       cursor: pointer;
       &:hover {
-        background: ${darken(0.1, theme.colors[rowColor ?? 'custard'])};
+        background: ${darken(0.1, theme.colors[rowColor ?? "custard"])};
       }
       &:focus-visible {
         ${focusOutlineStyle}
-        background: ${darken(0.1, theme.colors[rowColor ?? 'custard'])};
+        background: ${darken(0.1, theme.colors[rowColor ?? "custard"])};
       }
     `}
 `;
-//# sourceMappingURL=commonComponents.js.map
+
+export { StyledCell, StyledHeaderCell, StyledRow, StyledTable };

package/dist/Table/helpers.js

@@ -1,12 +1,16 @@
 import { isValidElement } from 'react';
-export const isMappedReactElement = (obj) => {
-    if (!Array.isArray(obj))
-        return false;
-    if (!obj[0])
-        return false;
-    if (!isValidElement(obj[0]))
-        return false;
-    const allReactElements = obj.every((val, i, arr) => typeof val === typeof arr[0]);
-    return allReactElements;
+
+const isMappedReactElement = (obj) => {
+  if (!Array.isArray(obj))
+    return false;
+  if (!obj[0])
+    return false;
+  if (!isValidElement(obj[0]))
+    return false;
+  const allReactElements = obj.every(
+    (val, i, arr) => typeof val === typeof arr[0]
+  );
+  return allReactElements;
 };
-//# sourceMappingURL=helpers.js.map
+
+export { isMappedReactElement };

package/dist/Tag/Tag.js

@@ -1,11 +1,29 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import styled from 'styled-components';
-import { Text } from '../Text';
-import { theme } from '../theme';
-import { Box } from '../Box';
-export const Tag = ({ label, color, borderColor, bgColor, className, ...marginProps }) => (React.createElement(Wrapper, { bgColor: bgColor, className: className, borderColor: borderColor, ...marginProps, alignContent: "center", justifyContent: "center" },
-    React.createElement(TagText, { tag: "span", typo: "label", color: color }, label)));
-const Wrapper = styled(Box) `
+import { Text } from '../Text/Text.js';
+import { theme } from '../theme.js';
+import { Box } from '../Box/Box.js';
+
+const Tag = ({
+  label,
+  color,
+  borderColor,
+  bgColor,
+  className,
+  ...marginProps
+}) => /* @__PURE__ */ jsx(
+  Wrapper,
+  {
+    bgColor,
+    className,
+    borderColor,
+    ...marginProps,
+    alignContent: "center",
+    justifyContent: "center",
+    children: /* @__PURE__ */ jsx(TagText, { tag: "span", typo: "label", color, children: label })
+  }
+);
+const Wrapper = styled(Box)`
   background-color: ${({ bgColor }) => bgColor && theme.colors[bgColor]};
   border: ${({ borderColor }) => borderColor && `1px solid ${theme.colors[borderColor]}`};
 
@@ -17,7 +35,7 @@ const Wrapper = styled(Box) `
   box-sizing: border-box;
   display: inline-flex;
 `;
-const TagText = styled(Text) `
+const TagText = styled(Text)`
   display: flex;
   align-items: center;
   font-size: 10px;
@@ -25,4 +43,5 @@ const TagText = styled(Text) `
   line-height: 12px;
   text-transform: uppercase;
 `;
-//# sourceMappingURL=Tag.js.map
+
+export { Tag };

package/dist/Text/Text.js

@@ -1,22 +1,50 @@
-import React, { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { theme } from '../theme';
-import { linkStyleOverride } from '../Link/Link';
-import { Box } from '../Box';
-import { fontStyleMapping } from './fontMapping';
-export const Text = forwardRef(({ children, typo = 'body-regular', className = '', tag = 'p', align = 'left', color = 'liquorice', cursor = 'inherit', title = '', ...props }, ref) => (React.createElement(Container, { as: tag, className: className, typo: typo, align: align, color: color, cursor: cursor, title: title, ...props, ref: ref }, children)));
-Text.displayName = 'Text';
+import { theme } from '../theme.js';
+import { linkStyleOverride } from '../Link/Link.js';
+import { Box } from '../Box/Box.js';
+import { fontStyleMapping } from './fontMapping.js';
+
+const Text = forwardRef(
+  ({
+    children,
+    typo = "body-regular",
+    className = "",
+    tag = "p",
+    align = "left",
+    color = "liquorice",
+    cursor = "inherit",
+    title = "",
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    Container,
+    {
+      as: tag,
+      className,
+      typo,
+      align,
+      color,
+      cursor,
+      title,
+      ...props,
+      ref,
+      children
+    }
+  )
+);
+Text.displayName = "Text";
 const isNewTypo = (value) => {
-    return Object.keys(fontStyleMapping).includes(value);
+  return Object.keys(fontStyleMapping).includes(value);
 };
-const Container = styled(Box)(({ align, color, cursor, typo }) => css `
+const Container = styled(Box)(
+  ({ align, color, cursor, typo }) => css`
     /** TYPOGRAPHY STYLES */
 
     ${isNewTypo(typo) && fontStyleMapping[typo]}
 
     /** DEPRECATED TYPOGRAPHY STYLES */
-    ${typo === 'header-large' &&
-    css `
+    ${typo === "header-large" && css`
       font-size: 24px;
       line-height: 31px;
       font-weight: 500;
@@ -27,8 +55,7 @@ const Container = styled(Box)(({ align, color, cursor, typo }) => css `
       }
     `}
 
-  ${typo === 'header-medium' &&
-    css `
+  ${typo === "header-medium" && css`
       font-size: 21px;
       line-height: 27px;
       font-weight: 500;
@@ -39,8 +66,7 @@ const Container = styled(Box)(({ align, color, cursor, typo }) => css `
       }
     `}
 
-  ${typo === 'header-small' &&
-    css `
+  ${typo === "header-small" && css`
       font-size: 18px;
       line-height: 23px;
       font-weight: 500;
@@ -51,8 +77,7 @@ const Container = styled(Box)(({ align, color, cursor, typo }) => css `
       }
     `}
 
-  ${typo === 'desc-heavy' &&
-    css `
+  ${typo === "desc-heavy" && css`
       font-size: 14px;
       line-height: 20px;
       font-weight: 700;
@@ -63,8 +88,7 @@ const Container = styled(Box)(({ align, color, cursor, typo }) => css `
       }
     `}
 
-  ${typo === 'desc-medium' &&
-    css `
+  ${typo === "desc-medium" && css`
       font-size: 14px;
       line-height: 20px;
       font-weight: 500;
@@ -75,8 +99,7 @@ const Container = styled(Box)(({ align, color, cursor, typo }) => css `
       }
     `}
 
-  ${typo === 'desc-light' &&
-    css `
+  ${typo === "desc-light" && css`
       font-size: 14px;
       line-height: 20px;
       font-weight: 400;
@@ -87,8 +110,7 @@ const Container = styled(Box)(({ align, color, cursor, typo }) => css `
       }
     `}
 
-  ${typo === 'desc-small' &&
-    css `
+  ${typo === "desc-small" && css`
       font-size: 12px;
       line-height: 16px;
       font-weight: 400;
@@ -99,8 +121,7 @@ const Container = styled(Box)(({ align, color, cursor, typo }) => css `
       }
     `}
 
-  ${typo === 'base' &&
-    css `
+  ${typo === "base" && css`
       font-size: 14px;
       line-height: 23px;
       font-weight: 400;
@@ -111,8 +132,7 @@ const Container = styled(Box)(({ align, color, cursor, typo }) => css `
       }
     `}
 
-  ${typo === 'base-small' &&
-    css `
+  ${typo === "base-small" && css`
       font-size: 12px;
       line-height: 20px;
       font-weight: 400;
@@ -123,8 +143,7 @@ const Container = styled(Box)(({ align, color, cursor, typo }) => css `
       }
     `}
 
-  ${typo === 'base-xsmall' &&
-    css `
+  ${typo === "base-xsmall" && css`
       font-size: 10px;
       line-height: 16px;
       font-weight: 400;
@@ -135,8 +154,7 @@ const Container = styled(Box)(({ align, color, cursor, typo }) => css `
       }
     `}
   
-  ${typo === 'label-large' &&
-    css `
+  ${typo === "label-large" && css`
       font-size: 12px;
       line-height: 100%;
       font-weight: 700;
@@ -148,5 +166,7 @@ const Container = styled(Box)(({ align, color, cursor, typo }) => css `
     cursor: ${cursor};
     color: ${theme.colors[color]};
     ${linkStyleOverride({ color: theme.colors[color] })}
-  `);
-//# sourceMappingURL=Text.js.map
+  `
+);
+
+export { Text };