@majoo-ui/react 1.54.8 → 1.54.10

package/components/pageDialog/PageDialog.d.ts

@@ -403,24 +403,6 @@ interface PageDialogProps extends IDialog, DialogContentProps {
      */
     disabledCloseButton?: boolean;
 }
-/**
- * PageDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
- * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
- * @param size - default fullsize
- * @param layer - z-index default 1400
- * @param isMobile - force mobile/desktop view, default is responsive
- * @param onOpenAutoFocus - set default open behaviour
- *
- * @example
- * // Uncontrolled Example
- *  <PageDialog>
- *    <PageDialogTrigger>Button Trigger</PageDialogTrigger>
- *    <PageDialogTitle>Title</PageDialogTitle>
- *    <PageDialogContent>Content</PageDialogContent>
- *    <PageDialogFooter>Footer</PageDialogFooter>
- *  </PageDialog>
- * @component
- */
 export declare const PageDialog: {
     (props: PageDialogProps): JSX.Element;
     Trigger: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {

package/index.esm.js

@@ -36,7 +36,6 @@ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { EditableInput, ColorWrap, Saturation, Hue, Alpha, Swatch } from 'react-color/lib/components/common';
 import * as color from 'react-color/lib/helpers/color';
 import StepWizard$1 from 'react-step-wizard';
-import ScrollSpy from 'react-ui-scrollspy';
 import { useJsApiLoader, GoogleMap, StandaloneSearchBox } from '@react-google-maps/api';
 import request from 'superagent';
 import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianGrid, Tooltip as Tooltip$2, Line as Line$1 } from 'recharts';
@@ -45,6 +44,7 @@ import { Editor } from 'react-draft-wysiwyg';
 import { ContextMenuTrigger as ContextMenuTrigger$1, ContextMenu as ContextMenu$1, MenuItem } from 'react-contextmenu';
 import ReactSkeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
+import ScrollSpy from 'react-ui-scrollspy';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import imageCompressionComponent from 'browser-image-compression';
 import { useSticky } from 'react-table-sticky';
@@ -17114,7 +17114,6 @@ function InputDatePicker({
 }) {
   const [value, setValue] = useState(date || dateValue);
   const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
-  console.log(placement);
   useEffect(() => {
     setValue(date || dateValue);
   }, [date, dateValue]);
@@ -18045,8 +18044,6 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
 
           if (customRowsStyle && customRowsStyle(row.values).length) {
             for (let i = 0; i < customRowsStyle(row.values).length; i++) {
-              console.log(customRowsStyle(row.values)[i]);
-
               if (customRowsStyle(row.values)[i].predicate) {
                 customStyle = customRowsStyle(row.values)[i].css;
               }
@@ -19923,16 +19920,18 @@ const ContentWrapper = styled(Box, {
   variants: {
     wrapperSize: {
       md: {
-        padding: '40px 24px 0px',
+        padding: '40px 24px',
         marginLeft: 'auto',
         marginRight: 'auto',
-        maxWidth: 982
+        //982 + padding horizontal
+        maxWidth: 1030
       },
       lg: {
-        padding: '40px 24px 0px',
+        padding: '40px 24px',
         marginLeft: 'auto',
         marginRight: 'auto',
-        maxWidth: 1400
+        //1318 + padding horizontal
+        maxWidth: 1366
       }
     }
   }
@@ -19960,25 +19959,6 @@ const findNodeChild = (array, displayName) => {
 const FOOTER_HEIGHT = 64;
 const HEADER_HEIGHT = 56;
 const HEADER_HEIGHT_MOBILE = 76;
-/**
- * PageDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
- * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
- * @param size - default fullsize
- * @param layer - z-index default 1400
- * @param isMobile - force mobile/desktop view, default is responsive
- * @param onOpenAutoFocus - set default open behaviour
- *
- * @example
- * // Uncontrolled Example
- *  <PageDialog>
- *    <PageDialogTrigger>Button Trigger</PageDialogTrigger>
- *    <PageDialogTitle>Title</PageDialogTitle>
- *    <PageDialogContent>Content</PageDialogContent>
- *    <PageDialogFooter>Footer</PageDialogFooter>
- *  </PageDialog>
- * @component
- */
-
 const PageDialog = props => {
   var _a, _b;
 
@@ -20153,6 +20133,7 @@ const PageDialog = props => {
               }, void 0)
             }), void 0)]
           }), void 0), pageDialogChildren && jsx(Box, Object.assign({}, pageDialogChildren.props, {
+            ref: pageDialogChildren === null || pageDialogChildren === void 0 ? void 0 : pageDialogChildren.ref,
             children: jsx(ConditionalWrapper, Object.assign({
               condition: !isMobile && ((_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize),
               wrapper: child => {
@@ -23383,7 +23364,7 @@ const Upload = ({
         } else {
           imageCompressionComponent(blob, {
             maxSizeMB,
-            maxWidthOrHeight: 1920,
+            maxWidthOrHeight: 1000,
             maxIteration: 10,
             useWebWorker: true,
             alwaysKeepResolution: true
@@ -27844,7 +27825,7 @@ const Navigation = props => {
     const isComplete = props.isComplete[i - 1]; // eslint-disable-next-line no-lone-blocks
 
     {
-      var _data$title, _data, _data2, _data3, _data4, _data5, _data6, _data$title2, _data7, _data8, _data9, _data10, _data11;
+      var _data$title, _data2, _data3, _data4, _data5, _data6, _data7, _data$title2, _data8, _data9, _data10, _data11, _data12;
 
       !isMobile ? stepItems.push( /*#__PURE__*/React__default.createElement(StepperItem, {
         css: {
@@ -27855,7 +27836,9 @@ const Navigation = props => {
         align: "center",
         key: `step-${i}`,
         onClick: () => {
-          if (props.onNavClicked) props.onNavClicked(i);
+          var _data;
+
+          if (props.onNavClicked && !((_data = data[i - 1]) != null && _data.disabled)) props.onNavClicked(i);
 
           if (!forbidClickNav && isComplete && !isHide) {
             props.goToStep(i);
@@ -27889,9 +27872,9 @@ const Navigation = props => {
           lineNumber: 123,
           columnNumber: 17
         }
-      }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) == null ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) == null ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data2 = data[i - 1]).title) == null ? void 0 : _data$title.call(_data2), ((_data3 = data[i - 1]) == null ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
-        label: (_data3 = data[i - 1]) == null ? void 0 : _data3.tooltipsContents,
+        label: (_data4 = data[i - 1]) == null ? void 0 : _data4.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -27910,9 +27893,9 @@ const Navigation = props => {
           lineNumber: 128,
           columnNumber: 19
         }
-      })), ((_data4 = data[i - 1]) == null ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+      })), ((_data5 = data[i - 1]) == null ? void 0 : _data5.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
         css: {
-          marginLeft: (_data5 = data[i - 1]) != null && _data5.withTolltip ? 0 : '$spacing-03'
+          marginLeft: (_data6 = data[i - 1]) != null && _data6.withTolltip ? 0 : '$spacing-03'
         },
         align: "center",
         __self: undefined,
@@ -27971,7 +27954,7 @@ const Navigation = props => {
           height: 24,
           borderRadius: '$round',
           border: `4px solid ${isActive ? '$bgGreen' : '$bgInactive'}`,
-          backgroundColor: (_data6 = data[i - 1]) != null && _data6.disabled ? '$gray200' : '$white'
+          backgroundColor: (_data7 = data[i - 1]) != null && _data7.disabled ? '$gray200' : '$white'
         },
         __self: undefined,
         __source: {
@@ -27989,10 +27972,10 @@ const Navigation = props => {
           lineNumber: 173,
           columnNumber: 15
         }
-      }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) == null ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) == null ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data8 = data[i - 1]).title) == null ? void 0 : _data$title2.call(_data8) : ''), isActive && ((_data9 = data[i - 1]) == null ? void 0 : _data9.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
         withClick: true,
-        label: (_data9 = data[i - 1]) == null ? void 0 : _data9.tooltipsContents,
+        label: (_data10 = data[i - 1]) == null ? void 0 : _data10.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -28008,11 +27991,11 @@ const Navigation = props => {
           lineNumber: 178,
           columnNumber: 19
         }
-      })), isActive && ((_data10 = data[i - 1]) == null ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+      })), isActive && ((_data11 = data[i - 1]) == null ? void 0 : _data11.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
         align: "center",
         justify: "center",
         css: {
-          marginTop: (_data11 = data[i - 1]) != null && _data11.withTolltip ? 0 : '$spacing-03'
+          marginTop: (_data12 = data[i - 1]) != null && _data12.withTolltip ? 0 : '$spacing-03'
         },
         __self: undefined,
         __source: {
@@ -28397,12 +28380,20 @@ const Separator = styled('div', {
     }
   }
 });
+const StyledCard = styled(Card, {
+  height: 'fit-content',
+  width: 'fit-content',
+  maxWidth: 311,
+  padding: '24px !important',
+  boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.04)'
+});
 
 function Content({
   content,
   activeId,
   isCollapse,
-  isDialog
+  isDialog,
+  onNavClick
 }) {
   var _getDatasets;
 
@@ -28431,7 +28422,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 97,
+      lineNumber: 106,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Separator, {
@@ -28439,7 +28430,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 98,
+      lineNumber: 107,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(ListWrap, {
@@ -28449,7 +28440,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 99,
+      lineNumber: 108,
       columnNumber: 7
     }
   }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
@@ -28458,7 +28449,7 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 102,
+        lineNumber: 111,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28477,7 +28468,7 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 103,
+        lineNumber: 112,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(Title$1, {
@@ -28485,8 +28476,11 @@ function Content({
       active: (item == null ? void 0 : item.id) === activeId,
       href: `#${item == null ? void 0 : item.id}`,
       onClick: e => {
+        var _e$currentTarget, _e$currentTarget$href, _e$currentTarget$href2, _e$currentTarget2, _e$currentTarget2$hre, _e$currentTarget2$hre2;
+
         e.preventDefault();
-        const target = window.document.getElementById(e.currentTarget.href.split('#')[1]);
+        onNavClick == null ? void 0 : onNavClick(e == null ? void 0 : (_e$currentTarget = e.currentTarget) == null ? void 0 : (_e$currentTarget$href = _e$currentTarget.href) == null ? void 0 : (_e$currentTarget$href2 = _e$currentTarget$href.split('#')) == null ? void 0 : _e$currentTarget$href2[1]);
+        const target = window.document.getElementById(e == null ? void 0 : (_e$currentTarget2 = e.currentTarget) == null ? void 0 : (_e$currentTarget2$hre = _e$currentTarget2.href) == null ? void 0 : (_e$currentTarget2$hre2 = _e$currentTarget2$hre.split('#')) == null ? void 0 : _e$currentTarget2$hre2[1]);
 
         if (target) {
           var headerOffset = 20;
@@ -28509,7 +28503,7 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 117,
+        lineNumber: 126,
         columnNumber: 17
       }
     }, item == null ? void 0 : item.title), item == null ? void 0 : item.icon));
@@ -28521,7 +28515,8 @@ function TableOfContent({
   css,
   isMobile,
   isDialog,
-  activeId
+  activeId,
+  onNavClick
 }) {
   const [mobileCollapse, setMobileCollapse] = useState(false);
 
@@ -28538,7 +28533,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 159,
+      lineNumber: 169,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
@@ -28546,10 +28541,11 @@ function TableOfContent({
     isCollapse: mobileCollapse,
     isDialog: isDialog,
     content: content,
+    onNavClick: onNavClick,
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 160,
+      lineNumber: 170,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
@@ -28561,7 +28557,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 161,
+      lineNumber: 177,
       columnNumber: 7
     }
   }, mobileCollapse ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -28571,7 +28567,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 163,
+      lineNumber: 179,
       columnNumber: 11
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -28581,7 +28577,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 165,
+      lineNumber: 181,
       columnNumber: 11
     }
   }))) : /*#__PURE__*/React__default.createElement(DesktopContainer, {
@@ -28590,23 +28586,50 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 170,
+      lineNumber: 186,
       columnNumber: 5
     }
+  }, /*#__PURE__*/React__default.createElement(StyledCard, {
+    showBottomLine: false,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 187,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React__default.createElement(Content, {
     isCollapse: true,
     isDialog: isDialog,
     content: content,
+    onNavClick: onNavClick,
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 171,
-      columnNumber: 7
+      lineNumber: 188,
+      columnNumber: 9
     }
-  }));
+  })));
 }
 
-const Page = styled(ScrollSpy);
+const StyledPage = styled(Box, {
+  maxWidth: 982
+});
+const Page = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(StyledPage, {
+  ref: ref,
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$2,
+    lineNumber: 197,
+    columnNumber: 3
+  }
+}, /*#__PURE__*/React__default.createElement(ScrollSpy, _extends({}, props, {
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$2,
+    lineNumber: 198,
+    columnNumber: 5
+  }
+}))));
 Page.displayName = 'TableOfContent.Page';
 TableOfContent.Page = Page;
 TableOfContent.defaultProps = {
@@ -28632,7 +28655,12 @@ TableOfContent.propTypes = {
   /**
    The active ID to reference the active content on the mobile view obtained from onUpdateCallback.
    */
-  activeId: PropTypes.string
+  activeId: PropTypes.string,
+
+  /**
+   Event Callback on navigation click.
+   */
+  onNavClick: PropTypes.func
 };
 
 const TableOfContentPage = props => {

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -52,9 +52,9 @@
   var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
   var color__namespace = /*#__PURE__*/_interopNamespace(color);
   var StepWizard__default = /*#__PURE__*/_interopDefaultLegacy(StepWizard$1);
-  var ScrollSpy__default = /*#__PURE__*/_interopDefaultLegacy(ScrollSpy);
   var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
   var ReactSkeleton__default = /*#__PURE__*/_interopDefaultLegacy(ReactSkeleton);
+  var ScrollSpy__default = /*#__PURE__*/_interopDefaultLegacy(ScrollSpy);
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
   var imageCompressionComponent__default = /*#__PURE__*/_interopDefaultLegacy(imageCompressionComponent);
 
@@ -17388,7 +17388,6 @@
         defaultValue = _h[0],
         setDefaultValue = _h[1];
 
-    console.log(placement);
     React.useEffect(function () {
       setValue(date || dateValue);
     }, [date, dateValue]);
@@ -18333,8 +18332,6 @@
 
             if (customRowsStyle && customRowsStyle(row.values).length) {
               for (var i = 0; i < customRowsStyle(row.values).length; i++) {
-                console.log(customRowsStyle(row.values)[i]);
-
                 if (customRowsStyle(row.values)[i].predicate) {
                   customStyle = customRowsStyle(row.values)[i].css;
                 }
@@ -20283,16 +20280,18 @@
     variants: {
       wrapperSize: {
         md: {
-          padding: '40px 24px 0px',
+          padding: '40px 24px',
           marginLeft: 'auto',
           marginRight: 'auto',
-          maxWidth: 982
+          //982 + padding horizontal
+          maxWidth: 1030
         },
         lg: {
-          padding: '40px 24px 0px',
+          padding: '40px 24px',
           marginLeft: 'auto',
           marginRight: 'auto',
-          maxWidth: 1400
+          //1318 + padding horizontal
+          maxWidth: 1366
         }
       }
     }
@@ -20320,25 +20319,6 @@
   var FOOTER_HEIGHT = 64;
   var HEADER_HEIGHT = 56;
   var HEADER_HEIGHT_MOBILE = 76;
-  /**
-   * PageDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
-   * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
-   * @param size - default fullsize
-   * @param layer - z-index default 1400
-   * @param isMobile - force mobile/desktop view, default is responsive
-   * @param onOpenAutoFocus - set default open behaviour
-   *
-   * @example
-   * // Uncontrolled Example
-   *  <PageDialog>
-   *    <PageDialogTrigger>Button Trigger</PageDialogTrigger>
-   *    <PageDialogTitle>Title</PageDialogTitle>
-   *    <PageDialogContent>Content</PageDialogContent>
-   *    <PageDialogFooter>Footer</PageDialogFooter>
-   *  </PageDialog>
-   * @component
-   */
-
   var PageDialog = function PageDialog(props) {
     var _a, _b;
 
@@ -20515,6 +20495,7 @@
                 }, void 0)
               }), void 0)]
             }), void 0), pageDialogChildren && jsxRuntime.jsx(Box, __assign({}, pageDialogChildren.props, {
+              ref: pageDialogChildren === null || pageDialogChildren === void 0 ? void 0 : pageDialogChildren.ref,
               children: jsxRuntime.jsx(ConditionalWrapper, __assign({
                 condition: !isMobile && ((_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize),
                 wrapper: function (child) {
@@ -23779,7 +23760,7 @@
           } else {
             imageCompressionComponent__default["default"](blob, {
               maxSizeMB,
-              maxWidthOrHeight: 1920,
+              maxWidthOrHeight: 1000,
               maxIteration: 10,
               useWebWorker: true,
               alwaysKeepResolution: true
@@ -28253,7 +28234,7 @@
       const isComplete = props.isComplete[i - 1]; // eslint-disable-next-line no-lone-blocks
 
       {
-        var _data$title, _data, _data2, _data3, _data4, _data5, _data6, _data$title2, _data7, _data8, _data9, _data10, _data11;
+        var _data$title, _data2, _data3, _data4, _data5, _data6, _data7, _data$title2, _data8, _data9, _data10, _data11, _data12;
 
         !isMobile ? stepItems.push( /*#__PURE__*/React__default["default"].createElement(StepperItem, {
           css: {
@@ -28264,7 +28245,9 @@
           align: "center",
           key: `step-${i}`,
           onClick: () => {
-            if (props.onNavClicked) props.onNavClicked(i);
+            var _data;
+
+            if (props.onNavClicked && !((_data = data[i - 1]) != null && _data.disabled)) props.onNavClicked(i);
 
             if (!forbidClickNav && isComplete && !isHide) {
               props.goToStep(i);
@@ -28298,9 +28281,9 @@
             lineNumber: 123,
             columnNumber: 17
           }
-        }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) == null ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) == null ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data2 = data[i - 1]).title) == null ? void 0 : _data$title.call(_data2), ((_data3 = data[i - 1]) == null ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
-          label: (_data3 = data[i - 1]) == null ? void 0 : _data3.tooltipsContents,
+          label: (_data4 = data[i - 1]) == null ? void 0 : _data4.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -28319,9 +28302,9 @@
             lineNumber: 128,
             columnNumber: 19
           }
-        })), ((_data4 = data[i - 1]) == null ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        })), ((_data5 = data[i - 1]) == null ? void 0 : _data5.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           css: {
-            marginLeft: (_data5 = data[i - 1]) != null && _data5.withTolltip ? 0 : '$spacing-03'
+            marginLeft: (_data6 = data[i - 1]) != null && _data6.withTolltip ? 0 : '$spacing-03'
           },
           align: "center",
           __self: undefined,
@@ -28380,7 +28363,7 @@
             height: 24,
             borderRadius: '$round',
             border: `4px solid ${isActive ? '$bgGreen' : '$bgInactive'}`,
-            backgroundColor: (_data6 = data[i - 1]) != null && _data6.disabled ? '$gray200' : '$white'
+            backgroundColor: (_data7 = data[i - 1]) != null && _data7.disabled ? '$gray200' : '$white'
           },
           __self: undefined,
           __source: {
@@ -28398,10 +28381,10 @@
             lineNumber: 173,
             columnNumber: 15
           }
-        }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) == null ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) == null ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data8 = data[i - 1]).title) == null ? void 0 : _data$title2.call(_data8) : ''), isActive && ((_data9 = data[i - 1]) == null ? void 0 : _data9.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
           withClick: true,
-          label: (_data9 = data[i - 1]) == null ? void 0 : _data9.tooltipsContents,
+          label: (_data10 = data[i - 1]) == null ? void 0 : _data10.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -28417,11 +28400,11 @@
             lineNumber: 178,
             columnNumber: 19
           }
-        })), isActive && ((_data10 = data[i - 1]) == null ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        })), isActive && ((_data11 = data[i - 1]) == null ? void 0 : _data11.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           align: "center",
           justify: "center",
           css: {
-            marginTop: (_data11 = data[i - 1]) != null && _data11.withTolltip ? 0 : '$spacing-03'
+            marginTop: (_data12 = data[i - 1]) != null && _data12.withTolltip ? 0 : '$spacing-03'
           },
           __self: undefined,
           __source: {
@@ -28806,12 +28789,20 @@
       }
     }
   });
+  const StyledCard = styled(Card, {
+    height: 'fit-content',
+    width: 'fit-content',
+    maxWidth: 311,
+    padding: '24px !important',
+    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.04)'
+  });
 
   function Content({
     content,
     activeId,
     isCollapse,
-    isDialog
+    isDialog,
+    onNavClick
   }) {
     var _getDatasets;
 
@@ -28840,7 +28831,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 97,
+        lineNumber: 106,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -28848,7 +28839,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 98,
+        lineNumber: 107,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(ListWrap, {
@@ -28858,7 +28849,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 99,
+        lineNumber: 108,
         columnNumber: 7
       }
     }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
@@ -28867,7 +28858,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 102,
+          lineNumber: 111,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28886,7 +28877,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 103,
+          lineNumber: 112,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(Title$1, {
@@ -28894,8 +28885,11 @@
         active: (item == null ? void 0 : item.id) === activeId,
         href: `#${item == null ? void 0 : item.id}`,
         onClick: e => {
+          var _e$currentTarget, _e$currentTarget$href, _e$currentTarget$href2, _e$currentTarget2, _e$currentTarget2$hre, _e$currentTarget2$hre2;
+
           e.preventDefault();
-          const target = window.document.getElementById(e.currentTarget.href.split('#')[1]);
+          onNavClick == null ? void 0 : onNavClick(e == null ? void 0 : (_e$currentTarget = e.currentTarget) == null ? void 0 : (_e$currentTarget$href = _e$currentTarget.href) == null ? void 0 : (_e$currentTarget$href2 = _e$currentTarget$href.split('#')) == null ? void 0 : _e$currentTarget$href2[1]);
+          const target = window.document.getElementById(e == null ? void 0 : (_e$currentTarget2 = e.currentTarget) == null ? void 0 : (_e$currentTarget2$hre = _e$currentTarget2.href) == null ? void 0 : (_e$currentTarget2$hre2 = _e$currentTarget2$hre.split('#')) == null ? void 0 : _e$currentTarget2$hre2[1]);
 
           if (target) {
             var headerOffset = 20;
@@ -28918,7 +28912,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 117,
+          lineNumber: 126,
           columnNumber: 17
         }
       }, item == null ? void 0 : item.title), item == null ? void 0 : item.icon));
@@ -28930,7 +28924,8 @@
     css,
     isMobile,
     isDialog,
-    activeId
+    activeId,
+    onNavClick
   }) {
     const [mobileCollapse, setMobileCollapse] = React.useState(false);
 
@@ -28947,7 +28942,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 159,
+        lineNumber: 169,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
@@ -28955,10 +28950,11 @@
       isCollapse: mobileCollapse,
       isDialog: isDialog,
       content: content,
+      onNavClick: onNavClick,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 160,
+        lineNumber: 170,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -28970,7 +28966,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 161,
+        lineNumber: 177,
         columnNumber: 7
       }
     }, mobileCollapse ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -28980,7 +28976,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 163,
+        lineNumber: 179,
         columnNumber: 11
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -28990,7 +28986,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 165,
+        lineNumber: 181,
         columnNumber: 11
       }
     }))) : /*#__PURE__*/React__default["default"].createElement(DesktopContainer, {
@@ -28999,23 +28995,50 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 170,
+        lineNumber: 186,
         columnNumber: 5
       }
+    }, /*#__PURE__*/React__default["default"].createElement(StyledCard, {
+      showBottomLine: false,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 187,
+        columnNumber: 7
+      }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
       isCollapse: true,
       isDialog: isDialog,
       content: content,
+      onNavClick: onNavClick,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 171,
-        columnNumber: 7
+        lineNumber: 188,
+        columnNumber: 9
       }
-    }));
+    })));
   }
 
-  const Page = styled(ScrollSpy__default["default"]);
+  const StyledPage = styled(Box, {
+    maxWidth: 982
+  });
+  const Page = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement(StyledPage, {
+    ref: ref,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 197,
+      columnNumber: 3
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ScrollSpy__default["default"], _extends({}, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 198,
+      columnNumber: 5
+    }
+  }))));
   Page.displayName = 'TableOfContent.Page';
   TableOfContent.Page = Page;
   TableOfContent.defaultProps = {
@@ -29041,7 +29064,12 @@
     /**
      The active ID to reference the active content on the mobile view obtained from onUpdateCallback.
      */
-    activeId: PropTypes__default["default"].string
+    activeId: PropTypes__default["default"].string,
+
+    /**
+     Event Callback on navigation click.
+     */
+    onNavClick: PropTypes__default["default"].func
   };
 
   var TableOfContentPage = function TableOfContentPage(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.54.8",
+  "version": "1.54.10",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",