@festo-ui/react 8.2.0-dev.630 → 8.2.0-dev.638
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.
- package/lib/components/bottom-sheet/BottomSheet.stories.d.ts +1 -1
- package/lib/components/breadcrumb/Breadcrumb.js +2 -2
- package/lib/components/buttons/button/Button.stories.d.ts +1 -1
- package/lib/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.js +5 -5
- package/lib/components/search-input/SearchSuggestion.js +9 -9
- package/lib/components/tab/useTabScroll.js +23 -23
- package/lib/helper/useForkRef.js +4 -4
- package/node/lib/components/breadcrumb/Breadcrumb.js +2 -2
- package/node/lib/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.js +5 -5
- package/node/lib/components/search-input/SearchSuggestion.js +9 -9
- package/node/lib/components/tab/useTabScroll.js +23 -23
- package/node/lib/helper/useForkRef.js +4 -4
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import classNames from "classnames";
|
|
3
3
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
-
/**
|
|
5
|
-
* Breadcrumb navigation can be used on pages with multiple navigation levels.
|
|
4
|
+
/**
|
|
5
|
+
* Breadcrumb navigation can be used on pages with multiple navigation levels.
|
|
6
6
|
*/
|
|
7
7
|
function Breadcrumb(_ref) {
|
|
8
8
|
let {
|
|
@@ -3,11 +3,11 @@ import { forwardRef, useContext } from "react";
|
|
|
3
3
|
import { IconRight2 } from "@festo-ui/react-icons";
|
|
4
4
|
import MobileFlyoutContext from "../MobileFlyoutContext.js";
|
|
5
5
|
import IconWrapper from "../../icon-wrapper/IconWrapper.js";
|
|
6
|
-
/*
|
|
7
|
-
* Augment `forwardRef` only for this module so that storybook can infer controls
|
|
8
|
-
* (despite component being wrapped in forwardRef)
|
|
9
|
-
* https://fettblog.eu/typescript-react-generic-forward-refs/#option-3%3A-augment-forwardref
|
|
10
|
-
* https://github.com/microsoft/TypeScript/pull/30215
|
|
6
|
+
/*
|
|
7
|
+
* Augment `forwardRef` only for this module so that storybook can infer controls
|
|
8
|
+
* (despite component being wrapped in forwardRef)
|
|
9
|
+
* https://fettblog.eu/typescript-react-generic-forward-refs/#option-3%3A-augment-forwardref
|
|
10
|
+
* https://github.com/microsoft/TypeScript/pull/30215
|
|
11
11
|
*/
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
const MobileFlyoutItem = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
export default class SearchSuggestion {
|
|
2
|
-
/**
|
|
3
|
-
* a html-string. e.g.: '<b> hello </b>'
|
|
2
|
+
/**
|
|
3
|
+
* a html-string. e.g.: '<b> hello </b>'
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
/**
|
|
7
|
-
* This Value will be used as new query when the user selects the suggestion.
|
|
6
|
+
/**
|
|
7
|
+
* This Value will be used as new query when the user selects the suggestion.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
/**
|
|
11
|
-
* Creates a basic Suggestion from a string. The first query match is highlighted by bold tags.
|
|
12
|
-
* @param suggestionString The suggested string (should contain the whole query)
|
|
13
|
-
* @param query The current query. This string will be highlighted.
|
|
14
|
-
* @returns a html-string.
|
|
10
|
+
/**
|
|
11
|
+
* Creates a basic Suggestion from a string. The first query match is highlighted by bold tags.
|
|
12
|
+
* @param suggestionString The suggested string (should contain the whole query)
|
|
13
|
+
* @param query The current query. This string will be highlighted.
|
|
14
|
+
* @returns a html-string.
|
|
15
15
|
*/
|
|
16
16
|
static basicSuggestion(suggestionString, query) {
|
|
17
17
|
const i = suggestionString.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
|
|
@@ -138,29 +138,29 @@ const useTabScroll = (tabLength, componentId, refs) => {
|
|
|
138
138
|
return Math.max(rightIncrement, 0);
|
|
139
139
|
}
|
|
140
140
|
function findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth) {
|
|
141
|
-
/**
|
|
142
|
-
* tabs are laid out in the tab scroller like this:
|
|
143
|
-
*
|
|
144
|
-
* scroll position
|
|
145
|
-
* +---+
|
|
146
|
-
* | | bar width
|
|
147
|
-
* | +-----------------------------------+
|
|
148
|
-
* | | |
|
|
149
|
-
* | v v
|
|
150
|
-
* | +-----------------------------------+
|
|
151
|
-
* v | tab scroller |
|
|
152
|
-
* +------------+--------------+-------------------+
|
|
153
|
-
* | tab | tab | tab |
|
|
154
|
-
* +------------+--------------+-------------------+
|
|
155
|
-
* | |
|
|
156
|
-
* +-----------------------------------+
|
|
157
|
-
*
|
|
158
|
-
* to determine the next adjacent index, we look at the tab root left and
|
|
159
|
-
* tab root right, both relative to the scroll position. if the tab root
|
|
160
|
-
* left is less than 0, then we know it's out of view to the left. if the
|
|
161
|
-
* tab root right minus the bar width is greater than 0, we know the tab is
|
|
162
|
-
* out of view to the right. from there, we either increment or decrement
|
|
163
|
-
* the index.
|
|
141
|
+
/**
|
|
142
|
+
* tabs are laid out in the tab scroller like this:
|
|
143
|
+
*
|
|
144
|
+
* scroll position
|
|
145
|
+
* +---+
|
|
146
|
+
* | | bar width
|
|
147
|
+
* | +-----------------------------------+
|
|
148
|
+
* | | |
|
|
149
|
+
* | v v
|
|
150
|
+
* | +-----------------------------------+
|
|
151
|
+
* v | tab scroller |
|
|
152
|
+
* +------------+--------------+-------------------+
|
|
153
|
+
* | tab | tab | tab |
|
|
154
|
+
* +------------+--------------+-------------------+
|
|
155
|
+
* | |
|
|
156
|
+
* +-----------------------------------+
|
|
157
|
+
*
|
|
158
|
+
* to determine the next adjacent index, we look at the tab root left and
|
|
159
|
+
* tab root right, both relative to the scroll position. if the tab root
|
|
160
|
+
* left is less than 0, then we know it's out of view to the left. if the
|
|
161
|
+
* tab root right minus the bar width is greater than 0, we know the tab is
|
|
162
|
+
* out of view to the right. from there, we either increment or decrement
|
|
163
|
+
* the index.
|
|
164
164
|
*/
|
|
165
165
|
const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
|
|
166
166
|
const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
|
package/lib/helper/useForkRef.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import setRef from "./setRef.js"; // https://github.com/facebook/react/issues/13029#issuecomment-497629971
|
|
3
3
|
export default function useForkRef(refA, refB) {
|
|
4
|
-
/**
|
|
5
|
-
* This will create a new function if the ref props change and are defined.
|
|
6
|
-
* This means react will call the old forkRef with `null` and the new forkRef
|
|
7
|
-
* with the ref. Cleanup naturally emerges from this behavior
|
|
4
|
+
/**
|
|
5
|
+
* This will create a new function if the ref props change and are defined.
|
|
6
|
+
* This means react will call the old forkRef with `null` and the new forkRef
|
|
7
|
+
* with the ref. Cleanup naturally emerges from this behavior
|
|
8
8
|
*/
|
|
9
9
|
return React.useMemo(() => {
|
|
10
10
|
if ((refA === null || refA === undefined) && (refB == null || refB === undefined)) {
|
|
@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
-
/**
|
|
12
|
-
* Breadcrumb navigation can be used on pages with multiple navigation levels.
|
|
11
|
+
/**
|
|
12
|
+
* Breadcrumb navigation can be used on pages with multiple navigation levels.
|
|
13
13
|
*/
|
|
14
14
|
function Breadcrumb(_ref) {
|
|
15
15
|
let {
|
|
@@ -11,11 +11,11 @@ var _MobileFlyoutContext = _interopRequireDefault(require("../MobileFlyoutContex
|
|
|
11
11
|
var _IconWrapper = _interopRequireDefault(require("../../icon-wrapper/IconWrapper.js"));
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
-
/*
|
|
15
|
-
* Augment `forwardRef` only for this module so that storybook can infer controls
|
|
16
|
-
* (despite component being wrapped in forwardRef)
|
|
17
|
-
* https://fettblog.eu/typescript-react-generic-forward-refs/#option-3%3A-augment-forwardref
|
|
18
|
-
* https://github.com/microsoft/TypeScript/pull/30215
|
|
14
|
+
/*
|
|
15
|
+
* Augment `forwardRef` only for this module so that storybook can infer controls
|
|
16
|
+
* (despite component being wrapped in forwardRef)
|
|
17
|
+
* https://fettblog.eu/typescript-react-generic-forward-refs/#option-3%3A-augment-forwardref
|
|
18
|
+
* https://github.com/microsoft/TypeScript/pull/30215
|
|
19
19
|
*/
|
|
20
20
|
|
|
21
21
|
const MobileFlyoutItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
@@ -5,19 +5,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
class SearchSuggestion {
|
|
8
|
-
/**
|
|
9
|
-
* a html-string. e.g.: '<b> hello </b>'
|
|
8
|
+
/**
|
|
9
|
+
* a html-string. e.g.: '<b> hello </b>'
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
|
-
/**
|
|
13
|
-
* This Value will be used as new query when the user selects the suggestion.
|
|
12
|
+
/**
|
|
13
|
+
* This Value will be used as new query when the user selects the suggestion.
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
|
-
/**
|
|
17
|
-
* Creates a basic Suggestion from a string. The first query match is highlighted by bold tags.
|
|
18
|
-
* @param suggestionString The suggested string (should contain the whole query)
|
|
19
|
-
* @param query The current query. This string will be highlighted.
|
|
20
|
-
* @returns a html-string.
|
|
16
|
+
/**
|
|
17
|
+
* Creates a basic Suggestion from a string. The first query match is highlighted by bold tags.
|
|
18
|
+
* @param suggestionString The suggested string (should contain the whole query)
|
|
19
|
+
* @param query The current query. This string will be highlighted.
|
|
20
|
+
* @returns a html-string.
|
|
21
21
|
*/
|
|
22
22
|
static basicSuggestion(suggestionString, query) {
|
|
23
23
|
const i = suggestionString.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
|
|
@@ -143,29 +143,29 @@ const useTabScroll = (tabLength, componentId, refs) => {
|
|
|
143
143
|
return Math.max(rightIncrement, 0);
|
|
144
144
|
}
|
|
145
145
|
function findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth) {
|
|
146
|
-
/**
|
|
147
|
-
* tabs are laid out in the tab scroller like this:
|
|
148
|
-
*
|
|
149
|
-
* scroll position
|
|
150
|
-
* +---+
|
|
151
|
-
* | | bar width
|
|
152
|
-
* | +-----------------------------------+
|
|
153
|
-
* | | |
|
|
154
|
-
* | v v
|
|
155
|
-
* | +-----------------------------------+
|
|
156
|
-
* v | tab scroller |
|
|
157
|
-
* +------------+--------------+-------------------+
|
|
158
|
-
* | tab | tab | tab |
|
|
159
|
-
* +------------+--------------+-------------------+
|
|
160
|
-
* | |
|
|
161
|
-
* +-----------------------------------+
|
|
162
|
-
*
|
|
163
|
-
* to determine the next adjacent index, we look at the tab root left and
|
|
164
|
-
* tab root right, both relative to the scroll position. if the tab root
|
|
165
|
-
* left is less than 0, then we know it's out of view to the left. if the
|
|
166
|
-
* tab root right minus the bar width is greater than 0, we know the tab is
|
|
167
|
-
* out of view to the right. from there, we either increment or decrement
|
|
168
|
-
* the index.
|
|
146
|
+
/**
|
|
147
|
+
* tabs are laid out in the tab scroller like this:
|
|
148
|
+
*
|
|
149
|
+
* scroll position
|
|
150
|
+
* +---+
|
|
151
|
+
* | | bar width
|
|
152
|
+
* | +-----------------------------------+
|
|
153
|
+
* | | |
|
|
154
|
+
* | v v
|
|
155
|
+
* | +-----------------------------------+
|
|
156
|
+
* v | tab scroller |
|
|
157
|
+
* +------------+--------------+-------------------+
|
|
158
|
+
* | tab | tab | tab |
|
|
159
|
+
* +------------+--------------+-------------------+
|
|
160
|
+
* | |
|
|
161
|
+
* +-----------------------------------+
|
|
162
|
+
*
|
|
163
|
+
* to determine the next adjacent index, we look at the tab root left and
|
|
164
|
+
* tab root right, both relative to the scroll position. if the tab root
|
|
165
|
+
* left is less than 0, then we know it's out of view to the left. if the
|
|
166
|
+
* tab root right minus the bar width is greater than 0, we know the tab is
|
|
167
|
+
* out of view to the right. from there, we either increment or decrement
|
|
168
|
+
* the index.
|
|
169
169
|
*/
|
|
170
170
|
const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
|
|
171
171
|
const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
|
|
@@ -9,10 +9,10 @@ var _setRef = _interopRequireDefault(require("./setRef.js"));
|
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
10
|
// https://github.com/facebook/react/issues/13029#issuecomment-497629971
|
|
11
11
|
function useForkRef(refA, refB) {
|
|
12
|
-
/**
|
|
13
|
-
* This will create a new function if the ref props change and are defined.
|
|
14
|
-
* This means react will call the old forkRef with `null` and the new forkRef
|
|
15
|
-
* with the ref. Cleanup naturally emerges from this behavior
|
|
12
|
+
/**
|
|
13
|
+
* This will create a new function if the ref props change and are defined.
|
|
14
|
+
* This means react will call the old forkRef with `null` and the new forkRef
|
|
15
|
+
* with the ref. Cleanup naturally emerges from this behavior
|
|
16
16
|
*/
|
|
17
17
|
return _react.default.useMemo(() => {
|
|
18
18
|
if ((refA === null || refA === undefined) && (refB == null || refB === undefined)) {
|
package/package.json
CHANGED