@pingux/astro 2.96.0-alpha.0 → 2.96.0-alpha.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.
- package/lib/cjs/components/PasswordField/PasswordField.d.ts +4 -0
- package/lib/cjs/components/PasswordField/PasswordField.js +17 -97
- package/lib/cjs/components/PasswordField/PasswordField.stories.d.ts +17 -0
- package/lib/cjs/components/PasswordField/PasswordField.stories.js +12 -0
- package/lib/cjs/components/PasswordField/PasswordField.test.d.ts +1 -0
- package/lib/cjs/components/PasswordField/PasswordField.test.js +88 -43
- package/lib/cjs/components/PasswordField/index.d.ts +1 -0
- package/lib/cjs/types/index.d.ts +1 -0
- package/lib/cjs/types/index.js +29 -18
- package/lib/cjs/types/passwordField.d.ts +69 -0
- package/lib/cjs/types/passwordField.js +6 -0
- package/lib/cjs/types/requirementsList.d.ts +2 -1
- package/lib/components/PasswordField/PasswordField.js +20 -100
- package/lib/components/PasswordField/PasswordField.stories.js +12 -0
- package/lib/components/PasswordField/PasswordField.test.js +66 -21
- package/lib/types/index.js +1 -0
- package/lib/types/passwordField.js +1 -0
- package/package.json +1 -1
package/lib/cjs/types/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55;
|
3
|
+
var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56;
|
4
4
|
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
5
5
|
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
6
6
|
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
@@ -425,8 +425,19 @@ _forEachInstanceProperty(_context38 = _Object$keys(_overlayPanel)).call(_context
|
|
425
425
|
}
|
426
426
|
});
|
427
427
|
});
|
428
|
+
var _passwordField = require("./passwordField");
|
429
|
+
_forEachInstanceProperty(_context39 = _Object$keys(_passwordField)).call(_context39, function (key) {
|
430
|
+
if (key === "default" || key === "__esModule") return;
|
431
|
+
if (key in exports && exports[key] === _passwordField[key]) return;
|
432
|
+
_Object$defineProperty(exports, key, {
|
433
|
+
enumerable: true,
|
434
|
+
get: function get() {
|
435
|
+
return _passwordField[key];
|
436
|
+
}
|
437
|
+
});
|
438
|
+
});
|
428
439
|
var _popoverContainer = require("./popoverContainer");
|
429
|
-
_forEachInstanceProperty(
|
440
|
+
_forEachInstanceProperty(_context40 = _Object$keys(_popoverContainer)).call(_context40, function (key) {
|
430
441
|
if (key === "default" || key === "__esModule") return;
|
431
442
|
if (key in exports && exports[key] === _popoverContainer[key]) return;
|
432
443
|
_Object$defineProperty(exports, key, {
|
@@ -437,7 +448,7 @@ _forEachInstanceProperty(_context39 = _Object$keys(_popoverContainer)).call(_con
|
|
437
448
|
});
|
438
449
|
});
|
439
450
|
var _popoverMenu = require("./popoverMenu");
|
440
|
-
_forEachInstanceProperty(
|
451
|
+
_forEachInstanceProperty(_context41 = _Object$keys(_popoverMenu)).call(_context41, function (key) {
|
441
452
|
if (key === "default" || key === "__esModule") return;
|
442
453
|
if (key in exports && exports[key] === _popoverMenu[key]) return;
|
443
454
|
_Object$defineProperty(exports, key, {
|
@@ -448,7 +459,7 @@ _forEachInstanceProperty(_context40 = _Object$keys(_popoverMenu)).call(_context4
|
|
448
459
|
});
|
449
460
|
});
|
450
461
|
var _progressBar = require("./progressBar");
|
451
|
-
_forEachInstanceProperty(
|
462
|
+
_forEachInstanceProperty(_context42 = _Object$keys(_progressBar)).call(_context42, function (key) {
|
452
463
|
if (key === "default" || key === "__esModule") return;
|
453
464
|
if (key in exports && exports[key] === _progressBar[key]) return;
|
454
465
|
_Object$defineProperty(exports, key, {
|
@@ -459,7 +470,7 @@ _forEachInstanceProperty(_context41 = _Object$keys(_progressBar)).call(_context4
|
|
459
470
|
});
|
460
471
|
});
|
461
472
|
var _requirementsList = require("./requirementsList");
|
462
|
-
_forEachInstanceProperty(
|
473
|
+
_forEachInstanceProperty(_context43 = _Object$keys(_requirementsList)).call(_context43, function (key) {
|
463
474
|
if (key === "default" || key === "__esModule") return;
|
464
475
|
if (key in exports && exports[key] === _requirementsList[key]) return;
|
465
476
|
_Object$defineProperty(exports, key, {
|
@@ -470,7 +481,7 @@ _forEachInstanceProperty(_context42 = _Object$keys(_requirementsList)).call(_con
|
|
470
481
|
});
|
471
482
|
});
|
472
483
|
var _rockerButtonGroup = require("./rockerButtonGroup");
|
473
|
-
_forEachInstanceProperty(
|
484
|
+
_forEachInstanceProperty(_context44 = _Object$keys(_rockerButtonGroup)).call(_context44, function (key) {
|
474
485
|
if (key === "default" || key === "__esModule") return;
|
475
486
|
if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
|
476
487
|
_Object$defineProperty(exports, key, {
|
@@ -481,7 +492,7 @@ _forEachInstanceProperty(_context43 = _Object$keys(_rockerButtonGroup)).call(_co
|
|
481
492
|
});
|
482
493
|
});
|
483
494
|
var _scrollBox = require("./scrollBox");
|
484
|
-
_forEachInstanceProperty(
|
495
|
+
_forEachInstanceProperty(_context45 = _Object$keys(_scrollBox)).call(_context45, function (key) {
|
485
496
|
if (key === "default" || key === "__esModule") return;
|
486
497
|
if (key in exports && exports[key] === _scrollBox[key]) return;
|
487
498
|
_Object$defineProperty(exports, key, {
|
@@ -492,7 +503,7 @@ _forEachInstanceProperty(_context44 = _Object$keys(_scrollBox)).call(_context44,
|
|
492
503
|
});
|
493
504
|
});
|
494
505
|
var _searchField = require("./searchField");
|
495
|
-
_forEachInstanceProperty(
|
506
|
+
_forEachInstanceProperty(_context46 = _Object$keys(_searchField)).call(_context46, function (key) {
|
496
507
|
if (key === "default" || key === "__esModule") return;
|
497
508
|
if (key in exports && exports[key] === _searchField[key]) return;
|
498
509
|
_Object$defineProperty(exports, key, {
|
@@ -503,7 +514,7 @@ _forEachInstanceProperty(_context45 = _Object$keys(_searchField)).call(_context4
|
|
503
514
|
});
|
504
515
|
});
|
505
516
|
var _separator = require("./separator");
|
506
|
-
_forEachInstanceProperty(
|
517
|
+
_forEachInstanceProperty(_context47 = _Object$keys(_separator)).call(_context47, function (key) {
|
507
518
|
if (key === "default" || key === "__esModule") return;
|
508
519
|
if (key in exports && exports[key] === _separator[key]) return;
|
509
520
|
_Object$defineProperty(exports, key, {
|
@@ -514,7 +525,7 @@ _forEachInstanceProperty(_context46 = _Object$keys(_separator)).call(_context46,
|
|
514
525
|
});
|
515
526
|
});
|
516
527
|
var _shared = require("./shared");
|
517
|
-
_forEachInstanceProperty(
|
528
|
+
_forEachInstanceProperty(_context48 = _Object$keys(_shared)).call(_context48, function (key) {
|
518
529
|
if (key === "default" || key === "__esModule") return;
|
519
530
|
if (key in exports && exports[key] === _shared[key]) return;
|
520
531
|
_Object$defineProperty(exports, key, {
|
@@ -525,7 +536,7 @@ _forEachInstanceProperty(_context47 = _Object$keys(_shared)).call(_context47, fu
|
|
525
536
|
});
|
526
537
|
});
|
527
538
|
var _switchField = require("./switchField");
|
528
|
-
_forEachInstanceProperty(
|
539
|
+
_forEachInstanceProperty(_context49 = _Object$keys(_switchField)).call(_context49, function (key) {
|
529
540
|
if (key === "default" || key === "__esModule") return;
|
530
541
|
if (key in exports && exports[key] === _switchField[key]) return;
|
531
542
|
_Object$defineProperty(exports, key, {
|
@@ -536,7 +547,7 @@ _forEachInstanceProperty(_context48 = _Object$keys(_switchField)).call(_context4
|
|
536
547
|
});
|
537
548
|
});
|
538
549
|
var _tab = require("./tab");
|
539
|
-
_forEachInstanceProperty(
|
550
|
+
_forEachInstanceProperty(_context50 = _Object$keys(_tab)).call(_context50, function (key) {
|
540
551
|
if (key === "default" || key === "__esModule") return;
|
541
552
|
if (key in exports && exports[key] === _tab[key]) return;
|
542
553
|
_Object$defineProperty(exports, key, {
|
@@ -547,7 +558,7 @@ _forEachInstanceProperty(_context49 = _Object$keys(_tab)).call(_context49, funct
|
|
547
558
|
});
|
548
559
|
});
|
549
560
|
var _table = require("./table");
|
550
|
-
_forEachInstanceProperty(
|
561
|
+
_forEachInstanceProperty(_context51 = _Object$keys(_table)).call(_context51, function (key) {
|
551
562
|
if (key === "default" || key === "__esModule") return;
|
552
563
|
if (key in exports && exports[key] === _table[key]) return;
|
553
564
|
_Object$defineProperty(exports, key, {
|
@@ -558,7 +569,7 @@ _forEachInstanceProperty(_context50 = _Object$keys(_table)).call(_context50, fun
|
|
558
569
|
});
|
559
570
|
});
|
560
571
|
var _tabs = require("./tabs");
|
561
|
-
_forEachInstanceProperty(
|
572
|
+
_forEachInstanceProperty(_context52 = _Object$keys(_tabs)).call(_context52, function (key) {
|
562
573
|
if (key === "default" || key === "__esModule") return;
|
563
574
|
if (key in exports && exports[key] === _tabs[key]) return;
|
564
575
|
_Object$defineProperty(exports, key, {
|
@@ -569,7 +580,7 @@ _forEachInstanceProperty(_context51 = _Object$keys(_tabs)).call(_context51, func
|
|
569
580
|
});
|
570
581
|
});
|
571
582
|
var _text = require("./text");
|
572
|
-
_forEachInstanceProperty(
|
583
|
+
_forEachInstanceProperty(_context53 = _Object$keys(_text)).call(_context53, function (key) {
|
573
584
|
if (key === "default" || key === "__esModule") return;
|
574
585
|
if (key in exports && exports[key] === _text[key]) return;
|
575
586
|
_Object$defineProperty(exports, key, {
|
@@ -580,7 +591,7 @@ _forEachInstanceProperty(_context52 = _Object$keys(_text)).call(_context52, func
|
|
580
591
|
});
|
581
592
|
});
|
582
593
|
var _textField = require("./textField");
|
583
|
-
_forEachInstanceProperty(
|
594
|
+
_forEachInstanceProperty(_context54 = _Object$keys(_textField)).call(_context54, function (key) {
|
584
595
|
if (key === "default" || key === "__esModule") return;
|
585
596
|
if (key in exports && exports[key] === _textField[key]) return;
|
586
597
|
_Object$defineProperty(exports, key, {
|
@@ -591,7 +602,7 @@ _forEachInstanceProperty(_context53 = _Object$keys(_textField)).call(_context53,
|
|
591
602
|
});
|
592
603
|
});
|
593
604
|
var _timefield = require("./timefield");
|
594
|
-
_forEachInstanceProperty(
|
605
|
+
_forEachInstanceProperty(_context55 = _Object$keys(_timefield)).call(_context55, function (key) {
|
595
606
|
if (key === "default" || key === "__esModule") return;
|
596
607
|
if (key in exports && exports[key] === _timefield[key]) return;
|
597
608
|
_Object$defineProperty(exports, key, {
|
@@ -602,7 +613,7 @@ _forEachInstanceProperty(_context54 = _Object$keys(_timefield)).call(_context54,
|
|
602
613
|
});
|
603
614
|
});
|
604
615
|
var _tooltipTrigger = require("./tooltipTrigger");
|
605
|
-
_forEachInstanceProperty(
|
616
|
+
_forEachInstanceProperty(_context56 = _Object$keys(_tooltipTrigger)).call(_context56, function (key) {
|
606
617
|
if (key === "default" || key === "__esModule") return;
|
607
618
|
if (key in exports && exports[key] === _tooltipTrigger[key]) return;
|
608
619
|
_Object$defineProperty(exports, key, {
|
@@ -0,0 +1,69 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { UseFieldProps } from '../hooks/useField/useField';
|
3
|
+
import { TestingAttributes } from './shared/test';
|
4
|
+
import { Status } from './item';
|
5
|
+
import { Requirement, RequirementsListProps } from '.';
|
6
|
+
export interface PasswordFieldProps extends UseFieldProps<HTMLInputElement>, TestingAttributes {
|
7
|
+
/** The rendered label for the field. */
|
8
|
+
label?: string | React.ReactNode;
|
9
|
+
/** Whether or not the password is visible. */
|
10
|
+
isVisible?: boolean;
|
11
|
+
/** Function that is passed into the IconButton within this component. */
|
12
|
+
onVisibleChange?: (isVisible: boolean, args: unknown) => void;
|
13
|
+
/** The unique identifier for the input element. */
|
14
|
+
id?: string;
|
15
|
+
/** The name for the input element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
|
16
|
+
name?: string;
|
17
|
+
/**
|
18
|
+
* Callback fired when the value is changed on the input element.
|
19
|
+
*
|
20
|
+
* @param {object} event The event source of the callback.
|
21
|
+
* You can pull out the new value by accessing `event.target.value` (string).
|
22
|
+
*/
|
23
|
+
onChange?: (e: React.ChangeEvent) => void;
|
24
|
+
/** The value for the input element (controlled). */
|
25
|
+
value?: string;
|
26
|
+
/** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
|
27
|
+
autoComplete?: string;
|
28
|
+
/** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
|
29
|
+
autocomplete?: string;
|
30
|
+
/** The default value for the input element. */
|
31
|
+
defaultValue?: string;
|
32
|
+
/** Whether the input element is automatically focused when loaded onto the page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus). */
|
33
|
+
hasAutoFocus?: boolean;
|
34
|
+
/** Whether the field is disabled. */
|
35
|
+
isDisabled?: boolean;
|
36
|
+
/** Whether the input can be selected, but not changed by the user. */
|
37
|
+
isReadOnly?: boolean;
|
38
|
+
/** Whether the field is required. */
|
39
|
+
isRequired?: boolean;
|
40
|
+
/**
|
41
|
+
* Callback fired when focus is lost on the input element.
|
42
|
+
*/
|
43
|
+
onBlur?: () => void;
|
44
|
+
/**
|
45
|
+
* Callback fired when focus is lost on the input element.
|
46
|
+
*/
|
47
|
+
onFocus?: () => void;
|
48
|
+
/** The placeholder text to display in the input element. */
|
49
|
+
placeholder?: string;
|
50
|
+
/** Provides a way to insert markup in specified places. */
|
51
|
+
slots?: {
|
52
|
+
/** The given node will be inserted into the field container. */
|
53
|
+
inContainer: React.ReactNode;
|
54
|
+
};
|
55
|
+
/** Determines the type of input to use. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
|
56
|
+
type?: string;
|
57
|
+
/** @ignore Prop that allows testing of the icon button. */
|
58
|
+
viewHiddenIconTestId?: string;
|
59
|
+
/** @ignore Prop that allows testing of the icon button. */
|
60
|
+
viewIconTestId?: string;
|
61
|
+
/** Array of Requirements and their status. */
|
62
|
+
requirements?: Requirement[];
|
63
|
+
/** Props object that is spread to the requirements list. */
|
64
|
+
requirementsListProps?: RequirementsListProps;
|
65
|
+
status?: Status;
|
66
|
+
}
|
67
|
+
export interface RequirementMessageProps {
|
68
|
+
requirement: Requirement;
|
69
|
+
}
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { TestingAttributes } from './shared/test';
|
1
2
|
import { BoxProps } from './box';
|
2
3
|
import { Status } from './item';
|
3
4
|
export interface Requirement {
|
@@ -5,7 +6,7 @@ export interface Requirement {
|
|
5
6
|
status?: Status;
|
6
7
|
}
|
7
8
|
export type Requirements = Array<Requirement>;
|
8
|
-
export interface RequirementsListProps extends BoxProps {
|
9
|
+
export interface RequirementsListProps extends BoxProps, TestingAttributes {
|
9
10
|
/** Requirements and their status. */
|
10
11
|
requirements?: Requirements;
|
11
12
|
label?: string;
|
@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
|
|
4
4
|
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
5
5
|
var _excluded = ["helperText", "isVisible", "onVisibleChange", "requirements", "requirementsListProps", "slots", "status", "viewHiddenIconTestId", "viewIconTestId"];
|
6
6
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
7
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
7
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
8
8
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
9
9
|
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
10
10
|
import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
|
@@ -17,45 +17,37 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
|
|
17
17
|
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
18
18
|
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
19
19
|
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
20
|
-
import React, { forwardRef, useCallback,
|
20
|
+
import React, { forwardRef, useCallback, useRef, useState } from 'react';
|
21
21
|
import { useOverlayPosition } from 'react-aria';
|
22
22
|
import EyeOffIcon from '@pingux/mdi-react/EyeOffOutlineIcon';
|
23
23
|
import EyeIcon from '@pingux/mdi-react/EyeOutlineIcon';
|
24
24
|
import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
|
25
25
|
import { VisuallyHidden } from '@react-aria/visually-hidden';
|
26
|
-
import PropTypes from 'prop-types';
|
27
26
|
import { Box, FieldHelperText, Icon, IconButton, Input, Label, PopoverContainer, RequirementsList } from '../..';
|
28
|
-
import { useDebounce, useField, useProgressiveState, usePropWarning, useStatusClasses } from '../../hooks';
|
27
|
+
import { useDebounce, useField, useLocalOrForwardRef, useProgressiveState, usePropWarning, useStatusClasses } from '../../hooks';
|
29
28
|
import { getPendoID } from '../../utils/devUtils/constants/pendoID';
|
30
29
|
import statuses from '../../utils/devUtils/constants/statuses';
|
31
|
-
import {
|
32
|
-
import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
|
33
|
-
import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
|
30
|
+
import { statusDefaultProp } from '../../utils/docUtils/statusProp';
|
34
31
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
35
32
|
var displayName = 'PasswordField';
|
36
33
|
var ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE = {
|
37
34
|
HIDE: 'hide password',
|
38
35
|
SHOW: 'show password'
|
39
36
|
};
|
40
|
-
var RequirementMessage = function RequirementMessage(
|
37
|
+
var RequirementMessage = function RequirementMessage(props) {
|
41
38
|
var _context;
|
42
|
-
var requirement =
|
39
|
+
var requirement = props.requirement;
|
43
40
|
return ___EmotionJSX(React.Fragment, null, useDebounce({
|
44
|
-
value: _concatInstanceProperty(_context = "".concat(requirement.name, " ")).call(_context, requirement.status === statuses.SUCCESS ?
|
41
|
+
value: _concatInstanceProperty(_context = "".concat(requirement.name, " ")).call(_context, requirement.status === statuses.SUCCESS ? statuses.SUCCESS : 'not met'),
|
45
42
|
delay: 100
|
46
43
|
}));
|
47
44
|
};
|
48
|
-
RequirementMessage.propTypes = {
|
49
|
-
requirement: PropTypes.shape({
|
50
|
-
name: PropTypes.string,
|
51
|
-
status: PropTypes.string
|
52
|
-
})
|
53
|
-
};
|
54
45
|
var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
|
55
46
|
var helperText = props.helperText,
|
56
47
|
isVisibleProp = props.isVisible,
|
57
48
|
onVisibleChangeProp = props.onVisibleChange,
|
58
|
-
requirements = props.requirements,
|
49
|
+
_props$requirements = props.requirements,
|
50
|
+
requirements = _props$requirements === void 0 ? [] : _props$requirements,
|
59
51
|
requirementsListProps = props.requirementsListProps,
|
60
52
|
slots = props.slots,
|
61
53
|
status = props.status,
|
@@ -67,9 +59,9 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
67
59
|
isTyping = _useState2[0],
|
68
60
|
setIsTyping = _useState2[1];
|
69
61
|
var checkRequirements = function checkRequirements() {
|
70
|
-
return
|
62
|
+
return _filterInstanceProperty(requirements).call(requirements, function (req) {
|
71
63
|
return req.status === 'default';
|
72
|
-
}).length
|
64
|
+
}).length === 0;
|
73
65
|
};
|
74
66
|
var _useField = useField(_objectSpread({
|
75
67
|
status: status
|
@@ -80,20 +72,16 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
80
72
|
fieldLabelProps = _useField.fieldLabelProps;
|
81
73
|
var isFocused = fieldControlInputProps.isFocused,
|
82
74
|
onChange = fieldControlInputProps.onChange;
|
83
|
-
var inputRef =
|
84
|
-
var popoverRef = useRef();
|
75
|
+
var inputRef = useLocalOrForwardRef(ref);
|
76
|
+
var popoverRef = useRef(null);
|
85
77
|
usePropWarning(props, 'disabled', 'isDisabled');
|
86
|
-
/* istanbul ignore next */
|
87
|
-
useImperativeHandle(ref, function () {
|
88
|
-
return inputRef.current;
|
89
|
-
});
|
90
78
|
var _useProgressiveState = useProgressiveState(isVisibleProp, isVisibleProp),
|
91
79
|
_useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
|
92
80
|
isVisible = _useProgressiveState2[0],
|
93
81
|
setIsShown = _useProgressiveState2[1];
|
94
82
|
|
95
83
|
// Measure the width of the input to inform the width of the menu (below).
|
96
|
-
var _useState3 = useState(
|
84
|
+
var _useState3 = useState(0),
|
97
85
|
_useState4 = _slicedToArray(_useState3, 2),
|
98
86
|
menuWidth = _useState4[0],
|
99
87
|
setMenuWidth = _useState4[1];
|
@@ -138,12 +126,12 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
138
126
|
var toggleShowPasswordAriaLabel = isVisible ? ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE.HIDE : ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE.SHOW;
|
139
127
|
var handleToggleShowPassword = function handleToggleShowPassword() {
|
140
128
|
setIsShown(!isVisible);
|
129
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
130
|
+
args[_key] = arguments[_key];
|
131
|
+
}
|
132
|
+
var params = _objectSpread({}, args);
|
141
133
|
if (onVisibleChangeProp) {
|
142
|
-
|
143
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
144
|
-
args[_key] = arguments[_key];
|
145
|
-
}
|
146
|
-
onVisibleChangeProp.apply(void 0, _concatInstanceProperty(_context2 = [!isVisible]).call(_context2, args));
|
134
|
+
onVisibleChangeProp(!isVisible, params);
|
147
135
|
}
|
148
136
|
};
|
149
137
|
var handleInputChange = function handleInputChange(e) {
|
@@ -153,7 +141,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
153
141
|
setIsTyping(true);
|
154
142
|
_setTimeout(function () {
|
155
143
|
setIsTyping(false);
|
156
|
-
},
|
144
|
+
}, 300);
|
157
145
|
};
|
158
146
|
return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
|
159
147
|
variant: "forms.input.fieldContainer"
|
@@ -210,74 +198,6 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
210
198
|
}));
|
211
199
|
}))));
|
212
200
|
});
|
213
|
-
PasswordField.propTypes = _objectSpread(_objectSpread(_objectSpread({
|
214
|
-
/** The rendered label for the field. */
|
215
|
-
label: PropTypes.node,
|
216
|
-
/** Whether or not the password is visible. */
|
217
|
-
isVisible: PropTypes.bool,
|
218
|
-
/** Function that is passed into the IconButton within this component. */
|
219
|
-
onVisibleChange: PropTypes.func,
|
220
|
-
/** Text rendered below the input. */
|
221
|
-
helperText: PropTypes.node,
|
222
|
-
/** The unique identifier for the input element. */
|
223
|
-
id: PropTypes.string,
|
224
|
-
/** The name for the input element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
|
225
|
-
name: PropTypes.string,
|
226
|
-
/**
|
227
|
-
* Callback fired when the value is changed on the input element.
|
228
|
-
*
|
229
|
-
* @param {object} event The event source of the callback.
|
230
|
-
* You can pull out the new value by accessing `event.target.value` (string).
|
231
|
-
*/
|
232
|
-
onChange: PropTypes.func,
|
233
|
-
/** The value for the input element (controlled). */
|
234
|
-
value: PropTypes.string,
|
235
|
-
/** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
|
236
|
-
autoComplete: PropTypes.string,
|
237
|
-
/** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
|
238
|
-
autocomplete: PropTypes.string,
|
239
|
-
/** A list of class names to apply to the input element. */
|
240
|
-
className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
241
|
-
/** The default value for the input element. */
|
242
|
-
defaultValue: PropTypes.string,
|
243
|
-
/** Whether the input element is automatically focused when loaded onto the page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus). */
|
244
|
-
hasAutoFocus: PropTypes.bool,
|
245
|
-
/** Whether the field is disabled. */
|
246
|
-
isDisabled: PropTypes.bool,
|
247
|
-
/** Whether the input can be selected, but not changed by the user. */
|
248
|
-
isReadOnly: PropTypes.bool,
|
249
|
-
/** Whether the field is required. */
|
250
|
-
isRequired: PropTypes.bool,
|
251
|
-
/** Add max Length to input value */
|
252
|
-
maxLength: PropTypes.number,
|
253
|
-
/**
|
254
|
-
* Callback fired when focus is lost on the input element.
|
255
|
-
*/
|
256
|
-
onBlur: PropTypes.func,
|
257
|
-
/**
|
258
|
-
* Callback fired when focus is lost on the input element.
|
259
|
-
*/
|
260
|
-
onFocus: PropTypes.func,
|
261
|
-
/** The placeholder text to display in the input element. */
|
262
|
-
placeholder: PropTypes.string,
|
263
|
-
/** Provides a way to insert markup in specified places. */
|
264
|
-
slots: PropTypes.shape({
|
265
|
-
/** The given node will be inserted into the field container. */
|
266
|
-
inContainer: PropTypes.node
|
267
|
-
}),
|
268
|
-
/** Determines the type of input to use. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
|
269
|
-
type: PropTypes.string,
|
270
|
-
/** @ignore Prop that allows testing of the icon button. */
|
271
|
-
viewHiddenIconTestId: PropTypes.string,
|
272
|
-
/** @ignore Prop that allows testing of the icon button. */
|
273
|
-
viewIconTestId: PropTypes.string,
|
274
|
-
/** Array of Requirements and their status. */
|
275
|
-
requirements: PropTypes.arrayOf(PropTypes.shape(_objectSpread({
|
276
|
-
name: PropTypes.string.isRequired
|
277
|
-
}, statusPropTypes))),
|
278
|
-
/** Props object that is spread to the requirements list. */
|
279
|
-
requirementsListProps: PropTypes.shape({})
|
280
|
-
}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
|
281
201
|
PasswordField.defaultProps = _objectSpread({
|
282
202
|
hasAutoFocus: false,
|
283
203
|
isDisabled: false,
|
@@ -189,6 +189,18 @@ export var FloatLabel = function FloatLabel() {
|
|
189
189
|
labelMode: "float"
|
190
190
|
});
|
191
191
|
};
|
192
|
+
|
193
|
+
// Added to bypass color contrast issue
|
194
|
+
FloatLabel.parameters = {
|
195
|
+
a11y: {
|
196
|
+
config: {
|
197
|
+
rules: [{
|
198
|
+
id: 'color-contrast',
|
199
|
+
enabled: false
|
200
|
+
}]
|
201
|
+
}
|
202
|
+
}
|
203
|
+
};
|
192
204
|
export var LeftLabel = function LeftLabel() {
|
193
205
|
var _useState15 = useState(false),
|
194
206
|
_useState16 = _slicedToArray(_useState15, 2),
|