@majoo-ui/react 2.0.0 → 2.1.0-rc.0

package/components/dropdownMenu/DropdownMenu.esm.js

@@ -0,0 +1,281 @@
+import React__default, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { styled, keyframes } from '../../config/stitches.config.esm.js';
+import { Button } from '../button/Button.esm.js';
+import { useThemeProvider } from '@majoo-ui/helpers';
+import { jsx } from 'react/jsx-runtime';
+
+const Context = /*#__PURE__*/React__default.createContext();
+const slideUpAndFade = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateY(2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateY(0)'
+  }
+});
+const slideRightAndFade = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateX(-2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateX(0)'
+  }
+});
+const slideDownAndFade = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateY(-2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateY(0)'
+  }
+});
+const slideLeftAndFade = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateX(2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateX(0)'
+  }
+});
+const StyledContent = styled(DropdownMenuPrimitive.Content, {
+  width: 143,
+  maxWidth: 243,
+  backgroundColor: '$bgWhite',
+  borderRadius: 4,
+  padding: 8,
+  zIndex: '$sticky',
+  boxShadow: '0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)',
+  '@media (prefers-reduced-motion: no-preference)': {
+    animationDuration: '400ms',
+    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    animationFillMode: 'forwards',
+    willChange: 'transform, opacity',
+    '&[data-state="open"]': {
+      '&[data-side="top"]': {
+        animationName: slideDownAndFade
+      },
+      '&[data-side="right"]': {
+        animationName: slideLeftAndFade
+      },
+      '&[data-side="bottom"]': {
+        animationName: slideUpAndFade
+      },
+      '&[data-side="left"]': {
+        animationName: slideRightAndFade
+      }
+    }
+  }
+});
+const itemStyles = {
+  all: 'unset',
+  fontSize: 13,
+  lineHeight: 1,
+  borderRadius: 3,
+  display: 'flex',
+  alignItems: 'center',
+  height: 'calc(36px - 8px)',
+  padding: '8px 0',
+  position: 'relative',
+  userSelect: 'none',
+  '&[data-disabled]': {
+    color: '$gray400',
+    pointerEvents: 'none'
+  },
+  '&:hover': {
+    cursor: 'pointer'
+  },
+  '&:active': {
+    backgroundColor: '$gray150'
+  },
+  '&:focus': {
+    backgroundColor: '$gray100'
+  }
+};
+const StyledItem = styled(DropdownMenuPrimitive.Item, {
+  ...itemStyles
+});
+StyledItem.propTypes = {
+  asChild: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onSelect: PropTypes.func
+};
+const StyledCheckboxItem = styled(DropdownMenuPrimitive.CheckboxItem, {
+  ...itemStyles
+});
+const StyledRadioItem = styled(DropdownMenuPrimitive.RadioItem, {
+  ...itemStyles
+});
+const StyledLabel = styled(DropdownMenuPrimitive.Label, {
+  padding: '8px 0',
+  fontSize: 12,
+  lineHeight: '25px',
+  color: '$gray700'
+});
+const StyledSeparator = styled(DropdownMenuPrimitive.Separator, {
+  height: 1,
+  backgroundColor: '$gray150',
+  margin: 5
+});
+const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
+  position: 'absolute',
+  left: 0,
+  width: 25,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+const StyledArrow = styled(DropdownMenuPrimitive.Arrow, {
+  fill: 'white'
+});
+const DropdownMenuContext = ({
+  side,
+  align,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx(DropdownMenuPrimitive.Root, {
+    ...props,
+    children: /*#__PURE__*/jsx(Context.Provider, {
+      value: {
+        side,
+        align
+      },
+      children: children
+    })
+  });
+};
+DropdownMenuContext.propTypes = {
+  side: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  align: PropTypes.oneOf(['start', 'center', 'end'])
+};
+const DropdownMenuContentContext = ({
+  theme,
+  ...props
+}) => {
+  const {
+    side,
+    align
+  } = React__default.useContext(Context);
+  const themeProvider = useThemeProvider(theme);
+  const ref = useCallback(node => {
+    const appElement = document.getElementById('app');
+    if (appElement) {
+      if (node !== null) {
+        appElement.classList.add('noscroll');
+      } else {
+        appElement.classList.remove('noscroll');
+      }
+    }
+  }, []);
+  return /*#__PURE__*/jsx(StyledContent, {
+    className: `dropdown-content ${themeProvider?.theme || ''}`,
+    side: side,
+    align: align,
+    ref: ref,
+    ...props,
+    children: props.children
+  });
+};
+DropdownMenuContentContext.propTypes = {
+  sideOffset: PropTypes.number,
+  alignOffset: PropTypes.number,
+  asChild: PropTypes.bool
+};
+const DropdownTrigger = /*#__PURE__*/React__default.forwardRef(({
+  children,
+  ...props
+}, ref) => {
+  const {
+    asChild,
+    ...rest
+  } = props;
+  return /*#__PURE__*/jsx(DropdownMenuPrimitive.Trigger, {
+    ...rest,
+    asChild: asChild,
+    ref: ref,
+    children: children && /*#__PURE__*/React__default.cloneElement(children, {
+      ...rest
+    })
+  });
+});
+DropdownTrigger.propTypes = {
+  asChild: PropTypes.bool
+};
+const RightSlot = styled('div', {
+  marginLeft: 'auto',
+  ':focus > &': {
+    color: 'white'
+  },
+  '[data-disabled] &': {
+    color: '$gray400'
+  }
+});
+const StyledDropdown = styled(Button, {
+  padding: '6px 12px',
+  '&:disabled': {
+    '& + div': {
+      display: 'none !important'
+    }
+  }
+});
+const ButtonDropdown = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    ...rest
+  } = props;
+  return /*#__PURE__*/jsx(StyledDropdown, {
+    ref: ref,
+    css: rest.css,
+    ...rest,
+    children: rest.children
+  });
+});
+ButtonDropdown.propTypes = {
+  children: PropTypes.node.isRequired,
+  css: PropTypes.object,
+  rightIcon: PropTypes.node
+};
+ButtonDropdown.defaultProps = {
+  css: {},
+  rightIcon: undefined
+};
+ButtonDropdown.displayName = 'ButtonDropdown';
+RightSlot.displayName = 'RightSlot';
+
+// Exports
+const DropdownMenu = DropdownMenuContext;
+const DropdownMenuTrigger = DropdownTrigger;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuContent = DropdownMenuContentContext;
+const DropdownMenuItem = StyledItem;
+const DropdownMenuCheckboxItem = StyledCheckboxItem;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuRadioItem = StyledRadioItem;
+const DropdownMenuItemIndicator = StyledItemIndicator;
+// export const DropdownMenuTriggerItem = StyledTriggerItem;
+const DropdownMenuLabel = StyledLabel;
+const DropdownMenuSeparator = StyledSeparator;
+const DropdownMenuArrow = StyledArrow;
+DropdownMenu.displayName = 'DropdownMenu';
+DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+DropdownMenuItem.displayName = 'DropdownMenuItem';
+DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';
+DropdownMenuRadioGroup.displayName = 'DropdownMenuRadioGroup';
+DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';
+DropdownMenuItemIndicator.displayName = 'DropdownMenuItemIndicator';
+// DropdownMenuTriggerItem.displayName = 'DropdownMenuTriggerItem';
+DropdownMenuLabel.displayName = 'DropdownMenuLabel';
+DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
+DropdownMenuArrow.displayName = 'DropdownMenuArrow';
+
+export { ButtonDropdown, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, RightSlot, StyledDropdown };

package/components/editableTable/EditableMobile.esm.js

@@ -0,0 +1,361 @@
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.map.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { useEffect, createElement } from 'react';
+import { ChevronUpOutline, ChevronDownOutline } from '@majoo-ui/icons';
+import { styled } from '../../config/stitches.config.esm.js';
+import Heading from '../heading/Heading.esm.js';
+import Box from '../../layout/box/Box.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import { Grid, GridItem } from '../../layout/grid/Grid.esm.js';
+import Collapalse from './transition.esm.js';
+import { TableHeaderCellContainer, TableHeadCellContent } from '../table/Table.esm.js';
+import { useTranslation } from 'react-i18next';
+
+const TableContainer = styled('div', {
+  display: 'block',
+  flexDirection: 'column',
+  maxWidth: '100%',
+  position: 'relative',
+  height: '100%'
+});
+const TableContent = styled('table', {
+  width: '100%',
+  borderSpacing: 0,
+  borderCollapse: 'collapse'
+});
+const TableHead = styled('thead', {
+  position: 'sticky',
+  top: 0,
+  backgroundColor: '$gray50',
+  boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
+  zIndex: 10
+});
+const TableHeadRow = styled('tr', {
+  borderBottom: '1pt solid $bgBorder'
+});
+const TableHeadCell = styled('th', {
+  height: '41px',
+  fontSize: '$header-table',
+  fontWeight: 600,
+  color: '$textSecondary',
+  textAlign: 'left',
+  paddingLeft: 8
+});
+const TableBody = styled('tbody', {});
+const TableRow = styled('tr', {
+  '&:hover': {
+    backgroundColor: '$bgGray'
+  }
+});
+const TableRowCollapse = styled('tr', {
+  borderBottom: '1pt solid $bgBorder',
+  '&:hover': {
+    backgroundColor: '$bgGray'
+  }
+});
+const TableCell = styled('td', {
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  fontWeight: 400,
+  color: '$textPrimary',
+  position: 'relative',
+  paddingLeft: 8,
+  '&:last-child': {
+    paddingRight: 8
+  }
+});
+const TableFoot = styled('tfoot', {
+  position: 'sticky',
+  bottom: 0,
+  backgroundColor: '$bgWhite'
+});
+const TableFootRow = styled('tr');
+const TableFootCell = styled('td', {});
+const TableCellCollapse = styled('td', {
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  fontWeight: 400,
+  color: '$textPrimary',
+  position: 'relative',
+  '&:not(:last-child)': {
+    paddingRight: 16
+  }
+});
+const Required = styled('span', {
+  marginLeft: 4,
+  color: '$textRed !important'
+});
+function EditableTableMobile(props) {
+  var _a, _b;
+  const {
+    rowVirtualizer,
+    tableContainerRef,
+    instance,
+    showCheckbox,
+    customRows,
+    onExpand,
+    hiddenColumns,
+    customEmptyDataProps,
+    virtualized
+  } = props;
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    state,
+    toggleAllRowsExpanded,
+    setHiddenColumns
+  } = instance;
+  const {
+    t
+  } = useTranslation('MajooUI/table');
+  useEffect(() => {
+    if (hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.length) {
+      setHiddenColumns(hiddenColumns);
+    }
+  }, [hiddenColumns, setHiddenColumns]);
+  const getCustomRows = (row, renderRow) => {
+    var _a, _b;
+    let customStyle = {};
+    let CustomRow;
+    let showInMobile = false;
+    if (customRows && customRows(row).length) {
+      for (let i = 0; i < customRows(row).length; i++) {
+        if ((_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.showInMobile) {
+          showInMobile = true;
+        }
+        if (customRows(row)[i].predicate) {
+          customStyle = (_b = customRows(row)[i]) === null || _b === void 0 ? void 0 : _b.css;
+          CustomRow = () => {
+            var _a;
+            return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values, renderRow);
+          };
+        }
+      }
+    }
+    return {
+      CustomRow,
+      customStyle,
+      showInMobile
+    };
+  };
+  const renderTableRow = (row, customStyle) => {
+    var _a;
+    return jsxs(Fragment, {
+      children: [jsx(TableRow, Object.assign({
+        css: customStyle
+      }, row.getRowProps(), {
+        children: row.cells.map((cell, index) => {
+          var _a, _b;
+          const isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
+          const isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
+          return (isMobileHeader || isSelector) && (/*#__PURE__*/createElement(TableCell, Object.assign({}, cell.getCellProps({
+            style: {
+              minWidth: cell.column.minWidth,
+              width: isSelector ? 10 : cell.column.width,
+              maxWidth: isSelector ? 10 : cell.column.maxWidth
+            }
+          }), {
+            key: `cell-body-${index}`
+          }), jsxs(Flex, {
+            align: "center",
+            justify: "between",
+            css: {
+              cursor: 'pointer',
+              minHeight: 40
+            },
+            children: [jsx(Box, {
+              children: cell.render('Cell')
+            }), !isSelector && jsx(Flex, {
+              justify: "center",
+              align: "center",
+              onClick: () => {
+                var _a;
+                if (!((_a = Object.keys(state.expanded)) === null || _a === void 0 ? void 0 : _a.includes(row.id))) {
+                  toggleAllRowsExpanded(false);
+                }
+                row.toggleRowExpanded(!row.isExpanded);
+                onExpand === null || onExpand === void 0 ? void 0 : onExpand(!row.isExpanded);
+              },
+              children: row.isExpanded ? jsx(ChevronUpOutline, {}) : jsx(ChevronDownOutline, {})
+            })]
+          })));
+        })
+      })), jsxs(TableRowCollapse, {
+        css: {
+          backgroundColor: '$gray50'
+        },
+        children: [showCheckbox && jsx(TableCell, {}), jsx(TableCellCollapse, {
+          children: jsx(Collapalse, {
+            isOpen: row.isExpanded,
+            children: jsx(Flex, {
+              direction: "column",
+              css: {
+                borderTop: '1pt solid $bgBorder'
+              },
+              children: row.cells.filter(cell => {
+                var _a, _b, _c, _d;
+                return typeof ((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.hidden) === 'boolean' ? !((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) : !((_d = (_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) === null || _d === void 0 ? void 0 : _d.call(_c, cell));
+              }).map((cell, index) => {
+                var _a, _b, _c, _d;
+                const headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
+                const isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
+                const isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
+                return !isMobileHeader && !isSelector && jsx(Flex, {
+                  direction: "column",
+                  justify: "center",
+                  css: {
+                    borderBottom: '1pt solid $bgBorder',
+                    padding: '10px 12px',
+                    minHeight: 52
+                  },
+                  children: jsxs(Grid, {
+                    columns: 6,
+                    flow: "row",
+                    css: {
+                      gridRowGap: '$spacing-04',
+                      gridColumnGap: '$spacing-04',
+                      alignItems: 'center'
+                    },
+                    children: [jsx(GridItem, {
+                      colSpan: 3,
+                      children: jsx(Heading, {
+                        heading: "headerTable",
+                        color: "secondary",
+                        children: typeof headerRender === 'string' ? jsxs(Fragment, {
+                          children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.isRequired) ? jsx(Required, {
+                            children: "*"
+                          }) : '']
+                        }) : headerRender
+                      })
+                    }), jsx(GridItem, {
+                      colSpan: 3,
+                      children: jsx(Flex, {
+                        justify: "end",
+                        children: cell.render('Cell')
+                      })
+                    })]
+                  })
+                }, `cell-collapse-${index}`);
+              })
+            })
+          })
+        })]
+      }, 'row-collapse-' + ((_a = row.getRowProps()) === null || _a === void 0 ? void 0 : _a.key))]
+    });
+  };
+  const {
+    virtualItems: virtualRows,
+    totalSize
+  } = rowVirtualizer;
+  const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _a === void 0 ? void 0 : _a.start) || 0 : 0;
+  const paddingBottom = virtualRows.length > 0 ? totalSize - (((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0) : 0;
+  const tableRowData = virtualized ? virtualRows : rows;
+  return jsx(TableContainer, {
+    ref: tableContainerRef,
+    css: props === null || props === void 0 ? void 0 : props.css,
+    children: jsxs(TableContent, Object.assign({}, getTableProps(), {
+      children: [jsx(TableHead, {
+        children: headerGroups.map((headerGroup, index) => {
+          const visibleHeaders = headerGroup.headers.filter(column => {
+            var _a;
+            return typeof (column === null || column === void 0 ? void 0 : column.hidden) === 'boolean' ? !(column === null || column === void 0 ? void 0 : column.hidden) : !((_a = column === null || column === void 0 ? void 0 : column.hidden) === null || _a === void 0 ? void 0 : _a.call(column, column));
+          });
+          return /*#__PURE__*/createElement(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+            key: `head-row-${index}`
+          }), visibleHeaders.map((column, index) => {
+            const isMobileHeader = column === null || column === void 0 ? void 0 : column.isMobileHeader;
+            const isSelector = (column === null || column === void 0 ? void 0 : column.id) === 'selection';
+            const headerRender = column.render('Header');
+            return (isMobileHeader || isSelector) && (/*#__PURE__*/createElement(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, column.sortable ? column.getSortByToggleProps({
+              title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
+            }) : {
+              onClick: column.onToggle
+            }, {
+              style: {
+                minWidth: column.minWidth,
+                width: isSelector ? 10 : column.width,
+                maxWidth: isSelector ? 10 : column.maxWidth
+              }
+            }]), {
+              key: `head-cell-${index}`
+            }), typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, {
+              isMobile: true,
+              isSortedDesc: column.isSortedDesc,
+              unsortable: !column.sortable,
+              isToggleable: !!column.onToggle,
+              isToggled: column.isToggled,
+              css: {
+                padding: 0
+              },
+              children: jsxs(TableHeadCellContent, {
+                heading: "headerTable",
+                children: [headerRender.toUpperCase(), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required, {
+                  children: "*"
+                }) : '']
+              })
+            }) : jsxs(Fragment, {
+              children: [headerRender, (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required, {
+                children: "*"
+              }) : '']
+            })));
+          }));
+        })
+      }), jsxs(TableBody, Object.assign({}, getTableBodyProps(), {
+        children: [virtualized && paddingTop > 0 && jsx("tr", {
+          children: jsx("td", {
+            style: {
+              height: `${paddingTop}px`
+            }
+          })
+        }), tableRowData === null || tableRowData === void 0 ? void 0 : tableRowData.map((dataRow, index) => {
+          const row = virtualized ? rows === null || rows === void 0 ? void 0 : rows[dataRow === null || dataRow === void 0 ? void 0 : dataRow.index] : dataRow;
+          prepareRow(row);
+          const {
+            customStyle
+          } = getCustomRows(row);
+          const {
+            CustomRow,
+            showInMobile
+          } = getCustomRows(row, () => renderTableRow(row, customStyle));
+          return jsx(React__default.Fragment, {
+            children: CustomRow && showInMobile ? jsx(CustomRow, {
+              style: customStyle
+            }) : renderTableRow(row, customStyle)
+          }, index);
+        }), virtualized && paddingBottom > 0 && jsx("tr", {
+          children: jsx("td", {
+            style: {
+              height: `${paddingBottom}px`
+            }
+          })
+        })]
+      })), rows.length < 1 && jsx(TableFoot, {
+        children: jsx(TableFootRow, {
+          children: jsx(TableFootCell, {
+            colSpan: "100%",
+            children: jsxs(Flex, {
+              align: "center",
+              justify: "center",
+              direction: "column",
+              gap: 3,
+              css: {
+                margin: '56px auto 100px'
+              },
+              children: [customEmptyDataProps.doodleImage, customEmptyDataProps.title, customEmptyDataProps.description]
+            })
+          })
+        })
+      })]
+    }))
+  });
+}
+
+export { EditableTableMobile as default };