playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx

@@ -4,8 +4,10 @@ import { components } from 'react-select'
 import Body from '../../pb_body/_body'
 import Draggable from '../../pb_draggable/_draggable'
 import { DraggableContext, DraggableProvider } from '../../pb_draggable/context'
+import { noop } from '../../utilities/object'
 import { SelectValueType } from '../_typeahead'
 import PillRenderer from './PillRenderer'
+import usePillDropIndicator from './usePillDropIndicator'
 
 type ValueContainerProps = {
   children: React.ReactNode | React.ReactNode[]
@@ -23,17 +25,9 @@ const isPillReorderActive = (selectProps: Record<string, unknown> | undefined):
   )
 }
 
-const mapDraggableItemsToValue = (
-  items: Array<{ id: string }>,
-  value: SelectValueType[],
-): SelectValueType[] => {
-  return items
-    .map((item) => value.find((entry) => entry.value === item.id))
-    .filter((entry): entry is SelectValueType => Boolean(entry))
-}
-
 type DraggablePillListProps = {
   onRemove: (item: SelectValueType) => void
+  pendingReorderRef: React.MutableRefObject<SelectValueType[] | null>
   selectProps: Record<string, unknown>
   setValue: (value: SelectValueType[], action: string) => void
   value: SelectValueType[]
@@ -45,11 +39,11 @@ const isPillCloseTarget = (target: EventTarget | null): boolean => {
 
 const shouldBlockPillMouseDown = (
   target: EventTarget | null,
-  pillDragHandle: boolean,
+  externalDragHandle: boolean,
 ): boolean => {
   if (isPillCloseTarget(target)) return false
 
-  if (pillDragHandle) {
+  if (externalDragHandle) {
     return Boolean(
       (target as HTMLElement | null)?.closest(
         '.pb_typeahead_pill_drag_handle, .pb_draggable_handle',
@@ -64,20 +58,26 @@ const shouldBlockPillMouseDown = (
 
 const DraggablePillList = ({
   onRemove,
+  pendingReorderRef,
   selectProps,
   setValue,
   value,
 }: DraggablePillListProps) => {
-  const { items, isDragging } = DraggableContext()
-  const orderedValues = isDragging
-    ? mapDraggableItemsToValue(items, value)
-    : value
+  // Context `isDragging` is the active dragId string (empty when idle).
+  const { isDragging: dragId } = DraggableContext()
+  // Pills hold their place while dragging; the drop line previews the new position.
+  const dropTarget = usePillDropIndicator(dragId, value, pendingReorderRef)
+
+  const getDropLineClassName = (index: number): string | undefined => {
+    if (dropTarget?.index !== index) return undefined
+    return dropTarget.after ? 'pb_typeahead_drop_after' : 'pb_typeahead_drop_before'
+  }
 
   const handleKeyboardReorder = (index: number, direction: 'left' | 'right') => {
     const newIndex = direction === 'left' ? index - 1 : index + 1
-    if (newIndex < 0 || newIndex >= orderedValues.length) return
+    if (newIndex < 0 || newIndex >= value.length) return
 
-    const reordered = [...orderedValues]
+    const reordered = [...value]
     const [movedItem] = reordered.splice(index, 1)
     reordered.splice(newIndex, 0, movedItem)
     setValue(reordered, 'set-value')
@@ -89,27 +89,29 @@ const DraggablePillList = ({
         container="typeahead-pills"
         tag="div"
     >
-      {orderedValues.map((item, index) => (
+      {value.map((item, index) => (
         <Draggable.Item
+            className={getDropLineClassName(index)}
             container="typeahead-pills"
             dragId={item.value}
-            handlePointerDrag={Boolean((selectProps as any)?.pillDragHandle)}
+            handlePointerDrag={Boolean((selectProps as any)?.externalDragHandle)}
             key={item.value}
-            pointerDrag={!(selectProps as any)?.pillDragHandle}
+            pointerDrag={!(selectProps as any)?.externalDragHandle}
             tag="span"
         >
           <PillRenderer
               dark={(selectProps as any)?.dark}
               data={item}
+              externalDragHandle={(selectProps as any)?.externalDragHandle}
               index={index}
               multiKit={(selectProps as any)?.multiKit}
               onKeyboardReorder={(direction) => handleKeyboardReorder(index, direction)}
               onRemove={() => onRemove(item)}
               pillColor={(selectProps as any)?.pillColor}
-              pillDragHandle={(selectProps as any)?.pillDragHandle}
               selectProps={selectProps}
+              showDragIcon={!selectProps.externalDragHandle}
               showPillIndex={(selectProps as any)?.showPillIndex}
-              totalCount={orderedValues.length}
+              totalCount={value.length}
               truncate={(selectProps as any)?.truncate}
               wrapped={(selectProps as any)?.wrapped}
           />
@@ -169,20 +171,17 @@ const DraggablePillsStrip = React.memo(function DraggablePillsStrip({
     pendingReorderRef.current = null
   }, [setValue])
 
-  const handleReorder = useCallback((items: Array<{ id: string }>) => {
-    pendingReorderRef.current = mapDraggableItemsToValue(items, getValueRef.current())
-  }, [])
-
   return (
     <DraggableProvider
         dropZone={{ type: 'ghost' }}
         initialItems={initialItems}
         onDragEnd={commitReorder}
         onDrop={commitReorder}
-        onReorder={handleReorder}
+        onReorder={noop}
     >
       <DraggablePillList
           onRemove={onRemove}
+          pendingReorderRef={pendingReorderRef}
           selectProps={selectProps}
           setValue={setValue}
           value={value}
@@ -204,20 +203,20 @@ const ValueContainer = (props: ValueContainerProps | any): React.ReactElement =>
     setValue(newValue, 'remove-value')
   }, [getValue, setValue])
 
-  const pillDragHandle = Boolean((selectProps as any)?.pillDragHandle)
+  const externalDragHandle = Boolean((selectProps as any)?.externalDragHandle)
 
   const valueContainerInnerProps = useMemo(() => ({
     ...innerProps,
     // Bubble phase only — capture-phase stopPropagation blocks mousedown from
     // reaching pill drag listeners.
     onMouseDown: (event: React.MouseEvent) => {
-      if (shouldBlockPillMouseDown(event.target, pillDragHandle)) {
+      if (shouldBlockPillMouseDown(event.target, externalDragHandle)) {
         event.stopPropagation()
         return
       }
       innerProps?.onMouseDown?.(event)
     },
-  }), [innerProps, pillDragHandle])
+  }), [innerProps, externalDragHandle])
 
   if (isPillReorderActive(selectProps) && hasValue) {
     return (

data/app/pb_kits/playbook/pb_typeahead/components/usePillDropIndicator.ts

@@ -0,0 +1,155 @@
+import React, { useEffect, useState } from 'react'
+
+import { SelectValueType } from '../_typeahead'
+
+export type PillDropTarget = {
+  after: boolean
+  index: number
+}
+
+// Vertical reach (px) above/below a pill row that still targets a drop position in that row.
+// Use Infinity to target the nearest row from anywhere on the page.
+const ROW_TOLERANCE = 80
+
+// Pointer position while a button is down / touch is active. The drop-indicator effect mounts
+// after React commits dragId, so the threshold-crossing move is already gone — seed from this.
+let lastPointer: { x: number, y: number } | null = null
+let pointerTrackingInstalled = false
+
+const ensurePointerTracking = () => {
+  if (pointerTrackingInstalled || typeof document === 'undefined') return
+  pointerTrackingInstalled = true
+
+  document.addEventListener('mousemove', (event: MouseEvent) => {
+    if (event.buttons === 0) return
+    lastPointer = { x: event.clientX, y: event.clientY }
+  }, true)
+
+  document.addEventListener('touchmove', (event: TouchEvent) => {
+    const touch = event.touches[0]
+    if (touch) lastPointer = { x: touch.clientX, y: touch.clientY }
+  }, { capture: true, passive: true })
+}
+
+const getVerticalDistance = (rect: DOMRect, y: number): number => (
+  Math.max(rect.top - y, y - rect.bottom, 0)
+)
+
+// Finds the drop position from the pointer: the nearest pill row (within ROW_TOLERANCE),
+// then the gap in that row. Left of a row targets its first pill; right of it (e.g. over
+// the input) targets after its last pill.
+const getDropTarget = (pills: Element[], x: number, y: number): PillDropTarget | null => {
+  if (pills.length === 0) return null
+
+  const rects = pills.map((pill) => pill.getBoundingClientRect())
+  const nearestRect = rects.reduce((nearest, rect) => (
+    getVerticalDistance(rect, y) < getVerticalDistance(nearest, y) ? rect : nearest
+  ))
+  if (getVerticalDistance(nearestRect, y) > ROW_TOLERANCE) return null
+
+  const rowIndexes = rects
+    .map((rect, index) => ({ index, rect }))
+    .filter(({ rect }) => rect.top < nearestRect.bottom && rect.bottom > nearestRect.top)
+    .map(({ index }) => index)
+
+  const pillAfterPointer = rowIndexes.find((index) => x < rects[index].left + rects[index].width / 2)
+  if (pillAfterPointer !== undefined) {
+    return { after: false, index: pillAfterPointer }
+  }
+
+  return { after: true, index: rowIndexes[rowIndexes.length - 1] }
+}
+
+// While a pill is dragged, a ghost copy follows the pointer and the targeted pill gets a
+// before/after drop line. Targeting the pill's current spot shows no line and commits nothing.
+const usePillDropIndicator = (
+  dragId: string,
+  value: SelectValueType[],
+  pendingReorderRef: React.MutableRefObject<SelectValueType[] | null>,
+): PillDropTarget | null => {
+  const [dropTarget, setDropTarget] = useState<PillDropTarget | null>(null)
+
+  useEffect(() => {
+    ensurePointerTracking()
+  }, [])
+
+  useEffect(() => {
+    // Only one pill can be dragged at a time, so the dragging item is unique on the page
+    const source = document.querySelector<HTMLElement>('.pb_typeahead_draggable_pills .is_dragging')
+    if (!dragId || !source?.parentElement) return undefined
+
+    const pills = Array.from(source.parentElement.children)
+    const sourceIndex = value.findIndex((item) => item.value === dragId)
+    if (sourceIndex < 0 || pills.length === 0) return undefined
+
+    const sourceRect = source.getBoundingClientRect()
+
+    const ghost = source.cloneNode(true) as HTMLElement
+    ghost.className = 'pb_typeahead_pill_drag_preview'
+    ghost.setAttribute('inert', '')
+    ghost.style.left = `${sourceRect.left}px`
+    ghost.style.top = `${sourceRect.top}px`
+    ghost.style.width = `${sourceRect.width}px`
+    document.body.appendChild(ghost)
+
+    // Anchor to the pill center — not the first mousemove we hear. The effect mounts
+    // after React commits the drag, so a late first-move origin leaves the ghost
+    // permanently offset when the pointer moved quickly before listeners attached.
+    const pointerOrigin = {
+      x: sourceRect.left + sourceRect.width / 2,
+      y: sourceRect.top + sourceRect.height / 2,
+    }
+    pendingReorderRef.current = null
+
+    const handlePointerMove = (x: number, y: number) => {
+      ghost.style.translate = `${x - pointerOrigin.x}px ${y - pointerOrigin.y}px`
+
+      const target = getDropTarget(pills, x, y)
+      const targetSlot = target ? target.index + Number(target.after) : -1
+      const isCurrentPosition = targetSlot === sourceIndex || targetSlot === sourceIndex + 1
+
+      if (!target || isCurrentPosition) {
+        pendingReorderRef.current = null
+        setDropTarget(null)
+        return
+      }
+
+      const reordered = value.filter((item) => item.value !== dragId)
+      reordered.splice(targetSlot > sourceIndex ? targetSlot - 1 : targetSlot, 0, value[sourceIndex])
+      pendingReorderRef.current = reordered
+
+      setDropTarget((current) => {
+        const isSameTarget = current?.index === target.index && current.after === target.after
+        return isSameTarget ? current : target
+      })
+    }
+
+    const handleMouseMove = (event: MouseEvent) => {
+      handlePointerMove(event.clientX, event.clientY)
+    }
+
+    const handleTouchMove = (event: TouchEvent) => {
+      const touch = event.touches[0]
+      if (touch) handlePointerMove(touch.clientX, touch.clientY)
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('touchmove', handleTouchMove, { passive: true })
+
+    // Apply the pointer position from the move that started the drag (already fired).
+    if (lastPointer) {
+      handlePointerMove(lastPointer.x, lastPointer.y)
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('touchmove', handleTouchMove)
+      ghost.remove()
+      setDropTarget(null)
+    }
+  }, [dragId, pendingReorderRef, value])
+
+  return dropTarget
+}
+
+export default usePillDropIndicator

data/app/pb_kits/playbook/pb_typeahead/docs/_playground.json

@@ -14,8 +14,8 @@
     "clearOnContextChange": true,
     "preserveSearchInput": false,
     "enablePillReorder": false,
-    "showPillIndex": false,
-    "pillDragHandle": true
+    "externalDragHandle": false,
+    "showPillIndex": false
   },
   "groups": [
     {
@@ -65,8 +65,8 @@
         "dark",
         "marginBottom",
         "enablePillReorder",
-        "showPillIndex",
-        "pillDragHandle"
+        "externalDragHandle",
+        "showPillIndex"
       ]
     }
   ],
@@ -264,7 +264,7 @@
     "showPillIndex": {
       "requires": "isMulti"
     },
-    "pillDragHandle": {
+    "externalDragHandle": {
       "requires": "isMulti"
     }
   },

data/app/pb_kits/playbook/pb_typeahead/docs/_playground.overrides.json

@@ -49,7 +49,7 @@
     },
     {
       "name": "Appearance",
-      "props": ["components", "dark", "marginBottom", "enablePillReorder", "showPillIndex", "pillDragHandle"]
+      "props": ["components", "dark", "marginBottom", "enablePillReorder", "externalDragHandle", "showPillIndex"]
     }
   ],
   "presets": [
@@ -162,7 +162,7 @@
     "clearOnContextChange": { "requires": "searchContextSelector" },
     "enablePillReorder": { "requires": "isMulti" },
     "showPillIndex": { "requires": "isMulti" },
-    "pillDragHandle": { "requires": "isMulti" }
+    "externalDragHandle": { "requires": "isMulti" }
   },
   "hints": {
     "default": {

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_draggable_pills.html.erb

@@ -13,7 +13,6 @@
   id: "typeahead-draggable-pills-example",
   default_options: [options[0], options[1], options[2]],
   enable_pill_reorder: true,
-  pill_drag_handle: false,
   show_pill_index: true,
   is_multi: true,
   label: "Services",

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_draggable_pills.jsx

@@ -49,7 +49,6 @@ const TypeaheadDraggablePills = (props) => {
           showPillIndex
           value={value}
           {...props}
-          pillDragHandle={false}
       />
 
       <Body

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_draggable_pills_rails.md

@@ -1,7 +1,7 @@
-Use `enable_pill_reorder: true` with `show_pill_index: true` to let users drag selected pills into a new order. Set `pill_drag_handle: false` to hide the grip icon and drag the whole pill instead.
+Use `enable_pill_reorder: true` with `show_pill_index: true` to let users drag selected pills into a new order. By default, each pill shows a grip icon and can be dragged from anywhere on the pill. Set `external_drag_handle: true` to use an external grip handle instead.
 
-Order is committed on drop.
+While dragging, pills stay in place, a ghost follows the pointer, and a blue line marks where the pill will land. Order is committed on drop.
 
 The `pb-typeahead-kit-{id}-result-option-reorder` custom event receives the reordered value array.
 
-Keyboard reorder: focus a pill, then press Control+Shift+ArrowLeft or Control+Shift+ArrowRight to move it one position.
+Keyboard reorder: focus a pill, then press ArrowLeft or ArrowRight to move it one position.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_draggable_pills_react.md

@@ -0,0 +1,7 @@
+Use `enablePillReorder` to let users drag selected pills into a new order. Pair with `showPillIndex` to display numbered prefixes that update automatically after reorder.
+
+By default, each pill shows a grip icon and can be dragged from anywhere on the pill. Set `externalDragHandle` to `true` to use an external grip handle instead (drag only from the handle).
+
+While dragging, pills stay in place, a ghost follows the pointer, and a blue line marks where the pill will land. Order is committed on drop. The `onChange` callback and `pb-typeahead-kit-{id}-result-option-reorder` custom event both receive the reordered value array.
+
+Keyboard reorder: focus a pill, then press ArrowLeft or ArrowRight to move it one position.

data/app/pb_kits/playbook/pb_typeahead/kit.schema.json

@@ -222,7 +222,7 @@
       ],
       "default": false
     },
-    "showPillIndex": {
+    "externalDragHandle": {
       "type": "boolean",
       "platforms": [
         "react",
@@ -230,13 +230,13 @@
       ],
       "default": false
     },
-    "pillDragHandle": {
+    "showPillIndex": {
       "type": "boolean",
       "platforms": [
         "react",
         "rails"
       ],
-      "default": true
+      "default": false
     },
     "styles": {
       "type": "TypeaheadStylesConfig",

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -66,10 +66,10 @@ module Playbook
                         default: false
       prop :enable_pill_reorder, type: Playbook::Props::Boolean,
                                  default: false
+      prop :external_drag_handle, type: Playbook::Props::Boolean,
+                                  default: false
       prop :show_pill_index, type: Playbook::Props::Boolean,
                              default: false
-      prop :pill_drag_handle, type: Playbook::Props::Boolean,
-                              default: true
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
         generate_classname("pb_typeahead_kit") + default_margin_bottom
@@ -125,8 +125,8 @@ module Playbook
           preserveSearchInput: preserve_search_input,
           createable: createable,
           enablePillReorder: enable_pill_reorder,
+          externalDragHandle: external_drag_handle,
           showPillIndex: show_pill_index,
-          pillDragHandle: pill_drag_handle,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Avatar from '../pb_avatar/_avatar'
 import Body from '../pb_body/_body'
@@ -30,7 +31,7 @@ type UserProps = {
   territory?: string,
   title?: string,
   titleStyle?: "title" | "body" | "caption" | "detail",
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 const User = (props: UserProps): React.ReactElement => {
   const {
@@ -142,6 +143,7 @@ const User = (props: UserProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_user/docs/_playground.json

@@ -5,13 +5,15 @@
     "align": "left",
     "avatar": true,
     "bold": true,
+    "dark": false,
     "avatarGrayscale": false,
     "nameStyle": "title",
     "orientation": "horizontal",
     "size": "md",
+    "territory": "",
+    "title": "Engineer",
     "titleStyle": "body",
     "name": "Anna Black",
-    "title": "Engineer",
     "subtitle": "Product team",
     "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg"
   },

data/app/pb_kits/playbook/pb_user/kit.schema.json

@@ -47,7 +47,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "avatarGrayscale": {
       "type": "boolean",
@@ -115,14 +116,16 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "title": {
       "type": "string",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "titleStyle": {
       "type": "enum",
@@ -130,16 +133,24 @@
         "react",
         "rails"
       ],
-      "values": [
-        "title",
-        "body",
-        "caption",
-        "detail"
-      ],
+      "values": {
+        "react": [
+          "title",
+          "body",
+          "caption",
+          "detail"
+        ],
+        "rails": [
+          "body",
+          "caption",
+          "detail"
+        ]
+      },
       "default": "body"
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { User } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import Veteran from './badges/veteran'
 import MillionDollar from './badges/million-dollar';
 
@@ -13,7 +14,7 @@ type UserBadgeProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: "sm" | "md" | "lg",
-}
+} & GlobalEventProps
 
 const UserBadge = (props: UserBadgeProps): React.ReactElement => {
   const {
@@ -41,6 +42,7 @@ const UserBadge = (props: UserBadgeProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_user_badge/kit.schema.json

@@ -34,6 +34,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { UserBadge } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Caption from '../pb_caption/_caption'
@@ -19,7 +20,7 @@ type WeekdayStackedProps = {
   id?: string,
   variant?: "day_only" | "month_day" | "expanded",
   compact?: boolean,
-}
+} & GlobalEventProps
 
 const getDayOfWeek = (value: Date, compact: boolean) => {
   if (compact) {
@@ -66,6 +67,7 @@ const WeekdayStacked = (props: WeekdayStackedProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_playground.json

@@ -3,6 +3,7 @@
   "propTargets": {},
   "defaults": {
     "align": "left",
+    "dark": false,
     "variant": "month_day",
     "compact": false
   },

data/app/pb_kits/playbook/pb_weekday_stacked/kit.schema.json

@@ -24,7 +24,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "date": {
       "type": "Date",
@@ -56,6 +57,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { WeekdayStacked } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.test.jsx

@@ -4,6 +4,7 @@ import { render, screen } from "../utilities/test-utils";
 import WeekdayStacked from "./_weekday_stacked";
 
 const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
+jest.useFakeTimers();
 jest.setSystemTime(new Date(TEST_DATE));
 const testId = "weekdaystacked-kit";
 const realDate = Date;