@wix/editor-react-components 1.2153.0

package/dist/site/components/ShareButtons/css.css

@@ -0,0 +1,150 @@
+.tooltipWrapper__ARB6y {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.tooltip__smt-R {
+  position: absolute;
+  font-family: "Wix Madefor Text", Helvetica, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16px;
+  text-align: center;
+  box-sizing: border-box;
+  max-width: 400px;
+  background: #000000;
+  color: #ffffff;
+  padding: 4px 12px;
+  border: 1px solid #757575;
+  border-radius: 2px;
+  z-index: 10;
+  white-space: nowrap;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+}
+
+.tooltipArrow__tpprG {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-top: 10px solid #757575;
+  top: 100%;
+  left: calc(50% - 10px);
+}
+
+.tooltipArrow__tpprG::after {
+  content: "";
+  width: 0;
+  height: 0;
+  border-top: 9px solid black;
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  position: absolute;
+  top: -10px;
+  left: -8.6px;
+}.root__jXw1V {
+  display: flex;
+  flex-direction: var(--icon-position);
+  justify-content: var(--justify-content-value);
+  align-items: var(--align-items-value);
+  gap: var(--icon-text-spacing);
+  font: inherit;
+  width: 100%;
+  box-sizing: border-box;
+  border-color: black;
+}
+
+button.root__jXw1V {
+  cursor: pointer;
+}
+
+.icon__-7Z8j {
+  min-width: fit-content;
+  width: var(--icon-size, 30px);
+  height: var(--icon-size, 30px);
+  transform: rotate(var(--icon-rotation));
+  text-align: center;
+}
+
+.checkmark__NLI3R {
+  min-width: fit-content;
+  width: var(--icon-size, 24px);
+  height: var(--icon-size, 24px);
+  transform: rotate(var(--icon-rotation));
+  text-align: center;
+}
+
+.icon__-7Z8j > svg {
+  width: auto;
+  height: 100%;
+}
+
+.label__hsu2V {
+  text-align: start;
+}
+
+.root__jXw1V:hover .label__hsu2V {
+  text-decoration: underline;
+}
+
+.tooltipWrapper__H2Fyx {
+  position: relative;
+  display: block;
+  justify-content: center;
+}
+
+.showTooltip__6NoHZ > .tooltipWrapper__H2Fyx {
+  display: flex;
+}
+
+.showTooltip__6NoHZ > .copyButtonWrapper__ZPG64 {
+  display: inline-block;
+}
+
+.copyButtonWrapper__ZPG64 {
+  width: 100%;
+}
+
+.visuallyHidden__-qkir {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}:vars {
+  --justify-content: center;
+}
+
+.container__KvqWe {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px 11px;
+  flex-direction: var(--buttons-alignment);
+  justify-content: var(--btn-justify-content);
+  align-items: var(--btn-align-items);
+  column-gap: var(--column-gap);
+  row-gap: var(--rows-spacing);
+  direction: var(--direction);
+}
+
+.item__S2NHx {
+  width: var(--button-width-vertical, fit-content);
+}
+
+.focus-ring-active.keyboard-tabbing-on .item__S2NHx:focus-within {
+  outline: 2px solid #116dff;
+  outline-offset: 1px;
+  box-shadow: 0 0 1px 2px #ffffff;
+}
+.presetWrapper__J1yzj {
+  display: contents;
+}
+.fallbackDirection__HeRgn:not([dir]) {
+  direction: var(--wix-opt-in-direction);
+}

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

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

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

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

package/dist/site/components/ShareButtons/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/ShareButtons/manifest.js

@@ -0,0 +1,356 @@
+import { C as CSS_PROPERTIES, E as ELEMENTS, a as ACTIONS, D as DATA, N as NativeStateType, I as INTERACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { h as DesignStates, i as DisplayNames, j as DisplayConfig, D as DefaultValues, I as IconPositionOptions, k as PageToShareOptions, m as DefaultButtons, B as ButtonWidthOptions } from "../chunks/constants19.js";
+import { a as manifestMouseHover } 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 presets = {
+  horizontal: "horizontal",
+  vertical: "vertical"
+};
+const manifest = {
+  id: "b1e2c3d4-5f6a-7b8c-9d0e-1f2a3b4c5d6e",
+  type: "wixEditorElements.ShareButtons",
+  description: "Increase your reach by letting visitors share your site with ease across channels.",
+  installation: {
+    presets: {
+      small: presets.horizontal,
+      large: presets.horizontal
+    },
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: DefaultValues.horizontalPresetWidth
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.content
+      }
+    }
+  },
+  editorElement: {
+    selector: ".share-buttons",
+    displayName: DisplayNames.elementDisplayName,
+    archetype: Archetype.Social,
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
+      disableStretching: true,
+      disablePositioning: false
+    },
+    presets: {
+      [presets.horizontal]: {
+        presetCssUrl: `./site/components/ShareButtons/presets/${presets.horizontal}.css`,
+        displayName: DisplayNames.presets.horizontal,
+        presetDefaults: {
+          layout: {
+            resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal,
+            contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
+            disableStretching: true,
+            disablePositioning: false
+          }
+        },
+        initialSize: {
+          width: {
+            sizingType: LAYOUT.SIZING_TYPE.pixels,
+            pixels: DefaultValues.horizontalPresetWidth
+          },
+          height: {
+            sizingType: LAYOUT.SIZING_TYPE.content
+          }
+        }
+      },
+      [presets.vertical]: {
+        presetCssUrl: `./site/components/ShareButtons/presets/${presets.vertical}.css`,
+        displayName: DisplayNames.presets.vertical,
+        presetDefaults: {
+          layout: {
+            resizeDirection: LAYOUT.RESIZE_DIRECTION.none,
+            contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.none,
+            disableStretching: true,
+            disablePositioning: false
+          }
+        },
+        initialSize: {
+          width: {
+            sizingType: LAYOUT.SIZING_TYPE.content
+          },
+          height: {
+            sizingType: LAYOUT.SIZING_TYPE.content
+          }
+        }
+      }
+    },
+    interactions: {
+      triggers: [
+        INTERACTIONS.TRIGGER_TYPE.viewEnter,
+        INTERACTIONS.TRIGGER_TYPE.viewProgress
+      ]
+    },
+    cssCustomProperties: {
+      "buttons-spacing": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.columnGap,
+        displayName: DisplayNames.cssCustomProperties["buttons-spacing"],
+        defaultValue: DefaultValues.buttonsSpacing
+      },
+      "rows-spacing": {
+        // only for horizontal layout
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
+        displayName: DisplayNames.cssCustomProperties["rows-spacing"],
+        defaultValue: DefaultValues.rowsSpacing
+      },
+      align: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent,
+        defaultValue: DefaultValues.align
+      },
+      "button-width": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
+        displayName: DisplayNames.cssCustomProperties["button-width"],
+        customEnum: {
+          cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
+          options: ButtonWidthOptions
+        },
+        defaultValue: DefaultValues.buttonWidth
+      }
+    },
+    states: {
+      hover: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.hover.displayName,
+        className: DesignStates.root.hover.className,
+        pseudoClass: NativeStateType.hover
+      })
+    },
+    data: {
+      buttons: {
+        dataType: DATA.DATA_TYPE.arrayItems,
+        displayName: DisplayNames.data.buttons.displayName,
+        [DATA.DATA_TYPE.arrayItems]: {
+          data: {
+            items: {
+              label: {
+                dataType: DATA.DATA_TYPE.text,
+                displayName: DisplayNames.data.buttons.items.label,
+                [DATA.DATA_TYPE.text]: {
+                  maxLength: 120
+                },
+                defaultValue: ""
+              },
+              description: {
+                dataType: DATA.DATA_TYPE.text,
+                displayName: DisplayNames.data.buttons.items.description,
+                [DATA.DATA_TYPE.text]: {
+                  maxLength: 120
+                },
+                defaultValue: ""
+              },
+              value: {
+                dataType: DATA.DATA_TYPE.text,
+                displayName: DisplayNames.data.buttons.items.value,
+                [DATA.DATA_TYPE.text]: {
+                  maxLength: 120
+                },
+                defaultValue: ""
+              },
+              disabled: {
+                dataType: DATA.DATA_TYPE.booleanValue,
+                displayName: DisplayNames.data.buttons.items.disabled,
+                defaultValue: false
+              },
+              isDefault: {
+                dataType: DATA.DATA_TYPE.booleanValue,
+                displayName: DisplayNames.data.buttons.items.isDefault,
+                defaultValue: false
+              },
+              unavailable: {
+                dataType: DATA.DATA_TYPE.booleanValue,
+                displayName: DisplayNames.data.buttons.items.unavailable,
+                defaultValue: false
+              },
+              platformId: {
+                dataType: DATA.DATA_TYPE.text,
+                displayName: DisplayNames.data.buttons.items.platformId,
+                [DATA.DATA_TYPE.text]: {
+                  maxLength: 120
+                },
+                defaultValue: ""
+              },
+              illustration: {
+                dataType: DATA.DATA_TYPE.vectorArt,
+                displayName: DisplayNames.data.buttons.items.illustration,
+                [DATA.DATA_TYPE.vectorArt]: {}
+              },
+              isHidden: {
+                dataType: DATA.DATA_TYPE.booleanValue,
+                displayName: DisplayNames.data.buttons.items.isHidden,
+                defaultValue: false
+              }
+            }
+          }
+        },
+        defaultValue: DefaultButtons
+      },
+      pageToShare: {
+        dataType: DATA.DATA_TYPE.textEnum,
+        displayName: DisplayNames.data.pageToShare,
+        [DATA.DATA_TYPE.textEnum]: {
+          options: PageToShareOptions
+        },
+        defaultValue: DefaultValues.pageToShare
+      },
+      direction: {
+        dataType: DATA.DATA_TYPE.direction
+      },
+      ...manifestMouseHover(),
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [
+            DATA.A11Y_ATTRIBUTES.ariaLabel,
+            DATA.A11Y_ATTRIBUTES.ariaDescribedby,
+            DATA.A11Y_ATTRIBUTES.ariaLabelledby
+          ]
+        }
+      }
+    },
+    customActions: {
+      manage: {
+        displayName: DisplayNames.customActions.manage.displayName,
+        execution: {
+          actionType: ACTIONS.ACTION_TYPE.panel,
+          panel: {
+            panelType: ACTIONS.PANEL_TYPE.panelId,
+            panelId: "da3d1459-88f7-4769-95ee-b688fb28ae66"
+          }
+        }
+      },
+      format: {
+        displayName: DisplayNames.customActions.format.displayName,
+        execution: {
+          actionType: ACTIONS.ACTION_TYPE.panel,
+          panel: {
+            panelType: ACTIONS.PANEL_TYPE.panelId,
+            panelId: "84f79902-0cdc-438c-8bcb-3d2235ee2dbe"
+          }
+        }
+      }
+    },
+    displayFilters: {
+      data: {
+        hide: ["buttons"]
+      }
+    },
+    elements: {
+      button: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.button.elementDisplayName,
+          selector: ".button",
+          behaviors: {
+            selectable: false
+          },
+          cssProperties: {
+            background: { defaultValue: "transparent" },
+            borderInlineStart: { defaultValue: "1px solid rgba(0, 0, 0, 1)" },
+            borderInlineEnd: { defaultValue: "1px solid rgba(0, 0, 0, 1)" },
+            borderBottom: { defaultValue: "1px solid rgba(0, 0, 0, 1)" },
+            borderTop: { defaultValue: "1px solid rgba(0, 0, 0, 1)" },
+            borderRadius: { defaultValue: "0px" },
+            boxShadow: { defaultValue: "none" },
+            padding: { defaultValue: "8px" }
+          },
+          cssCustomProperties: {
+            "icon-text-spacing": {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.columnGap,
+              displayName: DisplayNames.button.cssCustomProperties["icon-text-spacing"],
+              defaultValue: DefaultValues.iconTextSpacing
+            },
+            "icon-position": {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
+              displayName: DisplayNames.button.cssCustomProperties["icon-position"],
+              customEnum: {
+                cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
+                options: IconPositionOptions
+              },
+              defaultValue: DefaultValues.iconPosition
+            },
+            "horizontal-alignment": {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent,
+              defaultValue: DefaultValues.contentAlignment
+            }
+          }
+        }
+      },
+      label: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.label.elementDisplayName,
+          selector: ".label",
+          behaviors: {
+            removable: true,
+            selectable: false
+          },
+          cssProperties: {
+            display: {
+              defaultValue: "inline-block",
+              display: DisplayConfig
+            },
+            font: {},
+            color: {},
+            letterSpacing: {
+              defaultValue: "0em"
+            },
+            textDecorationLine: {},
+            textTransform: {}
+          }
+        }
+      },
+      icon: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.icon.elementDisplayName,
+          selector: ".icon",
+          behaviors: {
+            selectable: false,
+            removable: true
+          },
+          cssProperties: {
+            display: {
+              defaultValue: "inline-block",
+              display: DisplayConfig
+            }
+          },
+          cssCustomProperties: {
+            "icon-size": {
+              displayName: DisplayNames.icon.cssCustomProperties["icon-size"],
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.length
+            },
+            "icon-rotation": {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.angle
+            }
+          }
+        }
+      }
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/ShareButtons/component.tsx",
+      moduleSpecifier: "@wix/editor-react-components/ShareButtons",
+      serviceDependencies: [
+        "@wix/viewer-service-translations",
+        "@wix/viewer-service-url"
+      ],
+      dependencies: {
+        serviceDependencies: [
+          "@wix/viewer-service-translations",
+          "@wix/viewer-service-url"
+        ]
+      }
+    },
+    editor: {
+      componentUrl: "./site/components/ShareButtons/component.preview.tsx"
+    }
+  }
+};
+export {
+  manifest as default
+};

package/dist/site/components/ShareButtons/panels/format/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const presets: {
+    horizontal: string;
+    vertical: string;
+};
+export declare const FORMAT_PANEL_BI_PARAMS: {
+    component_type: string;
+    builder_type: string;
+    panel_name: string;
+    control_type: string;
+    control_id: string;
+    panel_builder: string;
+};

package/dist/site/components/ShareButtons/panels/format/extension.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    type: string;
+};
+export default _default;

package/dist/site/components/ShareButtons/panels/format/panel.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/site/components/ShareButtons/panels/manage/ButtonActions.d.ts

@@ -0,0 +1,9 @@
+import { ShareButton } from './types';
+import * as React from 'react';
+interface ButtonActionsProps {
+    button: ShareButton;
+    index: number;
+    hovered: boolean;
+}
+export declare const ButtonActions: React.FC<ButtonActionsProps>;
+export {};

package/dist/site/components/ShareButtons/panels/manage/ButtonItem.d.ts

@@ -0,0 +1,8 @@
+import { ShareButton } from './types';
+import * as React from 'react';
+interface ButtonItemProps {
+    button: ShareButton;
+    index: number;
+}
+export declare const ButtonItem: React.FC<ButtonItemProps>;
+export {};

package/dist/site/components/ShareButtons/panels/manage/ButtonManagementContext.d.ts

@@ -0,0 +1,27 @@
+import { ShareButton } from './types';
+import { NestableListItem } from '@wix/design-system';
+import { Translations } from '../translations/consts';
+import * as React from 'react';
+interface ButtonManagementContextValue {
+    buttons: Array<ShareButton>;
+    editIndex: number | undefined;
+    editValue: string;
+    handleChangeIcon: (button: ShareButton) => Promise<void>;
+    handleStartEdit: (index: number, currentLabel: string) => void;
+    handleCancelEdit: () => void;
+    handleSaveEdit: () => void;
+    handleToggleVisibility: (button: ShareButton) => void;
+    handleEditValueChange: (value: string) => void;
+    handleReorderButtons: (onDataChange: {
+        items: Array<NestableListItem>;
+        item: NestableListItem;
+    }) => void;
+    isKeyboardNavigation: boolean;
+    translations: Translations;
+}
+export declare function useButtonManagementContext(): ButtonManagementContextValue;
+interface ButtonManagementProviderProps {
+    children: React.ReactNode;
+}
+export declare function ButtonManagementProvider({ children, }: ButtonManagementProviderProps): React.JSX.Element;
+export {};

package/dist/site/components/ShareButtons/panels/manage/EditModeControls.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface EditModeControlsProps {
+    editValue: string;
+    onEditValueChange: (value: string) => void;
+    onCancel: () => void;
+    onSave: () => void;
+}
+export declare const EditModeControls: React.FC<EditModeControlsProps>;
+export {};

package/dist/site/components/ShareButtons/panels/manage/constants.d.ts

@@ -0,0 +1,61 @@
+export declare const CHANGE_ICON_BI_PARAMS: {
+    action_type: string;
+    component_type: string;
+    builder_type: string;
+    panel_name: string;
+    panel_builder: string;
+    control_id: string;
+    control_type: string;
+};
+export declare const RENAME_BI_PARAMS: {
+    action_type: string;
+    component_type: string;
+    builder_type: string;
+    panel_name: string;
+    panel_builder: string;
+    control_id: string;
+    control_type: string;
+};
+export declare const RENAME_CONFIRM_BI_PARAMS: {
+    action_type: string;
+    component_type: string;
+    builder_type: string;
+    panel_name: string;
+    panel_builder: string;
+    control_id: string;
+    control_type: string;
+};
+export declare const HIDE_BI_PARAMS: {
+    action_type: string;
+    component_type: string;
+    builder_type: string;
+    panel_name: string;
+    panel_builder: string;
+    control_id: string;
+    control_type: string;
+};
+export declare const UNHIDE_BI_PARAMS: {
+    action_type: string;
+    component_type: string;
+    builder_type: string;
+    panel_name: string;
+    panel_builder: string;
+    control_id: string;
+    control_type: string;
+};
+export declare const REORDER_BI_PARAMS: {
+    action_type: string;
+    control_type: string;
+    component_type: string;
+    builder_type: string;
+    panel_name: string;
+    panel_builder: string;
+    control_id: string;
+};
+export declare const dataHooks: {
+    nestableList: string;
+    buttonItem: string;
+};
+export declare const tooltips: {
+    moreActions: string;
+};

package/dist/site/components/ShareButtons/panels/manage/extension.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    type: string;
+};
+export default _default;

package/dist/site/components/ShareButtons/panels/manage/hooks/useNavigationMode.d.ts

@@ -0,0 +1,5 @@
+export type NavigationMode = 'mouse' | 'keyboard';
+export declare const useNavigationMode: () => {
+    navigationMode: NavigationMode;
+    isKeyboardNavigation: boolean;
+};

package/dist/site/components/ShareButtons/panels/manage/panel.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const ManagePanel: () => React.JSX.Element;
+export default ManagePanel;

package/dist/site/components/ShareButtons/panels/manage/test-utils.d.ts

@@ -0,0 +1,7 @@
+import { ShareButton } from './types';
+import { MockElementConfig } from '../../../../../test-utils';
+export type PanelData = {
+    buttons: Array<ShareButton>;
+};
+export declare const createMockPanelData: (overrides?: Partial<PanelData>) => PanelData;
+export declare const createElementMock: (data: PanelData) => MockElementConfig;