@bynder/compact-view 2.4.3 → 2.5.0

package/README.md

@@ -3,10 +3,9 @@
 ## Usage example
 
 ```jsx
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import { CompactView, Modal, Login } from "@bynder/compact-view";
-
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { CompactView, Modal, Login } from '@bynder/compact-view';
 const assetFieldSelection = `
   name
   url
@@ -19,39 +18,30 @@ const assetFieldSelection = `
     previewUrls
   }
 `;
-
 class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { isOpen: false };
-  }
-
-  onSuccess(assets) {
-    console.log(assets);
-  }
-
-  render() {
-    return (
-      <>
-        <button onClick={() => this.setState({ isOpen: true })}>
-          Open Compact View
-        </button>
-        <Modal
-          isOpen={this.state.isOpen}
-          onClose={() => this.setState({ isOpen: false })}
-        >
-          <Login>
-            <CompactView
-              language="en_US"
-              onSuccess={this.onSuccess}
-              assetFieldSelection={assetFieldSelection}
-            />
-          </Login>
-        </Modal>
-      </>
-    );
-  }
+	constructor(props) {
+		super(props);
+		this.state = { isOpen: false };
+	}
+	onSuccess(assets) {
+		console.log(assets);
+	}
+	render() {
+		return (
+			<>
+				<button onClick={() => this.setState({ isOpen: true })}>Open Compact View</button>
+				<Modal isOpen={this.state.isOpen} onClose={() => this.setState({ isOpen: false })}>
+					<Login>
+						<CompactView
+							language="en_US"
+							onSuccess={this.onSuccess}
+							assetFieldSelection={assetFieldSelection}
+						/>
+					</Login>
+				</Modal>
+			</>
+		);
+	}
 }
-
-ReactDOM.render(<App />, document.getElementById("app"));
+ReactDOM.render(<App />, document.getElementById('app'));
 ```

package/components.d.ts

@@ -1,241 +1,222 @@
 /// <reference types="react" />
-import * as React from "react"; // tslint:disable-next-line:no-var-requires
-// tslint:disable-next-line:no-var-requires
-// tslint:disable-next-line:no-var-requires
-// tslint:disable-next-line:no-var-requires
-/* TypeScript file generated from Theming.re by genType. */
-/* eslint-disable import/first */
-// tslint:disable-next-line:interface-over-type-literal
-type theme = {
-    readonly colorPrimary?: string;
-    readonly colorButtonPrimary?: string;
-    readonly colorButtonPrimaryLabel?: string;
-    readonly colorButtonPrimaryActive?: string;
-    readonly colorButtonPrimaryHover?: string;
-    readonly colorButtonPrimaryHoverLabel?: string;
-};
-type Theming_theme = theme;
-// tslint:disable-next-line:interface-over-type-literal
-type derivatives = {
-    readonly thumbnail?: string;
-}; // tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-type asset = {
-    readonly id: string;
-    readonly derivatives: derivatives;
-    readonly extensions: string[];
-    readonly name: string;
-    readonly url: string;
-    readonly isArchived: boolean;
-    readonly isWatermarked: boolean;
-}; // tslint:disable-next-line:interface-over-type-literal
-type t = asset; // tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-declare const Asset: React.ComponentType<{
-    readonly asset: t;
-    readonly children?: React.ReactNode;
-    readonly className?: string;
-    readonly fadeIn?: boolean;
-    readonly isSelected: boolean;
-    readonly onClick?: (_1: t) => void;
-    readonly theme?: Theming_theme;
-}>;
-type Asset_asset = asset;
-/* TypeScript file generated from ConfigProvider.re by genType. */
-/* eslint-disable import/first */
-// tslint:disable-next-line:interface-over-type-literal
-type selectionMode = "SingleSelect" | "SingleSelectFile" | "MultiSelect";
-type ConfigProvider_selectionMode = selectionMode;
-type Asset_t = t;
-type data<data> = {
+import React from "react";
+interface Derivatives {
+    thumbnail?: string;
+}
+interface Asset {
+    id: string;
+    derivatives: Derivatives;
+    extensions: string[];
+    name: string;
+    url: string;
+    isArchived: boolean;
+    isWatermarked: boolean;
+}
+interface Props {
+    className?: string;
+    fadeIn?: boolean;
+    asset: Asset;
+    isSelected: boolean;
+    onClick?: (asset: Asset, event: React.MouseEvent) => void;
+    isOutlined: boolean;
+    children?: React.ReactNode;
+}
+declare function AssetCard({ className, fadeIn, asset, isSelected, isOutlined, onClick, children }: Props): JSX.Element;
+type Kind = "Flat" | "Primary" | "Secondary" | "FlatSm" | "PrimarySm" | "SecondarySm";
+interface Theme {
+    colorPrimary?: string;
+    colorButtonPrimary?: string;
+    colorButtonPrimaryLabel?: string;
+    colorButtonPrimaryActive?: string;
+    colorButtonPrimaryHover?: string;
+    colorButtonPrimaryHoverLabel?: string;
+}
+type SelectionMode = "SingleSelect" | "SingleSelectFile" | "MultiSelect";
+type AssetData = {
     tag: "Loading";
-    value: (null | undefined | data);
+    value: undefined | Asset[];
 } | {
     tag: "Loaded";
-    value: data;
-} | {
-    tag: "Failure";
-    value: string;
-}; // tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-declare const AssetList: React.ComponentType<{
-    readonly assets: data<Asset_asset[]>;
-    readonly children?: React.ReactNode;
-    readonly count?: number;
-    readonly hasNextPage?: boolean;
-    readonly isLoading?: boolean;
-    readonly loadMore?: () => void;
-    readonly onSelect?: (_1: Asset_asset[]) => void;
-    readonly onToggle?: (_1: Asset_asset[]) => void;
-    readonly preselectedAssets: data<Asset_t[]>;
-    readonly renderAsset?: (_1: Asset_asset, _2: {
-        readonly index: number;
-        readonly fadeIn: boolean;
-        readonly isSelected: boolean;
-        readonly onClick: ((_1: Asset_asset) => void);
-    }) => JSX.Element;
-    readonly renderEmptyState?: () => JSX.Element;
-    readonly selectedAssetIds?: string[];
-    readonly selectionMode?: ConfigProvider_selectionMode;
-    readonly theme?: Theming_theme;
-}>;
-type Mouse_t = React.MouseEvent;
-type ReactEvent_Mouse_t = Mouse_t;
-type kind = "Flat" | "Primary" | "Secondary" | "FlatSm" | "PrimarySm" | "SecondarySm"; // tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-declare const Button: React.ComponentType<{
-    readonly children: React.ReactNode;
-    readonly className?: string;
-    readonly disabled?: boolean;
-    readonly kind?: kind;
-    readonly onClick?: (_1: ReactEvent_Mouse_t) => void;
-    readonly title?: string;
-}>;
-type style = React.CSSProperties;
-type ReactDOMRe_style = style;
-declare const Image_make: React.ComponentType<{
-    readonly cover?: boolean;
-    readonly url?: string;
-}>; // tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-declare const Images_make: React.ComponentType<{
-    readonly totalCount: number;
-    readonly urls: string[];
-}>; // tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-declare const Card: React.ComponentType<{
-    readonly alt?: string;
-    readonly children?: React.ReactNode;
-    readonly className?: string;
-    readonly fadeIn?: boolean;
-    readonly id?: string;
-    readonly onClick?: (_1: ReactEvent_Mouse_t) => void;
-    readonly stacked?: boolean;
-    readonly style?: ReactDOMRe_style;
-    readonly title: JSX.Element;
-}>;
-declare const Checkbox: React.ComponentType<{
-    readonly checked?: boolean;
-    readonly className?: string;
-    readonly onClick?: (_1: ReactEvent_Mouse_t) => void;
-}>;
-declare const Chip: React.ComponentType<{
-    readonly children: React.ReactNode;
-    readonly className?: string;
-    readonly onClick?: (_1: ReactEvent_Mouse_t) => void;
-}>;
-type Button_kind = kind;
-declare const ListItem_make: React.ComponentType<{
-    readonly children: React.ReactNode;
-    readonly className?: string;
-    readonly onClick?: (_1: ReactEvent_Mouse_t) => void;
-    readonly selected?: boolean;
-}>; // tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-declare const Dropdown: React.ComponentType<{
-    readonly alt?: string;
-    readonly buttonClassName?: string;
-    readonly buttonKind?: Button_kind;
-    readonly children: (_1: {
-        readonly toggle: ((_1: any) => void);
-    }) => JSX.Element;
-    readonly className?: string;
-    readonly direction?: "Down" | "Up";
-    readonly disabled?: boolean;
-    readonly title: JSX.Element;
-}>;
-// tslint:disable-next-line:interface-over-type-literal
-type MetapropertyOption_t = {
-    readonly id: string;
-    readonly label: string;
-    readonly assetCount: number;
-}; // tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-type Metaproperty_t = {
-    readonly id: string;
-    readonly label: string;
-    readonly options: MetapropertyOption_t[];
-}; // tslint:disable-next-line:interface-over-type-literal
-type Smartfilter_t = {
-    readonly id: string;
-    readonly label: string;
-    readonly metaproperties: Metaproperty_t[];
-    readonly icon?: string;
-    readonly zIndex: number;
-}; // tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-declare const MetapropertyOption_make: React.ComponentType<{
-    readonly isLoading?: boolean;
-    readonly mpo: MetapropertyOption_t;
-    readonly onAddOption: (_1: MetapropertyOption_t) => void;
-    readonly onRemoveOption: (_1: MetapropertyOption_t) => void;
-    readonly selectedOptionIds?: string[];
-}>; // tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-declare const Metaproperty_make: React.ComponentType<{
-    readonly isLoading?: boolean;
-    readonly metaproperty: Metaproperty_t;
-    readonly onAddOption: (_1: MetapropertyOption_t) => void;
-    readonly onRemoveOption: (_1: MetapropertyOption_t) => void;
-    readonly selectedOptionIds: string[];
-}>; // tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-// tslint:disable-next-line:interface-over-type-literal
-declare const Smartfilter_make: React.ComponentType<{
-    readonly isLoading?: boolean;
-    readonly onAddOption: (_1: MetapropertyOption_t) => void;
-    readonly onRemoveOption: (_1: MetapropertyOption_t) => void;
-    readonly selectedOptionIds: string[];
-    readonly smartfilter: Smartfilter_t;
-}>;
-declare const HorizontalScroll: React.ComponentType<{
-    readonly children: React.ReactNode;
-    readonly className?: string;
-    readonly static?: JSX.Element;
-}>;
-declare const InfiniteScroll: React.ComponentType<{
-    readonly children: React.ReactNode;
-    readonly hasNextPage: boolean;
-    readonly isLoading: boolean;
-    readonly loadMore: () => void;
-}>;
-declare const Modal: React.ComponentType<{
-    readonly children: React.ReactNode;
-    readonly isOpen?: boolean;
-    readonly onClose?: () => void;
-    readonly style?: ReactDOMRe_style;
-}>;
-declare const NoResults: React.ComponentType<{
-    readonly onReset: () => void;
-}>;
-declare const Oops: React.ComponentType<{
-    readonly error: any;
-    readonly onRetry: () => void;
-}>;
-declare const OverlayButton: React.ComponentType<{
-    readonly active?: boolean;
-    readonly children: React.ReactNode;
-    readonly className?: string;
-    readonly onClick?: (_1: ReactEvent_Mouse_t) => void;
-    readonly title?: string;
-}>;
-declare const ShadowRoot: React.ComponentType<{
-    readonly children: React.ReactNode;
-    readonly topLevel?: boolean;
-}>;
-declare const Skeleton: React.ComponentType<{
-    readonly className?: string;
-    readonly width?: number;
-}>;
-declare const Spinner: React.ComponentType<{
-    readonly className?: string;
-}>;
-export { Asset, asset as displayAsset, AssetList, data, Button, Card, Images_make as CardImages, Image_make as CardImage, Checkbox, Chip, Dropdown, ListItem_make as DropdownListItem, MetapropertyOption_make as MetapropertyOption, MetapropertyOption_t as metapropertyOption, Metaproperty_make as Metaproperty, Metaproperty_t as metaproperty, Smartfilter_make as Smartfilter, Smartfilter_t as smartfilter, HorizontalScroll, InfiniteScroll, Modal, NoResults, Oops, OverlayButton, ShadowRoot, Skeleton, Spinner };
+    value: Asset[];
+};
+interface Props$0 {
+    assets: AssetData;
+    count?: number;
+    hasNextPage?: boolean;
+    isLoading?: boolean;
+    loadMore?: () => void;
+    onSelect?: (assets: Asset[]) => void;
+    onToggle?: (assets: Asset[]) => void;
+    emptyStateElement?: React.ReactElement | null;
+    selectedAssetIds?: string[];
+    selectionMode?: SelectionMode;
+    theme?: Theme;
+    children?: React.ReactNode;
+}
+declare function AssetList({ assets, count, hasNextPage, isLoading, loadMore, onSelect, onToggle, emptyStateElement, selectedAssetIds, selectionMode, theme, children }: Props$0): JSX.Element;
+interface Props$1 {
+    className?: string;
+    title?: string;
+    isDisabled?: boolean;
+    onClick?: React.MouseEventHandler;
+    kind?: Kind;
+    testId?: string;
+    children: React.ReactNode;
+}
+declare const Button: React.ForwardRefExoticComponent<Props$1 & React.RefAttributes<HTMLButtonElement>>;
+interface CardProps {
+    alt?: string;
+    className?: string;
+    fadeIn?: boolean;
+    id?: string;
+    style?: React.CSSProperties;
+    stacked?: boolean;
+    title: React.ReactNode;
+    onClick?: (e: React.MouseEvent) => void;
+    children?: React.ReactNode;
+    ["aria-selected"]?: boolean;
+}
+declare function Card({ alt, className, fadeIn, id, style, stacked, title, onClick, children, ...props }: CardProps): JSX.Element;
+interface CardImagesProps {
+    urls: string[];
+    totalCount: number;
+    alt: string;
+}
+declare function CardImages({ urls, totalCount, alt }: CardImagesProps): JSX.Element;
+interface ImageProps {
+    url?: string;
+    cover?: boolean;
+    alt?: string;
+}
+declare function CardImage({ url, cover, alt }: ImageProps): JSX.Element;
+interface Props$2 {
+    className?: string;
+    onClick?: () => void;
+    isChecked?: boolean;
+    title?: string;
+}
+declare function Checkbox({ className, onClick, isChecked, title }: Props$2): JSX.Element;
+interface Props$3 {
+    className?: string;
+    onClick?: () => void;
+    children: React.ReactNode;
+    ["data-testid"]?: string;
+}
+declare function Chip(props: Props$3): JSX.Element;
+interface Props$4 {
+    className?: string;
+    buttonClassName?: string;
+    buttonKind?: Kind;
+    direction?: "Down" | "Up";
+    title: React.ReactNode;
+    alt?: string;
+    disabled?: boolean;
+    children: (toggle: () => void) => React.ReactNode;
+}
+declare function Dropdown({ buttonKind, direction, ...props }: Props$4): JSX.Element;
+interface ListItemProps {
+    className?: string;
+    onClick?: () => void;
+    selected?: boolean;
+    children: React.ReactNode;
+}
+declare function DropdownListItem({ selected, ...props }: ListItemProps): JSX.Element;
+interface MetapropertyOptionType {
+    id: string;
+    label: string;
+    assetCount: number;
+}
+interface MetapropertyOptionProps {
+    metapropertyOption: MetapropertyOptionType;
+    selectedOptionIds?: string[];
+    isLoading?: boolean;
+    onAddOption: () => void;
+    onRemoveOption: () => void;
+}
+declare function MetapropertyOptionComponent(props: MetapropertyOptionProps): JSX.Element;
+interface MetapropertyType {
+    __typename: "Metaproperty";
+    id: string;
+    label: string;
+    options: MetapropertyOptionType[];
+}
+interface MetapropertyProps {
+    metaproperty: MetapropertyType;
+    selectedOptionIds: string[];
+    isLoading: boolean;
+    onAddOption: (metapropertyOption: MetapropertyOptionType) => void;
+    onRemoveOption: (metapropertyOption: MetapropertyOptionType) => void;
+}
+declare function MetapropertyComponent(props: MetapropertyProps): JSX.Element;
+interface SmartfilterType {
+    __typename: "Smartfilter";
+    id: string;
+    label: string;
+    metaproperties: MetapropertyType[];
+    icon?: string;
+    zIndex: number;
+}
+interface SmartfilterProps {
+    smartfilter: SmartfilterType;
+    selectedOptionIds: string[];
+    isLoading: boolean;
+    onAddOption: (metapropertyOption: MetapropertyOptionType) => void;
+    onRemoveOption: (metapropertyOption: MetapropertyOptionType) => void;
+}
+declare function SmartfilterComponent(props: SmartfilterProps): JSX.Element;
+interface Props$5 {
+    static?: React.ReactNode;
+    className: string;
+    children: React.ReactNode;
+}
+declare function HorizontalScroll(props: Props$5): JSX.Element;
+interface Props$6 {
+    isLoading: boolean;
+    hasNextPage: boolean;
+    loadMore: () => void;
+    children: React.ReactNode;
+}
+declare function InfiniteScroll(props: Props$6): JSX.Element;
+interface Props$7 {
+    children: React.ReactNode;
+    isOpen?: boolean;
+    style?: React.CSSProperties;
+    onClose?: () => void;
+}
+declare function Modal({ children, isOpen, style, onClose }: Props$7): JSX.Element | null;
+interface Props$8 {
+    onReset: () => void;
+}
+declare function NoResults(props: Props$8): JSX.Element;
+interface Props$9 {
+    error: Error;
+    onRetry: () => void;
+}
+declare function Oops({ error, onRetry }: Props$9): JSX.Element;
+interface Props$10 {
+    className?: string;
+    active?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+    title?: string;
+    children: React.ReactNode;
+}
+declare function OverlayButton(props: Props$10): JSX.Element;
+/**
+ * This component will create a shadow root if it is the first ShadowRoot in the tree.
+ * Otherwise it will just render it's childred. This is useful as we don't always know
+ * which component will be first in the tree, especially when the components are used
+ * externally from the npm package.
+ */
+declare function ShadowRoot(props: {
+    children: React.ReactNode;
+}): JSX.Element;
+interface Props$11 {
+    width?: number;
+    className?: string;
+}
+declare function Skeleton({ width, className }: Props$11): JSX.Element;
+interface Props$12 {
+    className?: string;
+}
+declare function Spinner(props: Props$12): JSX.Element;
+export { AssetCard as Asset, Asset as displayAsset, AssetList, Button, Card, CardImages, CardImage, Checkbox, Chip, Dropdown, DropdownListItem, MetapropertyComponent as Metaproperty, MetapropertyType as metaproperty, MetapropertyOptionComponent as MetapropertyOption, MetapropertyOptionType as metapropertyOption, SmartfilterComponent as Smartfilter, SmartfilterType as smartfilter, HorizontalScroll, InfiniteScroll, Modal, NoResults, Oops, OverlayButton, ShadowRoot, Skeleton, Spinner };