blue-react 10.1.3 → 10.2.0

package/dist/components/ActionMenu.d.ts

@@ -20,6 +20,7 @@ export interface ActionMenuProps {
     break?: breakOption | "none";
 }
 /**
+ * @deprecated Use the new `Actions` instead, which is more flexible.
  * The Action Menu on the top right of a page. You can place Actions here which are in context of the current page.
  */
 export default function ActionMenu(props: ActionMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ActionMenu.js

@@ -11,6 +11,7 @@ export var ActionMenuContext = /*#__PURE__*/createContext({
   breakOption: "lg"
 });
 /**
+ * @deprecated Use the new `Actions` instead, which is more flexible.
  * The Action Menu on the top right of a page. You can place Actions here which are in context of the current page.
  */
 export default function ActionMenu(props) {

package/dist/components/ActionMenuItem.js

@@ -0,0 +1,73 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ActionMenuItem;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _MenuItem = _interopRequireDefault(require("./MenuItem"));
+
+var _ActionMenu = require("./ActionMenu");
+
+var _excluded = ["children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+/**
+ * Use this instead of `MenuItem` when you want to use it inside an `ActionMenu` to make it appear as a dropdown.
+ *
+ * It basically is a shortcut. Instead of writing:
+ *
+ * ```tsx
+ * <ActionMenu>
+ *     <div className="position-relative z-1">
+ *         <MenuItem
+ *             label="Parent"
+ *             supportOutside
+ *             dropdownClassName={`position-md-absolute end-0 d-flex flex-column`}
+ *         >
+ *             <MenuItem label="Item 1" />
+ *         </MenuItem>
+ *     </div>
+ * </ActionMenu>
+ * ```
+ *
+ * you can write:
+ * ```tsx
+ * <ActionMenu>
+ *     <ActionMenuItem label="Parent">
+ *         <MenuItem label="Item 1" />
+ *     </MenuItem>
+ * </ActionMenu>
+ * ```
+ *
+ * The responsive utility class for absolute position (`position-md-absolute` in this example) is automatically added based on the `break` param of the parent `ActionMenu`.
+ */
+function ActionMenuItem(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useContext = (0, _react.useContext)(_ActionMenu.ActionMenuContext),
+      breakOption = _useContext.breakOption;
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "position-relative z-1"
+  }, /*#__PURE__*/_react.default.createElement(_MenuItem.default, _extends({}, props, {
+    supportOutside: true,
+    dropdownClassName: "position-".concat(breakOption, "-absolute end-0 d-flex flex-column")
+  }), children));
+}

package/dist/components/ActionMenuSwitch.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ActionMenuSwitch;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Switch = _interopRequireDefault(require("./Switch"));
+
+var _excluded = ["label"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+/**
+ * @deprecated
+ * Use a solution with Bootstrap's `.form-check.form-switch` or `MenuItem` with a switch icon.
+ * Switch for the Action Menu.
+ */
+function ActionMenuSwitch(_ref) {
+  var label = _ref.label,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement("li", {
+    className: "nav-item"
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: "javascript:void(0)",
+    className: "nav-link blue-actions-menu-item",
+    onClick: function onClick() {
+      if (props.onChange) props.onChange();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Switch.default, _extends({}, props, {
+    elementType: "span"
+  })), label && /*#__PURE__*/_react.default.createElement("span", {
+    className: "blue-actions-label"
+  }, "\xA0", label)));
+}

package/dist/components/Actions.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from "react";
+export interface ActionsProps {
+    children?: ReactNode;
+    className?: string;
+    menuClassName?: string;
+    collapseClassName?: string;
+    collapseStyle?: CSSProperties;
+    collapseMenuClassName?: string;
+    collapseMenuStyle?: CSSProperties;
+}
+/**
+ * Combination of toolbar and a dropdown menu. Items in toolbar will only be shown if there is enough space.
+ * Otherwise they will be visible in the dropdown menu. JavaScript detects if space is changing and rearranges.
+ * IMPORTANT: As of right now, children you pass will be rendered twice. Once in the toolbar and once in the dropdown.
+ */
+export default function Actions({ children, className, menuClassName, collapseClassName, collapseStyle, collapseMenuClassName, collapseMenuStyle }: ActionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Actions.js

@@ -0,0 +1,60 @@
+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); }
+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); }
+import React, { useEffect, useId, useRef } from "react";
+import { getPhrase } from "./shared.js";
+import clsx from "clsx";
+import { init } from "blue-web/dist/js/actions.js";
+/**
+ * Combination of toolbar and a dropdown menu. Items in toolbar will only be shown if there is enough space.
+ * Otherwise they will be visible in the dropdown menu. JavaScript detects if space is changing and rearranges.
+ * IMPORTANT: As of right now, children you pass will be rendered twice. Once in the toolbar and once in the dropdown.
+ */
+export default function Actions(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    menuClassName = _ref.menuClassName,
+    collapseClassName = _ref.collapseClassName,
+    collapseStyle = _ref.collapseStyle,
+    collapseMenuClassName = _ref.collapseMenuClassName,
+    collapseMenuStyle = _ref.collapseMenuStyle;
+  var element = useRef(null);
+  var id = "Actions_Dropdown_".concat(useId().replace(/:/g, "-"));
+  useEffect(function () {
+    if (element.current) {
+      var _init = init(element.current),
+        destroy = _init.destroy;
+      return function () {
+        destroy();
+      };
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: element,
+    className: clsx("BLUE-actions", className),
+    role: "toolbar",
+    "aria-label": getPhrase("Toolbar with buttons and button groups")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx("BLUE-actions-menu", menuClassName)
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: clsx("BLUE-actions-collapse", collapseClassName),
+    style: _objectSpread(_defineProperty({}, "--blue-anchor-name", "--action-".concat(id)), collapseStyle)
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    popoverTarget: id,
+    className: "blue-anchor blue-menu-item btn px-3"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "blue-menu-item-icon",
+    "aria-hidden": true
+  }, "\u22EE"), /*#__PURE__*/React.createElement("span", {
+    className: "visually-hidden"
+  }, getPhrase("Toggle menu"))), /*#__PURE__*/React.createElement("div", {
+    id: id,
+    popover: "",
+    className: clsx("BLUE-actions-collapse-menu blue-anchored blue-anchored-end blue-anchored-fallback", "blue-menu-item-dropdown text-body", collapseMenuClassName),
+    style: _objectSpread(_defineProperty({}, "--blue-menu-item-dropdown-bg", "var(--bs-body-bg)"), collapseMenuStyle)
+  }, children)));
+}

package/dist/components/Caret.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Caret;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @deprecated Will be replaced by the `Chevron` component in the next major version.
+ * Caret icon component.
+ */
+function Caret(_ref) {
+  var open = _ref.open,
+      mirrored = _ref.mirrored,
+      className = _ref.className,
+      style = _ref.style;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "blue-caret " + (open ? " blue-caret-open " : "") + (mirrored ? " blue-caret-mirrored " : "") + className,
+    style: style
+  });
+}

package/dist/components/Layout/LayoutHeader.js

@@ -14,7 +14,7 @@ export default function LayoutHeader(_ref) {
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("header", _extends({
-    className: "d-flex justify-content-between position-relative h-100 ".concat(className),
+    className: "d-flex justify-content-between position-relative h-100 overflow-auto ".concat(className),
     style: _objectSpread({
       color: "var(--blue-sidebar-color)",
       background: "var(--blue-sidebar-bg)",

package/dist/components/Layout.d.ts

@@ -1,6 +1,8 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 export interface LayoutProps {
     children?: React.ReactNode;
+    className?: string;
+    style?: CSSProperties;
     header?: React.ReactNode;
     side?: React.ReactNode;
     noPageBorder?: boolean;
@@ -8,4 +10,4 @@ export interface LayoutProps {
 /**
  * A layout with header, side and main content area. Side is collapsible.
  */
-export default function Layout({ children, header, side, noPageBorder }: LayoutProps): import("react/jsx-runtime").JSX.Element;
+export default function Layout({ children, className, style, header, side, noPageBorder }: LayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Layout.js

@@ -1,18 +1,20 @@
 import React from "react";
-import LayoutHeader from "./Layout/LayoutHeader.js";
-import LayoutMain from "./Layout/LayoutMain.js";
+import clsx from "clsx";
 import { getPhrase } from "./shared.js";
 /**
  * A layout with header, side and main content area. Side is collapsible.
  */
 export default function Layout(_ref) {
   var children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
     header = _ref.header,
     side = _ref.side,
     _ref$noPageBorder = _ref.noPageBorder,
     noPageBorder = _ref$noPageBorder === void 0 ? false : _ref$noPageBorder;
   return /*#__PURE__*/React.createElement("div", {
-    className: "blue-layout"
+    className: clsx("blue-layout", className),
+    style: style
   }, /*#__PURE__*/React.createElement("input", {
     id: "layout-expand",
     type: "checkbox",
@@ -22,6 +24,7 @@ export default function Layout(_ref) {
     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"
@@ -29,13 +32,11 @@ export default function Layout(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
     "aria-hidden": "true",
-    tabIndex: -1,
     width: "1em",
     height: "1em",
     fill: "currentColor",
     className: "bi bi-layout-sidebar"
   }, /*#__PURE__*/React.createElement("path", {
-    tabIndex: -1,
     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",
@@ -45,6 +46,7 @@ export default function Layout(_ref) {
     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"
@@ -52,20 +54,17 @@ export default function Layout(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
     "aria-hidden": "true",
-    tabIndex: -1,
     width: "1em",
     height: "1em",
     fill: "currentColor",
     className: "bi bi-layout-sidebar-inset"
   }, /*#__PURE__*/React.createElement("path", {
-    tabIndex: -1,
     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", {
-    tabIndex: -1,
     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"
-  }, /*#__PURE__*/React.createElement(LayoutHeader, null, header)), /*#__PURE__*/React.createElement("aside", {
+  }, 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)",
@@ -73,8 +72,10 @@ export default function Layout(_ref) {
     }
   }, side), /*#__PURE__*/React.createElement("main", {
     className: "blue-layout-main"
-  }, /*#__PURE__*/React.createElement(LayoutMain, {
-    noPageBorder: noPageBorder
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx("blue-layout-body", {
+      "border-0": noPageBorder
+    })
   }, children)), /*#__PURE__*/React.createElement("label", {
     "aria-label": "Close sidebar",
     htmlFor: "layout-drawer",

package/dist/components/SidebarMenuItem.js

@@ -0,0 +1,115 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SidebarMenuItem;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _MenuItem = _interopRequireDefault(require("./MenuItem"));
+
+var _Outside = _interopRequireDefault(require("./Outside"));
+
+var _excluded = ["outerClass", "children", "onClick"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+/**
+ * @deprecated `MenuItem` now has all the features of `SidebarMenuItem`. Use `MenuItem` instead.
+ * Extends `MenuItem` with following features:
+ * * Shows provided label as tooltip if sidebar is closed.
+ * * Children will be displayed on the right side of the parent item.
+ *
+ * **Important!** Set the following props to the surrounding `SidebarMenu` to provide problems with tooltips:
+ * ```jsx
+ * <SidebarMenu
+ *     sidebarClass="overflow-visible"
+ *     menuClass="overflow-visible"
+ * >
+ *     ...
+ * </SidebarMenu>
+ * ```
+ */
+function SidebarMenuItem(_ref) {
+  var _ref$outerClass = _ref.outerClass,
+      outerClass = _ref$outerClass === void 0 ? "" : _ref$outerClass,
+      children = _ref.children,
+      onClick = _ref.onClick,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var toggle = function toggle() {
+    return setOpen(!open);
+  };
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      offsetTop = _useState4[0],
+      setOffsetTop = _useState4[1];
+
+  var menuRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    setOpen(false);
+  }, [window.location.hash]);
+  (0, _react.useEffect)(function () {
+    if (menuRef && menuRef.current) {
+      setOffsetTop(menuRef.current.getBoundingClientRect().top);
+    }
+  }, [menuRef, open]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children ? /*#__PURE__*/_react.default.createElement(_Outside.default, {
+    className: "position-relative ".concat(outerClass),
+    onClickOutside: function onClickOutside() {
+      setOpen(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(SidebarMenuItem, _extends({}, props, {
+    highlighted: open,
+    onClick: toggle
+  })), open && /*#__PURE__*/_react.default.createElement("div", {
+    ref: menuRef,
+    className: ["position-absolute", "shadow", "top-0", "ms-1", "rounded", "w-bla-sidebar-width", "blue-menu-item-dropdown-from-start"].join(" "),
+    style: {
+      left: "var(--blue-sidebar-width, 3rem)",
+      maxHeight: "calc(100vh - (".concat(offsetTop, "px + 1rem))"),
+      overflowY: "auto",
+      overflowX: "hidden",
+      backgroundColor: "var(--blue-sidebar-bg)"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "blue-sidebar-state open"
+  }, children))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "blue-tooltip-end blue-sidebar-pseudo-hidden-on-open ".concat(outerClass),
+    "data-tooltip": !props.isActive ? props.label : "",
+    title: props.isActive ? props.label : ""
+  }, /*#__PURE__*/_react.default.createElement(_MenuItem.default, _extends({}, props, {
+    onClick: onClick
+  }))));
+}

package/dist/components/SimpleLayout.d.ts

@@ -1,10 +1,12 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 export interface SimpleLayoutProps {
     children?: React.ReactNode;
+    className?: string;
+    style?: CSSProperties;
     header?: React.ReactNode;
     noPageBorder?: boolean;
 }
 /**
  * A simple layout with header and main content area.
  */
-export default function SimpleLayout({ children, header, noPageBorder }: SimpleLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default function SimpleLayout({ children, className, style, header, noPageBorder }: SimpleLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SimpleLayout.js

@@ -1,23 +1,25 @@
 import React from "react";
-import LayoutHeader from "./Layout/LayoutHeader.js";
-import LayoutMain from "./Layout/LayoutMain.js";
+import clsx from "clsx";
 /**
  * A simple layout with header and main content area.
  */
 export default function SimpleLayout(_ref) {
   var children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
     header = _ref.header,
     _ref$noPageBorder = _ref.noPageBorder,
     noPageBorder = _ref$noPageBorder === void 0 ? false : _ref$noPageBorder;
   return /*#__PURE__*/React.createElement("div", {
-    className: "vh-100 d-grid",
-    style: {
-      gridTemplateRows: "var(--blue-menu-item-height) auto"
-    }
-  }, /*#__PURE__*/React.createElement(LayoutHeader, {
-    slot: "header"
-  }, header), /*#__PURE__*/React.createElement(LayoutMain, {
-    noPageBorder: noPageBorder,
-    className: "overflow-hidden"
-  }, children));
+    className: clsx("blue-layout", className),
+    style: style
+  }, /*#__PURE__*/React.createElement("header", {
+    className: "blue-layout-header"
+  }, header), /*#__PURE__*/React.createElement("main", {
+    className: "blue-layout-main"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx("blue-layout-body", {
+      "border-0": noPageBorder
+    })
+  }, children)));
 }

package/dist/components/Switch.js

@@ -0,0 +1,65 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Switch;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * @deprecated
+ * Use Bootstrap's `.form-check.form-switch` instead:
+ * https://getbootstrap.com/docs/5.2/forms/checks-radios/#switches
+ *
+ * For now, this component acts as proxy for Bootstrap's Switch.
+ * To place a label next to the switch, use the new `label` prop.
+ *
+ * Migrate to Blue React 8.4.0 and use legacy support: Set the `label` with a string. Or set the `legacy` prop to use the previous look and behaviour.
+ */
+function Switch(_ref) {
+  var className = _ref.className,
+      checked = _ref.checked,
+      onChange = _ref.onChange,
+      sliderLabel = _ref.sliderLabel,
+      disabled = _ref.disabled,
+      _ref$elementType = _ref.elementType,
+      elementType = _ref$elementType === void 0 ? "label" : _ref$elementType,
+      _ref$legacy = _ref.legacy,
+      legacy = _ref$legacy === void 0 ? false : _ref$legacy,
+      label = _ref.label;
+
+  if (legacy === true) {
+    return /*#__PURE__*/(0, _react.createElement)(elementType, {
+      className: "switch " + (disabled ? "disabled " : "") + className
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
+      type: "checkbox",
+      checked: checked,
+      onChange: onChange,
+      disabled: disabled,
+      role: "switch"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "slider round",
+      "data-label": sliderLabel
+    })));
+  } else {
+    return /*#__PURE__*/(0, _react.createElement)(elementType, {
+      className: "form-check form-switch " + (disabled ? "disabled " : "") + className
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
+      type: "checkbox",
+      role: "switch",
+      className: "form-check-input",
+      checked: checked,
+      onChange: onChange,
+      disabled: disabled
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "form-check-label"
+    }, label)));
+  }
+}

package/dist/components/shared.js

@@ -7,7 +7,8 @@ var phrases = {
   "Close all": ["Close all", "Alle schließen"],
   Error: ["Error", "Fehler"],
   Information: ["Information", "Information"],
-  Search: ["Search", "Suche"]
+  Search: ["Search", "Suche"],
+  "Toolbar with buttons and button groups": ["Toolbar with buttons and button groups", "Toolbar mit Buttons und Button-Gruppen"]
 };
 export function getPhrase(keyword) {
   var countryCode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;