@clickhouse/click-ui 0.6.1 → 0.6.2-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';\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  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  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\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>\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","disabled","onSelectDate","placeholder","responsivePositioning","isOpen","setIsOpen","partialYear","setPartialYear","partialMonth","setPartialMonth","autoFocusCalendar","setAutoFocusCalendar","calendarOptions","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 { 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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"}

package/dist/esm/components/Dialog/Dialog.css

@@ -0,0 +1,97 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. opaqueBackground) */
+.trigger__bbzuV {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `width` is widely supported on evergreen browsers; the original
+     rule used the same value. */
+  width: fit-content;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+@keyframes overlay-show__YkYqH {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes content-show__V3LjD {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.overlay__6zjBZ {
+  position: fixed;
+  inset: 0;
+  background-color: var(--click-dialog-color-opaqueBackground-default);
+  animation: overlay-show__YkYqH 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.content__eXA1D {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 75%;
+  max-width: 670px;
+  max-height: 75%;
+  overflow: auto;
+  border: 1px solid var(--click-global-color-stroke-default);
+  border-radius: var(--click-dialog-radii-all);
+  background: var(--click-dialog-color-background-default);
+  outline: none;
+  box-shadow: var(--click-dialog-shadow-default);
+  transform: translate(-50%, -50%);
+  animation: content-show__V3LjD 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  padding-block: var(--click-dialog-space-y);
+  padding-inline: var(--click-dialog-space-x);
+}
+
+.content_reduce-padding__DYRs6 {
+  padding-block: var(--sizes-4);
+  padding-inline: var(--sizes-4);
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 640px) {
+  .content__eXA1D {
+    width: 100%;
+    max-height: 100%;
+    border-radius: 0;
+  }
+}
+
+.title-area__cF92Z {
+  display: flex;
+  min-height: var(--sizes-9); /* 32px */
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-area_only-close__PFiEJ {
+  justify-content: flex-end;
+}
+
+.title__glVA6 {
+  margin: 0;
+  padding: 0;
+  font: var(--click-dialog-typography-title-default);
+}
+
+.description__6Bsa9 {
+  margin: 0;
+  padding: 0;
+  color: var(--click-dialog-color-description-default);
+  font: var(--click-dialog-typography-description-default);
+}

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

@@ -0,0 +1,18 @@
+const trigger = "trigger__bbzuV";
+const overlay = "overlay__6zjBZ";
+const content = "content__eXA1D";
+const title = "title__glVA6";
+const description = "description__6Bsa9";
+const styles = {
+	trigger: trigger,
+	overlay: overlay,
+	content: content,
+	"content_reduce-padding": "content_reduce-padding__DYRs6",
+	"title-area": "title-area__cF92Z",
+	"title-area_only-close": "title-area_only-close__PFiEJ",
+	title: title,
+	description: description
+};
+
+export { content, styles as default, description, overlay, title, trigger };
+//# sourceMappingURL=Dialog.module.css.js.map

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

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

package/dist/esm/components/Dialog/index.js

@@ -1,10 +1,14 @@
+import "./Dialog.css";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
-import { styled, keyframes } from 'styled-components';
 import { CrossButton } from '../CrossButton/index.js';
+import { cn } from '../../lib/cva.js';
+import { useResolvedPortalContainer } from '../../providers/PortalContext.js';
+import styles from './Dialog.module.css.js';
 import { Button } from '../Button/index.js';
 import { Spacer } from '../Spacer/index.js';
 import { Icon as SvgImage } from '../Icon/index.js';
+import { cva } from 'class-variance-authority';
 
 const Dialog = ({
   children,
@@ -12,18 +16,13 @@ const Dialog = ({
 }) => {
   return /* @__PURE__ */ jsx(RadixDialog.Root, { ...props, children });
 };
-const Trigger = styled(RadixDialog.Trigger).withConfig({
-  componentId: "sc-1wr6otn-0"
-})(["width:fit-content;background:transparent;border:none;cursor:pointer;"]);
 const DialogTrigger = ({
   children,
   asChild,
+  className,
   ...props
 }) => {
-  if (asChild) {
-    return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild: true, ...props, children });
-  }
-  return /* @__PURE__ */ jsx(Trigger, { ...props, children });
+  return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild, className: asChild ? className : cn(styles.trigger, className), ...props, children });
 };
 DialogTrigger.displayName = "DialogTrigger";
 Dialog.Trigger = DialogTrigger;
@@ -34,67 +33,20 @@ const DialogClose = ({
 }) => /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type, label, ...props }) });
 DialogClose.displayName = "DialogClose";
 Dialog.Close = DialogClose;
-const overlayShow = keyframes({
-  "0%": {
-    opacity: 0
-  },
-  "100%": {
-    opacity: 1
+const contentAreaVariants = cva(styles.content, {
+  variants: {
+    reducePadding: {
+      true: styles["content_reduce-padding"]
+    }
   }
 });
-const contentShow = keyframes({
-  "0%": {
-    opacity: 0,
-    transform: "translate(-50%, -48%) scale(.96)"
-  },
-  "100%": {
-    opacity: 1,
-    transform: "translate(-50%, -50%) scale(1)"
+const titleAreaVariants = cva(styles["title-area"], {
+  variants: {
+    onlyClose: {
+      true: styles["title-area_only-close"]
+    }
   }
 });
-const DialogOverlay = styled(RadixDialog.Overlay).withConfig({
-  componentId: "sc-1wr6otn-1"
-})(["background-color:", ";position:fixed;inset:0;animation:", " 150ms cubic-bezier(0.16,1,0.3,1);"], ({
-  theme
-}) => theme.click.dialog.color.opaqueBackground.default, overlayShow);
-const ContentArea = styled(RadixDialog.Content).withConfig({
-  componentId: "sc-1wr6otn-2"
-})(["background:", ";border-radius:", ";padding-block:", ";padding-inline:", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;@media (max-width:", "){max-height:100%;border-radius:0;width:100%;}"], ({
-  theme
-}) => theme.click.dialog.color.background.default, ({
-  theme
-}) => theme.click.dialog.radii.all, ({
-  theme,
-  $reducePadding = false
-}) => $reducePadding ? theme.sizes[4] : theme.click.dialog.space.y, ({
-  theme,
-  $reducePadding = false
-}) => $reducePadding ? theme.sizes[4] : theme.click.dialog.space.x, ({
-  theme
-}) => theme.click.dialog.shadow.default, ({
-  theme
-}) => theme.click.global.color.stroke.default, contentShow, ({
-  theme
-}) => theme.breakpoint.sizes.sm);
-const TitleArea = styled.div.withConfig({
-  componentId: "sc-1wr6otn-3"
-})(["display:flex;justify-content:", ";align-items:center;min-height:", ";"], ({
-  $onlyClose
-}) => $onlyClose ? "flex-end" : "space-between", ({
-  theme
-}) => theme.sizes[9]);
-const Title = styled(RadixDialog.Title).withConfig({
-  componentId: "sc-1wr6otn-4"
-})(["font:", ";padding:0;margin:0;"], ({
-  theme
-}) => theme.click.dialog.typography.title.default);
-const Description = styled(RadixDialog.Description).withConfig({
-  componentId: "sc-1wr6otn-5"
-})(["font:", ";color:", ";padding:0;margin:0;"], ({
-  theme
-}) => theme.click.dialog.typography.description.default, ({
-  theme
-}) => theme.click.dialog.color.description.default);
 const CloseButton = ({
   onClose
 }) => /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CrossButton, { onClick: onClose, children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: "lg" }) }) });
@@ -108,19 +60,25 @@ const DialogContent = ({
   container,
   showOverlay = true,
   reducePadding = false,
+  className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount, container, children: [
-    showOverlay && /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs(ContentArea, { "data-testid": "click-dialog-contentarea", $reducePadding: reducePadding, ...props, children: [
+  const portalContainer = useResolvedPortalContainer(container);
+  return /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount, container: portalContainer, children: [
+    showOverlay && /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: styles.overlay }),
+    /* @__PURE__ */ jsxs(RadixDialog.Content, { "data-testid": "click-dialog-contentarea", ...props, className: cn(contentAreaVariants({
+      reducePadding
+    }), className), children: [
       (title || showClose) && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(TitleArea, { $onlyClose: !!showClose && !title, children: [
-          title && /* @__PURE__ */ jsx(Title, { "data-testid": "click-dialog-title", children: title }),
+        /* @__PURE__ */ jsxs("div", { className: cn(titleAreaVariants({
+          onlyClose: !!showClose && !title
+        })), children: [
+          title && /* @__PURE__ */ jsx(RadixDialog.Title, { "data-testid": "click-dialog-title", className: styles.title, children: title }),
           showClose && /* @__PURE__ */ jsx(CloseButton, { "data-testid": "click-dialog-close", onClose })
         ] }),
         /* @__PURE__ */ jsx(Spacer, { size: "sm" })
       ] }),
-      description ? /* @__PURE__ */ jsx(Description, { children: description }) : /* @__PURE__ */ jsx(RadixDialog.Description, { hidden: true }),
+      description ? /* @__PURE__ */ jsx(RadixDialog.Description, { className: styles.description, children: description }) : /* @__PURE__ */ jsx(RadixDialog.Description, { hidden: true }),
       children
     ] })
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { keyframes, styled } from 'styled-components';\nimport { Button, ButtonProps } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { CrossButton } from '@/components/CrossButton';\nimport { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';\n\nexport const Dialog = ({ children, ...props }: DialogProps) => {\n  return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\n\n// Dialog Trigger\nconst Trigger = styled(RadixDialog.Trigger)`\n  width: fit-content;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n`;\n\nconst DialogTrigger = ({ children, asChild, ...props }: DialogTriggerProps) => {\n  if (asChild) {\n    // Pass all props to RadixDialog.Trigger, no styled wrapper\n    return (\n      <RadixDialog.Trigger\n        asChild\n        {...props}\n      >\n        {children}\n      </RadixDialog.Trigger>\n    );\n  }\n  // Use styled Trigger if not asChild\n  return <Trigger {...props}>{children}</Trigger>;\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialog.Trigger = DialogTrigger;\n\nconst DialogClose = ({ label = 'Close', type = 'secondary', ...props }: ButtonProps) => (\n  <RadixDialog.Close asChild>\n    <Button\n      type={type}\n      label={label}\n      {...props}\n    />\n  </RadixDialog.Close>\n);\n\nDialogClose.displayName = 'DialogClose';\nDialog.Close = DialogClose;\n\n// Dialog Content\nconst overlayShow = keyframes({\n  '0%': { opacity: 0 },\n  '100%': { opacity: 1 },\n});\n\nconst contentShow = keyframes({\n  '0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.96)' },\n  '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },\n});\n\nconst DialogOverlay = styled(RadixDialog.Overlay)`\n  background-color: ${({ theme }) => theme.click.dialog.color.opaqueBackground.default};\n  position: fixed;\n  inset: 0;\n  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n`;\n\nconst ContentArea = styled(RadixDialog.Content)<{ $reducePadding?: boolean }>`\n  background: ${({ theme }) => theme.click.dialog.color.background.default};\n  border-radius: ${({ theme }) => theme.click.dialog.radii.all};\n  padding-block: ${({ theme, $reducePadding = false }) =>\n    $reducePadding ? theme.sizes[4] : theme.click.dialog.space.y};\n  padding-inline: ${({ theme, $reducePadding = false }) =>\n    $reducePadding ? theme.sizes[4] : theme.click.dialog.space.x};\n  box-shadow: ${({ theme }) => theme.click.dialog.shadow.default};\n  border: 1px solid ${({ theme }) => theme.click.global.color.stroke.default};\n  width: 75%;\n  max-width: 670px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  max-height: 75%;\n  overflow: auto;\n  transform: translate(-50%, -50%);\n  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  outline: none;\n\n  @media (max-width: ${({ theme }) => theme.breakpoint.sizes.sm}) {\n    max-height: 100%;\n    border-radius: 0;\n    width: 100%;\n  }\n`;\n\nconst TitleArea = styled.div<{ $onlyClose?: boolean }>`\n  display: flex;\n  justify-content: ${({ $onlyClose }) => ($onlyClose ? 'flex-end' : 'space-between')};\n  align-items: center;\n  min-height: ${({ theme }) => theme.sizes[9]}; // 32px\n`;\n\nconst Title = styled(RadixDialog.Title)`\n  font: ${({ theme }) => theme.click.dialog.typography.title.default};\n  padding: 0;\n  margin: 0;\n`;\n\nconst Description = styled(RadixDialog.Description)`\n  font: ${({ theme }) => theme.click.dialog.typography.description.default};\n  color: ${({ theme }) => theme.click.dialog.color.description.default};\n  padding: 0;\n  margin: 0;\n`;\n\nconst CloseButton = ({ onClose }: { onClose?: () => void }) => (\n  <RadixDialog.Close asChild>\n    <CrossButton onClick={onClose}>\n      <Icon\n        name=\"cross\"\n        size=\"lg\"\n      />\n    </CrossButton>\n  </RadixDialog.Close>\n);\n\nconst DialogContent = ({\n  title,\n  description,\n  children,\n  showClose,\n  onClose,\n  forceMount,\n  container,\n  showOverlay = true,\n  reducePadding = false,\n  ...props\n}: DialogContentProps) => {\n  return (\n    <RadixDialog.Portal\n      forceMount={forceMount}\n      container={container}\n    >\n      {showOverlay && <DialogOverlay />}\n      <ContentArea\n        data-testid=\"click-dialog-contentarea\"\n        $reducePadding={reducePadding}\n        {...props}\n      >\n        {(title || showClose) && (\n          <>\n            <TitleArea $onlyClose={!!showClose && !title}>\n              {title && <Title data-testid=\"click-dialog-title\">{title}</Title>}\n              {showClose && (\n                <CloseButton\n                  data-testid=\"click-dialog-close\"\n                  onClose={onClose}\n                />\n              )}\n            </TitleArea>\n            <Spacer size=\"sm\" />\n          </>\n        )}\n        {description ? (\n          <Description>{description}</Description>\n        ) : (\n          <RadixDialog.Description hidden />\n        )}\n        {children}\n      </ContentArea>\n    </RadixDialog.Portal>\n  );\n};\n\nDialogContent.displayName = 'DialogContent';\nDialog.Content = DialogContent;\n"],"names":["Dialog","children","props","Trigger","styled","RadixDialog","withConfig","componentId","DialogTrigger","asChild","displayName","DialogClose","label","type","Close","overlayShow","keyframes","opacity","contentShow","transform","DialogOverlay","Overlay","theme","click","dialog","color","opaqueBackground","default","ContentArea","Content","background","radii","all","$reducePadding","sizes","space","y","x","shadow","global","stroke","breakpoint","sm","TitleArea","div","$onlyClose","Title","typography","title","Description","description","CloseButton","onClose","Icon","DialogContent","showClose","forceMount","container","showOverlay","reducePadding"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { Button, ButtonProps } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { CrossButton } from '@/components/CrossButton';\nimport { cn, cva } from '@/lib/cva';\nimport { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Dialog.module.css';\n\nexport const Dialog = ({ children, ...props }: DialogProps) => {\n  return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\n\nconst DialogTrigger = ({\n  children,\n  asChild,\n  className,\n  ...props\n}: DialogTriggerProps) => {\n  return (\n    <RadixDialog.Trigger\n      asChild={asChild}\n      className={asChild ? className : cn(styles.trigger, className)}\n      {...props}\n    >\n      {children}\n    </RadixDialog.Trigger>\n  );\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialog.Trigger = DialogTrigger;\n\nconst DialogClose = ({ label = 'Close', type = 'secondary', ...props }: ButtonProps) => (\n  <RadixDialog.Close asChild>\n    <Button\n      type={type}\n      label={label}\n      {...props}\n    />\n  </RadixDialog.Close>\n);\n\nDialogClose.displayName = 'DialogClose';\nDialog.Close = DialogClose;\n\nconst contentAreaVariants = cva(styles.content, {\n  variants: {\n    reducePadding: {\n      true: styles['content_reduce-padding'],\n    },\n  },\n});\n\nconst titleAreaVariants = cva(styles['title-area'], {\n  variants: {\n    onlyClose: {\n      true: styles['title-area_only-close'],\n    },\n  },\n});\n\nconst CloseButton = ({ onClose }: { onClose?: () => void }) => (\n  <RadixDialog.Close asChild>\n    <CrossButton onClick={onClose}>\n      <Icon\n        name=\"cross\"\n        size=\"lg\"\n      />\n    </CrossButton>\n  </RadixDialog.Close>\n);\n\nconst DialogContent = ({\n  title,\n  description,\n  children,\n  showClose,\n  onClose,\n  forceMount,\n  container,\n  showOverlay = true,\n  reducePadding = false,\n  className,\n  ...props\n}: DialogContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixDialog.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      {showOverlay && <RadixDialog.Overlay className={styles.overlay} />}\n      <RadixDialog.Content\n        data-testid=\"click-dialog-contentarea\"\n        {...props}\n        className={cn(contentAreaVariants({ reducePadding }), className)}\n      >\n        {(title || showClose) && (\n          <>\n            <div className={cn(titleAreaVariants({ onlyClose: !!showClose && !title }))}>\n              {title && (\n                <RadixDialog.Title\n                  data-testid=\"click-dialog-title\"\n                  className={styles.title}\n                >\n                  {title}\n                </RadixDialog.Title>\n              )}\n              {showClose && (\n                <CloseButton\n                  data-testid=\"click-dialog-close\"\n                  onClose={onClose}\n                />\n              )}\n            </div>\n            <Spacer size=\"sm\" />\n          </>\n        )}\n        {description ? (\n          <RadixDialog.Description className={styles.description}>\n            {description}\n          </RadixDialog.Description>\n        ) : (\n          <RadixDialog.Description hidden />\n        )}\n        {children}\n      </RadixDialog.Content>\n    </RadixDialog.Portal>\n  );\n};\n\nDialogContent.displayName = 'DialogContent';\nDialog.Content = DialogContent;\n"],"names":["Dialog","children","props","DialogTrigger","asChild","className","cn","styles","trigger","displayName","Trigger","DialogClose","label","type","Close","contentAreaVariants","cva","content","variants","reducePadding","true","titleAreaVariants","onlyClose","CloseButton","onClose","Icon","DialogContent","title","description","showClose","forceMount","container","showOverlay","portalContainer","useResolvedPortalContainer","overlay","Content"],"mappings":"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"}

package/dist/esm/components/Dropdown/index.js

@@ -5,6 +5,7 @@ import { GenericMenuItem, GenericMenuPanel, Arrow } from '../GenericMenu/index.j
 import { useInputModality } from '../../hooks/internal/useInputModality.js';
 import Popover_Arrow from '../Assets/Icons/Popover-Arrow.js';
 import { IconWrapper } from '../IconWrapper/index.js';
+import { useResolvedPortalContainer } from '../../providers/PortalContext.js';
 import { Icon as SvgImage } from '../Icon/index.js';
 
 const Dropdown = (props) => /* @__PURE__ */ jsx(DropdownMenu.Root, { ...props });
@@ -44,13 +45,15 @@ const DropdownMenuContent = styled(GenericMenuPanel).withConfig({
 const DropdownContent = ({
   sub,
   children,
+  container,
   showArrow,
   responsivePositioning = true,
   ...props
 }) => {
   const ContentElement = sub ? DropdownMenu.SubContent : DropdownMenu.Content;
   const inputModalityProps = useInputModality();
-  return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenuContent, { ...props, $type: "dropdown-menu", $showArrow: showArrow, as: ContentElement, sideOffset: 4, loop: true, avoidCollisions: responsivePositioning, collisionPadding: responsivePositioning ? 100 : void 0, ...inputModalityProps, children: [
+  const portalContainer = useResolvedPortalContainer(container);
+  return /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(DropdownMenuContent, { ...props, $type: "dropdown-menu", $showArrow: showArrow, as: ContentElement, sideOffset: 4, loop: true, avoidCollisions: responsivePositioning, collisionPadding: responsivePositioning ? 100 : void 0, ...inputModalityProps, children: [
     showArrow && /* @__PURE__ */ jsx(Arrow, { asChild: true, as: DropdownMenu.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsx(Popover_Arrow, {}) }),
     children
   ] }) });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport { ReactNode } from 'react';\nimport { styled } from 'styled-components';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { useInputModality } from '@/hooks/internal';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\n\nexport const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (\n  <DropdownMenu.Root {...props} />\n);\n\nconst DropdownMenuItem = styled(GenericMenuItem)<{ $type?: 'default' | 'danger' }>`\n  position: relative;\n  display: flex;\n  min-height: 32px;\n`;\n\ninterface SubDropdownProps {\n  sub?: true;\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n}\n\ninterface MainDropdownProps {\n  sub?: never;\n}\n\ntype DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps &\n  SubDropdownProps;\ntype DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;\n\nconst Trigger = styled(DropdownMenu.Trigger)`\n  cursor: pointer;\n  width: fit-content;\n  &[disabled] {\n    cursor: not-allowed;\n  }\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.click.global.color.outline.default};\n    outline-offset: 2px;\n  }\n`;\n\nconst DropdownTrigger = ({\n  sub,\n  children,\n  ...props\n}: DropdownSubTriggerProps | DropdownTriggerProps) => {\n  if (sub) {\n    const { icon, iconDir, ...menuProps } = props as DropdownSubTriggerProps;\n    return (\n      <DropdownMenuItem\n        as={DropdownMenu.SubTrigger}\n        {...menuProps}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {children}\n        </IconWrapper>\n        <Icon name=\"chevron-right\" />\n      </DropdownMenuItem>\n    );\n  }\n\n  return (\n    <Trigger\n      asChild\n      {...(props as DropdownTriggerProps)}\n    >\n      <div>{children}</div>\n    </Trigger>\n  );\n};\n\nDropdownTrigger.displayName = 'DropdownTrigger';\nDropdown.Trigger = DropdownTrigger;\n\nexport type ArrowProps = {\n  showArrow?: boolean;\n};\n\ninterface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {\n  children?: ReactNode;\n  responsivePositioning?: boolean;\n}\n\ninterface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubContentProps {\n  children?: ReactNode;\n  responsivePositioning?: boolean;\n}\n\ntype DropdownContentProps = StyledDropdownContentProps & SubDropdownProps & ArrowProps;\ntype DropdownSubContentProps = StyledDropdownSubContentProps &\n  MainDropdownProps &\n  ArrowProps;\n\nconst DropdownMenuContent = styled(GenericMenuPanel)`\n  min-width: ${({ theme }) => theme.click.genericMenu.item.size.minWidth};\n  flex-direction: column;\n  z-index: 1;\n  overflow-y: auto;\n`;\n\nconst DropdownContent = ({\n  sub,\n  children,\n  showArrow,\n  responsivePositioning = true,\n  ...props\n}: DropdownContentProps | DropdownSubContentProps) => {\n  const ContentElement = sub ? DropdownMenu.SubContent : DropdownMenu.Content;\n  const inputModalityProps = useInputModality();\n  return (\n    <DropdownMenu.Portal>\n      <DropdownMenuContent\n        {...props}\n        $type=\"dropdown-menu\"\n        $showArrow={showArrow}\n        as={ContentElement}\n        sideOffset={4}\n        loop\n        avoidCollisions={responsivePositioning}\n        collisionPadding={responsivePositioning ? 100 : undefined}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={DropdownMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </DropdownMenuContent>\n    </DropdownMenu.Portal>\n  );\n};\n\nDropdownContent.displayName = 'DropdownContent';\nDropdown.Content = DropdownContent;\n\nconst DropdownMenuGroup = styled(DropdownMenu.Group)`\n  width: 100%;\n  border-bottom: 1px solid\n    ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst DropdownGroup = (props: DropdownMenu.DropdownMenuGroupProps) => {\n  return <DropdownMenuGroup {...props} />;\n};\n\nDropdownGroup.displayName = 'DropdownGroup';\nDropdown.Group = DropdownGroup;\n\nconst DropdownMenuSub = styled(DropdownMenu.Sub)`\n  border-bottom: 1px solid\n    ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst DropdownSub = ({ ...props }: DropdownMenu.DropdownMenuGroupProps) => {\n  return <DropdownMenuSub {...props} />;\n};\n\nDropdownSub.displayName = 'DropdownSub';\nDropdown.Sub = DropdownSub;\n\ninterface DropdownItemProps extends DropdownMenu.DropdownMenuItemProps {\n  /** Icon to display in the menu item */\n  icon?: IconName;\n  /** The direction of the icon relative to the label */\n  iconDir?: HorizontalDirection;\n  /** The type of the menu item */\n  type?: 'default' | 'danger';\n}\n\nexport type { DropdownItemProps };\n\nconst DropdownItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  children,\n  ...props\n}: DropdownItemProps) => {\n  return (\n    <DropdownMenuItem\n      as={DropdownMenu.Item}\n      $type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n    </DropdownMenuItem>\n  );\n};\n\nDropdownItem.displayName = 'DropdownItem';\nDropdown.Item = DropdownItem;\n\nexport default Dropdown;\n"],"names":["Dropdown","props","DropdownMenuItem","styled","GenericMenuItem","withConfig","componentId","Trigger","DropdownMenu","theme","click","global","color","outline","default","DropdownTrigger","sub","children","icon","iconDir","menuProps","SubTrigger","Icon","displayName","DropdownMenuContent","GenericMenuPanel","genericMenu","item","size","minWidth","DropdownContent","showArrow","responsivePositioning","ContentElement","SubContent","Content","inputModalityProps","useInputModality","undefined","Arrow","DropdownMenuGroup","Group","stroke","DropdownGroup","DropdownMenuSub","Sub","DropdownSub","DropdownItem","type","Item"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport { ReactNode } from 'react';\nimport { styled } from 'styled-components';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { useInputModality } from '@/hooks/internal';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\n\nexport const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (\n  <DropdownMenu.Root {...props} />\n);\n\nconst DropdownMenuItem = styled(GenericMenuItem)<{ $type?: 'default' | 'danger' }>`\n  position: relative;\n  display: flex;\n  min-height: 32px;\n`;\n\ninterface SubDropdownProps {\n  sub?: true;\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n}\n\ninterface MainDropdownProps {\n  sub?: never;\n}\n\ntype DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps &\n  SubDropdownProps;\ntype DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;\n\nconst Trigger = styled(DropdownMenu.Trigger)`\n  cursor: pointer;\n  width: fit-content;\n  &[disabled] {\n    cursor: not-allowed;\n  }\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.click.global.color.outline.default};\n    outline-offset: 2px;\n  }\n`;\n\nconst DropdownTrigger = ({\n  sub,\n  children,\n  ...props\n}: DropdownSubTriggerProps | DropdownTriggerProps) => {\n  if (sub) {\n    const { icon, iconDir, ...menuProps } = props as DropdownSubTriggerProps;\n    return (\n      <DropdownMenuItem\n        as={DropdownMenu.SubTrigger}\n        {...menuProps}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {children}\n        </IconWrapper>\n        <Icon name=\"chevron-right\" />\n      </DropdownMenuItem>\n    );\n  }\n\n  return (\n    <Trigger\n      asChild\n      {...(props as DropdownTriggerProps)}\n    >\n      <div>{children}</div>\n    </Trigger>\n  );\n};\n\nDropdownTrigger.displayName = 'DropdownTrigger';\nDropdown.Trigger = DropdownTrigger;\n\nexport type ArrowProps = {\n  showArrow?: boolean;\n};\n\ninterface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ninterface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ntype DropdownContentProps = StyledDropdownContentProps & SubDropdownProps & ArrowProps;\ntype DropdownSubContentProps = StyledDropdownSubContentProps &\n  MainDropdownProps &\n  ArrowProps;\n\nconst DropdownMenuContent = styled(GenericMenuPanel)`\n  min-width: ${({ theme }) => theme.click.genericMenu.item.size.minWidth};\n  flex-direction: column;\n  z-index: 1;\n  overflow-y: auto;\n`;\n\nconst DropdownContent = ({\n  sub,\n  children,\n  container,\n  showArrow,\n  responsivePositioning = true,\n  ...props\n}: DropdownContentProps | DropdownSubContentProps) => {\n  const ContentElement = sub ? DropdownMenu.SubContent : DropdownMenu.Content;\n  const inputModalityProps = useInputModality();\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <DropdownMenu.Portal container={portalContainer}>\n      <DropdownMenuContent\n        {...props}\n        $type=\"dropdown-menu\"\n        $showArrow={showArrow}\n        as={ContentElement}\n        sideOffset={4}\n        loop\n        avoidCollisions={responsivePositioning}\n        collisionPadding={responsivePositioning ? 100 : undefined}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={DropdownMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </DropdownMenuContent>\n    </DropdownMenu.Portal>\n  );\n};\n\nDropdownContent.displayName = 'DropdownContent';\nDropdown.Content = DropdownContent;\n\nconst DropdownMenuGroup = styled(DropdownMenu.Group)`\n  width: 100%;\n  border-bottom: 1px solid\n    ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst DropdownGroup = (props: DropdownMenu.DropdownMenuGroupProps) => {\n  return <DropdownMenuGroup {...props} />;\n};\n\nDropdownGroup.displayName = 'DropdownGroup';\nDropdown.Group = DropdownGroup;\n\nconst DropdownMenuSub = styled(DropdownMenu.Sub)`\n  border-bottom: 1px solid\n    ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst DropdownSub = ({ ...props }: DropdownMenu.DropdownMenuGroupProps) => {\n  return <DropdownMenuSub {...props} />;\n};\n\nDropdownSub.displayName = 'DropdownSub';\nDropdown.Sub = DropdownSub;\n\ninterface DropdownItemProps extends DropdownMenu.DropdownMenuItemProps {\n  /** Icon to display in the menu item */\n  icon?: IconName;\n  /** The direction of the icon relative to the label */\n  iconDir?: HorizontalDirection;\n  /** The type of the menu item */\n  type?: 'default' | 'danger';\n}\n\nexport type { DropdownItemProps };\n\nconst DropdownItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  children,\n  ...props\n}: DropdownItemProps) => {\n  return (\n    <DropdownMenuItem\n      as={DropdownMenu.Item}\n      $type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n    </DropdownMenuItem>\n  );\n};\n\nDropdownItem.displayName = 'DropdownItem';\nDropdown.Item = DropdownItem;\n\nexport default Dropdown;\n"],"names":["Dropdown","props","DropdownMenuItem","styled","GenericMenuItem","withConfig","componentId","Trigger","DropdownMenu","theme","click","global","color","outline","default","DropdownTrigger","sub","children","icon","iconDir","menuProps","SubTrigger","Icon","displayName","DropdownMenuContent","GenericMenuPanel","genericMenu","item","size","minWidth","DropdownContent","container","showArrow","responsivePositioning","ContentElement","SubContent","Content","inputModalityProps","useInputModality","portalContainer","useResolvedPortalContainer","undefined","Arrow","DropdownMenuGroup","Group","stroke","DropdownGroup","DropdownMenuSub","Sub","DropdownSub","DropdownItem","type","Item"],"mappings":"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"}

package/dist/esm/components/Flyout/index.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Dialog, DialogContent, DialogTitle, DialogDescription, DialogTrigger, DialogPortal, DialogOverlay, DialogClose } from '@radix-ui/react-dialog';
 import { styled, keyframes } from 'styled-components';
 import { CrossButton } from '../CrossButton/index.js';
+import { useResolvedPortalContainer } from '../../providers/PortalContext.js';
 import { Container } from '../Container/index.js';
 import { CodeBlock } from '../CodeBlock/index.js';
 import { Icon as SvgImage } from '../Icon/index.js';
@@ -41,15 +42,16 @@ const FlyoutContent = styled(DialogContent).withConfig({
   theme,
   $strategy,
   $type = "default",
-  $align
+  $align,
+  $hasShadow = true
 }) => `
     ${$align === "start" ? "left" : "right"}: 0;
     max-width: 100%;
     position: ${$strategy};
     height: ${$strategy === "relative" ? "100%" : "auto"};
-    padding: 0 ${theme.click.flyout.space[$type].x}
+    padding: 0 ${theme.click.flyout.space[$type].x};
     gap: ${theme.click.flyout.space[$type].gap};
-    box-shadow: ${$align === "start" ? theme.click.flyout.shadow.reverse : theme.click.flyout.shadow.default};
+    box-shadow: ${$hasShadow === false ? "none" : theme.click.flyout.shadow[$align === "start" ? "reverse" : "default"]};
     border-${$align === "start" ? "right" : "left"}: 1px solid ${theme.click.flyout.color.stroke.default};
     background: ${theme.click.flyout.color.background.default};
 
@@ -80,10 +82,12 @@ const Content = ({
   closeOnInteractOutside = false,
   width,
   align = "end",
+  hasShadow = true,
   onInteractOutside,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(DialogPortal, { container, children: [
+  const portalContainer = useResolvedPortalContainer(container);
+  return /* @__PURE__ */ jsxs(DialogPortal, { container: portalContainer, children: [
     showOverlay && /* @__PURE__ */ jsx(DialogOverlay, { className: "DialogOverlay" }),
     /* @__PURE__ */ jsx(FlyoutContent, { $size: size, $type: type, $strategy: strategy, onInteractOutside: (e) => {
       if (!closeOnInteractOutside) {
@@ -92,20 +96,20 @@ const Content = ({
       if (typeof onInteractOutside === "function") {
         onInteractOutside(e);
       }
-    }, $width: width, $align: align, ...props, children })
+    }, $width: width, $align: align, $hasShadow: hasShadow, ...props, children })
   ] });
 };
 Content.displayName = "Flyout.Content";
 Flyout.Content = Content;
 const FlyoutElement = styled(Container).withConfig({
   componentId: "sc-1vtv6sf-2"
-})(["max-width:100%;max-width:-webkit-fill-available;max-width:fill-available;max-width:stretch;", ""], ({
+})(["max-width:100%;max-width:-webkit-fill-available;max-width:fill-available;max-width:stretch;&&{", "}"], ({
   theme,
   $type = "default"
 }) => `
-    gap: ${theme.click.flyout.space[$type].gap};
-    padding: 0 ${theme.click.flyout.space[$type].content.x};
-  `);
+      gap: ${theme.click.flyout.space[$type].gap};
+      padding: 0 ${theme.click.flyout.space[$type].content.x};
+    `);
 const Element = ({
   type,
   ...props
@@ -114,14 +118,14 @@ Element.displayName = "Flyout.Element";
 Flyout.Element = Element;
 const FlyoutHeaderContainer = styled(Container).withConfig({
   componentId: "sc-1vtv6sf-3"
-})(["", ""], ({
+})(["&&{", "}"], ({
   theme,
   $type = "default"
 }) => `
-    row-gap: ${theme.click.flyout.space[$type].content["row-gap"]};
-    column-gap: ${theme.click.flyout.space[$type].content["column-gap"]};
-    padding: ${theme.click.flyout.space[$type].y} ${theme.click.flyout.space[$type].y} 0 ${theme.click.flyout.space[$type].y} ;
-  `);
+      row-gap: ${theme.click.flyout.space[$type].content["row-gap"]};
+      column-gap: ${theme.click.flyout.space[$type].content["column-gap"]};
+      padding: ${theme.click.flyout.space[$type].y} ${theme.click.flyout.space[$type].y} 0 ${theme.click.flyout.space[$type].y};
+    `);
 const FlyoutTitle = styled(DialogTitle).withConfig({
   componentId: "sc-1vtv6sf-4"
 })(["", ""], ({
@@ -188,14 +192,14 @@ Body.displayName = "Flyout.Body";
 Flyout.Body = Body;
 const FlyoutFooter = styled(Container).withConfig({
   componentId: "sc-1vtv6sf-7"
-})(["", ""], ({
+})(["&&{", "}"], ({
   theme,
   type = "default"
 }) => `
-    row-gap: ${theme.click.flyout.space[type].content["row-gap"]};
-    column-gap: ${theme.click.flyout.space[type].content["column-gap"]};
-    padding: ${theme.click.flyout.space[type].y} ${theme.click.flyout.space[type].content.x};
-  `);
+      row-gap: ${theme.click.flyout.space[type].content["row-gap"]};
+      column-gap: ${theme.click.flyout.space[type].content["column-gap"]};
+      padding: ${theme.click.flyout.space[type].y} ${theme.click.flyout.space[type].content.x};
+    `);
 const FlyoutClose = ({
   children,
   ...props