"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResourceListHeaderContent = exports.ResourceListHeader = exports.ResourceList = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const id_1 = require("../../utilities/id");
const legacy_1 = require("../../utilities/legacy");
const Heading_1 = require("../Heading");
const HeadingGroup_1 = require("../HeadingGroup");
const View_1 = require("../View");
const ResourceList_css_1 = __importDefault(require("./ResourceList.css"));
const createId = id_1.createIdCreator('ResourceList');
function ResourceList({ children, title, titleHidden, spacing, border, borderStyle, borderColor, }) {
    const id = id_1.useId(undefined, createId);
    const className = css_utilities_1.classNames(ResourceList_css_1.default.ResourceList, legacy_1.utilityDefaultBorderColor, spacing && ResourceList_css_1.default[css_utilities_1.variationName('spacing', spacing)], border && ResourceList_css_1.default[css_utilities_1.variationName('border', border)], borderStyle && ResourceList_css_1.default[css_utilities_1.variationName('borderStyle', borderStyle)], borderColor && ResourceList_css_1.default[css_utilities_1.variationName('borderColor', borderColor)]);
    const titleMarkup = title ? <Heading_1.Heading id={id}>{title}</Heading_1.Heading> : null;
    return (<>
      {title && titleHidden ? (<View_1.View visibility="hidden">{titleMarkup}</View_1.View>) : (titleMarkup)}
      <HeadingGroup_1.HeadingGroup>
        <div role="table" aria-labelledby={id} className={className}>
          {children}
        </div>
      </HeadingGroup_1.HeadingGroup>
    </>);
}
exports.ResourceList = ResourceList;
function ResourceListHeader({ children, hidden, }) {
    return (<div role="row" className={css_utilities_1.classNames(ResourceList_css_1.default.ResourceListHeader, {
        [ResourceList_css_1.default['ResourceListHeader-isHidden']]: hidden,
    })}>
      {children}
    </div>);
}
exports.ResourceListHeader = ResourceListHeader;
function ResourceListHeaderContent({ children, primary, hidden, }) {
    return (<div role="columnheader" className={primary ? ResourceList_css_1.default['ResourceListHeaderContent-isPrimary'] : undefined}>
      {hidden ? <View_1.View visibility="hidden">{children}</View_1.View> : children}
    </div>);
}
exports.ResourceListHeaderContent = ResourceListHeaderContent;