@decisiv/ui-components 2.0.1-alpha.218 → 2.0.1-alpha.220

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

@@ -14,7 +14,7 @@ export interface DrawerProps extends HeaderProps, FooterProps {
     side?: 'left' | 'right';
     zIndex?: number;
     visible?: boolean;
-    onClose?: (event: MouseEvent | KeyboardEvent) => void;
+    onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent> | KeyboardEvent) => void;
 }
 export declare type OverlayProps = Pick<DrawerProps, 'zIndex' | 'side' | 'visible'>;
 declare const Drawer: React.FC<DrawerProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAmBhD,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,MAAO,SAAQ,WAAW;IAClC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,WAAW;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;CACvD;AAED,oBAAY,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAE5E,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmHjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAkBhD,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,MAAO,SAAQ,WAAW;IAClC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,WAAW;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG,aAAa,KAChE,IAAI,CAAC;CACX;AAED,oBAAY,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAM5E,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuHjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Drawer/index.js

@@ -25,12 +25,14 @@ var _styles = require("./styles");
 
 var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
 
-var _useClickOutside = _interopRequireDefault(require("../../utils/useClickOutside"));
-
 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 stopPropagation = function stopPropagation(e) {
+  e.stopPropagation();
+};
+
 var Drawer = function Drawer(_ref) {
   var title = _ref.title,
       description = _ref.description,
@@ -59,8 +61,7 @@ var Drawer = function Drawer(_ref) {
     if (onClose && visible) {
       onClose(event);
     }
-  }, [onClose, visible]);
-  (0, _useClickOutside.default)([contentRef], handleOnClickOutside); // Allow closing the modal by pressing the Escape key
+  }, [onClose, visible]); // Allow closing the modal by pressing the Escape key
 
   (0, _react.useEffect)(function () {
     if (visible && _canUseDOM.default) {
@@ -81,12 +82,18 @@ var Drawer = function Drawer(_ref) {
     zIndex: zIndex,
     side: side,
     visible: visible,
-    "data-testid": "overlay"
+    "data-testid": "overlay",
+    onClick: handleOnClickOutside,
+    role: "presentation",
+    tabIndex: -1
   }, _react.default.createElement(_styles.Content, {
     ref: contentRef,
     side: side,
     visible: visible,
-    "data-testid": "content"
+    "data-testid": "content",
+    onClick: stopPropagation,
+    "aria-modal": "true",
+    role: "dialog"
   }, showHeader && _react.default.createElement(_styles.Header, {
     "data-testid": "drawer-header"
   }, _react.default.createElement(_Flex.default, null, title && _react.default.createElement(_styles.Title, null, title), onClose && _react.default.createElement(_Tooltip.default, {

package/lib/components/Drawer/index.test.js

@@ -10,6 +10,8 @@ var _ConfigProvider = require("../../providers/ConfigProvider");
 
 var _ = _interopRequireDefault(require("."));
 
+var _Combobox = _interopRequireDefault(require("../Combobox"));
+
 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; }
@@ -39,16 +41,39 @@ describe('Drawer', function () {
         expect(getByTestId(/overlay/i)).toHaveStyleRule('display', 'none');
       });
     });
+    it('does not close when clicking on another Portal based component', function () {
+      var onClose = jest.fn();
+
+      var _render2 = render(_react.default.createElement(_.default, {
+        visible: true,
+        onClose: onClose
+      }, _react.default.createElement(_Combobox.default, {
+        label: "My Combobox",
+        options: [{
+          id: '1',
+          label: 'My Option',
+          value: '1'
+        }]
+      }))),
+          getByLabelText = _render2.getByLabelText,
+          getByText = _render2.getByText;
+
+      _react2.fireEvent.click(getByLabelText('My Combobox'));
+
+      _react2.fireEvent.click(getByText('My Option'));
+
+      expect(onClose).not.toHaveBeenCalled();
+    });
   });
   describe('title', function () {
     it('renders the text passed as "title" in an h3 tag', function () {
       var title = 'This is the title';
 
-      var _render2 = render(_react.default.createElement(_.default, {
+      var _render3 = render(_react.default.createElement(_.default, {
         visible: true,
         title: title
       })),
-          getByText = _render2.getByText;
+          getByText = _render3.getByText;
 
       expect(getByText(title, {
         selector: 'h3'
@@ -58,30 +83,30 @@ describe('Drawer', function () {
   describe('onClose', function () {
     var onClose = jest.fn();
     it('renders a close button if "onClose" is passed', function () {
-      var _render3 = render(_react.default.createElement(_.default, {
+      var _render4 = render(_react.default.createElement(_.default, {
         visible: true,
         onClose: onClose
       })),
-          getByLabelText = _render3.getByLabelText;
+          getByLabelText = _render4.getByLabelText;
 
       var closeBtn = getByLabelText(/close drawer/i);
       expect(closeBtn).toBeInTheDocument();
     });
     it('does not render a close button if "onClose" is not passed', function () {
-      var _render4 = render(_react.default.createElement(_.default, {
+      var _render5 = render(_react.default.createElement(_.default, {
         visible: true
       })),
-          queryByLabelText = _render4.queryByLabelText;
+          queryByLabelText = _render5.queryByLabelText;
 
       var closeBtn = queryByLabelText(/close drawer/i);
       expect(closeBtn).not.toBeInTheDocument();
     });
     it('calls the "onClose" function when clicking the close button', function () {
-      var _render5 = render(_react.default.createElement(_.default, {
+      var _render6 = render(_react.default.createElement(_.default, {
         visible: true,
         onClose: onClose
       })),
-          getByLabelText = _render5.getByLabelText;
+          getByLabelText = _render6.getByLabelText;
 
       var closeBtn = getByLabelText(/close drawer/i);
 
@@ -104,11 +129,11 @@ describe('Drawer', function () {
         onClick: onCancel
       }];
       it('renders the array as buttons in the footer of the Drawer', function () {
-        var _render6 = render(_react.default.createElement(_.default, {
+        var _render7 = render(_react.default.createElement(_.default, {
           visible: true,
           actions: actions
         })),
-            getByText = _render6.getByText;
+            getByText = _render7.getByText;
 
         expect(getByText(/submit/i, {
           selector: 'button'
@@ -123,11 +148,11 @@ describe('Drawer', function () {
     it('calls the "onClose" function when clicking outside the Drawer', function () {
       var onClose = jest.fn();
 
-      var _render7 = render(_react.default.createElement(_.default, {
+      var _render8 = render(_react.default.createElement(_.default, {
         visible: true,
         onClose: onClose
       })),
-          getByTestId = _render7.getByTestId;
+          getByTestId = _render8.getByTestId;
 
       var overlay = getByTestId(/overlay/i);
 

package/lib/components/Modal/index.js

@@ -123,7 +123,7 @@ function Modal(_ref) {
   var modalFooterId = "modal-footer-".concat(uuid);
   var hasFooter = !(0, _isEmpty.default)(actions);
   return _react.default.createElement(_ResponsiveModalWrapper.default, {
-    id: id,
+    id: id || uuid,
     size: size,
     zIndex: zIndex,
     onClose: onClose,

package/lib/components/Modal/index.test.js

@@ -92,6 +92,16 @@ describe('Modal', function () {
       });
     });
   });
+  it('renders aria labelledby and its target correctly', function () {
+    render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      id: undefined
+    })));
+    var ariaLabelledByElement = document.querySelector("[aria-labelledby^=\"modal-header-modal-\"]");
+    expect(ariaLabelledByElement).toBeTruthy();
+    var ariaLabelledByAttribute = ariaLabelledByElement.getAttribute('aria-labelledby');
+    var modalHeader = document.getElementById(ariaLabelledByAttribute);
+    expect(modalHeader).toBeTruthy();
+  });
   it('renders the title in the header of the modal', function () {
     render(_react.default.createElement(_.default, defaultProps));
     var modalHeader = document.getElementById("modal-header-".concat(defaultProps.id));

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAmC,CAAC;AAkDhD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAmC,CAAC;AAoDhD,eAAe,MAAM,CAAC"}

package/lib/components/Tag/schema.js

@@ -14,7 +14,7 @@ var schema = (0, _reactDesc.describe)({
   displayName: 'Tag'
 });
 schema.propTypes = {
-  text: _reactDesc.PropTypes.string.description("The tag's text"),
+  text: _reactDesc.PropTypes.node.description('Content to render inside the tag (string or any React node)'),
   icon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render as the main icon'),
   size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('The size to use for the Tag').defaultValue('small'),
   color: _reactDesc.PropTypes.oneOf(_commonUIColors.commonUIColorKeys).description('The color to use as the tag background or SVG color when outlined').format('string (see notes below)').defaultValue('licoriceMousse'),

package/lib/components/Tag/types.d.ts

@@ -14,13 +14,13 @@ export declare type BaseProps = {
     style?: CSSObject;
 };
 declare type ContentProps = {
-    text?: string;
+    text?: React.ReactNode;
     icon?: IconComponent;
     action?: ActionHandler;
     actionIcon?: IconComponent;
 };
 declare type Text = {
-    text: string;
+    text: React.ReactNode;
 };
 declare type Icon = {
     icon: IconComponent;

package/lib/components/Tag/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,GAAG,EACH,aAAa,EACb,cAAc,EACd,aAAa,EACd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,MAAM,GAAG,cAAc,CAAC;AACpC,oBAAY,YAAY,GAAG,cAAc,CAAC;AAC1C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,oBAAY,aAAa,GAAG,CAC1B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAChD,OAAO,CAAC;AAEb,oBAAY,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7B,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AACpC,aAAK,MAAM,GAAG;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,CAAC;AACxC,aAAK,UAAU,GAAG;IAAE,UAAU,EAAE,aAAa,CAAA;CAAE,CAAC;AAEhD,aAAK,gBAAgB,GACjB,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE,GACjC,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GACzB,IAAI,GAAG,IAAI,GACX,IAAI,GAAG,MAAM,GAAG,UAAU,GAC1B,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtC,oBAAY,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACnC,gBAAgB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;CACnE,CAAC;AAEF,oBAAY,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,GAC1C,SAAS,GACT,YAAY,GACZ,gBAAgB,GAChB,gBAAgB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,GAAG,EACH,aAAa,EACb,cAAc,EACd,aAAa,EACd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,MAAM,GAAG,cAAc,CAAC;AACpC,oBAAY,YAAY,GAAG,cAAc,CAAC;AAC1C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,oBAAY,aAAa,GAAG,CAC1B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAChD,OAAO,CAAC;AAEb,oBAAY,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AACtC,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AACpC,aAAK,MAAM,GAAG;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,CAAC;AACxC,aAAK,UAAU,GAAG;IAAE,UAAU,EAAE,aAAa,CAAA;CAAE,CAAC;AAEhD,aAAK,gBAAgB,GACjB,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE,GACjC,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GACzB,IAAI,GAAG,IAAI,GACX,IAAI,GAAG,MAAM,GAAG,UAAU,GAC1B,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtC,oBAAY,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACnC,gBAAgB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;CACnE,CAAC;AAEF,oBAAY,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,GAC1C,SAAS,GACT,YAAY,GACZ,gBAAgB,GAChB,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.218",
+  "version": "2.0.1-alpha.220",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",