linear-react-components-ui 1.1.20-beta.33 → 1.1.20-beta.34

package/lib/menus/sidenav/index.d.ts

@@ -0,0 +1,16 @@
+export { default as NavMenuItem } from './NavMenuItem.js';
+export { default as NavSubMenuItem } from './NavSubMenuItem.js';
+export { default as NavMenuGroup } from './NavMenuGroup.js';
+export { default as ExpandedMenu } from './ExpandMenu.js';
+import { ISideNavProps } from './types.js';
+import 'react';
+import '../../@types/PermissionAttr.js';
+import '../../@types/Size.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const SideNav: (props: ISideNavProps) => JSX.Element;
+
+export { SideNav as default };

package/lib/menus/sidenav/index.js

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ExpandedMenu", {
+  enumerable: true,
+  get: function () {
+    return _ExpandMenu.default;
+  }
+});
+Object.defineProperty(exports, "NavMenuGroup", {
+  enumerable: true,
+  get: function () {
+    return _NavMenuGroup.default;
+  }
+});
+Object.defineProperty(exports, "NavMenuItem", {
+  enumerable: true,
+  get: function () {
+    return _NavMenuItem.default;
+  }
+});
+Object.defineProperty(exports, "NavSubMenuItem", {
+  enumerable: true,
+  get: function () {
+    return _NavSubMenuItem.default;
+  }
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var uuid = _interopRequireWildcard(require("uuid"));
+var _NavMenuItem = _interopRequireDefault(require("./NavMenuItem"));
+var _NavSubMenuItem = _interopRequireDefault(require("./NavSubMenuItem"));
+var _NavMenuGroup = _interopRequireDefault(require("./NavMenuGroup"));
+var _ExpandMenu = _interopRequireDefault(require("./ExpandMenu"));
+require("../../assets/styles/sidenav.scss");
+var _helpers = require("./helpers");
+var _icons = _interopRequireDefault(require("../../icons"));
+var constants = _interopRequireWildcard(require("../../internals/constants"));
+var _popup_menu_search = _interopRequireDefault(require("./popup_menu_search"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const SideNav = props => {
+  const {
+    customClass,
+    showExpandMenu,
+    expandMenuCustomClass,
+    expanded = true,
+    menuSize = 'medium',
+    onExpandMenuClick,
+    children,
+    enableMenuSearch,
+    menuSearchCustomComponent
+  } = props;
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(expanded);
+  const [menuItemsContent, setMenuItemsContent] = (0, _react.useState)([]);
+  const [sideNavDimensions, setSideNavDimensions] = (0, _react.useState)({});
+  const [openSearchMenuPopup, setOpenSearchMenuPopup] = (0, _react.useState)(false);
+  const sideNavRef = (0, _react.useRef)(null);
+  const onHeaderClick = () => {
+    setIsExpanded(!isExpanded);
+    if (onExpandMenuClick) onExpandMenuClick(!isExpanded);
+  };
+  const getPopupMenuSearchStyle = () => {
+    const {
+      left,
+      top,
+      width,
+      height
+    } = sideNavDimensions;
+    const style = `left: ${left + width + 5}px; top: ${top + 1}px; height: ${height - 8}px;`;
+    return style;
+  };
+  const closeSearchMenuPopup = () => {
+    setOpenSearchMenuPopup(false);
+  };
+  const compareChild = child => {
+    const {
+      type
+    } = child;
+    if ((type === _NavMenuItem.default || type === _NavSubMenuItem.default) && !child.props.children) {
+      setMenuItemsContent(prevState => [...prevState, {
+        id: child.props.id || `${child.props.title}-${uuid.v1()}`,
+        content: child.props.title,
+        url: child.props.url
+      }]);
+    }
+  };
+  const scanChildrenContent = childrenProps => {
+    if (Array.isArray(childrenProps)) {
+      childrenProps.forEach(child => {
+        if (child) {
+          compareChild(child);
+          if (child.props && child.props.children) scanChildrenContent(child.props.children);
+        }
+      });
+    } else if (childrenProps) {
+      compareChild(childrenProps);
+      if (childrenProps.props && childrenProps.props.children) scanChildrenContent(childrenProps.props.children);
+    }
+  };
+  const openSearchMenu = () => {
+    setOpenSearchMenuPopup(true);
+  };
+  const onKeyDown = e => {
+    if ([constants.keyCodes.F].includes(e.keyCode) && e.ctrlKey && e.shiftKey) {
+      e.preventDefault();
+      openSearchMenu();
+    }
+  };
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (enableMenuSearch && sideNavRef && sideNavRef.current) {
+      setSideNavDimensions(sideNavRef.current.getBoundingClientRect());
+    }
+    if (enableMenuSearch) scanChildrenContent(children);
+  }, []);
+  (0, _react.useEffect)(() => {
+    setIsExpanded(expanded);
+  }, [expanded]);
+  const returnMenuItems = () => menuItemsContent.filter(item => item.content !== '');
+  const getPopupMenuSearch = () => {
+    const searchProps = _objectSpread(_objectSpread({}, props), {}, {
+      style: getPopupMenuSearchStyle(),
+      handlerClose: closeSearchMenuPopup,
+      menuItemsContent: menuItemsContent && returnMenuItems()
+    });
+    return /*#__PURE__*/_react.default.createElement(_NavMenuGroup.default, {
+      key: `popup-menusearch-${uuid.v1()}`
+    }, /*#__PURE__*/_react.default.createElement(_NavMenuItem.default, {
+      childrenIsSubMenu: false,
+      customClass: "-customsidenavitem",
+      tooltip: "Pesquisar funcionalidades (CTRL+SHIFT+F)",
+      tooltipPosition: "right"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      key: "searchMenuIcon",
+      className: "searchmenubutton",
+      role: "button",
+      tabIndex: -1,
+      onKeyDown: () => {},
+      onClick: () => {
+        openSearchMenu();
+      }
+    }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+      name: "search",
+      customClass: "searchmenuicon",
+      size: menuSize === 'small' && 16 || menuSize === 'medium' && 22 || menuSize === 'large' && 32 || 16
+    })), openSearchMenuPopup && (menuSearchCustomComponent ? menuSearchCustomComponent(searchProps) : /*#__PURE__*/_react.default.createElement(_popup_menu_search.default, searchProps))));
+  };
+  const getSideNavContent = () => {
+    if (!enableMenuSearch) return children;
+    const items = [...children];
+    items.splice(1, 0, getPopupMenuSearch());
+    return items;
+  };
+  const contextValues = {
+    isExpanded,
+    menuSize,
+    openSearchMenuPopup
+  };
+  return /*#__PURE__*/_react.default.createElement(_helpers.SideNavContext.Provider, {
+    value: contextValues
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `sidenav-component ${isExpanded ? '-expanded' : ''} ${openSearchMenuPopup ? '-blocked' : ''} ${customClass}`,
+    ref: sideNavRef
+  }, showExpandMenu && /*#__PURE__*/_react.default.createElement(_ExpandMenu.default, {
+    expandMenuCustomClass: `${isExpanded && 'closefromexpanded'} ${expandMenuCustomClass}`,
+    onExpandMenu: onHeaderClick,
+    iconName: isExpanded ? 'arrow_left' : 'arrow_right'
+  }), getSideNavContent()));
+};
+var _default = exports.default = SideNav;

package/lib/menus/sidenav/popup_menu_search/EmptyList.d.ts

@@ -0,0 +1,12 @@
+import { IEmptyListProps } from '../types.js';
+import 'react';
+import '../../../@types/PermissionAttr.js';
+import '../../../@types/Size.js';
+import '../../../internals/types.js';
+import '../../../@types/Position.js';
+import '../../../@types/Icon.js';
+import '../../../icons/helper.js';
+
+declare const EmptyList: ({ info, visible, }: IEmptyListProps) => JSX.Element;
+
+export { EmptyList as default };

package/lib/menus/sidenav/popup_menu_search/EmptyList.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icons = _interopRequireDefault(require("../../../icons"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const EmptyList = _ref => {
+  let {
+    info,
+    visible = true
+  } = _ref;
+  if (!visible) return /*#__PURE__*/_react.default.createElement("noscript", null);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "nodata-container"
+  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+    name: "information",
+    color: "#bdbdbd",
+    size: 128
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    className: "subtext"
+  }, info));
+};
+var _default = exports.default = EmptyList;

package/lib/menus/sidenav/popup_menu_search/index.d.ts

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { IPopupMenuSearchProps } from '../types.js';
+import '../../../@types/PermissionAttr.js';
+import '../../../@types/Size.js';
+import '../../../internals/types.js';
+import '../../../@types/Position.js';
+import '../../../@types/Icon.js';
+import '../../../icons/helper.js';
+
+declare const PopupMenuSearch: (props: IPopupMenuSearchProps) => React__default.ReactPortal;
+
+export { PopupMenuSearch as default };

package/lib/menus/sidenav/popup_menu_search/index.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _search = _interopRequireDefault(require("../../../inputs/search"));
+var _list = _interopRequireWildcard(require("../../../list"));
+var _icons = _interopRequireDefault(require("../../../icons"));
+var _EmptyList = _interopRequireDefault(require("./EmptyList"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const body = document.getElementsByTagName('body')[0];
+const PopupMenuSearch = props => {
+  const {
+    style,
+    menuItemsContent,
+    handlerClose,
+    menuSearchEmptyMessage,
+    menuSearchPlaceholder
+  } = props;
+  const [searchFieldContent, setSearchFieldContent] = (0, _react.useState)('');
+  const [searchResult, setSearchResult] = (0, _react.useState)(menuItemsContent);
+  const [defaultSelectedItemId, setDefaultSelectedItemId] = (0, _react.useState)('');
+  const searchFieldRef = (0, _react.useRef)(null);
+  const popupRef = (0, _react.useRef)(document.createElement('div'));
+  Object.assign(popupRef.current, {
+    className: 'searchmenu',
+    style
+  });
+  const closeOnEsc = e => {
+    if (e.key === 'Escape') {
+      handlerClose();
+      e.stopPropagation();
+    }
+  };
+  (0, _react.useEffect)(() => {
+    body.appendChild(popupRef.current);
+    if (searchFieldRef && searchFieldRef.current) searchFieldRef.current.focus();
+    document.body.addEventListener('keydown', closeOnEsc);
+    return () => {
+      body.removeChild(popupRef.current);
+      document.body.removeEventListener('keydown', closeOnEsc);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    Object.assign(popupRef.current, {
+      style
+    });
+  }, [style]);
+  (0, _react.useEffect)(() => {
+    if (searchResult && searchResult.length > 0) setDefaultSelectedItemId(searchResult[0].id);
+  }, []);
+  const search = value => {
+    const filter = value.toLowerCase();
+    const result = menuItemsContent && menuItemsContent.filter(item => item.content.toLowerCase().includes(filter));
+    if (result && result.length > 0) setDefaultSelectedItemId(result[0].id);
+    setSearchFieldContent(value);
+    setSearchResult(result);
+  };
+  const returnList = () => {
+    if (searchResult && searchResult.length > 0) {
+      return /*#__PURE__*/_react.default.createElement(_list.default, {
+        condensed: true,
+        transparent: true,
+        selectable: true,
+        onSelectItem: handlerClose,
+        selectedItemId: defaultSelectedItemId,
+        selectOnEnter: true,
+        style: {
+          margin: '25px 0px',
+          border: 'none',
+          boxShadow: 'none'
+        }
+      }, searchResult.map(item => /*#__PURE__*/_react.default.createElement(_list.ListItem, {
+        key: item.id,
+        itemId: item.id,
+        url: item.url,
+        text: item.content
+      })));
+    }
+    return /*#__PURE__*/_react.default.createElement(_EmptyList.default, {
+      info: menuSearchEmptyMessage
+    });
+  };
+  const getPopupContent = () => /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    onClick: handlerClose,
+    className: "closebutton",
+    onKeyPress: () => {},
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+    name: "close",
+    size: 22
+  })), /*#__PURE__*/_react.default.createElement(_search.default, {
+    rounded: true,
+    onChange: e => {
+      if (e) search(e.target.value);
+    },
+    inputRef: searchFieldRef,
+    value: searchFieldContent,
+    placeHolder: menuSearchPlaceholder,
+    onReset: () => {
+      search('');
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '90%'
+    }
+  }, returnList()));
+  return /*#__PURE__*/_reactDom.default.createPortal(getPopupContent(), popupRef.current);
+};
+var _default = exports.default = PopupMenuSearch;

package/lib/menus/sidenav/types.d.ts

@@ -0,0 +1,90 @@
+import { ReactNode, ReactElement, CSSProperties } from 'react';
+import { PermissionAttr } from '../../@types/PermissionAttr.js';
+import { Size } from '../../@types/Size.js';
+import { WithTooltipProps } from '../../internals/types.js';
+import { IconNames } from '../../@types/Icon.js';
+import '../../@types/Position.js';
+import '../../icons/helper.js';
+
+interface ISideNavProps {
+    children: ReactNode;
+    expanded?: boolean;
+    menuSize?: Extract<Size, 'small' | 'medium' | 'large'>;
+    customClass?: string;
+    expandMenuCustomClass?: string;
+    onExpandMenuClick?: (value: boolean) => void;
+    showExpandMenu?: boolean;
+    enableMenuSearch?: boolean;
+    menuSearchEmptyMessage?: string;
+    menuSearchPlaceholder?: string;
+    menuSearchCustomComponent?: (props: IPopupMenuSearchProps) => ReactElement;
+}
+interface ISideNavDimensions {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+interface IMenuItemContent {
+    id: string;
+    content: string;
+    url: string;
+}
+interface IMenuLinkProps extends WithTooltipProps {
+    children: ReactElement;
+    url?: string;
+    targetRef?: ((ref: HTMLAnchorElement | null) => void) | null;
+    disabled?: boolean;
+}
+interface INavMenuGroupProps {
+    children: ReactNode;
+    scrollable?: boolean;
+    style?: CSSProperties;
+}
+interface INavMenuItemProps extends WithTooltipProps {
+    children?: ReactNode;
+    title?: string;
+    iconName?: IconNames;
+    childrenIsSubMenu?: boolean;
+    url?: string;
+    customClass?: string;
+    permissionAttr?: PermissionAttr | PermissionAttr[];
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    columnsQtty?: number;
+    targetRef?: (ref: HTMLLIElement | null) => void;
+    disableDefaultStyle?: boolean;
+    showDropdownOnClick?: boolean;
+    style?: CSSProperties;
+    customClassForDropdown?: string;
+}
+interface INavSubMenuItemProps {
+    title: string;
+    url?: string;
+    permissionAttr?: PermissionAttr | PermissionAttr[];
+}
+interface IExpandMenuProps {
+    expandMenuCustomClass?: string;
+    onExpandMenu?: () => void;
+    iconName: IconNames;
+}
+interface IEmptyListProps {
+    info?: string;
+    visible?: boolean;
+}
+interface IPopupMenuSearchProps extends ISideNavProps {
+    menuItemsContent?: IMenuItemContent[];
+    handlerClose: () => void;
+    style?: CSSProperties | string;
+}
+interface ISubMenuContext {
+    toggleSubMenu: () => void;
+}
+interface ISideNavContext {
+    isExpanded?: boolean;
+    menuSize?: Extract<Size, 'small' | 'medium' | 'large'>;
+    openSearchMenuPopup?: boolean;
+}
+type ITargetDimensions = DOMRect;
+
+export { IEmptyListProps, IExpandMenuProps, IMenuItemContent, IMenuLinkProps, INavMenuGroupProps, INavMenuItemProps, INavSubMenuItemProps, IPopupMenuSearchProps, ISideNavContext, ISideNavDimensions, ISideNavProps, ISubMenuContext, ITargetDimensions };

package/lib/menus/sidenav/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/noPermission/index.d.ts

@@ -0,0 +1,3 @@
+declare const NoPermission: () => JSX.Element;
+
+export { NoPermission as default };

package/lib/noPermission/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icons = _interopRequireDefault(require("../icons"));
+require("../assets/styles/noPermission.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const NoPermission = () => /*#__PURE__*/_react.default.createElement("div", {
+  className: "no-permission-component",
+  "data-testid": "no-permission-component"
+}, /*#__PURE__*/_react.default.createElement(_icons.default, {
+  name: "warning",
+  size: 128,
+  color: "#bdbdbd"
+}), /*#__PURE__*/_react.default.createElement("p", {
+  className: "text"
+}, "Acesso Negado"), /*#__PURE__*/_react.default.createElement("p", {
+  className: "subtext"
+}, "Voc\xEA n\xE3o tem permiss\xE3o para acessar este conte\xFAdo. Consulte o Administrador do sistema!"));
+var _default = exports.default = NoPermission;

package/lib/panel/Content.d.ts

@@ -0,0 +1,10 @@
+import { IPanelContentProps } from './types.js';
+import 'react';
+import '../@types/PermissionAttr.js';
+import '../internals/colorStyles.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
+
+declare const PanelContent: ({ customClass, children, ...rest }: IPanelContentProps) => JSX.Element | null;
+
+export { PanelContent as default };

package/lib/panel/Content.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _helpers = _interopRequireWildcard(require("./helpers"));
+var _noPermission = _interopRequireDefault(require("../noPermission"));
+const _excluded = ["customClass", "children"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const PanelContent = _ref => {
+  let {
+      customClass,
+      children
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const {
+    opened,
+    onEndReached,
+    onEndReachedThreshold = 0.1,
+    hideContent
+  } = (0, _react.useContext)(_helpers.default);
+  const rootElementRef = (0, _react.useRef)(null);
+  const lastScrollHeight = (0, _react.useRef)(0);
+  const enableOnEndReached = (0, _react.useRef)(true);
+  const onScrollEndReached = (0, _react.useCallback)(async () => {
+    const element = rootElementRef.current;
+    if (element && onEndReached) {
+      const {
+        scrollTop,
+        scrollHeight,
+        clientHeight
+      } = element;
+      const scrollOffset = scrollHeight - clientHeight - scrollTop - 1;
+      const threshold = (0, _helpers.getCurrentThreshold)(element, onEndReachedThreshold);
+      if (scrollOffset <= threshold && enableOnEndReached.current) {
+        enableOnEndReached.current = false;
+        await new Promise(resolve => {
+          resolve(onEndReached());
+        });
+        lastScrollHeight.current = scrollHeight;
+      }
+    }
+  }, [onEndReached, onEndReachedThreshold, rootElementRef.current, lastScrollHeight.current]);
+  (0, _react.useEffect)(() => {
+    let observer;
+    if (rootElementRef.current && onEndReached) {
+      observer = new ResizeObserver(() => {
+        const {
+          scrollHeight
+        } = rootElementRef.current;
+        if (scrollHeight !== lastScrollHeight.current) {
+          enableOnEndReached.current = true;
+          observer?.disconnect();
+        }
+      });
+      observer.observe(rootElementRef.current);
+      rootElementRef.current.addEventListener('scroll', onScrollEndReached);
+      rootElementRef.current.addEventListener('resize', onScrollEndReached);
+    }
+    return () => {
+      rootElementRef.current?.removeEventListener('scroll', onScrollEndReached);
+      rootElementRef.current?.removeEventListener('resize', onScrollEndReached);
+      observer?.disconnect();
+    };
+  }, [onScrollEndReached]);
+  if (!opened) return null;
+  return hideContent ? /*#__PURE__*/_react.default.createElement(_noPermission.default, null) : /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: rootElementRef,
+    className: `panel-content ${customClass ?? ''}`
+  }, rest), opened && children);
+};
+var _default = exports.default = PanelContent;

package/lib/panel/DangerPanel.d.ts

@@ -0,0 +1,10 @@
+import { IPanelProps } from './types.js';
+import 'react';
+import '../@types/PermissionAttr.js';
+import '../internals/colorStyles.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
+
+declare const DangerPanel: (props: IPanelProps) => JSX.Element;
+
+export { DangerPanel as default };

package/lib/panel/DangerPanel.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Default = _interopRequireDefault(require("./Default"));
+var _colorStyles = _interopRequireDefault(require("../internals/colorStyles"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const DangerPanel = props => /*#__PURE__*/_react.default.createElement(_Default.default, _extends({}, props, {
+  colorStyle: _colorStyles.default.DANGER
+}));
+var _default = exports.default = DangerPanel;

package/lib/panel/Default.d.ts

@@ -0,0 +1,10 @@
+import { IPanelProps } from './types.js';
+import 'react';
+import '../@types/PermissionAttr.js';
+import '../internals/colorStyles.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
+
+declare const DefaultPanel: ({ startOpened, toggleable, customClass, children, title, gridCols, onEndReached, onEndReachedThreshold, permissionAttr, colorStyle, ...rest }: IPanelProps) => JSX.Element | null;
+
+export { DefaultPanel as default };