@box/metadata-view 0.23.1 → 0.24.0

package/dist/i18n/sv-SE.js

@@ -5,6 +5,7 @@ export default {
   "groupSharedFeatures.metadataView.actionBar.switchToListView": "Växla till listvy",
   "groupSharedFeatures.metadataView.filterRow.AllFilters": "Alla filter",
   "groupSharedFeatures.metadataView.filterRow.applyButton": "Tillämpa",
+  "groupSharedFeatures.metadataView.filterRow.chipNameWithCount": "{name} ({count})",
   "groupSharedFeatures.metadataView.filterRow.clearButton": "Rensa",
   "groupSharedFeatures.metadataView.filterRow.keywordSearchFilterPlaceholder": "Enter keywords",
   "groupSharedFeatures.metadataView.filterRow.textInputPlaceholder": "Ange värde",
@@ -19,5 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.itemList.refreshButton": "Uppdatera",
   "groupSharedFeatures.metadataView.itemList.selectAll": "Välj alla",
   "groupSharedFeatures.metadataView.metadataSearchField.searchInputAriaLabel": "Search",
-  "groupSharedFeatures.metadataView.metadataSearchField.searchInputClearAriaLabel": "Clear"
+  "groupSharedFeatures.metadataView.metadataSearchField.searchInputClearAriaLabel": "Clear",
+  "groupSharedFeatures.metadataView.pagination.nextPageButton": "Next",
+  "groupSharedFeatures.metadataView.pagination.pageEntryStatus": "Showing {startEntryIndex} to {endEntryIndex} of {totalCount} entries",
+  "groupSharedFeatures.metadataView.pagination.paginationLabel": "Pagination navigation controls and current page information",
+  "groupSharedFeatures.metadataView.pagination.previousPageButton": "Previous"
 }

package/dist/i18n/tr-TR.js

@@ -5,6 +5,7 @@ export default {
   "groupSharedFeatures.metadataView.actionBar.switchToListView": "Liste Görünümüne Geç",
   "groupSharedFeatures.metadataView.filterRow.AllFilters": "Tüm Filtreler",
   "groupSharedFeatures.metadataView.filterRow.applyButton": "Uygula",
+  "groupSharedFeatures.metadataView.filterRow.chipNameWithCount": "{name} ({count})",
   "groupSharedFeatures.metadataView.filterRow.clearButton": "Temizle",
   "groupSharedFeatures.metadataView.filterRow.keywordSearchFilterPlaceholder": "Enter keywords",
   "groupSharedFeatures.metadataView.filterRow.textInputPlaceholder": "Değer Ayarla",
@@ -19,5 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.itemList.refreshButton": "Yenile",
   "groupSharedFeatures.metadataView.itemList.selectAll": "Tümünü Seç",
   "groupSharedFeatures.metadataView.metadataSearchField.searchInputAriaLabel": "Search",
-  "groupSharedFeatures.metadataView.metadataSearchField.searchInputClearAriaLabel": "Clear"
+  "groupSharedFeatures.metadataView.metadataSearchField.searchInputClearAriaLabel": "Clear",
+  "groupSharedFeatures.metadataView.pagination.nextPageButton": "Next",
+  "groupSharedFeatures.metadataView.pagination.pageEntryStatus": "Showing {startEntryIndex} to {endEntryIndex} of {totalCount} entries",
+  "groupSharedFeatures.metadataView.pagination.paginationLabel": "Pagination navigation controls and current page information",
+  "groupSharedFeatures.metadataView.pagination.previousPageButton": "Previous"
 }

package/dist/i18n/zh-CN.js

@@ -5,6 +5,7 @@ export default {
   "groupSharedFeatures.metadataView.actionBar.switchToListView": "切换为列表视图",
   "groupSharedFeatures.metadataView.filterRow.AllFilters": "所有筛选条件",
   "groupSharedFeatures.metadataView.filterRow.applyButton": "应用程序",
+  "groupSharedFeatures.metadataView.filterRow.chipNameWithCount": "{name} ({count})",
   "groupSharedFeatures.metadataView.filterRow.clearButton": "清除",
   "groupSharedFeatures.metadataView.filterRow.keywordSearchFilterPlaceholder": "Enter keywords",
   "groupSharedFeatures.metadataView.filterRow.textInputPlaceholder": "设置值",
@@ -19,5 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.itemList.refreshButton": "刷新",
   "groupSharedFeatures.metadataView.itemList.selectAll": "选择全部",
   "groupSharedFeatures.metadataView.metadataSearchField.searchInputAriaLabel": "Search",
-  "groupSharedFeatures.metadataView.metadataSearchField.searchInputClearAriaLabel": "Clear"
+  "groupSharedFeatures.metadataView.metadataSearchField.searchInputClearAriaLabel": "Clear",
+  "groupSharedFeatures.metadataView.pagination.nextPageButton": "Next",
+  "groupSharedFeatures.metadataView.pagination.pageEntryStatus": "Showing {startEntryIndex} to {endEntryIndex} of {totalCount} entries",
+  "groupSharedFeatures.metadataView.pagination.paginationLabel": "Pagination navigation controls and current page information",
+  "groupSharedFeatures.metadataView.pagination.previousPageButton": "Previous"
 }

package/dist/i18n/zh-TW.js

@@ -5,6 +5,7 @@ export default {
   "groupSharedFeatures.metadataView.actionBar.switchToListView": "切換至清單檢視",
   "groupSharedFeatures.metadataView.filterRow.AllFilters": "全部篩選條件",
   "groupSharedFeatures.metadataView.filterRow.applyButton": "套用",
+  "groupSharedFeatures.metadataView.filterRow.chipNameWithCount": "{name} ({count})",
   "groupSharedFeatures.metadataView.filterRow.clearButton": "清除",
   "groupSharedFeatures.metadataView.filterRow.keywordSearchFilterPlaceholder": "Enter keywords",
   "groupSharedFeatures.metadataView.filterRow.textInputPlaceholder": "設定值",
@@ -19,5 +20,9 @@ export default {
   "groupSharedFeatures.metadataView.itemList.refreshButton": "重新整理",
   "groupSharedFeatures.metadataView.itemList.selectAll": "全選",
   "groupSharedFeatures.metadataView.metadataSearchField.searchInputAriaLabel": "Search",
-  "groupSharedFeatures.metadataView.metadataSearchField.searchInputClearAriaLabel": "Clear"
+  "groupSharedFeatures.metadataView.metadataSearchField.searchInputClearAriaLabel": "Clear",
+  "groupSharedFeatures.metadataView.pagination.nextPageButton": "Next",
+  "groupSharedFeatures.metadataView.pagination.pageEntryStatus": "Showing {startEntryIndex} to {endEntryIndex} of {totalCount} entries",
+  "groupSharedFeatures.metadataView.pagination.paginationLabel": "Pagination navigation controls and current page information",
+  "groupSharedFeatures.metadataView.pagination.previousPageButton": "Previous"
 }

package/dist/styles/action-bar.css

@@ -1 +1 @@
-._actionBar_1bpah_1{display:flex;justify-content:space-between}._additionalActions_1bpah_6{display:flex}
+._actionBar_1jgp4_1{display:flex;justify-content:space-between;padding:var(--space-4) 0}@media (max-width: 390px){._filterRow_1jgp4_8{display:none}}._additionalActions_1jgp4_13{display:flex;height:var(--size-8)}@media (max-width: 390px){._additionalActions_1jgp4_13{flex-grow:1;justify-content:space-between}}

package/dist/styles/form-filter-chip.css

@@ -0,0 +1 @@
+._popoverFooter_6tqyh_1{display:flex;flex-direction:row;gap:var(--space-2);align-items:center;justify-content:flex-end}._filterChipGroup_6tqyh_9{display:flex;flex-wrap:wrap}

package/dist/styles/metadata-view.css

@@ -0,0 +1 @@
+._contentContainer_19ns1_8{overflow:auto}

package/dist/styles/pagination-controls.css

@@ -0,0 +1 @@
+._pagination_1ozaq_1{display:flex;align-items:center;justify-content:space-between;min-height:var(--size-12);margin-bottom:var(--space-3)}._paginationButtonContainer_1ozaq_9{display:flex;gap:var(--space-2)}

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

@@ -0,0 +1,10 @@
+export interface FormFilterChipProps {
+    children: React.ReactNode;
+    formRef: React.RefObject<HTMLFormElement>;
+    icon?: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, 'ref'> & React.RefAttributes<SVGSVGElement>>;
+    id: string;
+    name: string;
+    selected: boolean;
+}
+export declare const FormFilterChip: ({ children, formRef, icon, id, name, selected }: FormFilterChipProps) => import("react/jsx-runtime").JSX.Element;
+export default FormFilterChip;

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

@@ -24,5 +24,10 @@ declare const messages: {
         description: string;
         id: string;
     };
+    chipNameWithCount: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
 };
 export default messages;

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

@@ -0,0 +1,8 @@
+import { FilterOption } from './types';
+export interface MetadataFilterChipProps {
+    filterOption: FilterOption;
+    formRef: React.RefObject<HTMLFormElement>;
+    selected: boolean;
+}
+export declare const MetadataFilterChip: ({ filterOption, formRef, selected }: MetadataFilterChipProps) => import("react/jsx-runtime").JSX.Element;
+export default MetadataFilterChip;

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.1",
+    "version": "0.24.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^11.12.0",
@@ -19,8 +19,8 @@
         "@box/blueprint-web": "^11.12.0",
         "@box/blueprint-web-assets": "^4.57.0",
         "@box/eslint-plugin-blueprint": "*",
-        "@box/item-icon": "^0.13.4",
-        "@box/metadata-filter": "^1.14.4",
+        "@box/item-icon": "^0.13.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/esm/lib/components/filter-row/string-filter-chip.js

@@ -1,67 +0,0 @@
-import { Popover as o, FilterChip as t, Button as m } from "@box/blueprint-web";
-import { MetadataStringField as v } from "@box/metadata-filter";
-import { useState as g } from "react";
-import { useIntl as F } from "react-intl";
-import { useFormikContext as C } from "formik";
-import c from "./messages.js";
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import '../../../../styles/string-filter-chip.css';const b = "_popoverFooter_1tgko_1", k = {
-  popoverFooter: b
-}, P = ({
-  formRef: d,
-  id: r,
-  name: i,
-  selected: f,
-  icon: a
-}) => {
-  const {
-    formatMessage: l
-  } = F(), [h, s] = g(!1), p = C(), u = () => {
-    p.handleSubmit(), s(!1);
-  };
-  return /* @__PURE__ */ e("div", {
-    children: /* @__PURE__ */ n(o.Root, {
-      onOpenChange: s,
-      open: h,
-      children: [/* @__PURE__ */ e(o.Trigger, {
-        children: /* @__PURE__ */ n(t.TriggerChip, {
-          selected: f,
-          value: r,
-          children: [a && /* @__PURE__ */ e(t.Icon, {
-            icon: a
-          }), /* @__PURE__ */ e(t.Label, {
-            children: i
-          }), /* @__PURE__ */ e(t.DropdownIndicator, {})]
-        }, r)
-      }), /* @__PURE__ */ n(o.ContentContainer, {
-        align: "start",
-        container: d.current,
-        children: [/* @__PURE__ */ e(o.MainContent, {
-          children: /* @__PURE__ */ e(v, {
-            fieldNamePrefix: `metadata.fields.${r}`,
-            label: i
-          })
-        }), /* @__PURE__ */ n(o.Footer, {
-          className: k.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 {
-  P as StringFilterChip
-};

package/dist/styles/string-filter-chip.css

@@ -1 +0,0 @@
-._popoverFooter_1tgko_1{display:flex;flex-direction:row;gap:var(--space-2);align-items:center;justify-content:flex-end}

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;