blue-react 10.2.0 → 11.0.0

package/dist/components/IconMenuItem.js

@@ -1,9 +1,15 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["label", "outerClass", "tooltipClass", "horizontalOnOpenSidebar", "className"];
-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; }
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React from "react";
-import MenuItem from "./MenuItem.js";
+import MenuItem from "./LegacyMenuItem.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Variant of `MenuItem` to primarily display an icon without a label.
  * The label prop will be displayed as a tooltip.
@@ -19,11 +25,12 @@ export default function IconMenuItem(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: "".concat(tooltipClass, " ").concat(horizontalOnOpenSidebar ? "blue-sidebar-menu-horizontal-on-open" : "", " ").concat(outerClass),
-    "data-tooltip": label
-  }, /*#__PURE__*/React.createElement(MenuItem, _extends({}, props, {
-    className: "".concat(className, " w-100"),
-    iconClassName: "w-100"
-  })));
+    "data-tooltip": label,
+    children: /*#__PURE__*/_jsx(MenuItem, _objectSpread(_objectSpread({}, props), {}, {
+      className: "".concat(className, " w-100"),
+      iconClassName: "w-100"
+    }))
+  });
 }

package/dist/components/Intro.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Can be used for a sign-in page.
  */
@@ -8,21 +9,26 @@ export default function Intro(_ref) {
     logoMaxWidth = _ref$logoMaxWidth === void 0 ? "100px" : _ref$logoMaxWidth,
     title = _ref.title,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "sign-in-screen"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "sign-in-container mx-1"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "bg-body rounded-3 shadow-lg px-4 py-5"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-center"
-  }, /*#__PURE__*/React.createElement("img", {
-    style: {
-      maxWidth: logoMaxWidth
-    },
-    src: logo,
-    alt: ""
-  }), /*#__PURE__*/React.createElement("h2", {
-    className: "mt-4 mb-3"
-  }, title)), children)));
+  return /*#__PURE__*/_jsx("div", {
+    className: "sign-in-screen",
+    children: /*#__PURE__*/_jsx("div", {
+      className: "sign-in-container mx-1",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "bg-body rounded-3 shadow-lg px-4 py-5",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "text-center",
+          children: [/*#__PURE__*/_jsx("img", {
+            style: {
+              maxWidth: logoMaxWidth
+            },
+            src: logo,
+            alt: ""
+          }), /*#__PURE__*/_jsx("h2", {
+            className: "mt-4 mb-3",
+            children: title
+          })]
+        }), children]
+      })
+    })
+  });
 }

package/dist/components/Layout.js

@@ -1,6 +1,7 @@
 import React from "react";
 import clsx from "clsx";
 import { getPhrase } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A layout with header, side and main content area. Side is collapsible.
  */
@@ -12,76 +13,83 @@ export default function Layout(_ref) {
     side = _ref.side,
     _ref$noPageBorder = _ref.noPageBorder,
     noPageBorder = _ref$noPageBorder === void 0 ? false : _ref$noPageBorder;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: clsx("blue-layout", className),
-    style: style
-  }, /*#__PURE__*/React.createElement("input", {
-    id: "layout-expand",
-    type: "checkbox",
-    className: "blue-layout-state blue-layout-state-expand",
-    defaultChecked: true
-  }), /*#__PURE__*/React.createElement("label", {
-    className: "blue-layout-toggle blue-layout-toggle-expand",
-    htmlFor: "layout-expand",
-    title: getPhrase("Toggle menu"),
-    "aria-label": getPhrase("Toggle menu"),
-    role: "button"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0"
-  }, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    width: "1em",
-    height: "1em",
-    fill: "currentColor",
-    className: "bi bi-layout-sidebar"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5-1v12h9a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM4 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2z"
-  })))), /*#__PURE__*/React.createElement("input", {
-    id: "layout-drawer",
-    type: "checkbox",
-    className: "blue-layout-state blue-layout-state-drawer"
-  }), /*#__PURE__*/React.createElement("label", {
-    className: "blue-layout-toggle blue-layout-toggle-drawer",
-    htmlFor: "layout-drawer",
-    title: getPhrase("Toggle menu"),
-    "aria-label": getPhrase("Toggle menu"),
-    role: "button"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0"
-  }, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    width: "1em",
-    height: "1em",
-    fill: "currentColor",
-    className: "bi bi-layout-sidebar-inset"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zM2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M3 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"
-  })))), /*#__PURE__*/React.createElement("header", {
-    className: "blue-layout-header"
-  }, header), /*#__PURE__*/React.createElement("aside", {
-    className: "blue-layout-side blue-sidebar-state open h-100 overflow-y-auto overflow-x-hidden",
-    style: {
-      color: "var(--blue-sidebar-color)",
-      background: "var(--blue-sidebar-bg)"
-    }
-  }, side), /*#__PURE__*/React.createElement("main", {
-    className: "blue-layout-main"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: clsx("blue-layout-body", {
-      "border-0": noPageBorder
-    })
-  }, children)), /*#__PURE__*/React.createElement("label", {
-    "aria-label": "Close sidebar",
-    htmlFor: "layout-drawer",
-    className: "blue-layout-overlay bg-dark w-100 h-100",
-    style: {
-      "--bs-bg-opacity": 0.5
-    }
-  }));
+    style: style,
+    children: [/*#__PURE__*/_jsx("input", {
+      id: "layout-expand",
+      type: "checkbox",
+      className: "blue-layout-state blue-layout-state-expand",
+      defaultChecked: true
+    }), /*#__PURE__*/_jsx("label", {
+      className: "blue-layout-toggle blue-layout-toggle-expand",
+      htmlFor: "layout-expand",
+      title: getPhrase("Toggle menu"),
+      "aria-label": getPhrase("Toggle menu"),
+      role: "button",
+      children: /*#__PURE__*/_jsx("span", {
+        className: "btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0",
+        children: /*#__PURE__*/_jsx("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 16 16",
+          "aria-hidden": "true",
+          width: "1em",
+          height: "1em",
+          fill: "currentColor",
+          className: "bi bi-layout-sidebar",
+          children: /*#__PURE__*/_jsx("path", {
+            d: "M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5-1v12h9a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM4 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2z"
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx("input", {
+      id: "layout-drawer",
+      type: "checkbox",
+      className: "blue-layout-state blue-layout-state-drawer"
+    }), /*#__PURE__*/_jsx("label", {
+      className: "blue-layout-toggle blue-layout-toggle-drawer",
+      htmlFor: "layout-drawer",
+      title: getPhrase("Toggle menu"),
+      "aria-label": getPhrase("Toggle menu"),
+      role: "button",
+      children: /*#__PURE__*/_jsx("span", {
+        className: "btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0",
+        children: /*#__PURE__*/_jsxs("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 16 16",
+          "aria-hidden": "true",
+          width: "1em",
+          height: "1em",
+          fill: "currentColor",
+          className: "bi bi-layout-sidebar-inset",
+          children: [/*#__PURE__*/_jsx("path", {
+            d: "M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zM2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z"
+          }), /*#__PURE__*/_jsx("path", {
+            d: "M3 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx("header", {
+      className: "blue-layout-header",
+      children: header
+    }), /*#__PURE__*/_jsx("aside", {
+      className: "blue-layout-side",
+      children: side
+    }), /*#__PURE__*/_jsx("main", {
+      className: "blue-layout-main",
+      children: /*#__PURE__*/_jsx("div", {
+        className: clsx("blue-layout-body", {
+          "border-0": noPageBorder
+        }),
+        children: children
+      })
+    }), /*#__PURE__*/_jsx("label", {
+      "aria-label": "Close sidebar",
+      htmlFor: "layout-drawer",
+      className: "blue-layout-overlay bg-dark w-100 h-100",
+      style: {
+        "--bs-bg-opacity": 0.5
+      }
+    })]
+  });
 }

package/dist/{types/components/MenuItem.d.ts → components/LegacyMenuItem.d.ts}

@@ -1,149 +1,150 @@
-import React, { CSSProperties } from "react";
-export interface MenuItemProps {
-    /**
-     * Sets `to` prop, e.g. when you use the `NavLink` component from React Router.
-     */
-    to?: string;
-    /**
-     * Prop for components by React Router.
-     */
-    exact?: boolean;
-    href?: string;
-    onClick?: (event: React.MouseEvent) => void;
-    /**
-     * Will be fired after `onClick`
-     */
-    onClickAttached?: (event: React.MouseEvent) => void;
-    /**
-     * Icon component or a class name.
-     */
-    icon?: any;
-    /**
-     * Addition to class name of icon wrapper element
-     */
-    iconClassName?: string;
-    /**
-     * Icon component or a class name when the MenuItem is active.
-     */
-    iconForActive?: any;
-    /**
-     * Label of the link.
-     */
-    label?: any;
-    /**
-     * Addition to class name of label wrapper element
-     */
-    labelClassName?: string;
-    /**
-     * Addition to class name of caret
-     */
-    caretClassName?: string;
-    /**
-     * Addition to style of caret
-     */
-    caretStyle?: CSSProperties;
-    /**
-     * Should be set as active.
-     */
-    isActive?: boolean;
-    /**
-     * Set true to highlight the current menu item.
-     */
-    highlighted?: boolean;
-    /**
-     * When using Blue React's routing system: define this link as home page link.
-     */
-    isHome?: boolean;
-    /**
-     * Extends class name of the dropdown menu.
-     */
-    dropdownClassName?: string;
-    /**
-     * Extends style of the dropdown menu.
-     */
-    dropdownStyle?: CSSProperties;
-    /**
-     * Set children to create a nested `MenuItem` as a dropdown.
-     */
-    children?: any;
-    /**
-     * Defines class name.
-     */
-    className?: any;
-    /**
-     * Defines dropdown status from outside.
-     */
-    showDropdown?: boolean;
-    /**
-     * Callback when `showDropdown` changes.
-     */
-    onShowDropdown?: (showDropdown: boolean) => void;
-    /**
-     * Close on click outside.
-     */
-    supportOutside?: boolean;
-    /**
-     * Overrides default class list to be ignored on click outside.
-     * Hint: If you want this menu item to stay open when others will open, set:
-     * `outsideIgnoreClasses={["blue-menu-item-wrapper"]}`.
-     */
-    outsideIgnoreClasses?: string[];
-    /**
-     * By default, MenuItem is a `"button"`. If you set a `href`, it's a `"a"`.
-     * If you want to have it another type, you can pass a component reference with this prop (e.g. `Link`).
-     */
-    elementType?: any;
-    target?: string;
-    rel?: string;
-    title?: string;
-    type?: string;
-    /**
-     * Fired on the draggable target (the source element): occurs when the user starts to drag an element
-     */
-    onDragStart?: (event: React.DragEvent) => void | React.DragEventHandler;
-    /**
-     * Fired on the draggable target (the source element): occurs when an element is being dragged
-     */
-    onDrag?: (event: React.DragEvent) => void | React.DragEventHandler;
-    /**
-     * Fired on the draggable target (the source element): occurs when the user has finished dragging the element
-     */
-    onDragEnd?: (event: React.DragEvent) => void | React.DragEventHandler;
-    /**
-     * Fired on the drop target: occurs when the dragged element enters the drop target
-     */
-    onDragEnter?: (event: React.DragEvent) => void | React.DragEventHandler;
-    /**
-     * Fired on the drop target: occurs when the dragged element is over the drop target
-     */
-    onDragOver?: (event: React.DragEvent) => void | React.DragEventHandler;
-    /**
-     * Fired on the drop target: occurs when the dragged element leaves the drop target
-     */
-    onDragLeave?: (event: React.DragEvent) => void | React.DragEventHandler;
-    /**
-     * Fired on the drop target: occurs when the dragged element is dropped on the drop target
-     */
-    onDrop?: (event: React.DragEvent) => void | React.DragEventHandler;
-    /**
-     * Specifies whether an element is draggable or not.
-     *
-     * **Important:** To make draggable menu items work in Firefox, the elementType must not be `"button"`. Set it to something else, like `"div"`.
-     */
-    draggable?: boolean;
-    hideDraggableIcon?: boolean;
-    "data-tooltip"?: string;
-    /**
-     * Specifies whether an element is disabled or not.
-     */
-    disabled?: boolean;
-    /**
-     * Specifies style of an element.
-     */
-    style?: React.CSSProperties;
-    id?: string;
-}
-/**
- * Link, button or custom component for Sidebar, Actions or ActionMenu
- */
-export default function MenuItem(props: MenuItemProps): JSX.Element;
+import React, { CSSProperties } from "react";
+export interface LegacyMenuItemProps {
+    /**
+     * Sets `to` prop, e.g. when you use the `NavLink` component from React Router.
+     */
+    to?: string;
+    /**
+     * Prop for components by React Router.
+     */
+    exact?: boolean;
+    href?: string;
+    onClick?: (event: React.MouseEvent) => void;
+    /**
+     * Will be fired after `onClick`
+     */
+    onClickAttached?: (event: React.MouseEvent) => void;
+    /**
+     * Icon component or a class name.
+     */
+    icon?: any;
+    /**
+     * Addition to class name of icon wrapper element
+     */
+    iconClassName?: string;
+    /**
+     * Icon component or a class name when the MenuItem is active.
+     */
+    iconForActive?: any;
+    /**
+     * Label of the link.
+     */
+    label?: any;
+    /**
+     * Addition to class name of label wrapper element
+     */
+    labelClassName?: string;
+    /**
+     * Addition to class name of caret
+     */
+    caretClassName?: string;
+    /**
+     * Addition to style of caret
+     */
+    caretStyle?: CSSProperties;
+    /**
+     * Should be set as active.
+     */
+    isActive?: boolean;
+    /**
+     * Set true to highlight the current menu item.
+     */
+    highlighted?: boolean;
+    /**
+     * When using Blue React's routing system: define this link as home page link.
+     */
+    isHome?: boolean;
+    /**
+     * Extends class name of the dropdown menu.
+     */
+    dropdownClassName?: string;
+    /**
+     * Extends style of the dropdown menu.
+     */
+    dropdownStyle?: CSSProperties;
+    /**
+     * Set children to create a nested `MenuItem` as a dropdown.
+     */
+    children?: any;
+    /**
+     * Defines class name.
+     */
+    className?: any;
+    /**
+     * Defines dropdown status from outside.
+     */
+    showDropdown?: boolean;
+    /**
+     * Callback when `showDropdown` changes.
+     */
+    onShowDropdown?: (showDropdown: boolean) => void;
+    /**
+     * Close on click outside.
+     */
+    supportOutside?: boolean;
+    /**
+     * Overrides default class list to be ignored on click outside.
+     * Hint: If you want this menu item to stay open when others will open, set:
+     * `outsideIgnoreClasses={["blue-menu-item-wrapper"]}`.
+     */
+    outsideIgnoreClasses?: string[];
+    /**
+     * By default, MenuItem is a `"button"`. If you set a `href`, it's a `"a"`.
+     * If you want to have it another type, you can pass a component reference with this prop (e.g. `Link`).
+     */
+    elementType?: any;
+    target?: string;
+    rel?: string;
+    title?: string;
+    type?: string;
+    /**
+     * Fired on the draggable target (the source element): occurs when the user starts to drag an element
+     */
+    onDragStart?: (event: React.DragEvent) => void | React.DragEventHandler;
+    /**
+     * Fired on the draggable target (the source element): occurs when an element is being dragged
+     */
+    onDrag?: (event: React.DragEvent) => void | React.DragEventHandler;
+    /**
+     * Fired on the draggable target (the source element): occurs when the user has finished dragging the element
+     */
+    onDragEnd?: (event: React.DragEvent) => void | React.DragEventHandler;
+    /**
+     * Fired on the drop target: occurs when the dragged element enters the drop target
+     */
+    onDragEnter?: (event: React.DragEvent) => void | React.DragEventHandler;
+    /**
+     * Fired on the drop target: occurs when the dragged element is over the drop target
+     */
+    onDragOver?: (event: React.DragEvent) => void | React.DragEventHandler;
+    /**
+     * Fired on the drop target: occurs when the dragged element leaves the drop target
+     */
+    onDragLeave?: (event: React.DragEvent) => void | React.DragEventHandler;
+    /**
+     * Fired on the drop target: occurs when the dragged element is dropped on the drop target
+     */
+    onDrop?: (event: React.DragEvent) => void | React.DragEventHandler;
+    /**
+     * Specifies whether an element is draggable or not.
+     *
+     * **Important:** To make draggable menu items work in Firefox, the elementType must not be `"button"`. Set it to something else, like `"div"`.
+     */
+    draggable?: boolean;
+    hideDraggableIcon?: boolean;
+    "data-tooltip"?: string;
+    /**
+     * Specifies whether an element is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies style of an element.
+     */
+    style?: React.CSSProperties;
+    id?: string;
+}
+/**
+ * @deprecated
+ * Link, button or custom component for Sidebar, Actions or ActionMenu
+ */
+export default function LegacyMenuItem(props: LegacyMenuItemProps): import("react/jsx-runtime").JSX.Element;