suomifi-ui-components/dist/esm/core/Modal/ModalTitle/ModalTitle.js

Suomi.fi UI component library

import { __extends, __rest, __assign, __makeTemplateObject } from 'tslib';
import React, { Component } from 'react';
import { styled } from 'styled-components';
import classnames from 'classnames';
import '../../../reset/HtmlA/HtmlA.js';
import '../../../reset/HtmlButton/HtmlButton.js';
import '../../../reset/HtmlDiv/HtmlDiv.js';
import '../../../reset/HtmlFieldSet/HtmlFieldSet.js';
import '../../../reset/HtmlH/HtmlH.js';
import '../../../reset/HtmlInput/HtmlInput.js';
import '../../../reset/HtmlLabel/HtmlLabel.js';
import '../../../reset/HtmlLegend/HtmlLegend.js';
import '../../../reset/HtmlLi/HtmlLi.js';
import '../../../reset/HtmlNav/HtmlNav.js';
import '../../../reset/HtmlOl/HtmlOl.js';
import { HtmlSpan } from '../../../reset/HtmlSpan/HtmlSpan.js';
import '../../../reset/HtmlTextarea/HtmlTextarea.js';
import '../../../reset/HtmlUl/HtmlUl.js';
import '../../../reset/HtmlTable/HtmlTable.js';
import '../../../reset/HtmlTable/HtmlTableCaption.js';
import '../../../reset/HtmlTable/HtmlTableHeader.js';
import '../../../reset/HtmlTable/HtmlTableRow.js';
import '../../../reset/HtmlTable/HtmlTableBody.js';
import '../../../reset/HtmlTable/HtmlTableHeaderCell.js';
import '../../../reset/HtmlTable/HtmlTableCell.js';
import { Heading } from '../../Heading/Heading.js';
import { baseClassName, ModalConsumer } from '../Modal/Modal.js';
import { baseStyles } from './ModalTitle.baseStyles.js';
import { SuomifiThemeConsumer } from '../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js';
import '../../theme/SuomifiTheme/SuomifiTheme.js';
import '../../theme/SpacingProvider/SpacingProvider.js';

var titleClassName = "".concat(baseClassName, "_title");
var titleClassNames = {
  smallScreen: "".concat(titleClassName, "--smallScreen"),
  focusWrapper: "".concat(titleClassName, "_focus-wrapper")
};
var BaseModalTitle = function (_super) {
  __extends(BaseModalTitle, _super);
  function BaseModalTitle() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.state = {
      titleFocusable: true
    };
    return _this;
  }
  BaseModalTitle.prototype.render = function () {
    var _a;
    var _this = this;
    var _b = this.props,
      className = _b.className;
      _b.theme;
      var children = _b.children,
      focusTitleOnOpen = _b.focusTitleOnOpen,
      titleRef = _b.titleRef,
      modalVariant = _b.modalVariant;
      _b.scrollable;
      var _c = _b.variant,
      variant = _c === void 0 ? 'h3' : _c,
      _d = _b.as,
      as = _d === void 0 ? 'h2' : _d,
      passProps = __rest(_b, ["className", "theme", "children", "focusTitleOnOpen", "titleRef", "modalVariant", "scrollable", "variant", "as"]);
    return /*#__PURE__*/React.createElement(HtmlSpan, {
      className: classnames(className, titleClassName, (_a = {}, _a[titleClassNames.smallScreen] = modalVariant === 'smallScreen', _a))
    }, /*#__PURE__*/React.createElement(Heading, __assign({
      className: titleClassNames.focusWrapper
    }, this.state.titleFocusable && focusTitleOnOpen ? {
      tabIndex: 0
    } : {}, {
      onBlur: function onBlur() {
        return _this.setState({
          titleFocusable: false
        });
      },
      variant: variant,
      ref: titleRef,
      as: as
    }, passProps), children));
  };
  return BaseModalTitle;
}(Component);
var StyledModalTitle = styled(BaseModalTitle).withConfig({
  componentId: "sc-z38xtw-0"
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
  var theme = _a.theme;
  return baseStyles(theme);
});
var ModalTitle = function ModalTitle(props) {
  return /*#__PURE__*/React.createElement(SuomifiThemeConsumer, null, function (_a) {
    var suomifiTheme = _a.suomifiTheme;
    return /*#__PURE__*/React.createElement(ModalConsumer, null, function (_a) {
      var focusTitleOnOpen = _a.focusTitleOnOpen,
        titleRef = _a.titleRef,
        variant = _a.variant,
        scrollable = _a.scrollable;
      return /*#__PURE__*/React.createElement(StyledModalTitle, __assign({
        focusTitleOnOpen: focusTitleOnOpen
      }, titleRef ? {
        titleRef: titleRef
      } : {}, {
        modalVariant: variant,
        scrollable: scrollable,
        theme: suomifiTheme
      }, props));
    });
  });
};
ModalTitle.displayName = 'ModalTitle';
var templateObject_1;

export { ModalTitle };
//# sourceMappingURL=ModalTitle.js.map