@gravity-ui/uikit
Version:
Gravity UI base styling and components
39 lines (38 loc) • 2.15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DisclosureSummary = DisclosureSummary;
exports.DefaultDisclosureSummary = DefaultDisclosureSummary;
const jsx_runtime_1 = require("react/jsx-runtime");
const ArrowToggle_1 = require("../../ArrowToggle/index.js");
const warn_1 = require("../../utils/warn.js");
const DisclosureContext_1 = require("../DisclosureContext.js");
const constants_1 = require("../constants.js");
const ComponentSizeToIconSizeMap = {
m: 14,
l: 16,
xl: 20,
};
function warnAboutPhysicalValues() {
(0, warn_1.warnOnce)('[Disclosure] Physical values (left, right) of "arrowPosition" property are deprecated. Use logical values (start, end) instead.');
}
function DisclosureSummary({ children: renderFunction, qa }) {
const handleToggle = (0, DisclosureContext_1.useToggleDisclosure)();
const { ariaControls, ariaLabelledby: id, expanded, disabled } = (0, DisclosureContext_1.useDisclosureAttributes)();
const props = { onClick: handleToggle, ariaControls, id, expanded, disabled, qa };
return renderFunction(props, (0, jsx_runtime_1.jsx)(DefaultDisclosureSummary, { ...props }));
}
function DefaultDisclosureSummary({ onClick, ariaControls, id, expanded, disabled, qa, }) {
const { size, summary, arrowPosition } = (0, DisclosureContext_1.useDisclosureAttributes)();
let arrowMod = arrowPosition;
if (arrowMod === 'left') {
warnAboutPhysicalValues();
arrowMod = 'start';
}
if (arrowMod === 'right') {
warnAboutPhysicalValues();
arrowMod = 'end';
}
return ((0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-expanded": expanded, className: (0, constants_1.b)('trigger', { disabled, arrow: arrowMod }), "aria-controls": ariaControls, id: id, onClick: onClick, disabled: disabled, "data-qa": qa || constants_1.DisclosureQa.SUMMARY, children: [(0, jsx_runtime_1.jsx)(ArrowToggle_1.ArrowToggle, { size: ComponentSizeToIconSizeMap[size], direction: expanded ? 'top' : 'bottom' }), summary] }));
}
DisclosureSummary.displayName = 'DisclosureSummary';
//# sourceMappingURL=DisclosureSummary.js.map