@alfalab/core-components-pattern-lock 1.1.3 → 1.2.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.
Files changed (16) hide show
  1. package/Component.js +4 -4
  2. package/consts.d.ts +3 -1
  3. package/consts.js +2 -0
  4. package/cssm/Component.js +3 -3
  5. package/cssm/consts.d.ts +3 -1
  6. package/cssm/consts.js +2 -0
  7. package/esm/Component.js +5 -5
  8. package/esm/consts.d.ts +3 -1
  9. package/esm/consts.js +2 -1
  10. package/esm/index.css +10 -10
  11. package/index.css +10 -10
  12. package/modern/Component.js +4 -4
  13. package/modern/consts.d.ts +3 -1
  14. package/modern/consts.js +2 -1
  15. package/modern/index.css +10 -10
  16. package/package.json +3 -4
package/Component.js CHANGED
@@ -21,13 +21,13 @@ var getDataTestId = function (dataTestId, element) {
21
21
  return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
22
22
  };
23
23
 
24
- var styles = {"component":"pattern-lock__component_1zsxx","hidden":"pattern-lock__hidden_1zsxx","error":"pattern-lock__error_1zsxx","forgotBtn":"pattern-lock__forgotBtn_1zsxx"};
24
+ var styles = {"component":"pattern-lock__component_97su1","hidden":"pattern-lock__hidden_97su1","error":"pattern-lock__error_97su1","forgotBtn":"pattern-lock__forgotBtn_97su1"};
25
25
  require('./index.css')
26
26
 
27
27
  var PatternLock = React.forwardRef(function (_a, ref) {
28
28
  var _b;
29
- var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _f = _a.forgotCodeBtnText, forgotCodeBtnText = _f === void 0 ? 'Забыли код?' : _f, _g = _a.showForgotCodeBtn, showForgotCodeBtn = _g === void 0 ? false : _g, onForgotBtnClick = _a.onForgotBtnClick, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick"]);
30
- var _h = React.useState(), params = _h[0], setParams = _h[1];
29
+ var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _f = _a.forgotCodeBtnText, forgotCodeBtnText = _f === void 0 ? 'Забыли код?' : _f, _g = _a.showForgotCodeBtn, showForgotCodeBtn = _g === void 0 ? false : _g, onForgotBtnClick = _a.onForgotBtnClick, _h = _a.extraBounds, extraBounds = _h === void 0 ? consts.DEFAULT_EXTRA_BOUNDS : _h, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds"]);
30
+ var _j = React.useState(), params = _j[0], setParams = _j[1];
31
31
  React.useEffect(function () {
32
32
  var _a = utils.getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
33
33
  setParams({
@@ -62,7 +62,7 @@ var PatternLock = React.forwardRef(function (_a, ref) {
62
62
  React__default.default.createElement(coreComponentsGap.Gap, { size: 'xs' }),
63
63
  React__default.default.createElement("div", { className: styles.error }, error),
64
64
  React__default.default.createElement(coreComponentsGap.Gap, { size: '3xl' }),
65
- React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes })),
65
+ React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds })),
66
66
  showForgotCodeBtn ? (React__default.default.createElement(coreComponentsButton.Button, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: styles.forgotBtn }))));
67
67
  });
68
68
 
package/consts.d.ts CHANGED
@@ -1,9 +1,11 @@
1
+ import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
1
2
  import { ObservableTokens } from "./typings";
2
3
  declare const OBSERVE_OPTIONS: MutationObserverInit;
4
+ declare const DEFAULT_EXTRA_BOUNDS: ReactPatternLockProps['extraBounds'];
3
5
  declare const OBSERVABLE_TOKENS: ObservableTokens;
4
6
  declare const THEME_STATE: {
5
7
  INITIAL: string;
6
8
  SUCCESS: string;
7
9
  FAILURE: string;
8
10
  };
9
- export { OBSERVE_OPTIONS, OBSERVABLE_TOKENS, THEME_STATE };
11
+ export { OBSERVE_OPTIONS, DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, THEME_STATE };
package/consts.js CHANGED
@@ -8,6 +8,7 @@ var OBSERVE_OPTIONS = {
8
8
  characterData: false,
9
9
  subtree: true,
10
10
  };
11
+ var DEFAULT_EXTRA_BOUNDS = [75, 50, 75, 50];
11
12
  var OBSERVABLE_TOKENS = {
12
13
  ACCENT_INITIAL: '--color-light-graphic-primary',
13
14
  ACCENT_SUCCESS: '--color-light-graphic-positive',
@@ -25,6 +26,7 @@ var THEME_STATE = {
25
26
  FAILURE: 'failure',
26
27
  };
27
28
 
29
+ exports.DEFAULT_EXTRA_BOUNDS = DEFAULT_EXTRA_BOUNDS;
28
30
  exports.OBSERVABLE_TOKENS = OBSERVABLE_TOKENS;
29
31
  exports.OBSERVE_OPTIONS = OBSERVE_OPTIONS;
30
32
  exports.THEME_STATE = THEME_STATE;
package/cssm/Component.js CHANGED
@@ -25,8 +25,8 @@ var getDataTestId = function (dataTestId, element) {
25
25
 
26
26
  var PatternLock = React.forwardRef(function (_a, ref) {
27
27
  var _b;
28
- var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _f = _a.forgotCodeBtnText, forgotCodeBtnText = _f === void 0 ? 'Забыли код?' : _f, _g = _a.showForgotCodeBtn, showForgotCodeBtn = _g === void 0 ? false : _g, onForgotBtnClick = _a.onForgotBtnClick, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick"]);
29
- var _h = React.useState(), params = _h[0], setParams = _h[1];
28
+ var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _f = _a.forgotCodeBtnText, forgotCodeBtnText = _f === void 0 ? 'Забыли код?' : _f, _g = _a.showForgotCodeBtn, showForgotCodeBtn = _g === void 0 ? false : _g, onForgotBtnClick = _a.onForgotBtnClick, _h = _a.extraBounds, extraBounds = _h === void 0 ? consts.DEFAULT_EXTRA_BOUNDS : _h, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds"]);
29
+ var _j = React.useState(), params = _j[0], setParams = _j[1];
30
30
  React.useEffect(function () {
31
31
  var _a = utils.getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
32
32
  setParams({
@@ -61,7 +61,7 @@ var PatternLock = React.forwardRef(function (_a, ref) {
61
61
  React__default.default.createElement(coreComponentsGap.Gap, { size: 'xs' }),
62
62
  React__default.default.createElement("div", { className: styles__default.default.error }, error),
63
63
  React__default.default.createElement(coreComponentsGap.Gap, { size: '3xl' }),
64
- React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes })),
64
+ React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds })),
65
65
  showForgotCodeBtn ? (React__default.default.createElement(coreComponentsButton.Button, { view: 'link', className: styles__default.default.forgotBtn, onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: styles__default.default.forgotBtn }))));
66
66
  });
67
67
 
package/cssm/consts.d.ts CHANGED
@@ -1,9 +1,11 @@
1
+ import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
1
2
  import { ObservableTokens } from "./typings";
2
3
  declare const OBSERVE_OPTIONS: MutationObserverInit;
4
+ declare const DEFAULT_EXTRA_BOUNDS: ReactPatternLockProps['extraBounds'];
3
5
  declare const OBSERVABLE_TOKENS: ObservableTokens;
4
6
  declare const THEME_STATE: {
5
7
  INITIAL: string;
6
8
  SUCCESS: string;
7
9
  FAILURE: string;
8
10
  };
9
- export { OBSERVE_OPTIONS, OBSERVABLE_TOKENS, THEME_STATE };
11
+ export { OBSERVE_OPTIONS, DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, THEME_STATE };
package/cssm/consts.js CHANGED
@@ -8,6 +8,7 @@ var OBSERVE_OPTIONS = {
8
8
  characterData: false,
9
9
  subtree: true,
10
10
  };
11
+ var DEFAULT_EXTRA_BOUNDS = [75, 50, 75, 50];
11
12
  var OBSERVABLE_TOKENS = {
12
13
  ACCENT_INITIAL: '--color-light-graphic-primary',
13
14
  ACCENT_SUCCESS: '--color-light-graphic-positive',
@@ -25,6 +26,7 @@ var THEME_STATE = {
25
26
  FAILURE: 'failure',
26
27
  };
27
28
 
29
+ exports.DEFAULT_EXTRA_BOUNDS = DEFAULT_EXTRA_BOUNDS;
28
30
  exports.OBSERVABLE_TOKENS = OBSERVABLE_TOKENS;
29
31
  exports.OBSERVE_OPTIONS = OBSERVE_OPTIONS;
30
32
  exports.THEME_STATE = THEME_STATE;
package/esm/Component.js CHANGED
@@ -4,7 +4,7 @@ import { ReactCanvasPatternLock } from 'react-canvas-pattern-lock';
4
4
  import cn from 'classnames';
5
5
  import { Button } from '@alfalab/core-components-button/esm';
6
6
  import { Gap } from '@alfalab/core-components-gap/esm';
7
- import { THEME_STATE, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from './consts.js';
7
+ import { THEME_STATE, DEFAULT_EXTRA_BOUNDS, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from './consts.js';
8
8
  import { getSizes, getTheme, getColorByToken, getDefaultObserveTarget } from './utils.js';
9
9
 
10
10
  var getDataTestId = function (dataTestId, element) {
@@ -12,13 +12,13 @@ var getDataTestId = function (dataTestId, element) {
12
12
  return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
13
13
  };
14
14
 
15
- var styles = {"component":"pattern-lock__component_1zsxx","hidden":"pattern-lock__hidden_1zsxx","error":"pattern-lock__error_1zsxx","forgotBtn":"pattern-lock__forgotBtn_1zsxx"};
15
+ var styles = {"component":"pattern-lock__component_97su1","hidden":"pattern-lock__hidden_97su1","error":"pattern-lock__error_97su1","forgotBtn":"pattern-lock__forgotBtn_97su1"};
16
16
  require('./index.css')
17
17
 
18
18
  var PatternLock = forwardRef(function (_a, ref) {
19
19
  var _b;
20
- var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _f = _a.forgotCodeBtnText, forgotCodeBtnText = _f === void 0 ? 'Забыли код?' : _f, _g = _a.showForgotCodeBtn, showForgotCodeBtn = _g === void 0 ? false : _g, onForgotBtnClick = _a.onForgotBtnClick, restProps = __rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick"]);
21
- var _h = useState(), params = _h[0], setParams = _h[1];
20
+ var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _f = _a.forgotCodeBtnText, forgotCodeBtnText = _f === void 0 ? 'Забыли код?' : _f, _g = _a.showForgotCodeBtn, showForgotCodeBtn = _g === void 0 ? false : _g, onForgotBtnClick = _a.onForgotBtnClick, _h = _a.extraBounds, extraBounds = _h === void 0 ? DEFAULT_EXTRA_BOUNDS : _h, restProps = __rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds"]);
21
+ var _j = useState(), params = _j[0], setParams = _j[1];
22
22
  useEffect(function () {
23
23
  var _a = getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
24
24
  setParams({
@@ -53,7 +53,7 @@ var PatternLock = forwardRef(function (_a, ref) {
53
53
  React.createElement(Gap, { size: 'xs' }),
54
54
  React.createElement("div", { className: styles.error }, error),
55
55
  React.createElement(Gap, { size: '3xl' }),
56
- React.createElement(ReactCanvasPatternLock, __assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes })),
56
+ React.createElement(ReactCanvasPatternLock, __assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds })),
57
57
  showForgotCodeBtn ? (React.createElement(Button, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React.createElement("div", { className: styles.forgotBtn }))));
58
58
  });
59
59
 
package/esm/consts.d.ts CHANGED
@@ -1,9 +1,11 @@
1
+ import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
1
2
  import { ObservableTokens } from "./typings";
2
3
  declare const OBSERVE_OPTIONS: MutationObserverInit;
4
+ declare const DEFAULT_EXTRA_BOUNDS: ReactPatternLockProps['extraBounds'];
3
5
  declare const OBSERVABLE_TOKENS: ObservableTokens;
4
6
  declare const THEME_STATE: {
5
7
  INITIAL: string;
6
8
  SUCCESS: string;
7
9
  FAILURE: string;
8
10
  };
9
- export { OBSERVE_OPTIONS, OBSERVABLE_TOKENS, THEME_STATE };
11
+ export { OBSERVE_OPTIONS, DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, THEME_STATE };
package/esm/consts.js CHANGED
@@ -4,6 +4,7 @@ var OBSERVE_OPTIONS = {
4
4
  characterData: false,
5
5
  subtree: true,
6
6
  };
7
+ var DEFAULT_EXTRA_BOUNDS = [75, 50, 75, 50];
7
8
  var OBSERVABLE_TOKENS = {
8
9
  ACCENT_INITIAL: '--color-light-graphic-primary',
9
10
  ACCENT_SUCCESS: '--color-light-graphic-positive',
@@ -21,4 +22,4 @@ var THEME_STATE = {
21
22
  FAILURE: 'failure',
22
23
  };
23
24
 
24
- export { OBSERVABLE_TOKENS, OBSERVE_OPTIONS, THEME_STATE };
25
+ export { DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, OBSERVE_OPTIONS, THEME_STATE };
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 107pv */
1
+ /* hash: q4w1x */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-text-negative: #d91d0b; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -26,15 +26,15 @@
26
26
  --size-m-height: 56px;
27
27
  } :root {
28
28
  --pattern-lock-max-width: 500px;
29
- } .pattern-lock__component_1zsxx {
29
+ } .pattern-lock__component_97su1 {
30
30
  max-width: var(--pattern-lock-max-width);
31
31
  margin: var(--gap-xs) 0 var(--gap-xl) 0
32
- } .pattern-lock__component_1zsxx canvas {
32
+ } .pattern-lock__component_97su1 canvas {
33
33
  display: block;
34
34
  margin: 0 auto;
35
- } .pattern-lock__hidden_1zsxx {
35
+ } .pattern-lock__hidden_97su1 {
36
36
  visibility: hidden;
37
- } .pattern-lock__error_1zsxx {
37
+ } .pattern-lock__error_97su1 {
38
38
  font-size: 16px;
39
39
  line-height: 24px;
40
40
  font-weight: 400;
@@ -45,25 +45,25 @@
45
45
  padding: 0 var(--gap-m);
46
46
  min-height: 24px;
47
47
  color: var(--color-light-text-negative);
48
- } .pattern-lock__forgotBtn_1zsxx {
48
+ } .pattern-lock__forgotBtn_97su1 {
49
49
  display: block;
50
50
  min-height: var(--size-xs-height);
51
51
  margin: var(--gap-xl) auto 0;
52
52
  } @media screen and (min-width: 360px) {
53
- .pattern-lock__forgotBtn_1zsxx {
53
+ .pattern-lock__forgotBtn_97su1 {
54
54
  margin-top: var(--gap-2xl);
55
55
  min-height: var(--size-s-height);
56
56
  }
57
57
 
58
- .pattern-lock__component_1zsxx {
58
+ .pattern-lock__component_97su1 {
59
59
  margin-bottom: var(--gap-s);
60
60
  }
61
61
  } @media screen and (min-width: 390px) {
62
- .pattern-lock__forgotBtn_1zsxx {
62
+ .pattern-lock__forgotBtn_97su1 {
63
63
  min-height: var(--size-m-height);
64
64
  }
65
65
 
66
- .pattern-lock__component_1zsxx {
66
+ .pattern-lock__component_97su1 {
67
67
  margin-bottom: var(--gap-l);
68
68
  }
69
69
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 107pv */
1
+ /* hash: q4w1x */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-text-negative: #d91d0b; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -26,15 +26,15 @@
26
26
  --size-m-height: 56px;
27
27
  } :root {
28
28
  --pattern-lock-max-width: 500px;
29
- } .pattern-lock__component_1zsxx {
29
+ } .pattern-lock__component_97su1 {
30
30
  max-width: var(--pattern-lock-max-width);
31
31
  margin: var(--gap-xs) 0 var(--gap-xl) 0
32
- } .pattern-lock__component_1zsxx canvas {
32
+ } .pattern-lock__component_97su1 canvas {
33
33
  display: block;
34
34
  margin: 0 auto;
35
- } .pattern-lock__hidden_1zsxx {
35
+ } .pattern-lock__hidden_97su1 {
36
36
  visibility: hidden;
37
- } .pattern-lock__error_1zsxx {
37
+ } .pattern-lock__error_97su1 {
38
38
  font-size: 16px;
39
39
  line-height: 24px;
40
40
  font-weight: 400;
@@ -45,25 +45,25 @@
45
45
  padding: 0 var(--gap-m);
46
46
  min-height: 24px;
47
47
  color: var(--color-light-text-negative);
48
- } .pattern-lock__forgotBtn_1zsxx {
48
+ } .pattern-lock__forgotBtn_97su1 {
49
49
  display: block;
50
50
  min-height: var(--size-xs-height);
51
51
  margin: var(--gap-xl) auto 0;
52
52
  } @media screen and (min-width: 360px) {
53
- .pattern-lock__forgotBtn_1zsxx {
53
+ .pattern-lock__forgotBtn_97su1 {
54
54
  margin-top: var(--gap-2xl);
55
55
  min-height: var(--size-s-height);
56
56
  }
57
57
 
58
- .pattern-lock__component_1zsxx {
58
+ .pattern-lock__component_97su1 {
59
59
  margin-bottom: var(--gap-s);
60
60
  }
61
61
  } @media screen and (min-width: 390px) {
62
- .pattern-lock__forgotBtn_1zsxx {
62
+ .pattern-lock__forgotBtn_97su1 {
63
63
  min-height: var(--size-m-height);
64
64
  }
65
65
 
66
- .pattern-lock__component_1zsxx {
66
+ .pattern-lock__component_97su1 {
67
67
  margin-bottom: var(--gap-l);
68
68
  }
69
69
  }
package/modern/Component.js CHANGED
@@ -3,7 +3,7 @@ import { ReactCanvasPatternLock } from 'react-canvas-pattern-lock';
3
3
  import cn from 'classnames';
4
4
  import { Button } from '@alfalab/core-components-button/modern';
5
5
  import { Gap } from '@alfalab/core-components-gap/modern';
6
- import { THEME_STATE, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from './consts.js';
6
+ import { THEME_STATE, DEFAULT_EXTRA_BOUNDS, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from './consts.js';
7
7
  import { getSizes, getTheme, getColorByToken, getDefaultObserveTarget } from './utils.js';
8
8
 
9
9
  const getDataTestId = (dataTestId, element) => {
@@ -11,10 +11,10 @@ const getDataTestId = (dataTestId, element) => {
11
11
  return dataTestId ? `${dataTestId}${elementPart}` : undefined;
12
12
  };
13
13
 
14
- const styles = {"component":"pattern-lock__component_1zsxx","hidden":"pattern-lock__hidden_1zsxx","error":"pattern-lock__error_1zsxx","forgotBtn":"pattern-lock__forgotBtn_1zsxx"};
14
+ const styles = {"component":"pattern-lock__component_97su1","hidden":"pattern-lock__hidden_97su1","error":"pattern-lock__error_97su1","forgotBtn":"pattern-lock__forgotBtn_97su1"};
15
15
  require('./index.css')
16
16
 
17
- const PatternLock = forwardRef(({ observeTokens = false, observerParams = {}, justifyNodes = 'space-between', className, error, dataTestId, forgotCodeBtnText = 'Забыли код?', showForgotCodeBtn = false, onForgotBtnClick, ...restProps }, ref) => {
17
+ const PatternLock = forwardRef(({ observeTokens = false, observerParams = {}, justifyNodes = 'space-between', className, error, dataTestId, forgotCodeBtnText = 'Забыли код?', showForgotCodeBtn = false, onForgotBtnClick, extraBounds = DEFAULT_EXTRA_BOUNDS, ...restProps }, ref) => {
18
18
  const [params, setParams] = useState();
19
19
  useEffect(() => {
20
20
  const { elementSizes, width, height } = getSizes();
@@ -48,7 +48,7 @@ const PatternLock = forwardRef(({ observeTokens = false, observerParams = {}, ju
48
48
  React.createElement(Gap, { size: 'xs' }),
49
49
  React.createElement("div", { className: styles.error }, error),
50
50
  React.createElement(Gap, { size: '3xl' }),
51
- React.createElement(ReactCanvasPatternLock, { ...restProps, ...params, ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes }),
51
+ React.createElement(ReactCanvasPatternLock, { ...restProps, ...params, ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds }),
52
52
  showForgotCodeBtn ? (React.createElement(Button, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React.createElement("div", { className: styles.forgotBtn }))));
53
53
  });
54
54
 
package/modern/consts.d.ts CHANGED
@@ -1,9 +1,11 @@
1
+ import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
1
2
  import { ObservableTokens } from "./typings";
2
3
  declare const OBSERVE_OPTIONS: MutationObserverInit;
4
+ declare const DEFAULT_EXTRA_BOUNDS: ReactPatternLockProps['extraBounds'];
3
5
  declare const OBSERVABLE_TOKENS: ObservableTokens;
4
6
  declare const THEME_STATE: {
5
7
  INITIAL: string;
6
8
  SUCCESS: string;
7
9
  FAILURE: string;
8
10
  };
9
- export { OBSERVE_OPTIONS, OBSERVABLE_TOKENS, THEME_STATE };
11
+ export { OBSERVE_OPTIONS, DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, THEME_STATE };
package/modern/consts.js CHANGED
@@ -4,6 +4,7 @@ const OBSERVE_OPTIONS = {
4
4
  characterData: false,
5
5
  subtree: true,
6
6
  };
7
+ const DEFAULT_EXTRA_BOUNDS = [75, 50, 75, 50];
7
8
  const OBSERVABLE_TOKENS = {
8
9
  ACCENT_INITIAL: '--color-light-graphic-primary',
9
10
  ACCENT_SUCCESS: '--color-light-graphic-positive',
@@ -21,4 +22,4 @@ const THEME_STATE = {
21
22
  FAILURE: 'failure',
22
23
  };
23
24
 
24
- export { OBSERVABLE_TOKENS, OBSERVE_OPTIONS, THEME_STATE };
25
+ export { DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, OBSERVE_OPTIONS, THEME_STATE };
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 107pv */
1
+ /* hash: q4w1x */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-text-negative: #d91d0b; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -26,15 +26,15 @@
26
26
  --size-m-height: 56px;
27
27
  } :root {
28
28
  --pattern-lock-max-width: 500px;
29
- } .pattern-lock__component_1zsxx {
29
+ } .pattern-lock__component_97su1 {
30
30
  max-width: var(--pattern-lock-max-width);
31
31
  margin: var(--gap-xs) 0 var(--gap-xl) 0
32
- } .pattern-lock__component_1zsxx canvas {
32
+ } .pattern-lock__component_97su1 canvas {
33
33
  display: block;
34
34
  margin: 0 auto;
35
- } .pattern-lock__hidden_1zsxx {
35
+ } .pattern-lock__hidden_97su1 {
36
36
  visibility: hidden;
37
- } .pattern-lock__error_1zsxx {
37
+ } .pattern-lock__error_97su1 {
38
38
  font-size: 16px;
39
39
  line-height: 24px;
40
40
  font-weight: 400;
@@ -45,25 +45,25 @@
45
45
  padding: 0 var(--gap-m);
46
46
  min-height: 24px;
47
47
  color: var(--color-light-text-negative);
48
- } .pattern-lock__forgotBtn_1zsxx {
48
+ } .pattern-lock__forgotBtn_97su1 {
49
49
  display: block;
50
50
  min-height: var(--size-xs-height);
51
51
  margin: var(--gap-xl) auto 0;
52
52
  } @media screen and (min-width: 360px) {
53
- .pattern-lock__forgotBtn_1zsxx {
53
+ .pattern-lock__forgotBtn_97su1 {
54
54
  margin-top: var(--gap-2xl);
55
55
  min-height: var(--size-s-height);
56
56
  }
57
57
 
58
- .pattern-lock__component_1zsxx {
58
+ .pattern-lock__component_97su1 {
59
59
  margin-bottom: var(--gap-s);
60
60
  }
61
61
  } @media screen and (min-width: 390px) {
62
- .pattern-lock__forgotBtn_1zsxx {
62
+ .pattern-lock__forgotBtn_97su1 {
63
63
  min-height: var(--size-m-height);
64
64
  }
65
65
 
66
- .pattern-lock__component_1zsxx {
66
+ .pattern-lock__component_97su1 {
67
67
  margin-bottom: var(--gap-l);
68
68
  }
69
69
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-pattern-lock",
3
- "version": "1.1.3",
3
+ "version": "1.2.0",
4
4
  "description": "Pattern lock",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,10 +15,9 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-button": "^8.1.0",
18
+ "@alfalab/core-components-button": "^8.2.0",
19
19
  "@alfalab/core-components-gap": "^1.1.2",
20
- "react-canvas-pattern-lock": "^1.0.2",
21
- "react-merge-refs": "^1.1.0",
20
+ "react-canvas-pattern-lock": "^1.1.1",
22
21
  "classnames": "^2.3.1",
23
22
  "tslib": "^2.4.0"
24
23
  }