@box/metadata-view 0.23.2 → 0.24.0

package/dist/types/lib/components/filter-row/select-filter-chip.d.ts

@@ -0,0 +1,11 @@
+import { MetadataFieldType } from '@box/metadata-view';
+export interface SelectFilterChipProps {
+    fieldNamePrefix: string;
+    formRef: React.RefObject<HTMLFormElement>;
+    icon?: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, 'ref'> & React.RefAttributes<SVGSVGElement>>;
+    id: string;
+    name: string;
+    options?: string[];
+    type: MetadataFieldType;
+}
+export declare const SelectFilterChip: ({ fieldNamePrefix, formRef, icon, id, name, options, type, }: SelectFilterChipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/filter-row/types.d.ts

@@ -10,6 +10,7 @@ export interface FilterOption {
     icon?: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, 'ref'> & React.RefAttributes<SVGSVGElement>>;
     id: string;
     name?: string;
+    options?: string[];
     placeholder?: string;
     selected: boolean;
     shouldRenderChip?: boolean;

package/dist/types/lib/components/pagination/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Pagination } from './pagination';
+export type { PaginationProps } from './pagination';
+export { default as PaginationControls } from './pagination-controls';
+export type { PaginationControlsProps } from './pagination-controls';
+export { default as OffsetBasedPagination } from './offset-based-pagination';
+export type { OffsetBasedPaginationProps } from './offset-based-pagination';
+export { default as MarkerBasedPagination } from './marker-based-pagination';
+export type { MarkerBasedPaginationProps } from './marker-based-pagination';

package/dist/types/lib/components/pagination/marker-based-pagination.d.ts

@@ -0,0 +1,7 @@
+export interface MarkerBasedPaginationProps {
+    hasNextMarker?: boolean;
+    hasPrevMarker?: boolean;
+    onMarkerBasedPageChange: (pageDirection: number) => void;
+}
+export declare const MarkerBasedPagination: ({ hasNextMarker, hasPrevMarker, onMarkerBasedPageChange, }: MarkerBasedPaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default MarkerBasedPagination;

package/dist/types/lib/components/pagination/messages.d.ts

@@ -0,0 +1,23 @@
+declare const messages: {
+    nextPageButton: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    pageEntryStatus: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    paginationAriaLabel: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    previousPageButton: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+};
+export default messages;

package/dist/types/lib/components/pagination/offset-based-pagination.d.ts

@@ -0,0 +1,8 @@
+export interface OffsetBasedPaginationProps {
+    offset: number;
+    onOffsetChange?: (offset: number) => void;
+    pageSize: number;
+    totalCount: number;
+}
+export declare const OffsetBasedPagination: ({ offset, onOffsetChange, pageSize, totalCount }: OffsetBasedPaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default OffsetBasedPagination;

package/dist/types/lib/components/pagination/pagination-controls.d.ts

@@ -0,0 +1,12 @@
+export interface PaginationControlsProps {
+    handleNextClick: () => void;
+    handlePreviousClick: () => void;
+    hasNextPage: boolean;
+    hasPageEntryStatus?: boolean;
+    hasPreviousPage: boolean;
+    offset?: number;
+    pageSize?: number;
+    totalCount?: number;
+}
+declare const PaginationControls: ({ handleNextClick, handlePreviousClick, hasNextPage, hasPageEntryStatus, hasPreviousPage, offset, pageSize, totalCount, }: PaginationControlsProps) => import("react/jsx-runtime").JSX.Element;
+export default PaginationControls;

package/dist/types/lib/components/pagination/pagination.d.ts

@@ -1,2 +1,9 @@
-declare const Pagination: () => import("react/jsx-runtime").JSX.Element;
+import { MarkerBasedPaginationProps } from './marker-based-pagination';
+import { OffsetBasedPaginationProps } from './offset-based-pagination';
+export type PaginationProps = ({
+    type: 'marker';
+} & MarkerBasedPaginationProps) | ({
+    type: 'offset';
+} & OffsetBasedPaginationProps);
+declare const Pagination: ({ type, ...rest }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
 export default Pagination;

package/dist/types/lib/components/pagination/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns the offset for the given page number, page size, and total count
+ * @param newPageNumber - The page number to get the offset for
+ * @param pageSize - The size of the page
+ * @param totalCount - The total number of items
+ * @returns The offset for the given page number
+ */
+export declare const getOffsetForPage: (newPageNumber: number, pageSize: number, totalCount: number) => number;

package/dist/types/lib/metadata-view.d.ts

@@ -1,13 +1,15 @@
 import { MetadataTableProps } from './components/metadata-table';
+import { PaginationProps } from './components/pagination/pagination';
 import { ActionBarProps } from './components/action-bar';
 import { ViewMode, Column, MetadataProps } from './types';
 export interface MetadataViewProps extends MetadataProps {
     columns: Column[];
-    actionBarProps: Omit<ActionBarProps, 'onViewModeChange' | 'viewMode' | 'sortableColumnNames'>;
+    actionBarProps?: Omit<ActionBarProps, 'onViewModeClick' | 'viewMode' | 'sortableColumnNames'>;
     hasError?: boolean;
     initialViewMode?: ViewMode;
     onRefresh?: () => void;
-    tableProps: Omit<MetadataTableProps, 'items' | 'itemActionMenuProps'>;
+    tableProps: Omit<MetadataTableProps, 'columns' | 'items' | 'itemActionMenuProps'>;
+    paginationProps?: PaginationProps;
 }
-export declare function MetadataView({ actionBarProps, columns, tableProps, hasError, onRefresh, initialViewMode, ...rest }: MetadataViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataView({ actionBarProps, columns, tableProps, hasError, onRefresh, initialViewMode, paginationProps, ...rest }: MetadataViewProps): import("react/jsx-runtime").JSX.Element;
 export default MetadataView;

package/dist/types/lib/test-utils/mock-data.d.ts

@@ -5,6 +5,7 @@ import { SortDropdownProps } from '../components/action-bar/sort-dropdown';
 import { FilterRowProps } from '../components/filter-row/filter-row';
 import { FilterGroup, FilterOption } from '../components/filter-row/types';
 import { MetadataTableProps } from '../components/metadata-table';
+import { PaginationProps } from '../components/pagination/pagination';
 import { MetadataViewProps } from '../metadata-view';
 import { Column } from '../types';
 export declare const getMockFilterGroups: (filters: FilterOption[]) => {
@@ -29,6 +30,60 @@ export declare const mockFilterGroups: {
     togglable: boolean;
     filters: FilterOption[];
 }[];
+export declare const mockTypedPaginationPropsMarker: PaginationProps;
+export declare const mockTypedPaginationPropsOffset: PaginationProps;
+export declare const mockPaginationPropsOffsetWithNoAdditionalPages: {
+    offset: number;
+    onOffsetChange: (...args: any[]) => void;
+    pageSize: number;
+    totalCount: number;
+    type: "offset";
+};
+export declare const mockPaginationPropsOffsetWithPageAtZero: {
+    totalCount: number;
+    offset: number;
+    onOffsetChange: (...args: any[]) => void;
+    pageSize: number;
+    type: "offset";
+};
+export declare const mockPaginationPropsOffsetWithPageInMiddleOfData: {
+    offset: number;
+    totalCount: number;
+    onOffsetChange: (...args: any[]) => void;
+    pageSize: number;
+    type: "offset";
+};
+export declare const mockPaginationPropsOffsetWithPageAtEndOfData: {
+    offset: number;
+    totalCount: number;
+    onOffsetChange: (...args: any[]) => void;
+    pageSize: number;
+    type: "offset";
+};
+export declare const mockPaginationPropsMarkerWithNoMarkers: {
+    hasNextMarker: boolean;
+    hasPrevMarker: boolean;
+    type: "marker";
+    onMarkerBasedPageChange: (pageDirection: number) => void;
+};
+export declare const mockPaginationPropsMarkerWithNextMarker: {
+    hasNextMarker: boolean;
+    hasPrevMarker: boolean;
+    type: "marker";
+    onMarkerBasedPageChange: (pageDirection: number) => void;
+};
+export declare const mockPaginationPropsMarkerWithPrevMarker: {
+    hasPrevMarker: boolean;
+    hasNextMarker: boolean;
+    type: "marker";
+    onMarkerBasedPageChange: (pageDirection: number) => void;
+};
+export declare const mockPaginationPropsMarkerWithNextAndPrevMarkers: {
+    hasNextMarker: boolean;
+    hasPrevMarker: boolean;
+    type: "marker";
+    onMarkerBasedPageChange: (pageDirection: number) => void;
+};
 export declare const mockFilterRowArgs: FilterRowProps;
 export declare const mockActionBarProps: ActionBarProps;
 export declare const mockTableProps: MetadataTableProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.23.2",
+    "version": "0.24.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^11.12.0",
@@ -20,7 +20,7 @@
         "@box/blueprint-web-assets": "^4.57.0",
         "@box/eslint-plugin-blueprint": "*",
         "@box/item-icon": "^0.13.5",
-        "@box/metadata-filter": "^1.14.5",
+        "@box/metadata-filter": "^1.15.0",
         "@box/storybook-utils": "0.13.11",
         "@box/types": "0.2.0",
         "react-intl": "^6.4.2"

package/dist/chunks/string-filter-chip.js

@@ -1,69 +0,0 @@
-import { Popover as o, FilterChip as t, Button as m } from "@box/blueprint-web";
-import { MetadataStringField as C } from "@box/metadata-filter";
-import { useState as v } from "react";
-import { useIntl as F } from "react-intl";
-import { useFormikContext as g } from "formik";
-import c from "../esm/lib/components/filter-row/messages.js";
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import '../styles/string-filter-chip.css';const y = "_popoverFooter_6tqyh_1", _ = "_filterChipGroup_6tqyh_9", b = {
-  popoverFooter: y,
-  filterChipGroup: _
-}, O = ({
-  formRef: d,
-  id: r,
-  name: n,
-  selected: h,
-  icon: a
-}) => {
-  const {
-    formatMessage: l
-  } = F(), [f, s] = v(!1), p = g(), u = () => {
-    p.handleSubmit(), s(!1);
-  };
-  return /* @__PURE__ */ e("div", {
-    children: /* @__PURE__ */ i(o.Root, {
-      onOpenChange: s,
-      open: f,
-      children: [/* @__PURE__ */ e(o.Trigger, {
-        children: /* @__PURE__ */ i(t.TriggerChip, {
-          selected: h,
-          value: r,
-          children: [a && /* @__PURE__ */ e(t.Icon, {
-            icon: a
-          }), /* @__PURE__ */ e(t.Label, {
-            children: n
-          }), /* @__PURE__ */ e(t.DropdownIndicator, {})]
-        }, r)
-      }), /* @__PURE__ */ i(o.ContentContainer, {
-        align: "start",
-        container: d.current,
-        children: [/* @__PURE__ */ e(o.MainContent, {
-          children: /* @__PURE__ */ e(C, {
-            fieldNamePrefix: `metadata.fields.${r}`,
-            label: n
-          })
-        }), /* @__PURE__ */ i(o.Footer, {
-          className: b.popoverFooter,
-          children: [/* @__PURE__ */ e(m, {
-            onClick: () => {
-              p.setFieldValue(`metadata.fields.${r}.value.enum`, []);
-            },
-            size: "small",
-            variant: "secondary",
-            children: l(c.clearButton)
-          }), /* @__PURE__ */ e(m, {
-            onClick: u,
-            size: "small",
-            type: "submit",
-            variant: "primary",
-            children: l(c.applyButton)
-          })]
-        })]
-      })]
-    })
-  });
-};
-export {
-  O as S,
-  b as s
-};

package/dist/types/lib/components/filter-row/string-filter-chip.d.ts

@@ -1,2 +0,0 @@
-import { FilterChipProps } from './types';
-export declare const StringFilterChip: ({ formRef, id, name, selected, icon }: FilterChipProps) => import("react/jsx-runtime").JSX.Element;