slice-machine-ui 2.2.2-beta.1 → 2.2.2-beta.3

package/src/legacy/lib/builders/CustomTypeBuilder/TabZone/index.tsx

@@ -30,7 +30,7 @@ import {
   TabFieldsModel,
   TabSM,
 } from "@/legacy/lib/models/common/CustomType";
-import ctBuilderArray from "@/legacy/lib/models/common/widgets/ctBuilderArray";
+import { Widgets } from "@/legacy/lib/models/common/widgets";
 import type { AnyWidget } from "@/legacy/lib/models/common/widgets/Widget";
 import {
   ensureDnDDestination,
@@ -39,11 +39,29 @@ import {
 import { transformKeyAccessor } from "@/legacy/lib/utils/str";
 import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
 
-import * as Widgets from "../../../../lib/models/common/widgets/withGroup";
 import EditModal from "../../common/EditModal";
 import Zone from "../../common/Zone";
 import SliceZone from "../SliceZone";
 
+const widgetsArray = [
+  Widgets.UID,
+  Widgets.Group,
+  Widgets.StructuredText,
+  Widgets.Image,
+  Widgets.Link,
+  Widgets.LinkToMedia,
+  Widgets.ContentRelationship,
+  Widgets.Select,
+  Widgets.Boolean,
+  Widgets.Date,
+  Widgets.Timestamp,
+  Widgets.Embed,
+  Widgets.Number,
+  Widgets.GeoPoint,
+  Widgets.Color,
+  Widgets.Text,
+];
+
 interface TabZoneProps {
   tabId: string;
 }
@@ -227,7 +245,7 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
               poolOfFieldsToCheck={poolOfFields}
               showHints={true}
               EditModal={EditModal}
-              widgetsArray={ctBuilderArray}
+              widgetsArray={widgetsArray}
               onDeleteItem={onDeleteItem}
               onSave={onSave}
               onSaveNewField={onSaveNewField}

package/src/legacy/lib/builders/SliceBuilder/FieldZones/index.tsx

@@ -27,9 +27,7 @@ import {
   SlicePrimaryFieldSM,
   WidgetsArea,
 } from "@/legacy/lib/models/common/Slice";
-import * as Widgets from "@/legacy/lib/models/common/widgets";
-import groupBuilderWidgetsArray from "@/legacy/lib/models/common/widgets/groupBuilderArray";
-import sliceBuilderWidgetsArray from "@/legacy/lib/models/common/widgets/sliceBuilderArray";
+import { Widgets } from "@/legacy/lib/models/common/widgets";
 import { ensureDnDDestination } from "@/legacy/lib/utils";
 import { transformKeyAccessor } from "@/legacy/lib/utils/str";
 import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
@@ -42,6 +40,25 @@ const dataTipText2 = `The repeatable zone is for a group<br/>
   of fields that you want to be able to repeat an<br/>
   indeterminate number of times, like FAQs`;
 
+const itemsWidgetsArray = [
+  Widgets.StructuredText,
+  Widgets.Image,
+  Widgets.Link,
+  Widgets.LinkToMedia,
+  Widgets.ContentRelationship,
+  Widgets.Select,
+  Widgets.Boolean,
+  Widgets.Date,
+  Widgets.Timestamp,
+  Widgets.Embed,
+  Widgets.Number,
+  Widgets.GeoPoint,
+  Widgets.Color,
+  Widgets.Text,
+];
+
+const primaryWidgetsArray = [Widgets.Group, ...itemsWidgetsArray];
+
 const FieldZones: FC = () => {
   const { slice, setSlice, variation } = useSliceState();
   const [
@@ -110,7 +127,7 @@ const FieldZones: FC = () => {
       label: string;
       widgetTypeName: keyof typeof Widgets;
     }) => {
-      const widget = sliceBuilderWidgetsArray.find(
+      const widget = primaryWidgetsArray.find(
         (sliceBuilderWidget) =>
           sliceBuilderWidget.CUSTOM_NAME === widgetTypeName ||
           sliceBuilderWidget.TYPE_NAME === widgetTypeName,
@@ -188,7 +205,7 @@ const FieldZones: FC = () => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         fields={variation.primary}
         EditModal={EditModal}
-        widgetsArray={sliceBuilderWidgetsArray}
+        widgetsArray={primaryWidgetsArray}
         onDeleteItem={_onDeleteItem(WidgetsArea.Primary)}
         onSave={_onSave(WidgetsArea.Primary)}
         onSaveNewField={_onSaveNewField(WidgetsArea.Primary)}
@@ -216,7 +233,7 @@ const FieldZones: FC = () => {
           isRepeatable
           title="Repeatable Zone"
           dataTip={dataTipText2}
-          widgetsArray={groupBuilderWidgetsArray}
+          widgetsArray={itemsWidgetsArray}
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           fields={variation.items}
           EditModal={EditModal}

package/src/legacy/lib/builders/SliceBuilder/VariationsList/index.tsx

@@ -60,7 +60,9 @@ export const VariationsList: FC<VariationsListProps> = (props) => {
                 }}
                 startIcon="add"
                 color="grey"
-              />
+              >
+                Add a variation
+              </Button>
             </Box>
             <div
               className={styles.hideScrollbar}
@@ -124,7 +126,7 @@ export const VariationsList: FC<VariationsListProps> = (props) => {
                   // `Gradient`.
                   sx={{ position: "relative" }}
                 >
-                  Add a new variation
+                  Add a variation
                 </Button>
               </Box>
             </div>

package/src/legacy/lib/builders/SliceBuilder/index.tsx

@@ -20,7 +20,7 @@ import { VariationsList } from "./VariationsList";
 
 export const SliceBuilder: FC = () => {
   const { slice, actionQueueStatus } = useSliceState();
-  const horizontalScroll = useMediaQuery({ max: "medium" });
+  const horizontalScroll = useMediaQuery({ max: "large" });
 
   const contentDisplayProps = horizontalScroll
     ? { gridTemplateRows: "304px 1fr" }

package/src/legacy/lib/builders/common/EditModal/index.jsx

@@ -11,7 +11,7 @@ import {
   createInitialValues,
 } from "@/legacy/lib/forms";
 import { DeprecatedMockConfigMessage } from "@/legacy/lib/models/common/DeprecatedMockConfigMessage";
-import * as Widgets from "@/legacy/lib/models/common/widgets/withGroup";
+import { Widgets } from "@/legacy/lib/models/common/widgets";
 import { removeProp } from "@/legacy/lib/utils";
 
 import { findWidgetByConfigOrType } from "../../utils";

package/src/legacy/lib/builders/common/Zone/Card/components/Hints/index.tsx

@@ -9,9 +9,15 @@ interface HintProps {
   show: boolean;
   item: Item;
   renderHintBase: RenderHintBaseFN;
+  hintItemName?: string;
 }
 
-const Hint: React.FC<HintProps> = ({ show, renderHintBase, item }) => {
+const Hint: React.FC<HintProps> = ({
+  show,
+  renderHintBase,
+  item,
+  hintItemName,
+}) => {
   const fieldPathString = renderHintBase({ item });
 
   // TODO: Call `swr`'s global `mutate` function when something changes to clear the cache.
@@ -20,6 +26,7 @@ const Hint: React.FC<HintProps> = ({ show, renderHintBase, item }) => {
     return await managerClient.snippets.readSnippets({
       fieldPath: fieldPathString.split("."),
       model: item.value,
+      itemName: hintItemName,
     });
   });
 

package/src/legacy/lib/builders/common/Zone/Card/components/NewField.tsx

@@ -15,8 +15,8 @@ import {
 } from "@/legacy/lib/forms";
 import { validateId } from "@/legacy/lib/forms/defaults";
 import { InputType } from "@/legacy/lib/forms/fields";
+import { Widgets } from "@/legacy/lib/models/common/widgets";
 import { AnyWidget } from "@/legacy/lib/models/common/widgets/Widget";
-import * as Widgets from "@/legacy/lib/models/common/widgets/withGroup";
 import { slugify } from "@/legacy/lib/utils/str";
 
 import { ErrorTooltip } from "./ErrorTooltip";

package/src/legacy/lib/builders/common/Zone/Card/index.jsx

@@ -3,7 +3,7 @@ import { Box, Text } from "theme-ui";
 
 import Li from "@/legacy/components/Li";
 import ListItem from "@/legacy/components/ListItem";
-import * as Widgets from "@/legacy/lib/models/common/widgets/withGroup";
+import { Widgets } from "@/legacy/lib/models/common/widgets";
 
 import { findWidgetByConfigOrType } from "../../../utils";
 import Hint from "./components/Hints";
@@ -103,6 +103,8 @@ const FieldZone = ({
                     isRepeatable={isRepeatable}
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                     renderHintBase={renderHintBase}
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    hintItemName={widget.hintItemName}
                     Widgets={Widgets}
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/strict-boolean-expressions
                     typeName={widget.CUSTOM_NAME || widget.TYPE_NAME}

package/src/legacy/lib/builders/utils/index.ts

@@ -1,3 +1,5 @@
+import { GroupFieldType } from "@prismicio/types-internal/lib/customtypes/widgets";
+
 import { TabField } from "@/legacy/lib/models/common/CustomType";
 
 interface Widgets {
@@ -21,6 +23,12 @@ export const findWidgetByConfigOrType = (
         return widgets.Link;
     }
   }
+  // The Group & NestedGroup widgets share the "Group" type. They are never
+  // in the same widget group, so this will use whichever is provided. For example,
+  // in the custom list item for Group, we always pass NestedGroup as the Group widget.
+  if (type === GroupFieldType) {
+    return widgets.Group ?? widgets.NestedGroup;
+  }
 
   return widgets[type];
 };

package/src/legacy/lib/models/common/Group.ts

@@ -1,32 +1,49 @@
-import { Group } from "@prismicio/types-internal/lib/customtypes/widgets";
+import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
+import {
+  Group,
+  GroupFieldType,
+} from "@prismicio/types-internal/lib/customtypes/widgets";
 import { StringOrNull } from "@prismicio/types-internal/lib/validators";
 import { getOrElseW } from "fp-ts/lib/Either";
 import * as t from "io-ts";
 
 import { FieldsSM } from "./Fields";
 
-export const GroupConfig = t.exact(
-  t.partial({
-    label: StringOrNull,
-    repeat: t.boolean,
-    fields: FieldsSM,
-  }),
-);
-export type GroupConfig = t.TypeOf<typeof GroupConfig>;
-
-export const GroupSM = t.exact(
-  t.intersection([
-    t.type({
-      type: t.literal("Group"),
-    }),
+const createGroupConfig = <TFields extends t.Mixed>(fields: TFields) =>
+  t.exact(
     t.partial({
-      fieldset: StringOrNull,
-      icon: t.string,
-      description: t.string,
-      config: GroupConfig,
+      label: StringOrNull,
+      repeat: t.boolean,
+      fields,
     }),
-  ]),
+  );
+
+const createGroupSM = <TFields extends t.Mixed>(fields: TFields) =>
+  t.exact(
+    t.intersection([
+      t.type({
+        type: t.literal("Group"),
+      }),
+      t.partial({
+        fieldset: StringOrNull,
+        icon: t.string,
+        description: t.string,
+        config: createGroupConfig(fields),
+      }),
+    ]),
+  );
+
+export const NestedGroupSM = createGroupSM(FieldsSM);
+export type NestedGroupSM = t.TypeOf<typeof NestedGroupSM>;
+
+const GroupFieldsSM = t.array(
+  t.type({
+    key: t.string,
+    value: t.union([NestableWidget, NestedGroupSM]),
+  }),
 );
+
+export const GroupSM = createGroupSM(GroupFieldsSM);
 export type GroupSM = t.TypeOf<typeof GroupSM>;
 
 export const Groups = {
@@ -34,10 +51,13 @@ export const Groups = {
     const fields = (() => {
       if (!group.config?.fields) return;
 
-      return group.config.fields.reduce(
-        (acc, { key, value }) => ({ ...acc, [key]: value }),
-        {},
-      );
+      return group.config.fields.reduce((acc, { key, value }) => {
+        if (value.type === GroupFieldType) {
+          return { ...acc, [key]: Groups.fromSM(value) };
+        } else {
+          return { ...acc, [key]: value };
+        }
+      }, {});
     })();
 
     return getOrElseW(() => {
@@ -58,10 +78,13 @@ export const Groups = {
       if (!group.config?.fields) return;
 
       // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-      return Object.entries(group.config?.fields || {}).map(([key, value]) => ({
-        key,
-        value,
-      }));
+      return Object.entries(group.config?.fields || {}).map(([key, value]) => {
+        if (value.type === GroupFieldType) {
+          return { key, value: Groups.toSM(value) };
+        } else {
+          return { key, value };
+        }
+      });
     })();
 
     return getOrElseW(() => {

package/src/legacy/lib/models/common/widgets/Group/ListItem/index.jsx

@@ -1,3 +1,4 @@
+import { GroupFieldType } from "@prismicio/types-internal/lib/customtypes/widgets";
 import { Fragment, useState } from "react";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { flushSync } from "react-dom";
@@ -17,16 +18,17 @@ import Hint from "@/legacy/lib/builders/common/Zone/Card/components/Hints";
 import NewField from "@/legacy/lib/builders/common/Zone/Card/components/NewField";
 import { findWidgetByConfigOrType } from "@/legacy/lib/builders/utils";
 import { Groups } from "@/legacy/lib/models/common/Group";
-import * as Widgets from "@/legacy/lib/models/common/widgets";
-import groupBuilderWidgetsArray from "@/legacy/lib/models/common/widgets/groupBuilderArray";
 import { ensureDnDDestination } from "@/legacy/lib/utils";
 import { transformKeyAccessor } from "@/legacy/lib/utils/str";
 import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
 
 /* eslint-disable */
-const CustomListItem = ({
+export const CustomListItem = ({
   tabId,
   widget,
+  Widgets,
+  widgetsArray,
+  hintBase,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   parentSnapshot,
   showHints,
@@ -86,7 +88,7 @@ const CustomListItem = ({
       group: Groups.fromSM(groupItem.value),
       previousFieldId: previousKey,
       newFieldId: newKey,
-      field: value,
+      field: value.type === GroupFieldType ? Groups.fromSM(value) : value,
     });
 
     saveItem({
@@ -215,6 +217,8 @@ const CustomListItem = ({
                           key: item.key,
                           enterEditMode,
                           deleteItem: onDeleteItem,
+                          saveItem: onSaveField,
+                          showHints,
                           renderFieldAccessor: (key) =>
                             `item${transformKeyAccessor(item.key)}`,
                           // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions
@@ -232,13 +236,25 @@ const CustomListItem = ({
                             isRepeatable={isRepeatable}
                             renderHintBase={({ item }) =>
                               // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access
-                              `item${transformKeyAccessor(item.key)}`
+                              `${hintBase}${transformKeyAccessor(item.key)}`
                             }
+                            hintItemName={widget.hintItemName}
                             Widgets={Widgets}
                             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                             typeName={widget.CUSTOM_NAME || widget.TYPE_NAME}
                           />
                         );
+
+                        if (widget.CustomListItem) {
+                          const { CustomListItem } = widget;
+                          return (
+                            <CustomListItem
+                              {...props}
+                              HintElement={HintElement}
+                            />
+                          );
+                        }
+
                         return (
                           <ListItem {...props} HintElement={HintElement} />
                         );
@@ -270,7 +286,7 @@ const CustomListItem = ({
         data={{ isOpen: selectMode }}
         close={() => setSelectMode(false)}
         onSelect={onSelectFieldType}
-        widgetsArray={groupBuilderWidgetsArray}
+        widgetsArray={widgetsArray}
       />
       <EditModal
         data={editModalData}
@@ -282,6 +298,4 @@ const CustomListItem = ({
     </Fragment>
   );
 };
-
-export default CustomListItem;
 /* eslint-enable */

package/src/legacy/lib/models/common/widgets/Group/createGroupWidget.ts

@@ -0,0 +1,83 @@
+import { MdPlaylistAdd } from "react-icons/md";
+import * as yup from "yup";
+
+import { TabField } from "@/legacy/lib/models/common/CustomType";
+import {
+  type GroupSM,
+  type NestedGroupSM,
+} from "@/legacy/lib/models/common/Group";
+import { type Widget } from "@/legacy/lib/models/common/widgets/Widget";
+
+import { type GroupListItemProps } from ".";
+import Form, { FormFields } from "./Form";
+
+const Meta = {
+  icon: MdPlaylistAdd,
+  title: "Group",
+  description: "A repeatable set of fields",
+};
+
+const createSchema = (typeRegex: RegExp) =>
+  yup.object().shape({
+    type: yup
+      .string()
+      .matches(typeRegex, { excludeEmptyString: true })
+      .required(),
+    config: yup.object().shape({
+      fields: yup.array(),
+      label: yup.string(),
+      placeholder: yup.string(),
+      repeat: yup.boolean().optional(),
+    }),
+  });
+export type SchemaType = ReturnType<typeof createSchema>;
+
+type CreateGroupWidgetArgsBase<T extends TabField> = {
+  schemaTypeRegex: RegExp;
+  customListItem: (props: GroupListItemProps<T>) => JSX.Element;
+  hintItemName: string;
+  customName?: string;
+};
+type CreateTopGroupWidgetArgs = CreateGroupWidgetArgsBase<GroupSM>;
+type CreateNestedGroupWidgetArgs = CreateGroupWidgetArgsBase<NestedGroupSM> & {
+  customName: "NestedGroup";
+};
+type CreateGroupWidgetArgs =
+  | CreateTopGroupWidgetArgs
+  | CreateNestedGroupWidgetArgs;
+
+export function createGroupWidget(
+  args: CreateTopGroupWidgetArgs,
+): Widget<GroupSM, SchemaType>;
+
+export function createGroupWidget(
+  args: CreateNestedGroupWidgetArgs,
+): Widget<NestedGroupSM, SchemaType>;
+
+export function createGroupWidget({
+  schemaTypeRegex,
+  customListItem,
+  customName,
+  hintItemName,
+}: CreateGroupWidgetArgs):
+  | Widget<GroupSM, SchemaType>
+  | Widget<NestedGroupSM, SchemaType> {
+  return {
+    Meta,
+    Form,
+    FormFields,
+    schema: createSchema(schemaTypeRegex),
+    create: (label: string) => ({
+      type: "Group",
+      config: {
+        label,
+        repeat: true,
+        fields: [],
+      },
+    }),
+    CustomListItem: customListItem,
+    TYPE_NAME: "Group",
+    CUSTOM_NAME: customName,
+    hintItemName,
+  };
+}

package/src/legacy/lib/models/common/widgets/Group/index.tsx

@@ -0,0 +1,72 @@
+import { type DroppableStateSnapshot } from "react-beautiful-dnd";
+
+import { useNestedGroupExperiment } from "@/hooks/useNestedGroupExperiment";
+import { type Item } from "@/legacy/components/ListItem";
+import { type TabField } from "@/legacy/lib/models/common/CustomType";
+import { type GroupSM } from "@/legacy/lib/models/common/Group";
+import { Widgets } from "@/legacy/lib/models/common/widgets/groupWidgets";
+import { type Widget } from "@/legacy/lib/models/common/widgets/Widget";
+
+import { createGroupWidget, type SchemaType } from "./createGroupWidget";
+import { CustomListItem } from "./ListItem";
+
+const widgetsArray = [
+  Widgets.NestedGroup,
+  Widgets.StructuredText,
+  Widgets.Image,
+  Widgets.Link,
+  Widgets.LinkToMedia,
+  Widgets.ContentRelationship,
+  Widgets.Select,
+  Widgets.Boolean,
+  Widgets.Date,
+  Widgets.Timestamp,
+  Widgets.Embed,
+  Widgets.Number,
+  Widgets.GeoPoint,
+  Widgets.Color,
+  Widgets.Text,
+];
+
+export interface GroupListItemProps<F extends TabField> {
+  tabId: string;
+  widget: Widget<F, SchemaType>;
+  parentSnapshot: DroppableStateSnapshot;
+  showHints: boolean;
+  isRepeatable: boolean;
+  item: Item<F>;
+  draggableId: string;
+  saveItem: ({
+    apiId,
+    newKey,
+    value,
+  }: {
+    apiId: string;
+    newKey: string;
+    value: F;
+  }) => void;
+  HintElement: JSX.Element;
+}
+
+const hintItemName = "item";
+
+const GroupListItem = (props: GroupListItemProps<GroupSM>): JSX.Element => {
+  const nestedGroupExperiment = useNestedGroupExperiment();
+  const maybeFilteredWidgetsArray = nestedGroupExperiment.eligible
+    ? widgetsArray
+    : widgetsArray.filter((widget) => widget.CUSTOM_NAME !== "NestedGroup");
+  return (
+    <CustomListItem
+      Widgets={Widgets}
+      widgetsArray={maybeFilteredWidgetsArray}
+      hintBase={hintItemName}
+      {...props}
+    />
+  );
+};
+
+export const GroupWidget = createGroupWidget({
+  schemaTypeRegex: /^Group$/,
+  customListItem: GroupListItem,
+  hintItemName,
+});

package/src/legacy/lib/models/common/widgets/NestedGroup/index.tsx

@@ -0,0 +1,40 @@
+import { type NestedGroupSM } from "@/legacy/lib/models/common/Group";
+import { type GroupListItemProps } from "@/legacy/lib/models/common/widgets/Group";
+import { createGroupWidget } from "@/legacy/lib/models/common/widgets/Group/createGroupWidget";
+import { CustomListItem } from "@/legacy/lib/models/common/widgets/Group/ListItem";
+import { NonGroupWidgets as Widgets } from "@/legacy/lib/models/common/widgets/nonGroupWidgets";
+
+const widgetsArray = [
+  Widgets.StructuredText,
+  Widgets.Image,
+  Widgets.Link,
+  Widgets.LinkToMedia,
+  Widgets.ContentRelationship,
+  Widgets.Select,
+  Widgets.Boolean,
+  Widgets.Date,
+  Widgets.Timestamp,
+  Widgets.Embed,
+  Widgets.Number,
+  Widgets.GeoPoint,
+  Widgets.Color,
+  Widgets.Text,
+];
+
+const hintItemName = "subItem";
+
+const NestedGroupListItem = (props: GroupListItemProps<NestedGroupSM>) => (
+  <CustomListItem
+    Widgets={Widgets}
+    widgetsArray={widgetsArray}
+    hintBase={hintItemName}
+    {...props}
+  />
+);
+
+export const NestedGroupWidget = createGroupWidget({
+  schemaTypeRegex: /^NestedGroup$/,
+  customListItem: NestedGroupListItem,
+  customName: "NestedGroup",
+  hintItemName,
+});

package/src/legacy/lib/models/common/widgets/Widget.ts

@@ -3,8 +3,9 @@ import { IconType } from "react-icons";
 import { AnyObjectSchema } from "yup";
 
 import { TabField } from "@/legacy/lib/models/common/CustomType";
+import { GroupSM, NestedGroupSM } from "@/legacy/lib/models/common/Group";
 
-export interface Widget<F extends TabField, S extends AnyObjectSchema> {
+interface WidgetBase<F extends TabField, S extends AnyObjectSchema> {
   TYPE_NAME: FieldType;
   create: (label: string) => F;
   Meta: {
@@ -23,5 +24,13 @@ export interface Widget<F extends TabField, S extends AnyObjectSchema> {
   prepareInitialValues?: (props: F["config"]) => F["config"];
 }
 
+export type Widget<F extends TabField, S extends AnyObjectSchema> = F extends
+  | GroupSM
+  | NestedGroupSM
+  ? WidgetBase<F, S> & {
+      hintItemName: string;
+    }
+  : WidgetBase<F, S>;
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-explicit-any, @typescript-eslint/no-explicit-any
 export type AnyWidget = Widget<any, any>;

package/src/legacy/lib/models/common/widgets/groupWidgets.ts

@@ -0,0 +1,7 @@
+import { NestedGroupWidget as NestedGroup } from "./NestedGroup";
+import { NonGroupWidgets } from "./nonGroupWidgets";
+
+export const Widgets = {
+  ...NonGroupWidgets,
+  NestedGroup,
+};