@octopusdeploy/design-system-components/dist/src/components/Page/Filters.js

The design systems component library.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Filters = Filters;
exports.FiltersSummary = FiltersSummary;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = __importDefault(require("react"));
const Button_1 = require("../Button");
function Filters({ inputs, showAdvancedFiltersToggle, isAdvancedFiltersVisible, onAdvancedFiltersVisibilityChanged }) {
    return ((0, jsx_runtime_1.jsxs)("div", { className: filtersStyles.container, children: [inputs.map((input, index) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: input }, index) // Filter ordering is unlikely to change, so using the index shouldn't be an issue
            )), showAdvancedFiltersToggle && ((0, jsx_runtime_1.jsx)(Button_1.ActionButton, { type: Button_1.ActionButtonType.Ternary, label: `${isAdvancedFiltersVisible ? "Hide" : "Show"} advanced filters`, icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.FilterIcon, { size: 24 }), onClick: () => {
                    onAdvancedFiltersVisibilityChanged(!isAdvancedFiltersVisible);
                } }))] }));
}
function FiltersSummary({ summary }) {
    return (0, jsx_runtime_1.jsx)("div", { className: filtersStyles.summary, children: summary });
}
const filtersStyles = {
    container: (0, css_1.css)({
        minWidth: 0,
        width: "100%",
        display: "flex",
        flexWrap: "wrap",
        gap: design_system_tokens_1.space[12],
        alignItems: "center",
    }),
    summary: (0, css_1.css)({}),
};