blue-react 10.1.1 → 10.1.3

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 (6) hide show
  1. package/dist/components/Search.d.ts +8 -2
  2. package/dist/components/Search.js +25 -60
  3. package/dist/components/SimpleLayout.d.ts +0 -1
  4. package/dist/components/SimpleLayout.js +0 -1
  5. package/dist/components/shared.js +2 -1
  6. package/package.json +2 -2
package/dist/components/Search.d.ts CHANGED
@@ -2,7 +2,8 @@ import React, { ReactNode, RefObject } from "react";
2
2
  export interface SearchProps {
3
3
  autoFocus?: boolean;
4
4
  /**
5
- * Is component inside of a page?
5
+ * @deprecated
6
+ * Doesn't have an effect anymore. Prop will be removed in a future version.
6
7
  */
7
8
  body?: boolean;
8
9
  className?: string;
@@ -19,7 +20,8 @@ export interface SearchProps {
19
20
  */
20
21
  resetIcon?: any;
21
22
  /**
22
- * Is component inside of the sidebar?
23
+ * @deprecated
24
+ * Doesn't have an effect anymore. Prop will be removed in a future version.
23
25
  */
24
26
  sidebar?: boolean;
25
27
  value?: string;
@@ -29,6 +31,10 @@ export interface SearchProps {
29
31
  * Set `ref` prop of the input element. Let's you take control of it from the outside, e.g. to set focus.
30
32
  */
31
33
  inputRef?: RefObject<HTMLInputElement | null>;
34
+ /**
35
+ * Adds additional class name to input element.
36
+ */
37
+ inputClassName?: string;
32
38
  }
33
39
  /**
34
40
  * A search bar that can be placed to the sidebar or on a page.
package/dist/components/Search.js CHANGED
@@ -5,14 +5,13 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
5
5
  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; } }
6
6
  function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
7
7
  import React, { useEffect, useState } from "react";
8
- import MenuItem from "./MenuItem.js";
9
8
  import { guid } from "blue-web/dist/js/utils.js";
9
+ import { getPhrase } from "./shared.js";
10
10
  /**
11
11
  * A search bar that can be placed to the sidebar or on a page.
12
12
  */
13
13
  export default function Search(props) {
14
14
  var autoFocus = props.autoFocus,
15
- body = props.body,
16
15
  className = props.className,
17
16
  icon = props.icon,
18
17
  _onChange = props.onChange,
@@ -20,82 +19,71 @@ export default function Search(props) {
20
19
  placeholder = props.placeholder,
21
20
  reset = props.reset,
22
21
  resetIcon = props.resetIcon,
23
- sidebar = props.sidebar,
24
22
  id = props.id,
25
- inputRef = props.inputRef;
23
+ inputRef = props.inputRef,
24
+ _props$inputClassName = props.inputClassName,
25
+ inputClassName = _props$inputClassName === void 0 ? "" : _props$inputClassName;
26
26
  var SearchControlId = id || "blue-search-control-" + guid();
27
27
  var _useState = useState(props.value || ""),
28
28
  _useState2 = _slicedToArray(_useState, 2),
29
29
  value = _useState2[0],
30
30
  setValue = _useState2[1];
31
- var _useState3 = useState(false),
32
- _useState4 = _slicedToArray(_useState3, 2),
33
- focus = _useState4[0],
34
- setFocus = _useState4[1];
35
31
  useEffect(function () {
36
32
  if (props.value) setValue(props.value);
37
33
  }, [props.value]);
38
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("form", {
39
- className: "blue-search " + (body ? "blue-search-body " : "") + (focus ? "focus " : "") + (sidebar ? "blue-search-sidebar blue-sidebar-visible-on-open " : "") + className,
34
+ return /*#__PURE__*/React.createElement("form", {
35
+ className: className,
40
36
  onSubmit: function onSubmit(event) {
41
37
  event.preventDefault();
42
38
  if (_onSubmit) _onSubmit(event);
43
39
  }
44
40
  }, /*#__PURE__*/React.createElement("div", {
45
- className: "blue-search-input-group input-group"
46
- }, /*#__PURE__*/React.createElement("span", {
47
- className: "input-group-text",
48
- onClick: function onClick() {
49
- var _document$getElementB;
50
- return (_document$getElementB = document.getElementById(SearchControlId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.focus();
51
- }
52
- }, icon || /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("svg", {
41
+ className: "blue-input-group input-group"
42
+ }, /*#__PURE__*/React.createElement("label", {
43
+ htmlFor: SearchControlId,
44
+ className: "input-group-text"
45
+ }, icon || /*#__PURE__*/React.createElement("svg", {
53
46
  width: "1em",
54
47
  height: "1em",
55
48
  viewBox: "0 0 16 16",
56
- className: "bi bi-search mt-n1",
49
+ className: "bi bi-search",
57
50
  fill: "currentColor",
58
- xmlns: "http://www.w3.org/2000/svg"
51
+ xmlns: "http://www.w3.org/2000/svg",
52
+ "aria-hidden": true
59
53
  }, /*#__PURE__*/React.createElement("path", {
60
54
  fillRule: "evenodd",
61
55
  d: "M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"
62
56
  }), /*#__PURE__*/React.createElement("path", {
63
57
  fillRule: "evenodd",
64
58
  d: "M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
65
- })))), props.children || /*#__PURE__*/React.createElement("input", {
59
+ })), /*#__PURE__*/React.createElement("span", {
60
+ className: "visually-hidden"
61
+ }, getPhrase("Search"))), props.children || /*#__PURE__*/React.createElement("input", {
66
62
  ref: inputRef,
67
- type: "search",
63
+ type: reset ? "text" : "search",
68
64
  value: value,
69
65
  onChange: function onChange(event) {
70
66
  setValue(event.target.value);
71
67
  if (_onChange) _onChange(event);
72
68
  },
73
69
  id: SearchControlId,
74
- className: "blue-search-control form-control default input-lg",
70
+ className: "form-control " + inputClassName,
75
71
  placeholder: placeholder,
76
- autoFocus: autoFocus,
77
- style: {
78
- zIndex: body ? 0 : undefined
79
- },
80
- onFocus: function onFocus() {
81
- return setFocus(true);
82
- },
83
- onBlur: function onBlur() {
84
- return setFocus(false);
85
- }
72
+ autoFocus: autoFocus
86
73
  }), reset && value.length > 0 && /*#__PURE__*/React.createElement("div", {
87
74
  className: "input-group-btn"
88
75
  }, /*#__PURE__*/React.createElement("button", {
89
76
  type: "button",
90
- className: "blue-search-reset-btn btn btn-link",
77
+ className: "btn btn-link",
91
78
  onClick: function onClick() {
92
- var _document$getElementB2;
79
+ var _document$getElementB;
93
80
  setValue("");
94
- (_document$getElementB2 = document.getElementById(SearchControlId)) === null || _document$getElementB2 === void 0 || _document$getElementB2.focus();
81
+ (_document$getElementB = document.getElementById(SearchControlId)) === null || _document$getElementB === void 0 || _document$getElementB.focus();
95
82
  if (_onChange) _onChange({
96
83
  target: {
97
84
  value: ""
98
85
  }
86
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
99
87
  });
100
88
  }
101
89
  }, resetIcon || /*#__PURE__*/React.createElement("svg", {
@@ -107,28 +95,5 @@ export default function Search(props) {
107
95
  viewBox: "0 0 16 16"
108
96
  }, /*#__PURE__*/React.createElement("path", {
109
97
  d: "M4.646 4.646a.5.5 0 01.708 0L8 7.293l2.646-2.647a.5.5 0 01.708.708L8.707 8l2.647 2.646a.5.5 0 01-.708.708L8 8.707l-2.646 2.647a.5.5 0 01-.708-.708L7.293 8 4.646 5.354a.5.5 0 010-.708z"
110
- })))))), sidebar && /*#__PURE__*/React.createElement(MenuItem, {
111
- className: "blue-search-btn",
112
- icon: icon || /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("svg", {
113
- width: "1em",
114
- height: "1em",
115
- viewBox: "0 0 16 16",
116
- className: "bi bi-search mt-n1",
117
- fill: "currentColor",
118
- xmlns: "http://www.w3.org/2000/svg"
119
- }, /*#__PURE__*/React.createElement("path", {
120
- fillRule: "evenodd",
121
- d: "M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"
122
- }), /*#__PURE__*/React.createElement("path", {
123
- fillRule: "evenodd",
124
- d: "M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
125
- }))),
126
- onClick: function onClick() {
127
- setTimeout(function () {
128
- var _document$querySelect;
129
- ;
130
- (_document$querySelect = document.querySelector(".blue-search-control")) === null || _document$querySelect === void 0 || _document$querySelect.select();
131
- }, 200);
132
- }
133
- }));
98
+ }))))));
134
99
  }
package/dist/components/SimpleLayout.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from "react";
2
- import "blue-web/dist/js/side-layout.js";
3
2
  export interface SimpleLayoutProps {
4
3
  children?: React.ReactNode;
5
4
  header?: React.ReactNode;
package/dist/components/SimpleLayout.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from "react";
2
- import "blue-web/dist/js/side-layout.js";
3
2
  import LayoutHeader from "./Layout/LayoutHeader.js";
4
3
  import LayoutMain from "./Layout/LayoutMain.js";
5
4
  /**
package/dist/components/shared.js CHANGED
@@ -6,7 +6,8 @@ var phrases = {
6
6
  "Toggle menu": ["Toggle menu", "Menü umschalten"],
7
7
  "Close all": ["Close all", "Alle schließen"],
8
8
  Error: ["Error", "Fehler"],
9
- Information: ["Information", "Information"]
9
+ Information: ["Information", "Information"],
10
+ Search: ["Search", "Suche"]
10
11
  };
11
12
  export function getPhrase(keyword) {
12
13
  var countryCode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "blue-react",
3
- "version": "10.1.1",
3
+ "version": "10.1.3",
4
4
  "description": "Blue React Components",
5
5
  "license": "LGPL-3.0-or-later",
6
6
  "type": "module",
@@ -35,7 +35,7 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@popperjs/core": "^2.11.5",
38
- "blue-web": "^1.14.3",
38
+ "blue-web": "^1.15.1",
39
39
  "bootstrap": "~5.3.3",
40
40
  "clsx": "^1.1.1"
41
41
  },