@decisiv/ui-components 2.0.1-alpha.186 → 2.0.1-alpha.188

package/lib/components/Modal/index.js

@@ -5,25 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _get = _interopRequireDefault(require("lodash/get"));
-
-var _omit = _interopRequireDefault(require("lodash/omit"));
-
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _breakpointObserver = require("@decisiv/breakpoint-observer");
 
 var _designTokens = require("@decisiv/design-tokens");
 
 var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
 
-var _ConfigProvider = require("../../providers/ConfigProvider");
+var _get = _interopRequireDefault(require("lodash/get"));
 
-var _canUseDOM = _interopRequireDefault(require("../../utils/canUseDOM"));
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
 
 var _commonUIColors = require("../../utils/commonUIColors");
 
@@ -43,16 +39,18 @@ var _components = require("./components");
 
 var _constants = require("./constants");
 
+var _Manager = _interopRequireDefault(require("./Manager"));
+
 var _proptypeValidators = require("./proptypeValidators");
 
+var _ResponsiveModalWrapper = _interopRequireDefault(require("./ResponsiveModalWrapper"));
+
 var _schema = _interopRequireDefault(require("./schema"));
 
-var _utils = require("./utils");
+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 _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; }
@@ -113,43 +111,16 @@ function Modal(_ref) {
 
     return null;
   }, [colorProp, icon, intent]);
-
-  var _useElement = (0, _utils.useElement)(),
-      _useElement2 = _slicedToArray(_useElement, 2),
-      container = _useElement2[0],
-      containerRef = _useElement2[1];
-
-  (0, _utils.useKeepFocusWithin)(container);
   var uuid = (0, _useUniqueId.default)(id, 'modal-');
   var modalHeaderId = "modal-header-".concat(uuid);
   var modalContentId = "modal-content-".concat(uuid);
-  var modalFooterId = "modal-footer-".concat(uuid); // Any click within the overlay should stay within the overlay. This click event should close
-  // the modal, but not bubble up to any parent elements.
-
-  var handleOverlayClick = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-    onClose && onClose(event);
-  }, [onClose]); // Any click within the body should stay within the body. This prevents the click event from
-  // bubbling up and firing the onClose handler via the Overlay's onClick.
-
-  var handleBodyClick = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-  }, []);
-  return _react.default.createElement(_components.Overlay, {
-    onClick: handleOverlayClick,
-    ref: observedElementRef,
-    zIndex: zIndex
-  }, _react.default.createElement(_components.Body, {
-    "aria-describedby": modalContentId,
-    "aria-labelledby": modalHeaderId,
-    "aria-modal": "true",
-    size: breakpoint,
-    id: uuid,
-    onClick: handleBodyClick,
-    ref: containerRef,
-    role: "dialog"
+  var modalFooterId = "modal-footer-".concat(uuid);
+  return _react.default.createElement(_ResponsiveModalWrapper.default, {
+    id: id,
+    zIndex: zIndex,
+    onClose: onClose,
+    breakpoint: breakpoint,
+    observedElementRef: observedElementRef
   }, _react.default.createElement(_components.ScrollYBox, {
     size: breakpoint
   }, _react.default.createElement(_components.Header, {
@@ -187,52 +158,33 @@ function Modal(_ref) {
       marginRight: 0.5,
       size: breakpoint
     }, _react.default.createElement(_Button.default, _extends({}, (0, _omit.default)(action, ['kind', 'size', 'variant']), actionProps[index])));
-  }))));
+  })));
 }
 
-function Manager(_ref8) {
+function ModalWrapper(_ref8) {
   var onClose = _ref8.onClose,
       visible = _ref8.visible,
       children = _ref8.children,
       rest = _objectWithoutProperties(_ref8, ["onClose", "visible", "children"]);
 
-  (0, _utils.useReturnFocus)(!visible);
-
-  var _useConfig = (0, _ConfigProvider.useConfig)(),
-      createPortal = _useConfig.createPortal;
-
-  var onKeyDown = (0, _react.useCallback)(function (event) {
-    if (event.key === 'Escape') {
-      onClose && onClose(event);
-    }
-  }, [onClose]); // Allow closing the modal by pressing the Escape key
-
-  (0, _react.useEffect)(function () {
-    if (visible && _canUseDOM.default) {
-      document.addEventListener('keydown', onKeyDown);
-      return function () {
-        document.removeEventListener('keydown', onKeyDown);
-      };
-    } // eslint has issues with no return statement here...
-
-
-    return undefined;
-  }, [visible, onKeyDown]);
-
-  if (visible) {
-    return createPortal(_react.default.createElement(Modal, _extends({
-      onClose: onClose
-    }, rest), children));
-  }
-
-  return null;
+  return _react.default.createElement(_Manager.default, {
+    onClose: onClose,
+    visible: visible
+  }, _react.default.createElement(Modal, _extends({
+    onClose: onClose,
+    visible: visible
+  }, rest), children));
 } // @ts-ignore
 
 
-Manager.propTypes = _objectSpread({}, _schema.default.propTypes, {
+ModalWrapper.propTypes = _objectSpread({}, _schema.default.propTypes, {
   actions: _proptypeValidators.actionsValidator,
   icon: _propTypes.default.elementType
 });
-Manager.displayName = 'Modal';
-var _default = Manager;
+ModalWrapper.defaultProps = {
+  actions: undefined,
+  icon: undefined
+};
+ModalWrapper.displayName = 'Modal';
+var _default = ModalWrapper;
 exports.default = _default;

package/lib/components/Popover/Arrow.d.ts

@@ -1,9 +1,9 @@
 import { ArrowProps } from './types';
 export declare const arrowColors: {
-    information: import("@decisiv/design-tokens/lib/color").Color;
+    danger: import("@decisiv/design-tokens/lib/color").Color;
     success: import("@decisiv/design-tokens/lib/color").Color;
+    information: import("@decisiv/design-tokens/lib/color").Color;
     warning: import("@decisiv/design-tokens/lib/color").Color;
-    danger: import("@decisiv/design-tokens/lib/color").Color;
     berryCrisp: import("@decisiv/design-tokens/lib/color").Color;
     koolaidCake: import("@decisiv/design-tokens/lib/color").Color;
     cookieMonster: import("@decisiv/design-tokens/lib/color").Color;

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

@@ -7,7 +7,7 @@ export declare const propTypes: {
     actionAttributes: any;
     actionIntent: PropTypes.Requireable<string>;
     actionRef: PropTypes.Requireable<any>;
-    color: PropTypes.Requireable<"information" | "success" | "warning" | "danger" | "berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse">;
+    color: PropTypes.Requireable<import("../../utils/commonUIColors").CommonUIColorKeys>;
     variant: PropTypes.Requireable<string>;
     palette: PropTypes.Requireable<string>;
     size: PropTypes.Requireable<string>;

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

@@ -0,0 +1,24 @@
+import React, { PropsWithChildren } from 'react';
+import { ButtonProps } from '../Button';
+import { ModalProps } from '../Modal/types';
+export interface Step {
+    title: string;
+    content: React.ReactNode;
+    nextButtonProps?: ButtonProps;
+    previousButtonProps?: ButtonProps;
+}
+export interface WizardProps extends Pick<ModalProps, 'id' | 'visible' | 'zIndex'> {
+    title: string;
+    size?: 'normal' | 'extraLarge';
+    steps: Step[];
+    activeStep: number;
+    submitButtonProps: ButtonProps;
+    onCancel: NonNullable<ModalProps['onClose']>;
+}
+declare function WizardManger(props: PropsWithChildren<WizardProps>): JSX.Element;
+declare namespace WizardManger {
+    var propTypes: any;
+    var displayName: string;
+}
+export default WizardManger;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAOjD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAa5C,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mBAAmB,CAAC,EAAE,WAAW,CAAC;CACnC;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,WAAW,CAAC;IAC/B,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;CAC9C;AA8FD,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,eAQ1D;kBARQ,YAAY;;;;AAiBrB,eAAe,YAAY,CAAC"}

package/lib/components/Wizard/index.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _breakpointObserver = require("@decisiv/breakpoint-observer");
+
+var _ArrowLeft = _interopRequireDefault(require("@decisiv/iconix/lib/components/ArrowLeft"));
+
+var _ArrowRight = _interopRequireDefault(require("@decisiv/iconix/lib/components/ArrowRight"));
+
+var _ = require("..");
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _Manager = _interopRequireDefault(require("../Modal/Manager"));
+
+var _ResponsiveModalWrapper = _interopRequireDefault(require("../Modal/ResponsiveModalWrapper"));
+
+var _StepTracker = _interopRequireDefault(require("../StepTracker"));
+
+var _Typography = require("../Typography");
+
+var _styles = require("./styles");
+
+var _schema = _interopRequireDefault(require("./schema"));
+
+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 _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 _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; }
+
+// Define Wizard component
+var Wizard = function Wizard(_ref) {
+  var _ref3;
+
+  var id = _ref.id,
+      wizardTitle = _ref.title,
+      currentStepNumber = _ref.activeStep,
+      submitButtonProps = _ref.submitButtonProps,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'normal' : _ref$size,
+      steps = _ref.steps,
+      onCancel = _ref.onCancel,
+      _ref$zIndex = _ref.zIndex,
+      zIndex = _ref$zIndex === void 0 ? 100 : _ref$zIndex;
+  var translate = (0, _useTranslations.default)();
+
+  var breakpoints = _defineProperty({}, _breakpointObserver.sizes.LG, 650);
+
+  var _useBreakpointObserve = (0, _breakpointObserver.useBreakpointObserver)(breakpoints),
+      _useBreakpointObserve2 = _slicedToArray(_useBreakpointObserve, 2),
+      observedElementRef = _useBreakpointObserve2[0],
+      breakpoint = _useBreakpointObserve2[1].breakpoint;
+
+  var currentStep = steps[currentStepNumber - 1];
+  var stepsTitles = steps.map(function (_ref2) {
+    var title = _ref2.title;
+    return title;
+  });
+  var title = currentStep.title,
+      content = currentStep.content,
+      nextButtonProps = currentStep.nextButtonProps,
+      previousButtonProps = currentStep.previousButtonProps;
+  var showPrevious = currentStepNumber > 1 && !!previousButtonProps;
+  var showSubmit = currentStepNumber === steps.length && !!submitButtonProps;
+  var showNext = currentStepNumber < steps.length && !showSubmit && !!nextButtonProps;
+  return _react.default.createElement(_ResponsiveModalWrapper.default, {
+    id: id,
+    size: size,
+    zIndex: zIndex,
+    breakpoint: breakpoint,
+    observedElementRef: observedElementRef
+  }, _react.default.createElement(_styles.WizardContainer, null, _react.default.createElement(_styles.ScrollYBox, {
+    size: breakpoint
+  }, _react.default.createElement(_styles.Header, {
+    size: breakpoint
+  }, _react.default.createElement(_.Flex, {
+    justifyContent: "center"
+  }, _react.default.createElement(_Typography.H2, null, wizardTitle)), _react.default.createElement(_StepTracker.default, {
+    steps: stepsTitles,
+    activeStep: currentStepNumber
+  })), _react.default.createElement(_styles.StepContainer, {
+    tabIndex: 0
+  }, _react.default.createElement(_.Flex, {
+    marginBottom: 2
+  }, _react.default.createElement(_Typography.H3, null, title)), content)), _react.default.createElement(_styles.Footer, {
+    size: breakpoint,
+    paddingX: (_ref3 = {}, _defineProperty(_ref3, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref3, _breakpointObserver.sizes.XS, 2), _ref3),
+    paddingY: 1.5
+  }, _react.default.createElement(_styles.ActionButtonsContainer, {
+    size: breakpoint
+  }, showSubmit && _react.default.createElement(_.Button, _extends({
+    text: translate('Submit', 'wizard.actions.submit')
+  }, submitButtonProps)), showNext && _react.default.createElement(_.Button, _extends({
+    text: translate('Continue', 'wizard.actions.continue'),
+    icon: _ArrowRight.default,
+    iconPosition: "right"
+  }, nextButtonProps)), showPrevious && _react.default.createElement(_.Button, _extends({
+    text: translate('Back', 'wizard.actions.back'),
+    kind: "secondary",
+    icon: _ArrowLeft.default
+  }, previousButtonProps))), _react.default.createElement(_.Button, {
+    text: translate('Cancel', 'wizard.actions.cancel'),
+    kind: "secondary",
+    variant: "ghost",
+    onClick: onCancel
+  }))));
+};
+
+function WizardManger(props) {
+  var onCancel = props.onCancel,
+      visible = props.visible,
+      children = props.children;
+  return _react.default.createElement(_Manager.default, {
+    onClose: onCancel,
+    visible: visible
+  }, _react.default.createElement(Wizard, props, children));
+} // @ts-ignore
+
+
+WizardManger.propTypes = _objectSpread({}, _schema.default.propTypes);
+WizardManger.displayName = 'Wizard';
+var _default = WizardManger;
+exports.default = _default;