@salutejs/plasma-core 1.226.1-next-sbcom.0 → 1.227.0-dev.0
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/__helpers/IconPlaceholder.js +6 -9
- package/__helpers/index.js +1 -1
- package/collectPackageInfo.js +4 -4
- package/components/Badge/Badge.js +30 -103
- package/components/Badge/index.js +1 -1
- package/components/Basebox/Basebox.js +33 -42
- package/components/Basebox/index.js +1 -1
- package/components/Button/Button.js +28 -67
- package/components/Button/Button.mixins.js +22 -76
- package/components/Button/Button.props.js +5 -5
- package/components/Button/createButton.js +14 -145
- package/components/Button/index.js +4 -4
- package/components/Card/Card.js +34 -162
- package/components/Card/CardBody.js +4 -4
- package/components/Card/CardContent.js +14 -23
- package/components/Card/CardMedia.js +20 -91
- package/components/Card/CardPrice.js +18 -60
- package/components/Card/CardTypography.js +43 -52
- package/components/Card/index.js +5 -5
- package/components/Carousel/Carousel.js +46 -64
- package/components/Carousel/CarouselItem.js +21 -93
- package/components/Carousel/hooks.js +62 -121
- package/components/Carousel/index.js +3 -3
- package/components/Carousel/utils.js +59 -73
- package/components/Fade/Fade.js +6 -9
- package/components/Fade/index.js +1 -1
- package/components/Field/Field.js +48 -63
- package/components/Field/Field.statuses.js +3 -3
- package/components/Field/index.js +2 -2
- package/components/Image/Image.js +34 -115
- package/components/Image/index.js +1 -1
- package/components/Input/Input.js +7 -7
- package/components/Input/Input.mixins.js +9 -12
- package/components/Input/index.js +1 -1
- package/components/ModalBase/ModalBase.js +22 -100
- package/components/ModalBase/ModalBaseContext.js +6 -9
- package/components/ModalBase/ModalOverlay.js +28 -111
- package/components/ModalBase/hooks.js +15 -43
- package/components/ModalBase/index.js +2 -2
- package/components/PaginationDots/PaginationDot.js +11 -17
- package/components/PaginationDots/PaginationDots.js +4 -7
- package/components/PaginationDots/index.js +3 -3
- package/components/PaginationDots/usePaginationDots.js +10 -11
- package/components/Popup/Popup.js +52 -205
- package/components/Popup/index.js +1 -1
- package/components/PopupBase/PopupBase.js +35 -169
- package/components/PopupBase/PopupBaseContext.js +26 -86
- package/components/PopupBase/PopupBaseRoot.js +31 -169
- package/components/PopupBase/hooks.js +23 -97
- package/components/PopupBase/index.js +3 -3
- package/components/PopupBase/utils.js +32 -78
- package/components/Price/Price.js +15 -90
- package/components/Price/index.js +1 -1
- package/components/RadioGroup/RadioGroup.js +6 -127
- package/components/RadioGroup/index.js +1 -1
- package/components/SSRProvider/SSRProvider.js +4 -5
- package/components/SSRProvider/index.js +1 -1
- package/components/Skeleton/LineSkeleton.js +23 -95
- package/components/Skeleton/RectSkeleton.js +20 -93
- package/components/Skeleton/Skeleton.js +2 -2
- package/components/Skeleton/TextSkeleton.js +11 -55
- package/components/Skeleton/index.js +3 -3
- package/components/Slider/Double.js +52 -203
- package/components/Slider/Handle.js +28 -158
- package/components/Slider/Single.js +29 -177
- package/components/Slider/Slider.js +5 -7
- package/components/Slider/SliderBase.js +39 -48
- package/components/Slider/ThumbBase.js +19 -95
- package/components/Slider/index.js +3 -3
- package/components/Slider/utils.js +2 -2
- package/components/Spinner/Spinner.js +28 -100
- package/components/Spinner/SpinnerSvg.js +9 -78
- package/components/Spinner/index.js +1 -1
- package/components/Switch/Switch.js +49 -220
- package/components/Switch/index.js +1 -1
- package/components/Tabs/TabItem.js +33 -168
- package/components/Tabs/Tabs.js +32 -170
- package/components/Tabs/TabsContext.js +12 -42
- package/components/Tabs/createTabsController.js +33 -168
- package/components/Tabs/index.js +4 -4
- package/components/TextArea/TextArea.js +20 -30
- package/components/TextArea/index.js +1 -1
- package/components/TextField/index.js +3 -3
- package/components/Toast/Toast.js +15 -16
- package/components/Toast/ToastContext.js +4 -8
- package/components/Toast/ToastController.js +44 -101
- package/components/Toast/ToastProvider.js +37 -142
- package/components/Toast/index.js +3 -3
- package/components/Toast/useToast.js +6 -6
- package/components/Typography/Body.js +18 -18
- package/components/Typography/Button.js +13 -13
- package/components/Typography/Caption.js +8 -8
- package/components/Typography/Display.js +18 -18
- package/components/Typography/Footnote.js +13 -13
- package/components/Typography/Headline.js +43 -43
- package/components/Typography/Paragraph.js +24 -24
- package/components/Typography/Underline.js +8 -8
- package/es/__helpers/IconPlaceholder.js +5 -8
- package/es/collectPackageInfo.js +3 -3
- package/es/components/Badge/Badge.js +27 -100
- package/es/components/Basebox/Basebox.js +28 -37
- package/es/components/Button/Button.js +24 -63
- package/es/components/Button/Button.mixins.js +19 -73
- package/es/components/Button/Button.props.js +3 -3
- package/es/components/Button/createButton.js +12 -143
- package/es/components/Card/Card.js +29 -157
- package/es/components/Card/CardBody.js +2 -2
- package/es/components/Card/CardContent.js +12 -21
- package/es/components/Card/CardMedia.js +17 -88
- package/es/components/Card/CardPrice.js +13 -55
- package/es/components/Card/CardTypography.js +43 -52
- package/es/components/Carousel/Carousel.js +45 -63
- package/es/components/Carousel/CarouselItem.js +18 -90
- package/es/components/Carousel/hooks.js +58 -117
- package/es/components/Carousel/utils.js +58 -72
- package/es/components/Fade/Fade.js +5 -8
- package/es/components/Field/Field.js +44 -59
- package/es/components/Field/Field.statuses.js +4 -4
- package/es/components/Image/Image.js +31 -112
- package/es/components/Input/Input.js +4 -4
- package/es/components/Input/Input.mixins.js +6 -9
- package/es/components/ModalBase/ModalBase.js +16 -94
- package/es/components/ModalBase/ModalBaseContext.js +6 -9
- package/es/components/ModalBase/ModalOverlay.js +23 -106
- package/es/components/ModalBase/hooks.js +12 -40
- package/es/components/PaginationDots/PaginationDot.js +9 -15
- package/es/components/PaginationDots/PaginationDots.js +3 -6
- package/es/components/PaginationDots/usePaginationDots.js +9 -10
- package/es/components/Popup/Popup.js +48 -201
- package/es/components/PopupBase/PopupBase.js +27 -161
- package/es/components/PopupBase/PopupBaseContext.js +25 -85
- package/es/components/PopupBase/PopupBaseRoot.js +26 -164
- package/es/components/PopupBase/hooks.js +21 -95
- package/es/components/PopupBase/utils.js +31 -77
- package/es/components/Price/Price.js +12 -87
- package/es/components/RadioGroup/RadioGroup.js +5 -126
- package/es/components/SSRProvider/SSRProvider.js +3 -4
- package/es/components/Skeleton/LineSkeleton.js +18 -90
- package/es/components/Skeleton/RectSkeleton.js +16 -89
- package/es/components/Skeleton/Skeleton.js +2 -2
- package/es/components/Skeleton/TextSkeleton.js +7 -51
- package/es/components/Slider/Double.js +49 -200
- package/es/components/Slider/Handle.js +23 -153
- package/es/components/Slider/Single.js +26 -174
- package/es/components/Slider/Slider.js +2 -4
- package/es/components/Slider/SliderBase.js +36 -45
- package/es/components/Slider/ThumbBase.js +16 -92
- package/es/components/Slider/index.js +1 -1
- package/es/components/Slider/utils.js +2 -2
- package/es/components/Spinner/Spinner.js +23 -95
- package/es/components/Spinner/SpinnerSvg.js +8 -77
- package/es/components/Switch/Switch.js +45 -216
- package/es/components/Tabs/TabItem.js +28 -163
- package/es/components/Tabs/Tabs.js +28 -166
- package/es/components/Tabs/TabsContext.js +11 -41
- package/es/components/Tabs/createTabsController.js +28 -163
- package/es/components/TextArea/TextArea.js +18 -28
- package/es/components/Toast/Toast.js +10 -11
- package/es/components/Toast/ToastContext.js +3 -7
- package/es/components/Toast/ToastController.js +38 -95
- package/es/components/Toast/ToastProvider.js +34 -139
- package/es/components/Toast/useToast.js +4 -4
- package/es/components/Typography/Body.js +15 -15
- package/es/components/Typography/Button.js +10 -10
- package/es/components/Typography/Caption.js +5 -5
- package/es/components/Typography/Display.js +15 -15
- package/es/components/Typography/Footnote.js +10 -10
- package/es/components/Typography/Headline.js +40 -40
- package/es/components/Typography/Paragraph.js +21 -21
- package/es/components/Typography/Underline.js +5 -5
- package/es/hocs/withAutoFocus.js +8 -78
- package/es/hocs/withSkeleton.js +5 -10
- package/es/hooks/useDebouncedFunction.js +4 -36
- package/es/hooks/useFocusTrap.js +18 -21
- package/es/hooks/useForkRef.js +3 -3
- package/es/hooks/useIsomorphicLayoutEffect.js +1 -1
- package/es/hooks/useResizeObserver.js +8 -8
- package/es/hooks/useUniqId.js +6 -52
- package/es/mixins/addFocus.js +17 -22
- package/es/mixins/applyDisabled.js +6 -9
- package/es/mixins/applyEllipsis.js +2 -4
- package/es/mixins/applyMaxLines.js +3 -6
- package/es/mixins/applyNoSelect.js +2 -4
- package/es/mixins/applyOutline.js +2 -4
- package/es/mixins/applyRoundness.js +4 -7
- package/es/mixins/applyScrollSnap.js +4 -7
- package/es/mixins/applySkeletonGradient.js +6 -9
- package/es/mixins/applyView.js +2 -5
- package/es/mixins/blur.js +2 -5
- package/es/mixins/shadows.js +1 -1
- package/es/tokens/colors.js +48 -48
- package/es/tokens/typography.js +18 -18
- package/es/utils/__tests__/formatters.test.js +2 -2
- package/es/utils/animatedScrollTo.js +24 -34
- package/es/utils/canUseDOM.js +1 -1
- package/es/utils/extractTextFrom.js +3 -7
- package/es/utils/focusManager.js +40 -47
- package/es/utils/formatCurrency.js +4 -4
- package/es/utils/formatters.js +6 -14
- package/es/utils/react.js +4 -4
- package/es/utils/roundness.js +2 -4
- package/es/utils/scopeTab.js +5 -5
- package/es/utils/setRef.js +1 -1
- package/es/utils/tabbable.js +16 -25
- package/es/utils/toCssSize.js +1 -3
- package/es/utils/transformStyles.js +5 -60
- package/hocs/index.js +2 -2
- package/hocs/withAutoFocus.js +9 -79
- package/hocs/withSkeleton.js +8 -13
- package/hooks/index.js +6 -6
- package/hooks/useDebouncedFunction.js +5 -37
- package/hooks/useFocusTrap.js +22 -25
- package/hooks/useForkRef.js +5 -5
- package/hooks/useIsomorphicLayoutEffect.js +3 -3
- package/hooks/useResizeObserver.js +9 -9
- package/hooks/useUniqId.js +8 -54
- package/mixins/addFocus.js +19 -24
- package/mixins/applyDisabled.js +7 -10
- package/mixins/applyEllipsis.js +3 -5
- package/mixins/applyMaxLines.js +4 -7
- package/mixins/applyNoSelect.js +3 -5
- package/mixins/applyOutline.js +3 -5
- package/mixins/applyRoundness.js +5 -8
- package/mixins/applyScrollSnap.js +5 -8
- package/mixins/applySkeletonGradient.js +8 -11
- package/mixins/applyView.js +3 -6
- package/mixins/blur.js +2 -5
- package/mixins/index.js +11 -11
- package/mixins/shadows.js +1 -1
- package/package.json +13 -18
- package/tokens/colors.js +48 -48
- package/tokens/typography.js +18 -18
- package/utils/__tests__/formatters.test.js +3 -3
- package/utils/animatedScrollTo.js +24 -34
- package/utils/canUseDOM.js +1 -1
- package/utils/extractTextFrom.js +4 -8
- package/utils/focusManager.js +41 -48
- package/utils/formatCurrency.js +4 -4
- package/utils/formatters.js +6 -14
- package/utils/index.js +10 -10
- package/utils/react.js +7 -7
- package/utils/roundness.js +2 -4
- package/utils/scopeTab.js +6 -6
- package/utils/setRef.js +1 -1
- package/utils/tabbable.js +16 -25
- package/utils/toCssSize.js +1 -3
- package/utils/transformStyles.js +5 -60
package/es/utils/focusManager.js
CHANGED
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
function _class_call_check(instance, Constructor) {
|
|
2
|
-
if (!(instance instanceof Constructor)) {
|
|
3
|
-
throw new TypeError("Cannot call a class as a function");
|
|
4
|
-
}
|
|
5
|
-
}
|
|
6
1
|
function _define_property(obj, key, value) {
|
|
7
2
|
if (key in obj) {
|
|
8
3
|
Object.defineProperty(obj, key, {
|
|
@@ -20,45 +15,43 @@ import { findTabbableDescendants } from './tabbable';
|
|
|
20
15
|
/**
|
|
21
16
|
* Менеджер фокуса при открытии и закрытии нод при использовании focus-trap.
|
|
22
17
|
* Также необходим, чтобы фокус всегда должен находиться внутри необходимой ноды.
|
|
23
|
-
* */ export
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
});
|
|
64
|
-
};
|
|
18
|
+
* */ export class FocusManager {
|
|
19
|
+
constructor(){
|
|
20
|
+
// массив с элементами, которые нужно зафокусить после анмаунта
|
|
21
|
+
_define_property(this, "focusAfterElements", []);
|
|
22
|
+
// массив с trap нодами
|
|
23
|
+
_define_property(this, "focusNodes", []);
|
|
24
|
+
_define_property(this, "handleFocus", ()=>{
|
|
25
|
+
// Фокус всегда должен находиться внутри необходимой ноды
|
|
26
|
+
const focusNode = this.focusNodes[this.focusNodes.length - 1];
|
|
27
|
+
if (!focusNode || focusNode.contains(document.activeElement)) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
// Выделяем первый tabbable элемент
|
|
31
|
+
const el = findTabbableDescendants(focusNode)[0] || focusNode;
|
|
32
|
+
el.focus();
|
|
33
|
+
});
|
|
34
|
+
// добавление на фокус после анмаунта
|
|
35
|
+
_define_property(this, "markForFocusAfter", (focusAfterNode)=>{
|
|
36
|
+
const node = focusAfterNode && focusAfterNode.current ? focusAfterNode.current : document.activeElement;
|
|
37
|
+
this.focusAfterElements.push(node);
|
|
38
|
+
});
|
|
39
|
+
// фокус на необходимый элемент
|
|
40
|
+
_define_property(this, "returnFocus", ()=>{
|
|
41
|
+
const toFocus = this.focusAfterElements.pop() ?? null;
|
|
42
|
+
if (toFocus) {
|
|
43
|
+
toFocus.focus();
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
// при маунте ноды
|
|
47
|
+
_define_property(this, "setupScopedFocus", (element)=>{
|
|
48
|
+
this.focusNodes.push(element);
|
|
49
|
+
document.addEventListener('focusin', this.handleFocus, true);
|
|
50
|
+
});
|
|
51
|
+
// при анмаунте
|
|
52
|
+
_define_property(this, "teardownScopedFocus", ()=>{
|
|
53
|
+
this.focusNodes.pop();
|
|
54
|
+
document.removeEventListener('focusin', this.handleFocus);
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
}
|
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
* @param {string} currency
|
|
5
5
|
* @param {number} minimumFractionDigits
|
|
6
6
|
* @return {string}
|
|
7
|
-
*/ export
|
|
8
|
-
|
|
7
|
+
*/ export const formatCurrency = (value, currency, minimumFractionDigits)=>{
|
|
8
|
+
const formatter = new Intl.NumberFormat('ru', {
|
|
9
9
|
style: 'currency',
|
|
10
|
-
currency
|
|
11
|
-
minimumFractionDigits
|
|
10
|
+
currency,
|
|
11
|
+
minimumFractionDigits
|
|
12
12
|
});
|
|
13
13
|
return formatter.format(value);
|
|
14
14
|
};
|
package/es/utils/formatters.js
CHANGED
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
3
|
-
};
|
|
4
|
-
export var padZeroNumber = function padZeroNumber(value) {
|
|
5
|
-
return "".concat(value).padStart(2, '0');
|
|
6
|
-
};
|
|
1
|
+
export const last = (array)=>array[array.length - 1];
|
|
2
|
+
export const padZeroNumber = (value)=>`${value}`.padStart(2, '0');
|
|
7
3
|
/**
|
|
8
4
|
* Форматирование названия месяца.
|
|
9
5
|
* Если не передавать `day`, то название месяца будет, например, `июнь`.
|
|
@@ -11,16 +7,12 @@ export var padZeroNumber = function padZeroNumber(value) {
|
|
|
11
7
|
* Так же результат выполнения метода `formatToParts` является массивом,
|
|
12
8
|
* в котором находятся части даты, форматированной на основнии `options`.
|
|
13
9
|
* То есть в данном случае вернется массив [`day`, `separator`, `month`]
|
|
14
|
-
*/ export
|
|
15
|
-
|
|
10
|
+
*/ export const monthName = (val, monthFormat)=>{
|
|
11
|
+
const targetMonth = new Date(2000, val, 1);
|
|
16
12
|
return last(new Intl.DateTimeFormat('ru-RU', {
|
|
17
13
|
day: 'numeric',
|
|
18
14
|
month: monthFormat
|
|
19
15
|
}).formatToParts(targetMonth)).value;
|
|
20
16
|
};
|
|
21
|
-
export
|
|
22
|
-
|
|
23
|
-
};
|
|
24
|
-
export var monthShortName = function monthShortName(val) {
|
|
25
|
-
return monthName(val, 'short').replace('.', '');
|
|
26
|
-
};
|
|
17
|
+
export const monthLongName = (val)=>monthName(val, 'long');
|
|
18
|
+
export const monthShortName = (val)=>monthName(val, 'short').replace('.', '');
|
package/es/utils/react.js
CHANGED
|
@@ -4,14 +4,14 @@ import ReactDOM from 'react-dom';
|
|
|
4
4
|
import { useUniqId } from '../hooks/useUniqId';
|
|
5
5
|
// TODO: https://github.com/salute-developers/plasma/issues/233
|
|
6
6
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
7
|
-
|
|
7
|
+
const { flushSync } = ReactDOM;
|
|
8
8
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
9
|
-
|
|
10
|
-
export
|
|
9
|
+
const { useId } = React;
|
|
10
|
+
export const IS_REACT_18 = ReactDOM.version.split('.')[0] === '18';
|
|
11
11
|
export function safeFlushSync(fn) {
|
|
12
12
|
if (!IS_REACT_18) {
|
|
13
13
|
return fn();
|
|
14
14
|
}
|
|
15
15
|
return flushSync(fn);
|
|
16
16
|
}
|
|
17
|
-
export
|
|
17
|
+
export const safeUseId = !IS_REACT_18 ? useUniqId : useId;
|
package/es/utils/roundness.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* | |
|
|
4
4
|
* | |
|
|
5
5
|
* bl ---- br
|
|
6
|
-
*/ export
|
|
6
|
+
*/ export const pins = {
|
|
7
7
|
'square-square': 'r',
|
|
8
8
|
'square-clear': 'r 0 0 r',
|
|
9
9
|
'clear-square': '0 r r 0',
|
|
@@ -23,8 +23,7 @@
|
|
|
23
23
|
* @example
|
|
24
24
|
* // Выведет значение для border-radius, равное '1em 2em 2em 1em'
|
|
25
25
|
* convertPinsMatrix('r h h r', '1em', '2em');
|
|
26
|
-
*/ export
|
|
27
|
-
return matrixKey && pins[matrixKey].split(' ').map(function(char) {
|
|
26
|
+
*/ export const convertRoundnessMatrix = (matrixKey, r, h)=>matrixKey && pins[matrixKey].split(' ').map((char)=>{
|
|
28
27
|
switch(char){
|
|
29
28
|
case 'r':
|
|
30
29
|
return r;
|
|
@@ -34,4 +33,3 @@
|
|
|
34
33
|
return char;
|
|
35
34
|
}
|
|
36
35
|
}).join(' ');
|
|
37
|
-
};
|
package/es/utils/scopeTab.js
CHANGED
|
@@ -3,22 +3,22 @@ import { findTabbableDescendants } from './tabbable';
|
|
|
3
3
|
* Управлление фокусом лишь внутри ноды через tab
|
|
4
4
|
* @param node
|
|
5
5
|
* @param event
|
|
6
|
-
*/ export
|
|
7
|
-
|
|
6
|
+
*/ export const scopeTab = (node, event)=>{
|
|
7
|
+
const tabbable = findTabbableDescendants(node);
|
|
8
8
|
if (!tabbable.length) {
|
|
9
9
|
event.preventDefault();
|
|
10
10
|
return;
|
|
11
11
|
}
|
|
12
12
|
// смотрим, является ли элемент крайним - первый или последним
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
|
|
14
|
+
const leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
|
|
15
15
|
// если не является, то передаем обработку таба самому браузеру
|
|
16
16
|
if (!leavingFinalTabbable) {
|
|
17
17
|
return;
|
|
18
18
|
}
|
|
19
19
|
// иначе зацкливаемся
|
|
20
20
|
event.preventDefault();
|
|
21
|
-
|
|
21
|
+
const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0];
|
|
22
22
|
if (target) {
|
|
23
23
|
target.focus();
|
|
24
24
|
}
|
package/es/utils/setRef.js
CHANGED
package/es/utils/tabbable.js
CHANGED
|
@@ -1,12 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
return !!right[Symbol.hasInstance](left);
|
|
4
|
-
} else {
|
|
5
|
-
return left instanceof right;
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
var tabbableNode = /input|select|textarea|button|object/;
|
|
9
|
-
export var focusSelector = [
|
|
1
|
+
const tabbableNode = /input|select|textarea|button|object/;
|
|
2
|
+
export const focusSelector = [
|
|
10
3
|
'input',
|
|
11
4
|
'select',
|
|
12
5
|
'textarea',
|
|
@@ -18,11 +11,11 @@ export var focusSelector = [
|
|
|
18
11
|
'video[controls]',
|
|
19
12
|
'[contenteditable]:not([contenteditable="false"])'
|
|
20
13
|
].join(',');
|
|
21
|
-
|
|
14
|
+
const isHidden = (el)=>{
|
|
22
15
|
return el.offsetWidth <= 0 && el.offsetHeight <= 0 || el.style.display === 'none' || el.style.visibility === 'hidden' || el.style.opacity === '0';
|
|
23
16
|
};
|
|
24
|
-
export
|
|
25
|
-
|
|
17
|
+
export const isVisible = (element, parentContainer)=>{
|
|
18
|
+
let parentElement = element;
|
|
26
19
|
while(parentElement){
|
|
27
20
|
if (parentElement === parentContainer || parentElement === document.body) {
|
|
28
21
|
break;
|
|
@@ -34,24 +27,22 @@ export var isVisible = function isVisible(element, parentContainer) {
|
|
|
34
27
|
}
|
|
35
28
|
return true;
|
|
36
29
|
};
|
|
37
|
-
|
|
38
|
-
|
|
30
|
+
const getElementTabIndex = (element)=>{
|
|
31
|
+
const tabIndex = element.getAttribute('tabindex');
|
|
39
32
|
return tabIndex === null ? NaN : parseInt(tabIndex, 10);
|
|
40
33
|
};
|
|
41
|
-
export
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
34
|
+
export const isFocusable = (element, parentContainer)=>{
|
|
35
|
+
const nodeName = element.nodeName.toLowerCase();
|
|
36
|
+
const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));
|
|
37
|
+
const res = tabbableNode.test(nodeName) && !element.disabled || (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);
|
|
45
38
|
return Boolean(res) && isVisible(element, parentContainer);
|
|
46
39
|
};
|
|
47
|
-
export
|
|
48
|
-
|
|
49
|
-
|
|
40
|
+
export const isTabble = (element, parentContainer)=>{
|
|
41
|
+
const tabIndex = getElementTabIndex(element);
|
|
42
|
+
const isTabIndexNaN = Number.isNaN(tabIndex);
|
|
50
43
|
return (isTabIndexNaN || tabIndex >= 0) && isFocusable(element, parentContainer);
|
|
51
44
|
};
|
|
52
45
|
// Все элементы внутри данной ноды, до которых можно добраться табом
|
|
53
|
-
export
|
|
54
|
-
return Array.from(element.querySelectorAll(focusSelector)).filter(
|
|
55
|
-
return isTabble(el, element);
|
|
56
|
-
});
|
|
46
|
+
export const findTabbableDescendants = (element)=>{
|
|
47
|
+
return Array.from(element.querySelectorAll(focusSelector)).filter((el)=>isTabble(el, element));
|
|
57
48
|
};
|
package/es/utils/toCssSize.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Добавит ед./изм. value + px, если передан number
|
|
3
|
-
*/ export
|
|
4
|
-
return typeof value === 'number' ? "".concat(value, "px") : value;
|
|
5
|
-
};
|
|
3
|
+
*/ export const toCssSize = (value)=>typeof value === 'number' ? `${value}px` : value;
|
|
@@ -1,65 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}
|
|
6
|
-
function _array_with_holes(arr) {
|
|
7
|
-
if (Array.isArray(arr)) return arr;
|
|
8
|
-
}
|
|
9
|
-
function _iterable_to_array_limit(arr, i) {
|
|
10
|
-
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
11
|
-
if (_i == null) return;
|
|
12
|
-
var _arr = [];
|
|
13
|
-
var _n = true;
|
|
14
|
-
var _d = false;
|
|
15
|
-
var _s, _e;
|
|
16
|
-
try {
|
|
17
|
-
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
18
|
-
_arr.push(_s.value);
|
|
19
|
-
if (i && _arr.length === i) break;
|
|
20
|
-
}
|
|
21
|
-
} catch (err) {
|
|
22
|
-
_d = true;
|
|
23
|
-
_e = err;
|
|
24
|
-
} finally{
|
|
25
|
-
try {
|
|
26
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
27
|
-
} finally{
|
|
28
|
-
if (_d) throw _e;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
return _arr;
|
|
32
|
-
}
|
|
33
|
-
function _non_iterable_rest() {
|
|
34
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
35
|
-
}
|
|
36
|
-
function _sliced_to_array(arr, i) {
|
|
37
|
-
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
38
|
-
}
|
|
39
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
40
|
-
if (!o) return;
|
|
41
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
42
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
43
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
44
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
45
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
46
|
-
}
|
|
47
|
-
var uppercaseCheck = /([A-Z])/;
|
|
48
|
-
var uppercasePattern = /([A-Z])/g;
|
|
49
|
-
var prefixAndLowerCase = function prefixAndLowerCase(char) {
|
|
50
|
-
return "-".concat(char.toLowerCase());
|
|
51
|
-
};
|
|
52
|
-
var hyphenate = function hyphenate(str) {
|
|
53
|
-
return uppercaseCheck.test(str) ? str.replace(uppercasePattern, prefixAndLowerCase) : str;
|
|
54
|
-
};
|
|
1
|
+
const uppercaseCheck = /([A-Z])/;
|
|
2
|
+
const uppercasePattern = /([A-Z])/g;
|
|
3
|
+
const prefixAndLowerCase = (char)=>`-${char.toLowerCase()}`;
|
|
4
|
+
const hyphenate = (str)=>uppercaseCheck.test(str) ? str.replace(uppercasePattern, prefixAndLowerCase) : str;
|
|
55
5
|
/**
|
|
56
6
|
* Транформирует объект стилей,
|
|
57
7
|
* оставляя значения как есть (например, не добавляя "px" к числам),
|
|
58
8
|
* а ключи переводя в kebab-case.
|
|
59
9
|
* Подходит для подготовки типографической темы.
|
|
60
|
-
*/ export
|
|
61
|
-
return Object.entries(styles).map(function(param) {
|
|
62
|
-
var _param = _sliced_to_array(param, 2), key = _param[0], value = _param[1];
|
|
63
|
-
return "".concat(hyphenate(key), ": ").concat(value);
|
|
64
|
-
}).join(';');
|
|
65
|
-
};
|
|
10
|
+
*/ export const transformStyles = (styles)=>Object.entries(styles).map(([key, value])=>`${hyphenate(key)}: ${value}`).join(';');
|
package/hocs/index.js
CHANGED
|
@@ -16,5 +16,5 @@ _export(exports, {
|
|
|
16
16
|
return _withSkeleton.withSkeleton;
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
const _withAutoFocus = require("./withAutoFocus");
|
|
20
|
+
const _withSkeleton = require("./withSkeleton");
|
package/hocs/withAutoFocus.js
CHANGED
|
@@ -8,20 +8,7 @@ Object.defineProperty(exports, "withAutoFocus", {
|
|
|
8
8
|
return withAutoFocus;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
|
|
12
|
-
function _define_property(obj, key, value) {
|
|
13
|
-
if (key in obj) {
|
|
14
|
-
Object.defineProperty(obj, key, {
|
|
15
|
-
value: value,
|
|
16
|
-
enumerable: true,
|
|
17
|
-
configurable: true,
|
|
18
|
-
writable: true
|
|
19
|
-
});
|
|
20
|
-
} else {
|
|
21
|
-
obj[key] = value;
|
|
22
|
-
}
|
|
23
|
-
return obj;
|
|
24
|
-
}
|
|
11
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
|
|
25
12
|
function _getRequireWildcardCache(nodeInterop) {
|
|
26
13
|
if (typeof WeakMap !== "function") return null;
|
|
27
14
|
var cacheBabelInterop = new WeakMap();
|
|
@@ -63,75 +50,18 @@ function _interop_require_wildcard(obj, nodeInterop) {
|
|
|
63
50
|
}
|
|
64
51
|
return newObj;
|
|
65
52
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
var ownKeys = Object.keys(source);
|
|
70
|
-
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
71
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
72
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
73
|
-
}));
|
|
74
|
-
}
|
|
75
|
-
ownKeys.forEach(function(key) {
|
|
76
|
-
_define_property(target, key, source[key]);
|
|
77
|
-
});
|
|
78
|
-
}
|
|
79
|
-
return target;
|
|
80
|
-
}
|
|
81
|
-
function _object_without_properties(source, excluded) {
|
|
82
|
-
if (source == null) return {};
|
|
83
|
-
var target = {}, sourceKeys, key, i;
|
|
84
|
-
if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
|
|
85
|
-
sourceKeys = Reflect.ownKeys(source);
|
|
86
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
87
|
-
key = sourceKeys[i];
|
|
88
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
89
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
90
|
-
target[key] = source[key];
|
|
91
|
-
}
|
|
92
|
-
return target;
|
|
93
|
-
}
|
|
94
|
-
target = _object_without_properties_loose(source, excluded);
|
|
95
|
-
if (Object.getOwnPropertySymbols) {
|
|
96
|
-
sourceKeys = Object.getOwnPropertySymbols(source);
|
|
97
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
98
|
-
key = sourceKeys[i];
|
|
99
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
100
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
101
|
-
target[key] = source[key];
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
return target;
|
|
105
|
-
}
|
|
106
|
-
function _object_without_properties_loose(source, excluded) {
|
|
107
|
-
if (source == null) return {};
|
|
108
|
-
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
|
|
109
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
110
|
-
key = sourceKeys[i];
|
|
111
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
112
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
113
|
-
target[key] = source[key];
|
|
114
|
-
}
|
|
115
|
-
return target;
|
|
116
|
-
}
|
|
117
|
-
var withAutoFocus = function withAutoFocus(Component) {
|
|
118
|
-
return function(_0) {
|
|
119
|
-
var autoFocus = _0.autoFocus, _0_tabIndex = _0.tabIndex, tabIndex = _0_tabIndex === void 0 ? -1 : _0_tabIndex, _0_preventScroll = _0.preventScroll, preventScroll = _0_preventScroll === void 0 ? true : _0_preventScroll, props = _object_without_properties(_0, [
|
|
120
|
-
"autoFocus",
|
|
121
|
-
"tabIndex",
|
|
122
|
-
"preventScroll"
|
|
123
|
-
]);
|
|
124
|
-
var divRef = (0, _react.useRef)(null);
|
|
125
|
-
(0, _react.useEffect)(function() {
|
|
53
|
+
const withAutoFocus = (Component)=>({ autoFocus, tabIndex = -1, preventScroll = true, ...props })=>{
|
|
54
|
+
const divRef = (0, _react.useRef)(null);
|
|
55
|
+
(0, _react.useEffect)(()=>{
|
|
126
56
|
if (autoFocus && divRef.current) {
|
|
127
57
|
divRef.current.focus({
|
|
128
|
-
preventScroll
|
|
58
|
+
preventScroll
|
|
129
59
|
});
|
|
130
60
|
}
|
|
131
61
|
});
|
|
132
|
-
return /*#__PURE__*/ _react.default.createElement(Component,
|
|
62
|
+
return /*#__PURE__*/ _react.default.createElement(Component, {
|
|
133
63
|
tabIndex: tabIndex,
|
|
134
|
-
ref: divRef
|
|
135
|
-
|
|
64
|
+
ref: divRef,
|
|
65
|
+
...props
|
|
66
|
+
});
|
|
136
67
|
};
|
|
137
|
-
};
|
package/hocs/withSkeleton.js
CHANGED
|
@@ -8,25 +8,20 @@ Object.defineProperty(exports, "withSkeleton", {
|
|
|
8
8
|
return withSkeleton;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
const _react = /*#__PURE__*/ _interop_require_default(require("react"));
|
|
12
|
+
const _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
|
|
13
|
+
const _mixins = require("../mixins");
|
|
14
14
|
function _interop_require_default(obj) {
|
|
15
15
|
return obj && obj.__esModule ? obj : {
|
|
16
16
|
default: obj
|
|
17
17
|
};
|
|
18
18
|
}
|
|
19
|
-
|
|
20
|
-
return (0, _styledcomponents.default)(Component).withConfig({
|
|
19
|
+
const withSkeleton = (Component)=>(0, _styledcomponents.default)(Component).withConfig({
|
|
21
20
|
displayName: "withSkeleton",
|
|
22
21
|
componentId: "sc-764f817c-0"
|
|
23
22
|
})([
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
],
|
|
27
|
-
var skeleton = param.skeleton;
|
|
28
|
-
return skeleton && (0, _mixins.applySkeletonGradient)({
|
|
23
|
+
``,
|
|
24
|
+
``
|
|
25
|
+
], ({ skeleton })=>skeleton && (0, _mixins.applySkeletonGradient)({
|
|
29
26
|
lighter: true
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
};
|
|
27
|
+
}));
|
package/hooks/index.js
CHANGED
|
@@ -28,9 +28,9 @@ _export(exports, {
|
|
|
28
28
|
return _useUniqId.useUniqId;
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
31
|
+
const _useDebouncedFunction = require("./useDebouncedFunction");
|
|
32
|
+
const _useForkRef = require("./useForkRef");
|
|
33
|
+
const _useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect");
|
|
34
|
+
const _useUniqId = require("./useUniqId");
|
|
35
|
+
const _useResizeObserver = require("./useResizeObserver");
|
|
36
|
+
const _useFocusTrap = require("./useFocusTrap");
|
|
@@ -8,39 +8,14 @@ Object.defineProperty(exports, "useDebouncedFunction", {
|
|
|
8
8
|
return useDebouncedFunction;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
|
|
12
|
-
function _array_like_to_array(arr, len) {
|
|
13
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
14
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
15
|
-
return arr2;
|
|
16
|
-
}
|
|
17
|
-
function _array_without_holes(arr) {
|
|
18
|
-
if (Array.isArray(arr)) return _array_like_to_array(arr);
|
|
19
|
-
}
|
|
11
|
+
const _react = /*#__PURE__*/ _interop_require_default(require("react"));
|
|
20
12
|
function _interop_require_default(obj) {
|
|
21
13
|
return obj && obj.__esModule ? obj : {
|
|
22
14
|
default: obj
|
|
23
15
|
};
|
|
24
16
|
}
|
|
25
|
-
function _iterable_to_array(iter) {
|
|
26
|
-
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
27
|
-
}
|
|
28
|
-
function _non_iterable_spread() {
|
|
29
|
-
throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
30
|
-
}
|
|
31
|
-
function _to_consumable_array(arr) {
|
|
32
|
-
return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
|
|
33
|
-
}
|
|
34
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
35
|
-
if (!o) return;
|
|
36
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
37
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
38
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
39
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
40
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
41
|
-
}
|
|
42
17
|
function useDebouncedFunction(func, delay, cleanUp) {
|
|
43
|
-
|
|
18
|
+
const timeoutRef = _react.default.useRef();
|
|
44
19
|
/**
|
|
45
20
|
* Очистка таймера
|
|
46
21
|
*/ function clearTimer() {
|
|
@@ -52,18 +27,11 @@ function useDebouncedFunction(func, delay, cleanUp) {
|
|
|
52
27
|
/**
|
|
53
28
|
* Очищаем таймер при анмаунте компонента, если cleanUp выставлен в true
|
|
54
29
|
* и тем самым отменяем последний запланированный вызов
|
|
55
|
-
*/ _react.default.useEffect(
|
|
56
|
-
return cleanUp ? clearTimer : undefined;
|
|
57
|
-
}, [
|
|
30
|
+
*/ _react.default.useEffect(()=>cleanUp ? clearTimer : undefined, [
|
|
58
31
|
cleanUp
|
|
59
32
|
]);
|
|
60
|
-
return
|
|
61
|
-
for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
|
|
62
|
-
args[_key] = arguments[_key];
|
|
63
|
-
}
|
|
33
|
+
return (...args)=>{
|
|
64
34
|
clearTimer();
|
|
65
|
-
timeoutRef.current = setTimeout(
|
|
66
|
-
return func.apply(void 0, _to_consumable_array(args));
|
|
67
|
-
}, delay);
|
|
35
|
+
timeoutRef.current = setTimeout(()=>func(...args), delay);
|
|
68
36
|
};
|
|
69
37
|
}
|