@evoke-platform/ui-components 1.6.0-dev.2 → 1.6.0-dev.21

package/dist/published/components/custom/ResponsiveOverflow/ResponsiveOverflow.test.js

@@ -0,0 +1,100 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { vi } from 'vitest';
+import Button from '../../core/Button/Button';
+import ResponsiveOverflow from './ResponsiveOverflow';
+let mockResizeCallback = null;
+const originalResizeObserver = global.ResizeObserver;
+const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+describe('ResponsiveOverflow', () => {
+    // Helper function to simulate resize events
+    const simulateResize = (width) => {
+        Element.prototype.getBoundingClientRect = vi.fn(() => ({
+            width,
+        }));
+        if (mockResizeCallback) {
+            mockResizeCallback([], {});
+        }
+    };
+    beforeEach(() => {
+        mockResizeCallback = null;
+        global.ResizeObserver = class ResizeObserver {
+            constructor(callback) {
+                mockResizeCallback = callback;
+            }
+            observe() { }
+            unobserve() { }
+            disconnect() { }
+        };
+    });
+    afterEach(() => {
+        global.ResizeObserver = originalResizeObserver;
+        Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    });
+    it('renders children correctly', () => {
+        render(React.createElement(ResponsiveOverflow, null,
+            React.createElement(Button, null, "Button 1"),
+            React.createElement(Button, null, "Button 2"),
+            React.createElement(Button, null, "Button 3")));
+        expect(screen.getByText('Button 1')).toBeInTheDocument();
+        expect(screen.getByText('Button 2')).toBeInTheDocument();
+        expect(screen.getByText('Button 3')).toBeInTheDocument();
+    });
+    it('displays custom button text when overflowing', async () => {
+        render(React.createElement(ResponsiveOverflow, { moreButtonText: "Show More" },
+            React.createElement(Button, null, "Button 1"),
+            React.createElement(Button, null, "Button 2"),
+            React.createElement(Button, null, "Button 3"),
+            React.createElement(Button, null, "Button 4")));
+        simulateResize(80); // Narrow width to force overflow
+        await screen.findByRole('button', { name: 'Show More' });
+    });
+    it('displays custom more button when overflowing', async () => {
+        const customButton = React.createElement(Button, { "data-testid": "custom-more" }, "Custom More");
+        render(React.createElement(ResponsiveOverflow, { customMoreButton: customButton },
+            React.createElement(Button, null, "Button 1"),
+            React.createElement(Button, null, "Button 2"),
+            React.createElement(Button, null, "Button 3"),
+            React.createElement(Button, null, "Button 4")));
+        simulateResize(80);
+        await screen.findByRole('button', { name: 'Custom More' });
+    });
+    it('shows More button when triggered by ResizeObserver', async () => {
+        render(React.createElement(ResponsiveOverflow, { moreButtonText: "More" },
+            React.createElement(Button, null, "Button 1"),
+            React.createElement(Button, null, "Button 2"),
+            React.createElement(Button, null, "Button 3"),
+            React.createElement(Button, null, "Button 4"),
+            React.createElement(Button, null, "Button 5"),
+            React.createElement(Button, null, "Button 6"),
+            React.createElement(Button, null, "Button 7"),
+            React.createElement(Button, null, "Button 8"),
+            React.createElement(Button, null, "Button 9"),
+            React.createElement(Button, null, "Button 10")));
+        simulateResize(80);
+        const moreBtn = await screen.findByRole('button', { name: 'More' });
+        await screen.findByRole('button', { name: 'Button 1' });
+        await userEvent.click(moreBtn);
+        // Button 9 should be in the overflow menu as a menuitem
+        await screen.findByRole('menuitem', { name: 'Button 9' });
+    });
+    it('handles dynamic resizing from wide to narrow conditions', async () => {
+        render(React.createElement(ResponsiveOverflow, { moreButtonText: "More" },
+            React.createElement(Button, null, "Button 1"),
+            React.createElement(Button, null, "Button 2"),
+            React.createElement(Button, null, "Button 3"),
+            React.createElement(Button, null, "Button 4"),
+            React.createElement(Button, null, "Button 5"),
+            React.createElement(Button, null, "Button 6")));
+        simulateResize(800);
+        // With wide container, all buttons should fit
+        // More button should not be visible
+        expect(screen.queryByRole('button', { name: 'More' })).not.toBeInTheDocument();
+        // Now simulate narrow conditions - force overflow
+        simulateResize(200);
+        // With narrow container, More button should now be visible
+        await screen.findByRole('button', { name: 'More' });
+    });
+});

package/dist/published/components/custom/ResponsiveOverflow/index.d.ts

@@ -0,0 +1,4 @@
+import ResponsiveOverflow, { ResponsiveOverflowProps } from './ResponsiveOverflow';
+export { ResponsiveOverflow };
+export type { ResponsiveOverflowProps };
+export default ResponsiveOverflow;

package/dist/published/components/custom/ResponsiveOverflow/index.js

@@ -0,0 +1,3 @@
+import ResponsiveOverflow from './ResponsiveOverflow';
+export { ResponsiveOverflow };
+export default ResponsiveOverflow;

package/dist/published/components/custom/index.d.ts

@@ -9,5 +9,6 @@ export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';
 export { RepeatableField } from './RepeatableField';
+export { ResponsiveOverflow } from './ResponsiveOverflow';
 export { RichTextViewer } from './RichTextViewer';
 export { UserAvatar } from './UserAvatar';

package/dist/published/components/custom/index.js

@@ -8,5 +8,6 @@ export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';
 export { RepeatableField } from './RepeatableField';
+export { ResponsiveOverflow } from './ResponsiveOverflow';
 export { RichTextViewer } from './RichTextViewer';
 export { UserAvatar } from './UserAvatar';

package/dist/published/index.d.ts

@@ -2,7 +2,7 @@ export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMe
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, RichTextViewer, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
 export type { FormRef } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';

package/dist/published/index.js

@@ -2,7 +2,7 @@ export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMe
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, RichTextViewer, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './theme';

package/dist/published/stories/ResponsiveOverflow.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { ResponsiveOverflowProps } from '../components/custom/ResponsiveOverflow';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const ResizableDemo: () => React.JSX.Element;
+export declare const WithLinks: Story<ResponsiveOverflowProps>;
+export declare const WithCustomMoreButton: Story<ResponsiveOverflowProps>;

package/dist/published/stories/ResponsiveOverflow.stories.js

@@ -0,0 +1,91 @@
+import { KeyboardArrowDownRounded } from '@mui/icons-material';
+import { Box, Paper, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import Button from '../components/core/Button/Button';
+import Link from '../components/core/Link/Link';
+import ResponsiveOverflow from '../components/custom/ResponsiveOverflow';
+export default {
+    title: 'Custom/ResponsiveOverflow',
+    component: ResponsiveOverflow,
+    parameters: {
+        componentSubtitle: 'A container that handles overflow with a dropdown menu',
+    },
+    argTypes: {
+        moreButtonText: {
+            control: 'text',
+            description: 'Text for the overflow button',
+            defaultValue: 'More',
+        },
+        customMoreButton: {
+            control: false,
+            description: 'Custom button element to replace the default More button',
+        },
+        children: {
+            control: false,
+            description: 'React elements to display in the container',
+        },
+    },
+};
+const Template = (args) => React.createElement(ResponsiveOverflow, { ...args });
+// Interactive demo with resizable container
+export const ResizableDemo = () => {
+    const [width, setWidth] = useState(800);
+    const handleChange = (event) => {
+        setWidth(Number(event.target.value));
+    };
+    return (React.createElement(Box, null,
+        React.createElement(Typography, { variant: "h6", gutterBottom: true }, "Resize Container"),
+        React.createElement(Box, { sx: { mb: 2 } },
+            React.createElement(Typography, { variant: "body2", gutterBottom: true },
+                "Container Width: ",
+                width,
+                "px"),
+            React.createElement("input", { type: "range", min: 200, max: 1000, value: width, onChange: handleChange, 
+                // eslint-disable-next-line no-inline-styles/no-inline-styles
+                style: { width: '100%' }, "aria-label": "Adjust container width", title: "Drag to resize container" })),
+        React.createElement(Paper, { elevation: 1, sx: {
+                width: `${width}px`,
+                padding: 2,
+                transition: 'width 0.3s ease',
+                backgroundColor: '#f5f5f5',
+            } },
+            React.createElement(ResponsiveOverflow, { moreButtonText: "More" },
+                React.createElement(Button, { variant: "contained", color: "primary" }, "Dashboard"),
+                React.createElement(Button, { variant: "contained" }, "Applications"),
+                React.createElement(Button, { variant: "contained" }, "Inspections"),
+                React.createElement(Button, { variant: "contained" }, "Reports"),
+                React.createElement(Button, { variant: "contained" }, "Licenses"),
+                React.createElement(Button, { variant: "contained" }, "Permits"),
+                React.createElement(Button, { variant: "contained" }, "Requests"),
+                React.createElement(Button, { variant: "contained" }, "Locations")))));
+};
+export const WithLinks = Template.bind({});
+WithLinks.args = {
+    moreButtonText: 'More',
+    children: [
+        React.createElement(Link, { key: "1" }, "Applications"),
+        React.createElement(Link, { key: "2" }, "Inspections"),
+        React.createElement(Link, { key: "3" }, "Licenses"),
+        React.createElement(Link, { key: "4" }, "Permits"),
+        React.createElement(Link, { key: "5" }, "Requests"),
+        React.createElement(Link, { key: "6" }, "Compliance"),
+    ],
+};
+export const WithCustomMoreButton = Template.bind({});
+WithCustomMoreButton.args = {
+    customMoreButton: (React.createElement(Button, { variant: "contained", endIcon: React.createElement(KeyboardArrowDownRounded, null) }, "More Options")),
+    children: [
+        React.createElement(Button, { variant: "contained", color: "primary", key: "1" }, "Dashboard"),
+        React.createElement(Button, { variant: "contained", key: "2" }, "Applications"),
+        React.createElement(Button, { variant: "contained", key: "3" }, "Inspections"),
+        React.createElement(Button, { variant: "contained", key: "4" }, "Reports"),
+        React.createElement(Button, { variant: "contained", key: "5" }, "Licenses"),
+        React.createElement(Button, { variant: "contained", key: "6" }, "Permits"),
+        React.createElement(Button, { variant: "contained", key: "7" }, "Requests"),
+        React.createElement(Button, { variant: "contained", key: "8" }, "Documents"),
+        React.createElement(Button, { variant: "contained", key: "9" }, "Locations"),
+        React.createElement(Button, { variant: "contained", key: "10" }, "Calendar"),
+        React.createElement(Button, { variant: "contained", key: "11" }, "Compliance"),
+        React.createElement(Button, { variant: "contained", key: "12" }, "Notifications"),
+    ],
+};

package/dist/published/theme/hooks.d.ts

@@ -107,3 +107,10 @@ export declare const useWidgetSize: (options?: {
     resize?: boolean;
 }) => WidgetSizeInfo;
 export default useWidgetSize;
+export declare function useFormContext(): {
+    fetchedOptions: import("react-hook-form").FieldValues;
+    setFetchedOptions: (newData: import("react-hook-form").FieldValues) => void;
+    getValues: import("react-hook-form").UseFormGetValues<import("react-hook-form").FieldValues>;
+    stickyFooter?: boolean | undefined;
+    object?: import("@evoke-platform/context").Obj | undefined;
+};

package/dist/published/theme/hooks.js

@@ -1,6 +1,8 @@
 import { useTheme } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { useContext } from 'react';
 import useMeasure from 'react-use-measure';
+import { FormContext } from '../components/custom/FormV2/components/FormContext';
 /**
  * Custom hook for responsive design breakpoints using size terminology.
  * Breakpoints based on MUI default theme:
@@ -98,3 +100,10 @@ export const useWidgetSize = (options) => {
     };
 };
 export default useWidgetSize;
+export function useFormContext() {
+    const context = useContext(FormContext);
+    if (!context) {
+        throw new Error('useFormContext must be used within a FormContext.Provider');
+    }
+    return context;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.0-dev.2",
+    "version": "1.6.0-dev.21",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -54,6 +54,7 @@
         "@testing-library/user-event": "^14.5.2",
         "@types/flat": "^5.0.5",
         "@types/jest": "^28.1.4",
+        "@types/json-logic-js": "^2.0.8",
         "@types/luxon": "^3.4.2",
         "@types/nanoid-dictionary": "^4.2.3",
         "@types/node": "^18.0.0",
@@ -86,7 +87,7 @@
         "yalc": "^1.0.0-pre.53"
     },
     "peerDependencies": {
-        "@evoke-platform/context": "^1.3.0-0",
+        "@evoke-platform/context": "^1.3.0-dev.6",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },
@@ -125,6 +126,7 @@
         "pluralize": "^8.0.0",
         "pretty-bytes": "^6.1.1",
         "react-dropzone": "^14.2.2",
+        "react-hook-form": "^7.60.0",
         "react-input-mask": "^2.0.4",
         "react-number-format": "^4.9.3",
         "react-querybuilder": "^6.0.2",