@wix/editor-react-components 1.2153.0

package/dist/site/components/AccordionComponent/component.preview.d.ts

@@ -0,0 +1,4 @@
+import { default as AccordionContainer } from './component';
+import { ResolveManifestOverrides } from '../../../utils/ResolveManifestOverrides';
+export default AccordionContainer;
+export declare const resolveManifestOverrides: ResolveManifestOverrides;

package/dist/site/components/AccordionComponent/constants.d.ts

@@ -0,0 +1,72 @@
+import { AccordionContainerProps } from './types';
+export declare const DISPLAY_NAMES: {
+    readonly component: "Accordion";
+    readonly elements: {
+        readonly accordionItems: "Accordion items";
+        readonly itemContent: "Item content";
+        readonly itemTitles: "Item titles";
+    };
+    readonly actions: {
+        readonly manageAccordion: "Manage Accordion";
+        readonly animatedIcon: "Customize Icon";
+    };
+    readonly data: {
+        readonly items: "Item";
+        readonly title: "Title";
+        readonly activeItem: "Active Item";
+        readonly allowMultipleOpen: "Allow multiple open items";
+        readonly defaultState: "Choose the default state";
+    };
+    readonly defaultStateOptions: {
+        readonly allClosed: "All items closed";
+        readonly firstOpened: "First item opened";
+        readonly allOpened: "All items opened";
+    };
+    readonly displayGroups: {
+        readonly accordionItems: "Accordion Items";
+        readonly layout: "Layout";
+    };
+    readonly layout: {
+        readonly itemsGap: "Space between items";
+    };
+};
+export declare const DEFAULT_PROPS: {
+    items: NonNullable<AccordionContainerProps['items']>;
+    defaultOpen: NonNullable<AccordionContainerProps['defaultOpen']>;
+    allowMultipleOpen: NonNullable<AccordionContainerProps['allowMultipleOpen']>;
+    titleHtmlTag: string;
+};
+export declare const accordionManifestDefaults: {
+    readonly data: {
+        readonly items: NonNullable<AccordionContainerProps['items']>;
+        readonly defaultOpen: NonNullable<AccordionContainerProps['defaultOpen']>;
+        readonly allowMultipleOpen: NonNullable<AccordionContainerProps['allowMultipleOpen']>;
+        readonly titleHtmlTag: string;
+    };
+    readonly style: {
+        readonly itemsGap: "0px";
+    };
+};
+export declare const CONTAINER_INITIAL_HEIGHT = 240;
+export declare const DesignStates: {
+    readonly accordionItem: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "accordion-component__accordion-item--hover";
+        };
+        readonly selected: {
+            readonly displayName: "Selected";
+            readonly className: "accordion-component__accordion-item--selected";
+        };
+    };
+    readonly itemTitle: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "accordion-component__item-title--hover";
+        };
+        readonly selected: {
+            readonly displayName: "Selected";
+            readonly className: "accordion-component__item-title--selected";
+        };
+    };
+};

package/dist/site/components/AccordionComponent/css.css

@@ -0,0 +1,47 @@
+.accordion-wrapper__34hOZ {
+  width: 100%;
+  box-sizing: border-box;
+  --items-gap: 0px;
+}
+
+.accordion-root__SZyFY {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--items-gap);
+}
+
+.accordion-header__eNiKz {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-align: start;
+  border-color: #000000;
+}
+.accordion-header__eNiKz:hover .accordion-item-label__w-z9o, .accordion-header__eNiKz[data-state=open] .accordion-item-label__w-z9o, .accordion-header__eNiKz.accordion-component__item-title--hover .accordion-item-label__w-z9o, .accordion-header__eNiKz.accordion-component__item-title--selected .accordion-item-label__w-z9o {
+  text-decoration: underline;
+}
+
+.accordion-item-label__w-z9o {
+  flex: 1;
+}
+
+.icon__VLZlu {
+  order: var(--icon-order, 1);
+  flex-shrink: 0;
+}
+.icon__VLZlu.icon-open__NqLuZ {
+  transform: rotate(180deg);
+}
+
+.accordion-content__CSlnh[data-state=closed] {
+  display: none;
+}
+.accordion-content__CSlnh[data-state=open] {
+  display: grid;
+  min-height: 10px;
+}
+.fallbackDirection__HeRgn:not([dir]) {
+  direction: var(--wix-opt-in-direction);
+}

package/dist/site/components/AccordionComponent/hooks.d.ts

@@ -0,0 +1,5 @@
+import { AccordionItem, AccordionContainerProps } from './types';
+export declare function useAccordionState(items: Array<AccordionItem>, defaultOpen?: AccordionContainerProps['defaultOpen'], allowMultipleOpen?: boolean, activeItem?: number, previewItemContent?: boolean): {
+    openedItems: string[];
+    handleValueChange: (value: Array<string> | string) => void;
+};

package/dist/site/components/AccordionComponent/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as AccordionComponent } from './component';

package/dist/site/components/AccordionComponent/index.js

@@ -0,0 +1,6 @@
+'use client';
+
+import AccordionComponent from './component.js';
+
+export { AccordionComponent };
+export default AccordionComponent;

package/dist/site/components/AccordionComponent/manifest.d.ts

@@ -0,0 +1,5 @@
+import { EditorReactComponent } from '@wix/component-protocol/schema';
+declare const manifest: EditorReactComponent & {
+    id: string;
+};
+export default manifest;

package/dist/site/components/AccordionComponent/manifest.js

@@ -0,0 +1,361 @@
+import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, L as LAYOUT, c as ContainerType, a as ACTIONS, E as ELEMENTS, N as NativeStateType, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { a as DesignStates, b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT } from "../chunks/constants32.js";
+import { m as manifestFocusable, a as manifestMouseHover, b as manifestClickable } from "../chunks/manifestSdkMixins.js";
+import { w as withSpec } from "../chunks/manifest.js";
+import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
+const options = [
+  {
+    value: "Start",
+    displayName: "Start",
+    appliedStyles: [{ property: "--icon-order", value: "-1" }]
+  },
+  {
+    value: "End",
+    displayName: "End",
+    appliedStyles: [{ property: "--icon-order", value: "1" }]
+  }
+];
+const sharedProps = {
+  displayName: "Icon position",
+  defaultValue: "End"
+};
+const iconPositionConfig = {
+  cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
+  ...sharedProps,
+  customEnum: {
+    cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
+    options
+  }
+};
+const manifest = {
+  id: "6e420db9-bc16-44be-b5bf-cc8f348ebc07",
+  type: "wixEditorElements.AccordionComponent",
+  description: "AccordionContainer",
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 400
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.content
+      }
+    }
+  },
+  editorElement: {
+    selector: ".accordion",
+    displayName: DISPLAY_NAMES.component,
+    archetype: Archetype.Accordion,
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
+      disableStretching: false,
+      disablePositioning: false
+    },
+    cssCustomProperties: {
+      "items-gap": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
+        displayName: DISPLAY_NAMES.layout.itemsGap,
+        defaultValue: accordionManifestDefaults.style.itemsGap
+      }
+    },
+    cssProperties: {
+      background: {},
+      paddingTop: {},
+      paddingBottom: {},
+      paddingInlineStart: {},
+      paddingInlineEnd: {},
+      borderTop: {},
+      borderBottom: {},
+      borderInlineStart: {},
+      borderInlineEnd: {},
+      borderStartStartRadius: {},
+      borderStartEndRadius: {},
+      borderEndStartRadius: {},
+      borderEndEndRadius: {}
+    },
+    elements: {
+      accordionItem: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DISPLAY_NAMES.elements.accordionItems,
+          selector: ".accordion-item",
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssProperties: {
+            background: {},
+            borderInlineStart: {},
+            borderInlineEnd: {},
+            borderTop: {},
+            borderBottom: {},
+            borderStartStartRadius: {},
+            borderStartEndRadius: {},
+            borderEndStartRadius: {},
+            borderEndEndRadius: {},
+            boxShadow: {}
+          },
+          states: {
+            hover: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.accordionItem.hover.displayName,
+              className: DesignStates.accordionItem.hover.className,
+              pseudoClass: NativeStateType.hover
+            }),
+            selected: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.accordionItem.selected.displayName,
+              className: DesignStates.accordionItem.selected.className
+            })
+          }
+        }
+      },
+      itemContent: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DISPLAY_NAMES.elements.itemContent,
+          selector: ".item-content",
+          behaviors: {
+            selectable: false
+          },
+          cssProperties: {
+            background: {},
+            borderInlineStart: {},
+            borderInlineEnd: {},
+            borderTop: {},
+            borderBottom: {},
+            borderStartStartRadius: {},
+            borderStartEndRadius: {},
+            borderEndStartRadius: {},
+            borderEndEndRadius: {},
+            boxShadow: {},
+            paddingTop: {},
+            paddingBottom: {},
+            paddingInlineStart: {},
+            paddingInlineEnd: {}
+          },
+          visibleState: {
+            stateKey: "previewItemContent",
+            elementPath: ".root"
+          }
+        }
+      },
+      itemTitle: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DISPLAY_NAMES.elements.itemTitles,
+          selector: ".item-title",
+          behaviors: {
+            selectable: false
+          },
+          cssProperties: {
+            font: {},
+            color: {},
+            background: {},
+            borderInlineStart: {},
+            borderInlineEnd: {},
+            borderTop: {},
+            borderBottom: {},
+            borderStartStartRadius: {},
+            borderStartEndRadius: {},
+            borderEndStartRadius: {},
+            borderEndEndRadius: {},
+            boxShadow: {},
+            paddingTop: {},
+            paddingBottom: {},
+            paddingInlineStart: {},
+            paddingInlineEnd: {},
+            textAlign: {
+              defaultValue: "start"
+            },
+            textTransform: {}
+          },
+          cssCustomProperties: {
+            "icon-position": iconPositionConfig
+          },
+          states: {
+            hover: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.itemTitle.hover.displayName,
+              className: DesignStates.itemTitle.hover.className,
+              pseudoClass: NativeStateType.hover
+            }),
+            selected: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.itemTitle.selected.displayName,
+              className: DesignStates.itemTitle.selected.className
+            })
+          },
+          displayGroups: {
+            layoutGroup: {
+              groupType: DISPLAY_GROUPS.GROUP_TYPE.cssDataType,
+              cssDataType: {
+                items: ["icon-position"]
+              }
+            }
+          },
+          data: {
+            a11y: {
+              dataType: DATA.DATA_TYPE.a11y,
+              [DATA.DATA_TYPE.a11y]: {
+                attributes: [DATA.A11Y_ATTRIBUTES.tag]
+              }
+            }
+          }
+        }
+      },
+      animatedIcon: {
+        elementType: ELEMENTS.ELEMENT_TYPE.refElement,
+        refElement: {
+          displayName: "Icon",
+          selector: ".animated-icon",
+          type: "wixEditorElements.AnimatedIcon",
+          behaviors: {
+            selectable: false,
+            removable: false
+          }
+        }
+      }
+    },
+    actions: {
+      manageItems: {
+        displayName: DISPLAY_NAMES.actions.manageAccordion,
+        execution: {
+          actionType: ACTIONS.ACTION_TYPE.data,
+          data: {
+            dataItemKey: "items"
+          }
+        }
+      }
+    },
+    customActions: {
+      animatedIcon: {
+        displayName: DISPLAY_NAMES.actions.animatedIcon,
+        execution: {
+          actionType: ACTIONS.ACTION_TYPE.forward,
+          forward: {
+            elementPath: ".self.animatedIcon",
+            actionName: ACTIONS.ACTION_NAME.custom,
+            custom: "animatedIcon"
+          }
+        }
+      }
+    },
+    data: {
+      items: {
+        dataType: DATA.DATA_TYPE.arrayItems,
+        displayName: DISPLAY_NAMES.data.items,
+        [DATA.DATA_TYPE.arrayItems]: {
+          data: {
+            items: {
+              name: {
+                dataType: DATA.DATA_TYPE.text,
+                displayName: DISPLAY_NAMES.data.title
+              },
+              content: {
+                dataType: DATA.DATA_TYPE.container,
+                [DATA.DATA_TYPE.container]: {
+                  selector: ".item-content",
+                  containerType: ContainerType.simple,
+                  simple: {
+                    behaviors: {
+                      selectable: true
+                    },
+                    layout: {
+                      containerResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
+                      resizeDirection: LAYOUT.RESIZE_DIRECTION.vertical,
+                      height: CONTAINER_INITIAL_HEIGHT
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
+      activeItem: {
+        displayName: DISPLAY_NAMES.data.activeItem,
+        dataType: DATA.DATA_TYPE.number
+      },
+      allowMultipleOpen: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DISPLAY_NAMES.data.allowMultipleOpen
+      },
+      defaultOpen: {
+        dataType: DATA.DATA_TYPE.textEnum,
+        displayName: DISPLAY_NAMES.data.defaultState,
+        defaultValue: accordionManifestDefaults.data.defaultOpen,
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            {
+              value: "none",
+              displayName: DISPLAY_NAMES.defaultStateOptions.allClosed
+            },
+            {
+              value: "first",
+              displayName: DISPLAY_NAMES.defaultStateOptions.firstOpened
+            },
+            {
+              value: "all",
+              displayName: DISPLAY_NAMES.defaultStateOptions.allOpened
+            }
+          ]
+        }
+      },
+      direction: {
+        dataType: DATA.DATA_TYPE.direction
+      },
+      ...manifestClickable(),
+      ...manifestMouseHover(),
+      ...manifestFocusable()
+    },
+    states: {
+      previewItemContent: {
+        props: {
+          previewItemContent: true
+        }
+      }
+    },
+    displayFilters: {
+      states: {
+        hide: ["previewItemContent"]
+      }
+    },
+    displayGroups: {
+      orderedData: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: ["defaultOpen", "allowMultipleOpen"]
+        }
+      },
+      items: {
+        displayName: DISPLAY_NAMES.displayGroups.accordionItems,
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.arrayItems,
+        arrayItems: {
+          arrayItems: "items",
+          selectedItemIndex: "activeItem",
+          allowNoSelection: true
+        }
+      }
+    },
+    helpArticle: {
+      kbId: "bce1d4c7-cc70-4b94-a131-de06f04a9cb6"
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/AccordionComponent/component.tsx",
+      moduleSpecifier: "@wix/editor-react-components/AccordionComponent",
+      dependencies: {
+        componentDependencies: ["@wix/editor-react-components/AnimatedIcon"]
+      }
+    },
+    editor: {
+      componentUrl: "./site/components/AccordionComponent/component.preview.tsx"
+    }
+  }
+};
+export {
+  manifest as default
+};

package/dist/site/components/AccordionComponent/manifestConfigs/iconPositionConfig.d.ts

@@ -0,0 +1,16 @@
+export declare const iconPositionConfig: {
+    customEnum: {
+        cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+        options: {
+            value: string;
+            displayName: string;
+            appliedStyles: {
+                property: string;
+                value: string;
+            }[];
+        }[];
+    };
+    displayName: string;
+    defaultValue: string;
+    cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+};

package/dist/site/components/AccordionComponent/types.d.ts

@@ -0,0 +1,49 @@
+import { A11y, Direction, VectorArt } from '@wix/editor-react-types';
+import { SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+export interface AccordionItem {
+    name: string;
+    content: React.ReactNode;
+}
+export interface AccordionElementProps {
+    itemTitle?: {
+        a11y?: A11y;
+    };
+    animatedIcon?: {
+        svg?: VectorArt;
+        duration?: number;
+        svgLastAnimatedSelected?: VectorArt;
+    };
+}
+export interface AccordionContainerProps extends SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps {
+    /** DOM `id` on the root element. */
+    id?: string;
+    /**
+     * Appended to the root `.accordion`. Use this for CSS-variable overrides
+     * targeting a higher-specificity selector than the single-class defaults.
+     */
+    className?: string;
+    /**
+     * Headers and bodies. `content` accepts any React node (`<p>`, `<div>`,
+     * fragments, JSX). In the editor it's a container slot.
+     */
+    items: Array<AccordionItem>;
+    /**
+     * Index of the currently selected item, used by the editor's array-items
+     * display group. Not generally needed at the runtime call site.
+     */
+    activeItem?: number;
+    /** Which item(s) are open on mount. */
+    defaultOpen?: 'none' | 'all' | 'first';
+    /** When `true`, more than one item can stay expanded simultaneously. */
+    allowMultipleOpen?: boolean;
+    children: React.ReactNode;
+    /** Sets the `dir` attribute on the root. */
+    direction?: Direction;
+    /**
+     * Props forwarded to nested elements. `itemTitle.a11y.tag` picks the heading
+     * tag (`h1`–`h6`, default `h3`); `animatedIcon` overrides the chevron SVG and
+     * its rotation timing.
+     */
+    elementProps?: AccordionElementProps;
+    previewItemContent?: boolean;
+}

package/dist/site/components/AccordionComponent/utils.d.ts

@@ -0,0 +1,4 @@
+import { AccordionItem, AccordionContainerProps } from './types';
+export declare function calculateInitialOpenedItems(items: Array<AccordionItem>, defaultOpen: AccordionContainerProps['defaultOpen'], allowMultipleOpen: boolean): Array<string>;
+export declare function shouldUseMultipleMode(allowMultipleOpen: boolean, defaultOpen: AccordionContainerProps['defaultOpen']): boolean;
+export declare function normalizeAccordionValue(value: Array<string> | string): Array<string>;

package/dist/site/components/AnimatedIcon/AnimatedIcon.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { AnimatedSvgRef, AnimatedIconBuilderProps } from './types';
+export type { AnimatedIconBuilderProps as AnimatedIconProps } from './types';
+declare const AnimatedIcon: React.ForwardRefExoticComponent<AnimatedIconBuilderProps & React.RefAttributes<AnimatedSvgRef>>;
+export default AnimatedIcon;

package/dist/site/components/AnimatedIcon/AnimatedIcon.semanticClassNames.d.ts

@@ -0,0 +1,4 @@
+declare const semanticClassNames: {
+    readonly root: "animated-icon";
+};
+export default semanticClassNames;

package/dist/site/components/AnimatedIcon/component.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { AnimatedSvgRef, AnimatedIconBuilderProps } from './types';
+declare const AnimatedIconWithReducedMotion: React.ForwardRefExoticComponent<AnimatedIconBuilderProps & React.RefAttributes<AnimatedSvgRef>>;
+export default AnimatedIconWithReducedMotion;

package/dist/site/components/AnimatedIcon/component.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useService } from "@wix/services-manager-react";
+import { d as definitionExports } from "../chunks/index2.js";
+import { A as AnimatedIcon } from "../chunks/AnimatedIcon.js";
+const AnimatedIconWithReducedMotion = forwardRef((props, ref) => {
+  const environment = useService(definitionExports.EnvironmentDefinition);
+  const reducedMotion = environment.reducedMotion;
+  return /* @__PURE__ */ jsx(AnimatedIcon, { ...props, ref, reducedMotion });
+});
+export {
+  AnimatedIconWithReducedMotion as default
+};

package/dist/site/components/AnimatedIcon/components/AnimatedSvg.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { AnimatedSvgRef, AnimatedSvgProps } from '../types';
+declare const AnimatedSvg: React.ForwardRefExoticComponent<AnimatedSvgProps & React.RefAttributes<AnimatedSvgRef>>;
+export default AnimatedSvg;