@decisiv/ui-components 2.0.1-alpha.20 → 2.0.1-alpha.200

package/lib/components/Notifications/constants.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NOTIFICATION_CARD_WIDTH = void 0;
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-next-line import/prefer-default-export
+var NOTIFICATION_CARD_WIDTH = (0, _rem.default)(_spacing.default.base * 34);
+exports.NOTIFICATION_CARD_WIDTH = NOTIFICATION_CARD_WIDTH;

package/lib/components/Notifications/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAA4C,CAAC;AAsDzD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAA4C,CAAC;AA0DzD,eAAe,MAAM,CAAC"}

package/lib/components/Notifications/schema.js

@@ -18,13 +18,14 @@ schema.propTypes = {
     onClick: _reactDesc.PropTypes.func.isRequired,
     text: _reactDesc.PropTypes.string.isRequired
   })).description('An array of objects containing a subset of props valid for the Button. Specifically excluded are `kind`, `size`, and `variant`.').isRequired,
+  duration: _reactDesc.PropTypes.number.description('An integer representing the amount of milliseconds to wait until dismissing the notification if no user interaction is captured. If omitted, notification will remain until manually closed.'),
   children: _reactDesc.PropTypes.func.description('The body of the notification containing additional UI elements').format('React Component'),
   closeHint: _reactDesc.PropTypes.string.description('The text to present in the tooltip when hovering over the close button.'),
   color: _reactDesc.PropTypes.oneOf(_commonUIColors.commonUIColorKeys).description('The icon/ border color. Will override the default color associated with any specified `intent`.').format('string'),
   icon: _reactDesc.PropTypes.element.description('The `iconix` icon to display. Will override the default icon associated with any specified `intent`.').format('Iconix Icon'),
   id: _reactDesc.PropTypes.string.description('A unique identifier for the notification.'),
   intent: _reactDesc.PropTypes.oneOf(['information', 'success', 'warning', 'danger']).description('Shortcuts to the most common combinations of icon and color.'),
-  onClose: _reactDesc.PropTypes.func.description('The event handler called to close the notification. WILL NOT be called if notification times out or is closed because an action button is clicked.'),
+  onClose: _reactDesc.PropTypes.func.description('The event handler called when the notification is manually closed. Will also be called with a blank event if "DISMISS ALL" is clicked. WILL NOT be called if notification times out or is closed because an action button is clicked. In IE, will be called with an empty object.'),
   title: _reactDesc.PropTypes.string.description('The text for rendering in the H2 at the top of the notification').isRequired
 };
 var _default = schema;

package/lib/components/Notifications/useNotifications.d.ts

@@ -1,6 +1,7 @@
 import { TNotificationsContext } from '../../providers/NotificationsProvider';
 export interface TUseNotifications {
     dismissAll: TNotificationsContext['dismissAll'];
+    isDismissingAll: TNotificationsContext['isDismissingAll'];
     notifications: TNotificationsContext['notifications'];
     notify: TNotificationsContext['notify'];
 }

package/lib/components/Notifications/useNotifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/useNotifications.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,qBAAqB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IAChD,aAAa,EAAE,qBAAqB,CAAC,eAAe,CAAC,CAAC;IACtD,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED,iBAAS,gBAAgB,IAAI,iBAAiB,CAI7C;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"useNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/useNotifications.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,qBAAqB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IAChD,eAAe,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,aAAa,EAAE,qBAAqB,CAAC,eAAe,CAAC,CAAC;IACtD,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED,iBAAS,gBAAgB,IAAI,iBAAiB,CAI7C;AAED,eAAe,gBAAgB,CAAC"}

package/lib/components/Notifications/useNotifications.test.js

@@ -19,11 +19,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 jest.useFakeTimers();
+
+var wrapper = function wrapper(_ref) {
+  var children = _ref.children;
+  return _react.default.createElement(_NotificationsProvider.default, null, _react.default.createElement(_react.default.Fragment, null, children));
+};
+
 var defaultRenderHookOptions = {
-  wrapper: function wrapper(_ref) {
-    var children = _ref.children;
-    return _react.default.createElement(_NotificationsProvider.default, null, _react.default.createElement(_react.default.Fragment, null, children));
-  }
+  wrapper: wrapper
 };
 var defaultNotificationOptions = {
   id: 'test-0',

package/lib/components/Pagination/Pagination.d.ts

@@ -12,7 +12,7 @@ interface DefaultPaginationProps {
 export interface PaginationProps extends DefaultPaginationProps {
     totalPages: number;
 }
-declare function Pagination(props: PaginationProps): JSX.Element;
+declare function Pagination(props: PaginationProps): JSX.Element | null;
 declare namespace Pagination {
     var propTypes: {
         variant: PropTypes.Requireable<string>;

package/lib/components/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAUnC,OAAO,EAAuB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,iBAAwB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CA6EtE;kBA7EuB,UAAU;;;;;;;;;;;;eAAV,UAAU"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAUnC,OAAO,EAAuB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,iBAAwB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA+E7E;kBA/EuB,UAAU;;;;;;;;;;;;eAAV,UAAU"}

package/lib/components/Pagination/Pagination.js

@@ -49,6 +49,7 @@ function Pagination(props) {
       currentPage = _useState2[0],
       setCurrentPage = _useState2[1];
 
+  if (totalPages <= 1) return null;
   var activePageIsControlled = typeof activePage !== 'undefined';
 
   if (activePageIsControlled && activePage !== currentPage) {

package/lib/components/Pagination/Pagination.test.js

@@ -245,4 +245,13 @@ describe('Pagination', function () {
       expect(onPageChange).toHaveBeenCalledWith(props.activePage + 1, props.activePage);
     });
   });
+  it("doesn't display when there is only 1 page", function () {
+    var _renderPagination17 = renderPagination(_objectSpread({}, defaultProps, {
+      totalPages: 1,
+      defaultActivePage: 1
+    })),
+        container = _renderPagination17.container;
+
+    expect(container).toBeEmpty();
+  });
 });

package/lib/components/Pagination/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/PasswordField/IconWrapper.d.ts

@@ -0,0 +1,198 @@
+/// <reference types="react" />
+declare const IconWrapper: import("styled-components").StyledComponent<"div", any, Partial<{
+    readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignItems?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignSelf?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flex?: string | number | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("react").ReactText, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexBasis?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexGrow?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexShrink?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexWrap?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexWrapProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyItems?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifySelf?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly order?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly size?: "XS" | "SM" | "MD" | "LG" | "XL" | undefined;
+}> & Partial<{
+    readonly margin: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginBottom: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginLeft: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginRight: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginTop: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginX: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginY: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly padding: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingBottom: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingLeft: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingRight: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingTop: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingX: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingY: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+}> & {
+    disabled?: boolean | undefined;
+}, never>;
+export default IconWrapper;
+//# sourceMappingURL=IconWrapper.d.ts.map

package/lib/components/PasswordField/IconWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/PasswordField/IconWrapper.tsx"],"names":[],"mappings":";AAUA,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqBhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/PasswordField/IconWrapper.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var IconWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "IconWrapper",
+  componentId: "z9032r-0"
+})(["margin-right:", ";cursor:pointer;width:", ";height:", ";flex-direction:column;justify-content:center;border-radius:", ";border:1px solid transparent;&,&:hover{color:", ";}&:focus{", ";border:1px solid ", ";outline:none;"], (0, _rem.default)(_spacing.default.base * 0.2), (0, _rem.default)(_spacing.default.base * 1.8), (0, _rem.default)(_spacing.default.base * 3), (0, _rem.default)(_spacing.default.base * 0.2), function (_ref) {
+  var disabled = _ref.disabled;
+  return (0, _toColorString.default)(disabled ? _color.default.opacity.charcoal40 : _color.default.interaction.pacificOcean);
+}, (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40), (0, _toColorString.default)(_color.default.interaction.pacificOcean));
+var _default = IconWrapper;
+exports.default = _default;

package/lib/components/PasswordField/Input.d.ts

@@ -0,0 +1,6 @@
+declare const Input: import("styled-components").StyledComponent<"input", any, {
+    passwordVisible?: boolean | undefined;
+    hideLabel?: boolean | undefined;
+}, never>;
+export default Input;
+//# sourceMappingURL=Input.d.ts.map

package/lib/components/PasswordField/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/PasswordField/Input.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,KAAK;;;SAmDV,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/PasswordField/Input.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+var _styleModifiers = require("../../utils/styleModifiers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+var Input = _styledComponents.default.input.withConfig({
+  displayName: "Input",
+  componentId: "sc-1kueen6-0"
+})(["font-family:", ";font-size:", ";font-weight:", ";overflow:visible;&::-moz-focus-inner{border:0;padding:0;margin:0;}background-color:inherit;border:transparent;display:block;line-height:140%;padding-right:", ";padding-left:", ";width:100%;", " ", " ", " &:active,&:focus{outline:none;}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default, (0, _rem.default)(_spacing.default.base), (0, _rem.default)(_spacing.default.base * 0.1), (0, _styleModifiers.whenNot)('passwordVisible', (0, _styledComponents.css)(["padding-bottom:", ";font-weight:", ";letter-spacing:", ";"], (0, _rem.default)(_spacing.default.base * 0.6), _designTokens.typography.weight.alias.extrabold, (0, _rem.default)(_spacing.default.base * 0.2))), (0, _styleModifiers.whenAll)([['hideLabel', true], ['passwordVisible', false]], (0, _styledComponents.css)(["margin-top:", ";padding-bottom:", ";margin-top:", ";"], (0, _rem.default)(_spacing.default.base * 0.2), (0, _rem.default)(_spacing.default.base * 0.4), (0, _rem.default)(_spacing.default.base * 0.4))), (0, _styleModifiers.whenAll)([['passwordVisible', true]], (0, _styledComponents.css)(["padding-bottom:", ";"], (0, _rem.default)(_spacing.default.base * 0.6))));
+
+var _default = Input;
+exports.default = _default;

package/lib/components/PasswordField/ShowPasswordButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ShowPasswordButtonInterface {
+    showPassword?: boolean;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
+}
+export default function ShowPasswordButton({ showPassword, onClick, disabled, }: ShowPasswordButtonInterface): JSX.Element;
+//# sourceMappingURL=ShowPasswordButton.d.ts.map

package/lib/components/PasswordField/ShowPasswordButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowPasswordButton.d.ts","sourceRoot":"","sources":["../../../src/components/PasswordField/ShowPasswordButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAS3C,MAAM,WAAW,2BAA2B;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,YAAY,EACZ,OAAO,EACP,QAAQ,GACT,EAAE,2BAA2B,GAAG,GAAG,CAAC,OAAO,CAqC3C"}

package/lib/components/PasswordField/ShowPasswordButton.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ShowPasswordButton;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _EyeAlt = _interopRequireDefault(require("@decisiv/iconix/lib/components/EyeAlt"));
+
+var _EyeSlash = _interopRequireDefault(require("@decisiv/iconix/lib/components/EyeSlash"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _IconWrapper = _interopRequireDefault(require("./IconWrapper"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function ShowPasswordButton(_ref) {
+  var showPassword = _ref.showPassword,
+      onClick = _ref.onClick,
+      disabled = _ref.disabled;
+  var translate = (0, _useTranslations.default)();
+  var EyeIcon = showPassword ? _EyeSlash.default : _EyeAlt.default;
+  var tooltipText = showPassword ? translate(undefined, 'passwordField.hidePassword') : translate(undefined, 'passwordField.showPassword');
+  var handleKeyPress = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Enter') onClick && onClick(event);
+  }, [onClick]);
+  return _react.default.createElement(_Tooltip.default, {
+    placement: "top",
+    target: // eslint-disable-next-line react/jsx-wrap-multilines
+    _react.default.createElement(_IconWrapper.default, {
+      tabIndex: 0,
+      disabled: disabled,
+      onKeyPress: handleKeyPress
+    }, _react.default.createElement(EyeIcon, {
+      onClick: onClick,
+      "data-testid": "toggle-password-visible",
+      role: "button",
+      "aria-expanded": showPassword
+    }))
+  }, tooltipText);
+}

package/lib/components/PasswordField/index.d.ts

@@ -0,0 +1,14 @@
+import React, { RefForwardingComponent } from 'react';
+import { BaseInputFieldProps } from '../../atoms/InputField';
+export declare type TextInputRef = HTMLInputElement;
+export interface PasswordFieldProps extends Omit<React.InputHTMLAttributes<TextInputRef>, 'icon' | 'readOnly' | 'label'>, Omit<BaseInputFieldProps, 'children' | 'onClick'> {
+    onBlur?: React.FocusEventHandler;
+    onChange?: React.ChangeEventHandler<TextInputRef>;
+    onFocus?: React.FocusEventHandler;
+    onKeyDown?: React.KeyboardEventHandler;
+    initialPasswordVisible?: boolean;
+    value: string;
+}
+declare const PasswordFieldWithRef: RefForwardingComponent<TextInputRef, PasswordFieldProps>;
+export default PasswordFieldWithRef;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/PasswordField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PasswordField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAGf,OAAmB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AASzE,oBAAY,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,WAAW,kBACf,SAAQ,IAAI,CACR,KAAK,CAAC,mBAAmB,CAAC,YAAY,CAAC,EACvC,MAAM,GAAG,UAAU,GAAG,OAAO,CAC9B,EACD,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAClD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;CACf;AAmED,QAAA,MAAM,oBAAoB,EAAE,sBAAsB,CAChD,YAAY,EACZ,kBAAkB,CACS,CAAC;AAQ9B,eAAe,oBAAoB,CAAC"}

package/lib/components/PasswordField/index.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
+var _InputField = _interopRequireDefault(require("../../atoms/InputField"));
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _Input = _interopRequireDefault(require("./Input"));
+
+var _schema = _interopRequireDefault(require("./schema"));
+
+var _ShowPasswordButton = _interopRequireDefault(require("./ShowPasswordButton"));
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function PasswordField(_ref, ref) {
+  var hideLabel = _ref.hideLabel,
+      initialPasswordVisible = _ref.initialPasswordVisible,
+      disabled = _ref.disabled,
+      props = _objectWithoutProperties(_ref, ["hideLabel", "initialPasswordVisible", "disabled"]);
+
+  var _useState = (0, _react.useState)(!!initialPasswordVisible),
+      _useState2 = _slicedToArray(_useState, 2),
+      showPassword = _useState2[0],
+      setShowPassword = _useState2[1];
+
+  var translate = (0, _useTranslations.default)();
+  var inputRef = (0, _react.useRef)(null);
+  var handleClick = (0, _react.useCallback)(function () {
+    setShowPassword(!showPassword);
+  }, [showPassword, setShowPassword]);
+  var inputType = showPassword ? 'text' : 'password'; // Moving cursor to the end after re-rendering input because of `type`
+
+  (0, _react.useEffect)(function () {
+    if (!(0, _isNil.default)(inputRef) && !(0, _isNil.default)(inputRef.current)) {
+      inputRef.current.selectionStart = inputRef.current.value.length;
+      inputRef.current.selectionEnd = inputRef.current.value.length;
+    }
+  }, [inputType]);
+  var setInputRef = (0, _react.useCallback)(function (propRef) {
+    return function (element) {
+      inputRef.current = element; // eslint-disable-next-line no-param-reassign
+
+      propRef.current = element;
+    };
+  }, []);
+  return _react.default.createElement(_InputField.default, _extends({}, props, {
+    disabled: disabled,
+    label: translate(undefined, 'passwordField.password'),
+    hideLabel: hideLabel,
+    ref: ref,
+    secondaryElement: // eslint-disable-next-line react/jsx-wrap-multilines
+    _react.default.createElement(_ShowPasswordButton.default, {
+      disabled: disabled,
+      showPassword: showPassword,
+      onClick: disabled ? undefined : handleClick
+    })
+  }), function (p) {
+    return _react.default.createElement(_Flex.default, {
+      flexDirection: "row",
+      flex: 1
+    }, _react.default.createElement(_Input.default, _extends({}, p, {
+      ref: setInputRef(p.ref),
+      role: "password",
+      passwordVisible: showPassword,
+      hideLabel: hideLabel,
+      type: inputType,
+      "data-testid": "password-input"
+    })));
+  });
+}
+
+var PasswordFieldWithRef = (0, _react.forwardRef)(PasswordField);
+PasswordFieldWithRef.displayName = 'TextField';
+PasswordFieldWithRef.propTypes = _objectSpread({}, _schema.default.propTypes, {
+  icon: _propTypes.default.elementType
+});
+var _default = PasswordFieldWithRef;
+exports.default = _default;