@bynder/compact-view 5.0.1 → 5.0.3

package/localization/index.d.ts

@@ -0,0 +1,2 @@
+export declare function __(key: string): string;
+export declare function useLocalization(locale: string): void;

package/login/LoginComponent.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { DomainStatus } from './useAccountDomain';
+interface Props {
+    domainValue: string;
+    domainStatus: DomainStatus;
+    onChangeDomain: (value: string) => void;
+    isSubmitting: boolean;
+    isEditable: boolean;
+    onSubmit: () => void;
+}
+export declare function LoginComponent(props: Props): React.JSX.Element;
+export {};

package/login/LoginContext.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { AuthInformationState } from '../auth/useAuthInformation';
+import { Config, PortalConfig } from '../app-config/appConfig.type';
+type ContextValue = AuthInformationState & {
+    logout: () => void;
+    hideLogout?: boolean;
+};
+export declare const AuthContext: React.Context<ContextValue | null>;
+interface Props {
+    portal?: PortalConfig;
+    language?: string;
+    children: React.ReactNode;
+    authentication?: Config['authentication'];
+    onLogout?: Config['onLogout'];
+}
+declare const LoginWithShield: (props: Props) => React.JSX.Element;
+export { LoginWithShield as Login };
+export declare const useIsLoggedIn: () => boolean;
+export declare const useAuth: () => ContextValue | null;

package/login/__tests__/mocks.d.ts

@@ -0,0 +1 @@
+export {};

package/login/__tests__/utils.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { PortalConfig } from '../../app-config/appConfig.type';
+export declare function getContext(): {
+    accessToken: string | undefined;
+    accountDomain: string | undefined;
+    isLoggedIn: boolean;
+    logout: () => void;
+};
+export declare function queryChildComponent(): HTMLElement | null;
+export declare function typeAccountDomainAndClickConnect(domain: string, waitForLoading?: boolean): Promise<void>;
+export declare function login(domain: string): Promise<void>;
+export declare function waitForLoginWindowToOpen(): Promise<void>;
+export declare function waitForChildComponentToBeRendered(): Promise<void>;
+export declare function mockAccessRequest(requestArguments: {
+    code_verifier: string;
+    code: string;
+}, response: number | {
+    refresh_token: string;
+    access_token: string;
+    expires_in: string;
+}, domain?: string): void;
+export declare function mockRefreshRequest(requestArguments: {
+    refresh_token: string;
+}, response: number | {
+    access_token: string;
+    expires_in: string;
+}, domain?: string): void;
+export declare function mockPortalValidation(portalUrl: string, respBody?: Record<string, unknown>, isValid?: boolean): void;
+export declare function fireLoginWindowEvent(options: {
+    origin: string;
+    data: string;
+}): void;
+export declare function MockChildComponent(): React.JSX.Element;
+export declare function renderLogin(props?: {
+    portal?: PortalConfig;
+    language?: string;
+    authentication?: {
+        getAccessToken: () => string;
+        hideLogout?: boolean;
+    };
+}): import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;

package/login/components/ConnectButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function ConnectButton(props: {
+    isValidDomain: boolean;
+    isSubmitting: boolean;
+    onClick: () => void;
+}): React.JSX.Element;

package/login/components/Container.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function Container(props: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/login/components/DomainInput.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DomainStatus } from '../useAccountDomain';
+interface Props {
+    value: string;
+    isReadOnly: boolean;
+    status: DomainStatus;
+    onSubmit: () => void;
+    onChange: (value: string) => void;
+}
+export declare function DomainInput({ status, isReadOnly, value, onChange, onSubmit }: Props): React.JSX.Element;
+export {};

package/login/components/Header.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function Header(): React.JSX.Element;

package/login/components/RefreshingSpinner.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function RefreshingSpinner(): React.JSX.Element;

package/login/useAccountDomain.d.ts

@@ -0,0 +1,2 @@
+export type DomainStatus = 'empty' | 'validating' | 'valid' | 'invalid';
+export declare function useAccountDomain(initialUrl?: string | undefined): [string, (domain: string) => void, DomainStatus];

package/order/DirectionSelect.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function DirectionSelect(): React.JSX.Element;

package/order/FieldSelect.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Field } from './OrderingContext';
+interface FieldProps {
+    options?: Field[];
+}
+export declare function FieldSelect({ options, }: FieldProps): React.JSX.Element;
+export {};

package/order/OrderingContext.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PageType } from '../router/RouterContext';
+export type Field = 'CREATED_AT' | 'NAME' | 'PUBLISHED_AT' | 'UPDATED_AT';
+export type Direction = 'ASC' | 'DESC';
+export type Ordering = {
+    field: Field;
+    direction: Direction;
+};
+export declare function OrderingProvider(props: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useOrdering(): {
+    assets: Ordering;
+    collections: Ordering;
+    collection: Ordering;
+    setOrdering: (page: PageType, ordering: Ordering) => void;
+    reset: () => void;
+};
+export declare function useOrderingByPage(page: PageType): [Ordering, (ordering: Ordering) => void];

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@bynder/compact-view",
   "description": "Bynder Compact View",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "author": "Bynder",
   "license": "UNLICENSED",
   "main": "index.js",
-  "module": "index.js",
-  "types": "CompactView.d.ts",
-  "files": [
-    "index.js",
-    "index.d.ts",
-    "components.js",
-    "components.d.ts"
-  ],
+  "module": "index.mjs",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js",
+      "types": "./index.d.ts"
+    }
+  },
   "dependencies": {},
   "peerDependencies": {
     "react": ">=16.8.0 <19.0.0",

package/router/RouterContext.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Collection } from '../views/collection/collection.types';
+type AssetsPage = 'assets';
+type CollectionsPage = 'collections';
+type CollectionPage = 'collection';
+export type PageType = AssetsPage | CollectionsPage | CollectionPage;
+type Page = {
+    page: AssetsPage;
+} | {
+    page: CollectionsPage;
+} | {
+    page: CollectionPage;
+    collection: Collection;
+};
+export declare function RouterProvider(props: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useRouter(): [Page, (page: Page) => void];
+export {};

package/search/SearchContext.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+interface State {
+    assets: string;
+    collection: string;
+    collections: string;
+    isLoading: boolean;
+}
+interface Actions {
+    setSearch: (page: 'assets' | 'collections' | 'collection', value: string) => void;
+    setIsLoading: (isLoading: boolean) => void;
+    clear: () => void;
+}
+export interface Props {
+    defaultValue?: string;
+    children: React.ReactNode;
+}
+export declare function SearchStateProvider(props: Props): React.JSX.Element;
+export declare function useSearchState(): State & Actions;
+export declare function useSearchStateByPage(page: 'assets' | 'collections' | 'collection'): {
+    value: string;
+    isLoading: boolean;
+    setSearch: (newValue: string) => void;
+    setIsLoading: (isLoading: boolean) => void;
+};
+export {};

package/search/SearchInput.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function SearchInput(): React.JSX.Element;

package/select/FileSelector.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Asset } from '../views/asset/asset.type';
+import { File } from './file.type';
+interface Props {
+    asset: Asset;
+    onChange: (file: File | undefined) => void;
+}
+export declare function FileSelector({ asset, onChange }: Props): React.JSX.Element;
+export {};

package/select/SelectionContext.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Asset, AssetData } from '../views/asset/asset.type';
+import { Collection } from '../views/collection/collection.types';
+type SelectedAsset = {
+    type: 'asset';
+    value: Asset;
+};
+export type SelectedCollection = {
+    type: 'collection';
+    value: Collection;
+};
+export type SelectedItem = SelectedAsset | SelectedCollection;
+interface Context {
+    selection: SelectedItem[];
+    preselectedAssetIds?: string[];
+    clear: () => void;
+    selectAll: () => void;
+    selectAssets: (assets: Asset[]) => void;
+    toggleAssets: (assets: Asset[]) => void;
+    toggleCollection: (collection: Collection) => void;
+    setAllAssets: (assetData: AssetData) => void;
+}
+export declare function SelectionProvider(props: {
+    preselectedAssetIds: string[];
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useSelection(): Context;
+export declare function useSelectedAssetIds(): string[];
+export declare function useSelectedCollectionIds(): string[];
+export {};

package/select/SelectionFooter.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function SelectionFooter(): React.JSX.Element | null;

package/select/__tests__/utils.d.ts

@@ -0,0 +1,10 @@
+import { SelectionMode } from '../../app-config/appConfig.type';
+interface Props {
+    assetIds?: string[];
+    collectionId?: number;
+    withExtension?: boolean;
+    selectionMode?: SelectionMode;
+    onSuccess?: () => void;
+}
+export declare function renderSelectionFooter({ assetIds, collectionId, withExtension, selectionMode, onSuccess, }?: Props): import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+export {};

package/select/add-media/AddMedia.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SelectedItem } from '../SelectionContext';
+interface Props {
+    selection: SelectedItem[];
+}
+export declare function AddMedia(props: Props): React.JSX.Element;
+export {};

package/select/add-media/ButtonAction.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { State } from './addMedia.type';
+export declare function ButtonAction({ status, numberOfSelectedItems, }: {
+    status: State['status'];
+    numberOfSelectedItems: number;
+}): React.JSX.Element;

package/select/add-media/addMedia.type.d.ts

@@ -0,0 +1,15 @@
+import { File } from '../file.type';
+export type State = {
+    status: 'Done';
+} | {
+    status: 'Error';
+} | {
+    status: 'Loading';
+} | {
+    status: 'WaitingForFileSelection';
+} | {
+    status: 'Ready';
+} | {
+    status: 'ReadyWithFile';
+    file: File;
+};

package/select/current-selection/AssetItem.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Asset } from '../../views/asset/asset.type';
+export declare function AssetItem({ asset }: {
+    asset: Asset;
+}): React.JSX.Element;

package/select/current-selection/CollectionItem.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Collection } from '../../views/collection/collection.types';
+export declare function CollectionItem({ collection }: {
+    collection: Collection;
+}): React.JSX.Element;

package/select/current-selection/SelectedItemContainer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function SelectedItemContainer({ title, onRemove, children, }: {
+    title: string;
+    onRemove: () => void;
+    children: React.ReactNode;
+}): React.JSX.Element;

package/select/current-selection/SelectedItems.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SelectedItem } from '../SelectionContext';
+export declare function SelectedItems({ selection }: {
+    selection: SelectedItem[];
+}): React.JSX.Element;

package/select/file.type.d.ts

@@ -0,0 +1,7 @@
+export interface File {
+    url: string;
+    width?: number;
+    height?: number;
+    fileSize?: number;
+    isFakeOriginal?: boolean;
+}

package/select/utils.d.ts

@@ -0,0 +1,5 @@
+import { File } from './file.type';
+export declare function getDefaultKey(files: Record<string, File>): 'transformBaseUrl' | 'original' | 'webImage';
+export declare function splitByCamelCase(str: string): string;
+export declare function getUrlExtension(url: string): string | undefined;
+export declare function getHumanReadableFileSize(bytes: number): string;

package/style/DesignSystemContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function DesignSystemProvider(props: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/style/RootElementContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const RootElementProvider: import("react").Provider<HTMLElement | null>;
+export declare const useRootElement: () => HTMLElement;

package/style/Theming.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export interface Theme {
+    colorPrimary?: string;
+    colorButtonPrimary?: string;
+    colorButtonPrimaryLabel?: string;
+    colorButtonPrimaryActive?: string;
+    colorButtonPrimaryHover?: string;
+    colorButtonPrimaryHoverLabel?: string;
+}
+export declare const themeVariables: (theme?: Theme) => {
+    '--componentButtonPrimaryBorderHover': string | undefined;
+    '--componentButtonPrimaryBorderActive': string | undefined;
+    '--componentButtonPrimaryBorderFocus': string | undefined;
+    '--componentButtonPrimaryColor': string | undefined;
+    '--componentButtonPrimaryColorHover': string | undefined;
+    '--componentButtonPrimaryColorActive': string | undefined;
+    '--componentButtonPrimaryColorFocus': string | undefined;
+    '--componentButtonPrimaryColorDisabled': string | undefined;
+    '--componentButtonPrimaryFill': string | undefined;
+    '--componentButtonPrimaryFillHover': string | undefined;
+    '--componentButtonPrimaryFillActive': string | undefined;
+    '--componentButtonPrimaryFillFocus': string | undefined;
+};
+export declare const ThemeStyles: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
+    theme?: Theme | undefined;
+}>;
+export declare function stringifyTheme(theme?: Theme): string;

package/style/shadowroot/ShadowRoot.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface ShadowRootProps {
+    children: React.ReactNode;
+    isContainerMode?: boolean;
+}
+/**
+ * This component will create a shadow root if it is the first ShadowRoot in the tree.
+ * Otherwise, it will just render it's children. 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.
+ */
+export declare function ShadowRoot({ children, isContainerMode }: ShadowRootProps): React.JSX.Element;
+export {};

package/style/shadowroot/ShadowRootInternal.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface Props {
+    children: React.ReactNode;
+    isContainerMode?: boolean;
+}
+/**
+ * This component creates a shadow root and injects styling so that outside
+ * styling do not interfere with compactview and compactview styling does
+ * not interfere with the DOM it's rendered in.
+ */
+export declare function ShadowRootInternal({ children, isContainerMode }: Props): React.JSX.Element;
+export {};

package/style/shadowroot/__mocks__/ShadowRoot.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function ShadowRoot(props: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/toolbar/Toolbar.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function Toolbar(): React.JSX.Element | null;

package/toolbar/ViewSwitch.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function ViewSwitch(): React.JSX.Element;

package/utils/__mocks__/logger.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="jest" />
+export declare const logger: {
+    error: jest.Mock<any, any>;
+};

package/utils/asyncDebounce.d.ts

@@ -0,0 +1 @@
+export declare const debounceAsync: (fn: any, wait: any) => (...args: any[]) => Promise<unknown>;

package/utils/base64Converter.d.ts

@@ -0,0 +1,2 @@
+import { selectedSmartfilterOptionsType } from '@src/api/rest/types';
+export declare const convertOptionsToBase64: (options: selectedSmartfilterOptionsType | undefined) => string[] | undefined;

package/utils/chunk.d.ts

@@ -0,0 +1 @@
+export declare const chunk: <T>(arr: T[], chunkSize: number) => T[][];

package/utils/class.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Concatenates the list of classes given into a single class string.
+ *
+ * If a parameter is `false` or `undefined`, then it will be ignored. This
+ * is useful for building a single class string out of several classes,
+ * some of which are conditionally included.
+ *
+ * @example
+ * // When isActive is true, returns "link active"
+ * // When isActive is false, returns "link inactive"
+ * concatClasses(
+ *     "link",
+ *     isActive && "active",
+ *     !isActive && "inactive"
+ * )
+ *
+ * @example
+ * // Ehen props.icon is defined, returns "base with-icon"
+ * // When props.icon is undefined, returns "base"
+ * concatClasses(
+ *     "base",
+ *     props.icon && "with-icon"
+ * )
+ */
+export declare function concatClasses(...classes: (string | false | undefined)[]): string;

package/utils/combineFilters.d.ts

@@ -0,0 +1,8 @@
+import { AssetType } from '@src/views/asset/asset.type';
+type AssetTypeFiltersParams = {
+    filters?: string[] | AssetType[];
+    predefinedFilters?: string[] | AssetType[];
+    showToolbar?: boolean;
+};
+export declare const combineFilters: ({ filters, predefinedFilters, showToolbar, }: AssetTypeFiltersParams) => string[] | AssetType[] | undefined;
+export {};

package/utils/combineMetaproperties.d.ts

@@ -0,0 +1,9 @@
+import { MetapropertyType } from '@src/filter/filters/metaproperty/MetapropertyFilterContent';
+import { TextMetapropertiesType } from '@src/views/asset/asset.type';
+interface ReturnType {
+    label: string;
+    value: string;
+    zIndex: number;
+}
+export declare const combineMetaproperties: (metaproperties?: MetapropertyType[], textMetaproperties?: TextMetapropertiesType[]) => ReturnType[];
+export {};

package/utils/filterEmptyMetaproperties.d.ts

@@ -0,0 +1,2 @@
+import { SmartfilterMetaproperty } from '@src/api/rest/types';
+export declare const filterEmptyMetaproperties: (metaproperties: Record<string, Record<string, SmartfilterMetaproperty>>) => {};

package/utils/getMetaPropertiesForFilter.d.ts

@@ -0,0 +1,2 @@
+import { MetapropertyOptionType } from '@src/filter/filters/metaproperty/MetapropertyOption';
+export declare const getMetaProperties: (metaproperties: MetapropertyOptionType[] | undefined) => string[] | undefined;

package/utils/isObjectEmpty.d.ts

@@ -0,0 +1 @@
+export declare const isObjectEmpty: (obj: Record<string, unknown> | undefined) => boolean;

package/utils/logger.d.ts

@@ -0,0 +1,6 @@
+export declare const logger: {
+    error: {
+        (...data: any[]): void;
+        (message?: any, ...optionalParams: any[]): void;
+    };
+};

package/utils/normalizeResponse.d.ts

@@ -0,0 +1,3 @@
+import { File } from '@src/select/file.type';
+export declare function normalizeFilesResponse(files: Record<string, File>): Record<string, File>;
+export declare function normalizeAssetsResponse(response: any): any;

package/utils/text.d.ts

@@ -0,0 +1,2 @@
+export declare function pluralize(count: number, singular: string, plural: string): string;
+export declare const nbsp = "\u00A0";

package/utils/trimMetapropertyValue.d.ts

@@ -0,0 +1 @@
+export declare const trimMetapropertyValue: (value: string) => string;

package/utils/url.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Converts given string to an URL which starts with `https://` and ends with
+ * a single trailing slash.
+ *
+ * @example
+ * // Returns "https://www.bynder.com/"
+ * ensureValidUrl("www.bynder.com")
+ *
+ * @example
+ * // Replaces http with https to return "https://www.bynder.com/"
+ * ensureValidUrl("http://www.bynder.com/")
+ */
+export declare function ensureValidUrl(url: string): string;

package/views/asset/AssetList.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { SelectionMode } from '@src/app-config/appConfig.type';
+import { Theme } from '@src/style/Theming';
+import { Asset, AssetData } from './asset.type';
+interface Props {
+    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;
+}
+export declare function AssetList({ assets, count, hasNextPage, isLoading, loadMore, onSelect, onToggle, emptyStateElement, selectedAssetIds, selectionMode, theme, children, }: Props): React.JSX.Element;
+export {};

package/views/asset/AssetsView.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function AssetsView(): React.JSX.Element;

package/views/asset/StatefulAssetList.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Connection } from '@src/api/graphql.types';
+import { Asset } from './asset.type';
+interface DataValue {
+    searchAssets: {
+        assets: {
+            totalCount: number;
+            nodes: Asset[];
+        };
+    };
+}
+interface Props {
+    connection: Connection<DataValue>;
+    totalCount?: number;
+    showActiveFilters?: boolean;
+}
+export declare function StatefulAssetList(props: Props): React.JSX.Element;
+export {};

package/views/asset/__tests__/utils.d.ts

@@ -0,0 +1,7 @@
+import { SelectionMode } from '../../../app-config/appConfig.type';
+import { AssetFilterJson } from '../../../filter/assetFilter.type';
+export declare function renderAssetsView({ hideExternalAccess, predefinedFilter, selectionMode, }?: {
+    hideExternalAccess?: boolean;
+    selectionMode?: SelectionMode;
+    predefinedFilter?: AssetFilterJson;
+}): import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;

package/views/asset/asset-card/AssetCard.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Asset } from '../asset.type';
+interface Props {
+    className?: string;
+    fadeIn?: boolean;
+    asset: Asset;
+    isSelected: boolean;
+    onClick?: (asset: Asset, event: React.MouseEvent) => void;
+    isOutlined: boolean;
+    children?: React.ReactNode;
+}
+export declare function AssetCard({ className, fadeIn, asset, isSelected, isOutlined, onClick, children, }: Props): React.JSX.Element;
+export {};