@jbrowse/plugin-data-management 2.17.0 → 3.0.0

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.js

@@ -1,15 +1,11 @@
-import React, { useState } from 'react';
-import { transaction } from 'mobx';
-import { observer } from 'mobx-react';
-import { getRoot, resolveIdentifier } from 'mobx-state-tree';
-import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-// jbrowse
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ResizeHandle } from '@jbrowse/core/ui';
 import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
-import { getEnv, measureGridWidth } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-import FacetedHeader from './FacetedHeader';
 import FacetFilters from './FacetFilters';
+import FacetedDataGrid from './FacetedDataGrid';
+import FacetedHeader from './FacetedHeader';
 import TrackLabelMenu from '../tree/TrackLabelMenu';
 const useStyles = makeStyles()({
     cell: {
@@ -25,28 +21,9 @@ const useStyles = makeStyles()({
 });
 const frac = 0.75;
 const FacetedSelector = observer(function FacetedSelector({ model, }) {
-    var _a;
     const { classes } = useStyles();
-    const { view, selection, shownTrackIds, faceted } = model;
-    const { rows, panelWidth, showFilters, useShoppingCart, showOptions, filteredRows, filteredNonMetadataKeys, filteredMetadataKeys, visible, } = faceted;
-    const { pluginManager } = getEnv(model);
-    const [widths, setWidths] = useState({
-        name: measureGridWidth(rows.map(r => r.name), { maxWidth: 500, stripHTML: true }) + 15,
-        ...Object.fromEntries(filteredNonMetadataKeys
-            .filter(f => visible[f])
-            .map(e => [
-            e,
-            measureGridWidth(rows.map(r => r[e]), { maxWidth: 400, stripHTML: true }),
-        ])),
-        ...Object.fromEntries(filteredMetadataKeys
-            .filter(f => visible[`metadata.${f}`])
-            .map(e => {
-            return [
-                `metadata.${e}`,
-                measureGridWidth(rows.map(r => r.metadata[e]), { maxWidth: 400, stripHTML: true }),
-            ];
-        })),
-    });
+    const { selection, shownTrackIds, faceted } = model;
+    const { rows, panelWidth, showFilters, filteredNonMetadataKeys, filteredMetadataKeys, } = faceted;
     const columns = [
         {
             field: 'name',
@@ -54,89 +31,40 @@ const FacetedSelector = observer(function FacetedSelector({ model, }) {
             renderCell: params => {
                 const { value, row } = params;
                 const { id, conf } = row;
-                return (React.createElement("div", { className: classes.cell },
-                    React.createElement(SanitizedHTML, { html: value }),
-                    React.createElement(TrackLabelMenu, { id: id, conf: conf, trackId: id, model: model })));
+                return (_jsxs("div", { className: classes.cell, children: [_jsx(SanitizedHTML, { html: value }), _jsx(TrackLabelMenu, { id: id, conf: conf, trackId: id, model: model })] }));
             },
-            width: (_a = widths.name) !== null && _a !== void 0 ? _a : 100,
         },
         ...filteredNonMetadataKeys.map(e => {
-            var _a;
             return {
                 field: e,
-                width: (_a = widths[e]) !== null && _a !== void 0 ? _a : 100,
                 renderCell: params => {
                     const val = params.value;
-                    return val ? (React.createElement(SanitizedHTML, { className: classes.cell, html: val })) : ('');
+                    return val ? (_jsx(SanitizedHTML, { className: classes.cell, html: val })) : ('');
                 },
             };
         }),
         ...filteredMetadataKeys.map(e => {
-            var _a;
             return {
                 field: `metadata.${e}`,
                 headerName: ['name', ...filteredNonMetadataKeys].includes(e)
                     ? `${e} (from metadata)`
                     : e,
-                width: (_a = widths[`metadata.${e}`]) !== null && _a !== void 0 ? _a : 100,
                 valueGetter: (_, row) => { var _a; return `${(_a = row.metadata[e]) !== null && _a !== void 0 ? _a : ''}`; },
                 renderCell: params => {
                     const val = params.value;
-                    return val ? (React.createElement(SanitizedHTML, { className: classes.cell, html: val })) : ('');
+                    return val ? (_jsx(SanitizedHTML, { className: classes.cell, html: val })) : ('');
                 },
             };
         }),
     ];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(FacetedHeader, { model: model }),
-        React.createElement("div", { style: {
-                display: 'flex',
-                overflow: 'hidden',
-                height: window.innerHeight * frac,
-                width: window.innerWidth * frac,
-            } },
-            React.createElement("div", { style: {
+    return (_jsxs(_Fragment, { children: [_jsx(FacetedHeader, { model: model }), _jsxs("div", { style: {
+                    display: 'flex',
+                    overflow: 'hidden',
                     height: window.innerHeight * frac,
-                    width: window.innerWidth * frac - (showFilters ? panelWidth : 0),
-                } },
-                React.createElement(DataGrid, { rows: filteredRows, onColumnWidthChange: arg => {
-                        setWidths({ ...widths, [arg.colDef.field]: arg.width });
-                    }, columnVisibilityModel: visible, onColumnVisibilityModelChange: n => {
-                        faceted.setVisible(n);
-                    }, columnHeaderHeight: 35, checkboxSelection: true, disableRowSelectionOnClick: true, keepNonExistentRowsSelected: true, onRowSelectionModelChange: userSelectedIds => {
-                        if (!useShoppingCart) {
-                            const a1 = shownTrackIds;
-                            const a2 = new Set(userSelectedIds);
-                            // synchronize the user selection with the view
-                            // see share https://stackoverflow.com/a/33034768/2129219
-                            transaction(() => {
-                                ;
-                                [...a1].filter(x => !a2.has(x)).map(t => view.hideTrack(t));
-                                [...a2]
-                                    .filter(x => !a1.has(x))
-                                    .map(t => {
-                                    view.showTrack(t);
-                                    model.addToRecentlyUsed(t);
-                                });
-                            });
-                        }
-                        else {
-                            const root = getRoot(model);
-                            const schema = pluginManager.pluggableConfigSchemaType('track');
-                            model.setSelection(userSelectedIds.map(id => resolveIdentifier(schema, root, id)));
-                        }
-                    }, rowSelectionModel: useShoppingCart
-                        ? selection.map(s => s.trackId)
-                        : [...shownTrackIds], slots: { toolbar: showOptions ? GridToolbar : null }, slotProps: {
-                        toolbar: {
-                            printOptions: {
-                                disableToolbarButton: true,
-                            },
-                        },
-                    }, columns: columns, rowHeight: 25 })),
-            showFilters ? (React.createElement(React.Fragment, null,
-                React.createElement(ResizeHandle, { vertical: true, onDrag: dist => faceted.setPanelWidth(panelWidth - dist), className: classes.resizeHandle }),
-                React.createElement("div", { style: { width: panelWidth, overflow: 'auto' } },
-                    React.createElement(FacetFilters, { model: model, rows: rows, columns: columns })))) : null)));
+                    width: window.innerWidth * frac,
+                }, children: [_jsx("div", { style: {
+                            height: window.innerHeight * frac,
+                            width: window.innerWidth * frac - (showFilters ? panelWidth : 0),
+                        }, children: _jsx(FacetedDataGrid, { model: model, columns: columns, shownTrackIds: shownTrackIds, selection: selection }) }), showFilters ? (_jsxs(_Fragment, { children: [_jsx(ResizeHandle, { vertical: true, onDrag: dist => faceted.setPanelWidth(panelWidth - dist), className: classes.resizeHandle }), _jsx("div", { style: { width: panelWidth, overflow: 'auto' }, children: _jsx(FacetFilters, { model: model, rows: rows, columns: columns }) })] })) : null] })] }));
 });
 export default FacetedSelector;

package/esm/HierarchicalTrackSelectorWidget/components/tree/DropdownTrackSelector.d.ts

@@ -1,12 +1,11 @@
-import React from 'react';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { MenuItem } from '@jbrowse/core/ui/Menu';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { MenuItem } from '@jbrowse/core/ui/Menu';
 declare const DropdownTrackSelector: ({ model, tracks, extraMenuItems, children, onClick, }: {
     model: HierarchicalTrackSelectorModel;
     tracks: AnyConfigurationModel[];
     extraMenuItems: MenuItem[];
     onClick?: () => void;
     children: React.ReactElement;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default DropdownTrackSelector;

package/esm/HierarchicalTrackSelectorWidget/components/tree/DropdownTrackSelector.js

@@ -1,21 +1,19 @@
-import React, { useState } from 'react';
-import { observer } from 'mobx-react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
-import { getTrackName } from '@jbrowse/core/util/tracks';
 import { getSession } from '@jbrowse/core/util';
+import { getTrackName } from '@jbrowse/core/util/tracks';
+import { observer } from 'mobx-react';
 import TrackLabelMenu from './TrackLabelMenu';
 const DropdownTrackSelector = observer(function ({ model, tracks, extraMenuItems, children, onClick, }) {
     const { view } = model;
     const [open, setOpen] = useState(false);
     const session = getSession(model);
-    return view ? (React.createElement(CascadingMenuButton, { closeAfterItemClick: false, onClick: onClick, menuItems: [
+    return view ? (_jsx(CascadingMenuButton, { closeAfterItemClick: false, onClick: onClick, menuItems: [
             ...tracks.map(t => ({
                 type: 'checkbox',
-                label: (React.createElement(React.Fragment, null,
-                    React.createElement(SanitizedHTML, { html: getTrackName(t, session) }),
-                    ' ',
-                    React.createElement(TrackLabelMenu, { id: t.trackId, trackId: t.trackId, model: model, conf: t, setOpen: setOpen, stopPropagation: true }))),
+                label: (_jsxs(_Fragment, { children: [_jsx(SanitizedHTML, { html: getTrackName(t, session) }), ' ', _jsx(TrackLabelMenu, { id: t.trackId, trackId: t.trackId, model: model, conf: t, setOpen: setOpen, stopPropagation: true })] })),
                 checked: view.tracks.some((f) => f.configuration === t),
                 onClick: () => {
                     if (!open) {
@@ -26,6 +24,6 @@ const DropdownTrackSelector = observer(function ({ model, tracks, extraMenuItems
                 },
             })),
             ...extraMenuItems,
-        ] }, children)) : null;
+        ], children: children })) : null;
 });
 export default DropdownTrackSelector;

package/esm/HierarchicalTrackSelectorWidget/components/tree/FavoriteTracks.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model';
 declare const FavoriteTracks: ({ model, }: {
     model: HierarchicalTrackSelectorModel;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default FavoriteTracks;

package/esm/HierarchicalTrackSelectorWidget/components/tree/FavoriteTracks.js

@@ -1,9 +1,8 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import GradeIcon from '@mui/icons-material/Grade';
 import { Badge, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-// icons
-import GradeIcon from '@mui/icons-material/Grade';
 import DropdownTrackSelector from './DropdownTrackSelector';
 const useStyles = makeStyles()({
     smallBadge: {
@@ -16,7 +15,7 @@ const useStyles = makeStyles()({
 const FavoriteTracks = observer(function ({ model, }) {
     const { classes } = useStyles();
     const { view, favoriteTracks } = model;
-    return view ? (React.createElement(DropdownTrackSelector, { onClick: () => {
+    return view ? (_jsx(DropdownTrackSelector, { onClick: () => {
             model.setFavoritesCounter(0);
         }, tracks: favoriteTracks, model: model, extraMenuItems: favoriteTracks.length
             ? [
@@ -33,12 +32,9 @@ const FavoriteTracks = observer(function ({ model, }) {
                     label: 'No favorite tracks yet',
                     onClick: () => { },
                 },
-            ] },
-        React.createElement(Tooltip, { title: "Favorite tracks" },
-            React.createElement(Badge, { classes: { badge: classes.smallBadge }, color: "secondary", anchorOrigin: {
+            ], children: _jsx(Tooltip, { title: "Favorite tracks", children: _jsx(Badge, { classes: { badge: classes.smallBadge }, color: "secondary", anchorOrigin: {
                     vertical: 'bottom',
                     horizontal: 'right',
-                }, className: classes.margin, badgeContent: model.favoritesCounter },
-                React.createElement(GradeIcon, null))))) : null;
+                }, className: classes.margin, badgeContent: model.favoritesCounter, children: _jsx(GradeIcon, {}) }) }) })) : null;
 });
 export default FavoriteTracks;

package/esm/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model';
 declare const HamburgerMenu: ({ model, }: {
     model: HierarchicalTrackSelectorModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default HamburgerMenu;

package/esm/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.js

@@ -1,13 +1,11 @@
-import React, { Suspense, lazy, useState } from 'react';
-import { observer } from 'mobx-react';
-import { getSession, isSessionModelWithConnectionEditing, isSessionModelWithConnections, isSessionModelWithWidgets, isSessionWithAddTracks, } from '@jbrowse/core/util';
-import { readConfObject, } from '@jbrowse/core/configuration';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Suspense, lazy, useState } from 'react';
+import { readConfObject } from '@jbrowse/core/configuration';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-// icons
+import { getSession, isSessionModelWithConnectionEditing, isSessionModelWithConnections, isSessionModelWithWidgets, isSessionWithAddTracks, } from '@jbrowse/core/util';
 import MenuIcon from '@mui/icons-material/Menu';
-// lazies
+import { observer } from 'mobx-react';
 const FacetedDialog = lazy(() => import('../faceted/FacetedDialog'));
-// lazy components
 const CloseConnectionDialog = lazy(() => import('../dialogs/CloseConnectionDialog'));
 const DeleteConnectionDialog = lazy(() => import('../dialogs/DeleteConnectionDialog'));
 const ManageConnectionsDialog = lazy(() => import('../dialogs/ManageConnectionsDialog'));
@@ -41,128 +39,120 @@ const HamburgerMenu = observer(function ({ model, }) {
             setDeleteDialogDetails({ name, connectionConf });
         }
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(CascadingMenuButton, { menuItems: [
-                {
-                    label: 'Open faceted track selector',
-                    onClick: () => {
-                        setFacetedOpen(true);
+    return (_jsxs(_Fragment, { children: [_jsx(CascadingMenuButton, { menuItems: [
+                    {
+                        label: 'Open faceted track selector',
+                        onClick: () => {
+                            setFacetedOpen(true);
+                        },
                     },
-                },
-                ...(isSessionWithAddTracks(session)
-                    ? [
-                        {
-                            label: 'Add track...',
-                            onClick: () => {
-                                if (isSessionModelWithWidgets(session)) {
-                                    session.showWidget(session.addWidget('AddTrackWidget', 'addTrackWidget', {
-                                        view: model.view.id,
-                                    }));
-                                }
+                    ...(isSessionWithAddTracks(session)
+                        ? [
+                            {
+                                label: 'Add track...',
+                                onClick: () => {
+                                    if (isSessionModelWithWidgets(session)) {
+                                        session.showWidget(session.addWidget('AddTrackWidget', 'addTrackWidget', {
+                                            view: model.view.id,
+                                        }));
+                                    }
+                                },
                             },
-                        },
-                    ]
-                    : []),
-                {
-                    label: 'Connections...',
-                    subMenu: [
-                        ...(isSessionModelWithConnections(session)
-                            ? [
-                                {
-                                    label: 'Turn on/off connections...',
-                                    onClick: () => {
-                                        setConnectionToggleOpen(true);
+                        ]
+                        : []),
+                    {
+                        label: 'Connections...',
+                        subMenu: [
+                            ...(isSessionModelWithConnections(session)
+                                ? [
+                                    {
+                                        label: 'Turn on/off connections...',
+                                        onClick: () => {
+                                            setConnectionToggleOpen(true);
+                                        },
                                     },
-                                },
-                            ]
-                            : []),
-                        ...(isSessionModelWithConnectionEditing(session)
-                            ? [
-                                {
-                                    label: 'Add connection...',
-                                    onClick: () => {
-                                        if (isSessionModelWithWidgets(session)) {
-                                            session.showWidget(session.addWidget('AddConnectionWidget', 'addConnectionWidget'));
-                                        }
+                                ]
+                                : []),
+                            ...(isSessionModelWithConnectionEditing(session)
+                                ? [
+                                    {
+                                        label: 'Add connection...',
+                                        onClick: () => {
+                                            if (isSessionModelWithWidgets(session)) {
+                                                session.showWidget(session.addWidget('AddConnectionWidget', 'addConnectionWidget'));
+                                            }
+                                        },
                                     },
-                                },
-                                {
-                                    label: 'Delete connections...',
-                                    onClick: () => {
-                                        setConnectionManagerOpen(true);
+                                    {
+                                        label: 'Delete connections...',
+                                        onClick: () => {
+                                            setConnectionManagerOpen(true);
+                                        },
                                     },
+                                ]
+                                : []),
+                        ],
+                    },
+                    {
+                        label: 'Sort...',
+                        type: 'subMenu',
+                        subMenu: [
+                            {
+                                label: 'Sort tracks by name',
+                                type: 'checkbox',
+                                checked: model.activeSortTrackNames,
+                                onClick: () => {
+                                    model.setSortTrackNames(!model.activeSortTrackNames);
                                 },
-                            ]
-                            : []),
-                    ],
-                },
-                {
-                    label: 'Sort...',
-                    type: 'subMenu',
-                    subMenu: [
-                        {
-                            label: 'Sort tracks by name',
-                            type: 'checkbox',
-                            checked: model.activeSortTrackNames,
-                            onClick: () => {
-                                model.setSortTrackNames(!model.activeSortTrackNames);
                             },
-                        },
-                        {
-                            label: 'Sort categories by name',
-                            type: 'checkbox',
-                            checked: model.activeSortCategories,
-                            onClick: () => {
-                                model.setSortCategories(!model.activeSortCategories);
+                            {
+                                label: 'Sort categories by name',
+                                type: 'checkbox',
+                                checked: model.activeSortCategories,
+                                onClick: () => {
+                                    model.setSortCategories(!model.activeSortCategories);
+                                },
                             },
-                        },
-                    ],
-                },
-                {
-                    label: 'Collapse...',
-                    type: 'subMenu',
-                    subMenu: [
-                        ...(model.hasAnySubcategories
-                            ? [
-                                {
-                                    label: 'Collapse subcategories',
-                                    onClick: () => {
-                                        model.collapseSubCategories();
+                        ],
+                    },
+                    {
+                        label: 'Collapse...',
+                        type: 'subMenu',
+                        subMenu: [
+                            ...(model.hasAnySubcategories
+                                ? [
+                                    {
+                                        label: 'Collapse subcategories',
+                                        onClick: () => {
+                                            model.collapseSubCategories();
+                                        },
                                     },
+                                ]
+                                : []),
+                            {
+                                label: 'Collapse top-level categories',
+                                onClick: () => {
+                                    model.collapseTopLevelCategories();
                                 },
-                            ]
-                            : []),
-                        {
-                            label: 'Collapse top-level categories',
-                            onClick: () => {
-                                model.collapseTopLevelCategories();
                             },
-                        },
-                        {
-                            label: 'Expand all categories',
-                            onClick: () => {
-                                model.expandAllCategories();
+                            {
+                                label: 'Expand all categories',
+                                onClick: () => {
+                                    model.expandAllCategories();
+                                },
                             },
-                        },
-                    ],
-                },
-            ] },
-            React.createElement(MenuIcon, null)),
-        React.createElement(Suspense, { fallback: null },
-            modalInfo ? (React.createElement(CloseConnectionDialog, { modalInfo: modalInfo, onClose: () => {
-                    setModalInfo(undefined);
-                } })) : null,
-            deleteDialogDetails ? (React.createElement(DeleteConnectionDialog, { handleClose: () => {
-                    setDeleteDialogDetails(undefined);
-                }, deleteDialogDetails: deleteDialogDetails, session: session })) : null,
-            connectionManagerOpen ? (React.createElement(ManageConnectionsDialog, { handleClose: () => {
-                    setConnectionManagerOpen(false);
-                }, breakConnection: breakConnection, session: session })) : null,
-            connectionToggleOpen ? (React.createElement(ToggleConnectionsDialog, { handleClose: () => {
-                    setConnectionToggleOpen(false);
-                }, session: session, breakConnection: breakConnection })) : null,
-            facetedOpen ? (React.createElement(FacetedDialog, { handleClose: () => {
-                    setFacetedOpen(false);
-                }, model: model })) : null)));
+                        ],
+                    },
+                ], children: _jsx(MenuIcon, {}) }), _jsxs(Suspense, { fallback: null, children: [modalInfo ? (_jsx(CloseConnectionDialog, { modalInfo: modalInfo, onClose: () => {
+                            setModalInfo(undefined);
+                        } })) : null, deleteDialogDetails ? (_jsx(DeleteConnectionDialog, { handleClose: () => {
+                            setDeleteDialogDetails(undefined);
+                        }, deleteDialogDetails: deleteDialogDetails, session: session })) : null, connectionManagerOpen ? (_jsx(ManageConnectionsDialog, { handleClose: () => {
+                            setConnectionManagerOpen(false);
+                        }, breakConnection: breakConnection, session: session })) : null, connectionToggleOpen ? (_jsx(ToggleConnectionsDialog, { handleClose: () => {
+                            setConnectionToggleOpen(false);
+                        }, session: session, breakConnection: breakConnection })) : null, facetedOpen ? (_jsx(FacetedDialog, { handleClose: () => {
+                            setFacetedOpen(false);
+                        }, model: model })) : null] })] }));
 });
 export default HamburgerMenu;

package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalHeader.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model';
 declare const HierarchicalTrackSelectorHeader: ({ model, setHeaderHeight, }: {
     model: HierarchicalTrackSelectorModel;
     setHeaderHeight: (n: number) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default HierarchicalTrackSelectorHeader;

package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalHeader.js

@@ -1,9 +1,8 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ClearIcon from '@mui/icons-material/Clear';
 import { IconButton, InputAdornment, TextField } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
-// icons
-import ClearIcon from '@mui/icons-material/Clear';
+import { makeStyles } from 'tss-react/mui';
 import HamburgerMenu from './HamburgerMenu';
 import ShoppingCart from '../ShoppingCart';
 import FavoriteTracks from './FavoriteTracks';
@@ -16,27 +15,19 @@ const useStyles = makeStyles()(theme => ({
 const SearchTracksTextField = observer(function ({ model, }) {
     const { filterText } = model;
     const { classes } = useStyles();
-    return (React.createElement(TextField, { className: classes.searchBox, label: "Filter tracks", value: filterText, onChange: event => {
+    return (_jsx(TextField, { className: classes.searchBox, label: "Filter tracks", value: filterText, onChange: event => {
             model.setFilterText(event.target.value);
         }, fullWidth: true, slotProps: {
             input: {
-                endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                    React.createElement(IconButton, { onClick: () => {
+                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => {
                             model.clearFilterText();
-                        } },
-                        React.createElement(ClearIcon, null)))),
+                        }, children: _jsx(ClearIcon, {}) }) })),
             },
         } }));
 });
 const HierarchicalTrackSelectorHeader = observer(function ({ model, setHeaderHeight, }) {
-    return (React.createElement("div", { ref: ref => {
+    return (_jsx("div", { ref: ref => {
             setHeaderHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0);
-        }, "data-testid": "hierarchical_track_selector" },
-        React.createElement("div", { style: { display: 'flex' } },
-            React.createElement(HamburgerMenu, { model: model }),
-            React.createElement(ShoppingCart, { model: model }),
-            React.createElement(SearchTracksTextField, { model: model }),
-            React.createElement(RecentlyUsedTracks, { model: model }),
-            React.createElement(FavoriteTracks, { model: model }))));
+        }, "data-testid": "hierarchical_track_selector", children: _jsxs("div", { style: { display: 'flex' }, children: [_jsx(HamburgerMenu, { model: model }), _jsx(ShoppingCart, { model: model }), _jsx(SearchTracksTextField, { model: model }), _jsx(RecentlyUsedTracks, { model: model }), _jsx(FavoriteTracks, { model: model })] }) }));
 });
 export default HierarchicalTrackSelectorHeader;

package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalTree.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
-import { TreeNode } from '../../generateHierarchy';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { TreeNode } from '../../generateHierarchy';
+import type { HierarchicalTrackSelectorModel } from '../../model';
 declare const HierarchicalTree: ({ height, tree, model, }: {
     height: number;
     tree: TreeNode;
     model: HierarchicalTrackSelectorModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default HierarchicalTree;