@hubspot/ui-extensions 0.9.5 → 0.9.7

package/dist/__tests__/experimental/crm/fetchAssociations.spec.js

@@ -8,7 +8,7 @@ Object.defineProperty(global, 'self', {
     value: mockSelf,
     writable: true,
 });
-import { fetchAssociations, pageToOffset, offsetToPage, calculatePaginationFlags, } from '../../../experimental/crm/fetchAssociations';
+import { fetchAssociations, calculatePaginationFlags, } from '../../../experimental/crm/fetchAssociations';
 describe('fetchAssociations', () => {
     // Helper functions
     const createMockResponse = (data, overrides = {}) => ({
@@ -394,28 +394,6 @@ describe('fetchAssociations', () => {
         });
     });
     describe('pagination utilities', () => {
-        describe('pageToOffset', () => {
-            it('should convert page numbers to offsets', () => {
-                expect(pageToOffset(1, 10)).toBe(0);
-                expect(pageToOffset(3, 10)).toBe(20);
-                expect(pageToOffset(2, 25)).toBe(25);
-            });
-            it('should always return 0 for page 1', () => {
-                expect(pageToOffset(1, 10)).toBe(0);
-                expect(pageToOffset(1, 50)).toBe(0);
-            });
-        });
-        describe('offsetToPage', () => {
-            it('should convert offsets to page numbers', () => {
-                expect(offsetToPage(0, 10)).toBe(1);
-                expect(offsetToPage(20, 10)).toBe(3);
-                expect(offsetToPage(15, 10)).toBe(2); // partial page
-            });
-            it('should always return 1 for offset 0', () => {
-                expect(offsetToPage(0, 10)).toBe(1);
-                expect(offsetToPage(0, 25)).toBe(1);
-            });
-        });
         describe('calculatePaginationFlags', () => {
             it('should calculate pagination flags correctly', () => {
                 // Page 1 scenarios

package/dist/__tests__/experimental/hooks/useAssociations.spec.js

@@ -118,7 +118,7 @@ describe('useAssociations with Pagination', () => {
                 toObjectType: '0-1',
                 properties: ['firstname', 'lastname'],
                 pageLength: 10,
-                offset: 0,
+                offset: undefined, // First page starts with undefined offset
             }), expect.any(Object));
         });
         it('should handle empty results correctly', async () => {
@@ -182,7 +182,7 @@ describe('useAssociations with Pagination', () => {
             });
             // Verify API was called with correct offset for page 2
             expect(mockFetchAssociations).toHaveBeenLastCalledWith(expect.objectContaining({
-                offset: 10, // (page 2 - 1) * pageSize 10 = 10
+                offset: 10, // Uses nextOffset (10) from first page response
             }), expect.any(Object));
         });
         it('should navigate to previous page correctly', async () => {

package/dist/coreComponents.d.ts

@@ -806,3 +806,27 @@ export declare const TimeInput: "TimeInput" & {
     readonly props?: types.TimeInputProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TimeInput", types.TimeInputProps, true>>;
+/**
+ * The `CurrencyInput` component renders a currency input field with proper formatting,
+ * currency symbols, and locale-specific display patterns. Commonly used within the `Form` component.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/currency-input Docs}
+ */
+export declare const CurrencyInput: "CurrencyInput" & {
+    readonly type?: "CurrencyInput" | undefined;
+    readonly props?: types.CurrencyInputProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CurrencyInput", types.CurrencyInputProps, true>>;
+/**
+ * The `Inline` component spreads aligns its children horizontally (along the x-axis).
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/inline Docs}
+ */ export declare const Inline: "Inline" & {
+    readonly type?: "Inline" | undefined;
+    readonly props?: types.InlineProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Inline", types.InlineProps, true>>;

package/dist/coreComponents.js

@@ -542,3 +542,19 @@ export const SearchInput = createRemoteReactComponent('SearchInput');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/time-input Docs}
  */
 export const TimeInput = createRemoteReactComponent('TimeInput');
+/**
+ * The `CurrencyInput` component renders a currency input field with proper formatting,
+ * currency symbols, and locale-specific display patterns. Commonly used within the `Form` component.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/currency-input Docs}
+ */
+export const CurrencyInput = createRemoteReactComponent('CurrencyInput');
+/**
+ * The `Inline` component spreads aligns its children horizontally (along the x-axis).
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/inline Docs}
+ */ export const Inline = createRemoteReactComponent('Inline');

package/dist/experimental/crm/fetchAssociations.d.ts

@@ -1,13 +1,5 @@
 import { FetchCrmPropertiesOptions } from './fetchCrmProperties';
 export declare const DEFAULT_PAGE_SIZE = 10;
-/**
- * Convert page number and page size to offset for API calls
- */
-export declare function pageToOffset(page: number, pageSize: number): number;
-/**
- * Convert offset and page size to page number
- */
-export declare function offsetToPage(offset: number, pageSize: number): number;
 /**
  * Calculate pagination flags based on current page and API hasMore flag
  */

package/dist/experimental/crm/fetchAssociations.js

@@ -1,16 +1,4 @@
 export const DEFAULT_PAGE_SIZE = 10;
-/**
- * Convert page number and page size to offset for API calls
- */
-export function pageToOffset(page, pageSize) {
-    return (page - 1) * pageSize;
-}
-/**
- * Convert offset and page size to page number
- */
-export function offsetToPage(offset, pageSize) {
-    return Math.floor(offset / pageSize) + 1;
-}
 /**
  * Calculate pagination flags based on current page and API hasMore flag
  */

package/dist/experimental/hooks/useAssociations.js

@@ -1,6 +1,6 @@
 import { useEffect, useReducer, useMemo, useRef, useCallback } from 'react';
 import { logger } from '../../logger';
-import { fetchAssociations, DEFAULT_PAGE_SIZE, pageToOffset, calculatePaginationFlags, } from '../crm/fetchAssociations';
+import { fetchAssociations, DEFAULT_PAGE_SIZE, calculatePaginationFlags, } from '../crm/fetchAssociations';
 function createInitialState(pageSize) {
     return {
         results: [],
@@ -9,6 +9,9 @@ function createInitialState(pageSize) {
         currentPage: 1,
         pageSize,
         hasMore: false,
+        currentOffset: undefined,
+        nextOffset: undefined,
+        offsetHistory: [],
     };
 }
 function associationsReducer(state, action) {
@@ -25,6 +28,8 @@ function associationsReducer(state, action) {
                 isLoading: false,
                 results: action.payload.results,
                 hasMore: action.payload.hasMore,
+                currentOffset: action.payload.currentOffset,
+                nextOffset: action.payload.nextOffset,
                 error: null,
             };
         case 'FETCH_ERROR':
@@ -34,17 +39,31 @@ function associationsReducer(state, action) {
                 error: action.payload,
                 results: [],
                 hasMore: false,
+                currentOffset: undefined,
+                nextOffset: undefined,
             };
         case 'NEXT_PAGE':
             return {
                 ...state,
                 currentPage: state.currentPage + 1,
+                offsetHistory: state.currentOffset !== undefined
+                    ? [...state.offsetHistory, state.currentOffset]
+                    : state.offsetHistory,
+                currentOffset: state.nextOffset,
+                nextOffset: undefined,
             };
-        case 'PREVIOUS_PAGE':
+        case 'PREVIOUS_PAGE': {
+            const newPage = Math.max(1, state.currentPage - 1);
+            const newHistory = [...state.offsetHistory];
+            const previousOffset = newHistory.pop();
             return {
                 ...state,
-                currentPage: Math.max(1, state.currentPage - 1),
+                currentPage: newPage,
+                offsetHistory: newHistory,
+                currentOffset: previousOffset,
+                nextOffset: undefined,
             };
+        }
         case 'RESET':
             return {
                 ...state,
@@ -52,6 +71,9 @@ function associationsReducer(state, action) {
                 results: [],
                 hasMore: false,
                 error: null,
+                currentOffset: undefined,
+                nextOffset: undefined,
+                offsetHistory: [],
             };
         default:
             return state;
@@ -117,12 +139,12 @@ export function useAssociations(config, options = DEFAULT_OPTIONS) {
         const fetchData = async () => {
             try {
                 dispatch({ type: 'FETCH_START' });
-                // Build request using current page and pagination utilities
+                // Build request using current offset token
                 const request = {
                     toObjectType: stableConfig.toObjectType,
                     properties: stableConfig.properties,
                     pageLength: pageSize,
-                    offset: pageToOffset(state.currentPage, pageSize),
+                    offset: state.currentOffset,
                 };
                 const result = await fetchAssociations(request, {
                     propertiesToFormat: stableOptions.propertiesToFormat,
@@ -134,6 +156,8 @@ export function useAssociations(config, options = DEFAULT_OPTIONS) {
                         payload: {
                             results: result.data.results,
                             hasMore: result.data.hasMore,
+                            nextOffset: result.data.nextOffset,
+                            currentOffset: state.currentOffset,
                         },
                     });
                     cleanup = result.cleanup;
@@ -156,7 +180,13 @@ export function useAssociations(config, options = DEFAULT_OPTIONS) {
                 cleanup();
             }
         };
-    }, [stableConfig, stableOptions, state.currentPage, pageSize]);
+    }, [
+        stableConfig,
+        stableOptions,
+        state.currentPage,
+        state.currentOffset,
+        pageSize,
+    ]);
     // Calculate pagination flags
     const paginationFlags = calculatePaginationFlags(state.currentPage, state.hasMore);
     return {

package/dist/experimental/index.d.ts

@@ -15,12 +15,6 @@ declare const MediaObject: "MediaObject" & {
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"MediaObject", experimentalTypes.MediaObjectProps, true>>;
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
-declare const Inline: "Inline" & {
-    readonly type?: "Inline" | undefined;
-    readonly props?: experimentalTypes.InlineProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Inline", experimentalTypes.InlineProps, true>>;
-/** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 declare const Stack2: "Stack2" & {
     readonly type?: "Stack2" | undefined;
     readonly props?: experimentalTypes.Stack2Props | undefined;
@@ -85,12 +79,6 @@ declare const FileInput: "FileInput" & {
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"FileInput", experimentalTypes.FileInputProps, true>>;
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
-declare const CurrencyInput: "CurrencyInput" & {
-    readonly type?: "CurrencyInput" | undefined;
-    readonly props?: experimentalTypes.CurrencyInputProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CurrencyInput", experimentalTypes.CurrencyInputProps, true>>;
-/** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 declare const HeaderActions: "HeaderActions" & {
     readonly type?: "HeaderActions" | undefined;
     readonly props?: experimentalTypes.HeaderActionsProps | undefined;
@@ -108,4 +96,4 @@ declare const SecondaryHeaderActionButton: "SecondaryHeaderActionButton" & {
     readonly props?: experimentalTypes.HeaderActionButtonProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"SecondaryHeaderActionButton", experimentalTypes.HeaderActionButtonProps, true>>;
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, CurrencyInput, HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, };
+export { Iframe, MediaObject, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, };

package/dist/experimental/index.js

@@ -8,8 +8,6 @@ const MediaObject = createRemoteReactComponent('MediaObject', {
     fragmentProps: ['itemRight', 'itemLeft'],
 });
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
-const Inline = createRemoteReactComponent('Inline');
-/** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 const Stack2 = createRemoteReactComponent('Stack2');
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 const Center = createRemoteReactComponent('Center');
@@ -38,8 +36,6 @@ const ExpandableText = createRemoteReactComponent('ExpandableText');
 const Popover = createRemoteReactComponent('Popover');
 const FileInput = createRemoteReactComponent('FileInput');
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
-const CurrencyInput = createRemoteReactComponent('CurrencyInput');
-/** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 const HeaderActions = createRemoteReactComponent('HeaderActions');
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 const PrimaryHeaderActionButton = createRemoteReactComponent('PrimaryHeaderActionButton', {
@@ -49,4 +45,4 @@ const PrimaryHeaderActionButton = createRemoteReactComponent('PrimaryHeaderActio
 const SecondaryHeaderActionButton = createRemoteReactComponent('SecondaryHeaderActionButton', {
     fragmentProps: ['overlay'],
 });
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, CurrencyInput, HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, };
+export { Iframe, MediaObject, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, };

package/dist/experimental/types.d.ts

@@ -19,16 +19,6 @@ export type FlexJustify = 'center' | 'end' | 'start' | 'around' | 'between';
  * @experimental do not use in production
  */
 export type FlexAlign = 'start' | 'center' | 'baseline' | 'end' | 'stretch';
-/**
- * @ignore
- * @experimental do not use in production
- */
-export interface InlineProps extends BaseLayout {
-    justify?: FlexJustify;
-    align?: FlexAlign;
-    gap?: AllDistances;
-    children?: ReactNode;
-}
 /**
  * @ignore
  * @experimental do not use in production
@@ -252,31 +242,6 @@ export interface BaseInputProps<T = string, V = string> {
  * @ignore
  * @experimental do not use in production
  */
-type BaseInputForNumber = Omit<BaseInputProps<number, number>, 'onInput'>;
-/**
- * @ignore
- * @experimental do not use in production
- */
-export interface CurrencyInputProps extends BaseInputForNumber {
-    /**
-     * ISO 4217 currency code (e.g., "USD", "EUR", "JPY")
-     * @defaultValue "USD"
-     */
-    currency?: string;
-    /**
-     * Sets the number of decimal places for the currency
-     * If not provided, defaults to currency-specific precision
-     */
-    precision?: number;
-    /**
-     * Sets the lower bound of the input
-     */
-    min?: number;
-    /**
-     * Sets the upper bound of the input
-     */
-    max?: number;
-}
 /**
  * @ignore
  * @experimental do not use in production

package/dist/types.d.ts

@@ -1084,6 +1084,31 @@ export interface NumberInputProps extends BaseInputForNumber {
     /** @deprecated use onChange instead. It doesn't guarantee valid format */
     onInput?: (value: number) => void;
 }
+/**
+ * The props type for {@link !components.CurrencyInput}.
+ *
+ * @category Component Props
+ */
+export interface CurrencyInputProps extends BaseInputForNumber {
+    /**
+     * ISO 4217 currency code (e.g., "USD", "EUR", "JPY")
+     * @defaultValue "USD"
+     */
+    currency?: string;
+    /**
+     * Sets the number of decimal places for the currency
+     * If not provided, defaults to currency-specific precision
+     */
+    precision?: number;
+    /**
+     * Sets the lower bound of the input
+     */
+    min?: number;
+    /**
+     * Sets the upper bound of the input
+     */
+    max?: number;
+}
 /**
  * The props type for {@link !components.StepperInput}.
  *
@@ -1279,6 +1304,8 @@ export interface StackProps {
      */
     width?: 'auto' | '100%';
 }
+export type FlexJustify = 'center' | 'end' | 'start' | 'around' | 'between';
+export type FlexAlign = 'start' | 'center' | 'baseline' | 'end' | 'stretch';
 /**
  * The props type for {@link !components.Flex}.
  *
@@ -1307,18 +1334,18 @@ export interface FlexProps {
      *
      * @defaultValue `"start"`
      */
-    justify?: 'center' | 'end' | 'start' | 'around' | 'between';
+    justify?: FlexJustify;
     /**
      * Distributes components along the cross-axis using the available free space.
      *
      * @defaultValue `"stretch"`
      */
-    align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+    align?: FlexAlign;
     /**
      * Overrides Flex's `alignItem` value for this element.
      *
      */
-    alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+    alignSelf?: FlexAlign;
     /**
      * Whether components will wrap instead of trying to fit on one line.
      *
@@ -1356,6 +1383,34 @@ export interface BoxProps {
      */
     flex?: 'initial' | 'auto' | 'none' | number;
 }
+/**
+ * The props type for {@link !components.Inline}.
+ *
+ * @category Component Props
+ */
+export interface InlineProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
+    children?: ReactNode;
+    /**
+     * Distributes components along the main axis using the available free space.
+     * @defaultValue `"start"`
+     */
+    justify?: FlexJustify;
+    /**
+     * Distributes components along the cross-axis using the available free space.
+     * @defaultValue `"center"`
+     */
+    align?: FlexAlign;
+    /**
+     * Sets the spacing between components.
+     *
+     * @defaultValue `"flush"`
+     */
+    gap?: AllDistances;
+}
 /**
  * The props type for {@link !components.Link}.
  *
@@ -1670,15 +1725,6 @@ export interface BaseSelectProps {
      *
      */
     validationMessage?: string;
-    /**
-     * The options to display in the dropdown menu.
-     */
-    options: {
-        /** Will be used as the display text. **/
-        label: string;
-        /** Should be the option's unique identifier, which is submitted with the form. **/
-        value: string | number;
-    }[];
     /**
      * The variant type for the select.
      *
@@ -1696,7 +1742,7 @@ export interface SelectProps extends BaseSelectProps {
      * The value of the select input.
      *
      */
-    value?: string | number;
+    value?: string | number | boolean;
     /**
      * A callback function that is invoked when the value is committed.
      *
@@ -1717,6 +1763,15 @@ export interface SelectProps extends BaseSelectProps {
      * @event
      */
     onInput?: (value: string) => void;
+    /**
+     * The options to display in the dropdown menu.
+     */
+    options: {
+        /** Will be used as the display text. **/
+        label: string;
+        /** Should be the option's unique identifier, which is submitted with the form. **/
+        value: string | number | boolean;
+    }[];
 }
 /**
  * The props type for {@link !components.MultiSelect}.
@@ -1735,6 +1790,15 @@ export interface MultiSelectProps extends BaseSelectProps {
      * @event
      */
     onChange?: (value: NonNullable<MultiSelectProps['value']>) => void;
+    /**
+     * The options to display in the dropdown menu.
+     */
+    options: {
+        /** Will be used as the display text. **/
+        label: string;
+        /** Should be the option's unique identifier, which is submitted with the form. **/
+        value: string | number;
+    }[];
 }
 /**
  * The props type for {@link !components.StatisticsTrend}.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -66,5 +66,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "5.0.4"
   },
-  "gitHead": "8344193a13ab5874924b02d67413dad052558ecf"
+  "gitHead": "b9a6650baca7fd7326e7de6ffeacc8d5c097e126"
 }