blue-react 10.0.4 → 10.1.0

package/dist/components/Body.d.ts

@@ -15,6 +15,7 @@ export interface BodyProps {
     children?: any;
 }
 /**
+ * @deprecated With the new layout design, you don't need this anymore.
  * Contains the content of the page.
  */
 export default function Body({ id, className, containerClass, hasActions, onClick, children, ...rest }: BodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Body.js

@@ -3,6 +3,7 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, 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; }
 import React from "react";
 /**
+ * @deprecated With the new layout design, you don't need this anymore.
  * Contains the content of the page.
  */
 export default function Body(_ref) {

package/dist/components/Page.d.ts

@@ -7,6 +7,7 @@ export interface PageProps {
     children?: ReactNode;
 }
 /**
+ * @deprecated With the new layout design, you don't need this anymore.
  * Main component for each page.
  */
 export default function Page({ children, title }: PageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Page.js

@@ -7,6 +7,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 /**
+ * @deprecated With the new layout design, you don't need this anymore.
  * Main component for each page.
  */
 export default function Page(_ref) {

package/dist/components/SidebarToggler.d.ts

@@ -5,6 +5,7 @@ export interface SidebarTogglerProps {
     onClick: MouseEventHandler<HTMLButtonElement>;
 }
 /**
+ * @deprecated With the new layout design, you don't need this anymore.
  * Button to toggle sidebar state. Designed for internal use inside of `Layout`.
  */
 export default function SidebarToggler({ className, sidebarToggleIconComponent, onClick }: SidebarTogglerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SidebarToggler.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { getPhrase } from "./shared.js";
 /**
+ * @deprecated With the new layout design, you don't need this anymore.
  * Button to toggle sidebar state. Designed for internal use inside of `Layout`.
  */
 

package/dist/components/Tab.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+export interface TabProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label: string;
+    children?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    active?: boolean;
+}
+/**
+ * Always use together with `Tabs`.
+ */
+export default function Tab({ label, children, className, contentClassName, active, ...rest }: TabProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tab.js

@@ -0,0 +1,36 @@
+var _excluded = ["label", "children", "className", "contentClassName", "active"];
+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; }
+import { useContext, useId } from "react";
+import { TabsNameContext } from "./Tabs.js";
+/**
+ * Always use together with `Tabs`.
+ */
+export default function Tab(_ref) {
+  var label = _ref.label,
+    children = _ref.children,
+    className = _ref.className,
+    contentClassName = _ref.contentClassName,
+    active = _ref.active,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var tabsName = useContext(TabsNameContext);
+  var tabId = "Tab_" + useId();
+  var tabPanelId = "Tab_Panel_" + useId();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({
+    type: "radio",
+    name: tabsName,
+    role: "tab",
+    id: tabId,
+    "aria-label": label,
+    "aria-controls": tabPanelId,
+    className: "blue-tab nav-link ".concat(className),
+    defaultChecked: active
+  }, rest)), /*#__PURE__*/React.createElement("div", {
+    role: "tabpanel",
+    id: tabPanelId,
+    "aria-labelledby": tabId,
+    tabIndex: 0,
+    className: "blue-tab-content ".concat(contentClassName)
+  }, children));
+}

package/dist/components/Tabs.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export declare const TabsNameContext: import("react").Context<string>;
+export interface TabsProps {
+    children?: ReactNode;
+    className?: string;
+    /**
+     * By default, tabs will have styling of Bootstrap `.nav.nav-tabs`.
+     * Set this property to `true` to use `.nav.nav-underline` instead.
+     */
+    underline?: boolean;
+}
+/**
+ * Implementation of Blue Web Tabs. Allows to use tabs without JavaScript.
+ * Use together with `Tab`.
+ */
+export default function Tabs({ children, className, underline }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tabs.js

@@ -0,0 +1,18 @@
+import { useId, createContext } from "react";
+export var TabsNameContext = /*#__PURE__*/createContext("");
+/**
+ * Implementation of Blue Web Tabs. Allows to use tabs without JavaScript.
+ * Use together with `Tab`.
+ */
+export default function Tabs(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    underline = _ref.underline;
+  var tabsName = "TabList-" + useId();
+  return /*#__PURE__*/React.createElement("div", {
+    role: "tablist",
+    className: "blue-tabs nav nav-".concat(underline ? "underline" : "tabs", " ").concat(className)
+  }, /*#__PURE__*/React.createElement(TabsNameContext.Provider, {
+    value: tabsName
+  }, children));
+}

package/index.d.ts

@@ -1,5 +1,6 @@
 declare global {
     interface Window {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         blueHashRouterRef: any
     }
 }
@@ -14,9 +15,6 @@ export { AProps } from "./dist/components/A"
 export { default as ActionMenu } from "./dist/components/ActionMenu"
 export { ActionMenuProps } from "./dist/components/ActionMenu"
 
-export { default as ActionMenuItem } from "./dist/components/ActionMenuItem"
-export { ActionMenuItemProps } from "./dist/components/ActionMenuItem"
-
 export { default as Body } from "./dist/components/Body"
 export { BodyProps } from "./dist/components/Body"
 
@@ -58,9 +56,6 @@ export { SearchProps } from "./dist/components/Search"
 export { default as SidebarMenu } from "./dist/components/SidebarMenu"
 export { SidebarMenuProps } from "./dist/components/SidebarMenu"
 
-export { default as SidebarMenuItem } from "./dist/components/SidebarMenuItem"
-export { SidebarMenuItemProps } from "./dist/components/SidebarMenuItem"
-
 export { default as SimpleLayout } from "./dist/components/SimpleLayout"
 export { SimpleLayoutProps } from "./dist/components/SimpleLayout"
 

package/index.js

@@ -1,7 +1,6 @@
 // Import statements
 import A from "./dist/components/A.js"
 import ActionMenu from "./dist/components/ActionMenu.js"
-import ActionMenuItem from "./dist/components/ActionMenuItem.js"
 import Body from "./dist/components/Body.js"
 import Chevron from "./dist/components/Chevron.js"
 import HashRouter from "./dist/components/HashRouter.js"
@@ -17,7 +16,6 @@ import Outside from "./dist/components/Outside.js"
 import Page from "./dist/components/Page.js"
 import Search from "./dist/components/Search.js"
 import SidebarMenu from "./dist/components/SidebarMenu.js"
-import SidebarMenuItem from "./dist/components/SidebarMenuItem.js"
 import SimpleLayout from "./dist/components/SimpleLayout.js"
 import SlimContainer from "./dist/components/SlimContainer.js"
 import Status from "./dist/components/Status.js"
@@ -29,7 +27,6 @@ import Utilities from "./dist/components/Utilities.js"
 export {
     A,
     ActionMenu,
-    ActionMenuItem,
     Body,
     Chevron,
     HashRouter,
@@ -46,7 +43,6 @@ export {
     Page,
     Search,
     SidebarMenu,
-    SidebarMenuItem,
     SimpleLayout,
     SlimContainer,
     Status,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "10.0.4",
+    "version": "10.1.0",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "type": "module",
@@ -35,12 +35,12 @@
     },
     "dependencies": {
         "@popperjs/core": "^2.11.5",
-        "blue-web": "^1.14.0",
+        "blue-web": "^1.14.2",
         "bootstrap": "~5.3.3",
         "clsx": "^1.1.1"
     },
     "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+        "react": "^18.0.0 || ^19.0.0"
     },
     "devDependencies": {
         "@babel/cli": "^7.10.4",

package/dist/components/ActionMenuItem.d.ts

@@ -1,36 +0,0 @@
-import { MenuItemProps } from "./MenuItem";
-export interface ActionMenuItemProps extends MenuItemProps {
-}
-/**
- * @deprecated Use `MenuItem` instead. Special `ActionMenu` functionality is now handles with CSS by Blue Web.
- *
- * 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`.
- */
-export default function ActionMenuItem({ children, ...props }: ActionMenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ActionMenuItem.js

@@ -1,51 +0,0 @@
-var _excluded = ["children"];
-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; }
-import React, { useContext } from "react";
-import MenuItem from "./MenuItem.js";
-import { ActionMenuContext } from "./ActionMenu.js";
-/**
- * @deprecated Use `MenuItem` instead. Special `ActionMenu` functionality is now handles with CSS by Blue Web.
- *
- * 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`.
- */
-export default function ActionMenuItem(_ref) {
-  var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useContext = useContext(ActionMenuContext),
-    breakOption = _useContext.breakOption;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "position-relative"
-  }, /*#__PURE__*/React.createElement(MenuItem, _extends({}, props, {
-    supportOutside: true,
-    dropdownClassName: "position-".concat(breakOption, "-absolute end-0 d-flex flex-column")
-  }), children));
-}

package/dist/components/SidebarMenuItem.d.ts

@@ -1,21 +0,0 @@
-import { MenuItemProps } from "./MenuItem";
-export interface SidebarMenuItemProps extends MenuItemProps {
-    outerClass?: string;
-}
-/**
- * @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>
- * ```
- */
-export default function SidebarMenuItem({ outerClass, children, onClick, ...props }: SidebarMenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SidebarMenuItem.js

@@ -1,84 +0,0 @@
-var _excluded = ["outerClass", "children", "onClick"];
-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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-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; }
-import React, { useEffect, useRef, useState } from "react";
-import MenuItem from "./MenuItem.js";
-import Outside from "./Outside.js";
-/**
- * @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>
- * ```
- */
-
-export default 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 = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var toggle = function toggle() {
-    return setOpen(!open);
-  };
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    offsetTop = _useState4[0],
-    setOffsetTop = _useState4[1];
-  var menuRef = useRef(null);
-  useEffect(function () {
-    setOpen(false);
-  }, [window.location.hash]);
-  useEffect(function () {
-    if (menuRef && menuRef.current) {
-      setOffsetTop(menuRef.current.getBoundingClientRect().top);
-    }
-  }, [menuRef, open]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement(Outside, {
-    className: "position-relative ".concat(outerClass),
-    onClickOutside: function onClickOutside() {
-      setOpen(false);
-    }
-  }, /*#__PURE__*/React.createElement(SidebarMenuItem, _extends({}, props, {
-    highlighted: open,
-    onClick: toggle
-  })), open && /*#__PURE__*/React.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.createElement("div", {
-    className: "blue-sidebar-state open"
-  }, children))) : /*#__PURE__*/React.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.createElement(MenuItem, _extends({}, props, {
-    onClick: onClick
-  }))));
-}