@pushwoosh/dumb-components 2.9.9 → 2.9.11

package/index.d.ts

@@ -12,6 +12,7 @@ export { DatePicker, DatePickerField, DateTimePicker, DateTimePickerField, } fro
 export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem, DropdownMenuSubmenu, } from './DropdownMenu';
 export { GetStartedPage } from './GetStartedPage';
 export { EditableField } from './EditableField';
+export { EmojiPicker } from './EmojiPicker';
 export { InputFile } from './InputFile';
 export { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter, } from './Modal';
 export { Pagination } from './Pagination';

package/index.js

@@ -12,6 +12,7 @@ export { DatePicker, DatePickerField, DateTimePicker, DateTimePickerField } from
 export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem, DropdownMenuSubmenu } from './DropdownMenu';
 export { GetStartedPage } from './GetStartedPage';
 export { EditableField } from './EditableField';
+export { EmojiPicker } from './EmojiPicker';
 export { InputFile } from './InputFile';
 export { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter } from './Modal';
 export { Pagination } from './Pagination';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "2.9.9",
+  "version": "2.9.11",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/shared/dropdownField/__tests__/useDropdownPosition.test.d.ts

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

package/shared/dropdownField/__tests__/useDropdownPosition.test.js

@@ -0,0 +1,60 @@
+import { renderHook } from '@testing-library/react';
+import { useDropdownPosition } from '../useDropdownPosition';
+const floating = {
+  middleware: []
+};
+jest.mock('@floating-ui/react-dom', () => ({
+  ...jest.requireActual('@floating-ui/react-dom'),
+  size: options => ({
+    name: 'size',
+    options
+  }),
+  useFloating: config => {
+    floating.middleware = config.middleware;
+    return {
+      refs: {
+        reference: {
+          current: null
+        },
+        floating: {
+          current: null
+        },
+        setReference: jest.fn(),
+        setFloating: jest.fn()
+      },
+      floatingStyles: {}
+    };
+  }
+}));
+const maxHeightFor = availableHeight => {
+  renderHook(() => useDropdownPosition({
+    isOpen: true
+  }));
+  const style = {};
+  floating.middleware.find(m => m.name === 'size').options.apply({
+    rects: {
+      reference: {
+        width: 200
+      }
+    },
+    elements: {
+      floating: {
+        style
+      }
+    },
+    availableWidth: 1000,
+    availableHeight
+  });
+  return style.maxHeight;
+};
+describe('useDropdownPosition max height', () => {
+  it('caps the dropdown at 300px when there is more room', () => {
+    expect(maxHeightFor(1200)).toBe('300px');
+  });
+  it('shrinks to the room below the field when it is less than the cap', () => {
+    expect(maxHeightFor(200)).toBe('192px');
+  });
+  it('never goes negative', () => {
+    expect(maxHeightFor(4)).toBe('0px');
+  });
+});

package/shared/dropdownField/constants.d.ts

@@ -1,7 +1,7 @@
 import { Color } from '@pushwoosh/kit-constants';
 export declare const LOADING_BORDER_COLORS: readonly [Color.PRIMARY, Color.BRIGHT, Color.BRAND_GREEN, Color.EXCEPTIONAL];
 export declare const LOADING_BORDER_ANIMATION_MS = 3000;
-export declare const DROPDOWN_MAX_HEIGHT = 280;
+export declare const DROPDOWN_MAX_HEIGHT = 300;
 /** Default dropdown width cap. A field wider than this stretches the dropdown to its own width only when the field opts in via `fullWidth`; otherwise the dropdown stays capped here. */
 export declare const DROPDOWN_DEFAULT_WIDTH = 320;
 /** Default debounce (ms) before an async `loadItems` call fires after the query changes. */

package/shared/dropdownField/constants.js

@@ -1,7 +1,7 @@
 import { Color } from '@pushwoosh/kit-constants';
 export const LOADING_BORDER_COLORS = [Color.PRIMARY, Color.BRIGHT, Color.BRAND_GREEN, Color.EXCEPTIONAL];
 export const LOADING_BORDER_ANIMATION_MS = 3000;
-export const DROPDOWN_MAX_HEIGHT = 280;
+export const DROPDOWN_MAX_HEIGHT = 300;
 /** Default dropdown width cap. A field wider than this stretches the dropdown to its own width only when the field opts in via `fullWidth`; otherwise the dropdown stays capped here. */
 export const DROPDOWN_DEFAULT_WIDTH = 320;
 /** Default debounce (ms) before an async `loadItems` call fires after the query changes. */

package/shared/dropdownField/useDropdownPosition.js

@@ -1,5 +1,5 @@
 import { autoUpdate, flip, offset, size, useFloating } from '@floating-ui/react-dom';
-import { DROPDOWN_DEFAULT_WIDTH } from './constants';
+import { DROPDOWN_DEFAULT_WIDTH, DROPDOWN_MAX_HEIGHT } from './constants';
 import { useOnClickOutside } from '../../hooks';
 /**
  * Positions the dropdown relative to the field via floating-ui (flip, offset,
@@ -32,7 +32,7 @@ export function useDropdownPosition({
         Object.assign(elements.floating.style, {
           minWidth: `${minWidth}px`,
           maxWidth: `${maxWidth}px`,
-          maxHeight: `${Math.max(0, availableHeight - 8)}px`
+          maxHeight: `${Math.max(0, Math.min(DROPDOWN_MAX_HEIGHT, availableHeight - 8))}px`
         });
       }
     })],