@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
37 lines • 6.13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useListToolbarStyles = void 0;
var tslib_1 = require("tslib");
var css_1 = require("@emotion/css");
var react_components_1 = require("@fluentui/react-components");
var useListToolbarStyles = function () {
return {
/** Outer toolbar container */
toolbar: (0, css_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: flex !important;\n flex-wrap: nowrap !important;\n align-items: center !important;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n min-height: 48px;\n gap: ", ";\n white-space: nowrap;\n position: relative;\n "], ["\n display: flex !important;\n flex-wrap: nowrap !important;\n align-items: center !important;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n min-height: 48px;\n gap: ", ";\n white-space: nowrap;\n position: relative;\n "])), react_components_1.tokens.spacingVerticalS, react_components_1.tokens.spacingHorizontalM, react_components_1.tokens.colorNeutralBackground1, react_components_1.tokens.colorNeutralStroke2, react_components_1.tokens.spacingHorizontalXS),
/** Visible container for regular (left-side) items */
leftSection: (0, css_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n display: flex !important;\n flex-wrap: nowrap !important;\n align-items: center !important;\n gap: ", ";\n flex: 0 0 auto !important;\n min-width: 0;\n "], ["\n display: flex !important;\n flex-wrap: nowrap !important;\n align-items: center !important;\n gap: ", ";\n flex: 0 0 auto !important;\n min-width: 0;\n "])), react_components_1.tokens.spacingHorizontalXS),
/** Hidden mirror — renders ALL items for unclipped measurement */
measureSection: (0, css_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n gap: ", ";\n position: absolute;\n top: 0;\n left: 0;\n visibility: hidden;\n pointer-events: none;\n height: 0;\n overflow: visible;\n z-index: -1;\n "], ["\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n gap: ", ";\n position: absolute;\n top: 0;\n left: 0;\n visibility: hidden;\n pointer-events: none;\n height: 0;\n overflow: visible;\n z-index: -1;\n "])), react_components_1.tokens.spacingHorizontalXS),
/** Far-items group — pushed to the right edge */
rightGroup: (0, css_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n display: flex !important;\n flex-wrap: nowrap !important;\n align-items: center !important;\n gap: ", ";\n flex: 0 0 auto !important;\n margin-left: auto;\n white-space: nowrap;\n "], ["\n display: flex !important;\n flex-wrap: nowrap !important;\n align-items: center !important;\n gap: ", ";\n flex: 0 0 auto !important;\n margin-left: auto;\n white-space: nowrap;\n "])), react_components_1.tokens.spacingHorizontalXS),
/** Inner wrapper for far-items inside rightGroup */
farItemsContainer: (0, css_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n gap: inherit;\n "], ["\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n gap: inherit;\n "]))),
/** Base style for all ToolbarButton instances */
toolbarButtonBase: (0, css_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n min-width: auto;\n "], ["\n min-width: auto;\n "]))),
/** "..." overflow menu trigger button */
overflowButton: (0, css_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n flex-shrink: 0;\n "], ["\n flex-shrink: 0;\n "]))),
/** Count badge — hidden on mobile */
countBadge: (0, css_1.css)(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n flex-shrink: 0;\n @media (max-width: 768px) {\n display: none;\n }\n "], ["\n flex-shrink: 0;\n @media (max-width: 768px) {\n display: none;\n }\n "]))),
/** Divider between groups */
divider: (0, css_1.css)(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n height: 24px;\n margin: 0 ", ";\n "], ["\n height: 24px;\n margin: 0 ", ";\n "])), react_components_1.tokens.spacingHorizontalXS),
/** Regular toolbar item */
toolbarItem: (0, css_1.css)(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject(["\n flex-shrink: 0;\n width: fit-content;\n white-space: nowrap;\n "], ["\n flex-shrink: 0;\n width: fit-content;\n white-space: nowrap;\n "]))),
/** Far-item button */
farItemButton: (0, css_1.css)(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject(["\n flex-shrink: 0;\n "], ["\n flex-shrink: 0;\n "]))),
/** Label text inside far-item buttons — hidden on mobile */
farItemLabel: (0, css_1.css)(templateObject_12 || (templateObject_12 = tslib_1.__makeTemplateObject(["\n @media (max-width: 768px) {\n display: none;\n }\n "], ["\n @media (max-width: 768px) {\n display: none;\n }\n "]))),
};
};
exports.useListToolbarStyles = useListToolbarStyles;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
//# sourceMappingURL=useListToolbarStyles.js.map