wix-style-react/dist/src/SidePanel/Section/Section.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _SectionSt = require("./Section.st.css");
var _useId = require("./useId");
var _SectionHeader = _interopRequireDefault(require("../../SectionHeader"));
var _constants = require("../constants");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/SidePanel/Section/Section.tsx";
var Section = _ref => {
  var {
    title,
    titleVisible = true,
    suffix,
    children,
    ariaLabel,
    dataHook,
    as,
    'aria-describedby': ariaDescribedBy,
    id
  } = _ref;
  var generatedId = (0, _useId.useId)('title_');
  var titleId = id || generatedId;
  var getAriaLabel = () => {
    if (typeof title !== 'string') {
      return ariaLabel;
    }
    return ariaLabel || title;
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": dataHook,
    "data-title": typeof title === 'string' ? title : undefined,
    className: _SectionSt.classes.section,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 32,
      columnNumber: 5
    }
  }, titleVisible && /*#__PURE__*/_react.default.createElement(_SectionHeader.default, {
    id: titleId,
    skin: "neutral",
    divider: "bottom",
    align: "start",
    size: "small",
    horizontalPadding: "large",
    title: title,
    suffix: suffix,
    dataHook: _constants.dataHooks.sidePanelSectionHeader,
    as: as,
    "aria-describedby": ariaDescribedBy,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 38,
      columnNumber: 9
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    role: "group",
    "aria-label": getAriaLabel(),
    "aria-labelledby": titleVisible ? titleId : undefined,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 52,
      columnNumber: 7
    }
  }, children));
};
Section.displayName = 'Section';
Section.propTypes = {
  title: _propTypes.default.node,
  titleVisible: _propTypes.default.bool,
  suffix: _propTypes.default.element,
  children: _propTypes.default.node,
  ariaLabel: _propTypes.default.string,
  dataHook: _propTypes.default.string,
  as: _propTypes.default.oneOf(['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
  id: _propTypes.default.string,
  'aria-describedby': _propTypes.default.string
};
var _default = exports.default = Section;
//# sourceMappingURL=Section.js.map