@wix/patterns 1.299.0 → 1.301.0

package/src/components/ArchivedItemsPanel/ArchivedItemsPanel.tsx

@@ -0,0 +1,99 @@
+import { SidePanel } from '@wix/design-system';
+import React, { CSSProperties, useMemo, useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ScrollableContent } from '../ScrollableContent';
+import { ArchivedItem } from '../../utils/archivedItemsUtils';
+import { ArchivedItemsList } from './ArchivedItemsList';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export interface ArchivedItemsPanelProps {
+  items: ArchivedItem[];
+  onBackButtonClick: () => void;
+  onCloseButtonClick: () => void;
+}
+
+function _ArchivedItemsPanel({
+  items,
+  onBackButtonClick,
+  onCloseButtonClick,
+}: ArchivedItemsPanelProps) {
+  const { translate: t } = useWixPatternsContainer();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Trigger slide-in animation
+    setTimeout(() => setIsVisible(true), 10);
+  }, []);
+
+  const style = useMemo<CSSProperties>(
+    () => ({
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 10000,
+      display: 'flex',
+      justifyContent: 'flex-end',
+    }),
+    [],
+  );
+
+  const slideStyle = useMemo<CSSProperties>(
+    () => ({
+      width: '100%',
+      maxWidth: '600px',
+      backgroundColor: 'white',
+      transform: isVisible ? 'translateX(0)' : 'translateX(100%)',
+      transition: 'transform 0.3s ease-out',
+      display: 'flex',
+      flexDirection: 'column',
+    }),
+    [isVisible],
+  );
+
+  const handleBack = () => {
+    // Trigger slide-out animation
+    setIsVisible(false);
+    // Wait for animation to complete before calling onBackButtonClick
+    setTimeout(() => {
+      onBackButtonClick();
+    }, 300); // Match the transition duration
+  };
+
+  const handleClose = () => {
+    // Trigger slide-out animation
+    setIsVisible(false);
+    // Close both panels immediately so they animate together
+    onCloseButtonClick();
+  };
+
+  return (
+    <div style={style} onClick={handleClose}>
+      <div style={slideStyle} onClick={(e) => e.stopPropagation()}>
+        <SidePanel // PatternsSidePanel is overriding the back button to close the panel
+          dataHook="archived-items-panel"
+          width="100%"
+          closeButtonProps={{ onClick: handleClose }}
+          onBackButtonClick={handleBack}
+          backButtonProps={{
+            description: t('cairo.archivedFields.back.custom-columns.tooltip'),
+          }}
+        >
+          <SidePanel.Header
+            title={t('cairo.archivedFields.title')}
+            subtitle={t('cairo.archivedFields.subtitle')}
+          />
+          <ScrollableContent
+            overflowY
+            dataHook="archived-items-panel-scroll-container"
+          >
+            <ArchivedItemsList items={items} />
+          </ScrollableContent>
+        </SidePanel>
+      </div>
+    </div>
+  );
+}
+
+export const ArchivedItemsPanel = observer(_ArchivedItemsPanel);

package/src/components/ArchivedItemsPanel/ArchivedItemsPanel.uni.driver.ts

@@ -0,0 +1,32 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+
+export function ArchivedItemsPanelUniDriver(base: UniDriver) {
+  const panelBase = () => base.$('[data-hook="archived-items-panel"]');
+
+  const getArchivedPanelBackButton = () =>
+    panelBase().$('[data-hook="sidePanel-backButton"]');
+
+  const getArchivedPanelCloseButton = () =>
+    panelBase().$('[data-hook="sidePanel-closeButton"]');
+
+  const getArchivedPanelItems = () =>
+    panelBase().$$('[data-hook="archived-columns-list"] > div');
+
+  const list = () => panelBase().$('[data-hook="archived-items-list"]');
+
+  const getItemByIdBase = (id: string) =>
+    list().$(`[data-hook="archived-item-${id}"]`);
+
+  return {
+    exists: () => panelBase().exists(),
+    isVisible: () => panelBase().exists(),
+    getTitle: () => panelBase().$('[data-hook="sidePanel-title"]').text(),
+    getSubtitle: () => panelBase().$('[data-hook="sidePanel-subtitle"]').text(),
+    backButtonExists: () => getArchivedPanelBackButton().exists(),
+    clickBackButton: () => getArchivedPanelBackButton().click(),
+    clickCloseButton: () => getArchivedPanelCloseButton().click(),
+    getItemsCount: () => getArchivedPanelItems().count(),
+    getItemText: (id: string) =>
+      getItemByIdBase(id).$('[data-hook="archived-column-label"]').text(),
+  };
+}

package/src/components/CardContainer/CardContainer.st.css.ts

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

package/src/components/Collapse/Collapse.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse927227220";
+var _namespace_ = "Collapse1816076419";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Collapse927227220__root","exit":"Collapse927227220__exit"};
+export var classes = {"root":"Collapse1816076419__root","exit":"Collapse1816076419__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css

@@ -1,10 +1,15 @@
 @property st-global(--wds-page-header-padding-horizontal);
 @property st-global(--wds-color-fill-surface-sunken);
+@property st-global(--wds-space-300);
 
 .root {
   -st-states: mobile, panel;
 }
 
+.root [data-hook="page-header-wrapper"] {
+  --wds-space-300: 18px;
+}
+
 .root:mobile {
   --wds-page-header-padding-horizontal: 0;
   --wds-color-fill-surface-sunken: #ffffff;

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage4051539634";
+var _namespace_ = "CollectionPage1535313463";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPage4051539634__root"};
+export var classes = {"root":"CollectionPage1535313463__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-page-header-padding-horizontal":"--wds-page-header-padding-horizontal","wds-color-fill-surface-sunken":"--wds-color-fill-surface-sunken"}; 
+export var vars = {"wds-page-header-padding-horizontal":"--wds-page-header-padding-horizontal","wds-color-fill-surface-sunken":"--wds-color-fill-surface-sunken","wds-space-300":"--wds-space-300"}; 
 
 
 

package/src/components/CollectionTable/CollectionTable.st.css.ts

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

package/src/components/CollectionToolbar/CollectionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar2670806627";
+var _namespace_ = "CollectionToolbar3814071131";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionToolbar2670806627__root","left":"CollectionToolbar2670806627__left","right":"CollectionToolbar2670806627__right","fullWidth":"CollectionToolbar2670806627__fullWidth"};
+export var classes = {"root":"CollectionToolbar3814071131__root","left":"CollectionToolbar3814071131__left","right":"CollectionToolbar3814071131__right","fullWidth":"CollectionToolbar3814071131__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2119113276";
+var _namespace_ = "SearchOrCustomFilter3055523513";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter2119113276__root","search":"SearchOrCustomFilter2119113276__search","searchMobile":"SearchOrCustomFilter2119113276__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3055523513__root","search":"SearchOrCustomFilter3055523513__search","searchMobile":"SearchOrCustomFilter3055523513__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbarFilters/CollectionToolbarFilters.tsx

@@ -150,7 +150,10 @@ function _CollectionToolbarFilters(props: CollectionToolbarFiltersProps) {
             toolbarTagProps,
             accordionItemProps,
             renderToolbarTag:
-              renderToolbarTag ?? type.renderPresetToolbarTag?.(container),
+              renderToolbarTag ??
+              type.renderPresetToolbarTag?.(container, {
+                filterProps: filterChildProps,
+              }),
           };
         }),
         {

package/src/components/CollectionToolbarFilters/useFiltersSyncProps.ts

@@ -1,7 +1,7 @@
 import { Children } from 'react';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { FilterElement } from './filterElement';
-import type { renderPresetToolbarTag } from '@wix/bex-core';
+import type { renderPresetToolbarTag } from '../DateRangeFilter/renderPresetToolbarTag';
 
 type FilterChild = FilterElement | undefined | boolean;
 type FilterChildren = FilterChild | FilterChild[];

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -80,7 +80,13 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
         {hasSearchValue && !hasSearchResults ? (
           <CustomColumnsNoResults state={state} />
         ) : (
-          <ColumnsList state={state} />
+          <>
+            {collectionDataExtension?.DataExtension
+              ?.CustomColumnsArchivedItemsCTAButton && (
+              <collectionDataExtension.DataExtension.CustomColumnsArchivedItemsCTAButton />
+            )}
+            <ColumnsList state={state} />
+          </>
         )}
       </ScrollableContent>
       {collectionDataExtension?.DataExtension

package/src/components/CustomColumnsPanel/CustomColumnsPanel.uni.driver.ts

@@ -11,6 +11,7 @@ import { DragAndDropUniDriver } from '../DragAndDrop/DragAndDrop.uni.driver';
 import { CustomFieldPopoverUniDriver } from '../CustomFieldsPanel/CustomFieldPopover.uni.driver';
 import { CustomFieldsDisabledHintUniDriver } from '../CustomFields/CustomFieldsDisabledHint.uni.driver';
 import { EmptyStateUniDriver } from '../EmptyState/EmptyState.uni.driver';
+import { ArchivedItemsPanelUniDriver } from '../ArchivedItemsPanel/ArchivedItemsPanel.uni.driver';
 
 export function CustomColumnsPanelUniDriver(base: UniDriver, body: UniDriver) {
   const panelBase = () => base.$('[data-hook="custom-columns-panel"]');
@@ -84,6 +85,12 @@ export function CustomColumnsPanelUniDriver(base: UniDriver, body: UniDriver) {
   const addNewExists = () => addItem().exists();
   const clickAddNew = () => addItem().click();
 
+  // Archived items functionality
+  const getArchivedItemsButton = () =>
+    base.$('[data-hook="archived-items-button"]');
+
+  const getArchivedPanel = () => ArchivedItemsPanelUniDriver(base);
+
   return {
     exists: () => panelBase().exists(),
     isOpen: () =>
@@ -151,5 +158,11 @@ export function CustomColumnsPanelUniDriver(base: UniDriver, body: UniDriver) {
       panelBase().$('[data-hook="custom-columns-no-results-subtitle"]').text(),
     getNoResultsResetButton: () =>
       getNoResults().getButton('custom-columns-no-results-reset-button'),
+    // Archived items functionality
+    archivedItemsButtonExists: () => getArchivedItemsButton().exists(),
+    clickArchivedItemsButton: () => getArchivedItemsButton().click(),
+    getArchivedItemsButtonText: () =>
+      getArchivedItemsButton().$('[data-hook="tableListItem-label"]').text(),
+    getArchivedPanel: () => getArchivedPanel(),
   };
 }

package/src/components/CustomFieldsPanel/ArchiveFieldModal.tsx

@@ -12,17 +12,38 @@ export const _ArchiveFieldModal = ({
 }) => {
   const container = useWixPatternsContainer();
   const { translate: t } = container;
+  const { dataExtension, modal } = state;
+
+  const getModalTitle = () => {
+    const fieldId = modal.value?.id;
+    if (dataExtension.enableArchive && fieldId) {
+      const fieldValues = dataExtension.extractFieldValuesFromSchema(fieldId);
+      if (fieldValues?.name) {
+        return t('cairo.customFields.archive.modal.title.enabled', {
+          selectedField: fieldValues.name,
+        });
+      }
+    }
+    return t('cairo.customFields.archive.modal.title');
+  };
+
+  const getModalDescription = () => {
+    if (dataExtension.enableArchive) {
+      return t('cairo.customFields.archive.modal.description.enabled');
+    }
+    return t('cairo.customFields.archive.modal.description');
+  };
 
   return (
     <CustomActionModal
       dataHook="archive-custom-field-modal"
       state={state.modal}
-      title={t('cairo.customFields.archive.modal.title')}
+      title={getModalTitle()}
       primaryButtonText={t('cairo.customFields.archive.modal.CTA')}
       secondaryButtonText={t('cairo.customFields.archive.modal.cancel.CTA')}
       content={
         <Text dataHook="archive-custom-field-body">
-          {t('cairo.customFields.archive.modal.description')}
+          {getModalDescription()}
         </Text>
       }
       theme="destructive"

package/src/components/CustomFieldsPanel/ArchiveFieldModal.uni.driver.ts

@@ -14,10 +14,15 @@ export function ArchiveFieldModalUniDriver(_base: UniDriver, body: UniDriver) {
       .getPrimaryButtonDriver()
       .then((driver: any) => driver.click());
   const clickClose = () => getArchiveFieldModal().clickCloseButton();
+  const getModalTitle = () => getArchiveFieldModal().getTitleText();
+  const getModalBody = () =>
+    body.$('[data-hook="archive-custom-field-body"]').text();
 
   return {
     exists,
     clickConfirm,
     clickClose,
+    getModalTitle,
+    getModalBody,
   };
 }

package/src/components/CustomFieldsPanel/ManageFieldsPopoverMenu.tsx

@@ -1,4 +1,4 @@
-import { IconButton, PopoverMenu } from '@wix/design-system';
+import { IconButton, PopoverMenu, Tooltip } from '@wix/design-system';
 import React from 'react';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { ArchiveSmall, EditSmall, MoreSmall } from '@wix/wix-ui-icons-common';
@@ -75,13 +75,15 @@ function _ManageFieldsPopoverMenu({
       dataHook="custom-field-options"
       onShow={onTriggerMenu}
       triggerElement={
-        <IconButton
-          size="tiny"
-          dataHook="custom-field-options-trigger"
-          skin="light"
-        >
-          <MoreSmall />
-        </IconButton>
+        <Tooltip content={t('cairo.custom-columns.more-actions.tooltip')}>
+          <IconButton
+            size="tiny"
+            dataHook="custom-field-options-trigger"
+            skin="light"
+          >
+            <MoreSmall />
+          </IconButton>
+        </Tooltip>
       }
     >
       <PopoverMenu.MenuItem

package/src/components/DataExtension/CollectionDataExtensionState.ts

@@ -65,6 +65,7 @@ export class CollectionDataExtensionState<T, F extends FiltersMap> {
       filterable: params.filterable,
       containsPii: params.containsPii,
       defaultPermissions: params.defaultPermissions,
+      enableArchive: params.enableArchive,
     });
 
     this.customFieldsPanel = new CustomFieldsPanelState({

package/src/components/DataExtension/DataExtension.ts

@@ -10,6 +10,7 @@ import { CustomColumnsFull } from '../CustomColumns';
 import { ArchiveFieldModal } from '../CustomFieldsPanel/ArchiveFieldModal';
 import { CustomColumnsAddCustomFieldCTAButton } from '../CustomFieldsPanel/CustomColumnsAddCustomFieldCTAButton';
 import { CustomColumnsEditCustomFieldCTAButton } from '../CustomFieldsPanel/CustomColumnsEditCustomFieldCTAButton';
+import { ArchivedItemsCTAButton } from '../ArchivedItemsPanel/ArchivedItemsCTAButton';
 import { CollectionDataExtensionState } from './CollectionDataExtensionState';
 import { ReactElement } from 'react';
 import { FileCardList } from '../FileCard/FileCardList';
@@ -28,6 +29,7 @@ export type DataExtensionObjectType = {
   CustomColumns: typeof CustomColumnsFull;
   CustomColumnsAddCustomFieldCTAButton: typeof CustomColumnsAddCustomFieldCTAButton;
   CustomColumnsEditCustomFieldCTAButton: typeof CustomColumnsEditCustomFieldCTAButton;
+  CustomColumnsArchivedItemsCTAButton: typeof ArchivedItemsCTAButton;
   syncTableCollectionProps: (state: ToolbarCollectionState<any, any>) => void;
   manageCustomFieldsPageAction: (params: {
     pageState: CollectionPageState;
@@ -66,6 +68,7 @@ DataExtension.CustomColumnsAddCustomFieldCTAButton =
   CustomColumnsAddCustomFieldCTAButton;
 DataExtension.CustomColumnsEditCustomFieldCTAButton =
   CustomColumnsEditCustomFieldCTAButton;
+DataExtension.CustomColumnsArchivedItemsCTAButton = ArchivedItemsCTAButton;
 DataExtension.syncTableCollectionProps = (
   state: ToolbarCollectionState<any>,
 ) => {

package/src/components/DateRangeFilter/DateRangeFilter.tsx

@@ -13,10 +13,10 @@ import {
   DefaultDateRangePreset,
   MAP_DATE_PRESET_TO_KEY,
   RangeItem,
-  renderPresetToolbarTag,
 } from '@wix/bex-core';
 import { useDateRangeFilterState } from '../../hooks';
 import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
+import { renderPresetToolbarTag } from './renderPresetToolbarTag';
 
 export interface DateRangeFilterProps
   extends FilterProps<RangeItem<Date>>,

package/src/components/DateRangeFilter/renderPresetToolbarTag.ts

@@ -0,0 +1,64 @@
+import {
+  FilterItem,
+  MAP_DATE_PRESET_TO_KEY,
+  presetToDaysAmount,
+  RangeItem,
+  Translate,
+} from '@wix/bex-core';
+import { createElement } from 'react';
+import { FilterProps } from '../../model';
+import { FilterTagContent } from '../AppliedFiltersTagList/FilterTagContent';
+
+export const renderPresetToolbarTag = (
+  container: {
+    translate: Translate;
+    dateFormatters: {
+      medium: Intl.DateTimeFormat;
+      mediumTime: Intl.DateTimeFormat;
+    };
+  },
+  params: {
+    filterProps: FilterProps<any>;
+  },
+) => {
+  return <V>(filter: FilterItem<V>) => {
+    const { filterProps } = params;
+    const { translate: t, dateFormatters } = container;
+    const { preset } = filter as FilterItem<RangeItem<Date>>;
+    if (!preset || !presetToDaysAmount[preset]) {
+      return {
+        children: createElement(
+          FilterTagContent,
+          { filterProps },
+          getDateRangeLabel(filter as RangeItem<Date>, {
+            dateFormatters,
+          }),
+        ),
+      };
+    }
+    return {
+      children: createElement(
+        FilterTagContent,
+        { filterProps },
+        t(MAP_DATE_PRESET_TO_KEY[preset]),
+      ),
+    };
+  };
+};
+
+const getDateRangeLabel = (
+  item: RangeItem<Date>,
+  {
+    dateFormatters,
+  }: {
+    dateFormatters: {
+      medium: Intl.DateTimeFormat;
+      mediumTime: Intl.DateTimeFormat;
+    };
+  },
+) => {
+  return [item.from, item.to]
+    .filter(Boolean as unknown as (d: Date | null) => d is Date)
+    .map((date) => dateFormatters.mediumTime.format(date))
+    .join(' - ');
+};

package/src/components/DragHandle/DragHandle.st.css.ts

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

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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

package/src/components/Fade/Fade.st.css.ts

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

package/src/components/Heading/Heading.st.css.ts

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