@abgov/jsonforms-components 1.12.0 → 1.14.0

package/index.esm.js

@@ -1,10 +1,9 @@
-import { withAjvProps, materialSliderControlTester, MaterialSliderControl, materialObjectControlTester, MaterialObjectRenderer, materialAllOfControlTester, MaterialAllOfRenderer, materialAnyOfControlTester, MaterialAnyOfRenderer, materialOneOfControlTester, MaterialOneOfRenderer, materialOneOfRadioGroupControlTester, MaterialOneOfRadioGroupControl, materialOneOfEnumControlTester, MaterialOneOfEnumControl, materialHorizontalLayoutTester, materialVerticalLayoutTester, materialArrayLayoutTester, MaterialArrayLayout, materialAnyOfStringOrEnumControlTester, MaterialAnyOfStringOrEnumControl, materialEnumArrayRendererTester, MaterialEnumArrayRenderer, materialBooleanCellTester, MaterialBooleanCell, materialBooleanToggleCellTester, MaterialBooleanToggleCell, materialEnumCellTester, MaterialEnumCell, materialOneOfEnumCellTester, MaterialOneOfEnumCell } from '@jsonforms/material-renderers';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { createContext, useContext, useEffect, useMemo, useState, useCallback } from 'react';
-import { GoACallout, GoAInputDate, GoAFormItem, GoAInput, GoATextArea, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAFormStepper, GoAFormStep, GoAPages, GoAGrid, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADetails } from '@abgov/react-components';
+import { GoACallout, GoAInputDate, GoAFormItem, GoAInput, GoATextArea, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADetails } from '@abgov/react-components';
 import styled from 'styled-components';
-import { rankWith, uiTypeIs, isDateControl, isStringControl, and, optionIs, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, isDescriptionHidden, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
-import { withJsonFormsRendererProps, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, JsonFormsDispatch, withJsonFormsLayoutProps, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
+import { rankWith, uiTypeIs, isDateControl, isStringControl, and, optionIs, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, isDescriptionHidden, getAjv, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
+import { withJsonFormsRendererProps, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, useJsonForms, JsonFormsDispatch, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import merge from 'lodash/merge';
 import axios from 'axios';
 import isEmpty$1 from 'lodash/isEmpty';
@@ -3684,6 +3683,57 @@ const BooleanRadioControl = props => jsx(GoAInputBaseControl, Object.assign({},
 const GoABooleanRadioControlTester = rankWith(3, and(isBooleanControl, optionIs('radio', true)));
 const GoABooleanRadioControl = withJsonFormsControlProps(BooleanRadioControl);
 
+const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
+  return elements.map((child, index) => jsx("div", {
+    children: jsx(JsonFormsDispatch, {
+      uischema: child,
+      schema: schema,
+      path: path,
+      enabled: enabled,
+      renderers: renderers,
+      cells: cells
+    }, path)
+  }, index));
+};
+const withAjvProps = Component => function WithAjvProps(props) {
+  const ctx = useJsonForms();
+  const ajv = getAjv({
+    jsonforms: Object.assign({}, ctx)
+  });
+  return jsx(Component, Object.assign({}, props, {
+    ajv: ajv
+  }));
+};
+const LayoutRenderer = ({
+  elements,
+  schema,
+  path,
+  enabled,
+  direction,
+  renderers,
+  cells,
+  visible
+}) => {
+  if (isEmpty$1(elements)) {
+    return null;
+  } else {
+    if (direction === 'row') {
+      return jsx(Visible, {
+        visible: visible,
+        children: jsx(GoAGrid, {
+          minChildWidth: "10ch",
+          children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
+        })
+      });
+    } else {
+      return jsx(Visible, {
+        visible: visible,
+        children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
+      });
+    }
+  }
+};
+
 let _$5 = t => t,
   _t$5,
   _t2$3;
@@ -4922,49 +4972,7 @@ const InputCells = [{
   cell: withJsonFormsCellProps(GoAIntegerCell)
 }];
 
-const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
-  return elements.map((child, index) => jsx("div", {
-    children: jsx(JsonFormsDispatch, {
-      uischema: child,
-      schema: schema,
-      path: path,
-      enabled: enabled,
-      renderers: renderers,
-      cells: cells
-    }, path)
-  }, index));
-};
-const LayoutRenderer = ({
-  elements,
-  schema,
-  path,
-  enabled,
-  direction,
-  renderers,
-  cells,
-  visible
-}) => {
-  if (isEmpty$1(elements)) {
-    return null;
-  } else {
-    if (direction === 'row') {
-      return jsx(Visible, {
-        visible: visible,
-        children: jsx(GoAGrid, {
-          minChildWidth: "10ch",
-          children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
-        })
-      });
-    } else {
-      return jsx(Visible, {
-        visible: visible,
-        children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
-      });
-    }
-  }
-};
-
-rankWith(2, uiTypeIs('HorizontalLayout'));
+const GoAHorizontalLayoutTester = rankWith(2, uiTypeIs('HorizontalLayout'));
 const GoAHorizontalLayoutComponent = ({
   uischema,
   renderers,
@@ -5013,6 +5021,7 @@ const GoAVerticalLayoutComponent = ({
     cells: cells
   }));
 };
+const GoAlVerticalLayoutTester = rankWith(1, uiTypeIs('VerticalLayout'));
 const GoAVerticalLayout = withJsonFormsLayoutProps(GoAVerticalLayoutComponent, true);
 
 const groupTester = rankWith(1, uiTypeIs('Group'));
@@ -5366,21 +5375,6 @@ const GoABaseRenderers = [
 }, {
   tester: GoACalloutControlTester,
   renderer: GoACalloutControl
-}, {
-  tester: materialSliderControlTester,
-  renderer: MaterialSliderControl
-}, {
-  tester: materialObjectControlTester,
-  renderer: MaterialObjectRenderer
-}, {
-  tester: materialAllOfControlTester,
-  renderer: MaterialAllOfRenderer
-}, {
-  tester: materialAnyOfControlTester,
-  renderer: MaterialAnyOfRenderer
-}, {
-  tester: materialOneOfControlTester,
-  renderer: MaterialOneOfRenderer
 }, {
   tester: GoARadioGroupControlTester,
   renderer: GoAEnumRadioGroupControl
@@ -5396,40 +5390,22 @@ const GoABaseRenderers = [
 }, {
   tester: GoAListWithDetailsTester,
   renderer: GoAArrayControlRenderer
-}, {
-  tester: materialOneOfRadioGroupControlTester,
-  renderer: MaterialOneOfRadioGroupControl
-}, {
-  tester: materialOneOfEnumControlTester,
-  renderer: MaterialOneOfEnumControl
 },
 // layouts
 {
   tester: GoAGroupLayoutTester,
   renderer: GoAGroupControl
 }, {
-  tester: materialHorizontalLayoutTester,
+  tester: GoAHorizontalLayoutTester,
   renderer: GoAHorizontalLayout
 }, {
-  tester: materialVerticalLayoutTester,
+  tester: GoAlVerticalLayoutTester,
   renderer: GoAVerticalLayout
-}, {
-  tester: materialArrayLayoutTester,
-  renderer: MaterialArrayLayout
 },
 // additional
 {
   tester: GoAErrorControlTester,
   renderer: GoAErrorControl
-}, {
-  tester: materialAnyOfStringOrEnumControlTester,
-  renderer: MaterialAnyOfStringOrEnumControl
-}, {
-  tester: materialEnumArrayRendererTester,
-  renderer: MaterialEnumArrayRenderer
-}, {
-  tester: materialEnumArrayRendererTester,
-  renderer: MaterialEnumArrayRenderer
 }, {
   tester: MultiLineTextControlTester,
   renderer: MultiLineTextControl
@@ -5444,18 +5420,6 @@ const GoARenderers = [...GoABaseRenderers, {
   tester: FileUploaderTester,
   renderer: withJsonFormsControlProps(FileUploader)
 }];
-const GoACells = [{
-  tester: materialBooleanCellTester,
-  cell: MaterialBooleanCell
-}, {
-  tester: materialBooleanToggleCellTester,
-  cell: MaterialBooleanToggleCell
-}, {
-  tester: materialEnumCellTester,
-  cell: MaterialEnumCell
-}, {
-  tester: materialOneOfEnumCellTester,
-  cell: MaterialOneOfEnumCell
-}, ...InputCells];
+const GoACells = [...InputCells];
 
 export { ContextProvider, GoABaseRenderers, GoACells, GoARenderers, JsonFormContext, addData, addDataByOptions, addDataByUrl, ajv, getAllData, getData };

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",
   "peerDependencies": {
     "@abgov/react-components": "^4.18.1",
     "@jsonforms/core": "^3.1.0",
-    "@jsonforms/material-renderers": "^3.1.0",
     "@jsonforms/react": "^3.1.0",
-    "@mui/material": "^5.15.10",
     "react": "^18.0.0",
-    "ajv": "^6.12.6"
+    "ajv": "^6.12.6",
+    "ajv8": "npm:ajv@^8.6.1"
   },
   "dependencies": {
     "axios": "^1.6.7",

package/src/lib/Controls/FormStepper/FormStepperControl.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 import { StatePropsOfLayout } from '@jsonforms/core';
 import { TranslateProps } from '@jsonforms/react';
-import { AjvProps } from '@jsonforms/material-renderers';
+import { AjvProps } from '../../util/layout';
 export interface CategorizationStepperLayoutRendererProps extends StatePropsOfLayout, AjvProps, TranslateProps {
     data: unknown;
 }
 export declare const FormStepper: (props: CategorizationStepperLayoutRendererProps) => JSX.Element;
 export declare const flattenObject: (obj: Record<string, string>) => Record<string, string>;
-export declare const FormStepperControl: (props: CategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => React.JSX.Element;
+export declare const FormStepperControl: (props: CategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => import("react/jsx-runtime").JSX.Element;
 export default FormStepper;

package/src/lib/Controls/Inputs/InputEnum.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ControlProps, OwnPropsOfEnum, RankedTester } from '@jsonforms/core';
 import { TranslateProps } from '@jsonforms/react';
 import { WithInputProps } from './type';
-import { WithOptionLabel } from '@jsonforms/material-renderers';
+import { WithOptionLabel } from '../../util';
 import { EnumCellProps, WithClassname } from '@jsonforms/core';
 type EnumSelectProp = EnumCellProps & WithClassname & TranslateProps & WithInputProps;
 export declare const EnumSelect: (props: EnumSelectProp) => JSX.Element;

package/src/lib/Controls/Inputs/InputEnumRadios.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ControlProps, OwnPropsOfEnum, RankedTester } from '@jsonforms/core';
 import { TranslateProps } from '@jsonforms/react';
 import { WithInputProps } from './type';
-import { WithOptionLabel } from '@jsonforms/material-renderers';
+import { WithOptionLabel } from '../../util';
 import { EnumCellProps, WithClassname } from '@jsonforms/core';
 type RadioGroupProp = EnumCellProps & WithClassname & TranslateProps & WithInputProps;
 export declare const RadioGroup: (props: RadioGroupProp) => JSX.Element;

package/src/lib/layouts/HorizontalLayoutControl.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { LayoutProps, RankedTester } from '@jsonforms/core';
-export declare const materialHorizontalLayoutTester: RankedTester;
+export declare const GoAHorizontalLayoutTester: RankedTester;
 export declare const GoAHorizontalLayoutComponent: ({ uischema, renderers, cells, schema, path, enabled, visible, }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoAHorizontalLayout: React.ComponentType<LayoutProps & import("@jsonforms/core").OwnPropsOfLayout>;

package/src/lib/layouts/VerticalLayoutControl.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-import { LayoutProps } from '@jsonforms/core';
+import { LayoutProps, RankedTester } from '@jsonforms/core';
 export declare const GoAVerticalLayoutComponent: ({ uischema, schema, path, enabled, renderers, cells, visible, }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GoAlVerticalLayoutTester: RankedTester;
 export declare const GoAVerticalLayout: React.ComponentType<LayoutProps & import("@jsonforms/core").OwnPropsOfLayout>;

package/src/lib/util/index.d.ts

@@ -1,2 +1,4 @@
 export * from './inputControlUtils';
 export * from './style-component';
+export * from './type';
+export * from './stringUtils';

package/src/lib/util/layout.d.ts

@@ -1,8 +1,15 @@
+import React, { ComponentType } from 'react';
 import type { UISchemaElement } from '@jsonforms/core';
 import { JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry, JsonSchema, OwnPropsOfRenderer } from '@jsonforms/core';
+import Ajv from 'ajv8';
+export type Ajv8 = Ajv;
 export declare const renderLayoutElements: (elements: UISchemaElement[], schema?: JsonSchema, path?: string, enabled?: boolean, renderers?: JsonFormsRendererRegistryEntry[], cells?: JsonFormsCellRendererRegistryEntry[]) => import("react/jsx-runtime").JSX.Element[];
 export interface LayoutRendererProps extends OwnPropsOfRenderer {
     elements: UISchemaElement[];
     direction: 'row' | 'column';
 }
+export interface AjvProps {
+    ajv: Ajv;
+}
+export declare const withAjvProps: <P extends object>(Component: React.ComponentType<AjvProps & P>) => (props: P) => import("react/jsx-runtime").JSX.Element;
 export declare const LayoutRenderer: ({ elements, schema, path, enabled, direction, renderers, cells, visible, }: LayoutRendererProps) => import("react/jsx-runtime").JSX.Element | null;

package/src/lib/util/type.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+import { EnumOption } from '@jsonforms/core';
+export interface WithOptionLabel {
+    getOptionLabel?(option: EnumOption): string;
+    renderOption?(props: React.HTMLAttributes<HTMLLIElement>, option: EnumOption): ReactNode;
+}