@bynder/compact-view 4.3.3 → 5.0.0

package/Components.d.ts

@@ -0,0 +1,20 @@
+export { AssetCard as Asset } from './views/asset/asset-card/AssetCard';
+export { type Asset as displayAsset } from './views/asset/asset.type';
+export { AssetList } from './views/asset/AssetList';
+export { Button } from '@bynder/design-system';
+export { Card } from '@bynder/design-system';
+export { Checkbox } from '@bynder/design-system';
+export { Chip } from './common/components/Chip';
+export { Dropdown } from './common/components/dropdown/Dropdown';
+export { DropdownListItem } from './common/components/dropdown/DropdownListItem';
+export { MetaPropertyFilterContent as Metaproperty, type MetapropertyType as metaproperty, } from './filter/filters/metaproperty/MetapropertyFilterContent';
+export { MetapropertyOptionComponent as MetapropertyOption, type MetapropertyOptionType as metapropertyOption, } from './filter/filters/metaproperty/MetapropertyOption';
+export { SmartFilterContent as Smartfilter, type SmartfilterType as smartfilter, } from './filter/filters/metaproperty/SmartFilterContent';
+export { HorizontalScroll } from './common/components/HorizontalScroll';
+export { InfiniteScroll } from './common/components/InfiniteScroll';
+export { Modal } from './common/components/Modal';
+export { NoResults } from './common/components/NoResults';
+export { Oops } from './error-handling/Oops';
+export { ShadowRoot } from './style/shadowroot/ShadowRoot';
+export { Skeleton } from './common/components/Skeleton';
+export { Spinner } from './common/components/Spinner';

package/README.md

@@ -3,8 +3,8 @@
 ## Usage example
 
 ```jsx
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
 import { CompactView, Modal, Login } from '@bynder/compact-view';
 const assetFieldSelection = `
   name
@@ -18,19 +18,18 @@ const assetFieldSelection = `
     previewUrls
   }
 `;
-class App extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = { isOpen: false };
-	}
+const App  = () => {
+	const [isOpen, setIsOpen] = useState(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 })}>
+				<button onClick={setIsOpen(true)}>Open Compact View<button>
+				<Modal isOpen={isOpen} onClose={setIsOpen(false)}>
 					<Login>
 						<CompactView
 							language="en_US"
@@ -43,7 +42,8 @@ class App extends React.Component {
 		);
 	}
 }
-ReactDOM.render(<App />, document.getElementById('app'));
+const root = createRoot(document.getElementById('app'));
+root.render(<App />);
 ```
 
 See more info on [Bynder Docs](https://developer-docs.bynder.com/ui-components/#compact-view)
@@ -80,11 +80,11 @@ type File = {
 };
 
 type AssetFilterJson = {
-	assetType_in?: AssetType[]; //predefined asset types
+	predefinedAssetType?: AssetType[]; //predefined asset types
 	collectionId?: string; //predefined collection id
-	metapropertyOptionId_in?: string[]; //predefined metaproperty IDs
+	predefinedMetapropertiesOptions?: string[]; //predefined metaproperty IDs
 	searchTerm?: string; //predefined search term
-	tagNames_in?: string[]; //predefined tags
+	predefinedTagNames?: string[]; //predefined tags
 	isLimitedUse?: boolean; //whether or not this asset is marked as Limited Use
 	showToolbar?: boolean; //show toolbar for predefined filters (false by default)
 };