@4alldigital/foundation-ui--gamma 1.31.8 → 1.31.10

package/dist/index.esm.js

@@ -1,9 +1,15 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import cx from 'classnames';
 import { Icon as Icon$1 } from '@iconify/react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import HoverVideoPlayer from 'react-hover-video-player';
 import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
+import '@elastic/eui/dist/eui_theme_light.css';
+import ElasticSearchAPIConnector from '@elastic/search-ui-elasticsearch-connector';
+import { SearchProvider, WithSearch, ErrorBoundary, SearchBox as SearchBox$1, Sorting as Sorting$1, Facet, Results as Results$1, PagingInfo as PagingInfo$1, ResultsPerPage as ResultsPerPage$1, Paging as Paging$1 } from '@elastic/react-search-ui';
+import '@elastic/react-search-ui-views/lib/styles/styles.css';
+import RCPagination from 'rc-pagination';
+import enUsLocale from 'rc-pagination/lib/locale/en_US';
 
 var Blockquote = function (_a) {
     var text = _a.text, citation = _a.citation, className = _a.className, citationAttribute = _a.citationAttribute, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b;
@@ -795,4 +801,297 @@ var CardVariant;
     CardVariant["VIDEO"] = "video";
 })(CardVariant || (CardVariant = {}));
 
-export { BTN_SIZES, BTN_TYPES, BTN_VARIANTS, Blockquote, Button, COPY_ALIGN, COPY_CONTEXTUAL, COPY_SIZE, COPY_TAG, COPY_TRANSFORM, CPL_SPACING, CRL_SIZE, Card, CardVariant, Container, ContentPageLayout, ContentRowsLayout, Copy, FIELD_TYPES, Form, FormField, HEADING_ALIGN, HEADING_TAGS, HEADING_TRANSFORM, Heading, Hr, Icon, Image, Link, List, ListItem, ListTag, Loader, Notice, Variants };
+var ResultAsTypes;
+(function (ResultAsTypes) {
+    ResultAsTypes["cardBasic"] = "cardBasic";
+    ResultAsTypes["cardMedia"] = "cardMedia";
+    ResultAsTypes["cardVideo"] = "cardVideo";
+})(ResultAsTypes || (ResultAsTypes = {}));
+
+function Sorting(_a) {
+    var className = _a.className, label = _a.label, onChange = _a.onChange, options = _a.options;
+    return (jsxs("div", { className: cx('m-0 p-0 mb-2 border-none', className), children: [jsx(Label, { className: "text-sm", transform: COPY_TRANSFORM.UPPERCASE, children: label }), jsx(FormSelect, { id: label || 'Sorting', options: options, onChange: function (o) { return onChange(o.target.value); } })] }));
+}
+Sorting.displayName = 'Sorting';
+
+// import { BTN_SIZES, BTN_VARIANTS, Button, Icon } from '../../../../components';
+// const itemRender = (current: number, type: string, element: React.ReactNode, ...rest: any) => {
+//   console.log('itemRender', rest);
+//   if (type === 'page') {
+//     return <a href={`#${current}`}>{current}</a>;
+//   }
+//   if (type === 'prev') {
+//     return <Button variant={BTN_VARIANTS.PRIMARY} size={BTN_SIZES.SMALL}><Icon name="mdi:chevron-left" /></Button>;
+//   }
+//   if (type === 'next') {
+//     return <button type="button">Next</button>;
+//   }
+//   return element;
+// };
+function Paging(_a) {
+    var className = _a.className, current = _a.current, _b = _a.resultsPerPage, resultsPerPage = _b === void 0 ? 10 : _b, onChange = _a.onChange, totalPages = _a.totalPages, rest = __rest(_a, ["className", "current", "resultsPerPage", "onChange", "totalPages"]);
+    return (jsx(RCPagination, __assign({ current: current, onChange: onChange, simple: true, pageSize: resultsPerPage, total: totalPages * resultsPerPage, className: cx('m-0 p-0 list-none text-white', className), locale: enUsLocale, prevIcon: jsx(Icon, { name: "mdi:chevron-left" }), nextIcon: jsx(Icon, { name: "mdi:chevron-right" }) }, rest)));
+}
+Paging.displayName = 'Paging';
+
+function ResultsPerPage(_a) {
+    var className = _a.className, onChange = _a.onChange, options = _a.options, label = _a.label, rest = __rest(_a, ["className", "onChange", "options", "label"]);
+    // Return nothing without options.
+    if (!options) {
+        return jsx(Fragment, {});
+    }
+    return (jsxs("div", __assign({ className: cx('m-0 p-0 border-none flex items-center justify-end', className) }, rest, { children: [jsx(Label, { className: "text-sm mr-2", transform: COPY_TRANSFORM.UPPERCASE, children: "Show" }), jsx(FormSelect, { id: label || 'ResultsPerPage', options: options.map(function (option) { return ({ label: option.toString(), value: option }); }), onChange: function (o) { return onChange(o.target.value); }, className: 'min-w-20' })] })));
+}
+ResultsPerPage.displayName = 'ResultsPerPage';
+
+function PagingInfo(_a) {
+    var className = _a.className, end = _a.end, searchTerm = _a.searchTerm, start = _a.start, totalResults = _a.totalResults, rest = __rest(_a, ["className", "end", "searchTerm", "start", "totalResults"]);
+    return (jsxs("div", __assign({ className: cx("m-0 p-0", className) }, rest, { children: ["Showing", " ", jsxs("strong", { children: [start, " - ", end] }), " ", "out of ", jsx("strong", { children: totalResults }), searchTerm && (jsxs(Fragment, { children: [" ", "for: ", jsx("em", { children: searchTerm })] }))] })));
+}
+PagingInfo.displayName = 'PagingInfo';
+
+function SearchBox(_a) {
+    var className = _a.className, onChange = _a.onChange, onSubmit = _a.onSubmit, rest = __rest(_a, ["className", "onChange", "onSubmit"]);
+    console.log('SearchBox: rest', rest);
+    return (jsx("div", { className: cx('m-0', className), children: jsxs("form", { onSubmit: function (e) { return onSubmit(e); }, className: "flex items-center", children: [jsx("div", { className: "flex-1", children: jsx(TextInput, { name: "SearchBoxInput", type: InputType.TEXT, placeholder: "Search now....", onChange: function (e) {
+                            var _a;
+                            onChange((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value);
+                        } }) }), jsx("div", { className: "pl-2", children: jsx(Button, { type: BTN_TYPES.SUBMIT, variant: BTN_VARIANTS.PRIMARY, children: "Search" }) })] }) }));
+}
+SearchBox.displayName = 'SearchBox';
+
+// import Sidebar from "../Sidebar";
+function Layout(_a) {
+    var className = _a.className, children = _a.children, header = _a.header, bodyContent = _a.bodyContent, bodyFooter = _a.bodyFooter, bodyHeader = _a.bodyHeader, sideContent = _a.sideContent;
+    var sidebarClasses = cx('hidden md:block fixed md:relative w-full h-full left-0 md:left-auto top-0 md:top-auto px-2 pb-4 md:pt-6 md:px-6 md:pb-auto md:pl-0', { 'hidden md:hidden': !sideContent });
+    return (jsxs("div", { className: cx('w-full flex flex-col', className), children: [jsx("div", { className: "m-auto p-4 md:py-0 md:px-6 max-w-7xl w-full", children: header }), jsxs("div", { className: cx('md:grid m-auto p-4 md:py-0 md:px-6 max-w-7xl w-full', {
+                    'md:grid-cols-search-layout': !sideContent,
+                    'md:grid-cols-search-layout-with-sidebar': sideContent,
+                }), children: [jsx("div", { className: sidebarClasses, children: sideContent }), jsxs("div", { className: cx('p-0 pt-2 md:p-6 md:pr-0', {
+                            'md:pl-0': !sideContent,
+                        }), children: [jsx("div", { className: "flex items-center justify-between", children: bodyHeader }), jsx("div", { className: "relative", children: children || bodyContent }), jsx("div", { className: "flex items-center justify-around", children: bodyFooter })] })] })] }));
+}
+Layout.displayName = 'Layout';
+
+function Results(_a) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    console.log('Results: rest', rest);
+    return (jsx("ul", __assign({ className: cx('relative grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4', className) }, rest, { children: children })));
+}
+Results.displayName = 'Results';
+
+/*
+Since Filter Values come in many different varieties, this helper
+encapsulates the logic for determining how to show the label of that
+filter in the UI.
+*/
+function getFilterValueDisplay(filterValue) {
+    if (filterValue === undefined || filterValue === null)
+        return '';
+    if (Object.prototype.hasOwnProperty.call(filterValue, 'name'))
+        return filterValue.name;
+    return String(filterValue);
+}
+
+function getFieldType(object, type) {
+    if (object)
+        return object[type];
+}
+function getRaw(object) {
+    return getFieldType(object, 'raw');
+}
+function getSnippet(object) {
+    return getFieldType(object, 'snippet');
+}
+function htmlEscape(str) {
+    if (!str)
+        return '';
+    return String(str)
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+function getEscapedField(maybeObject) {
+    // Fallback to raw values here, because non-string fields
+    // will not have a snippet fallback. Raw values MUST be html escaped.
+    var safeField = getSnippet(maybeObject) || htmlEscape(getRaw(maybeObject));
+    return Array.isArray(safeField) ? safeField.join(', ') : safeField;
+}
+
+function Result(_a) {
+    var className = _a.className, result = _a.result, 
+    // onClickLink,
+    as = _a.as, _b = _a.cardMap, cardMap = _b === void 0 ? {
+        idField: { fieldName: 'uuid' },
+        titleField: { fieldName: 'title' },
+        descriptionField: { fieldName: 'description' },
+        imageField: { fieldName: 'image' },
+    } : _b;
+    console.log('Result', cardMap);
+    // Pass fields into the relevant Card.
+    // const fields: any = formatResult(result);
+    var idField = cardMap.idField, titleField = cardMap.titleField, imageField = cardMap.imageField, videoField = cardMap.videoField, descriptionField = cardMap.descriptionField, metaDataFields = cardMap.metaDataFields, cardProps = cardMap.cardProps, rest = __rest(cardMap, ["idField", "titleField", "imageField", "videoField", "descriptionField", "metaDataFields", "cardProps"]);
+    console.log('rest', rest);
+    console.log('cardProps', cardProps);
+    var id = idField && getEscapedField(result[idField.fieldName]);
+    var title = titleField && getEscapedField(result[titleField.fieldName]);
+    var imageUrl = imageField && getEscapedField(result[imageField.fieldName]);
+    var videoUrl = videoField && videoField.formatter
+        ? videoField.formatter(getEscapedField(result[videoField.fieldName]))
+        : videoField && getEscapedField(result[videoField.fieldName]);
+    var description = descriptionField && getEscapedField(result[descriptionField.fieldName]);
+    var metaData = metaDataFields &&
+        metaDataFields.map(function (field) {
+            var value = getEscapedField(result[field.fieldName]);
+            if (field.formatter && typeof field.formatter === 'function') {
+                return field.formatter(value);
+            }
+        });
+    // console.log('Result metaData:', metaData);
+    // console.log('Result', cardMap);
+    var resultView = function () {
+        var imageData = {
+            src: imageUrl || '',
+            alt: title || '',
+            title: title || '',
+            width: 500,
+            height: 500,
+        };
+        var cardData = {
+            id: id,
+            title: title,
+            image: imageData,
+            video: videoUrl,
+            description: description,
+            metaData: metaData,
+            actions: cardMap.actionsData,
+            onClick: cardMap.onClickLink,
+        };
+        switch (as) {
+            case ResultAsTypes.cardMedia:
+                return jsx(Card, __assign({ variant: CardVariant.MEDIA, data: cardData }, cardProps));
+            case ResultAsTypes.cardVideo:
+                return jsx(Card, __assign({ variant: CardVariant.VIDEO, data: cardData }, cardProps, { isMuted: false }));
+            default:
+                return jsx(Card, __assign({ variant: CardVariant.BASIC, data: cardData }, cardProps));
+        }
+    };
+    return jsx("li", { className: cx('relative', className), children: resultView() });
+}
+Result.displayName = 'Result';
+
+function Search(_a) {
+    var _b = _a.showOptions, showOptions = _b === void 0 ? [10, 25, 50] : _b, sortOptions = _a.sortOptions, _c = _a.resultAs, resultAs = _c === void 0 ? ResultAsTypes.cardBasic : _c, ResultFieldMap = _a.ResultFieldMap, _d = _a.config, config = _d === void 0 ? {
+        filters: [],
+        facets: {},
+        searchFields: {},
+        resultsFields: {},
+    } : _d, _e = _a.facetDisplay, facetDisplay = _e === void 0 ? [] : _e, _f = _a.noSidebar, noSidebar = _f === void 0 ? false : _f, customConnector = _a.customConnector;
+    var connector = useMemo(function () {
+        var defaultConnector = {
+            host: process.env.REACT_ELASTICSEARCH_HOST,
+            index: process.env.REACT_ELASTICSEARCH_INDEX || '',
+            apiKey: process.env.REACT_ELASTICSEARCH_API_KEY,
+        };
+        return new ElasticSearchAPIConnector(customConnector || defaultConnector);
+    }, []);
+    var searchConfig = useMemo(function () {
+        return {
+            debug: true,
+            alwaysSearchOnInitialLoad: true,
+            apiConnector: connector,
+            hasA11yNotifications: true,
+            searchQuery: {
+                filters: config.filters || [],
+                search_fields: config.searchFields || {},
+                result_fields: config.resultsFields || {},
+                // disjunctiveFacets: ['created'],  // Make certain Facets into OR instead of AND
+                facets: config.facets,
+            },
+            autocompleteQuery: {
+                results: {
+                    search_fields: {
+                        title: {},
+                        description: {},
+                    },
+                    resultsPerPage: 5,
+                    result_fields: {
+                        title: {
+                            snippet: {
+                                size: 100,
+                                fallback: true,
+                            },
+                        },
+                    },
+                },
+                // TODO: Implement suggestions
+                // suggestions: {
+                //   types: {
+                //     documents: {
+                //       fields: ['title'],
+                //     },
+                //   },
+                //   size: 4,
+                // },
+            },
+        };
+    }, [config]);
+    return (jsx(SearchProvider, { config: searchConfig, children: jsx(WithSearch, { mapContextToProps: function (_a) {
+                var wasSearched = _a.wasSearched;
+                return ({
+                    wasSearched: wasSearched,
+                });
+            }, children: function (_a) {
+                var wasSearched = _a.wasSearched;
+                return (jsx("div", { className: "App", children: jsx(ErrorBoundary, { children: jsx(Layout, { header: jsx(SearchBox$1, { view: SearchBox }), sideContent: !noSidebar && (jsxs("div", { children: [wasSearched && jsx(Sorting$1, { label: 'Sort by', sortOptions: sortOptions, view: Sorting }), facetDisplay.map(function (_a) {
+                                        var field = _a.field, label = _a.label, view = _a.view;
+                                        return (jsx(Facet, { field: field, label: label, view: view }, field));
+                                    })] })), bodyContent: jsx(Results$1, { shouldTrackClickThrough: false, resultView: function (props) { return jsx(Result, __assign({}, props, { as: resultAs, cardMap: ResultFieldMap })); }, className: "list-none p-0 m-0", view: Results }), bodyHeader: jsxs(React.Fragment, { children: [wasSearched && jsx(PagingInfo$1, { view: PagingInfo }), wasSearched && jsx(ResultsPerPage$1, { view: ResultsPerPage, options: showOptions })] }), bodyFooter: jsx(Paging$1, { view: Paging }), noSidebar: noSidebar }) }) }));
+            } }) }));
+}
+
+function SingleSelectFacet(_a) {
+    var className = _a.className, label = _a.label, onChange = _a.onChange, options = _a.options;
+    var selectBoxOptions = options.map(function (option) {
+        return {
+            value: option.value,
+            label: "".concat(option.value, " (").concat(option.count, ")"),
+        };
+    });
+    return (jsxs("fieldset", { className: cx('m-0 p-0 mt-4 mb-2 border-none', className), children: [jsx(Label, { className: "text-sm", transform: COPY_TRANSFORM.UPPERCASE, children: label }), jsx(FormSelect, { id: label, options: selectBoxOptions, onChange: function (o) { return onChange(o.target.value); } })] }));
+}
+SingleSelectFacet.displayName = 'SingleSelectFacet';
+
+function SingleLinksFacet(_a) {
+    var className = _a.className, label = _a.label, onRemove = _a.onRemove, onSelect = _a.onSelect, options = _a.options;
+    var value = options.filter(function (o) { return o.selected; }).map(function (o) { return o.value; })[0];
+    return (jsx("fieldset", { className: cx('m-0 p-0 mt-4 mb-2 border-none', className), children: jsxs("div", { children: [jsx(Label, { className: "text-sm", transform: COPY_TRANSFORM.UPPERCASE, children: label }), jsxs("ul", { className: "ul list-none p-0", children: [value && (jsxs("li", { className: "m-0 flex justify-between items-center flex-1", children: [getFilterValueDisplay(value), jsx("span", { className: "ml-1 px-1", children: jsx(Button, { onClick: function () { return onRemove(value); }, children: jsx(Icon, { name: "mdi:close" }) }) })] })), !value &&
+                            options.map(function (option) {
+                                var filterValue = getFilterValueDisplay(option.value);
+                                return (jsxs("li", { className: "m-0 flex justify-between", children: [jsx("a", { className: "no-underline text-sm visited:text-body-text", "data-transaction-name": "facet - ".concat(label), href: "/", onClick: function (e) {
+                                                e.preventDefault();
+                                                onSelect(option.value);
+                                            }, children: jsx("label", { className: "label pl-0 leading-none text-sm", children: filterValue }) }), jsx(Copy, { as: COPY_TAG.SPAN, size: COPY_SIZE.SMALL, children: option.count.toLocaleString('en') })] }, filterValue));
+                            })] })] }) }));
+}
+SingleLinksFacet.displayName = 'SingleLinksFacet';
+
+function MultiCheckboxFacet(_a) {
+    var className = _a.className, label = _a.label, onMoreClick = _a.onMoreClick, onRemove = _a.onRemove, onSelect = _a.onSelect, options = _a.options, showMore = _a.showMore, showSearch = _a.showSearch, onSearch = _a.onSearch, searchPlaceholder = _a.searchPlaceholder;
+    if (!options) {
+        return jsx(Fragment, { children: "Options required" });
+    }
+    return (jsxs("fieldset", { className: cx('m-0 p-0 mt-4 mb-2 border-none', className), children: [jsx(Label, { className: "text-sm", transform: COPY_TRANSFORM.UPPERCASE, children: label }), showSearch && (jsx("div", { className: "mt-1", children: jsx(TextInput, { type: InputType.SEARCH, placeholder: searchPlaceholder || 'Search', onChange: function (e) {
+                        onSearch(e.target.value);
+                    } }) })), jsxs("div", { className: "my-4", children: [(options === null || options === void 0 ? void 0 : options.length) < 1 && jsx("div", { children: "No matching options" }), options === null || options === void 0 ? void 0 : options.map(function (option) {
+                        var checked = option.selected;
+                        var value = option.value;
+                        var filterDisplayValue = getFilterValueDisplay(value);
+                        return (jsxs("div", { className: "flex justify-between pb-2", children: [jsx(Checkbox, { id: "facet_".concat(label).concat(filterDisplayValue), "data-transaction-name": "facet - ".concat(label), checked: checked, onChange: function () { return (checked ? onRemove(value) : onSelect(value)); }, label: filterDisplayValue }), jsx(Copy, { as: COPY_TAG.SPAN, size: COPY_SIZE.SMALL, children: option.count.toLocaleString('en') })] }, filterDisplayValue));
+                    })] }), showMore && (jsx(Button, { size: BTN_SIZES.SMALL, variant: BTN_VARIANTS.TERTIARY, onClick: onMoreClick, "aria-label": "Show more options", children: "+ More" }))] }));
+}
+MultiCheckboxFacet.displayName = 'MultiCheckboxFacet';
+
+export { BTN_SIZES, BTN_TYPES, BTN_VARIANTS, Blockquote, Button, COPY_ALIGN, COPY_CONTEXTUAL, COPY_SIZE, COPY_TAG, COPY_TRANSFORM, CPL_SPACING, CRL_SIZE, Card, CardVariant, Container, ContentPageLayout, ContentRowsLayout, Copy, FIELD_TYPES, Form, FormField, HEADING_ALIGN, HEADING_TAGS, HEADING_TRANSFORM, Heading, Hr, Icon, Image, Link, List, ListItem, ListTag, Loader, MultiCheckboxFacet, Notice, ResultAsTypes, Search, SingleLinksFacet, SingleSelectFacet, Variants };

package/dist/index.js

@@ -6,6 +6,12 @@ var react = require('@iconify/react');
 var React = require('react');
 var HoverVideoPlayer = require('react-hover-video-player');
 var reactHookForm = require('react-hook-form');
+require('@elastic/eui/dist/eui_theme_light.css');
+var ElasticSearchAPIConnector = require('@elastic/search-ui-elasticsearch-connector');
+var reactSearchUi = require('@elastic/react-search-ui');
+require('@elastic/react-search-ui-views/lib/styles/styles.css');
+var RCPagination = require('rc-pagination');
+var enUsLocale = require('rc-pagination/lib/locale/en_US');
 
 var Blockquote = function (_a) {
     var text = _a.text, citation = _a.citation, className = _a.className, citationAttribute = _a.citationAttribute, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b;
@@ -797,6 +803,299 @@ exports.CardVariant = void 0;
     CardVariant["VIDEO"] = "video";
 })(exports.CardVariant || (exports.CardVariant = {}));
 
+exports.ResultAsTypes = void 0;
+(function (ResultAsTypes) {
+    ResultAsTypes["cardBasic"] = "cardBasic";
+    ResultAsTypes["cardMedia"] = "cardMedia";
+    ResultAsTypes["cardVideo"] = "cardVideo";
+})(exports.ResultAsTypes || (exports.ResultAsTypes = {}));
+
+function Sorting(_a) {
+    var className = _a.className, label = _a.label, onChange = _a.onChange, options = _a.options;
+    return (jsxRuntime.jsxs("div", { className: cx('m-0 p-0 mb-2 border-none', className), children: [jsxRuntime.jsx(Label, { className: "text-sm", transform: exports.COPY_TRANSFORM.UPPERCASE, children: label }), jsxRuntime.jsx(FormSelect, { id: label || 'Sorting', options: options, onChange: function (o) { return onChange(o.target.value); } })] }));
+}
+Sorting.displayName = 'Sorting';
+
+// import { BTN_SIZES, BTN_VARIANTS, Button, Icon } from '../../../../components';
+// const itemRender = (current: number, type: string, element: React.ReactNode, ...rest: any) => {
+//   console.log('itemRender', rest);
+//   if (type === 'page') {
+//     return <a href={`#${current}`}>{current}</a>;
+//   }
+//   if (type === 'prev') {
+//     return <Button variant={BTN_VARIANTS.PRIMARY} size={BTN_SIZES.SMALL}><Icon name="mdi:chevron-left" /></Button>;
+//   }
+//   if (type === 'next') {
+//     return <button type="button">Next</button>;
+//   }
+//   return element;
+// };
+function Paging(_a) {
+    var className = _a.className, current = _a.current, _b = _a.resultsPerPage, resultsPerPage = _b === void 0 ? 10 : _b, onChange = _a.onChange, totalPages = _a.totalPages, rest = __rest(_a, ["className", "current", "resultsPerPage", "onChange", "totalPages"]);
+    return (jsxRuntime.jsx(RCPagination, __assign({ current: current, onChange: onChange, simple: true, pageSize: resultsPerPage, total: totalPages * resultsPerPage, className: cx('m-0 p-0 list-none text-white', className), locale: enUsLocale, prevIcon: jsxRuntime.jsx(Icon, { name: "mdi:chevron-left" }), nextIcon: jsxRuntime.jsx(Icon, { name: "mdi:chevron-right" }) }, rest)));
+}
+Paging.displayName = 'Paging';
+
+function ResultsPerPage(_a) {
+    var className = _a.className, onChange = _a.onChange, options = _a.options, label = _a.label, rest = __rest(_a, ["className", "onChange", "options", "label"]);
+    // Return nothing without options.
+    if (!options) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    }
+    return (jsxRuntime.jsxs("div", __assign({ className: cx('m-0 p-0 border-none flex items-center justify-end', className) }, rest, { children: [jsxRuntime.jsx(Label, { className: "text-sm mr-2", transform: exports.COPY_TRANSFORM.UPPERCASE, children: "Show" }), jsxRuntime.jsx(FormSelect, { id: label || 'ResultsPerPage', options: options.map(function (option) { return ({ label: option.toString(), value: option }); }), onChange: function (o) { return onChange(o.target.value); }, className: 'min-w-20' })] })));
+}
+ResultsPerPage.displayName = 'ResultsPerPage';
+
+function PagingInfo(_a) {
+    var className = _a.className, end = _a.end, searchTerm = _a.searchTerm, start = _a.start, totalResults = _a.totalResults, rest = __rest(_a, ["className", "end", "searchTerm", "start", "totalResults"]);
+    return (jsxRuntime.jsxs("div", __assign({ className: cx("m-0 p-0", className) }, rest, { children: ["Showing", " ", jsxRuntime.jsxs("strong", { children: [start, " - ", end] }), " ", "out of ", jsxRuntime.jsx("strong", { children: totalResults }), searchTerm && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" ", "for: ", jsxRuntime.jsx("em", { children: searchTerm })] }))] })));
+}
+PagingInfo.displayName = 'PagingInfo';
+
+function SearchBox(_a) {
+    var className = _a.className, onChange = _a.onChange, onSubmit = _a.onSubmit, rest = __rest(_a, ["className", "onChange", "onSubmit"]);
+    console.log('SearchBox: rest', rest);
+    return (jsxRuntime.jsx("div", { className: cx('m-0', className), children: jsxRuntime.jsxs("form", { onSubmit: function (e) { return onSubmit(e); }, className: "flex items-center", children: [jsxRuntime.jsx("div", { className: "flex-1", children: jsxRuntime.jsx(TextInput, { name: "SearchBoxInput", type: InputType.TEXT, placeholder: "Search now....", onChange: function (e) {
+                            var _a;
+                            onChange((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value);
+                        } }) }), jsxRuntime.jsx("div", { className: "pl-2", children: jsxRuntime.jsx(Button, { type: exports.BTN_TYPES.SUBMIT, variant: exports.BTN_VARIANTS.PRIMARY, children: "Search" }) })] }) }));
+}
+SearchBox.displayName = 'SearchBox';
+
+// import Sidebar from "../Sidebar";
+function Layout(_a) {
+    var className = _a.className, children = _a.children, header = _a.header, bodyContent = _a.bodyContent, bodyFooter = _a.bodyFooter, bodyHeader = _a.bodyHeader, sideContent = _a.sideContent;
+    var sidebarClasses = cx('hidden md:block fixed md:relative w-full h-full left-0 md:left-auto top-0 md:top-auto px-2 pb-4 md:pt-6 md:px-6 md:pb-auto md:pl-0', { 'hidden md:hidden': !sideContent });
+    return (jsxRuntime.jsxs("div", { className: cx('w-full flex flex-col', className), children: [jsxRuntime.jsx("div", { className: "m-auto p-4 md:py-0 md:px-6 max-w-7xl w-full", children: header }), jsxRuntime.jsxs("div", { className: cx('md:grid m-auto p-4 md:py-0 md:px-6 max-w-7xl w-full', {
+                    'md:grid-cols-search-layout': !sideContent,
+                    'md:grid-cols-search-layout-with-sidebar': sideContent,
+                }), children: [jsxRuntime.jsx("div", { className: sidebarClasses, children: sideContent }), jsxRuntime.jsxs("div", { className: cx('p-0 pt-2 md:p-6 md:pr-0', {
+                            'md:pl-0': !sideContent,
+                        }), children: [jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: bodyHeader }), jsxRuntime.jsx("div", { className: "relative", children: children || bodyContent }), jsxRuntime.jsx("div", { className: "flex items-center justify-around", children: bodyFooter })] })] })] }));
+}
+Layout.displayName = 'Layout';
+
+function Results(_a) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    console.log('Results: rest', rest);
+    return (jsxRuntime.jsx("ul", __assign({ className: cx('relative grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4', className) }, rest, { children: children })));
+}
+Results.displayName = 'Results';
+
+/*
+Since Filter Values come in many different varieties, this helper
+encapsulates the logic for determining how to show the label of that
+filter in the UI.
+*/
+function getFilterValueDisplay(filterValue) {
+    if (filterValue === undefined || filterValue === null)
+        return '';
+    if (Object.prototype.hasOwnProperty.call(filterValue, 'name'))
+        return filterValue.name;
+    return String(filterValue);
+}
+
+function getFieldType(object, type) {
+    if (object)
+        return object[type];
+}
+function getRaw(object) {
+    return getFieldType(object, 'raw');
+}
+function getSnippet(object) {
+    return getFieldType(object, 'snippet');
+}
+function htmlEscape(str) {
+    if (!str)
+        return '';
+    return String(str)
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+function getEscapedField(maybeObject) {
+    // Fallback to raw values here, because non-string fields
+    // will not have a snippet fallback. Raw values MUST be html escaped.
+    var safeField = getSnippet(maybeObject) || htmlEscape(getRaw(maybeObject));
+    return Array.isArray(safeField) ? safeField.join(', ') : safeField;
+}
+
+function Result(_a) {
+    var className = _a.className, result = _a.result, 
+    // onClickLink,
+    as = _a.as, _b = _a.cardMap, cardMap = _b === void 0 ? {
+        idField: { fieldName: 'uuid' },
+        titleField: { fieldName: 'title' },
+        descriptionField: { fieldName: 'description' },
+        imageField: { fieldName: 'image' },
+    } : _b;
+    console.log('Result', cardMap);
+    // Pass fields into the relevant Card.
+    // const fields: any = formatResult(result);
+    var idField = cardMap.idField, titleField = cardMap.titleField, imageField = cardMap.imageField, videoField = cardMap.videoField, descriptionField = cardMap.descriptionField, metaDataFields = cardMap.metaDataFields, cardProps = cardMap.cardProps, rest = __rest(cardMap, ["idField", "titleField", "imageField", "videoField", "descriptionField", "metaDataFields", "cardProps"]);
+    console.log('rest', rest);
+    console.log('cardProps', cardProps);
+    var id = idField && getEscapedField(result[idField.fieldName]);
+    var title = titleField && getEscapedField(result[titleField.fieldName]);
+    var imageUrl = imageField && getEscapedField(result[imageField.fieldName]);
+    var videoUrl = videoField && videoField.formatter
+        ? videoField.formatter(getEscapedField(result[videoField.fieldName]))
+        : videoField && getEscapedField(result[videoField.fieldName]);
+    var description = descriptionField && getEscapedField(result[descriptionField.fieldName]);
+    var metaData = metaDataFields &&
+        metaDataFields.map(function (field) {
+            var value = getEscapedField(result[field.fieldName]);
+            if (field.formatter && typeof field.formatter === 'function') {
+                return field.formatter(value);
+            }
+        });
+    // console.log('Result metaData:', metaData);
+    // console.log('Result', cardMap);
+    var resultView = function () {
+        var imageData = {
+            src: imageUrl || '',
+            alt: title || '',
+            title: title || '',
+            width: 500,
+            height: 500,
+        };
+        var cardData = {
+            id: id,
+            title: title,
+            image: imageData,
+            video: videoUrl,
+            description: description,
+            metaData: metaData,
+            actions: cardMap.actionsData,
+            onClick: cardMap.onClickLink,
+        };
+        switch (as) {
+            case exports.ResultAsTypes.cardMedia:
+                return jsxRuntime.jsx(Card, __assign({ variant: exports.CardVariant.MEDIA, data: cardData }, cardProps));
+            case exports.ResultAsTypes.cardVideo:
+                return jsxRuntime.jsx(Card, __assign({ variant: exports.CardVariant.VIDEO, data: cardData }, cardProps, { isMuted: false }));
+            default:
+                return jsxRuntime.jsx(Card, __assign({ variant: exports.CardVariant.BASIC, data: cardData }, cardProps));
+        }
+    };
+    return jsxRuntime.jsx("li", { className: cx('relative', className), children: resultView() });
+}
+Result.displayName = 'Result';
+
+function Search(_a) {
+    var _b = _a.showOptions, showOptions = _b === void 0 ? [10, 25, 50] : _b, sortOptions = _a.sortOptions, _c = _a.resultAs, resultAs = _c === void 0 ? exports.ResultAsTypes.cardBasic : _c, ResultFieldMap = _a.ResultFieldMap, _d = _a.config, config = _d === void 0 ? {
+        filters: [],
+        facets: {},
+        searchFields: {},
+        resultsFields: {},
+    } : _d, _e = _a.facetDisplay, facetDisplay = _e === void 0 ? [] : _e, _f = _a.noSidebar, noSidebar = _f === void 0 ? false : _f, customConnector = _a.customConnector;
+    var connector = React.useMemo(function () {
+        var defaultConnector = {
+            host: process.env.REACT_ELASTICSEARCH_HOST,
+            index: process.env.REACT_ELASTICSEARCH_INDEX || '',
+            apiKey: process.env.REACT_ELASTICSEARCH_API_KEY,
+        };
+        return new ElasticSearchAPIConnector(customConnector || defaultConnector);
+    }, []);
+    var searchConfig = React.useMemo(function () {
+        return {
+            debug: true,
+            alwaysSearchOnInitialLoad: true,
+            apiConnector: connector,
+            hasA11yNotifications: true,
+            searchQuery: {
+                filters: config.filters || [],
+                search_fields: config.searchFields || {},
+                result_fields: config.resultsFields || {},
+                // disjunctiveFacets: ['created'],  // Make certain Facets into OR instead of AND
+                facets: config.facets,
+            },
+            autocompleteQuery: {
+                results: {
+                    search_fields: {
+                        title: {},
+                        description: {},
+                    },
+                    resultsPerPage: 5,
+                    result_fields: {
+                        title: {
+                            snippet: {
+                                size: 100,
+                                fallback: true,
+                            },
+                        },
+                    },
+                },
+                // TODO: Implement suggestions
+                // suggestions: {
+                //   types: {
+                //     documents: {
+                //       fields: ['title'],
+                //     },
+                //   },
+                //   size: 4,
+                // },
+            },
+        };
+    }, [config]);
+    return (jsxRuntime.jsx(reactSearchUi.SearchProvider, { config: searchConfig, children: jsxRuntime.jsx(reactSearchUi.WithSearch, { mapContextToProps: function (_a) {
+                var wasSearched = _a.wasSearched;
+                return ({
+                    wasSearched: wasSearched,
+                });
+            }, children: function (_a) {
+                var wasSearched = _a.wasSearched;
+                return (jsxRuntime.jsx("div", { className: "App", children: jsxRuntime.jsx(reactSearchUi.ErrorBoundary, { children: jsxRuntime.jsx(Layout, { header: jsxRuntime.jsx(reactSearchUi.SearchBox, { view: SearchBox }), sideContent: !noSidebar && (jsxRuntime.jsxs("div", { children: [wasSearched && jsxRuntime.jsx(reactSearchUi.Sorting, { label: 'Sort by', sortOptions: sortOptions, view: Sorting }), facetDisplay.map(function (_a) {
+                                        var field = _a.field, label = _a.label, view = _a.view;
+                                        return (jsxRuntime.jsx(reactSearchUi.Facet, { field: field, label: label, view: view }, field));
+                                    })] })), bodyContent: jsxRuntime.jsx(reactSearchUi.Results, { shouldTrackClickThrough: false, resultView: function (props) { return jsxRuntime.jsx(Result, __assign({}, props, { as: resultAs, cardMap: ResultFieldMap })); }, className: "list-none p-0 m-0", view: Results }), bodyHeader: jsxRuntime.jsxs(React.Fragment, { children: [wasSearched && jsxRuntime.jsx(reactSearchUi.PagingInfo, { view: PagingInfo }), wasSearched && jsxRuntime.jsx(reactSearchUi.ResultsPerPage, { view: ResultsPerPage, options: showOptions })] }), bodyFooter: jsxRuntime.jsx(reactSearchUi.Paging, { view: Paging }), noSidebar: noSidebar }) }) }));
+            } }) }));
+}
+
+function SingleSelectFacet(_a) {
+    var className = _a.className, label = _a.label, onChange = _a.onChange, options = _a.options;
+    var selectBoxOptions = options.map(function (option) {
+        return {
+            value: option.value,
+            label: "".concat(option.value, " (").concat(option.count, ")"),
+        };
+    });
+    return (jsxRuntime.jsxs("fieldset", { className: cx('m-0 p-0 mt-4 mb-2 border-none', className), children: [jsxRuntime.jsx(Label, { className: "text-sm", transform: exports.COPY_TRANSFORM.UPPERCASE, children: label }), jsxRuntime.jsx(FormSelect, { id: label, options: selectBoxOptions, onChange: function (o) { return onChange(o.target.value); } })] }));
+}
+SingleSelectFacet.displayName = 'SingleSelectFacet';
+
+function SingleLinksFacet(_a) {
+    var className = _a.className, label = _a.label, onRemove = _a.onRemove, onSelect = _a.onSelect, options = _a.options;
+    var value = options.filter(function (o) { return o.selected; }).map(function (o) { return o.value; })[0];
+    return (jsxRuntime.jsx("fieldset", { className: cx('m-0 p-0 mt-4 mb-2 border-none', className), children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Label, { className: "text-sm", transform: exports.COPY_TRANSFORM.UPPERCASE, children: label }), jsxRuntime.jsxs("ul", { className: "ul list-none p-0", children: [value && (jsxRuntime.jsxs("li", { className: "m-0 flex justify-between items-center flex-1", children: [getFilterValueDisplay(value), jsxRuntime.jsx("span", { className: "ml-1 px-1", children: jsxRuntime.jsx(Button, { onClick: function () { return onRemove(value); }, children: jsxRuntime.jsx(Icon, { name: "mdi:close" }) }) })] })), !value &&
+                            options.map(function (option) {
+                                var filterValue = getFilterValueDisplay(option.value);
+                                return (jsxRuntime.jsxs("li", { className: "m-0 flex justify-between", children: [jsxRuntime.jsx("a", { className: "no-underline text-sm visited:text-body-text", "data-transaction-name": "facet - ".concat(label), href: "/", onClick: function (e) {
+                                                e.preventDefault();
+                                                onSelect(option.value);
+                                            }, children: jsxRuntime.jsx("label", { className: "label pl-0 leading-none text-sm", children: filterValue }) }), jsxRuntime.jsx(Copy, { as: exports.COPY_TAG.SPAN, size: exports.COPY_SIZE.SMALL, children: option.count.toLocaleString('en') })] }, filterValue));
+                            })] })] }) }));
+}
+SingleLinksFacet.displayName = 'SingleLinksFacet';
+
+function MultiCheckboxFacet(_a) {
+    var className = _a.className, label = _a.label, onMoreClick = _a.onMoreClick, onRemove = _a.onRemove, onSelect = _a.onSelect, options = _a.options, showMore = _a.showMore, showSearch = _a.showSearch, onSearch = _a.onSearch, searchPlaceholder = _a.searchPlaceholder;
+    if (!options) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Options required" });
+    }
+    return (jsxRuntime.jsxs("fieldset", { className: cx('m-0 p-0 mt-4 mb-2 border-none', className), children: [jsxRuntime.jsx(Label, { className: "text-sm", transform: exports.COPY_TRANSFORM.UPPERCASE, children: label }), showSearch && (jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx(TextInput, { type: InputType.SEARCH, placeholder: searchPlaceholder || 'Search', onChange: function (e) {
+                        onSearch(e.target.value);
+                    } }) })), jsxRuntime.jsxs("div", { className: "my-4", children: [(options === null || options === void 0 ? void 0 : options.length) < 1 && jsxRuntime.jsx("div", { children: "No matching options" }), options === null || options === void 0 ? void 0 : options.map(function (option) {
+                        var checked = option.selected;
+                        var value = option.value;
+                        var filterDisplayValue = getFilterValueDisplay(value);
+                        return (jsxRuntime.jsxs("div", { className: "flex justify-between pb-2", children: [jsxRuntime.jsx(Checkbox, { id: "facet_".concat(label).concat(filterDisplayValue), "data-transaction-name": "facet - ".concat(label), checked: checked, onChange: function () { return (checked ? onRemove(value) : onSelect(value)); }, label: filterDisplayValue }), jsxRuntime.jsx(Copy, { as: exports.COPY_TAG.SPAN, size: exports.COPY_SIZE.SMALL, children: option.count.toLocaleString('en') })] }, filterDisplayValue));
+                    })] }), showMore && (jsxRuntime.jsx(Button, { size: exports.BTN_SIZES.SMALL, variant: exports.BTN_VARIANTS.TERTIARY, onClick: onMoreClick, "aria-label": "Show more options", children: "+ More" }))] }));
+}
+MultiCheckboxFacet.displayName = 'MultiCheckboxFacet';
+
 exports.Blockquote = Blockquote;
 exports.Button = Button;
 exports.Card = Card;
@@ -814,4 +1113,8 @@ exports.Link = Link;
 exports.List = List;
 exports.ListItem = ListItem;
 exports.Loader = Loader;
+exports.MultiCheckboxFacet = MultiCheckboxFacet;
 exports.Notice = Notice;
+exports.Search = Search;
+exports.SingleLinksFacet = SingleLinksFacet;
+exports.SingleSelectFacet = SingleSelectFacet;

package/dist/types/fui/features/Search/Search.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import '@elastic/eui/dist/eui_theme_light.css';
 import '@elastic/react-search-ui-views/lib/styles/styles.css';
 import { Props } from './Search.types';
-export default function Search({ showOptions, resultAs, ResultFieldMap, config, facetDisplay, noSidebar, }: Props): React.ReactElement;
+export default function Search({ showOptions, sortOptions, resultAs, ResultFieldMap, config, facetDisplay, noSidebar, customConnector, }: Props): React.ReactElement;

package/dist/types/fui/features/Search/Search.types.d.ts

@@ -13,6 +13,7 @@ interface FacetDisplay {
 export interface Props {
     custom: string;
     showOptions: number[];
+    sortOptions?: any[];
     resultAs: ResultAsTypes;
     ResultFieldMap?: cardMap;
     config: {
@@ -23,5 +24,10 @@ export interface Props {
     };
     facetDisplay: FacetDisplay[];
     noSidebar: boolean;
+    customConnector?: {
+        host: string;
+        index: string;
+        apiKey: string;
+    };
 }
 export {};

package/dist/types/fui/features/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Search } from './Search';
+export { default as SingleSelectFacet } from './Search/views/SingleSelectFacet';
+export { default as SingleLinksFacet } from './Search/views/SingleLinksFacet';
+export { default as MultiCheckboxFacet } from './Search/views/MultiCheckboxFacet';
+export { ResultAsTypes } from './Search/Search.types';
+export type { Props as SearchProps } from './Search/Search.types';

package/dist/types/fui/index.d.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './features';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4alldigital/foundation-ui--gamma",
-  "version": "1.31.8",
+  "version": "1.31.10",
   "description": "Foundation UI Component library with GAMMA theme. ",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -25,7 +25,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c888df3e4af003fe6acec10ccc9b5eae755eab5d",
+  "gitHead": "c1252ee35b5852b5399b0aaae4187eebdeeeaa92",
   "dependencies": {
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "^94.1.0",