blue-react 10.2.0 → 11.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/README.md +41 -84
  2. package/dist/components/A.js +13 -6
  3. package/dist/components/ActionMenu.js +27 -22
  4. package/dist/components/Actions.js +30 -22
  5. package/dist/components/Button.d.ts +28 -0
  6. package/dist/components/Button.js +111 -0
  7. package/dist/components/Chevron.js +11 -9
  8. package/dist/components/HashRouter.js +9 -6
  9. package/dist/components/Header.js +5 -3
  10. package/dist/components/HeaderTitle.js +31 -26
  11. package/dist/components/IconMenuItem.d.ts +3 -2
  12. package/dist/components/IconMenuItem.js +18 -10
  13. package/dist/components/Intro.js +23 -17
  14. package/dist/components/Layout.js +79 -71
  15. package/dist/{types/components/MenuItem.d.ts → components/LegacyMenuItem.d.ts} +150 -149
  16. package/dist/components/LegacyMenuItem.js +170 -0
  17. package/dist/components/MenuItem.d.ts +13 -149
  18. package/dist/components/MenuItem.js +168 -153
  19. package/dist/components/Modal.js +62 -49
  20. package/dist/components/ModalProvider.js +43 -35
  21. package/dist/components/Outside.js +5 -3
  22. package/dist/components/Search.js +69 -60
  23. package/dist/components/SidebarMenu.js +9 -6
  24. package/dist/components/SimpleLayout.js +16 -11
  25. package/dist/components/SlimContainer.js +8 -5
  26. package/dist/components/Status.js +56 -40
  27. package/dist/components/StatusProvider.js +22 -14
  28. package/dist/components/Tab.js +28 -19
  29. package/dist/components/Tabs.js +8 -5
  30. package/dist/components/ToastProvider.js +55 -44
  31. package/dist/components/shared.js +4 -1
  32. package/index.d.ts +5 -5
  33. package/index.js +4 -2
  34. package/package.json +14 -12
  35. package/dist/components/ActionMenuItem.js +0 -73
  36. package/dist/components/ActionMenuSwitch.js +0 -44
  37. package/dist/components/Body.d.ts +0 -21
  38. package/dist/components/Body.js +0 -25
  39. package/dist/components/Caret.js +0 -25
  40. package/dist/components/Layout/LayoutHeader.d.ts +0 -4
  41. package/dist/components/Layout/LayoutHeader.js +0 -25
  42. package/dist/components/Layout/LayoutMain.d.ts +0 -5
  43. package/dist/components/Layout/LayoutMain.js +0 -17
  44. package/dist/components/Page.d.ts +0 -13
  45. package/dist/components/Page.js +0 -39
  46. package/dist/components/SidebarMenuItem.js +0 -115
  47. package/dist/components/SidebarToggler.d.ts +0 -11
  48. package/dist/components/SidebarToggler.js +0 -24
  49. package/dist/components/Switch.js +0 -65
  50. package/dist/types/components/A.d.ts +0 -9
  51. package/dist/types/components/ActionMenu.d.ts +0 -25
  52. package/dist/types/components/ActionMenuItem.d.ts +0 -35
  53. package/dist/types/components/ActionMenuSwitch.d.ts +0 -12
  54. package/dist/types/components/Body.d.ts +0 -21
  55. package/dist/types/components/Caret.d.ts +0 -18
  56. package/dist/types/components/Chevron.d.ts +0 -17
  57. package/dist/types/components/Header.d.ts +0 -8
  58. package/dist/types/components/HeaderTitle.d.ts +0 -40
  59. package/dist/types/components/IconMenuItem.d.ts +0 -19
  60. package/dist/types/components/Intro.d.ts +0 -23
  61. package/dist/types/components/Layout.d.ts +0 -144
  62. package/dist/types/components/Modal.d.ts +0 -30
  63. package/dist/types/components/ModalProvider.d.ts +0 -21
  64. package/dist/types/components/Outside.d.ts +0 -17
  65. package/dist/types/components/Page.d.ts +0 -12
  66. package/dist/types/components/Search.d.ts +0 -36
  67. package/dist/types/components/SidebarMenu.d.ts +0 -32
  68. package/dist/types/components/SidebarMenuItem.d.ts +0 -22
  69. package/dist/types/components/SidebarToggler.d.ts +0 -10
  70. package/dist/types/components/SlimContainer.d.ts +0 -10
  71. package/dist/types/components/Status.d.ts +0 -12
  72. package/dist/types/components/StatusProvider.d.ts +0 -15
  73. package/dist/types/components/Switch.d.ts +0 -33
  74. package/dist/types/components/ToastProvider.d.ts +0 -22
  75. package/dist/types/components/Utilities.d.ts +0 -41
  76. package/dist/types/components/shared.d.ts +0 -15
@@ -1,15 +1,21 @@
1
+ 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); }
1
2
  var _excluded = ["children", "successIcon", "infoIcon", "warningIcon", "dangerIcon"];
2
- 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); }
3
+ 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; }
4
+ 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; }
5
+ 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; }
6
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
7
+ 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); }
3
8
  function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
4
9
  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."); }
5
10
  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; } }
6
11
  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; }
7
12
  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; } }
8
13
  function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
9
- 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; }
10
- 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; }
14
+ 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; }
15
+ 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; }
11
16
  import React, { createContext, useContext, useState } from "react";
12
17
  import Status from "./Status.js";
18
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
19
  var StatusContext = /*#__PURE__*/createContext({
14
20
  setAlert: undefined,
15
21
  setStatus: undefined
@@ -29,21 +35,23 @@ var StatusProvider = function StatusProvider(_ref) {
29
35
  _useState4 = _slicedToArray(_useState3, 2),
30
36
  status = _useState4[0],
31
37
  setStatus = _useState4[1];
32
- return /*#__PURE__*/React.createElement(StatusContext.Provider, _extends({
38
+ return /*#__PURE__*/_jsxs(StatusContext.Provider, _objectSpread(_objectSpread({
33
39
  value: {
34
40
  setAlert: setAlert,
35
41
  setStatus: setStatus
36
42
  }
37
- }, rest), children, /*#__PURE__*/React.createElement(Status, {
38
- alert: alert || undefined,
39
- onUnsetAlert: function onUnsetAlert() {
40
- return setAlert(null);
41
- },
42
- successIcon: successIcon,
43
- infoIcon: infoIcon,
44
- warningIcon: warningIcon,
45
- dangerIcon: dangerIcon,
46
- status: status
43
+ }, rest), {}, {
44
+ children: [children, /*#__PURE__*/_jsx(Status, {
45
+ alert: alert || undefined,
46
+ onUnsetAlert: function onUnsetAlert() {
47
+ return setAlert(null);
48
+ },
49
+ successIcon: successIcon,
50
+ infoIcon: infoIcon,
51
+ warningIcon: warningIcon,
52
+ dangerIcon: dangerIcon,
53
+ status: status
54
+ })]
47
55
  }));
48
56
  };
49
57
  var useStatus = function useStatus() {
@@ -1,9 +1,15 @@
1
+ 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); }
1
2
  var _excluded = ["label", "children", "className", "contentClassName", "active"];
2
- 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); }
3
- 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; }
4
- 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; }
3
+ 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; }
4
+ 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; }
5
+ 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; }
6
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
7
+ 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); }
8
+ 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; }
9
+ 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; }
5
10
  import { useContext, useId } from "react";
6
11
  import { TabsNameContext } from "./Tabs.js";
12
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
7
13
  /**
8
14
  * Always use together with `Tabs`.
9
15
  */
@@ -17,20 +23,23 @@ export default function Tab(_ref) {
17
23
  var tabsName = useContext(TabsNameContext);
18
24
  var tabId = "Tab_" + useId();
19
25
  var tabPanelId = "Tab_Panel_" + useId();
20
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({
21
- type: "radio",
22
- name: tabsName,
23
- role: "tab",
24
- id: tabId,
25
- "aria-label": label,
26
- "aria-controls": tabPanelId,
27
- className: "blue-tab nav-link ".concat(className),
28
- defaultChecked: active
29
- }, rest)), /*#__PURE__*/React.createElement("div", {
30
- role: "tabpanel",
31
- id: tabPanelId,
32
- "aria-labelledby": tabId,
33
- tabIndex: 0,
34
- className: "blue-tab-content ".concat(contentClassName)
35
- }, children));
26
+ return /*#__PURE__*/_jsxs(_Fragment, {
27
+ children: [/*#__PURE__*/_jsx("input", _objectSpread({
28
+ type: "radio",
29
+ name: tabsName,
30
+ role: "tab",
31
+ id: tabId,
32
+ "aria-label": label,
33
+ "aria-controls": tabPanelId,
34
+ className: "blue-tab nav-link ".concat(className),
35
+ defaultChecked: active
36
+ }, rest)), /*#__PURE__*/_jsx("div", {
37
+ role: "tabpanel",
38
+ id: tabPanelId,
39
+ "aria-labelledby": tabId,
40
+ tabIndex: 0,
41
+ className: "blue-tab-content ".concat(contentClassName),
42
+ children: children
43
+ })]
44
+ });
36
45
  }
@@ -1,4 +1,5 @@
1
1
  import { useId, createContext } from "react";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
2
3
  export var TabsNameContext = /*#__PURE__*/createContext("");
3
4
  /**
4
5
  * Implementation of Blue Web Tabs. Allows to use tabs without JavaScript.
@@ -9,10 +10,12 @@ export default function Tabs(_ref) {
9
10
  className = _ref.className,
10
11
  underline = _ref.underline;
11
12
  var tabsName = "TabList-" + useId();
12
- return /*#__PURE__*/React.createElement("div", {
13
+ return /*#__PURE__*/_jsx("div", {
13
14
  role: "tablist",
14
- className: "blue-tabs nav nav-".concat(underline ? "underline" : "tabs", " ").concat(className)
15
- }, /*#__PURE__*/React.createElement(TabsNameContext.Provider, {
16
- value: tabsName
17
- }, children));
15
+ className: "blue-tabs nav nav-".concat(underline ? "underline" : "tabs", " ").concat(className),
16
+ children: /*#__PURE__*/_jsx(TabsNameContext.Provider, {
17
+ value: tabsName,
18
+ children: children
19
+ })
20
+ });
18
21
  }
@@ -1,6 +1,6 @@
1
1
  var _excluded = ["type"];
2
- 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; }
3
- 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; }
2
+ 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; }
3
+ 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; }
4
4
  function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
5
5
  function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
6
6
  function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
@@ -13,6 +13,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
13
13
  function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
14
14
  import React, { createContext, useContext, useState } from "react";
15
15
  import { getPhrase } from "./shared.js";
16
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
16
17
  var ToastContext = /*#__PURE__*/createContext({
17
18
  addToast: undefined,
18
19
  clearToasts: undefined
@@ -42,51 +43,61 @@ export function ToastProvider(_ref) {
42
43
  var clearToasts = function clearToasts() {
43
44
  setToastItems([]);
44
45
  };
45
- return /*#__PURE__*/React.createElement(ToastContext.Provider, {
46
+ return /*#__PURE__*/_jsxs(ToastContext.Provider, {
46
47
  value: {
47
48
  addToast: addToast,
48
49
  clearToasts: clearToasts
49
- }
50
- }, children, /*#__PURE__*/React.createElement("div", {
51
- className: "blue-normal-scrollbar"
52
- }, /*#__PURE__*/React.createElement("div", {
53
- className: "toast-container position-fixed bottom-0 end-0 p-3 mh-100 pe-auto overflow-auto me-3"
54
- }, toastItems.length > 1 && /*#__PURE__*/React.createElement("div", {
55
- className: "toast align-items-center fade show position-sticky top-0",
56
- role: "alert",
57
- "aria-live": "assertive",
58
- "aria-atomic": "true"
59
- }, /*#__PURE__*/React.createElement("div", {
60
- className: "toast-header"
61
- }, /*#__PURE__*/React.createElement("button", {
62
- className: "btn btn-outline-light blue-btn-silent btn-sm w-100",
63
- onClick: clearToasts
64
- }, getPhrase("Close all")))), toastItems.map(function (_ref2, i) {
65
- var type = _ref2.type,
66
- toastItem = _objectWithoutProperties(_ref2, _excluded);
67
- return /*#__PURE__*/React.createElement("div", {
68
- key: i,
69
- className: "toast fade show",
70
- role: "alert",
71
- "aria-live": "assertive",
72
- "aria-atomic": "true"
73
- }, /*#__PURE__*/React.createElement("div", {
74
- className: "toast-header"
75
- }, /*#__PURE__*/React.createElement("span", {
76
- className: "rounded me-2 text-".concat(type || "info")
77
- }, type === "danger" ? dangerIcon : type === "success" ? successIcon : type === "warning" ? warningIcon : infoIcon), /*#__PURE__*/React.createElement("strong", {
78
- className: "me-auto"
79
- }, toastItem.title || (type === "danger" ? getPhrase("Error") : getPhrase("Information"))), /*#__PURE__*/React.createElement("button", {
80
- type: "button",
81
- className: "btn-close",
82
- onClick: function onClick() {
83
- toastItems.splice(i, 1);
84
- setToastItems(_toConsumableArray(toastItems));
85
- }
86
- })), /*#__PURE__*/React.createElement("div", {
87
- className: "toast-body"
88
- }, toastItem.message));
89
- }))));
50
+ },
51
+ children: [children, /*#__PURE__*/_jsx("div", {
52
+ className: "blue-normal-scrollbar",
53
+ children: /*#__PURE__*/_jsxs("div", {
54
+ className: "toast-container position-fixed bottom-0 end-0 p-3 mh-100 pe-auto overflow-auto me-3",
55
+ children: [toastItems.length > 1 && /*#__PURE__*/_jsx("div", {
56
+ className: "toast align-items-center fade show position-sticky top-0",
57
+ role: "alert",
58
+ "aria-live": "assertive",
59
+ "aria-atomic": "true",
60
+ children: /*#__PURE__*/_jsx("div", {
61
+ className: "toast-header",
62
+ children: /*#__PURE__*/_jsx("button", {
63
+ className: "btn btn-outline-light blue-btn-silent btn-sm w-100",
64
+ onClick: clearToasts,
65
+ children: getPhrase("Close all")
66
+ })
67
+ })
68
+ }), toastItems.map(function (_ref2, i) {
69
+ var type = _ref2.type,
70
+ toastItem = _objectWithoutProperties(_ref2, _excluded);
71
+ return /*#__PURE__*/_jsxs("div", {
72
+ className: "toast fade show",
73
+ role: "alert",
74
+ "aria-live": "assertive",
75
+ "aria-atomic": "true",
76
+ children: [/*#__PURE__*/_jsxs("div", {
77
+ className: "toast-header",
78
+ children: [/*#__PURE__*/_jsx("span", {
79
+ className: "rounded me-2 text-".concat(type || "info"),
80
+ children: type === "danger" ? dangerIcon : type === "success" ? successIcon : type === "warning" ? warningIcon : infoIcon
81
+ }), /*#__PURE__*/_jsx("strong", {
82
+ className: "me-auto",
83
+ children: toastItem.title || (type === "danger" ? getPhrase("Error") : getPhrase("Information"))
84
+ }), /*#__PURE__*/_jsx("button", {
85
+ type: "button",
86
+ className: "btn-close",
87
+ onClick: function onClick() {
88
+ toastItems.splice(i, 1);
89
+ setToastItems(_toConsumableArray(toastItems));
90
+ }
91
+ })]
92
+ }), /*#__PURE__*/_jsx("div", {
93
+ className: "toast-body",
94
+ children: toastItem.message
95
+ })]
96
+ }, i);
97
+ })]
98
+ })
99
+ })]
100
+ });
90
101
  }
91
102
  export var useToast = function useToast() {
92
103
  var context = useContext(ToastContext);
@@ -4,11 +4,14 @@ var phrases = {
4
4
  No: ["No", "Nein"],
5
5
  Message: ["Message", "Nachricht"],
6
6
  "Toggle menu": ["Toggle menu", "Menü umschalten"],
7
+ "Toggle details": ["Toggle details", "Details umschalten"],
7
8
  "Close all": ["Close all", "Alle schließen"],
8
9
  Error: ["Error", "Fehler"],
9
10
  Information: ["Information", "Information"],
10
11
  Search: ["Search", "Suche"],
11
- "Toolbar with buttons and button groups": ["Toolbar with buttons and button groups", "Toolbar mit Buttons und Button-Gruppen"]
12
+ "Toolbar with buttons and button groups": ["Toolbar with buttons and button groups", "Toolbar mit Buttons und Button-Gruppen"],
13
+ Loading: ["Loading", "Laden"],
14
+ Successful: ["Successful", "Erfolgreich"]
12
15
  };
13
16
  export function getPhrase(keyword) {
14
17
  var countryCode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
package/index.d.ts CHANGED
@@ -15,8 +15,8 @@ export { AProps } from "./dist/components/A"
15
15
  export { default as ActionMenu } from "./dist/components/ActionMenu"
16
16
  export { ActionMenuProps } from "./dist/components/ActionMenu"
17
17
 
18
- export { default as Body } from "./dist/components/Body"
19
- export { BodyProps } from "./dist/components/Body"
18
+ export { default as Button } from "./dist/components/Button"
19
+ export { ButtonProps } from "./dist/components/Button"
20
20
 
21
21
  export { default as Chevron } from "./dist/components/Chevron"
22
22
  export { ChevronProps } from "./dist/components/Chevron"
@@ -36,6 +36,9 @@ export { IconMenuItemProps } from "./dist/components/IconMenuItem"
36
36
  export { default as Intro } from "./dist/components/Intro"
37
37
  export { IntroProps } from "./dist/components/Intro"
38
38
 
39
+ export { default as LegacyMenuItem } from "./dist/components/LegacyMenuItem"
40
+ export { LegacyMenuItemProps } from "./dist/components/LegacyMenuItem"
41
+
39
42
  export { default as MenuItem } from "./dist/components/MenuItem"
40
43
  export { MenuItemProps } from "./dist/components/MenuItem"
41
44
 
@@ -47,9 +50,6 @@ export { ModalProvider, useModal } from "./dist/components/ModalProvider"
47
50
  export { default as Outside } from "./dist/components/Outside"
48
51
  export { OutsideProps, useOutside } from "./dist/components/Outside"
49
52
 
50
- export { default as Page } from "./dist/components/Page"
51
- export { PageProps } from "./dist/components/Page"
52
-
53
53
  export { default as Search } from "./dist/components/Search"
54
54
  export { SearchProps } from "./dist/components/Search"
55
55
 
package/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  // Import statements
2
2
  import A from "./dist/components/A.js"
3
3
  import ActionMenu from "./dist/components/ActionMenu.js"
4
- import Body from "./dist/components/Body.js"
4
+ import Button from "./dist/components/Button.js"
5
5
  import Chevron from "./dist/components/Chevron.js"
6
6
  import HashRouter from "./dist/components/HashRouter.js"
7
7
  import Layout from "./dist/components/Layout.js"
@@ -9,11 +9,11 @@ import Header from "./dist/components/Header.js"
9
9
  import HeaderTitle from "./dist/components/HeaderTitle.js"
10
10
  import IconMenuItem from "./dist/components/IconMenuItem.js"
11
11
  import Intro from "./dist/components/Intro.js"
12
+ import LegacyMenuItem from "./dist/components/LegacyMenuItem.js"
12
13
  import MenuItem from "./dist/components/MenuItem.js"
13
14
  import Modal from "./dist/components/Modal.js"
14
15
  import { ModalProvider, useModal } from "./dist/components/ModalProvider.js"
15
16
  import Outside from "./dist/components/Outside.js"
16
- import Page from "./dist/components/Page.js"
17
17
  import Search from "./dist/components/Search.js"
18
18
  import SidebarMenu from "./dist/components/SidebarMenu.js"
19
19
  import SimpleLayout from "./dist/components/SimpleLayout.js"
@@ -28,6 +28,7 @@ export {
28
28
  A,
29
29
  ActionMenu,
30
30
  Body,
31
+ Button,
31
32
  Chevron,
32
33
  HashRouter,
33
34
  Layout,
@@ -35,6 +36,7 @@ export {
35
36
  HeaderTitle,
36
37
  IconMenuItem,
37
38
  Intro,
39
+ LegacyMenuItem,
38
40
  MenuItem,
39
41
  Modal,
40
42
  ModalProvider,
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "blue-react",
3
- "version": "10.2.0",
3
+ "version": "11.0.1",
4
4
  "description": "Blue React Components",
5
5
  "license": "LGPL-3.0-or-later",
6
6
  "type": "module",
7
7
  "main": "index.js",
8
8
  "types": "index.d.ts",
9
- "homepage": "https://bruegmann.github.io/blue-react/v10",
9
+ "homepage": "https://bruegmann.github.io/blue-react/v11",
10
10
  "repository": {
11
11
  "type": "git",
12
12
  "url": "https://github.com/bruegmann/blue-react.git"
@@ -17,17 +17,17 @@
17
17
  "scripts": {
18
18
  "dev": "vite",
19
19
  "start": "npm run dev",
20
- "build-docs": "tsc -b && vite build --base=/blue-react/v10/ && npm run docgen",
20
+ "build-docs": "tsc -b && vite build --base=/blue-react/v11/ && npm run docgen",
21
21
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
22
22
  "preview": "vite preview",
23
23
  "build-types": "tsc -p tsconfig.app.json --declaration --emitDeclarationOnly --declarationDir ./dist --noEmit false --composite false",
24
24
  "build": "babel ./src/components --out-dir ./dist/components --extensions \".tsx,.js,.ts\"",
25
25
  "build-release": "npm run build-types && npm run build && npm run docgen",
26
- "docgen": "react-docgen ./src/components/ --ignore Layout -o ./src/docs/data/docs.json --extension tsx && node followUpDocs && npm run license-report",
26
+ "docgen": "react-docgen ./src/components/**/*.tsx --ignore Layout -o ./src/docs/data/docs.json && node followUpDocs && npm run license-report",
27
27
  "test": "react-scripts test",
28
28
  "eject": "react-scripts eject",
29
29
  "predeploy": "npm run build-docs",
30
- "deploy": "gh-pages --dist deployment --dest v10",
30
+ "deploy": "gh-pages --dist deployment --dest v11",
31
31
  "prepublishOnly": "npm i && npm run build-release",
32
32
  "release": "npm publish && npm run deploy",
33
33
  "prettier": "npx prettier --write .",
@@ -35,7 +35,7 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@popperjs/core": "^2.11.5",
38
- "blue-web": "^1.17.4",
38
+ "blue-web": "^1.20.0",
39
39
  "bootstrap": "~5.3.3",
40
40
  "clsx": "^1.1.1"
41
41
  },
@@ -47,24 +47,26 @@
47
47
  "@babel/preset-env": "^7.10.4",
48
48
  "@babel/preset-react": "^7.10.4",
49
49
  "@babel/preset-typescript": "^7.9.0",
50
+ "@react-docgen/cli": "^3.0.4",
50
51
  "@types/bootstrap": "^5.0.17",
51
52
  "@types/react": "^19.0.2",
52
53
  "@types/react-dom": "^19.0.2",
53
54
  "@types/react-router-dom": "^5.3.3",
54
55
  "@types/react-syntax-highlighter": "^13.5.0",
55
- "@typescript-eslint/eslint-plugin": "^7.15.0",
56
- "@typescript-eslint/parser": "^7.15.0",
57
- "@vitejs/plugin-react": "^4.3.1",
56
+ "@typescript-eslint/eslint-plugin": "^8.46.4",
57
+ "@typescript-eslint/parser": "^8.46.4",
58
+ "@vitejs/plugin-react": "^5.0.4",
58
59
  "babel-plugin-add-import-extension": "^1.6.0",
59
- "eslint": "^8.57.0",
60
- "eslint-plugin-react-hooks": "^4.6.2",
60
+ "babel-plugin-react-compiler": "^19.1.0-rc.3",
61
+ "eslint": "^9.37.0",
62
+ "eslint-plugin-react-hooks": "^6.1.1",
61
63
  "eslint-plugin-react-refresh": "^0.4.7",
62
64
  "gh-pages": "^6.3.0",
63
65
  "license-report": "^6.2.0",
64
66
  "prettier": "2.4.1",
65
67
  "react": "^19.0.0",
66
68
  "react-bootstrap-icons": "^1.9.1",
67
- "react-docgen": "^5.4.0",
69
+ "react-docgen": "^8.0.2",
68
70
  "react-dom": "^19.0.0",
69
71
  "react-markdown": "^9.0.1",
70
72
  "react-router-dom": "^5.3.3",
@@ -1,73 +0,0 @@
1
- "use strict";
2
-
3
- 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); }
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = ActionMenuItem;
9
-
10
- var _react = _interopRequireWildcard(require("react"));
11
-
12
- var _MenuItem = _interopRequireDefault(require("./MenuItem"));
13
-
14
- var _ActionMenu = require("./ActionMenu");
15
-
16
- var _excluded = ["children"];
17
-
18
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
-
20
- 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); }
21
-
22
- 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; }
23
-
24
- 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); }
25
-
26
- 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; }
27
-
28
- 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; }
29
-
30
- /**
31
- * Use this instead of `MenuItem` when you want to use it inside an `ActionMenu` to make it appear as a dropdown.
32
- *
33
- * It basically is a shortcut. Instead of writing:
34
- *
35
- * ```tsx
36
- * <ActionMenu>
37
- * <div className="position-relative z-1">
38
- * <MenuItem
39
- * label="Parent"
40
- * supportOutside
41
- * dropdownClassName={`position-md-absolute end-0 d-flex flex-column`}
42
- * >
43
- * <MenuItem label="Item 1" />
44
- * </MenuItem>
45
- * </div>
46
- * </ActionMenu>
47
- * ```
48
- *
49
- * you can write:
50
- * ```tsx
51
- * <ActionMenu>
52
- * <ActionMenuItem label="Parent">
53
- * <MenuItem label="Item 1" />
54
- * </MenuItem>
55
- * </ActionMenu>
56
- * ```
57
- *
58
- * 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`.
59
- */
60
- function ActionMenuItem(_ref) {
61
- var children = _ref.children,
62
- props = _objectWithoutProperties(_ref, _excluded);
63
-
64
- var _useContext = (0, _react.useContext)(_ActionMenu.ActionMenuContext),
65
- breakOption = _useContext.breakOption;
66
-
67
- return /*#__PURE__*/_react.default.createElement("div", {
68
- className: "position-relative z-1"
69
- }, /*#__PURE__*/_react.default.createElement(_MenuItem.default, _extends({}, props, {
70
- supportOutside: true,
71
- dropdownClassName: "position-".concat(breakOption, "-absolute end-0 d-flex flex-column")
72
- }), children));
73
- }
@@ -1,44 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = ActionMenuSwitch;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- var _Switch = _interopRequireDefault(require("./Switch"));
11
-
12
- var _excluded = ["label"];
13
-
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
-
16
- 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); }
17
-
18
- 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; }
19
-
20
- 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; }
21
-
22
- /**
23
- * @deprecated
24
- * Use a solution with Bootstrap's `.form-check.form-switch` or `MenuItem` with a switch icon.
25
- * Switch for the Action Menu.
26
- */
27
- function ActionMenuSwitch(_ref) {
28
- var label = _ref.label,
29
- props = _objectWithoutProperties(_ref, _excluded);
30
-
31
- return /*#__PURE__*/_react.default.createElement("li", {
32
- className: "nav-item"
33
- }, /*#__PURE__*/_react.default.createElement("a", {
34
- href: "javascript:void(0)",
35
- className: "nav-link blue-actions-menu-item",
36
- onClick: function onClick() {
37
- if (props.onChange) props.onChange();
38
- }
39
- }, /*#__PURE__*/_react.default.createElement(_Switch.default, _extends({}, props, {
40
- elementType: "span"
41
- })), label && /*#__PURE__*/_react.default.createElement("span", {
42
- className: "blue-actions-label"
43
- }, "\xA0", label)));
44
- }
@@ -1,21 +0,0 @@
1
- import { breakOption } from "./shared";
2
- export interface BodyProps {
3
- id?: string;
4
- className?: string;
5
- /**
6
- * Class name for the container. More info: https://getbootstrap.com/docs/4.0/layout/overview/#containers
7
- */
8
- containerClass?: string;
9
- /**
10
- * Set `true` if this page uses `<Actions />`, so this component will get enough padding to avoid overlapping of the content.
11
- */
12
- hasActions?: boolean;
13
- break?: breakOption;
14
- onClick?: (event: any) => void;
15
- children?: any;
16
- }
17
- /**
18
- * @deprecated With the new layout design, you don't need this anymore.
19
- * Contains the content of the page.
20
- */
21
- export default function Body({ id, className, containerClass, hasActions, onClick, children, ...rest }: BodyProps): import("react/jsx-runtime").JSX.Element;
@@ -1,25 +0,0 @@
1
- var _excluded = ["id", "className", "containerClass", "hasActions", "onClick", "children"];
2
- 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; }
3
- 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; }
4
- import React from "react";
5
- /**
6
- * @deprecated With the new layout design, you don't need this anymore.
7
- * Contains the content of the page.
8
- */
9
- export default function Body(_ref) {
10
- var id = _ref.id,
11
- className = _ref.className,
12
- containerClass = _ref.containerClass,
13
- hasActions = _ref.hasActions,
14
- onClick = _ref.onClick,
15
- children = _ref.children,
16
- rest = _objectWithoutProperties(_ref, _excluded);
17
- var pageBodyClassName = "blue-page";
18
- return /*#__PURE__*/React.createElement("div", {
19
- id: id,
20
- className: className ? pageBodyClassName + " " + className : pageBodyClassName + (hasActions ? " has-actions" : "") + " break-".concat(rest["break"] || "md"),
21
- onClick: onClick
22
- }, /*#__PURE__*/React.createElement("div", {
23
- className: containerClass || "container-fluid"
24
- }, children));
25
- }