@evoke-platform/ui-components 1.6.0-dev.11 → 1.6.0-dev.13

package/dist/published/components/custom/FormV2/components/FieldWrapper.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+type FieldWrapperProps = {
+    inputId: string;
+    inputType: string;
+    label: string;
+    description?: string;
+    tooltip?: string;
+    prefix?: string;
+    suffix?: string;
+    value?: string;
+    errorMessage?: string;
+    showCharCount?: boolean;
+    viewOnly: boolean;
+    children: ReactNode;
+    required: boolean;
+    fieldHeight?: 'small' | 'medium';
+    maxLength?: number;
+};
+/**
+ * A component that wraps a FormField and adds a label,
+ * description, tooltip, prefix, suffix and word/char counts
+ */
+declare const FieldWrapper: (props: FieldWrapperProps) => React.JSX.Element;
+export default FieldWrapper;

package/dist/published/components/custom/FormV2/components/FieldWrapper.js

@@ -0,0 +1,100 @@
+import { Help, InfoRounded } from '@mui/icons-material';
+import React from 'react';
+import { IconButton, InputLabel, Tooltip, Typography } from '../../../core';
+import { Box } from '../../../layout';
+const underFieldStyles = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+};
+const descriptionStyles = {
+    color: '#999',
+    whiteSpace: 'normal',
+    display: 'block',
+};
+const PrefixSuffix = (props) => {
+    const { prefix, suffix, height, isViewOnly } = props;
+    const text = prefix || suffix;
+    const prefixSuffixStyles = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        background: isViewOnly ? undefined : '#f5f5f5',
+        padding: '5px',
+        border: isViewOnly ? undefined : '1px solid #ccc',
+        ...(suffix && {
+            borderTopRightRadius: '5px',
+            borderBottomRightRadius: '5px',
+            marginLeft: '-5px',
+            padding: '7px 5px 7px 10px',
+            marginTop: '6px',
+        }),
+        ...(prefix && {
+            borderTopLeftRadius: '5px',
+            borderBottomLeftRadius: '5px',
+            marginRight: '-5px',
+            padding: '7px 10px 7px 5px',
+            marginTop: '6px',
+        }),
+        height: height === 'small' ? 24 : 40,
+    };
+    if (!prefix && !suffix)
+        return null;
+    return (React.createElement(Box, { sx: prefixSuffixStyles },
+        React.createElement(Typography, null, text)));
+};
+/**
+ * A component that wraps a FormField and adds a label,
+ * description, tooltip, prefix, suffix and word/char counts
+ */
+const FieldWrapper = (props) => {
+    const { inputId, label, description, tooltip, prefix, suffix, value, maxLength, errorMessage, showCharCount, inputType, viewOnly, children, fieldHeight, required, } = props;
+    const charCount = value ? value.length : 0;
+    const remainingChars = maxLength ? maxLength - charCount : undefined;
+    return (React.createElement(Box, null,
+        React.createElement(Box, { sx: { padding: '10px 0' } },
+            inputType !== 'boolean' && (React.createElement(InputLabel, { htmlFor: inputId, sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    color: viewOnly ? 'text.secondary' : 'text.primary',
+                    fontSize: '14px',
+                } },
+                label,
+                required ? (React.createElement(Typography, { component: 'span', sx: { color: 'red', fontSize: '12px', lineHeight: '22px', paddingLeft: '4px' } }, `*`)) : null,
+                tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
+                    React.createElement(IconButton, null,
+                        React.createElement(Help, { sx: { fontSize: '14px' } })))))),
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: viewOnly ? 'center' : 'flex-start',
+                } },
+                inputType === 'string' && (React.createElement(PrefixSuffix, { prefix: prefix, height: fieldHeight || 'medium', isViewOnly: viewOnly })),
+                React.createElement(Box, { sx: {
+                        width: viewOnly && suffix ? undefined : '100%',
+                        marginTop: '6px',
+                        borderRadius: '8px',
+                    } },
+                    children,
+                    inputType !== 'boolean' && (errorMessage || description || showCharCount) && (React.createElement(Box, { sx: underFieldStyles },
+                        React.createElement(Box, { sx: {
+                                width: '100%',
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'flex-start',
+                                flexWrap: 'wrap',
+                                paddingTop: '4px',
+                            } },
+                            React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column' } },
+                                errorMessage ? (React.createElement(Box, { display: 'flex', alignItems: 'center' },
+                                    React.createElement(InfoRounded, { color: 'error', sx: { fontSize: '.75rem', marginRight: '3px' } }),
+                                    React.createElement(Typography, { fontSize: '12px', color: 'error', sx: { lineHeight: '18px' } }, errorMessage))) : (React.createElement("span", null)),
+                                description && (React.createElement(Typography, { id: `${inputId}-description`, variant: "caption", sx: descriptionStyles }, description))),
+                            showCharCount && (React.createElement(Typography, { variant: "caption", sx: { color: '#999999', whiteSpace: 'nowrap' } },
+                                remainingChars ?? charCount,
+                                ' ',
+                                (remainingChars ?? charCount) === 1 ? 'character' : 'characters',
+                                !!maxLength && ` remaining`)))))),
+                inputType === 'string' && (React.createElement(PrefixSuffix, { suffix: suffix, height: fieldHeight || 'medium', isViewOnly: viewOnly }))))));
+};
+export default FieldWrapper;

package/dist/published/components/custom/FormV2/components/FormContext.d.ts

@@ -0,0 +1,12 @@
+import { Obj } from '@evoke-platform/context';
+import { Dispatch, SetStateAction } from 'react';
+import { FieldValues, UseFormGetValues } from 'react-hook-form';
+type FormContextType = {
+    fetchedOptions: FieldValues;
+    setFetchedOptions: Dispatch<SetStateAction<FieldValues>>;
+    getValues: UseFormGetValues<FieldValues>;
+    stickyFooter?: boolean;
+    object?: Obj;
+};
+export declare const FormContext: import("react").Context<FormContextType>;
+export {};

package/dist/published/components/custom/FormV2/components/FormContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+export const FormContext = createContext({
+    fetchedOptions: {},
+    setFetchedOptions: () => { },
+    getValues: (() => ({})),
+    stickyFooter: false,
+    object: undefined,
+});

package/dist/published/components/custom/FormV2/components/TabNav.d.ts

@@ -0,0 +1,10 @@
+import React, { SyntheticEvent } from 'react';
+type TabNavProps = {
+    numberOfTabs: number;
+    tabValue: number;
+    handleTabChange: (event: SyntheticEvent, newValue: number) => void;
+    prevTabLabel?: string;
+    nextTabLabel?: string;
+};
+declare function TabNav(props: TabNavProps): React.JSX.Element;
+export default TabNav;

package/dist/published/components/custom/FormV2/components/TabNav.js

@@ -0,0 +1,23 @@
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import React from 'react';
+import { Button } from '../../../core';
+import { Box } from '../../../layout';
+function TabNav(props) {
+    const { numberOfTabs, tabValue, handleTabChange, prevTabLabel, nextTabLabel } = props;
+    const isFirstTab = tabValue === 0;
+    const isLastTab = tabValue === numberOfTabs - 1;
+    return (React.createElement(Box, { sx: {
+            display: 'flex',
+            justifyContent: isFirstTab ? 'flex-end' : 'space-between',
+            paddingTop: '10px',
+            paddingBottom: '20px',
+        } },
+        !isFirstTab && (React.createElement(Button, { id: 'navigation-prev', onClick: (event) => handleTabChange(event, tabValue - 1), sx: { color: 'black', backgroundColor: '#dfe3e8', '&:hover': { backgroundColor: '#d0d4d9' } }, "aria-label": `Navigate to previous tab ${prevTabLabel}` },
+            React.createElement(ArrowBackIosNewIcon, { sx: { fontSize: 'medium', marginRight: 1 } }),
+            prevTabLabel ?? 'Previous tab')),
+        !isLastTab && (React.createElement(Button, { id: 'navigation-next', onClick: (event) => handleTabChange(event, tabValue + 1), sx: { color: 'black', backgroundColor: '#dfe3e8', '&:hover': { backgroundColor: '#d0d4d9' } }, "aria-label": `Navigate to next tab ${nextTabLabel}` },
+            nextTabLabel ?? 'Next tab',
+            React.createElement(ArrowForwardIosIcon, { sx: { fontSize: 'medium', marginLeft: 1 } })))));
+}
+export default TabNav;

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

@@ -133,11 +133,11 @@ export const ResponsiveOverflow = (props) => {
                 }, transformOrigin: {
                     vertical: 'top',
                     horizontal: 'right',
-                }, sx: { '& .MuiPaper-root': styles.menuPaper } }, overflowItems.map((item, idx) => {
+                }, sx: { '& .MuiPaper-root': styles.menuPaper }, onClick: handleMenuClose }, overflowItems.map((item, index) => {
                 if (renderOverflowMenuItem) {
                     return renderOverflowMenuItem(item);
                 }
-                return (React.createElement(MenuItem, { key: idx, onClick: handleMenuClose }, item));
+                return (React.createElement(MenuItem, { key: `overflow-item-${index}`, onClick: handleMenuClose }, item));
             }))))));
 };
 export default ResponsiveOverflow;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.0-dev.11",
+    "version": "1.6.0-dev.13",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -125,6 +125,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",