@livetiles/reach-components-react 0.4.0-preview.32 → 0.4.0-preview.326

package/AuthorFilter.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export declare const AuthorToolbarFilter: FC;
+export declare const AuthorFilter: FC<{
+    className?: string;
+}>;

package/ChannelFilter.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface ChannelFilterProps {
+    channels?: string[];
+    className?: string;
+}
+export declare const ChannelFilter: FC<ChannelFilterProps>;
+export declare const ChannelToolbarFilter: FC<ChannelFilterProps>;

package/ClearAllFiltersButton.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export interface ClearAllFiltersButtonProps {
+    onClick: () => void;
+}
+export declare const ClearAllFiltersButton: FC<ClearAllFiltersButtonProps>;

package/EmojiPicker.esm.esm.js

@@ -10,7 +10,6 @@ import 'react-dom';
 import 'office-ui-fabric-core/dist/css/fabric.css';
 import 'office-ui-fabric-react/lib/common/DirectionalHint';
 import 'react-dom/server';
-import 'office-ui-fabric-react/lib/Spinner';
 
 function _typeof(obj) {
   "@babel/helpers - typeof";

package/EmptyFilterSearchResult.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const EmptyFilterSearchResult: FC;

package/FilterContext.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { IndexableFilterDefinition } from '@livetiles/reach/feature/content';
+export interface FilterProps {
+    filter: IndexableFilterDefinition;
+    onChange: (filter: Partial<IndexableFilterDefinition> | null) => void;
+}
+export declare const FilterContext: import("react").Context<FilterProps>;
+export declare const FilterContextProvider: FC<{
+    filter: IndexableFilterDefinition;
+    onChange: (filter: Partial<IndexableFilterDefinition> | null) => void;
+}>;

package/KeywordsFilter.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export declare const KeywordsToolbarFilter: FC;
+export declare const KeywordsFilter: FC<{
+    className?: string;
+}>;

package/NewsGrid.d.ts

@@ -1,12 +1,15 @@
 import { FC } from 'react';
-import { NewsFilterDefinition } from '@livetiles/reach/feature/content';
 import { NewsItem } from '@livetiles/reach/util/common';
+import { LibNewsFilterDefinition } from './common/filter/LibNewsFilterDefinition';
 export interface NewsGridProps {
-    filter?: NewsFilterDefinition;
+    filter?: LibNewsFilterDefinition;
+    searchText?: string;
     hidePagination?: boolean;
     columnCount?: number;
     rowCount?: number;
     onItemClick?: (item: NewsItem, itemUrl?: string, isTitleClicked?: boolean) => unknown;
+    onChannelClick?: (channel: string) => unknown;
+    onKeywordClick?: (keyword: string) => unknown;
     className?: string;
 }
 export declare const NewsGrid: FC<NewsGridProps>;

package/NewsGridCard.d.ts

@@ -6,6 +6,8 @@ export interface NewsGridCardProps {
     openTargetInNewWindow?: boolean;
     onCardClick?: (event: React.MouseEvent<unknown>) => unknown;
     onTitleClick?: (event: React.MouseEvent<unknown>) => unknown;
+    onChannelClick?: (channel: string) => unknown;
+    onKeywordClick?: (keyword: string) => unknown;
     className?: string;
 }
 export declare const NewsGridCard: FC<NewsGridCardProps>;

package/NewsHero.d.ts

@@ -1,10 +1,13 @@
 import { FC } from 'react';
+import { FilterWithLogicalOperator } from '@livetiles/reach/feature/content';
 import { NewsItem } from '@livetiles/reach/util/common';
-import { ChannelsFilterDefinition, KeywordsFilterDefinition } from '@livetiles/reach/feature/content';
+export interface NewsHeroFilterProps {
+    channels?: string | FilterWithLogicalOperator;
+    keywords?: string | FilterWithLogicalOperator;
+    pageSize?: number;
+}
 export interface NewsHeroProps {
-    filter?: ChannelsFilterDefinition & KeywordsFilterDefinition & {
-        pageSize?: number;
-    };
+    filter?: NewsHeroFilterProps;
     disableAutoplay?: boolean;
     autoplayInterval?: number;
     onItemClick?: (item: NewsItem, itemUrl?: string) => unknown;

package/NewsItemPreviewContextProvider.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export declare const NewsItemPreviewContextProvider: FC<{
+    itemId: string;
+    versionId?: string;
+}>;

package/NewsList.d.ts

@@ -1,14 +1,17 @@
 import { FC } from 'react';
 import { NewsItem } from '@livetiles/reach/util/common';
-import { NewsFilterDefinition } from '@livetiles/reach/feature/content';
+import { LibNewsFilterDefinition } from './common/filter/LibNewsFilterDefinition';
 export declare enum ItemLayoutMode {
     Default = "default",
     Compact = "compact"
 }
 export interface NewsListProps {
-    filter?: NewsFilterDefinition;
+    filter?: LibNewsFilterDefinition;
+    searchText?: string;
     itemLayoutMode?: ItemLayoutMode;
     onItemClick?: (item: NewsItem, itemUrl?: string, isTitleClicked?: boolean) => unknown;
+    onChannelClick?: (channel: string) => unknown;
+    onKeywordClick?: (keyword: string) => unknown;
     hidePlaceholderIfNoBanner?: boolean;
     hidePagination?: boolean;
     pageSize?: number;

package/PublishingDateFilter.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export declare const PublishingDateToolbarFilter: FC;
+export declare const PublishingDateFilter: FC<{
+    className?: string;
+}>;

package/README.md

@@ -1,7 +1,24 @@
-# reach-components-react
+# Reach Components React
 
-This library was generated with [Nx](https://nx.dev).
+The Reach Components for React allows one to render data from LiveTiles Reach in custom third party web applications.
 
-## Running unit tests
+## Getting Started
 
-Run `nx test reach-components-react` to execute the unit tests via [Jest](https://jestjs.io).
+`$ npm i reach-components-react`
+
+```
+const App = () => {
+    const token = "A JWT bearer token";
+    const subscriptionId = "the subscription ID";
+    const itemId = "some item ID";
+
+    return (
+        <ReachContextProvider
+          subscriptionId={subscriptionId}
+          onRequestToken={async () => token}
+        >
+          <NewsDetail itemId={itemId} />
+        </ReachContextProvider>
+    )
+}
+```

package/ToolbarFilterModal.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { FilterProps } from './FilterContext';
+export interface ToolbarFilterModalProps extends FilterProps {
+    isOpen?: boolean;
+    onDismiss?: () => void;
+    className?: string;
+}
+export declare const ToolbarFilterModal: FC<ToolbarFilterModalProps>;

package/ToolbarFilterModalButton.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { FilterProps } from './FilterContext';
+export declare const ToolbarFilterModalButton: FC<FilterProps>;

package/ToolbarFilterPanel.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { FilterProps } from './FilterContext';
+export declare const ToolbarFilterPanel: FC<FilterProps>;

package/ToolbarFilterSearch.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export declare const FilterSearch: FC<{
+    className?: string;
+}>;
+export declare const ToolbarFilterSearch: import("styled-components").StyledComponent<FC<{
+    className?: string;
+}>, any, {}, never>;

package/VerticalFilterPanel.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { FilterProps } from './FilterContext';
+export interface VerticalFilterPanelProps extends FilterProps {
+    onDismiss?: () => void;
+    className?: string;
+}
+export declare const VerticalFilterPanel: FC<VerticalFilterPanelProps>;

package/ar-dz.async.esm.esm.js

@@ -11,7 +11,6 @@ import 'react-dom';
 import 'office-ui-fabric-core/dist/css/fabric.css';
 import 'office-ui-fabric-react/lib/common/DirectionalHint';
 import 'react-dom/server';
-import 'office-ui-fabric-react/lib/Spinner';
 
 var arDz$1 = {exports: {}};
 

package/ar-kw.async.esm.esm.js

@@ -11,7 +11,6 @@ import 'react-dom';
 import 'office-ui-fabric-core/dist/css/fabric.css';
 import 'office-ui-fabric-react/lib/common/DirectionalHint';
 import 'react-dom/server';
-import 'office-ui-fabric-react/lib/Spinner';
 
 var arKw$1 = {exports: {}};
 

package/ar-ly.async.esm.esm.js

@@ -11,7 +11,6 @@ import 'react-dom';
 import 'office-ui-fabric-core/dist/css/fabric.css';
 import 'office-ui-fabric-react/lib/common/DirectionalHint';
 import 'react-dom/server';
-import 'office-ui-fabric-react/lib/Spinner';
 
 var arLy$1 = {exports: {}};
 

package/ar-ma.async.esm.esm.js

@@ -11,7 +11,6 @@ import 'react-dom';
 import 'office-ui-fabric-core/dist/css/fabric.css';
 import 'office-ui-fabric-react/lib/common/DirectionalHint';
 import 'react-dom/server';
-import 'office-ui-fabric-react/lib/Spinner';
 
 var arMa$1 = {exports: {}};
 

package/ar-sa.async.esm.esm.js

@@ -11,7 +11,6 @@ import 'react-dom';
 import 'office-ui-fabric-core/dist/css/fabric.css';
 import 'office-ui-fabric-react/lib/common/DirectionalHint';
 import 'react-dom/server';
-import 'office-ui-fabric-react/lib/Spinner';
 
 var arSa$1 = {exports: {}};
 

package/ar-tn.async.esm.esm.js

@@ -11,7 +11,6 @@ import 'react-dom';
 import 'office-ui-fabric-core/dist/css/fabric.css';
 import 'office-ui-fabric-react/lib/common/DirectionalHint';
 import 'react-dom/server';
-import 'office-ui-fabric-react/lib/Spinner';
 
 var arTn$1 = {exports: {}};
 

package/ar.async.esm.esm.js

@@ -11,7 +11,6 @@ import 'react-dom';
 import 'office-ui-fabric-core/dist/css/fabric.css';
 import 'office-ui-fabric-react/lib/common/DirectionalHint';
 import 'react-dom/server';
-import 'office-ui-fabric-react/lib/Spinner';
 
 var ar$1 = {exports: {}};
 

package/bg.async.esm.esm.js

@@ -10,7 +10,6 @@ import 'react-dom';
 import 'office-ui-fabric-core/dist/css/fabric.css';
 import 'office-ui-fabric-react/lib/common/DirectionalHint';
 import 'react-dom/server';
-import 'office-ui-fabric-react/lib/Spinner';
 
 /* @generated */
 // prettier-ignore

package/bn.async.esm.esm.js

@@ -10,7 +10,6 @@ import 'react-dom';
 import 'office-ui-fabric-core/dist/css/fabric.css';
 import 'office-ui-fabric-react/lib/common/DirectionalHint';
 import 'react-dom/server';
-import 'office-ui-fabric-react/lib/Spinner';
 
 /* @generated */
 // prettier-ignore

package/ca.async.esm.esm.js

@@ -10,7 +10,6 @@ import 'react-dom';
 import 'office-ui-fabric-core/dist/css/fabric.css';
 import 'office-ui-fabric-react/lib/common/DirectionalHint';
 import 'react-dom/server';
-import 'office-ui-fabric-react/lib/Spinner';
 
 /* @generated */
 // prettier-ignore

package/common/FilterCalloutButton.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+export declare const FilterCalloutButton: FC<{
+    buttonText: string;
+    buttonContent?: JSX.Element;
+    isActive?: boolean;
+    handleClearFilter?: () => void;
+    doNotLayer?: boolean;
+    ariaLabel?: string;
+    className?: string;
+}>;

package/common/FilterLogicalOperators.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export declare const FilterLogicalOperators: FC<{
+    onChange: (key: string) => void;
+    selectedKey?: string;
+    ariaLabelResourceKey?: string;
+}>;

package/common/filter/LibNewsFilterDefinition.d.ts

@@ -0,0 +1,5 @@
+import { FilterWithLogicalOperator, NewsFilterDefinition } from '@livetiles/reach/feature/content';
+export interface LibNewsFilterDefinition extends Omit<NewsFilterDefinition, 'channels' | 'keywords'> {
+    channels?: string | FilterWithLogicalOperator;
+    keywords?: string | FilterWithLogicalOperator;
+}

package/common/hero/HeroPaging.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { CarouselSlideRenderControlProps } from 'nuka-carousel';
+import { HeroItem } from './Hero';
+interface HeroPagingProps extends CarouselSlideRenderControlProps {
+    items: HeroItem[];
+    autoplay?: boolean;
+    className?: string;
+}
+export declare const HeroPaging: FC<HeroPagingProps>;
+export {};

package/common/hero/HeroSlide.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+import { PublishableItem } from '@livetiles/reach/util/common';
+import { ItemResourceTypes } from '@livetiles/reach/util/common';
+import { IconDefinition } from './Hero';
+export declare const HeroSlide: FC<{
+    item: PublishableItem;
+    itemResourceType: ItemResourceTypes;
+    baseRoute: string;
+    icons?: IconDefinition[];
+    additionalMetadata?: ReactNode;
+    onClick?: (event: React.MouseEvent<unknown>) => unknown;
+    onToggleVideo: (isPlayerActive: boolean) => unknown;
+    width?: number | string;
+    height?: number | string;
+}>;

package/common/utils.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { NewsItem } from '@livetiles/reach/util/common';
 import { NewsFilterDefinition } from '@livetiles/reach/feature/content';
+import { LibNewsFilterDefinition } from './filter/LibNewsFilterDefinition';
 export declare function useNewsItemClickHandler(): (e: React.MouseEvent<unknown>, item: NewsItem, shouldHandleExternalContent: boolean, onItemClick?: (item: NewsItem, itemUrl?: string) => unknown, newTab?: boolean) => void;
-export declare function useNewsLoaderWithFilters(filter?: NewsFilterDefinition, defaultPageSize?: number): [NewsItem[], boolean, any, (state: import("react").SetStateAction<NewsItem[]>) => void, () => void, (args_0?: any) => Promise<void>];
-export declare function useNewsLoaderWithFiltersAndPagination(pageSize: number, filter?: NewsFilterDefinition): {
+export declare function useNewsLoaderWithFiltersAndPagination(pageSize: number, filter?: LibNewsFilterDefinition, searchText?: string): {
     items: any[];
     isInitialLoading: boolean;
     isLoadingNextPage: boolean;

package/cs.async.esm.esm.js

@@ -10,7 +10,6 @@ import 'react-dom';
 import 'office-ui-fabric-core/dist/css/fabric.css';
 import 'office-ui-fabric-react/lib/common/DirectionalHint';
 import 'react-dom/server';
-import 'office-ui-fabric-react/lib/Spinner';
 
 /* @generated */
 // prettier-ignore