@clickhouse/click-ui 0.8.0 → 0.9.1-rc1

package/dist/esm/components/DatePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { isSameDate, UseCalendarOptions } from '@h6s/calendar';\nimport * as Popover from '@radix-ui/react-popover';\nimport { styled } from 'styled-components';\nimport { Body, CalendarRenderer, DatePickerInput, DateTableCell } from './Common';\nimport { shiftFromTimezone, shiftToTimezone, Timezone } from './utils';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\n\nconst DAYS_IN_WEEK = 7;\n\nconst PopoverTrigger = styled(Popover.Trigger)`\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  width: fit-content;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n`;\n\nconst PopoverContent = styled(Popover.Content)`\n  z-index: 1;\n  outline: none;\n\n  ${({ theme }) => `\n    border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};\n    background: ${theme.click.genericMenu.panel.color.background.default};\n    box-shadow: ${theme.click.genericMenu.panel.shadow.default};\n    border-radius: ${theme.click.genericMenu.panel.radii.all};\n  `}\n\n  &:focus {\n    outline: none;\n  }\n`;\n\ninterface CalendarProps {\n  allowOnlyDatesList?: Array<Date>;\n  calendarBody: Body;\n  closeDatepicker: () => void;\n  futureDatesDisabled: boolean;\n  selectedDate?: Date;\n  setSelectedDate: (selectedDate: Date) => void;\n  autoFocus?: boolean;\n  timezone: Timezone;\n}\n\nconst Calendar = ({\n  allowOnlyDatesList,\n  calendarBody,\n  closeDatepicker,\n  futureDatesDisabled,\n  selectedDate,\n  setSelectedDate,\n  autoFocus = false,\n  timezone,\n}: CalendarProps) => {\n  const allDays = calendarBody.value.flatMap(week => week.value);\n  const totalDays = allDays.length;\n\n  const today = shiftToTimezone(new Date(), timezone);\n\n  const shiftedSelected = selectedDate\n    ? shiftToTimezone(selectedDate, timezone)\n    : undefined;\n\n  const shiftedAllowList = useMemo(() => {\n    return allowOnlyDatesList?.map(date => {\n      return shiftToTimezone(date, timezone);\n    });\n  }, [allowOnlyDatesList, timezone]);\n\n  const initialFocusIndex = allDays.findIndex(day =>\n    shiftedSelected\n      ? isSameDate(shiftedSelected, day.value)\n      : isSameDate(today, day.value)\n  );\n\n  const [focusedDayIndex, setFocusedDayIndex] = useState<number>(\n    initialFocusIndex >= 0 ? initialFocusIndex : 0\n  );\n  const dayRefs = useRef<Array<HTMLTableCellElement | null>>([]);\n\n  useEffect(() => {\n    dayRefs.current[focusedDayIndex]?.focus();\n  }, [focusedDayIndex]);\n\n  useEffect(() => {\n    if (autoFocus && initialFocusIndex >= 0) {\n      const timeoutId = setTimeout(() => {\n        dayRefs.current[initialFocusIndex]?.focus();\n      }, 0);\n      return () => clearTimeout(timeoutId);\n    }\n  }, [autoFocus, initialFocusIndex]);\n\n  const onDayKeyDown = useCallback(\n    (\n      event: KeyboardEvent<HTMLTableCellElement>,\n      index: number,\n      fullDate: Date,\n      isDisabled: boolean\n    ) => {\n      let newIndex = index;\n\n      switch (event.key) {\n        case 'ArrowRight':\n          event.preventDefault();\n          newIndex = (index + 1) % totalDays;\n          break;\n        case 'ArrowLeft':\n          event.preventDefault();\n          newIndex = (index - 1 + totalDays) % totalDays;\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          newIndex = (index + DAYS_IN_WEEK) % totalDays;\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          newIndex = (index - DAYS_IN_WEEK + totalDays) % totalDays;\n          break;\n        case 'Enter':\n        case ' ':\n          event.preventDefault();\n          if (!isDisabled) {\n            setSelectedDate(shiftFromTimezone(fullDate, timezone));\n            closeDatepicker();\n          }\n          return;\n        default:\n          return;\n      }\n\n      setFocusedDayIndex(newIndex);\n      dayRefs.current[newIndex]?.focus();\n    },\n    [totalDays, setSelectedDate, closeDatepicker, timezone]\n  );\n\n  let dayIndex = 0;\n\n  return calendarBody.value.map(({ key: weekKey, value: week }) => {\n    return (\n      <tr key={weekKey}>\n        {week.map(({ date, isCurrentMonth, key: dayKey, value: fullDate }) => {\n          const isSelected = shiftedSelected && isSameDate(shiftedSelected, fullDate);\n          const isPresent = isSameDate(today, fullDate);\n\n          const isNotAllowed =\n            shiftedAllowList &&\n            shiftedAllowList.length > 0 &&\n            !shiftedAllowList.some((shiftedDate: Date) => {\n              return isSameDate(shiftedDate, fullDate);\n            });\n\n          const isFutureDisabled = futureDatesDisabled && fullDate > today;\n          const isDisabled = isNotAllowed || isFutureDisabled;\n          const currentIndex = dayIndex;\n          dayIndex++;\n\n          const handleClick = () => {\n            if (isDisabled) {\n              return false;\n            }\n            setSelectedDate(shiftFromTimezone(fullDate, timezone));\n            closeDatepicker();\n          };\n\n          return (\n            <DateTableCell\n              ref={el => {\n                dayRefs.current[currentIndex] = el;\n              }}\n              $isCurrentMonth={isCurrentMonth}\n              $isDisabled={isDisabled}\n              $isSelected={isSelected}\n              $isPresent={isPresent}\n              key={dayKey}\n              onClick={handleClick}\n              onKeyDown={e => onDayKeyDown(e, currentIndex, fullDate, isDisabled)}\n              tabIndex={currentIndex === focusedDayIndex ? 0 : -1}\n              role=\"gridcell\"\n              aria-label={fullDate.toDateString()}\n            >\n              {date}\n            </DateTableCell>\n          );\n        })}\n      </tr>\n    );\n  });\n};\n\nexport interface DatePickerProps {\n  allowOnlyDatesList?: Array<Date>;\n  container?: HTMLElement | null;\n  date?: Date;\n  disabled?: boolean;\n  futureDatesDisabled?: boolean;\n  onSelectDate: (selectedDate: Date) => void;\n  placeholder?: string;\n  responsivePositioning?: boolean;\n  timezone?: Timezone;\n}\n\nexport const DatePicker = ({\n  allowOnlyDatesList,\n  container,\n  date,\n  disabled = false,\n  futureDatesDisabled = false,\n  onSelectDate,\n  placeholder,\n  responsivePositioning = true,\n  timezone = 'system',\n}: DatePickerProps) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [selectedDate, setSelectedDate] = useState<Date>();\n  const [partialYear, setPartialYear] = useState<number>();\n  const [partialMonth, setPartialMonth] = useState<number>();\n  const [autoFocusCalendar, setAutoFocusCalendar] = useState<boolean>(false);\n\n  const calendarOptions: UseCalendarOptions = {};\n  const portalContainer = useResolvedPortalContainer(container);\n\n  if (selectedDate) {\n    calendarOptions.defaultDate = selectedDate;\n  }\n\n  useEffect(() => {\n    if (date) {\n      setSelectedDate(date);\n    }\n  }, [date]);\n\n  const resetPartialState = useCallback(() => {\n    setPartialYear(undefined);\n    setPartialMonth(undefined);\n  }, []);\n\n  const onOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      if (!open) {\n        resetPartialState();\n        setAutoFocusCalendar(false);\n      }\n    },\n    [resetPartialState]\n  );\n\n  const onCloseDatePicker = useCallback(() => {\n    setIsOpen(false);\n    resetPartialState();\n  }, [resetPartialState]);\n\n  const onDateSelect = useCallback(\n    (date: Date): void => {\n      setSelectedDate(date);\n      onSelectDate(date);\n      resetPartialState();\n    },\n    [onSelectDate, resetPartialState]\n  );\n\n  const onYearSelect = useCallback((year: number) => {\n    setPartialYear(year);\n    setPartialMonth(undefined);\n  }, []);\n\n  const onMonthSelect = useCallback((year: number, month: number) => {\n    setPartialYear(year);\n    setPartialMonth(month);\n  }, []);\n\n  const onTriggerKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      setIsOpen(true);\n      setAutoFocusCalendar(true);\n    }\n  }, []);\n\n  return (\n    <Popover.Root\n      onOpenChange={onOpenChange}\n      open={isOpen}\n    >\n      <PopoverTrigger\n        disabled={disabled}\n        onKeyDown={onTriggerKeyDown}\n      >\n        <DatePickerInput\n          data-testid=\"datepicker-input-container\"\n          disabled={disabled}\n          isActive={isOpen}\n          partialMonth={partialMonth}\n          partialYear={partialYear}\n          placeholder={placeholder}\n          selectedDate={selectedDate}\n          timezone={timezone}\n        />\n      </PopoverTrigger>\n      <Popover.Portal container={portalContainer}>\n        <PopoverContent\n          align=\"start\"\n          avoidCollisions={responsivePositioning}\n          sideOffset={4}\n        >\n          <CalendarRenderer\n            calendarOptions={calendarOptions}\n            onYearSelect={onYearSelect}\n            onMonthSelect={onMonthSelect}\n            selectedDate={selectedDate}\n            timezone={timezone}\n          >\n            {body => (\n              <Calendar\n                allowOnlyDatesList={allowOnlyDatesList}\n                autoFocus={autoFocusCalendar}\n                calendarBody={body}\n                closeDatepicker={onCloseDatePicker}\n                futureDatesDisabled={futureDatesDisabled}\n                selectedDate={selectedDate}\n                setSelectedDate={onDateSelect}\n                timezone={timezone}\n              />\n            )}\n          </CalendarRenderer>\n        </PopoverContent>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["DAYS_IN_WEEK","PopoverTrigger","styled","Popover","Trigger","withConfig","componentId","PopoverContent","Content","theme","click","genericMenu","panel","color","stroke","default","background","shadow","radii","all","Calendar","allowOnlyDatesList","calendarBody","closeDatepicker","futureDatesDisabled","selectedDate","setSelectedDate","autoFocus","timezone","allDays","value","flatMap","week","totalDays","length","today","shiftToTimezone","Date","shiftedSelected","undefined","shiftedAllowList","useMemo","map","date","initialFocusIndex","findIndex","day","isSameDate","focusedDayIndex","setFocusedDayIndex","useState","dayRefs","useRef","useEffect","current","focus","timeoutId","setTimeout","clearTimeout","onDayKeyDown","useCallback","event","index","fullDate","isDisabled","newIndex","key","preventDefault","shiftFromTimezone","dayIndex","weekKey","isCurrentMonth","dayKey","isSelected","isPresent","isNotAllowed","some","shiftedDate","isFutureDisabled","currentIndex","handleClick","el","e","toDateString","DatePicker","container","disabled","onSelectDate","placeholder","responsivePositioning","isOpen","setIsOpen","partialYear","setPartialYear","partialMonth","setPartialMonth","autoFocusCalendar","setAutoFocusCalendar","calendarOptions","portalContainer","useResolvedPortalContainer","defaultDate","resetPartialState","onOpenChange","open","onCloseDatePicker","onDateSelect","onYearSelect","year","onMonthSelect","month","onTriggerKeyDown","body"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { isSameDate, UseCalendarOptions } from '@h6s/calendar';\nimport * as Popover from '@radix-ui/react-popover';\nimport { styled } from 'styled-components';\nimport { Body, CalendarRenderer, DatePickerInput, DateTableCell } from './Common';\nimport {\n  isDateNotInAllowList,\n  shiftFromTimezone,\n  shiftToTimezone,\n  Timezone,\n} from './utils';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\n\nconst DAYS_IN_WEEK = 7;\n\nconst PopoverTrigger = styled(Popover.Trigger)`\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  width: fit-content;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n`;\n\nconst PopoverContent = styled(Popover.Content)`\n  z-index: 1;\n  outline: none;\n\n  ${({ theme }) => `\n    border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};\n    background: ${theme.click.genericMenu.panel.color.background.default};\n    box-shadow: ${theme.click.genericMenu.panel.shadow.default};\n    border-radius: ${theme.click.genericMenu.panel.radii.all};\n  `}\n\n  &:focus {\n    outline: none;\n  }\n`;\n\ninterface CalendarProps {\n  allowOnlyDatesList?: Array<Date>;\n  calendarBody: Body;\n  closeDatepicker: () => void;\n  futureDatesDisabled: boolean;\n  selectedDate?: Date;\n  setSelectedDate: (selectedDate: Date) => void;\n  autoFocus?: boolean;\n  timezone: Timezone;\n}\n\nconst Calendar = ({\n  allowOnlyDatesList,\n  calendarBody,\n  closeDatepicker,\n  futureDatesDisabled,\n  selectedDate,\n  setSelectedDate,\n  autoFocus = false,\n  timezone,\n}: CalendarProps) => {\n  const allDays = calendarBody.value.flatMap(week => week.value);\n  const totalDays = allDays.length;\n\n  const today = shiftToTimezone(new Date(), timezone);\n\n  const shiftedSelected = selectedDate\n    ? shiftToTimezone(selectedDate, timezone)\n    : undefined;\n\n  const shiftedAllowList = useMemo(() => {\n    return allowOnlyDatesList?.map(date => {\n      return shiftToTimezone(date, timezone);\n    });\n  }, [allowOnlyDatesList, timezone]);\n\n  const initialFocusIndex = allDays.findIndex(day =>\n    shiftedSelected\n      ? isSameDate(shiftedSelected, day.value)\n      : isSameDate(today, day.value)\n  );\n\n  const [focusedDayIndex, setFocusedDayIndex] = useState<number>(\n    initialFocusIndex >= 0 ? initialFocusIndex : 0\n  );\n  const dayRefs = useRef<Array<HTMLTableCellElement | null>>([]);\n\n  useEffect(() => {\n    dayRefs.current[focusedDayIndex]?.focus();\n  }, [focusedDayIndex]);\n\n  useEffect(() => {\n    if (autoFocus && initialFocusIndex >= 0) {\n      const timeoutId = setTimeout(() => {\n        dayRefs.current[initialFocusIndex]?.focus();\n      }, 0);\n      return () => clearTimeout(timeoutId);\n    }\n  }, [autoFocus, initialFocusIndex]);\n\n  const onDayKeyDown = useCallback(\n    (\n      event: KeyboardEvent<HTMLTableCellElement>,\n      index: number,\n      fullDate: Date,\n      isDisabled: boolean\n    ) => {\n      let newIndex = index;\n\n      switch (event.key) {\n        case 'ArrowRight':\n          event.preventDefault();\n          newIndex = (index + 1) % totalDays;\n          break;\n        case 'ArrowLeft':\n          event.preventDefault();\n          newIndex = (index - 1 + totalDays) % totalDays;\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          newIndex = (index + DAYS_IN_WEEK) % totalDays;\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          newIndex = (index - DAYS_IN_WEEK + totalDays) % totalDays;\n          break;\n        case 'Enter':\n        case ' ':\n          event.preventDefault();\n          if (!isDisabled) {\n            setSelectedDate(shiftFromTimezone(fullDate, timezone));\n            closeDatepicker();\n          }\n          return;\n        default:\n          return;\n      }\n\n      setFocusedDayIndex(newIndex);\n      dayRefs.current[newIndex]?.focus();\n    },\n    [totalDays, setSelectedDate, closeDatepicker, timezone]\n  );\n\n  let dayIndex = 0;\n\n  return calendarBody.value.map(({ key: weekKey, value: week }) => {\n    return (\n      <tr key={weekKey}>\n        {week.map(({ date, isCurrentMonth, key: dayKey, value: fullDate }) => {\n          const isSelected = shiftedSelected && isSameDate(shiftedSelected, fullDate);\n          const isPresent = isSameDate(today, fullDate);\n\n          const isNotAllowed = isDateNotInAllowList(shiftedAllowList, fullDate);\n\n          const isFutureDisabled = futureDatesDisabled && fullDate > today;\n          const isDisabled = isNotAllowed || isFutureDisabled;\n          const currentIndex = dayIndex;\n          dayIndex++;\n\n          const handleClick = () => {\n            if (isDisabled) {\n              return false;\n            }\n            setSelectedDate(shiftFromTimezone(fullDate, timezone));\n            closeDatepicker();\n          };\n\n          return (\n            <DateTableCell\n              ref={el => {\n                dayRefs.current[currentIndex] = el;\n              }}\n              $isCurrentMonth={isCurrentMonth}\n              $isDisabled={isDisabled}\n              $isSelected={isSelected}\n              $isPresent={isPresent}\n              key={dayKey}\n              onClick={handleClick}\n              onKeyDown={e => onDayKeyDown(e, currentIndex, fullDate, isDisabled)}\n              tabIndex={currentIndex === focusedDayIndex ? 0 : -1}\n              role=\"gridcell\"\n              aria-label={fullDate.toDateString()}\n            >\n              {date}\n            </DateTableCell>\n          );\n        })}\n      </tr>\n    );\n  });\n};\n\nexport interface DatePickerProps {\n  allowOnlyDatesList?: Array<Date>;\n  container?: HTMLElement | null;\n  date?: Date;\n  disabled?: boolean;\n  futureDatesDisabled?: boolean;\n  onSelectDate: (selectedDate: Date) => void;\n  placeholder?: string;\n  responsivePositioning?: boolean;\n  timezone?: Timezone;\n}\n\nexport const DatePicker = ({\n  allowOnlyDatesList,\n  container,\n  date,\n  disabled = false,\n  futureDatesDisabled = false,\n  onSelectDate,\n  placeholder,\n  responsivePositioning = true,\n  timezone = 'system',\n}: DatePickerProps) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [selectedDate, setSelectedDate] = useState<Date>();\n  const [partialYear, setPartialYear] = useState<number>();\n  const [partialMonth, setPartialMonth] = useState<number>();\n  const [autoFocusCalendar, setAutoFocusCalendar] = useState<boolean>(false);\n\n  const calendarOptions: UseCalendarOptions = {};\n  const portalContainer = useResolvedPortalContainer(container);\n\n  if (selectedDate) {\n    calendarOptions.defaultDate = selectedDate;\n  }\n\n  useEffect(() => {\n    if (date) {\n      setSelectedDate(date);\n    }\n  }, [date]);\n\n  const resetPartialState = useCallback(() => {\n    setPartialYear(undefined);\n    setPartialMonth(undefined);\n  }, []);\n\n  const onOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      if (!open) {\n        resetPartialState();\n        setAutoFocusCalendar(false);\n      }\n    },\n    [resetPartialState]\n  );\n\n  const onCloseDatePicker = useCallback(() => {\n    setIsOpen(false);\n    resetPartialState();\n  }, [resetPartialState]);\n\n  const onDateSelect = useCallback(\n    (date: Date): void => {\n      setSelectedDate(date);\n      onSelectDate(date);\n      resetPartialState();\n    },\n    [onSelectDate, resetPartialState]\n  );\n\n  const onYearSelect = useCallback((year: number) => {\n    setPartialYear(year);\n    setPartialMonth(undefined);\n  }, []);\n\n  const onMonthSelect = useCallback((year: number, month: number) => {\n    setPartialYear(year);\n    setPartialMonth(month);\n  }, []);\n\n  const onTriggerKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      setIsOpen(true);\n      setAutoFocusCalendar(true);\n    }\n  }, []);\n\n  return (\n    <Popover.Root\n      onOpenChange={onOpenChange}\n      open={isOpen}\n    >\n      <PopoverTrigger\n        disabled={disabled}\n        onKeyDown={onTriggerKeyDown}\n      >\n        <DatePickerInput\n          data-testid=\"datepicker-input-container\"\n          disabled={disabled}\n          isActive={isOpen}\n          partialMonth={partialMonth}\n          partialYear={partialYear}\n          placeholder={placeholder}\n          selectedDate={selectedDate}\n          timezone={timezone}\n        />\n      </PopoverTrigger>\n      <Popover.Portal container={portalContainer}>\n        <PopoverContent\n          align=\"start\"\n          avoidCollisions={responsivePositioning}\n          sideOffset={4}\n        >\n          <CalendarRenderer\n            calendarOptions={calendarOptions}\n            onYearSelect={onYearSelect}\n            onMonthSelect={onMonthSelect}\n            selectedDate={selectedDate}\n            timezone={timezone}\n          >\n            {body => (\n              <Calendar\n                allowOnlyDatesList={allowOnlyDatesList}\n                autoFocus={autoFocusCalendar}\n                calendarBody={body}\n                closeDatepicker={onCloseDatePicker}\n                futureDatesDisabled={futureDatesDisabled}\n                selectedDate={selectedDate}\n                setSelectedDate={onDateSelect}\n                timezone={timezone}\n              />\n            )}\n          </CalendarRenderer>\n        </PopoverContent>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["DAYS_IN_WEEK","PopoverTrigger","styled","Popover","Trigger","withConfig","componentId","PopoverContent","Content","theme","click","genericMenu","panel","color","stroke","default","background","shadow","radii","all","Calendar","allowOnlyDatesList","calendarBody","closeDatepicker","futureDatesDisabled","selectedDate","setSelectedDate","autoFocus","timezone","allDays","value","flatMap","week","totalDays","length","today","shiftToTimezone","Date","shiftedSelected","undefined","shiftedAllowList","useMemo","map","date","initialFocusIndex","findIndex","day","isSameDate","focusedDayIndex","setFocusedDayIndex","useState","dayRefs","useRef","useEffect","current","focus","timeoutId","setTimeout","clearTimeout","onDayKeyDown","useCallback","event","index","fullDate","isDisabled","newIndex","key","preventDefault","shiftFromTimezone","dayIndex","weekKey","isCurrentMonth","dayKey","isSelected","isPresent","isNotAllowed","isDateNotInAllowList","isFutureDisabled","currentIndex","handleClick","el","e","toDateString","DatePicker","container","disabled","onSelectDate","placeholder","responsivePositioning","isOpen","setIsOpen","partialYear","setPartialYear","partialMonth","setPartialMonth","autoFocusCalendar","setAutoFocusCalendar","calendarOptions","portalContainer","useResolvedPortalContainer","defaultDate","resetPartialState","onOpenChange","open","onCloseDatePicker","onDateSelect","onYearSelect","year","onMonthSelect","month","onTriggerKeyDown","body"],"mappings":"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"}

package/dist/esm/components/DatePicker/utils.js

@@ -1,3 +1,4 @@
+import { isSameDate } from '@h6s/calendar';
 import '../../utils/date.js';
 import dayjs from 'dayjs';
 
@@ -78,9 +79,26 @@ const getPredefinedMonthsForDateRangePicker = (numberOfMonths) => {
   }
   return nextSixMonths;
 };
-const datesAreWithinMaxRange = (startDate, endDate, maxRangeLength) => {
-  const daysDifference = Math.abs(dayjs(startDate).diff(dayjs(endDate), "days"));
-  return daysDifference <= maxRangeLength;
+const isDateNotInAllowList = (allowList, date) => Array.isArray(allowList) && allowList.length > 0 && !allowList.some((allowedDate) => isSameDate(allowedDate, date));
+const areDatesWithinMaxRange = (startDate, endDate, maxRangeLength) => {
+  const daysDifference = Math.abs(dayjs(startDate).startOf("day").diff(dayjs(endDate).startOf("day"), "days"));
+  return daysDifference < maxRangeLength;
+};
+const ONE_DAY_MS = 24 * 60 * 60 * 1e3;
+const toleranceMs = 60 * 1e3;
+const isDateRangeWithinRange = (selectedRange, predefinedRange, timezone = "system") => {
+  const {
+    startDate,
+    endDate
+  } = predefinedRange;
+  if (endDate.getTime() - startDate.getTime() < ONE_DAY_MS) {
+    return Math.abs(selectedRange.startDate.getTime() - startDate.getTime()) <= toleranceMs && Math.abs(selectedRange.endDate.getTime() - endDate.getTime()) <= toleranceMs;
+  }
+  const shiftedSelectedStart = shiftToTimezone(selectedRange.startDate, timezone);
+  const shiftedSelectedEnd = shiftToTimezone(selectedRange.endDate, timezone);
+  const shiftedStart = shiftToTimezone(startDate, timezone);
+  const shiftedEnd = shiftToTimezone(endDate, timezone);
+  return isSameDate(shiftedSelectedStart, shiftedStart) && isSameDate(shiftedSelectedEnd, shiftedEnd);
 };
 const isDateRangeTheWholeMonth = ({
   startDate,
@@ -95,7 +113,7 @@ const isDateRangeTheWholeMonth = ({
   const endDateIsLastDay = end.isSame(end.endOf("month"), "day");
   return startDateIsFirstDay && endDateIsLastDay;
 };
-const dateRangeIsValid = (dateRange) => {
+const isDateRangeValid = (dateRange) => {
   if (!dateRange?.startDate || !dateRange?.endDate) {
     return false;
   }
@@ -111,5 +129,5 @@ const dateRangeIsValid = (dateRange) => {
   return true;
 };
 
-export { dateRangeIsValid, datesAreWithinMaxRange, formatDateHeader, formatSelectedDate, formatSelectedDateTime, formatSelectedDateTimeWithSeconds, formatWeekday, getPredefinedMonthsForDateRangePicker, isDateRangeTheWholeMonth, shiftFromTimezone, shiftToTimezone };
+export { areDatesWithinMaxRange, formatDateHeader, formatSelectedDate, formatSelectedDateTime, formatSelectedDateTimeWithSeconds, formatWeekday, getPredefinedMonthsForDateRangePicker, isDateNotInAllowList, isDateRangeTheWholeMonth, isDateRangeValid, isDateRangeWithinRange, shiftFromTimezone, shiftToTimezone };
 //# sourceMappingURL=utils.js.map

package/dist/esm/components/DatePicker/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/DatePicker/utils.ts"],"sourcesContent":["import { dayjs } from '@/utils/date';\n\nexport type Timezone = 'system' | 'UTC';\n\nexport interface DateRange {\n  startDate: Date;\n  endDate: Date;\n}\n\nconst locale = 'en-US';\n\nexport type Meridiem = 'am' | 'pm';\n\nexport interface Time {\n  hour: number;\n  minutes: number;\n}\n\nexport interface DateRangeListItem {\n  dateRange: DateRange;\n  label: string;\n}\n\nconst createFormatter = (options: Intl.DateTimeFormatOptions) => {\n  const timezoneFormatters: Partial<Record<Timezone, Intl.DateTimeFormat>> = {};\n\n  return (timezone: Timezone, date: Date): string => {\n    if (!timezoneFormatters[timezone]) {\n      const opts = timezone === 'UTC' ? { ...options, timeZone: 'UTC' } : options;\n      timezoneFormatters[timezone] = new Intl.DateTimeFormat(locale, opts);\n    }\n    return timezoneFormatters[timezone].format(date);\n  };\n};\n\nexport const formatSelectedDate = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  year: 'numeric',\n});\n\nexport const formatWeekday = createFormatter({ weekday: 'short' });\n\nexport const formatSelectedDateTime = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  hour: '2-digit',\n  minute: '2-digit',\n});\n\nexport const formatSelectedDateTimeWithSeconds = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  hour: '2-digit',\n  minute: '2-digit',\n  second: '2-digit',\n});\n\nexport const formatDateHeader = createFormatter({\n  month: 'short',\n  year: 'numeric',\n});\n\n// In UTC mode, shift by the host offset so local-time getters return UTC\n// values. shiftFromTimezone reverses it.\n//\n// Caveat: round-tripping across a DST boundary drifts by an hour — each\n// direction reads getTimezoneOffset on its own input. Call sites don't\n// round-trip the same Date, so this hasn't bitten us.\nexport const shiftToTimezone = (date: Date, timezone: Timezone): Date => {\n  if (timezone !== 'UTC') {\n    return date;\n  }\n  return new Date(date.getTime() + date.getTimezoneOffset() * 60_000);\n};\n\nexport const shiftFromTimezone = (date: Date, timezone: Timezone): Date => {\n  if (timezone !== 'UTC') {\n    return date;\n  }\n  return new Date(date.getTime() - date.getTimezoneOffset() * 60_000);\n};\n\nexport const getPredefinedMonthsForDateRangePicker = (\n  numberOfMonths: number\n): DateRange[] => {\n  const now = dayjs();\n\n  if (numberOfMonths < 0) {\n    const lastSixMonths: DateRange[] = [];\n    for (let i = 0; i < Math.abs(numberOfMonths); i++) {\n      const date = now.subtract(i, 'month');\n      if (date.date() === 1 && date.month() === now.month()) {\n        continue;\n      }\n      lastSixMonths.push({\n        startDate: date.startOf('month').toDate(),\n        endDate: i === 0 ? now.toDate() : date.endOf('month').toDate(),\n      });\n    }\n\n    return lastSixMonths.reverse();\n  }\n\n  const nextSixMonths: DateRange[] = [];\n  for (let i = 0; i < numberOfMonths; i++) {\n    const date = now.add(i, 'month');\n    nextSixMonths.push({\n      startDate: date.startOf('month').toDate(),\n      endDate: date.endOf('month').toDate(),\n    });\n  }\n\n  return nextSixMonths;\n};\n\nexport const getPredefinedTimePeriodsForDateTimePicker = (): DateRangeListItem[] => {\n  const now = dayjs();\n\n  const fifteenMinutesAgo = now.subtract(15, 'minute');\n  const thirtyMinutesAgo = now.subtract(30, 'minute');\n  const oneHourAgo = now.subtract(1, 'hour');\n  const sixHoursAgo = now.subtract(6, 'hour');\n  const oneDayAgo = now.subtract(1, 'day');\n  const oneMonthAgo = now.subtract(1, 'month');\n\n  const dateRangeList: DateRangeListItem[] = [\n    {\n      dateRange: {\n        startDate: fifteenMinutesAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 15 minutes',\n    },\n    {\n      dateRange: {\n        startDate: thirtyMinutesAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 30 minutes',\n    },\n    {\n      dateRange: {\n        startDate: oneHourAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past hour',\n    },\n    {\n      dateRange: {\n        startDate: sixHoursAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 6 hours',\n    },\n    {\n      dateRange: {\n        startDate: oneDayAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past day',\n    },\n    {\n      dateRange: {\n        startDate: oneMonthAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past month',\n    },\n  ];\n\n  return dateRangeList;\n};\n\nexport const getNextNDatesForDatePickerAllowOnlyList = (numberOfDays: number): Date[] => {\n  const now = dayjs();\n\n  return Array.from({ length: numberOfDays }, (_, i) =>\n    now.add(i, 'day').startOf('day').toDate()\n  );\n};\n\nexport const datesAreWithinMaxRange = (\n  startDate: Date,\n  endDate: Date,\n  maxRangeLength: number\n): boolean => {\n  const daysDifference = Math.abs(dayjs(startDate).diff(dayjs(endDate), 'days'));\n\n  return daysDifference <= maxRangeLength;\n};\n\nexport const isDateRangeTheWholeMonth = (\n  { startDate, endDate }: DateRange,\n  timezone: Timezone = 'system'\n): boolean => {\n  const start = timezone === 'UTC' ? dayjs.utc(startDate) : dayjs(startDate);\n  const end = timezone === 'UTC' ? dayjs.utc(endDate) : dayjs(endDate);\n\n  if (start.month() !== end.month()) {\n    return false;\n  }\n\n  const startDateIsFirstDay = start.isSame(start.startOf('month'), 'day');\n  const endDateIsLastDay = end.isSame(end.endOf('month'), 'day');\n\n  return startDateIsFirstDay && endDateIsLastDay;\n};\n\nexport const dateRangeIsValid = (dateRange: DateRange): boolean => {\n  if (!dateRange?.startDate || !dateRange?.endDate) {\n    return false;\n  }\n\n  if (!(dateRange.startDate instanceof Date) || !dayjs(dateRange.startDate).isValid()) {\n    return false;\n  }\n\n  if (!(dateRange.endDate instanceof Date) || !dayjs(dateRange.endDate).isValid()) {\n    return false;\n  }\n\n  if (dateRange.startDate.getTime() > dateRange.endDate.getTime()) {\n    return false;\n  }\n\n  return true;\n};\n"],"names":["locale","createFormatter","options","timezoneFormatters","timezone","date","opts","timeZone","Intl","DateTimeFormat","format","formatSelectedDate","day","month","year","formatWeekday","weekday","formatSelectedDateTime","hour","minute","formatSelectedDateTimeWithSeconds","second","formatDateHeader","shiftToTimezone","Date","getTime","getTimezoneOffset","shiftFromTimezone","getPredefinedMonthsForDateRangePicker","numberOfMonths","now","dayjs","lastSixMonths","i","Math","abs","subtract","push","startDate","startOf","toDate","endDate","endOf","reverse","nextSixMonths","add","datesAreWithinMaxRange","maxRangeLength","daysDifference","diff","isDateRangeTheWholeMonth","start","utc","end","startDateIsFirstDay","isSame","endDateIsLastDay","dateRangeIsValid","dateRange","isValid"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/DatePicker/utils.ts"],"sourcesContent":["import { isSameDate } from '@h6s/calendar';\nimport { dayjs } from '@/utils/date';\n\nexport type Timezone = 'system' | 'UTC';\n\nexport interface DateRange {\n  startDate: Date;\n  endDate: Date;\n}\n\nconst locale = 'en-US';\n\nexport type Meridiem = 'am' | 'pm';\n\nexport interface Time {\n  hour: number;\n  minutes: number;\n}\n\nexport interface DateRangeListItem {\n  dateRange: DateRange;\n  label: string;\n}\n\nconst createFormatter = (options: Intl.DateTimeFormatOptions) => {\n  const timezoneFormatters: Partial<Record<Timezone, Intl.DateTimeFormat>> = {};\n\n  return (timezone: Timezone, date: Date): string => {\n    if (!timezoneFormatters[timezone]) {\n      const opts = timezone === 'UTC' ? { ...options, timeZone: 'UTC' } : options;\n      timezoneFormatters[timezone] = new Intl.DateTimeFormat(locale, opts);\n    }\n    return timezoneFormatters[timezone].format(date);\n  };\n};\n\nexport const formatSelectedDate = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  year: 'numeric',\n});\n\nexport const formatWeekday = createFormatter({ weekday: 'short' });\n\nexport const formatSelectedDateTime = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  hour: '2-digit',\n  minute: '2-digit',\n});\n\nexport const formatSelectedDateTimeWithSeconds = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  hour: '2-digit',\n  minute: '2-digit',\n  second: '2-digit',\n});\n\nexport const formatDateHeader = createFormatter({\n  month: 'short',\n  year: 'numeric',\n});\n\n// In UTC mode, shift by the host offset so local-time getters return UTC\n// values. shiftFromTimezone reverses it.\n//\n// Caveat: round-tripping across a DST boundary drifts by an hour — each\n// direction reads getTimezoneOffset on its own input. Call sites don't\n// round-trip the same Date, so this hasn't bitten us.\nexport const shiftToTimezone = (date: Date, timezone: Timezone): Date => {\n  if (timezone !== 'UTC') {\n    return date;\n  }\n  return new Date(date.getTime() + date.getTimezoneOffset() * 60_000);\n};\n\nexport const shiftFromTimezone = (date: Date, timezone: Timezone): Date => {\n  if (timezone !== 'UTC') {\n    return date;\n  }\n  return new Date(date.getTime() - date.getTimezoneOffset() * 60_000);\n};\n\nexport const getPredefinedMonthsForDateRangePicker = (\n  numberOfMonths: number\n): DateRange[] => {\n  const now = dayjs();\n\n  if (numberOfMonths < 0) {\n    const lastSixMonths: DateRange[] = [];\n    for (let i = 0; i < Math.abs(numberOfMonths); i++) {\n      const date = now.subtract(i, 'month');\n      if (date.date() === 1 && date.month() === now.month()) {\n        continue;\n      }\n      lastSixMonths.push({\n        startDate: date.startOf('month').toDate(),\n        endDate: i === 0 ? now.toDate() : date.endOf('month').toDate(),\n      });\n    }\n\n    return lastSixMonths.reverse();\n  }\n\n  const nextSixMonths: DateRange[] = [];\n  for (let i = 0; i < numberOfMonths; i++) {\n    const date = now.add(i, 'month');\n    nextSixMonths.push({\n      startDate: date.startOf('month').toDate(),\n      endDate: date.endOf('month').toDate(),\n    });\n  }\n\n  return nextSixMonths;\n};\n\nexport const getPredefinedTimePeriodsForDateTimePicker = (): DateRangeListItem[] => {\n  const now = dayjs();\n\n  const fifteenMinutesAgo = now.subtract(15, 'minute');\n  const thirtyMinutesAgo = now.subtract(30, 'minute');\n  const oneHourAgo = now.subtract(1, 'hour');\n  const sixHoursAgo = now.subtract(6, 'hour');\n  const oneDayAgo = now.subtract(1, 'day');\n  const oneMonthAgo = now.subtract(1, 'month');\n\n  const dateRangeList: DateRangeListItem[] = [\n    {\n      dateRange: {\n        startDate: fifteenMinutesAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 15 minutes',\n    },\n    {\n      dateRange: {\n        startDate: thirtyMinutesAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 30 minutes',\n    },\n    {\n      dateRange: {\n        startDate: oneHourAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past hour',\n    },\n    {\n      dateRange: {\n        startDate: sixHoursAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 6 hours',\n    },\n    {\n      dateRange: {\n        startDate: oneDayAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past day',\n    },\n    {\n      dateRange: {\n        startDate: oneMonthAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past month',\n    },\n  ];\n\n  return dateRangeList;\n};\n\nexport const getNextNDatesForDatePickerAllowOnlyList = (numberOfDays: number): Date[] => {\n  const now = dayjs();\n\n  return Array.from({ length: numberOfDays }, (_, i) =>\n    now.add(i, 'day').startOf('day').toDate()\n  );\n};\n\nexport const isDateNotInAllowList = (\n  allowList: Array<Date> | undefined,\n  date: Date\n): boolean =>\n  Array.isArray(allowList) &&\n  allowList.length > 0 &&\n  !allowList.some(allowedDate => isSameDate(allowedDate, date));\n\nexport const areDatesWithinMaxRange = (\n  startDate: Date,\n  endDate: Date,\n  maxRangeLength: number\n): boolean => {\n  // Compare calendar days; dayjs would otherwise drop a partial day from the diff.\n  const daysDifference = Math.abs(\n    dayjs(startDate).startOf('day').diff(dayjs(endDate).startOf('day'), 'days')\n  );\n\n  return daysDifference < maxRangeLength;\n};\n\nconst ONE_DAY_MS = 24 * 60 * 60 * 1000;\nconst toleranceMs = 60 * 1000;\n\nexport const isDateRangeWithinRange = (\n  selectedRange: DateRange,\n  predefinedRange: DateRange,\n  timezone: Timezone = 'system'\n): boolean => {\n  const { startDate, endDate } = predefinedRange;\n\n  if (endDate.getTime() - startDate.getTime() < ONE_DAY_MS) {\n    return (\n      Math.abs(selectedRange.startDate.getTime() - startDate.getTime()) <= toleranceMs &&\n      Math.abs(selectedRange.endDate.getTime() - endDate.getTime()) <= toleranceMs\n    );\n  }\n\n  // Shifted the same way the calendar is, so the check agrees with the days it marks.\n  const shiftedSelectedStart = shiftToTimezone(selectedRange.startDate, timezone);\n  const shiftedSelectedEnd = shiftToTimezone(selectedRange.endDate, timezone);\n  const shiftedStart = shiftToTimezone(startDate, timezone);\n  const shiftedEnd = shiftToTimezone(endDate, timezone);\n\n  return (\n    isSameDate(shiftedSelectedStart, shiftedStart) &&\n    isSameDate(shiftedSelectedEnd, shiftedEnd)\n  );\n};\n\nexport const isDateRangeTheWholeMonth = (\n  { startDate, endDate }: DateRange,\n  timezone: Timezone = 'system'\n): boolean => {\n  const start = timezone === 'UTC' ? dayjs.utc(startDate) : dayjs(startDate);\n  const end = timezone === 'UTC' ? dayjs.utc(endDate) : dayjs(endDate);\n\n  if (start.month() !== end.month()) {\n    return false;\n  }\n\n  const startDateIsFirstDay = start.isSame(start.startOf('month'), 'day');\n  const endDateIsLastDay = end.isSame(end.endOf('month'), 'day');\n\n  return startDateIsFirstDay && endDateIsLastDay;\n};\n\nexport const isDateRangeValid = (dateRange: DateRange): boolean => {\n  if (!dateRange?.startDate || !dateRange?.endDate) {\n    return false;\n  }\n\n  if (!(dateRange.startDate instanceof Date) || !dayjs(dateRange.startDate).isValid()) {\n    return false;\n  }\n\n  if (!(dateRange.endDate instanceof Date) || !dayjs(dateRange.endDate).isValid()) {\n    return false;\n  }\n\n  if (dateRange.startDate.getTime() > dateRange.endDate.getTime()) {\n    return false;\n  }\n\n  return true;\n};\n"],"names":["locale","createFormatter","options","timezoneFormatters","timezone","date","opts","timeZone","Intl","DateTimeFormat","format","formatSelectedDate","day","month","year","formatWeekday","weekday","formatSelectedDateTime","hour","minute","formatSelectedDateTimeWithSeconds","second","formatDateHeader","shiftToTimezone","Date","getTime","getTimezoneOffset","shiftFromTimezone","getPredefinedMonthsForDateRangePicker","numberOfMonths","now","dayjs","lastSixMonths","i","Math","abs","subtract","push","startDate","startOf","toDate","endDate","endOf","reverse","nextSixMonths","add","isDateNotInAllowList","allowList","Array","isArray","length","some","allowedDate","isSameDate","areDatesWithinMaxRange","maxRangeLength","daysDifference","diff","ONE_DAY_MS","toleranceMs","isDateRangeWithinRange","selectedRange","predefinedRange","shiftedSelectedStart","shiftedSelectedEnd","shiftedStart","shiftedEnd","isDateRangeTheWholeMonth","start","utc","end","startDateIsFirstDay","isSame","endDateIsLastDay","isDateRangeValid","dateRange","isValid"],"mappings":"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"}

package/dist/esm/components/Grid/Cell.js

@@ -16,8 +16,6 @@ const Cell = memo(({
     focus,
     columnCount,
     rowCount,
-    showRowNumber,
-    showHeader,
     rowHeight,
     rowStart,
     rowAutoHeight,
@@ -62,7 +60,7 @@ const Cell = memo(({
     ...style,
     height: "auto"
   };
-  return /* @__PURE__ */ jsx("div", { style: styleWithHeight, "data-row": currentRowIndex, "data-column": columnIndex, ref: cellRef, children: /* @__PURE__ */ jsx(StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $isFirstColumn: columnIndex === 0 && !showRowNumber, $isFirstRow: rowIndex === 0 && !showHeader, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, $rowAutoHeight: rowAutoHeight, ...props }) });
+  return /* @__PURE__ */ jsx("div", { style: styleWithHeight, "data-row": currentRowIndex, "data-column": columnIndex, ref: cellRef, children: /* @__PURE__ */ jsx(StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, $rowAutoHeight: rowAutoHeight, ...props }) });
 }, areEqual);
 
 export { Cell };

package/dist/esm/components/Grid/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sources":["../../../../src/components/Grid/Cell.tsx"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport { GridChildComponentProps, areEqual } from 'react-window';\nimport { ItemDataType } from './types';\nimport { StyledCell } from './StyledCell';\n\ntype CellProps = GridChildComponentProps<ItemDataType> & {\n  width: number;\n};\n\nexport const Cell = memo(\n  ({ data, rowIndex, columnIndex, style, ...props }: CellProps) => {\n    const {\n      cell: CellData,\n      getSelectionType,\n      focus,\n      columnCount,\n      rowCount,\n      showRowNumber,\n      showHeader,\n      rowHeight,\n      rowStart,\n      rowAutoHeight,\n      updateRowHeight,\n    } = data;\n\n    const currentRowIndex = rowIndex + rowStart;\n    const { row: focusedRow, column: focusedColumn } = focus;\n    const isFocused = columnIndex === focusedColumn && currentRowIndex === focusedRow;\n    const rightOfFocus =\n      columnIndex - 1 === focusedColumn && currentRowIndex === focusedRow;\n    const belowFocus =\n      columnIndex === focusedColumn && currentRowIndex - 1 === focusedRow;\n\n    const selectionType = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightSelection = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex - 1,\n      type: 'cell',\n    });\n    const belowSelection = getSelectionType({\n      row: currentRowIndex - 1,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightOfSelectionBorder =\n      (selectionType === 'selectDirect' || rightSelection === 'selectDirect') &&\n      selectionType !== rightSelection;\n    const belowSelectionBorder =\n      (selectionType === 'selectDirect' || belowSelection === 'selectDirect') &&\n      selectionType !== belowSelection;\n\n    const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;\n    const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;\n\n    const cellRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!rowAutoHeight || !cellRef.current) {\n        return;\n      }\n      const height = cellRef.current.getBoundingClientRect().height;\n      updateRowHeight(rowIndex, height);\n    }, [updateRowHeight, rowIndex, rowAutoHeight]);\n\n    const styleWithHeight = {\n      ...style,\n      height: 'auto',\n    };\n\n    return (\n      <div\n        style={styleWithHeight}\n        data-row={currentRowIndex}\n        data-column={columnIndex}\n        ref={cellRef}\n      >\n        <StyledCell\n          as={CellData}\n          rowIndex={currentRowIndex}\n          columnIndex={columnIndex}\n          type=\"row-cell\"\n          data-selected={isFocused || selectionType === 'selectDirect'}\n          data-focused={isFocused}\n          $isSelectedTop={selectionBorderTop}\n          $isSelectedLeft={selectionBorderLeft}\n          $isFocused={isFocused}\n          $isLastRow={rowCount - 1 === rowIndex}\n          $isLastColumn={columnCount - 1 === columnIndex}\n          $isFirstColumn={columnIndex === 0 && !showRowNumber}\n          $isFirstRow={rowIndex === 0 && !showHeader}\n          $selectionType={selectionType}\n          $height={rowHeight}\n          data-grid-row={currentRowIndex}\n          data-grid-column={columnIndex}\n          $showBorder\n          $rowAutoHeight={rowAutoHeight}\n          {...props}\n        />\n      </div>\n    );\n  },\n  areEqual\n);\n"],"names":["Cell","memo","data","rowIndex","columnIndex","style","props","cell","CellData","getSelectionType","focus","columnCount","rowCount","showRowNumber","showHeader","rowHeight","rowStart","rowAutoHeight","updateRowHeight","currentRowIndex","row","focusedRow","column","focusedColumn","isFocused","rightOfFocus","belowFocus","selectionType","type","rightSelection","belowSelection","rightOfSelectionBorder","belowSelectionBorder","selectionBorderLeft","selectionBorderTop","cellRef","useRef","useEffect","current","height","getBoundingClientRect","styleWithHeight","areEqual"],"mappings":"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"}
+{"version":3,"file":"Cell.js","sources":["../../../../src/components/Grid/Cell.tsx"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport { GridChildComponentProps, areEqual } from 'react-window';\nimport { ItemDataType } from './types';\nimport { StyledCell } from './StyledCell';\n\ntype CellProps = GridChildComponentProps<ItemDataType> & {\n  width: number;\n};\n\nexport const Cell = memo(\n  ({ data, rowIndex, columnIndex, style, ...props }: CellProps) => {\n    const {\n      cell: CellData,\n      getSelectionType,\n      focus,\n      columnCount,\n      rowCount,\n      rowHeight,\n      rowStart,\n      rowAutoHeight,\n      updateRowHeight,\n    } = data;\n\n    const currentRowIndex = rowIndex + rowStart;\n    const { row: focusedRow, column: focusedColumn } = focus;\n    const isFocused = columnIndex === focusedColumn && currentRowIndex === focusedRow;\n    const rightOfFocus =\n      columnIndex - 1 === focusedColumn && currentRowIndex === focusedRow;\n    const belowFocus =\n      columnIndex === focusedColumn && currentRowIndex - 1 === focusedRow;\n\n    const selectionType = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightSelection = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex - 1,\n      type: 'cell',\n    });\n    const belowSelection = getSelectionType({\n      row: currentRowIndex - 1,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightOfSelectionBorder =\n      (selectionType === 'selectDirect' || rightSelection === 'selectDirect') &&\n      selectionType !== rightSelection;\n    const belowSelectionBorder =\n      (selectionType === 'selectDirect' || belowSelection === 'selectDirect') &&\n      selectionType !== belowSelection;\n\n    const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;\n    const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;\n\n    const cellRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!rowAutoHeight || !cellRef.current) {\n        return;\n      }\n      const height = cellRef.current.getBoundingClientRect().height;\n      updateRowHeight(rowIndex, height);\n    }, [updateRowHeight, rowIndex, rowAutoHeight]);\n\n    const styleWithHeight = {\n      ...style,\n      height: 'auto',\n    };\n\n    return (\n      <div\n        style={styleWithHeight}\n        data-row={currentRowIndex}\n        data-column={columnIndex}\n        ref={cellRef}\n      >\n        <StyledCell\n          as={CellData}\n          rowIndex={currentRowIndex}\n          columnIndex={columnIndex}\n          type=\"row-cell\"\n          data-selected={isFocused || selectionType === 'selectDirect'}\n          data-focused={isFocused}\n          $isSelectedTop={selectionBorderTop}\n          $isSelectedLeft={selectionBorderLeft}\n          $isFocused={isFocused}\n          $isLastRow={rowCount - 1 === rowIndex}\n          $isLastColumn={columnCount - 1 === columnIndex}\n          $selectionType={selectionType}\n          $height={rowHeight}\n          data-grid-row={currentRowIndex}\n          data-grid-column={columnIndex}\n          $showBorder\n          $rowAutoHeight={rowAutoHeight}\n          {...props}\n        />\n      </div>\n    );\n  },\n  areEqual\n);\n"],"names":["Cell","memo","data","rowIndex","columnIndex","style","props","cell","CellData","getSelectionType","focus","columnCount","rowCount","rowHeight","rowStart","rowAutoHeight","updateRowHeight","currentRowIndex","row","focusedRow","column","focusedColumn","isFocused","rightOfFocus","belowFocus","selectionType","type","rightSelection","belowSelection","rightOfSelectionBorder","belowSelectionBorder","selectionBorderLeft","selectionBorderTop","cellRef","useRef","useEffect","current","height","getBoundingClientRect","styleWithHeight","areEqual"],"mappings":"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"}

package/dist/esm/components/Grid/ColumnResizer.css

@@ -0,0 +1,22 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+
+.column-resizer__8f12T {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: calc(100% - 4px);
+  width: 4px;
+  height: var(--column-resizer-height);
+  overflow: auto;
+  cursor: col-resize;
+}
+
+.column-resizer__8f12T:hover,
+.column-resizer__8f12T:active {
+  background: var(--click-grid-header-cell-color-stroke-selectDirect);
+}
+
+.column-resizer_pressed__JGAln {
+  position: fixed;
+  height: 100%;
+}

package/dist/esm/components/Grid/ColumnResizer.js

@@ -1,22 +1,20 @@
+import "./ColumnResizer.css";
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useEffect, useCallback } from 'react';
-import { styled } from 'styled-components';
+import { cva } from 'class-variance-authority';
+import 'clsx';
+import styles from './ColumnResizer.module.css.js';
 import { throttle } from 'lodash-es';
 import { initialPosition } from './useResizingState.js';
 
 const DOUBLE_CLICK_THRESHOLD_MSEC = 300;
-const ResizeSpan = styled.div.withConfig({
-  componentId: "sc-1r6e5v3-0"
-})(["top:", ";left:", ";z-index:1;position:absolute;height:", "px;cursor:col-resize;width:4px;overflow:auto;&:hover,&:active,&:hover{background:", ";}", ""], initialPosition.top, initialPosition.left, ({
-  $height
-}) => $height, ({
-  theme
-}) => theme.click.grid.header.cell.color.stroke.selectDirect, ({
-  $isPressed
-}) => $isPressed && `
-      height: 100%;
-      position: fixed;
-    `);
+const resizerVariants = cva(styles["column-resizer"], {
+  variants: {
+    pressed: {
+      true: styles["column-resizer_pressed"]
+    }
+  }
+});
 const ColumnResizer = ({
   height,
   onColumnResize: onColumnResizeProp,
@@ -82,7 +80,9 @@ const ColumnResizer = ({
       pointer.width = Math.max(width, 50);
     }
   }, [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]);
-  return /* @__PURE__ */ jsx(ResizeSpan, { ref: resizeRef, $height: height, $isPressed: isPressed, onPointerDown, onPointerUp: (e) => {
+  return /* @__PURE__ */ jsx("div", { ref: resizeRef, className: resizerVariants({
+    pressed: isPressed
+  }), onPointerDown, onPointerUp: (e) => {
     e.preventDefault();
     e.stopPropagation();
     if (resizeRef.current && // 0 is a valid pointerId in Firefox
@@ -101,7 +101,10 @@ const ColumnResizer = ({
     setPosition(initialPosition);
     setPointer(null);
     setIsPressed(columnIndex, false);
-  }, onClick: (e) => e.stopPropagation(), "data-resize": true, style: position });
+  }, onClick: (e) => e.stopPropagation(), "data-resize": true, style: {
+    "--column-resizer-height": `${height}px`,
+    ...position
+  } });
 };
 
 export { ColumnResizer as default };

package/dist/esm/components/Grid/ColumnResizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnResizer.js","sources":["../../../../src/components/Grid/ColumnResizer.tsx"],"sourcesContent":["import { PointerEventHandler, useCallback, useEffect, useRef } from 'react';\nimport { styled } from 'styled-components';\nimport { ColumnResizeFn, GetResizerPositionFn } from './types';\nimport { throttle } from 'lodash-es';\nimport { initialPosition, ResizingState } from './useResizingState';\n\nconst DOUBLE_CLICK_THRESHOLD_MSEC = 300;\n\nconst ResizeSpan = styled.div<{ $height: number; $isPressed: boolean }>`\n  top: ${initialPosition.top};\n  left: ${initialPosition.left};\n  z-index: 1;\n  position: absolute;\n  height: ${({ $height }) => $height}px;\n  cursor: col-resize;\n  width: 4px;\n  overflow: auto;\n  &:hover,\n  &:active,\n  &:hover {\n    background: ${({ theme }) => theme.click.grid.header.cell.color.stroke.selectDirect};\n  }\n  ${({ $isPressed }) =>\n    $isPressed &&\n    `\n      height: 100%;\n      position: fixed;\n    `}\n`;\n\ninterface Props {\n  height: number;\n  onColumnResize: ColumnResizeFn;\n  columnIndex: number;\n  getResizerPosition: GetResizerPositionFn;\n  columnWidth: number;\n  resizingState: ResizingState;\n}\n\nconst ColumnResizer = ({\n  height,\n  onColumnResize: onColumnResizeProp,\n  columnIndex,\n  getResizerPosition,\n  columnWidth,\n  resizingState,\n}: Props) => {\n  const resizeRef = useRef<HTMLDivElement>(null);\n  const {\n    pointer,\n    setPointer,\n    getIsPressed,\n    setIsPressed,\n    getPosition,\n    setPosition,\n    lastPressedTimestamp,\n  } = resizingState;\n  const isPressed = getIsPressed(columnIndex);\n  const position = getPosition(columnIndex);\n  const onColumnResize = throttle(onColumnResizeProp, 1000);\n\n  useEffect(() => {\n    // Capture the pointer when pressed to ensure we receive move events outside the element.\n    // Capturing must be properly handled when the component unmounts and mounts again,\n    // based on its pressed state.\n    const control = resizeRef.current;\n    if (!isPressed || !control || !pointer) {\n      return;\n    }\n    const pointerId = pointer.pointerId;\n    try {\n      control.setPointerCapture(pointerId);\n      return () => {\n        if (control.hasPointerCapture(pointerId)) {\n          control.releasePointerCapture(pointerId);\n        }\n      };\n    } catch (e) {\n      console.error(e);\n    }\n  }, [pointer, isPressed, columnIndex]);\n\n  /**\n   * Handler for pointer down events to initiate resizing or auto-sizing on double-click.\n   * @type {PointerEventHandler<HTMLDivElement>}\n   */\n  const onPointerDown: PointerEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (resizeRef.current) {\n        // We cannot detect double-click with onDoubleClick event,\n        // because this component might be unmounted before the second click and mounted again.\n        // We keep track of the last click timestamp and check if it was a double-click.\n        if (lastPressedTimestamp > Date.now() - DOUBLE_CLICK_THRESHOLD_MSEC) {\n          // Auto-size the column on double click.\n          onColumnResize(columnIndex, 0, 'auto');\n        }\n        setPointer({\n          pointerId: e.pointerId,\n          initialClientX: e.clientX,\n          width: columnWidth,\n        });\n        setIsPressed(columnIndex, true);\n        const pos = getResizerPosition(e.clientX, columnWidth, columnIndex);\n        setPosition(pos);\n      }\n    },\n    [\n      lastPressedTimestamp,\n      setPointer,\n      columnWidth,\n      setIsPressed,\n      columnIndex,\n      getResizerPosition,\n      setPosition,\n      onColumnResize,\n    ]\n  );\n\n  /**\n   * Handler for pointer move events to update the column width as the user drags.\n   * @type {PointerEventHandler<HTMLDivElement>}\n   */\n  const onPointerMove: PointerEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (isPressed && pointer) {\n        const width = columnWidth + (e.clientX - pointer.initialClientX);\n        const pos = getResizerPosition(e.clientX, width, columnIndex);\n        setPosition(pos);\n        // Ensure minimum width of 50px\n        pointer.width = Math.max(width, 50);\n      }\n    },\n    [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]\n  );\n\n  return (\n    <ResizeSpan\n      ref={resizeRef}\n      $height={height}\n      $isPressed={isPressed}\n      onPointerDown={onPointerDown}\n      onPointerUp={e => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (\n          resizeRef.current &&\n          // 0 is a valid pointerId in Firefox\n          (pointer?.pointerId || pointer?.pointerId === 0)\n        ) {\n          const shouldCallResize = e.clientX !== pointer.initialClientX;\n          if (shouldCallResize) {\n            onColumnResize(columnIndex, pointer.width, 'manual');\n          }\n          setPosition(initialPosition);\n          setPointer(null);\n          setIsPressed(columnIndex, false);\n        }\n      }}\n      onPointerMove={onPointerMove}\n      onPointerCancel={e => {\n        e.preventDefault();\n        e.stopPropagation();\n        setPosition(initialPosition);\n        setPointer(null);\n        setIsPressed(columnIndex, false);\n      }}\n      onClick={e => e.stopPropagation()}\n      data-resize\n      style={position}\n    />\n  );\n};\n\nexport default ColumnResizer;\n"],"names":["DOUBLE_CLICK_THRESHOLD_MSEC","ResizeSpan","styled","div","withConfig","componentId","initialPosition","top","left","$height","theme","click","grid","header","cell","color","stroke","selectDirect","$isPressed","ColumnResizer","height","onColumnResize","onColumnResizeProp","columnIndex","getResizerPosition","columnWidth","resizingState","resizeRef","useRef","pointer","setPointer","getIsPressed","setIsPressed","getPosition","setPosition","lastPressedTimestamp","isPressed","position","throttle","useEffect","control","current","pointerId","setPointerCapture","hasPointerCapture","releasePointerCapture","e","console","error","onPointerDown","useCallback","stopPropagation","preventDefault","Date","now","initialClientX","clientX","width","pos","onPointerMove","Math","max","shouldCallResize"],"mappings":"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"}
+{"version":3,"file":"ColumnResizer.js","sources":["../../../../src/components/Grid/ColumnResizer.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  PointerEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { cva } from '@/lib/cva';\nimport styles from './ColumnResizer.module.css';\nimport { ColumnResizeFn, GetResizerPositionFn } from './types';\nimport { throttle } from 'lodash-es';\nimport { initialPosition, ResizingState } from './useResizingState';\n\nconst DOUBLE_CLICK_THRESHOLD_MSEC = 300;\n\nconst resizerVariants = cva(styles['column-resizer'], {\n  variants: {\n    pressed: { true: styles['column-resizer_pressed'] },\n  },\n});\n\ninterface Props {\n  height: number;\n  onColumnResize: ColumnResizeFn;\n  columnIndex: number;\n  getResizerPosition: GetResizerPositionFn;\n  columnWidth: number;\n  resizingState: ResizingState;\n}\n\nconst ColumnResizer = ({\n  height,\n  onColumnResize: onColumnResizeProp,\n  columnIndex,\n  getResizerPosition,\n  columnWidth,\n  resizingState,\n}: Props) => {\n  const resizeRef = useRef<HTMLDivElement>(null);\n  const {\n    pointer,\n    setPointer,\n    getIsPressed,\n    setIsPressed,\n    getPosition,\n    setPosition,\n    lastPressedTimestamp,\n  } = resizingState;\n  const isPressed = getIsPressed(columnIndex);\n  const position = getPosition(columnIndex);\n  const onColumnResize = throttle(onColumnResizeProp, 1000);\n\n  useEffect(() => {\n    // Capture the pointer when pressed to ensure we receive move events outside the element.\n    // Capturing must be properly handled when the component unmounts and mounts again,\n    // based on its pressed state.\n    const control = resizeRef.current;\n    if (!isPressed || !control || !pointer) {\n      return;\n    }\n    const pointerId = pointer.pointerId;\n    try {\n      control.setPointerCapture(pointerId);\n      return () => {\n        if (control.hasPointerCapture(pointerId)) {\n          control.releasePointerCapture(pointerId);\n        }\n      };\n    } catch (e) {\n      console.error(e);\n    }\n  }, [pointer, isPressed, columnIndex]);\n\n  /**\n   * Handler for pointer down events to initiate resizing or auto-sizing on double-click.\n   * @type {PointerEventHandler<HTMLDivElement>}\n   */\n  const onPointerDown: PointerEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (resizeRef.current) {\n        // We cannot detect double-click with onDoubleClick event,\n        // because this component might be unmounted before the second click and mounted again.\n        // We keep track of the last click timestamp and check if it was a double-click.\n        if (lastPressedTimestamp > Date.now() - DOUBLE_CLICK_THRESHOLD_MSEC) {\n          // Auto-size the column on double click.\n          onColumnResize(columnIndex, 0, 'auto');\n        }\n        setPointer({\n          pointerId: e.pointerId,\n          initialClientX: e.clientX,\n          width: columnWidth,\n        });\n        setIsPressed(columnIndex, true);\n        const pos = getResizerPosition(e.clientX, columnWidth, columnIndex);\n        setPosition(pos);\n      }\n    },\n    [\n      lastPressedTimestamp,\n      setPointer,\n      columnWidth,\n      setIsPressed,\n      columnIndex,\n      getResizerPosition,\n      setPosition,\n      onColumnResize,\n    ]\n  );\n\n  /**\n   * Handler for pointer move events to update the column width as the user drags.\n   * @type {PointerEventHandler<HTMLDivElement>}\n   */\n  const onPointerMove: PointerEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (isPressed && pointer) {\n        const width = columnWidth + (e.clientX - pointer.initialClientX);\n        const pos = getResizerPosition(e.clientX, width, columnIndex);\n        setPosition(pos);\n        // Ensure minimum width of 50px\n        pointer.width = Math.max(width, 50);\n      }\n    },\n    [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]\n  );\n\n  return (\n    <div\n      ref={resizeRef}\n      className={resizerVariants({ pressed: isPressed })}\n      onPointerDown={onPointerDown}\n      onPointerUp={e => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (\n          resizeRef.current &&\n          // 0 is a valid pointerId in Firefox\n          (pointer?.pointerId || pointer?.pointerId === 0)\n        ) {\n          const shouldCallResize = e.clientX !== pointer.initialClientX;\n          if (shouldCallResize) {\n            onColumnResize(columnIndex, pointer.width, 'manual');\n          }\n          setPosition(initialPosition);\n          setPointer(null);\n          setIsPressed(columnIndex, false);\n        }\n      }}\n      onPointerMove={onPointerMove}\n      onPointerCancel={e => {\n        e.preventDefault();\n        e.stopPropagation();\n        setPosition(initialPosition);\n        setPointer(null);\n        setIsPressed(columnIndex, false);\n      }}\n      onClick={e => e.stopPropagation()}\n      data-resize\n      style={\n        {\n          '--column-resizer-height': `${height}px`,\n          ...position,\n        } as CSSProperties\n      }\n    />\n  );\n};\n\nexport default ColumnResizer;\n"],"names":["DOUBLE_CLICK_THRESHOLD_MSEC","resizerVariants","cva","styles","variants","pressed","true","ColumnResizer","height","onColumnResize","onColumnResizeProp","columnIndex","getResizerPosition","columnWidth","resizingState","resizeRef","useRef","pointer","setPointer","getIsPressed","setIsPressed","getPosition","setPosition","lastPressedTimestamp","isPressed","position","throttle","useEffect","control","current","pointerId","setPointerCapture","hasPointerCapture","releasePointerCapture","e","console","error","onPointerDown","useCallback","stopPropagation","preventDefault","Date","now","initialClientX","clientX","width","pos","onPointerMove","Math","max","shouldCallResize","initialPosition"],"mappings":"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"}

package/dist/esm/components/Grid/ColumnResizer.module.css.js

@@ -0,0 +1,7 @@
+const styles = {
+	"column-resizer": "column-resizer__8f12T",
+	"column-resizer_pressed": "column-resizer_pressed__JGAln"
+};
+
+export { styles as default };
+//# sourceMappingURL=ColumnResizer.module.css.js.map

package/dist/esm/components/Grid/ColumnResizer.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnResizer.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/esm/components/Grid/Grid.css

@@ -0,0 +1,34 @@
+/*
+ * `.grid` is the Grid's outer container. It is rendered as the ContextMenu.Trigger
+ * (the root element the whole grid mounts into), which is why the trigger carries
+ * the grid's own box styling rather than a context-menu-specific class.
+ */
+.grid__h49fk {
+  width: 100%;
+  height: var(--grid-height, 100%);
+  overflow: hidden;
+  border-radius: var(--grid-radius);
+  background: var(--click-grid-body-cell-color-background-default);
+  outline: none;
+}
+
+.grid_bordered__kFqF5 {
+  border: 1px solid var(--click-grid-header-cell-color-stroke-default);
+}
+
+/* react-window's inner element that lays out the scrolling cell grid */
+.grid__inner__IZhj9 {
+  display: flex;
+  flex-direction: column-reverse;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- the original styled rule used overflow-anchor */
+  overflow-anchor: none;
+  user-select: none;
+}
+
+.grid__data__Mn4TK {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-top: var(--grid-data-top, 0);
+  margin-left: var(--grid-data-left, 0);
+}

package/dist/esm/components/Grid/Grid.module.css.js

@@ -0,0 +1,13 @@
+const grid = "grid__h49fk";
+const grid_bordered = "grid_bordered__kFqF5";
+const grid__inner = "grid__inner__IZhj9";
+const grid__data = "grid__data__Mn4TK";
+const styles = {
+	grid: grid,
+	grid_bordered: grid_bordered,
+	grid__inner: grid__inner,
+	grid__data: grid__data
+};
+
+export { styles as default, grid, grid__data, grid__inner, grid_bordered };
+//# sourceMappingURL=Grid.module.css.js.map

package/dist/esm/components/Grid/Grid.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/esm/components/Grid/Header.css

@@ -0,0 +1,44 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+
+.header__hXzAE {
+  display: flex;
+  position: sticky;
+  top: 0;
+  left: 0;
+  height: var(--header-height);
+  flex-direction: row;
+}
+
+.header_scrolled-vertical__mIp2- {
+  box-shadow: 0 0 0 1px var(--click-grid-header-cell-color-stroke-default);
+}
+
+.header__scroll-area__Nok8G {
+  position: relative;
+  left: var(--header-scroll-area-left);
+}
+
+.header__cell__ZCE9p {
+  display: flex;
+  position: absolute;
+  left: var(--header-cell-left);
+  width: var(--header-cell-width);
+  height: var(--header-cell-height);
+}
+
+.header__cell__ZCE9p:hover [data-resize] {
+  background: var(--click-grid-header-cell-color-stroke-selectDirect);
+}
+
+/* the sticky "select all" corner extends a header cell (styled(HeaderCellContainer)) */
+.header__row-column__ceu5w {
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: var(--header-cell-width);
+  text-align: right;
+}
+
+.header__row-column_scrolled-horizontal__QZO4p {
+  box-shadow: 0 0 0 1px var(--click-grid-header-cell-color-stroke-default);
+}

package/dist/esm/components/Grid/Header.js

@@ -1,50 +1,17 @@
+import "./Header.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './Header.module.css.js';
 import { StyledCell } from './StyledCell.js';
 import ColumnResizer from './ColumnResizer.js';
 
-const HeaderContainer = styled.div.withConfig({
-  componentId: "sc-1oadqc8-0"
-})(["position:sticky;top:0;left:0;display:flex;flex-direction:row;height:", "px;", ""], ({
-  $height
-}) => $height, ({
-  $scrolledVertical,
-  theme
-}) => $scrolledVertical ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};` : "");
-const ScrollableHeaderContainer = styled.div.withConfig({
-  componentId: "sc-1oadqc8-1"
-})(["position:relative;left:", "px;"], ({
-  $left
-}) => $left);
-const HeaderCellContainer = styled.div.withConfig({
-  componentId: "sc-1oadqc8-2"
-})(["position:absolute;display:flex;width:", ";height:", "px;left:", "px;&:hover [data-resize]{background:", ";}"], ({
-  $width
-}) => typeof $width === "string" ? $width : `${$width}px`, ({
-  $height
-}) => $height, ({
-  $columnPosition
-}) => $columnPosition, ({
-  theme
-}) => theme.click.grid.header.cell.color.stroke.selectDirect);
-const RowColumnContainer = styled(HeaderCellContainer).withConfig({
-  componentId: "sc-1oadqc8-3"
-})(["position:sticky;top:0;left:0;width:", ";text-align:right;", ""], ({
-  $width
-}) => typeof $width === "string" ? $width : `${$width}px`, ({
-  $scrolledHorizontal,
-  theme
-}) => $scrolledHorizontal ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};` : "");
-const RowColumn = styled(StyledCell).withConfig({
-  componentId: "sc-1oadqc8-4"
-})(["width:100%;text-align:right;overflow:hidden;"]);
+const toCssSize = ($width) => typeof $width === "string" ? $width : `${$width}px`;
 const Column = ({
   columnIndex,
   cell,
   getColumnWidth,
   getColumnHorizontalPosition,
   getSelectionType,
-  isFirstColumn,
   isLastColumn,
   onColumnResize,
   height,
@@ -64,8 +31,12 @@ const Column = ({
   const isSelected = selectionType === "selectDirect";
   const isSelectedLeft = (leftSelectionType === "selectDirect" || isSelected) && leftSelectionType !== selectionType;
   const columnWidth = getColumnWidth(columnIndex);
-  return /* @__PURE__ */ jsxs(HeaderCellContainer, { $width: columnWidth, $columnPosition: columnPosition, $height: height, "data-header": columnIndex, children: [
-    /* @__PURE__ */ jsx(StyledCell, { $type: "header", as: cell, columnIndex, type: "header-cell", $isFirstColumn: isFirstColumn, $selectionType: selectionType, $isLastColumn: isLastColumn, $isFocused: false, $isSelectedLeft: isSelectedLeft, $isSelectedTop: isSelected, $isLastRow: false, $isFirstRow: true, $height: height, "data-grid-row": -1, "data-grid-column": columnIndex, "data-selected": isSelected, $showBorder: showBorder, width: columnWidth }),
+  return /* @__PURE__ */ jsxs("div", { className: styles["header__cell"], style: {
+    "--header-cell-width": toCssSize(columnWidth),
+    "--header-cell-height": `${height}px`,
+    "--header-cell-left": `${columnPosition}px`
+  }, "data-header": columnIndex, children: [
+    /* @__PURE__ */ jsx(StyledCell, { $type: "header", as: cell, columnIndex, type: "header-cell", $selectionType: selectionType, $isLastColumn: isLastColumn, $isFocused: false, $isSelectedLeft: isSelectedLeft, $isSelectedTop: isSelected, $isLastRow: false, $height: height, "data-grid-row": -1, "data-grid-column": columnIndex, "data-selected": isSelected, $showBorder: showBorder, width: columnWidth }),
     /* @__PURE__ */ jsx(ColumnResizer, { height, onColumnResize, columnIndex, getResizerPosition, columnWidth, resizingState })
   ] });
 };
@@ -90,11 +61,19 @@ const Header = ({
   const selectedAllType = getSelectionType({
     type: "all"
   });
-  return /* @__PURE__ */ jsxs(HeaderContainer, { $height: height, $scrolledVertical: scrolledVertical, children: [
-    /* @__PURE__ */ jsx(ScrollableHeaderContainer, { $left: rowNumberWidth, children: Array.from({
+  return /* @__PURE__ */ jsxs("div", { className: cn(styles["header"], scrolledVertical && styles["header_scrolled-vertical"]), style: {
+    "--header-height": `${height}px`
+  }, children: [
+    /* @__PURE__ */ jsx("div", { className: styles["header__scroll-area"], style: {
+      "--header-scroll-area-left": `${rowNumberWidth}px`
+    }, children: Array.from({
       length: maxColumn - minColumn + 1
-    }, (_, index) => minColumn + index).map((columnIndex) => /* @__PURE__ */ jsx(Column, { getSelectionType, columnIndex, getColumnWidth, getColumnHorizontalPosition, cell, isFirstColumn: columnIndex === 0 && !showRowNumber, isLastColumn: columnIndex + 1 === columnCount, onColumnResize, height, getResizerPosition, showBorder, resizingState }, `header-${columnIndex}`)) }),
-    showRowNumber && /* @__PURE__ */ jsx(RowColumnContainer, { $width: rowNumberWidth, $height: height, $columnPosition: 0, $scrolledHorizontal: scrolledHorizontal, children: /* @__PURE__ */ jsx(RowColumn, { "data-selected": selectedAllType === "selectDirect", $type: "header", $isFirstRow: true, $isFirstColumn: true, $selectionType: selectedAllType, $isLastRow: false, $isLastColumn: false, $height: height, $isFocused: false, $isSelectedLeft: false, $isSelectedTop: false, "data-grid-row": -1, "data-grid-column": -1, $showBorder: showBorder, children: "#" }) })
+    }, (_, index) => minColumn + index).map((columnIndex) => /* @__PURE__ */ jsx(Column, { getSelectionType, columnIndex, getColumnWidth, getColumnHorizontalPosition, cell, isLastColumn: columnIndex + 1 === columnCount, onColumnResize, height, getResizerPosition, showBorder, resizingState }, `header-${columnIndex}`)) }),
+    showRowNumber && /* @__PURE__ */ jsx("div", { className: cn(styles["header__cell"], styles["header__row-column"], scrolledHorizontal && styles["header__row-column_scrolled-horizontal"]), style: {
+      "--header-cell-width": toCssSize(rowNumberWidth),
+      "--header-cell-height": `${height}px`,
+      "--header-cell-left": "0px"
+    }, children: /* @__PURE__ */ jsx(StyledCell, { "data-align": "right", "data-selected": selectedAllType === "selectDirect", $type: "header", $selectionType: selectedAllType, $isLastRow: false, $isLastColumn: false, $height: height, $isFocused: false, $isSelectedLeft: false, $isSelectedTop: false, "data-grid-row": -1, "data-grid-column": -1, $showBorder: showBorder, children: "#" }) })
   ] });
 };