@vendorflow/components 2.0.63 → 2.0.67

package/lib/components/material-ui/AudioPlayer/AudioPlayer.js

@@ -50,6 +50,7 @@ var react_2 = require("react");
 var react_h5_audio_player_1 = __importStar(require("react-h5-audio-player"));
 require("react-h5-audio-player/lib/styles.css");
 var ButtonMenu_1 = __importDefault(require("../ButtonMenu"));
+var MobileBreakpoint = 768;
 function AudioPlayer(_a) {
     var audioSrc = _a.audioSrc;
     var player = (0, react_2.createRef)();
@@ -57,31 +58,38 @@ function AudioPlayer(_a) {
     (0, react_2.useEffect)(function () {
         player.current.audio.current.playbackRate = playbackRate;
     }, [playbackRate]);
+    var isMobile = (0, react_2.useMemo)(function () {
+        return window.screen.width < MobileBreakpoint;
+    }, [window.screen.width]);
+    var PlaybackRateOptions = (0, react_2.useMemo)(function () {
+        return ((0, react_1.jsx)(ButtonMenu_1.default, { key: "plaback-rate", color: "primary", id: "playback-rate-options", buttonRenderer: (0, react_1.jsx)(material_1.Button, null, playbackRate + "x"), menuItems: [
+                {
+                    content: '0.75x',
+                    onClick: function () { return setPlaybackRate(0.75); },
+                    type: 'MenuItem',
+                },
+                {
+                    content: '1x',
+                    onClick: function () { return setPlaybackRate(1); },
+                    type: 'MenuItem',
+                },
+                {
+                    content: '1.5x',
+                    onClick: function () { return setPlaybackRate(1.5); },
+                    type: 'MenuItem',
+                },
+                {
+                    content: '2x',
+                    onClick: function () { return setPlaybackRate(2); },
+                    type: 'MenuItem',
+                },
+            ] }));
+    }, [playbackRate]);
     return ((0, react_1.jsx)("div", { css: function (theme) {
             var _a, _b, _c, _d;
             return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        .rhap_main-controls-button {\n          color: ", ";\n        }\n        .rhap_progress-indicator {\n          background: ", ";\n        }\n      "], ["\n        .rhap_main-controls-button {\n          color: ", ";\n        }\n        .rhap_progress-indicator {\n          background: ", ";\n        }\n      "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(321, 53%, 31%)', ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d.main) || 'hsl(321, 53%, 31%)');
         } },
-        (0, react_1.jsx)(react_h5_audio_player_1.default, { ref: player, src: audioSrc, showFilledProgress: true, progressJumpSteps: { backward: 10000, forward: 10000 }, customAdditionalControls: [
-                react_h5_audio_player_1.RHAP_UI.LOOP,
-                (0, react_1.jsx)(ButtonMenu_1.default, { key: "plaback-rate", color: "primary", id: "playback-rate-options", buttonRenderer: (0, react_1.jsx)(material_1.Button, null, playbackRate + "x"), menuItems: [
-                        {
-                            content: '0.75x',
-                            onClick: function () { return setPlaybackRate(0.75); },
-                        },
-                        {
-                            content: '1x',
-                            onClick: function () { return setPlaybackRate(1); },
-                        },
-                        {
-                            content: '1.5x',
-                            onClick: function () { return setPlaybackRate(1.5); },
-                        },
-                        {
-                            content: '2x',
-                            onClick: function () { return setPlaybackRate(2); },
-                        },
-                    ] }),
-            ] })));
+        (0, react_1.jsx)(react_h5_audio_player_1.default, { ref: player, src: audioSrc, showFilledProgress: true, progressJumpSteps: { backward: 10000, forward: 10000 }, customAdditionalControls: isMobile ? [PlaybackRateOptions] : [react_h5_audio_player_1.RHAP_UI.LOOP, PlaybackRateOptions], customVolumeControls: isMobile ? [] : [react_h5_audio_player_1.RHAP_UI.VOLUME] })));
 }
 exports.default = AudioPlayer;
 var templateObject_1;

package/lib/components/material-ui/ButtonMenu/ButtonMenu.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { ButtonProps, MenuProps } from '@mui/material';
-import { MenuItem as MenuItemType } from '../../../types/Component.types';
+import { MenuItem as MenuItemType, Divider as DividerType } from '../../../types/Component.types';
 declare type Variant = 'text' | 'contained' | 'outlined' | undefined;
 declare type Props = {
     buttonRenderer?: ReactNode | (() => ReactNode);
@@ -11,7 +11,7 @@ declare type Props = {
         classes?: any;
     };
     id: string;
-    menuItems: MenuItemType[];
+    menuItems: (MenuItemType | DividerType)[];
 } & Omit<MenuProps, 'open'>;
 export default function ButtonMenu(props: Props): JSX.Element;
 export {};

package/lib/components/material-ui/ButtonMenu/ButtonMenu.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,25 +14,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -57,12 +42,15 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var react_2 = require("react");
 var lodash_1 = require("lodash");
 var material_1 = require("@mui/material");
 function ButtonMenu(props) {
     var buttonRenderer = props.buttonRenderer, button = props.button, id = props.id, menuItems = props.menuItems, _a = props.anchorOrigin, anchorOrigin = _a === void 0 ? { vertical: 'bottom', horizontal: 'left' } : _a, _b = props.transformOrigin, transformOrigin = _b === void 0 ? { vertical: 'top', horizontal: 'left' } : _b, restOfProps = __rest(props, ["buttonRenderer", "button", "id", "menuItems", "anchorOrigin", "transformOrigin"]);
-    var _c = __read((0, react_1.useState)(null), 2), anchorEl = _c[0], setAnchorEl = _c[1];
+    var _c = __read((0, react_2.useState)(null), 2), anchorEl = _c[0], setAnchorEl = _c[1];
     var open = !!anchorEl;
     function onHandleOpen(evt) {
         setAnchorEl(evt.currentTarget);
@@ -70,14 +58,14 @@ function ButtonMenu(props) {
     function renderDefaultButton() {
         if (!!button) {
             var _a = button.text, text = _a === void 0 ? '' : _a, _b = button.variant, variant = _b === void 0 ? 'contained' : _b, _c = button.color, color = _c === void 0 ? 'primary' : _c, classes = button.classes;
-            return (react_1.default.createElement(material_1.Button, { "aria-controls": id, "aria-haspopup": "true", classes: classes, color: color, variant: variant, onClick: onHandleOpen }, text));
+            return ((0, react_1.jsx)(material_1.Button, { "aria-controls": id, "aria-haspopup": "true", classes: classes, color: color, variant: variant, onClick: onHandleOpen }, text));
         }
         return null;
     }
     function renderButton() {
         if (buttonRenderer) {
-            if ((0, react_1.isValidElement)(buttonRenderer)) {
-                return (0, react_1.cloneElement)(buttonRenderer, {
+            if ((0, react_2.isValidElement)(buttonRenderer)) {
+                return (0, react_2.cloneElement)(buttonRenderer, {
                     onClick: onHandleOpen,
                     'aria-controls': id,
                     'aria-haspopup': 'true',
@@ -85,8 +73,8 @@ function ButtonMenu(props) {
             }
             if ((0, lodash_1.isFunction)(buttonRenderer)) {
                 var Element_1 = buttonRenderer();
-                if ((0, react_1.isValidElement)(Element_1)) {
-                    return (0, react_1.cloneElement)(Element_1, {
+                if ((0, react_2.isValidElement)(Element_1)) {
+                    return (0, react_2.cloneElement)(Element_1, {
                         onClick: onHandleOpen,
                         'aria-controls': id,
                         'aria-haspopup': 'true',
@@ -103,18 +91,23 @@ function ButtonMenu(props) {
             return [];
         }
         return menuItems.map(function (item, index) {
-            function handleItemClick() {
-                item.onClick();
-                setAnchorEl(null);
+            if (item.type === 'MenuItem') {
+                return ((0, react_1.jsx)(material_1.MenuItem, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              .MuiDivider-wrapper {\n                font-size: 0.875rem;\n                color: hsl(0, 0%, 54%);\n              }\n            "], ["\n              .MuiDivider-wrapper {\n                font-size: 0.875rem;\n                color: hsl(0, 0%, 54%);\n              }\n            "]))), key: id + "-menu-item-" + index, onClick: function () {
+                        item.onClick();
+                        setAnchorEl(null);
+                    } }, item.content));
+            }
+            if (item.type === 'Divider') {
+                return ((0, react_1.jsx)(material_1.Divider, { key: id + "-divider-" + index, textAlign: item.textAlign }, item.text));
             }
-            return (react_1.default.createElement(material_1.MenuItem, { key: id + "-menu-item-" + index, onClick: handleItemClick }, item.content));
         });
     }
     function renderMenu() {
-        return (react_1.default.createElement(material_1.Menu, __assign({}, restOfProps, { id: id, anchorEl: anchorEl, elevation: 4, keepMounted: true, open: open, onClose: function () { return setAnchorEl(null); }, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }), renderMenuItems()));
+        return ((0, react_1.jsx)(material_1.Menu, __assign({}, restOfProps, { id: id, anchorEl: anchorEl, elevation: 4, keepMounted: true, open: open, onClose: function () { return setAnchorEl(null); }, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }), renderMenuItems()));
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return ((0, react_1.jsx)("div", null,
         renderButton(),
         renderMenu()));
 }
 exports.default = ButtonMenu;
+var templateObject_1;

package/lib/components/material-ui/ButtonMenu/ButtonMenu.story.js

@@ -11,10 +11,17 @@ var menuItems = [
     {
         content: 'Option 1',
         onClick: function () { return alert('hello'); },
+        type: 'MenuItem',
+    },
+    {
+        text: 'Divider',
+        textAlign: 'left',
+        type: 'Divider',
     },
     {
         content: 'Option 2',
         onClick: function () { return alert('goodbye'); },
+        type: 'MenuItem',
     },
 ];
 var ButtonMenuUsingDefault = function () { return (react_1.default.createElement(ButtonMenu_1.default, { id: "button-menu-default", button: {

package/lib/components/material-ui/DataTable/DataTable.d.ts

@@ -1,4 +1,4 @@
-import { Column, UseSortByColumnProps, HeaderGroup, UseSortByOptions, TableOptions, UseSortByColumnOptions, PluginHook, UsePaginationOptions, UseSortByInstanceProps, UsePaginationInstanceProps, TableInstance, TableState, UseSortByState, UsePaginationState, UseRowSelectOptions, UseRowSelectInstanceProps, UseRowSelectState, Row, UseRowSelectRowProps, UseExpandedOptions, UseExpandedInstanceProps, UseExpandedState, UseExpandedRowProps, UseGlobalFiltersInstanceProps, UseGlobalFiltersState, UseFiltersOptions, UseFiltersInstanceProps, UseFiltersState, UseFiltersColumnOptions, UseFiltersColumnProps, Renderer, FilterProps, UseTableOptions } from 'react-table';
+import { Column, UseSortByColumnProps, HeaderGroup, UseSortByOptions, TableOptions, UseSortByColumnOptions, PluginHook, UsePaginationOptions, UseSortByInstanceProps, UsePaginationInstanceProps, TableInstance, TableState, UseSortByState, UsePaginationState, UseRowSelectOptions, UseRowSelectInstanceProps, UseRowSelectState, Row, UseRowSelectRowProps, UseExpandedOptions, UseExpandedInstanceProps, UseExpandedState, UseExpandedRowProps, UseGlobalFiltersInstanceProps, UseGlobalFiltersState, UseFiltersOptions, UseFiltersInstanceProps, UseFiltersState, UseFiltersColumnOptions, UseFiltersColumnProps, Renderer, FilterProps, UseTableOptions, UseGlobalFiltersOptions } from 'react-table';
 import { ReactNode } from 'react';
 export declare type Mode = 'single' | 'multi';
 export declare type CustomColumnConfigProps<D extends object> = {
@@ -7,7 +7,7 @@ export declare type CustomColumnConfigProps<D extends object> = {
     columns?: EnhancedColumn<D>[];
 };
 export declare type EnhancedHeader<D extends object> = HeaderGroup<D> & UseFiltersColumnProps<D> & UseSortByColumnProps<D> & CustomColumnConfigProps<D>;
-export declare type EnhancedTableOptions<D extends object> = TableOptions<D> & UseExpandedOptions<D> & UseFiltersOptions<D> & UseSortByOptions<D> & UsePaginationOptions<D> & UseRowSelectOptions<D>;
+export declare type EnhancedTableOptions<D extends object> = TableOptions<D> & UseExpandedOptions<D> & UseFiltersOptions<D> & UseGlobalFiltersOptions<D> & UseSortByOptions<D> & UsePaginationOptions<D> & UseRowSelectOptions<D>;
 export declare type EnhancedTableInstance<D extends object> = Omit<TableInstance<D>, 'state'> & UseExpandedInstanceProps<D> & UseFiltersInstanceProps<D> & UseGlobalFiltersInstanceProps<D> & UseSortByInstanceProps<D> & UsePaginationInstanceProps<D> & UseRowSelectInstanceProps<D> & {
     state: EnhancedTableState<D>;
 };

package/lib/components/material-ui/DataTable/DataTable.js

@@ -302,6 +302,7 @@ function useDefaultTableInstance(_a) {
     var _e = ((options === null || options === void 0 ? void 0 : options.rowExpanding) || {}).autoResetExpanded, autoResetExpanded = _e === void 0 ? true : _e;
     return react_table_1.useTable.apply(void 0, __spreadArray([{
             autoResetExpanded: autoResetExpanded,
+            autoResetGlobalFilter: false,
             getRowId: getRowId,
             columns: columns,
             data: data,

package/lib/types/Component.types.d.ts

@@ -27,5 +27,11 @@ export interface DropdownEvent {
 export declare type MenuItem = {
     content: ReactNode;
     onClick: () => void;
+    type: 'MenuItem';
+};
+export declare type Divider = {
+    text: string;
+    textAlign: 'center' | 'left' | 'right';
+    type: 'Divider';
 };
 export declare type ParsableDate = string | number | Date;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.63",
+  "version": "2.0.67",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",