@wix/patterns-fields 1.43.0 → 1.44.0

package/src/components/reference/cell-multi-reference-input.tsx

@@ -0,0 +1,243 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+  Divider,
+  ListItemAction,
+  MultiSelect,
+  listItemSelectBuilder,
+} from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+import { ReferenceAvatar } from './reference-avatar';
+import type { CellMultiReferenceItem } from './cell-multi-reference-view';
+import { st, classes } from './cell-multi-reference-input.st.css.js';
+
+export type { CellMultiReferenceItem };
+
+export interface CellMultiReferenceInputHandle {
+  focus: () => void;
+  hideOptions: () => void;
+}
+
+export interface CellMultiReferenceInputProps {
+  /** Dropdown options — already filtered/paginated by the caller. */
+  items: CellMultiReferenceItem[];
+  /** Currently selected references, rendered as removable chips. */
+  selectedItems: CellMultiReferenceItem[];
+  /** Text shown in the search input. */
+  value: string;
+  onChange: (value: string) => void;
+  onSelect: (item: CellMultiReferenceItem) => void;
+  onRemoveTag: (id: string) => void;
+  onBlur?: () => void;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  infiniteScroll?: boolean;
+  hasMore?: boolean;
+  loadMore?: () => void;
+  fixedFooter?: React.ReactNode;
+  /** When provided, renders an "Open Collection" action at the bottom of the dropdown. */
+  onOpenCollection?: () => void;
+  /** Open dropdown immediately on mount (single-click / type-to-edit triggers). */
+  autoOpen?: boolean;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+  dataHook?: string;
+}
+
+const ROW_HEIGHT = 30;
+const MAX_NUM_ROWS = 7;
+
+interface MultiSelectHandle {
+  focus?: () => void;
+  showOptions?: () => void;
+  hideOptions?: () => void;
+}
+
+export const CellMultiReferenceInput = React.forwardRef<
+  CellMultiReferenceInputHandle,
+  CellMultiReferenceInputProps
+>(
+  (
+    {
+      items,
+      selectedItems,
+      value,
+      onChange,
+      onSelect,
+      onRemoveTag,
+      onBlur,
+      onKeyDown,
+      infiniteScroll,
+      hasMore,
+      loadMore,
+      fixedFooter,
+      onOpenCollection,
+      autoOpen,
+      inputRef,
+      dataHook,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslations();
+    const msRef = useRef<MultiSelectHandle | null>(null);
+    const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+    React.useImperativeHandle(ref, () => ({
+      focus: () => msRef.current?.focus?.(),
+      hideOptions: () => msRef.current?.hideOptions?.(),
+    }));
+
+    useEffect(() => {
+      if (autoOpen) {
+        msRef.current?.focus?.();
+        requestAnimationFrame(() => msRef.current?.showOptions?.());
+      }
+      // Intentionally run only on mount
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Expose the MultiSelect input element to the framework's inputRef so
+    // type-to-edit + framework-level focus management work.
+    useEffect(() => {
+      if (!inputRef) {
+        return;
+      }
+      const el = wrapperRef.current?.querySelector<HTMLInputElement>('input');
+      if (el) {
+        inputRef.current = { focus: () => el.focus() };
+      }
+    }, [inputRef]);
+
+    const untitled = t('patterns-fields.reference.untitled');
+
+    const tags = useMemo(
+      () =>
+        selectedItems.map((item) => ({
+          id: item.id,
+          dataHook: 'multi-reference-edit-tag',
+          label: item.name || untitled,
+          thumb: (
+            <ReferenceAvatar
+              name={item.name || untitled}
+              image={item.image}
+              size="size18"
+            />
+          ),
+        })),
+      [selectedItems, untitled],
+    );
+
+    const options = useMemo(
+      () =>
+        items.map((item) =>
+          listItemSelectBuilder({
+            id: item.id,
+            title: item.name || untitled,
+            label: item.name || untitled,
+            prefix: (
+              <ReferenceAvatar
+                name={item.name || untitled}
+                image={item.image}
+              />
+            ),
+            size: 'small',
+            ellipsis: true,
+          }),
+        ),
+      [items, untitled],
+    );
+
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),
+      [onChange],
+    );
+
+    const handleSelect = useCallback(
+      (option: { id: string | number }) => {
+        const item = items.find((i) => i.id === String(option.id));
+        if (item) {
+          onSelect(item);
+        }
+      },
+      [items, onSelect],
+    );
+
+    const handleRemoveTag = useCallback(
+      (id: string | number) => onRemoveTag(String(id)),
+      [onRemoveTag],
+    );
+
+    const combinedFooter = useMemo(() => {
+      if (!fixedFooter && !onOpenCollection) {
+        return undefined;
+      }
+      return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        <div onMouseDown={(e) => e.preventDefault()}>
+          {fixedFooter}
+          {onOpenCollection && <Divider />}
+          {onOpenCollection && (
+            <ListItemAction
+              title={t('patterns-fields.reference.open_collection')}
+              size="small"
+              onClick={() => {
+                msRef.current?.hideOptions?.();
+                onOpenCollection();
+              }}
+              dataHook="reference-open-collection"
+            />
+          )}
+        </div>
+      );
+    }, [fixedFooter, onOpenCollection, t]);
+
+    return (
+      // Prevent EditableCell's row click/dblclick handlers from firing when
+      // the user interacts with the input or dropdown.
+      <div
+        ref={wrapperRef}
+        className={st(classes.root)}
+        data-hook={dataHook}
+        onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+        // Capture phase so keys (e.g. Escape) can be intercepted before the
+        // WDS MultiSelect handles and stops them on the inner input.
+        onKeyDownCapture={onKeyDown}
+      >
+        <MultiSelect
+          ref={(instance: MultiSelectHandle | null) => {
+            msRef.current = instance;
+          }}
+          dataHook="multi-reference-input-multiselect"
+          size="small"
+          border="none"
+          tags={tags}
+          options={options}
+          predicate={() => true}
+          value={value}
+          onChange={handleChange}
+          onSelect={handleSelect}
+          onRemoveTag={handleRemoveTag}
+          onBlur={onBlur}
+          placeholder={
+            selectedItems.length === 0
+              ? t('auto-patterns.fields.select_placeholder')
+              : ''
+          }
+          emptyStateMessage={t('auto-patterns.fields.no_results_found')}
+          maxHeightPixels={ROW_HEIGHT * MAX_NUM_ROWS}
+          infiniteScroll={infiniteScroll}
+          hasMore={hasMore}
+          loadMore={loadMore}
+          fixedFooter={combinedFooter}
+          popoverProps={{
+            appendTo: 'window',
+            flip: true,
+            fixed: false,
+            placement: 'bottom-start',
+            zIndex: 9999,
+          }}
+        />
+      </div>
+    );
+  },
+);
+
+CellMultiReferenceInput.displayName = 'CellMultiReferenceInput';

package/src/components/reference/cell-multi-reference-view.tsx

@@ -0,0 +1,81 @@
+import React, { useMemo } from 'react';
+import { Box, TagList } from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+import { ReferenceAvatar } from './reference-avatar';
+
+export interface CellMultiReferenceItem {
+  id: string;
+  name: string;
+  image?: string;
+}
+
+export interface CellMultiReferenceViewProps {
+  /** Resolved reference items to display as avatar chips. */
+  items: CellMultiReferenceItem[];
+  dataHook?: string;
+  /**
+   * Stable DOM id prefix for the tags. WDS Tag requires `id` to be present;
+   * each tag uses `${fieldId}-${index}`. Callers are responsible for ensuring
+   * uniqueness (e.g., derive from columnId + rowKey).
+   */
+  fieldId: string;
+}
+
+export const CellMultiReferenceView: React.FC<CellMultiReferenceViewProps> = ({
+  items,
+  dataHook,
+  fieldId,
+}) => {
+  const { t } = useTranslations();
+
+  const tags = useMemo(
+    () =>
+      items.map((item, i) => {
+        const label = item.name || t('patterns-fields.reference.untitled');
+        return {
+          id: `${fieldId}-${i}`,
+          dataHook: 'cell-multi-reference-tag',
+          thumb: (
+            <ReferenceAvatar name={label} image={item.image} size="size18" />
+          ),
+          children: label,
+          removable: false as const,
+        };
+      }),
+    [items, fieldId, t],
+  );
+
+  if (tags.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box
+      dataHook={dataHook}
+      direction="vertical"
+      verticalAlign="middle"
+      padding="0 8px"
+      height="100%"
+      width="100%"
+      minWidth={0}
+    >
+      <TagList
+        overflowMode={{
+          type: 'collapse',
+          overflowTooltipContent: (hiddenTags) =>
+            hiddenTags
+              .map((tag) =>
+                typeof tag.children === 'string' ? tag.children : '',
+              )
+              .filter(Boolean)
+              .join(', '),
+        }}
+        size="small"
+        dataHook="cell-multi-reference-tags"
+        tags={tags}
+      />
+    </Box>
+  );
+};
+
+CellMultiReferenceView.displayName = 'CellMultiReferenceView';

package/src/components/reference/cell-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput1827087999";
+var _namespace_ = "cellreferenceinput1356500309";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellreferenceinput1827087999__root","autocomplete":"cellreferenceinput1827087999__autocomplete"};
+export var classes = {"root":"cellreferenceinput1356500309__root","autocomplete":"cellreferenceinput1356500309__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/index.ts

@@ -1,3 +1,5 @@
 export * from './reference-avatar';
 export * from './cell-reference-view';
 export * from './cell-reference-input';
+export * from './cell-multi-reference-view';
+export * from './cell-multi-reference-input';

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentdefaultvalueinput1004202508";
+var _namespace_ = "richcontentdefaultvalueinput807533167";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontentdefaultvalueinput1004202508__root","richContentEditorContainer":"richcontentdefaultvalueinput1004202508__richContentEditorContainer","editor":"richcontentdefaultvalueinput1004202508__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput807533167__root","richContentEditorContainer":"richcontentdefaultvalueinput807533167__richContentEditorContainer","editor":"richcontentdefaultvalueinput807533167__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentforminput30064399";
+var _namespace_ = "richcontentforminput296698546";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontentforminput30064399__root","editor":"richcontentforminput30064399__editor"};
+export var classes = {"root":"richcontentforminput296698546__root","editor":"richcontentforminput296698546__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentformreadonlyinput3289671566";
+var _namespace_ = "richcontentformreadonlyinput880812762";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontentformreadonlyinput3289671566__root"};
+export var classes = {"root":"richcontentformreadonlyinput880812762__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "fullscreenmodal2240460981";
+var _namespace_ = "fullscreenmodal3873651208";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"fullscreenmodal2240460981__root","modalContent":"fullscreenmodal2240460981__modalContent"};
+export var classes = {"root":"fullscreenmodal3873651208__root","modalContent":"fullscreenmodal3873651208__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "publishloader712224198";
+var _namespace_ = "publishloader1120004865";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"publishloader712224198__root","publishLoader":"publishloader712224198__publishLoader"};
+export var classes = {"root":"publishloader1120004865__root","publishLoader":"publishloader1120004865__publishLoader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "togglefullscreenbutton4240859601";
+var _namespace_ = "togglefullscreenbutton2671210687";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"togglefullscreenbutton4240859601__root"};
+export var classes = {"root":"togglefullscreenbutton2671210687__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenteditor3497885434";
+var _namespace_ = "richcontenteditor2453741690";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontenteditor3497885434__root","toolbarContainer":"richcontenteditor3497885434__toolbarContainer","footerToolbarContainer":"richcontenteditor3497885434__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3497885434__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3497885434__editor","modalEditor":"richcontenteditor3497885434__modalEditor"};
+export var classes = {"root":"richcontenteditor2453741690__root","toolbarContainer":"richcontenteditor2453741690__toolbarContainer","footerToolbarContainer":"richcontenteditor2453741690__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2453741690__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2453741690__editor","modalEditor":"richcontenteditor2453741690__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.tsx

@@ -78,16 +78,25 @@ const InsertToolbarSync: FC<ToolbarSyncProps> = ({
 }) => {
   const { buttons } = editor.useToolbarProps('insert');
 
-  // `useToolbarProps` rebuilds `buttons` (new array + closures) on every render,
-  // so guard against pushing an unchanged-by-content array into parent state.
-  const signature = buttons.map((b) => b.id).join('|');
-  const buttonsRef = useRef(buttons);
-  buttonsRef.current = buttons;
+  // Ricos 11's next-runtime proxy is supposed to convert the legacy
+  // `Record<string, ToolbarButtonProps>` into a v2 `ExternalToolbarButton[]`,
+  // but some consumer bundles end up calling through to the inner adapter
+  // (duplicate `@wix/ricos` copies / unwrapped ref) and we receive the
+  // record shape. Normalize to an array so `.map` is safe, and treat the
+  // non-array (record) shape as ready — otherwise the absolute-positioned
+  // RCELoader overlay stays mounted and the editor row becomes unclickable.
+  const isRecordShape = !Array.isArray(buttons);
+  const safeButtons: readonly RicosExternalToolbarButton[] = isRecordShape
+    ? []
+    : buttons;
+  const signature = safeButtons.map((b) => b.id).join('|');
+  const buttonsRef = useRef(safeButtons);
+  buttonsRef.current = safeButtons;
 
   useEffect(() => {
     onButtonsChange(buttonsRef.current);
-    onReadyChange(buttonsRef.current.length > 0);
-  }, [signature, onButtonsChange, onReadyChange]);
+    onReadyChange(buttonsRef.current.length > 0 || isRecordShape);
+  }, [signature, isRecordShape, onButtonsChange, onReadyChange]);
 
   return null;
 };
@@ -139,10 +148,13 @@ const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
     const [toolbarContainer, setToolbarContainer] =
       useState<HTMLDivElement | null>(null);
 
-    const setEditorInstance = useCallback((nextEditor: RicosEditorAPI | null) => {
-      editorRef.current = nextEditor;
-      setEditor(nextEditor);
-    }, []);
+    const setEditorInstance = useCallback(
+      (nextEditor: RicosEditorAPI | null) => {
+        editorRef.current = nextEditor;
+        setEditor(nextEditor);
+      },
+      [],
+    );
 
     const setContent = useCallback((nextContent: RicosDocument) => {
       editorRef.current?.getEditorCommands().setContent(nextContent);
@@ -480,7 +492,10 @@ export const RichContentEditor: FC<RichContentEditorProps> = ({
     const isChanged = isRichContentChanged();
 
     try {
-      finalContent = await publishEditorContent(modalEditorRef.current, content);
+      finalContent = await publishEditorContent(
+        modalEditorRef.current,
+        content,
+      );
       onExitFullScreen?.(finalContent, isChanged);
     } catch (error) {
       finalContent = content;
@@ -512,13 +527,7 @@ export const RichContentEditor: FC<RichContentEditorProps> = ({
       );
     }
     onBlur?.();
-  }, [
-    content,
-    isRichContentChanged,
-    onBlur,
-    onPublish,
-    publishEditorContent,
-  ]);
+  }, [content, isRichContentChanged, onBlur, onPublish, publishEditorContent]);
 
   useEffect(() => {
     if (!isFullScreen) {

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenttoolbar4068399874";
+var _namespace_ = "richcontenttoolbar331966114";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontenttoolbar4068399874__root","toolbar":"richcontenttoolbar4068399874__toolbar","toolbarButton":"richcontenttoolbar4068399874__toolbarButton","separator":"richcontenttoolbar4068399874__separator"};
+export var classes = {"root":"richcontenttoolbar331966114__root","toolbar":"richcontenttoolbar331966114__toolbar","toolbarButton":"richcontenttoolbar331966114__toolbarButton","separator":"richcontenttoolbar331966114__separator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentviewer2820543816";
+var _namespace_ = "richcontentviewer1261412142";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontentviewer2820543816__root","viewer":"richcontentviewer2820543816__viewer","modalViewer":"richcontentviewer2820543816__modalViewer"};
+export var classes = {"root":"richcontentviewer1261412142__root","viewer":"richcontentviewer1261412142__viewer","modalViewer":"richcontentviewer1261412142__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richeditor1163655534";
+var _namespace_ = "richeditor3593269673";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richeditor1163655534__root","editor":"richeditor1163655534__editor","header-one":"richeditor1163655534__header-one","header-two":"richeditor1163655534__header-two","header-three":"richeditor1163655534__header-three","header-four":"richeditor1163655534__header-four","header-five":"richeditor1163655534__header-five","header-six":"richeditor1163655534__header-six","paragraph-one":"richeditor1163655534__paragraph-one","unstyled":"richeditor1163655534__unstyled","paragraph-three":"richeditor1163655534__paragraph-three","align-left":"richeditor1163655534__align-left","align-right":"richeditor1163655534__align-right","align-center":"richeditor1163655534__align-center","align-justify":"richeditor1163655534__align-justify","withMargin":"richeditor1163655534__withMargin","dir-rtl":"richeditor1163655534__dir-rtl"};
+export var classes = {"root":"richeditor3593269673__root","editor":"richeditor3593269673__editor","header-one":"richeditor3593269673__header-one","header-two":"richeditor3593269673__header-two","header-three":"richeditor3593269673__header-three","header-four":"richeditor3593269673__header-four","header-five":"richeditor3593269673__header-five","header-six":"richeditor3593269673__header-six","paragraph-one":"richeditor3593269673__paragraph-one","unstyled":"richeditor3593269673__unstyled","paragraph-three":"richeditor3593269673__paragraph-three","align-left":"richeditor3593269673__align-left","align-right":"richeditor3593269673__align-right","align-center":"richeditor3593269673__align-center","align-justify":"richeditor3593269673__align-justify","withMargin":"richeditor3593269673__withMargin","dir-rtl":"richeditor3593269673__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richtexteditor4142196869";
+var _namespace_ = "richtexteditor1994738391";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richtexteditor4142196869__root","nativeInput":"richtexteditor4142196869__nativeInput","editor":"richtexteditor4142196869__editor"};
+export var classes = {"root":"richtexteditor1994738391__root","nativeInput":"richtexteditor1994738391__nativeInput","editor":"richtexteditor1994738391__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "toolbar1207446565";
+var _namespace_ = "toolbar3495112246";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"toolbar1207446565__root","item":"toolbar1207446565__item","separator":"toolbar1207446565__separator","clearFormatting":"toolbar1207446565__clearFormatting","fullScreen":"toolbar1207446565__fullScreen","dropdownItemContent":"toolbar1207446565__dropdownItemContent","dropdownItemTitle":"toolbar1207446565__dropdownItemTitle","dropdownItemSubtitle":"toolbar1207446565__dropdownItemSubtitle","dropdownHeaderOne":"toolbar1207446565__dropdownHeaderOne","dropdownHeaderTwo":"toolbar1207446565__dropdownHeaderTwo","dropdownHeaderThree":"toolbar1207446565__dropdownHeaderThree","dropdownHeaderFour":"toolbar1207446565__dropdownHeaderFour","dropdownHeaderFive":"toolbar1207446565__dropdownHeaderFive","dropdownHeaderSix":"toolbar1207446565__dropdownHeaderSix","dropdownParagraphOne":"toolbar1207446565__dropdownParagraphOne","dropdownNormalText":"toolbar1207446565__dropdownNormalText","dropdownParagraphThree":"toolbar1207446565__dropdownParagraphThree"};
+export var classes = {"root":"toolbar3495112246__root","item":"toolbar3495112246__item","separator":"toolbar3495112246__separator","clearFormatting":"toolbar3495112246__clearFormatting","fullScreen":"toolbar3495112246__fullScreen","dropdownItemContent":"toolbar3495112246__dropdownItemContent","dropdownItemTitle":"toolbar3495112246__dropdownItemTitle","dropdownItemSubtitle":"toolbar3495112246__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3495112246__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3495112246__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3495112246__dropdownHeaderThree","dropdownHeaderFour":"toolbar3495112246__dropdownHeaderFour","dropdownHeaderFive":"toolbar3495112246__dropdownHeaderFive","dropdownHeaderSix":"toolbar3495112246__dropdownHeaderSix","dropdownParagraphOne":"toolbar3495112246__dropdownParagraphOne","dropdownNormalText":"toolbar3495112246__dropdownNormalText","dropdownParagraphThree":"toolbar3495112246__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};