grep-components 2.25.0-GREPF-2996.2 → 2.25.0

package/dist/components/ToC/context/index.d.ts

@@ -6,6 +6,6 @@ interface Context {
     classes?: Record<'nav' | 'tree' | 'node' | 'link', string>;
     offsetTop?: number;
 }
-declare const context: React.Context<Context>;
-export { context as GrepTableOfContentContex };
-export default context;
+declare const Context: React.Context<Context>;
+export { Context as GrepTableOfContentContex };
+export default Context;

package/dist/components/ToC/utils/identity-element.d.ts

@@ -4,5 +4,5 @@ export interface IdentifyElement {
 export declare const generateElementId: IdentifyElement;
 export declare const identifyElement: (identify?: IdentifyElement) => (element: HTMLElement) => string;
 export declare const identifyElements: (elements: Array<HTMLElement>, identify?: IdentifyElement) => void;
-export declare const useIdentifiedElements: (elements: Array<HTMLElement>, identify?: IdentifyElement) => Record<string, HTMLElement>;
-export default useIdentifiedElements;
+export declare const identifiedElements: (elements: Array<HTMLElement>, identify?: IdentifyElement) => Record<string, HTMLElement>;
+export default identifiedElements;

package/dist/index.js

@@ -3,7 +3,7 @@ import LocalizedFormatPlugin from 'dayjs/plugin/localizedFormat.js';
 import isBetweenPlugin from 'dayjs/plugin/isBetween.js';
 import { blueGrey, grey, brown, deepOrange, orange, amber, yellow, lime, lightGreen, green, teal, cyan, lightBlue, blue, indigo, deepPurple, purple, pink, red } from '@mui/material/colors';
 import * as React from 'react';
-import React__default, { useRef, useMemo, createContext, useContext, forwardRef, createElement, useState, useCallback, useEffect, useLayoutEffect, memo, useReducer, cloneElement } from 'react';
+import React__default, { useRef, useMemo, createContext, useContext, forwardRef, createElement, useState, useCallback, useEffect, useLayoutEffect, memo, useReducer, cloneElement, use } from 'react';
 import AccountCircle from '@mui/icons-material/AccountCircle';
 import ArrowDropdown from '@mui/icons-material/ArrowDropDown';
 import { Button, Box, Typography, Tabs, Tab, Collapse, MenuList, Tooltip, MenuItem as MenuItem$1, Menu as Menu$1, Container, List, ListItem, ListItemText, ListItemButton, CircularProgress, TextField, FormControl, InputLabel, Select, OutlinedInput, Input, Checkbox, FormHelperText, IconButton as IconButton$1, ToggleButtonGroup, ToggleButton, AppBar as AppBar$1, Toolbar as Toolbar$1, Divider as Divider$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogContentText as DialogContentText$1, DialogActions as DialogActions$1 } from '@mui/material';
@@ -1708,7 +1708,7 @@ const CollapsableMenuItem = ({ items, onClick, children, onClose: _onclose, tool
     const handleClick = items ? onToggleClick : onClick;
     useEffect(() => {
         document.addEventListener('click', onScrimClick, { capture: true });
-        return () => document.removeEventListener('click', onScrimClick);
+        return () => document.removeEventListener('click', onScrimClick, { capture: true });
     }, [listItemRef, onScrimClick]);
     const { classes } = useStyles$f({ open });
     const renderInner = () => (React__default.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', width: '100%' } },
@@ -2158,35 +2158,35 @@ const getElementIndex = (el) => Number(el.getAttribute('data-index') || -1);
 const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination, outlined, columns, header, data, onSelectedRowChange, sortBy, sortDirection, onSortBy, onRowClick, size, caption, stickyHeader, padding, disableSelectOnClick = false, menuButtonLabel, underlineOnFocus, rowTabIndex, rowStyle, rowsPerPageOptions = [5, 10, 25, 50], ...props }) => {
     const [rowsPerPage, setRowsPerPage] = React__default.useState(props.rowsPerPage || 10);
     const [menuAnchor, setMenuAnchor] = React__default.useState(null);
-    const [currentPage, _setCurrentPage] = React__default.useState(0);
-    const [selectedRowIndex, _setSelectedRowIndex] = React__default.useState();
-    const [expandedRowIndex, _setExpandedRowIndex] = React__default.useState();
+    const [currentPage, setCurrentPage] = React__default.useState(0);
+    const [selectedRowIndex, setSelectedRowIndex] = React__default.useState();
+    const [expandedRowIndex, setExpandedRowIndex] = React__default.useState();
     const [dropdownContext, setDropdownContext] = React__default.useState();
     const selectedRow = data[selectedRowIndex] || null;
-    const setCurrentPage = useCallback((index, rowIndex, shouldExpand) => {
+    const _setCurrentPage = useCallback((index, rowIndex, shouldExpand) => {
         index = pagination && index >= 0 ? index : 0;
-        _setCurrentPage(index);
-        _setSelectedRowIndex(rowIndex);
+        setCurrentPage(index);
+        setSelectedRowIndex(rowIndex);
         if (shouldExpand) {
-            _setExpandedRowIndex(rowIndex);
+            setExpandedRowIndex(rowIndex);
         }
     }, [
-        _setCurrentPage,
-        _setSelectedRowIndex,
-        _setExpandedRowIndex,
+        setCurrentPage,
+        setSelectedRowIndex,
+        setExpandedRowIndex,
         rowsPerPage,
         pagination,
     ]);
-    const setSelectedRowIndex = (index, shouldExpand = true) => {
+    const _setSelectedRowIndex = (index, shouldExpand = true) => {
         const hasIndexChanged = index === selectedRowIndex;
         const pageIndex = Math.floor(index / rowsPerPage);
-        setCurrentPage(pageIndex, index, shouldExpand);
+        _setCurrentPage(pageIndex, index, shouldExpand);
         if (hasIndexChanged && onSelectedRowChange) {
             onSelectedRowChange(data[index]);
         }
     };
     const setSelectedElement = (el, shouldExpand = true) => {
-        setSelectedRowIndex(getElementIndex(el), shouldExpand);
+        _setSelectedRowIndex(getElementIndex(el), shouldExpand);
     };
     const tableRef = React__default.useRef(null);
     // focus selected row first tabable item
@@ -2201,8 +2201,8 @@ const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination,
         }
     }, [tableRef, selectedRowIndex]);
     React__default.useEffect(() => {
-        setCurrentPage(0);
-    }, [data.length, setCurrentPage]);
+        _setCurrentPage(0);
+    }, [data.length, _setCurrentPage]);
     const _openDropdown = (e, row) => {
         const { onContextIdChanged } = props;
         if (onContextIdChanged) {
@@ -2217,7 +2217,7 @@ const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination,
     }, [onRowClick]);
     const _handlePageChange = (event, newPage) => {
         event && event.preventDefault();
-        setCurrentPage(newPage);
+        _setCurrentPage(newPage);
     };
     const _handleChangeRowsPerPage = (event) => {
         setRowsPerPage(Number(event.target.value));
@@ -2297,7 +2297,7 @@ const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination,
         const moveSelectedRow = (steps) => {
             const i = (selectedRowIndex || 0) + steps;
             if (i >= 0 && i <= maxIndex) {
-                setSelectedRowIndex(i);
+                _setSelectedRowIndex(i);
             }
         };
         switch (e.key) {
@@ -2316,15 +2316,15 @@ const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination,
                 moveSelectedRow(rowsPerPage);
                 break;
             case Key.Home:
-                setSelectedRowIndex(0);
+                _setSelectedRowIndex(0);
                 break;
             case Key.End:
-                setSelectedRowIndex(maxIndex);
+                _setSelectedRowIndex(maxIndex);
                 break;
             case Key.Tab:
                 requestAnimationFrame(() => {
                     // check is any children still has focus
-                    !containsFocus(tableRef.current) && setSelectedRowIndex(-1);
+                    !containsFocus(tableRef.current) && _setSelectedRowIndex(-1);
                 });
                 break;
             case Key.Enter:
@@ -2611,16 +2611,16 @@ const GrepInput = ({ variant = 'standard', ...props }) => {
 };
 
 const GrepSelect = (props) => {
-    const inputLabel = React.useRef(null);
+    const inputLabelRef = React.useRef(null);
     const [labelWidth, setLabelWidth] = React.useState(0);
     React.useEffect(() => {
-        setLabelWidth(inputLabel.current.offsetWidth);
+        setLabelWidth(inputLabelRef.current.offsetWidth);
     }, []);
     const { unselectOption = true, errorMessage, selectItems, helperText, fullWidth, outlined, disabled, required, label, labelProps, inputProps, value, size, id, useCheckedSelect, ...rest } = props;
     const error = errorMessage ? errorMessage.length > 0 : false;
     const selected = value;
     return (React.createElement(FormControl, { variant: outlined ? 'outlined' : 'standard', className: props.className, fullWidth: fullWidth, required: required, style: props.style, error: error, size: size, disabled: disabled },
-        React.createElement(InputLabel, { htmlFor: id, ref: inputLabel, style: {
+        React.createElement(InputLabel, { htmlFor: id, ref: inputLabelRef, style: {
                 minWidth: 'max-content',
                 overflow: 'visible',
             }, ...labelProps }, label),
@@ -2651,7 +2651,7 @@ const defaultOptions$2 = {
 };
 const useDate = (value = null, options) => {
     const { utc, preserveTime } = { ...options, ...defaultOptions$2 };
-    const [date, _setDate] = useState(null);
+    const [date, setDate] = useState(null);
     const getDate = useCallback((value) => {
         if (value) {
             const date = dayjs(value);
@@ -2659,13 +2659,13 @@ const useDate = (value = null, options) => {
         }
         return null;
     }, [preserveTime]);
-    const setDate = (next) => {
+    const _setDate = (next) => {
         const nextDate = getDate(next);
-        hasDateChanged(date, nextDate) && _setDate(nextDate);
+        hasDateChanged(date, nextDate) && setDate(nextDate);
     };
     // eslint-disable-next-line @eslint-react/use-memo
-    useMemo(() => setDate(value ? parseDate(value, { utc }) : null), [value, utc]);
-    return [date, setDate];
+    useMemo(() => _setDate(value ? parseDate(value, { utc }) : null), [value, utc]);
+    return [date, _setDate];
 };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -7809,7 +7809,7 @@ function getItemGap$1(clientRects, index, activeIndex) {
 }
 
 const ID_PREFIX = 'Sortable';
-const Context = /*#__PURE__*/React__default.createContext({
+const Context$1 = /*#__PURE__*/React__default.createContext({
   activeIndex: -1,
   containerId: ID_PREFIX,
   disableTransforms: false,
@@ -7868,7 +7868,7 @@ function SortableContext(_ref) {
     strategy
   }), // eslint-disable-next-line react-hooks/exhaustive-deps
   [activeIndex, containerId, disabled.draggable, disabled.droppable, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]);
-  return React__default.createElement(Context.Provider, {
+  return React__default.createElement(Context$1.Provider, {
     value: contextValue
   }, children);
 }
@@ -7992,7 +7992,7 @@ function useSortable(_ref) {
     overIndex,
     useDragOverlay,
     strategy: globalStrategy
-  } = useContext(Context);
+  } = useContext(Context$1);
   const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
   const index = items.indexOf(id);
   const data = useMemo(() => ({
@@ -8554,16 +8554,16 @@ function Mt(t,e){if(null==t)return  false;const n=Object.getPrototypeOf(t);retur
 
 function StyleWrapperPlugin({ showCharcount, maxChars, helperText, readOnly, classes, label, children, autoFocus, toolbarAnchor, hasCustomToolbar, }) {
     const [editor] = useLexicalComposerContext();
-    const [hasFocus, setFocused] = useState(() => {
+    const [hasFocus, setHasFocus] = useState(() => {
         return editor.getRootElement() === document.activeElement;
     });
     const [charCount, setCharCount] = useState(0);
     useEffect(() => {
         return mergeRegister(editor.registerCommand(BLUR_COMMAND, () => {
-            setFocused(editor.getRootElement() === document.activeElement);
+            setHasFocus(editor.getRootElement() === document.activeElement);
             return false;
         }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(FOCUS_COMMAND, () => {
-            setFocused(editor.getRootElement() === document.activeElement);
+            setHasFocus(editor.getRootElement() === document.activeElement);
             return false;
         }, COMMAND_PRIORITY_EDITOR));
     }, []);
@@ -8687,6 +8687,7 @@ function ModifyPastePlugin({ blockPasting, stripPastedStyles, }) {
     const [editor] = useLexicalComposerContext();
     editor.registerCommand(PASTE_COMMAND, (e) => {
         if (blockPasting) {
+            e.preventDefault();
             return true;
         }
         else if (stripPastedStyles && 'clipboardData' in e && e.clipboardData) {
@@ -9260,11 +9261,13 @@ const setPlaceholderOnSelection = ({ selection, editor, placeholder, }) => {
      * 4. Get "PointType" object, that contain Nodes data
      */
     const anchor = selection.anchor;
-    placeholder = DOMPurify.sanitize(placeholder?.replace(/<[^>]+>/g, ''));
+    placeholder = DOMPurify.sanitize(placeholder || '');
     if (placeholder) {
         const selectedHtmlElement = editor.getElementByKey(anchor.key);
         selectedHtmlElement?.classList.add(PLACEHOLDER_CLASS_NAME);
-        selectedHtmlElement?.setAttribute('data-placeholder', placeholder);
+        const e = document.createElement('div');
+        e.innerHTML = placeholder;
+        selectedHtmlElement?.setAttribute('data-placeholder', e.textContent);
     }
 };
 const setNodePlaceholderFromSelection = (editor, placeholder) => {
@@ -9280,14 +9283,9 @@ const setNodePlaceholderFromSelection = (editor, placeholder) => {
 const AddPlaceholderPlugin = ({ placeholder, }) => {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
-        if (placeholder) {
-            return editor.registerUpdateListener(() => {
-                setNodePlaceholderFromSelection(editor, placeholder ?? '');
-            });
-        }
-        else {
-            return;
-        }
+        return editor.registerUpdateListener(() => {
+            setNodePlaceholderFromSelection(editor, placeholder ?? '');
+        });
     }, [editor, placeholder]);
     return null;
 };
@@ -9782,11 +9780,11 @@ const GrepDialogServiceProvider = ({ children, }) => {
         setDialogState(options);
         setDialogOpen(true);
     };
-    return (React__default.createElement(GrepDialogServiceContext.Provider, { value: openDialog },
+    return (React__default.createElement(GrepDialogServiceContext, { value: openDialog },
         React__default.createElement(GrepDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), ...dialogState }),
         children));
 };
-const useGrepDialog = () => React__default.useContext(GrepDialogServiceContext);
+const useGrepDialog = () => use(GrepDialogServiceContext);
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -10261,15 +10259,15 @@ const initial = {
         throw Error('not implemented');
     },
 };
-const context = React__default.createContext(initial);
-context.displayName = 'Grep.ToC.Context';
+const Context = React__default.createContext(initial);
+Context.displayName = 'Grep.ToC.Context';
 
 const defaultSelector = [...new Array(9)]
     .map((_, i) => `h${i + 1}:not([role="presentation"])`)
     .join(',');
 const GrepTableOfContentProvider = ({ ...props }) => {
     const { container, identifier, onSelected, classes, scrollTarget, children, offsetTop = -10, identifyElementFn = identifyElement, } = props;
-    const [selected, _setSelected] = useState();
+    const [selected, setSelected] = useState();
     const [initialized, setInitialized] = useState();
     const hash = useLocation().hash;
     const scrollToElement = useCallback((element) => {
@@ -10283,10 +10281,10 @@ const GrepTableOfContentProvider = ({ ...props }) => {
         return identifyElementFn(identifier || generateElementId);
     }, [identifier, identifyElementFn]);
     const elements = useContentElements(container, props.selector || defaultSelector, { identify });
-    const setSelected = useCallback(throttle((element, scroll) => {
+    const _setSelected = useCallback(throttle((element, scroll) => {
         element && scroll && scrollToElement(element);
-        _setSelected(element);
-    }, 50, { trailing: false }), [_setSelected, scrollToElement]);
+        setSelected(element);
+    }, 50, { trailing: false }), [setSelected, scrollToElement]);
     const getViewportElement = useCallback(() => {
         const records = Object.values(elements);
         if (!records.length)
@@ -10307,13 +10305,13 @@ const GrepTableOfContentProvider = ({ ...props }) => {
             return;
         const onScroll = throttle(() => {
             const element = getViewportElement();
-            setSelected(element);
+            _setSelected(element);
         }, 50);
         target.addEventListener('scroll', onScroll, false);
         return () => {
             return target.removeEventListener('scroll', onScroll);
         };
-    }, [scrollTarget, setSelected, offsetTop, getViewportElement]);
+    }, [scrollTarget, _setSelected, offsetTop, getViewportElement]);
     // notify observer when selected change
     useEffect(() => {
         selected && onSelected && onSelected(selected);
@@ -10321,15 +10319,15 @@ const GrepTableOfContentProvider = ({ ...props }) => {
     // observe changes in hash
     useEffect(() => {
         if (hash && elements[hash]) {
-            setSelected(elements[hash], true);
+            _setSelected(elements[hash], true);
         }
-    }, [hash, setSelected]);
+    }, [hash, _setSelected]);
     // set selected element on initial load
     if (!initialized && elements && elements[hash]) {
-        setSelected(elements[hash], true);
+        _setSelected(elements[hash], true);
         setInitialized(true);
     }
-    return (React__default.createElement(context.Provider, { value: { elements, selected, classes, setSelected } }, children));
+    return (React__default.createElement(Context, { value: { elements, selected, classes, setSelected: _setSelected } }, children));
 };
 GrepTableOfContentProvider.displayName = 'Grep.ToC.Provider';
 
@@ -10367,7 +10365,7 @@ const GrepTableOfContentNavTreeNode = (props) => {
     const linkRef = useRef(null);
     const { node, style, renderChilds, setSelectedValue, percentageRendered } = props;
     const { lvl, el, index, children } = node;
-    const { selected, setSelected, classes, elements } = useContext(context);
+    const { selected, setSelected, classes, elements } = use(Context);
     const isSelected = el === selected;
     const { classes: styles } = useStyles$2({ lvl });
     const className = clsx('grep-toc__nav-tree-node', isSelected && 'grep-toc__nav-tree-node--selected', styles.root, classes?.node, props.className);
@@ -10423,7 +10421,7 @@ const useStyles$1 = makeStyles()(() => ({
 
 const NavTree = (props) => {
     const { elements, style, setSelectedValue, percentageRendered } = props;
-    const { classes } = useContext(context);
+    const { classes } = use(Context);
     const { classes: styles } = useStyles$1();
     const className = clsx('grep-toc__nav-tree', styles.root, classes?.tree, props.className);
     return (React__default.createElement("ul", { className: className, style: style }, Object.values(elements).map((node) => (React__default.createElement(GrepTableOfContentNavTreeNode, { node: node, key: node.index, renderChilds: (children) => (React__default.createElement(NavTree, { elements: children, setSelectedValue: setSelectedValue, percentageRendered: percentageRendered })), setSelectedValue: setSelectedValue, percentageRendered: percentageRendered })))));
@@ -10473,7 +10471,7 @@ const buildTree = (elements, normalizer = normalize) => {
 
 const GrepTableOfContentNav = (props) => {
     const ref = useRef(null);
-    const { elements, classes, selected, setSelected } = useContext(context);
+    const { elements, classes, selected, setSelected } = use(Context);
     const tree = useMemo(() => buildTree(Object.values(elements)), [elements]);
     const focusSelected = useCallback(() => {
         requestAnimationFrame(() => {