@wix/design-system/dist/cjs/FieldSet/FieldSet.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _FieldSetSt = require("./FieldSet.st.css.js");
var _constants = require("./constants");
var _Label = _interopRequireDefault(require("./components/Label"));
var _Suffix = _interopRequireDefault(require("./components/Suffix"));
var _StatusMessage = _interopRequireDefault(require("./components/StatusMessage"));
var _InlineLabelWrapper = _interopRequireDefault(require("./components/InlineLabelWrapper"));
var _FieldSet = require("./FieldSet.context");
var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FieldSet/FieldSet.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var FieldSet = _ref => {
  var {
    dataHook,
    children,
    legend: label,
    legendPlacement: labelPlacement = _constants.LEGEND_PLACEMENT.TOP,
    legendAlignment: labelAlignment = _constants.LEGEND_ALIGNMENT.MIDDLE,
    legendSize: labelSize = _constants.LEGEND_SIZE.SMALL,
    required = false,
    infoContent,
    infoTooltipProps,
    suffix,
    charCount,
    status,
    statusMessage,
    statusId,
    alignment = _constants.ALIGNMENT.START,
    direction = _constants.DIRECTION.HORIZONTAL,
    gap = _constants.GAP.SMALL,
    columns,
    ellipsis,
    maxLines = 1
  } = _ref;
  var hasSuffix = !!(suffix || charCount !== undefined);
  var hasOnlySuffix = labelPlacement === _constants.LEGEND_PLACEMENT.NONE && hasSuffix;
  var hasInlineElements = labelPlacement === _constants.LEGEND_PLACEMENT.LEFT || labelPlacement === _constants.LEGEND_PLACEMENT.RIGHT;
  var SuffixWithProps = hasSuffix ? /*#__PURE__*/_react.default.createElement(_Suffix.default, {
    suffix: suffix,
    charCount: charCount,
    labelPlacement: labelPlacement,
    hasInlineElements: hasInlineElements,
    labelSize: labelSize,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 50,
      columnNumber: 5
    }
  }) : null;

  // TODO: useId() hook, when React@18
  var {
    current: uniqueStatusMessageId
  } = (0, _react.useRef)((0, _uniqueId2.default)('fieldset-status-message-'));
  return /*#__PURE__*/_react.default.createElement("fieldset", {
    "data-hook": dataHook,
    "data-legend-placement": labelPlacement,
    "data-legend-alignment": labelAlignment,
    "data-status": status,
    "data-alignment": alignment,
    "data-direction": direction,
    "data-gap": gap,
    className: (0, _FieldSetSt.st)(_FieldSetSt.classes.root, {
      labelSize,
      hasInlineElements,
      labelPlacement,
      labelAlignment,
      required,
      hasOnlySuffix,
      minLabelHeight: !children
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 65,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement("legend", {
    className: _FieldSetSt.classes.visuallyHidden,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 83,
      columnNumber: 7
    }
  }, label), labelPlacement === _constants.LEGEND_PLACEMENT.TOP && /*#__PURE__*/_react.default.createElement("div", {
    className: _FieldSetSt.classes.labelRow,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 85,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _FieldSetSt.classes.labelRowMain,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 86,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_Label.default, {
    dataHook: _constants.dataHooks.label,
    label: label,
    labelSize: labelSize,
    ellipsis: ellipsis !== null && ellipsis !== void 0 ? ellipsis : true,
    maxLines: maxLines,
    required: required,
    infoContent: infoContent,
    infoTooltipProps: infoTooltipProps,
    "aria-hidden": true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 87,
      columnNumber: 13
    }
  })), SuffixWithProps), hasOnlySuffix && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _FieldSetSt.st)(_FieldSetSt.classes.suffixRow),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 103,
      columnNumber: 9
    }
  }, SuffixWithProps), children && /*#__PURE__*/_react.default.createElement(_FieldSet.FieldSetContext.Provider, {
    value: statusId ? {} : {
      status,
      statusId: uniqueStatusMessageId
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 107,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": _constants.dataHooks.children,
    className: (0, _FieldSetSt.st)(_FieldSetSt.classes.children, {
      childrenWithInlineLabel: hasInlineElements,
      alignment,
      direction,
      gap
    }),
    style: {
      gridTemplateColumns: direction === _constants.DIRECTION.HORIZONTAL ? columns : undefined
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 110,
      columnNumber: 11
    }
  }, children)), hasInlineElements && /*#__PURE__*/_react.default.createElement(_InlineLabelWrapper.default, {
    suffix: suffix,
    charCount: charCount,
    labelPlacement: labelPlacement,
    labelSize: labelSize,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 129,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_Label.default, {
    dataHook: _constants.dataHooks.label,
    label: label,
    labelSize: labelSize,
    ellipsis: ellipsis,
    maxLines: maxLines,
    required: required,
    infoContent: infoContent,
    infoTooltipProps: infoTooltipProps,
    "aria-hidden": true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 135,
      columnNumber: 11
    }
  }), SuffixWithProps), statusMessage && /*#__PURE__*/_react.default.createElement(_StatusMessage.default, {
    statusId: statusId || uniqueStatusMessageId,
    status: status,
    statusMessage: statusMessage,
    labelSize: "tiny",
    labelPlacement: labelPlacement,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 151,
      columnNumber: 9
    }
  }));
};
FieldSet.displayName = 'FieldSet';
var _default = exports.default = FieldSet;
//# sourceMappingURL=FieldSet.js.map