npm - @persona/design-system - Versions diffs - 0.8.0 → 0.8.2 - Mend

@persona/design-system 0.8.0 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (577) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@persona/design-system",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
@@ -65,6 +65,7 @@
     "./components/SegmentedControl": "./dist/components/SegmentedControl/index.mjs",
     "./components/Select": "./dist/components/Select/index.mjs",
     "./components/Slider": "./dist/components/Slider/index.mjs",
+    "./components/SmartTextInput": "./dist/components/SmartTextInput/index.mjs",
     "./components/SmartTextInput/parser/method-chain/parser": "./dist/components/SmartTextInput/parser/method-chain/parser.mjs",
     "./components/SmartTextInput/parser/method-chain/types": "./dist/components/SmartTextInput/parser/method-chain/types.mjs",
     "./components/SmartTextInput/parser/smart-text/parser": "./dist/components/SmartTextInput/parser/smart-text/parser.mjs",
@@ -87,7 +88,6 @@
     "./components/Toggle": "./dist/components/Toggle/index.mjs",
     "./components/Tooltip": "./dist/components/Tooltip/index.mjs",
     "./components/VersionHistory": "./dist/components/VersionHistory/index.mjs",
-    "./components/WizardModal": "./dist/components/WizardModal/index.mjs",
     "./lib/chainTypes": "./dist/lib/chainTypes.mjs",
     "./lib/color": "./dist/lib/color.mjs",
     "./lib/comboboxHelper": "./dist/lib/comboboxHelper.mjs",
@@ -101,6 +101,7 @@
     "./lib/errorReporter": "./dist/lib/errorReporter.mjs",
     "./lib/GlobalStyles": "./dist/lib/GlobalStyles.mjs",
     "./lib/HeadlessAriaButton": "./dist/lib/HeadlessAriaButton.mjs",
+    "./lib/i18n": "./dist/lib/i18n/index.mjs",
     "./lib/jsonSchema": "./dist/lib/jsonSchema.mjs",
     "./lib/jsonSchemaType": "./dist/lib/jsonSchemaType.mjs",
     "./lib/letPointerDownReachDocument": "./dist/lib/letPointerDownReachDocument.mjs",
@@ -123,6 +124,7 @@
     "./lib/snakifyPath": "./dist/lib/snakifyPath.mjs",
     "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
     "./lib/TruncatedTextWithTooltip": "./dist/lib/TruncatedTextWithTooltip.mjs",
+    "./lib/useChain": "./dist/lib/useChain.mjs",
     "./lib/useControlled": "./dist/lib/useControlled.mjs",
     "./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
     "./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",
@@ -141,6 +143,7 @@
     "./patterns/LayoutLoadingShimmer": "./dist/patterns/LayoutLoadingShimmer/index.mjs",
     "./patterns/LayoutLoadingSpinner": "./dist/patterns/LayoutLoadingSpinner/index.mjs",
     "./patterns/PageLayout": "./dist/patterns/PageLayout/index.mjs",
+    "./patterns/WizardModal": "./dist/patterns/WizardModal/index.mjs",
     "./theme": "./dist/theme.mjs",
     "./utils/storybook": "./dist/utils/storybook.mjs",
     "./utils/testing": "./dist/utils/testing.mjs",
@@ -317,6 +320,7 @@
       "./components/SegmentedControl": "./dist/components/SegmentedControl/index.mjs",
       "./components/Select": "./dist/components/Select/index.mjs",
       "./components/Slider": "./dist/components/Slider/index.mjs",
+      "./components/SmartTextInput": "./dist/components/SmartTextInput/index.mjs",
       "./components/SmartTextInput/parser/method-chain/parser": "./dist/components/SmartTextInput/parser/method-chain/parser.mjs",
       "./components/SmartTextInput/parser/method-chain/types": "./dist/components/SmartTextInput/parser/method-chain/types.mjs",
       "./components/SmartTextInput/parser/smart-text/parser": "./dist/components/SmartTextInput/parser/smart-text/parser.mjs",
@@ -339,7 +343,6 @@
       "./components/Toggle": "./dist/components/Toggle/index.mjs",
       "./components/Tooltip": "./dist/components/Tooltip/index.mjs",
       "./components/VersionHistory": "./dist/components/VersionHistory/index.mjs",
-      "./components/WizardModal": "./dist/components/WizardModal/index.mjs",
       "./lib/chainTypes": "./dist/lib/chainTypes.mjs",
       "./lib/color": "./dist/lib/color.mjs",
       "./lib/comboboxHelper": "./dist/lib/comboboxHelper.mjs",
@@ -353,6 +356,7 @@
       "./lib/errorReporter": "./dist/lib/errorReporter.mjs",
       "./lib/GlobalStyles": "./dist/lib/GlobalStyles.mjs",
       "./lib/HeadlessAriaButton": "./dist/lib/HeadlessAriaButton.mjs",
+      "./lib/i18n": "./dist/lib/i18n/index.mjs",
       "./lib/jsonSchema": "./dist/lib/jsonSchema.mjs",
       "./lib/jsonSchemaType": "./dist/lib/jsonSchemaType.mjs",
       "./lib/letPointerDownReachDocument": "./dist/lib/letPointerDownReachDocument.mjs",
@@ -375,6 +379,7 @@
       "./lib/snakifyPath": "./dist/lib/snakifyPath.mjs",
       "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
       "./lib/TruncatedTextWithTooltip": "./dist/lib/TruncatedTextWithTooltip.mjs",
+      "./lib/useChain": "./dist/lib/useChain.mjs",
       "./lib/useControlled": "./dist/lib/useControlled.mjs",
       "./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
       "./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",
@@ -393,6 +398,7 @@
       "./patterns/LayoutLoadingShimmer": "./dist/patterns/LayoutLoadingShimmer/index.mjs",
       "./patterns/LayoutLoadingSpinner": "./dist/patterns/LayoutLoadingSpinner/index.mjs",
       "./patterns/PageLayout": "./dist/patterns/PageLayout/index.mjs",
+      "./patterns/WizardModal": "./dist/patterns/WizardModal/index.mjs",
       "./theme": "./dist/theme.mjs",
       "./utils/storybook": "./dist/utils/storybook.mjs",
       "./utils/testing": "./dist/utils/testing.mjs",
@@ -406,5 +412,8 @@
       "./package.json": "./package.json"
     },
     "registry": "https://registry.npmjs.org"
+  },
+  "inlinedDependencies": {
+    "lodash": "4.18.1"
   }
 }

package/skills/ui-authoring/COMPONENTS.md CHANGED Viewed

@@ -53,6 +53,7 @@ exists. If there is no `.mdx`, use the published type declarations
 | `SegmentedControl` | Picking one option from a compact set of mutually exclusive choices | `@persona/design-system/components/SegmentedControl` |
 | `Select` | Dropdown — picking one value from a short, known list with no search. Use `Combobox` when the list needs search | `@persona/design-system/components/Select` |
 | `Slider` | Picking a numeric value or range along a scale | `@persona/design-system/components/Slider` |
+| `SmartTextInput` | Authoring a value that mixes plain text with structured data references — `{{account.id}}` interpolation or a single `account.id` method chain, with autocomplete, syntax highlighting and schema validation. Use `Input` for plain text | `@persona/design-system/components/SmartTextInput` |
 | `Spacer` | Prefer `Stack` — leftover gap helper | `@persona/design-system/components/Spacer` |
 | `Spinner` | Showing that something is loading | `@persona/design-system/components/Spinner` |
 | `Stack` | Flex column — laying out children vertically with token spacing | `@persona/design-system/components/Stack` |
@@ -73,7 +74,6 @@ exists. If there is no `.mdx`, use the published type declarations
 | `Toggle` | Turning a setting on or off with no extra confirmation | `@persona/design-system/components/Toggle` |
 | `Tooltip` | Standalone tooltip — explaining an icon or control on hover or focus | `@persona/design-system/components/Tooltip` |
 | `VersionHistory` | Show previous versions of a file and let the user compare or restore one | `@persona/design-system/components/VersionHistory` |
-| `WizardModal` | Multi-step task behind a page overlay; Next/Confirm run `onProceed` | `@persona/design-system/components/WizardModal` |
 ## Testing

package/skills/ui-authoring/PATTERNS.md CHANGED Viewed

@@ -18,6 +18,7 @@ Which pattern to use, and for what. Patterns with a dedicated doc link to
 | LayoutLoadingSpinner | Centered 120px loading ring that fills its container. Use as the loading state for a page or embedded app when no layout-specific shimmer exists. |
 | LayoutLoadingShimmer | Filling space while content loads |
 | [Panels](../../patterns/Panels/Panels.mdx) | Use `RightPanel` when the page should stay visible. Use `Modal` when the task needs full attention. Never a custom drawer. |
+| [WizardModal](../../patterns/WizardModal/WizardModal.mdx) | A linear multi-step task behind a page overlay. |
 ## Page layouts

package/skills/ui-authoring/SKILL.md CHANGED Viewed

@@ -125,6 +125,29 @@ Plug in your router once near the root:
 both adapters only need their router's context above them. The TanStack adapter requires
 React 18+ (TanStack Router's peer range), while PDS itself still supports React 17.
+## Localization
+Built-in copy in the table chrome (DataTable empty states and checkbox labels, `Pagination`,
+the column configuration gear, `ControlBar` saved-view tabs, Filters V2 pills, picker, operators,
+rules builder and value controls) is English by default and translatable through `PDSProvider`:
+```tsx
+<PDSProvider strings={translatedStrings} locale='fr-CA'>...</PDSProvider>
+```
+- `strings` is a partial `CommonStrings` table (`@persona/design-system/lib/i18n`); omitted keys
+  keep their English defaults, and a value of the wrong kind (string vs. formatter) is ignored.
+  Persona dashboards pass `useCommonStrings()` from `@persona-id/persona-dashboard-app` straight
+  through.
+- `locale` makes table `date` / `datetime` cells and Filters V2 date values use the locale's
+  medium `Intl` format ("6 oct. 2026, 16 h 39" for fr-CA). Omitted or `en-US` keeps the
+  historical "Oct 6, 2026 4:39 PM". `format: { type: 'datetime', config: { showTimeZone: true } }`
+  appends the localized zone name ("EDT" / "HAE").
+- In new components, read copy with `usePDSStrings()` and the locale with `usePDSLocale()`
+  rather than hardcoding English; add the key and its English default to `CommonStrings`.
+- `formatDate`, `formatDateTime` and `formatTimeZoneName` from the same module format Luxon
+  values the same way outside the table.
 ## Testing
 - Prefer `getByRole`, `getByLabelText`, `getByText` over `getByTestId`.

package/dist/DatePicker-C7z1yodK.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"DatePicker-C7z1yodK.mjs","names":["useLocale","OpenButton","Popover","Card","RangeCalendarPresets","Popover"],"sources":["../components/DatePicker/Calendar/CalendarBase.tsx","../components/DatePicker/Calendar/CalendarCell.tsx","../components/DatePicker/Calendar/CalendarGrid.tsx","../components/DatePicker/common.ts","../components/DatePicker/Calendar/Calendar.tsx","../components/DatePicker/DateField.tsx","../components/DatePicker/DatePicker.tsx","../components/DatePicker/Calendar/RangeCalendarPresets.tsx","../components/DatePicker/time-range.ts","../components/DatePicker/Calendar/RangeCalendar.tsx","../components/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useButton } from 'react-aria';\nimport styled from 'styled-components';\n\nimport { Spacing, Typography } from '@persona/design-tokens';\nimport { IconButton } from 'design-system/components/Button';\nimport type { IconButtonProps } from 'design-system/components/Button/IconButton';\n\nexport const CalendarContainer = styled.div`\n display: inline-block;\n`;\n\nexport const CalendarHeader = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: ${Spacing[2]};\n`;\n\nexport const CalendarHeading = styled.div`\n ${Typography.TextLargeBold};\n flex: 1;\n text-align: center;\n`;\n\nconst StyledCalendarButton = styled(IconButton)`\n width: 32px;\n height: 32px;\n`;\n\nexport const CalendarButton = (props: IconButtonProps) => {\n const ref = useRef();\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { buttonProps } = useButton(props, ref);\n\n return (\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n <StyledCalendarButton {...buttonProps} className={props.className} ref={ref}>\n {props.children}\n </StyledCalendarButton>\n );\n};\n","import { type CalendarDate, type DateValue, isSameDay, isSameMonth } from '@internationalized/date';\nimport { useRef } from 'react';\nimport { useCalendarCell } from 'react-aria';\nimport type { CalendarState, RangeCalendarState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Typography } from '@persona/design-tokens';\nimport { withAlpha } from 'design-system/lib/color';\nimport { semanticColor, semanticTokens } from 'design-system/lib/semanticColor';\n\nconst CalendarCellContainer = styled.td`\n text-align: center;\n width: 38px;\n height: 38px;\n padding: 0px;\n`;\n\ninterface CalendarCellButtonProps {\n isSelected?: boolean;\n isSelectionStart?: boolean;\n isSelectionEnd?: boolean;\n isInvalid?: boolean;\n isDisabled?: boolean;\n}\n\nconst CalendarCellButton = styled.button<CalendarCellButtonProps>`\n ${Typography.TextMedium};\n border-style: none;\n padding: 0;\n background: none;\n width: 100%;\n height: 100%;\n cursor: pointer;\n position: relative;\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n\n ${({ isSelected, theme }) => {\n if (!isSelected) {\n return null;\n }\n const tokens = semanticTokens(theme);\n return css`\n background: ${tokens ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25) : Color.CorePurple100};\n ${tokens ? `color: ${tokens.FgPrimary};` : ''}\n `;\n }}\n\n ${({ isSelectionStart, theme }) =>\n isSelectionStart &&\n css`\n background: ${semanticColor(theme, 'ActionPrimary', Color.BackgroundButtonPrimary)};\n color: ${semanticColor(theme, 'FgInverse', Color.TextInverse)};\n border-top-left-radius: ${BorderRadius.Sm};\n border-bottom-left-radius: ${BorderRadius.Sm};\n `}\n\n ${({ isSelectionEnd, theme }) =>\n isSelectionEnd &&\n css`\n background: ${semanticColor(theme, 'ActionPrimary', Color.BackgroundButtonPrimary)};\n color: ${semanticColor(theme, 'FgInverse', Color.TextInverse)};\n border-top-right-radius: ${BorderRadius.Sm};\n border-bottom-right-radius: ${BorderRadius.Sm};\n `}\n\n ${({ isDisabled, theme }) =>\n isDisabled &&\n css`\n color: ${semanticColor(theme, 'FgDisabled', Color.CoreSlate300)};\n `}\n\n ${({ isInvalid, theme }) =>\n isInvalid &&\n css`\n background: ${semanticColor(theme, 'FeedbackDanger4', Color.BackgroundButtonDanger)};\n color: ${semanticColor(theme, 'FgInverseStatic', Color.TextInverse)};\n `}\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => semanticColor(theme, 'BorderFocus', Color.BorderFocus)};\n outline-offset: -2px;\n box-shadow: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.PrimaryWhite)} 0px 0px 0px 3px inset;\n z-index: 1;\n }\n`;\n\ninterface CalendarCellProps {\n state: CalendarState | RangeCalendarState;\n date: CalendarDate;\n currentMonth: DateValue;\n}\n\nconst CalendarCell = ({ state, date, currentMonth }: CalendarCellProps) => {\n const ref = useRef();\n const { cellProps, buttonProps, isSelected, isInvalid, isDisabled, formattedDate } =\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n useCalendarCell({ date }, state, ref);\n\n const highlightedRange = 'highlightedRange' in state && state.highlightedRange;\n\n const isOutsideMonth = !isSameMonth(currentMonth, date);\n const isSelectionStart = highlightedRange ? isSameDay(date, highlightedRange.start) : isSelected;\n const isSelectionEnd = highlightedRange ? isSameDay(date, highlightedRange.end) : isSelected;\n\n return (\n <CalendarCellContainer {...cellProps}>\n <CalendarCellButton\n {...buttonProps}\n hidden={isOutsideMonth}\n isSelected={isSelected}\n isSelectionStart={isSelectionStart}\n isSelectionEnd={isSelectionEnd}\n isInvalid={isInvalid}\n isDisabled={isDisabled}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={ref}\n >\n {formattedDate}\n </CalendarCellButton>\n </CalendarCellContainer>\n );\n};\n\nexport default CalendarCell;\n","import { type DateDuration, endOfMonth, getWeeksInMonth } from '@internationalized/date';\nimport { useCalendarGrid, useLocale } from 'react-aria';\nimport type { CalendarState, RangeCalendarState } from 'react-stately';\nimport styled from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nimport CalendarCell from './CalendarCell';\n\nconst CalendarGridContainer = styled.table`\n width: 266px;\n border-spacing: 0px;\n border-collapse: collapse;\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => semanticColor(theme, 'BorderFocus', Color.BorderFocus)};\n outline-offset: 1px;\n }\n`;\n\nconst CalendarGridDayHeader = styled.th`\n ${Typography.TextMedium};\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.TextSecondary)};\n`;\n\ninterface CalendarGridProps {\n state: CalendarState | RangeCalendarState;\n offset?: DateDuration;\n skipFromTabOrder?: boolean;\n}\n\nconst CalendarGrid = ({ state, offset = {}, skipFromTabOrder = false }: CalendarGridProps) => {\n const { locale } = useLocale();\n const startDate = state.visibleRange.start.add(offset);\n const endDate = endOfMonth(startDate);\n\n const { gridProps, headerProps, weekDays } = useCalendarGrid(\n {\n startDate,\n endDate,\n },\n state,\n );\n\n const weeksInMonth = getWeeksInMonth(startDate, locale);\n\n // Remove second calendar grid from tab order - use arrow keys to navigate between months\n const modifiedGridProps = skipFromTabOrder ? { ...gridProps, tabIndex: -1 } : gridProps;\n\n return (\n <CalendarGridContainer {...modifiedGridProps}>\n <thead {...headerProps}>\n <tr>\n {weekDays.map((day, index) => (\n <CalendarGridDayHeader key={index}>{day}</CalendarGridDayHeader>\n ))}\n </tr>\n </thead>\n <tbody>\n {[...new Array(weeksInMonth).keys()].map((weekIndex) => (\n <tr key={weekIndex}>\n {state\n .getDatesInWeek(weekIndex, startDate)\n .map((date, i) =>\n date ? (\n <CalendarCell key={i} state={state} date={date} currentMonth={startDate} />\n ) : (\n <td key={i} />\n ),\n )}\n </tr>\n ))}\n </tbody>\n </CalendarGridContainer>\n );\n};\n\nexport default CalendarGrid;\n","import { GregorianCalendar } from '@internationalized/date';\n\nexport const createCalendar = () => new GregorianCalendar();\n","import type { Ref } from 'react';\nimport { type AriaCalendarProps, type DateValue, useCalendar, useLocale } from 'react-aria';\nimport { useCalendarState } from 'react-stately';\n\nimport { ArrowLeftIcon, ArrowRightIcon } from '@persona/icons';\nimport {\n CalendarButton,\n CalendarContainer,\n CalendarHeader,\n CalendarHeading,\n} from 'design-system/components/DatePicker/Calendar/CalendarBase';\nimport CalendarGrid from 'design-system/components/DatePicker/Calendar/CalendarGrid';\nimport { createCalendar } from 'design-system/components/DatePicker/common';\n\ninterface CalendarProps extends AriaCalendarProps<DateValue> {\n calendarRef?: Ref<HTMLDivElement>;\n}\n\nconst Calendar = (props: CalendarProps) => {\n const { locale } = useLocale();\n const state = useCalendarState({ ...props, locale, createCalendar });\n const { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(props, state);\n\n return (\n <CalendarContainer {...calendarProps} ref={props.calendarRef}>\n <CalendarHeader>\n <CalendarButton {...prevButtonProps}>\n <ArrowLeftIcon />\n </CalendarButton>\n <CalendarHeading>{title}</CalendarHeading>\n <CalendarButton {...nextButtonProps}>\n <ArrowRightIcon />\n </CalendarButton>\n </CalendarHeader>\n <CalendarGrid state={state} />\n </CalendarContainer>\n );\n};\n\nexport default Calendar;\n","import type { DateValue } from '@internationalized/date';\nimport { type AriaDateFieldProps, useDateField, useDateSegment } from '@react-aria/datepicker';\nimport { useLocale } from '@react-aria/i18n';\nimport { mergeRefs } from '@react-aria/utils';\nimport {\n type DateFieldState,\n type DateSegment as DateSegmentObj,\n type SegmentType,\n useDateFieldState,\n} from '@react-stately/datepicker';\nimport { forwardRef, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { createCalendar } from 'design-system/components/DatePicker/common';\nimport { withAlpha } from 'design-system/lib/color';\nimport { isFocused, isFocusedVisible, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly, semanticTokens } from 'design-system/lib/semanticColor';\nimport { focusWithinOutline } from 'design-system/mixins/focus';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\n\ntype DateSegmentContainerProps = { $isComma?: boolean; $isTimezone?: boolean } & PseudoClassProps;\nconst DateSegmentContainer = styled.div<DateSegmentContainerProps>`\n font-variant-numeric: tabular-nums;\n box-sizing: content-box;\n text-align: end;\n\n ${isFocused} {\n outline: 2px solid ${({ theme }) => semanticColor(theme, 'BorderFocus', Color.BorderFocus)};\n outline-offset: 1px;\n background-color: ${({ theme }) => {\n const tokens = semanticTokens(theme);\n return tokens ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25) : Color.CorePurple200;\n }};\n ${semanticOnly((tokens) => `color: ${tokens.FgAccent};`)}\n }\n\n ${({ $isComma, $isTimezone }) =>\n ($isComma || $isTimezone) &&\n css`\n margin-left: 0.25ch;\n margin-right: 0.25ch;\n `}\n\n ${({ $isTimezone }) =>\n $isTimezone &&\n css`\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.TextSecondary)};\n pointer-events: none;\n\n &:focus {\n outline: none;\n background-color: transparent;\n }\n `}\n`;\n\ntype DateSegmentPlaceholderProps = { isPlaceholder?: boolean; type: SegmentType };\nconst DateSegmentPlaceholder = styled.span<DateSegmentPlaceholderProps>`\n display: block;\n width: 100%;\n pointer-events: none;\n\n &:focus {\n outline: none;\n }\n\n ${({ isPlaceholder }) =>\n isPlaceholder\n ? css`\n height: 100%;\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.tertiary)};\n `\n : css`\n visibility: hidden;\n height: 0;\n `}\n ${({ type }) =>\n type === 'literal' &&\n css`\n padding-left: ${Spacing[1]};\n padding-right: ${Spacing[1]};\n `}\n ${({ type, isPlaceholder }) =>\n type === 'month' &&\n isPlaceholder &&\n css`\n width: 3ch;\n `}\n`;\n\ninterface DateSegmentProps {\n segment: DateSegmentObj;\n state: DateFieldState;\n}\n\nfunction DateSegment({ segment, state }: DateSegmentProps) {\n const ref = useRef();\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { segmentProps } = useDateSegment(segment, state, ref);\n\n let minWidth: string;\n\n switch (segment.type) {\n case 'dayPeriod': {\n minWidth = '2.75ch';\n break;\n }\n default: {\n minWidth = `${segment.maxValue != null && String(segment.maxValue).length + 0.25}ch`;\n break;\n }\n }\n\n const isComma = segment.type === 'literal' && segment.text === ', ';\n const isTimezone = segment.type === 'timeZoneName';\n\n return (\n <DateSegmentContainer\n {...segmentProps}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={ref}\n style={{\n ...segmentProps.style,\n minWidth,\n }}\n $isComma={isComma}\n $isTimezone={isTimezone}\n {...(isTimezone && { tabIndex: -1, role: 'presentation' })}\n >\n {/* Always reserve space for the placeholder, to prevent layout shift when editing. */}\n {segment.placeholder && (\n <DateSegmentPlaceholder\n aria-hidden='true'\n isPlaceholder={segment.isPlaceholder}\n type={segment.type}\n >\n {segment.placeholder}\n </DateSegmentPlaceholder>\n )}\n {segment.isPlaceholder ? '' : segment.text}\n </DateSegmentContainer>\n );\n}\n\nconst InputBox = styled.div<InputMixinProps & { $inputPosition: 'start' | 'end' }>`\n ${inputMixin};\n display: flex;\n padding-left: ${Spacing[2]};\n padding-right: ${Spacing[2]};\n line-height: 1;\n position: relative;\n\n &${isFocusedVisible}${isNotDisabled} {\n position: relative;\n z-index: 1;\n }\n\n ${focusWithinOutline}\n\n ${({ $inputPosition }) => {\n switch ($inputPosition) {\n case 'start': {\n return css`\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n `;\n }\n case 'end': {\n return css`\n margin-left: -1px;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n `;\n }\n }\n }}\n`;\n\ninterface DateFieldProps extends AriaDateFieldProps<DateValue> {\n inputPosition?: 'start' | 'end';\n focused?: boolean;\n readOnly?: boolean;\n value?: DateValue;\n disabled?: boolean;\n size?: InputSizes;\n style?: React.CSSProperties;\n dateFieldProps?: {\n style?: React.CSSProperties;\n };\n hasError?: boolean;\n}\n\nexport const DateField = forwardRef<HTMLDivElement, DateFieldProps>(function DateField(\n props: DateFieldProps,\n forwardedRef,\n) {\n const { locale } = useLocale();\n const state = useDateFieldState({\n ...props,\n locale,\n createCalendar,\n });\n\n const ref = useRef<HTMLDivElement>();\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { fieldProps } = useDateField(props, state, ref);\n\n return (\n <InputBox\n {...fieldProps}\n {...(props.dateFieldProps || {})}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={mergeRefs<HTMLDivElement>(ref, forwardedRef)}\n focused={props.focused}\n disabled={props.disabled}\n aria-label={props['aria-label']}\n $size={props.size ?? 'md'}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n $inputPosition={props.inputPosition}\n hasError={props.hasError}\n >\n {state.segments.map((segment, i) => (\n <DateSegment key={i} segment={segment} state={state} />\n ))}\n </InputBox>\n );\n});\n\nexport default DateField;\n","import type { DateValue } from '@internationalized/date';\nimport type { DatePickerProps as DatePickerBase } from '@react-types/datepicker';\nimport { type RefObject, useCallback, useRef } from 'react';\nimport { mergeProps, useButton, useDatePicker, useFocusWithin, VisuallyHidden } from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport Calendar from 'design-system/components/DatePicker/Calendar/Calendar';\nimport DateField from 'design-system/components/DatePicker/DateField';\nimport Popover from 'design-system/components/Popover';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport type { InputSizes } from 'design-system/mixins/input';\n\nexport interface DatePickerProps extends DatePickerBase<DateValue> {\n id?: string;\n dateFieldProps?: {\n style?: React.CSSProperties;\n };\n disabled?: boolean;\n size?: InputSizes;\n useModalZIndex?: boolean;\n}\n\nconst OpenButton = ({ calendarRef }: { calendarRef: RefObject<HTMLElement> }) => {\n const openCalBtnRef = useRef<HTMLButtonElement>(null);\n const { buttonProps } = useButton(\n {\n onPress: () => {\n if (calendarRef.current) {\n (\n calendarRef.current.querySelector('button[aria-label=\"Previous\"]') as HTMLButtonElement\n ).focus();\n }\n },\n },\n openCalBtnRef,\n );\n\n return <button {...buttonProps} ref={openCalBtnRef} aria-label='Open calendar' />;\n};\n\nexport const DatePicker = (props: DatePickerProps) => {\n const state = useDatePickerState(props);\n const ref = useRef<HTMLDivElement>(null);\n const fieldRef = useRef<HTMLDivElement>(null);\n const { groupProps, fieldProps, calendarProps } = useDatePicker(props, state, ref);\n const calendarRef = useRef<HTMLDivElement>(null);\n // A ref, not state: the close sequence focuses the field before a state update would commit.\n const isClosingRef = useRef(false);\n\n const { focusWithinProps } = useFocusWithin({\n onFocusWithin: () => {\n if (!state.isOpen && !isClosingRef.current) {\n state.setOpen(true);\n }\n },\n onBlurWithin: (e) => {\n // Close calendar if next target is not within the calendar\n if (e.relatedTarget && !calendarRef?.current?.contains(e.relatedTarget) && state.isOpen) {\n state.setOpen(false);\n }\n },\n });\n\n const handleOutsideClick = (e: Event) => {\n const target = e.target as Node;\n // Don't close if clicking on the date input itself\n if (ref.current?.contains(target)) {\n return;\n }\n if (state.isOpen) {\n state.setOpen(false);\n }\n };\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === 'Enter' && !state.isOpen) {\n event.preventDefault();\n state.setOpen(true);\n }\n },\n [state],\n );\n\n return (\n <div style={{ display: 'flex', flexDirection: 'column' }}>\n <Popover\n open={state.isOpen}\n modal={false}\n contentProps={{\n style: { zIndex: props.useModalZIndex ? Z_INDICES.modalDropdown : Z_INDICES.dropdown },\n align: 'start',\n 'aria-modal': true,\n onInteractOutside: handleOutsideClick,\n onEscapeKeyDown: () => {\n state.setOpen(false);\n },\n onCloseAutoFocus: (e: Event) => {\n // Prevent Radix's default focus restoration\n e.preventDefault();\n isClosingRef.current = true;\n\n // Manually restore focus to the date field\n if (fieldRef.current) {\n const firstEditableSegment = fieldRef.current.querySelector('[tabindex=\"0\"]');\n if (firstEditableSegment instanceof HTMLElement) {\n firstEditableSegment.focus();\n }\n }\n\n // Reset flag after focus is done\n requestAnimationFrame(() => {\n isClosingRef.current = false;\n });\n },\n noPadding: true,\n }}\n >\n <Popover.Trigger asChild>\n <div\n {...mergeProps(groupProps, focusWithinProps)}\n ref={ref}\n style={{ display: 'flex', position: 'relative' }}\n >\n <DateField\n ref={fieldRef}\n id={props.id}\n dateFieldProps={props.dateFieldProps}\n disabled={props.disabled}\n size={props.size}\n {...mergeProps(fieldProps, { onKeyDown: handleKeyDown })}\n value={fieldProps.value ?? undefined}\n />\n <VisuallyHidden>\n <OpenButton calendarRef={calendarRef} />\n </VisuallyHidden>\n </div>\n </Popover.Trigger>\n <Calendar\n {...{ ...calendarProps, autoFocus: undefined }}\n calendarRef={calendarRef}\n id='calendar-popover'\n />\n </Popover>\n </div>\n );\n};\n\nexport default DatePicker;\n","import {\n type CalendarDate,\n type DateValue,\n endOfMonth,\n endOfYear,\n startOfMonth,\n startOfYear,\n today,\n} from '@internationalized/date';\nimport type { RangeValue } from '@react-types/shared';\nimport { Settings } from 'luxon';\nimport { memo, useRef } from 'react';\nimport { mergeProps, useButton } from 'react-aria';\nimport type { RangeCalendarState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport type { DateFilterPreset } from '@persona/design-system/lib/date-filter';\nimport { Color } from '@persona/design-tokens';\nimport { MenuItem, MenuList } from 'design-system/components/Menu';\nimport { isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\ninterface DateRangePreset {\n id: DateFilterPreset;\n label: string;\n range: RangeValue<CalendarDate>;\n}\n\n/** The preset windows the picker offers; the codec resolves the same ids on read. */\nexport const getDefaultPresets = (tz: string): DateRangePreset[] => {\n const now = today(tz);\n return [\n {\n id: 'last_7_days',\n label: 'Last 7 days',\n range: {\n start: now.subtract({ days: 7 }),\n end: now,\n },\n },\n {\n id: 'last_14_days',\n label: 'Last 14 days',\n range: {\n start: now.subtract({ days: 14 }),\n end: now,\n },\n },\n {\n id: 'last_30_days',\n label: 'Last 30 days',\n range: {\n start: now.subtract({ days: 30 }),\n end: now,\n },\n },\n {\n id: 'this_month',\n label: 'This month',\n range: {\n start: startOfMonth(now),\n // Effectively, this should always be today, since we can't look forward\n end: now,\n },\n },\n {\n id: 'last_month',\n label: 'Last month',\n range: {\n start: startOfMonth(now.subtract({ months: 1 })),\n end: endOfMonth(now.subtract({ months: 1 })),\n },\n },\n {\n id: 'this_year',\n label: 'This year',\n range: {\n start: startOfYear(now),\n end: now,\n },\n },\n {\n id: 'last_year',\n label: 'Last year',\n range: {\n start: startOfYear(now.subtract({ years: 1 })),\n end: endOfYear(now.subtract({ years: 1 })),\n },\n },\n ];\n};\n\n/**\n * Compare two date values by year/month/day only, ignoring time components.\n */\nconst datesMatchByDay = (a: CalendarDate, b: DateValue): boolean =>\n a.year === b.year && a.month === b.month && a.day === b.day;\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\ninterface PresetButtonProps {\n state: RangeCalendarState;\n preset: DateRangePreset;\n isSelected: boolean;\n setDateMode: (mode: 'start' | 'end' | null) => void;\n onPresetSelect?: (preset: DateFilterPreset, commit: () => void) => void;\n commitRange: (value: RangeValue<DateValue>) => void;\n}\n\nconst StyledPresetButton = styled(MenuItem)`\n ${({ selected }) =>\n !selected &&\n css`\n &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n background-color: transparent;\n }\n `}\n\n &:focus-visible {\n // MenuItems default to outline: none, so we need to override it here.\n outline: 2px solid ${({ theme }) => semanticColor(theme, 'BorderFocus', Color.BorderFocus)} !important;\n outline-offset: 1px;\n }\n`;\n\ninterface DateRangePickerPresetsProps {\n presetsFn?: (tz: string) => DateRangePreset[];\n state: RangeCalendarState;\n setDateMode: (mode: 'start' | 'end' | null) => void;\n onPresetSelect?: (preset: DateFilterPreset, commit: () => void) => void;\n selectedPreset?: DateFilterPreset | null;\n commitRange: (value: RangeValue<DateValue>) => void;\n}\n\nconst PresetButton = ({\n commitRange,\n state,\n preset,\n isSelected,\n setDateMode,\n onPresetSelect,\n ...props\n}: PresetButtonProps) => {\n const ref = useRef<HTMLDivElement>();\n const { buttonProps } = useButton(\n {\n onPress: () => {\n const commit = () => commitRange(preset.range);\n\n if (onPresetSelect) {\n onPresetSelect(preset.id, commit);\n } else {\n commit();\n }\n setDateMode(null);\n },\n },\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref,\n );\n\n // Strip aria-current from useButton's props so it doesn't override MenuItem's.\n const { 'aria-current': _ariaCurrent, ...mergedProps } = mergeProps(props, buttonProps);\n\n return (\n <StyledPresetButton\n selected={isSelected}\n {...mergedProps}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={ref}\n >\n {preset.label}\n </StyledPresetButton>\n );\n};\n\nconst DateRangePickerPresets = ({\n presetsFn = getDefaultPresets,\n commitRange,\n state,\n setDateMode,\n onPresetSelect,\n selectedPreset,\n ...props\n}: DateRangePickerPresetsProps) => {\n // The reason that we need to do this at render time is because the default timezone for moment is set after\n // the current User's timezone is loaded. Thus we woudln't be getting the right timezone unless if we defer getting\n // the timezone.\n const presets = presetsFn(Settings.defaultZone.name);\n\n // First match wins — prevents multiple presets appearing selected when ranges overlap.\n const { value } = state;\n const selectedPresetIndex = value\n ? presets.findIndex(\n (preset) =>\n datesMatchByDay(preset.range.start, value.start) &&\n datesMatchByDay(preset.range.end, value.end),\n )\n : -1;\n\n // `undefined` falls back to matching on dates; `null` is an explicit \"no preset\".\n const infersSelection = typeof selectedPreset === 'undefined';\n\n return (\n <Container {...props}>\n <MenuList aria-label='Date range presets'>\n {presets.map((preset, i) => (\n <PresetButton\n key={i}\n preset={preset}\n commitRange={commitRange}\n state={state}\n setDateMode={setDateMode}\n onPresetSelect={onPresetSelect}\n isSelected={infersSelection ? i === selectedPresetIndex : preset.id === selectedPreset}\n />\n ))}\n </MenuList>\n </Container>\n );\n};\n\n// Skips re-renders driven by calendar state the preset list does not read —\n// focus and hover updates fire on every pointer move during range selection.\nconst arePropsEqual = (\n prevProps: DateRangePickerPresetsProps,\n nextProps: DateRangePickerPresetsProps,\n) => {\n if (\n prevProps.selectedPreset !== nextProps.selectedPreset ||\n prevProps.onPresetSelect !== nextProps.onPresetSelect ||\n prevProps.commitRange !== nextProps.commitRange ||\n prevProps.setDateMode !== nextProps.setDateMode ||\n prevProps.presetsFn !== nextProps.presetsFn\n ) {\n return false;\n }\n\n const prevValue = prevProps.state.value;\n const nextValue = nextProps.state.value;\n\n if (!prevValue && !nextValue) {\n return true;\n }\n if (!prevValue || !nextValue) {\n return false;\n }\n\n return (\n prevValue.start.compare(nextValue.start) === 0 && prevValue.end.compare(nextValue.end) === 0\n );\n};\n\nexport default memo(DateRangePickerPresets, arePropsEqual);\n","import { type CalendarDateTime, now, toCalendarDateTime } from '@internationalized/date';\nimport { Settings } from 'luxon';\n\nconst earliest = (a: CalendarDateTime, b: CalendarDateTime) => (a.compare(b) <= 0 ? a : b);\n\nexport const presetEnd = (end: CalendarDateTime) =>\n earliest(\n end.set({ hour: 23, minute: 59, second: 59, millisecond: 999 }),\n toCalendarDateTime(now(Settings.defaultZone.name)).set({ second: 0, millisecond: 0 }),\n );\n","import {\n type CalendarDate,\n type DateValue,\n toCalendarDateTime,\n toZoned,\n} from '@internationalized/date';\nimport type { RangeValue } from '@react-types/shared';\nimport { range } from 'lodash-es';\nimport { Settings } from 'luxon';\nimport { type Ref, useCallback, useEffect, useRef } from 'react';\nimport {\n type DateRange,\n type RangeCalendarProps as RangeCalendarBaseProps,\n useDateFormatter,\n useLocale,\n useRangeCalendar,\n VisuallyHidden,\n} from 'react-aria';\nimport { type RangeCalendarState, useRangeCalendarState } from 'react-stately';\nimport styled from 'styled-components';\n\nimport type { DateFilterPreset } from '@persona/design-system/lib/date-filter';\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { ArrowLeftIcon, ArrowRightIcon } from '@persona/icons';\nimport Card from 'design-system/components/Card';\nimport {\n CalendarButton,\n CalendarContainer,\n CalendarHeader,\n CalendarHeading,\n} from 'design-system/components/DatePicker/Calendar/CalendarBase';\nimport CalendarGrid from 'design-system/components/DatePicker/Calendar/CalendarGrid';\nimport RangeCalendarPresets from 'design-system/components/DatePicker/Calendar/RangeCalendarPresets';\nimport { createCalendar } from 'design-system/components/DatePicker/common';\nimport { presetEnd } from 'design-system/components/DatePicker/time-range';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nconst RangeCalendarHeader = styled(CalendarHeader)`\n gap: ${Spacing[5]};\n`;\n\nconst CalendarHeaderMonth = styled.div`\n display: grid;\n grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);\n grid-template-areas: 'prev title next';\n width: 266px;\n align-items: center;\n`;\n\nconst CalendarGrids = styled.div`\n display: flex;\n gap: ${Spacing[5]};\n align-items: start;\n`;\n\nconst PrevButton = styled(CalendarButton)`\n grid-area: prev;\n justify-self: start;\n border-radius: ${BorderRadius.Sm};\n`;\n\nconst NextButton = styled(CalendarButton)`\n grid-area: next;\n justify-self: end;\n border-radius: ${BorderRadius.Sm};\n`;\n\nconst RangeCalendarHeading = styled(CalendarHeading)`\n grid-area: title;\n`;\n\nconst RangeCalendarContainer = styled.div`\n display: flex;\n`;\n\nconst PresetsContainer = styled(Card.Body)`\n border-right: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', Color.BorderHairline)};\n`;\n\nexport interface RangeCalendarProps extends RangeCalendarBaseProps<DateValue> {\n minDate?: RangeCalendarBaseProps<DateValue>['minValue'];\n maxDate?: RangeCalendarBaseProps<DateValue>['maxValue'];\n calendarRef?: Ref<HTMLDivElement>;\n hidePresets?: boolean;\n visibleMonths?: 1 | 2;\n onSelectDate?: (d: CalendarDate) => void;\n setDateMode: (mode: 'start' | 'end' | null) => void;\n onPresetSelect?: (preset: DateFilterPreset, commit: () => void) => void;\n selectedPreset?: DateFilterPreset | null;\n /**\n * From setValue of DateRangePicker\n */\n setValue: (value: DateRange | null) => void;\n granularity: 'day' | 'hour' | 'minute' | 'second';\n}\n\nconst hasTimeComponent = (date: DateValue) => 'hour' in date;\n\nconst RangeCalendar = ({\n calendarRef,\n onSelectDate,\n minDate,\n maxDate,\n hidePresets,\n visibleMonths = 2,\n setDateMode,\n onPresetSelect,\n selectedPreset,\n setValue,\n granularity,\n ...props\n}: RangeCalendarProps) => {\n const { locale } = useLocale();\n // Must gather the TZ from the user's settings.\n const timezoneName = Settings.defaultZone.name;\n const rangeCalendarState = useRangeCalendarState({\n ...props,\n minValue: minDate,\n maxValue: maxDate,\n visibleDuration: {\n months: visibleMonths,\n },\n locale,\n createCalendar,\n });\n\n const state: RangeCalendarState = {\n ...rangeCalendarState,\n setValue: (value) => {\n if (!value || granularity === 'day') {\n rangeCalendarState.setValue(value);\n return;\n }\n\n setValue({\n start: toZoned(toCalendarDateTime(value.start), timezoneName),\n // A date-only end comes from a preset, where the end date is inclusive.\n end: toZoned(\n hasTimeComponent(value.end)\n ? toCalendarDateTime(value.end)\n : presetEnd(toCalendarDateTime(value.end)),\n timezoneName,\n ),\n });\n },\n selectDate: (date) => {\n if (onSelectDate) {\n onSelectDate(date);\n rangeCalendarState.setAnchorDate(null);\n } else {\n rangeCalendarState.selectDate(date);\n }\n },\n };\n\n // The preset list is memoized on its own props, so it can hold a `state` from\n // an earlier render. Committing through a ref keeps the write on the current\n // `onChange` chain instead of one the parent has already replaced.\n const commitRef = useRef(state.setValue);\n useEffect(() => {\n commitRef.current = state.setValue;\n });\n const commitRange = useCallback((value: RangeValue<DateValue>) => commitRef.current(value), []);\n\n const ref = useRef();\n\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(props, state, ref);\n\n const monthDateFormatter = useDateFormatter({\n month: 'long',\n year: 'numeric',\n timeZone: timezoneName,\n });\n\n const monthHeaders = range(0, visibleMonths).map((i) => {\n return (\n <CalendarHeaderMonth key={`calendar-month-${i}`}>\n {i === 0 && (\n <PrevButton {...prevButtonProps}>\n <ArrowLeftIcon />\n </PrevButton>\n )}\n <RangeCalendarHeading aria-hidden>\n {monthDateFormatter.format(\n state.visibleRange.start.add({ months: i }).toDate(timezoneName),\n )}\n </RangeCalendarHeading>\n {i === visibleMonths - 1 && (\n <NextButton {...nextButtonProps}>\n <ArrowRightIcon />\n </NextButton>\n )}\n </CalendarHeaderMonth>\n );\n });\n\n const monthGrids = range(0, visibleMonths).map((i) => {\n return (\n <CalendarGrid\n key={`calendar-grid-${i}`}\n state={state}\n offset={{ months: i }}\n skipFromTabOrder={i > 0}\n />\n );\n });\n\n return (\n <RangeCalendarContainer ref={calendarRef}>\n {!hidePresets && (\n <PresetsContainer padding={Spacing[3]}>\n <RangeCalendarPresets\n state={state}\n commitRange={commitRange}\n setDateMode={setDateMode}\n onPresetSelect={onPresetSelect}\n selectedPreset={selectedPreset}\n />\n </PresetsContainer>\n )}\n <Card.Body padding={Spacing[3]}>\n {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n <CalendarContainer {...calendarProps} ref={ref}>\n {/* Calendar header is separate from grid like this to facilitate a11y. */}\n <RangeCalendarHeader>\n <VisuallyHidden isFocusable={false}>{calendarProps['aria-label']}</VisuallyHidden>\n {monthHeaders}\n </RangeCalendarHeader>\n <CalendarGrids>{monthGrids}</CalendarGrids>\n </CalendarContainer>\n </Card.Body>\n </RangeCalendarContainer>\n );\n};\n\nexport default RangeCalendar;\n","import {\n CalendarDate,\n type CalendarDateTime,\n type DateValue,\n parseAbsolute,\n toCalendarDateTime,\n toZoned,\n} from '@internationalized/date';\nimport type { DateRangePickerProps as DateRangePickerBase } from '@react-types/datepicker';\nimport type { AriaLabelingProps, RangeValue } from '@react-types/shared';\nimport { DateTime, Settings } from 'luxon';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n mergeProps,\n useButton,\n useDateRangePicker,\n useFocusWithin,\n usePress,\n VisuallyHidden,\n} from 'react-aria';\nimport { useDateRangePickerState } from 'react-stately';\nimport styled from 'styled-components';\n\nimport type { DateFilterPreset } from '@persona/design-system/lib/date-filter';\nimport { Spacing, Typography } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\nimport RangeCalendar from 'design-system/components/DatePicker/Calendar/RangeCalendar';\nimport DateField from 'design-system/components/DatePicker/DateField';\nimport { presetEnd } from 'design-system/components/DatePicker/time-range';\nimport { FormLabel } from 'design-system/components/FormControl';\nimport { ClearButton } from 'design-system/components/Input';\nimport Popover from 'design-system/components/Popover';\nimport { isDisabled } from 'design-system/lib/pseudoClass';\nimport type { InputSizes } from 'design-system/mixins/input';\n\nconst DateRangeContainer = styled.div`\n display: inline-flex;\n flex-direction: column;\n width: 100%;\n`;\n\nconst DateRangeInputs = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst CustomFormLabel = styled(FormLabel)`\n margin-bottom: ${Spacing[2]};\n ${Typography.TextMediumBold};\n`;\n\nexport type DateRange = {\n startDate?: DateTime;\n endDate?: DateTime;\n};\n\nexport type DateFilterChange =\n | {\n source: 'preset';\n preset: DateFilterPreset;\n range: RangeValue<DateValue>;\n }\n | {\n source: 'calendar';\n range: RangeValue<DateValue> | null;\n }\n | {\n source: 'clear';\n };\n\n/**\n * `onChange` fires for controlled prop replay as well as user edits, so only the\n * code path that started a write can say what that write meant.\n */\ntype WriteOrigin =\n | { kind: 'interaction' }\n | { kind: 'sync' }\n | { kind: 'clear' }\n | { kind: 'preset'; preset: DateFilterPreset };\n\nexport interface DateRangePickerProps extends DateRangePickerBase<DateValue>, AriaLabelingProps {\n dateRange: DateRange;\n onChange: (range: RangeValue<DateValue> | null) => void;\n disabled?: boolean;\n size?: InputSizes;\n minDate?: DateValue;\n maxDate?: DateValue;\n label?: string | null;\n dataTest?: string;\n id?: string;\n hidePresets?: boolean;\n visibleMonths?: 1 | 2;\n className?: string;\n /**\n * Whether or not to display clear button\n */\n showClear?: boolean;\n /**\n * Called when the clear button is clicked/pressed\n */\n onClear?: () => void;\n /**\n * Additive notification of genuine user interactions. Never fires for\n * controlled prop synchronization. `onChange` is unaffected by this prop.\n */\n onDateFilterChange?: (change: DateFilterChange) => void;\n /** `undefined` infers from dates, `null` selects none, and an id selects that preset. */\n selectedPreset?: DateFilterPreset | null;\n /**\n * z-index of the calendar popover\n */\n calendarZIndex?: number;\n /**\n * Element that should contain the calendar portal.\n */\n portalContainer?: HTMLElement | null;\n}\n\nconst OpenButton = ({ onOpen, disabled }: { onOpen: () => void; disabled?: boolean }) => {\n const openCalBtnRef = useRef<HTMLButtonElement>(null);\n const { buttonProps } = useButton(\n {\n isDisabled: disabled,\n onPress: onOpen,\n },\n openCalBtnRef,\n );\n\n return (\n <button\n {...buttonProps}\n type='button'\n ref={openCalBtnRef}\n aria-label='Open calendar'\n tabIndex={-1}\n />\n );\n};\n\nconst ClearRangeButton = styled(ClearButton)`\n height: 16px;\n width: 16px;\n margin-left: ${Spacing[2]};\n\n &${isDisabled}, &:disabled {\n background-color: transparent;\n }\n`;\n\nconst DateRangePicker = ({\n granularity = 'day',\n hideTimeZone = true,\n className,\n calendarZIndex,\n portalContainer,\n onDateFilterChange,\n selectedPreset,\n ...props\n}: DateRangePickerProps) => {\n const writeOriginRef = useRef<WriteOrigin>({ kind: 'interaction' });\n const writeWithOrigin = useCallback((origin: WriteOrigin, commit: () => void) => {\n writeOriginRef.current = origin;\n try {\n commit();\n } finally {\n writeOriginRef.current = { kind: 'interaction' };\n }\n }, []);\n\n const state = useDateRangePickerState({\n granularity,\n hideTimeZone,\n ...props,\n onChange: (range) => {\n props.onChange(range);\n\n const origin = writeOriginRef.current;\n if (origin.kind === 'sync' || origin.kind === 'clear') {\n return;\n }\n if (origin.kind === 'preset' && range) {\n onDateFilterChange?.({ source: 'preset', preset: origin.preset, range });\n return;\n }\n onDateFilterChange?.({ source: 'calendar', range });\n },\n });\n const ref = useRef<HTMLDivElement>(null);\n const startFieldRef = useRef<HTMLDivElement>(null);\n const endFieldRef = useRef<HTMLDivElement>(null);\n const calendarRef = useRef<HTMLDivElement>(null);\n const [dateMode, setDateMode] = useState<'start' | 'end' | null>(null);\n // A ref, not state: focus can return to a field before a state update would commit.\n const isClosingRef = useRef(false);\n const { groupProps, startFieldProps, endFieldProps, calendarProps, labelProps } =\n useDateRangePicker({ granularity, hideTimeZone, ...props }, state, ref);\n\n const focusCalendar = useCallback(() => {\n requestAnimationFrame(() => {\n const firstFocusableCalendarElement = calendarRef.current?.querySelector<HTMLElement>(\n '[role=\"menuitem\"], button:not(:disabled), [tabindex=\"0\"]',\n );\n firstFocusableCalendarElement?.focus();\n });\n }, []);\n\n const openCalendar = useCallback(() => {\n if (!props.disabled && !state.isOpen && !isClosingRef.current) {\n state.setOpen(true);\n }\n }, [props.disabled, state]);\n\n const openCalendarWithFocus = useCallback(() => {\n openCalendar();\n focusCalendar();\n }, [focusCalendar, openCalendar]);\n\n const handlePresetSelect = useCallback(\n (preset: DateFilterPreset, commit: () => void) =>\n writeWithOrigin({ kind: 'preset', preset }, commit),\n [writeWithOrigin],\n );\n\n // Keyed on instants rather than the `DateTime` identities: a caller that parses\n // its range during render hands us new objects every commit, and syncing on that\n // would call `setValue` -> `onChange` -> re-render without end.\n const startInstant = props.dateRange.startDate?.isValid\n ? props.dateRange.startDate.toMillis()\n : undefined;\n const endInstant = props.dateRange.endDate?.isValid\n ? props.dateRange.endDate.toMillis()\n : undefined;\n\n useEffect(() => {\n // If not set, return early\n if (startInstant == null || endInstant == null) {\n return;\n }\n\n // Find out the real time by adjusting the date to the user's timezone\n const startDate = DateTime.fromMillis(startInstant).setZone(Settings.defaultZone);\n const endDate = DateTime.fromMillis(endInstant).setZone(Settings.defaultZone);\n\n if (!startDate.isValid || !endDate.isValid) {\n return;\n }\n\n // Months are 1-indexed, no translations need to happen to CalendarDates\n const startCalendar = state.hasTime\n ? parseAbsolute(startDate.toISO(), Settings.defaultZone.name)\n : new CalendarDate(startDate.year, startDate.month, startDate.day);\n const endCalendar = state.hasTime\n ? parseAbsolute(endDate.toISO(), Settings.defaultZone.name)\n : new CalendarDate(endDate.year, endDate.month, endDate.day);\n\n const dateRangeV2: RangeValue<DateValue> = {\n start: startCalendar,\n end: endCalendar,\n };\n\n writeWithOrigin({ kind: 'sync' }, () => state.setValue(dateRangeV2));\n }, [startInstant, endInstant, granularity]);\n\n // Auto-close overlay when a complete range is selected (e.g., from presets with time enabled)\n const prevValueRef = useRef<RangeValue<DateValue | null> | null>(state.value);\n // The first calendar click in time mode seeds a distinct end, which must not read as a finished range.\n const skipAutoCloseRef = useRef(false);\n useEffect(() => {\n const prevValue = prevValueRef.current;\n const currentValue = state.value;\n\n // Update ref for next comparison\n prevValueRef.current = currentValue;\n\n if (skipAutoCloseRef.current) {\n skipAutoCloseRef.current = false;\n return;\n }\n\n // Close overlay only if BOTH start and end changed simultaneously to DIFFERENT dates (e.g., preset selection)\n // Do not close during manual date selection where:\n // 1. Only one date changes at a time, OR\n // 2. Both dates are set to the same value (initial selection from empty state)\n // Use value comparison (.compare) instead of object identity to handle controlled component re-renders\n const startChanged =\n prevValue?.start && currentValue?.start\n ? prevValue.start.compare(currentValue.start) !== 0\n : prevValue?.start !== currentValue?.start;\n const endChanged =\n prevValue?.end && currentValue?.end\n ? prevValue.end.compare(currentValue.end) !== 0\n : prevValue?.end !== currentValue?.end;\n const datesAreDifferent =\n currentValue?.start &&\n currentValue?.end &&\n currentValue.start.compare(currentValue.end) !== 0;\n\n if (state.isOpen && startChanged && endChanged && datesAreDifferent) {\n state.setOpen(false);\n }\n }, [state.value, state.isOpen]);\n\n const { focusWithinProps: startFocusWithinProps } = useFocusWithin({\n onFocusWithin: () => {\n setDateMode('start');\n openCalendar();\n },\n });\n\n const { focusWithinProps: endFocusWithinProps } = useFocusWithin({\n onFocusWithin: () => {\n setDateMode('end');\n openCalendar();\n },\n });\n\n const { focusWithinProps: containerFocusProps } = useFocusWithin({\n onBlurWithin: () => {\n requestAnimationFrame(() => {\n // Wait for popover focus transitions to settle before closing.\n const activeElement = document.activeElement;\n const isFocusInDateRangeInput =\n activeElement instanceof Node && ref.current?.contains(activeElement);\n const isFocusInCalendar =\n activeElement instanceof Node && calendarRef.current?.contains(activeElement);\n\n if (isFocusInDateRangeInput || isFocusInCalendar) {\n return;\n }\n\n setDateMode(null);\n if (state.isOpen) {\n state.setOpen(false);\n }\n });\n },\n });\n\n const handleOutsideClick = (e: Event) => {\n const target = e.target as Node;\n // Don't close if clicking on the date inputs themselves\n if (ref.current?.contains(target)) {\n return;\n }\n\n // When there's a click outside of the containers + calendars, reset the highlighted date\n // Only close the calendar if it's open\n // Note: Radix UI's onInteractOutside already ensures the interaction is outside the popover content\n if (state.isOpen) {\n setDateMode(null);\n state.setOpen(false);\n }\n };\n\n const { pressProps: pressClearProps } = usePress({\n onPress: () => {\n writeWithOrigin({ kind: 'clear' }, () => state.setValue(null));\n\n if (props.onClear) {\n props.onClear();\n }\n onDateFilterChange?.({ source: 'clear' });\n },\n });\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n event.preventDefault(); // Prevent form submission\n openCalendarWithFocus();\n }\n },\n [openCalendarWithFocus],\n );\n\n const isValueNull = state.value && state.value.start == null && state.value.end == null;\n\n return (\n <DateRangeContainer data-test={props.dataTest} className={className}>\n {props.label && <CustomFormLabel {...labelProps}>{props.label}</CustomFormLabel>}\n <Popover\n open={state.isOpen}\n modal={false}\n portalProps={portalContainer ? { container: portalContainer } : undefined}\n contentProps={{\n align: 'start',\n 'aria-modal': true,\n 'aria-label': props['aria-label'] ?? undefined,\n onInteractOutside: handleOutsideClick,\n onOpenAutoFocus: (e: Event) => {\n // Field focus opens the calendar for editing, while Enter/Open calendar moves focus inside.\n e.preventDefault();\n },\n onEscapeKeyDown: () => {\n state.setOpen(false);\n // Restore focus to the date field for keyboard users\n if (dateMode) {\n const fieldRef = dateMode === 'start' ? startFieldRef : endFieldRef;\n const seg = fieldRef.current?.querySelector('[tabindex=\"0\"]');\n if (seg instanceof HTMLElement) {\n seg.focus();\n }\n }\n },\n onCloseAutoFocus: (e: Event) => {\n // Prevent Radix's default focus restoration — Escape handles its own above.\n e.preventDefault();\n isClosingRef.current = true;\n requestAnimationFrame(() => {\n isClosingRef.current = false;\n });\n },\n noPadding: true,\n style: { zIndex: calendarZIndex },\n zIndex: calendarZIndex,\n }}\n >\n <Popover.Trigger asChild>\n <DateRangeInputs {...mergeProps(groupProps, containerFocusProps)} ref={ref}>\n {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n <DateField\n ref={startFieldRef}\n inputPosition='start'\n focused={dateMode === 'start'}\n disabled={props.disabled}\n size={props.size}\n {...mergeProps(startFieldProps, startFocusWithinProps, { onKeyDown: handleKeyDown })}\n />\n {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n <DateField\n ref={endFieldRef}\n inputPosition='end'\n focused={dateMode === 'end'}\n disabled={props.disabled}\n size={props.size}\n {...mergeProps(endFieldProps, endFocusWithinProps, { onKeyDown: handleKeyDown })}\n />\n {props.showClear && (\n <ClearRangeButton\n {...pressClearProps}\n type='button'\n disabled={isValueNull}\n aria-label='Clear date range'\n >\n <CircleXInverseIcon />\n </ClearRangeButton>\n )}\n <VisuallyHidden>\n <OpenButton onOpen={openCalendarWithFocus} disabled={props.disabled} />\n </VisuallyHidden>\n </DateRangeInputs>\n </Popover.Trigger>\n <RangeCalendar\n {...{ ...calendarProps, autoFocus: undefined }}\n calendarRef={calendarRef}\n setDateMode={setDateMode}\n setValue={state.setValue}\n granularity={granularity}\n hidePresets={props.hidePresets}\n visibleMonths={props.visibleMonths}\n onPresetSelect={handlePresetSelect}\n selectedPreset={selectedPreset}\n onSelectDate={(dateVal) => {\n const capToMax = <T extends DateValue>(end: T): T => {\n if (!state.hasTime || !props.maxDate) {\n return end;\n }\n const max =\n 'hour' in props.maxDate\n ? toCalendarDateTime(props.maxDate)\n : toCalendarDateTime(props.maxDate).set({\n hour: 23,\n minute: 59,\n second: 59,\n millisecond: 999,\n });\n if (toCalendarDateTime(end).compare(max) <= 0) {\n return end;\n }\n return end.set({\n year: max.year,\n month: max.month,\n day: max.day,\n hour: max.hour,\n minute: max.minute,\n second: max.second,\n millisecond: max.millisecond,\n }) as T;\n };\n /**\n * Please use caution when editing the logic below.\n * It is specific to react-aria's date picker and can be brittle.\n */\n if (dateVal) {\n const calendarDate = state.hasTime ? toCalendarDateTime(dateVal) : dateVal;\n const date = state.hasTime\n ? toZoned(calendarDate as CalendarDateTime, Settings.defaultZone.name)\n : calendarDate;\n const seededEnd = state.hasTime\n ? presetEnd(calendarDate as CalendarDateTime)\n : calendarDate;\n const emptyRangeEndValue =\n seededEnd.compare(calendarDate) < 0\n ? (calendarDate as CalendarDateTime).set({\n hour: 23,\n minute: 59,\n second: 59,\n millisecond: 999,\n })\n : seededEnd;\n const emptyRangeEnd = capToMax(\n state.hasTime\n ? toZoned(emptyRangeEndValue as CalendarDateTime, Settings.defaultZone.name)\n : emptyRangeEndValue,\n );\n // Typed endpoints are unzoned; zone them so both fields render the timezone segment.\n const toViewerZone = (value: DateValue | null) =>\n state.hasTime && value ? toZoned(value, Settings.defaultZone.name) : value;\n const start = toViewerZone(state.value.start);\n const end = toViewerZone(state.value.end);\n\n if (dateMode === 'start') {\n // Handle a case where we've deleted both dates\n if (end == null && start == null) {\n skipAutoCloseRef.current = true;\n state.setValue({\n start: date,\n end: emptyRangeEnd,\n });\n }\n // If end becomes the start\n else if (end && date.compare(end) > 0) {\n state.setValue({\n start: end,\n end: capToMax(end.set(dateVal)), // Preserve time\n });\n } else {\n state.setValue({\n // if start is not set, set it to the date or date + time value, otherwise set the dateVal to preserve time\n start: start == null ? date : start.set(dateVal),\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n\n end,\n });\n }\n setDateMode('end');\n } else {\n // Handle a case where we've deleted both dates\n if (end == null && start == null) {\n state.setValue({\n start: date,\n end: emptyRangeEnd,\n });\n }\n // If start becomes the end\n else if (start && date.compare(start) < 0) {\n state.setValue({\n start: start.set(dateVal),\n end: start,\n });\n } else {\n state.setValue({\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n start,\n // if end is not set, set it to the date or date + time value, otherwise set the dateVal to preserve time\n end: capToMax(end == null ? date : end.set(dateVal)),\n });\n }\n // Close popover and keep focus on end field\n state.setOpen(false);\n }\n }\n }}\n minDate={props.minDate}\n maxDate={props.maxDate}\n />\n </Popover>\n </DateRangeContainer>\n );\n};\n\nexport default DateRangePicker;\n"],"mappings":"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"}

package/dist/Pagination-Co9CfyFQ.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Pagination-Co9CfyFQ.mjs","names":[],"sources":["../components/Pagination/constants.ts","../components/Pagination/PageSelector.tsx","../components/Pagination/PageSizeSelector.tsx","../components/Pagination/Pagination.tsx","../components/Pagination/index.ts"],"sourcesContent":["export const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 300];\nexport const MIN_PAGE_SIZE = 10;\n","import { debounce } from 'lodash-es';\nimport { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport Button from '@persona/design-system/components/Button';\nimport { Input } from '@persona/design-system/components/Input';\nimport { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nimport type { PaginationParams } from './types';\n\n// After a certain limit, it no longer makes sense for someone\n// to jump to the last page. Deep paging has performance limitations.\nexport const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;\n\nconst PageSelectorStack = styled(HStack).attrs({ justify: 'flex-end' })`\n padding: ${Spacing[2]};\n`;\n\nexport const PageInput = styled(HStack).attrs({ align: 'center' })`\n white-space: nowrap;\n`;\n\ninterface PageSelectorProps {\n paginationParams: PaginationParams;\n handlePageLinkClick: (pageNumber: number) => void;\n isLoading?: boolean;\n /**\n * Called with the new page number after the page changes (next, prev, or\n * typed input). Lets the consumer react to page changes -- e.g. scroll the\n * page back to the top.\n */\n onPageChange?: (pageNumber: number) => void;\n}\n\nexport default function PageSelector({\n paginationParams,\n handlePageLinkClick,\n isLoading,\n onPageChange,\n}: PageSelectorProps) {\n const {\n 'current-page': currentPage,\n 'total-pages': totalPages,\n 'lower-bound': lowerBound,\n } = paginationParams ?? {};\n const [selectedPage, setSelectedPage] = useState<number | undefined>(currentPage);\n\n // We don't use useDebounced to avoid function object reference issues.\n const handlePageLinkClickDebounced = useMemo(\n () => debounce(handlePageLinkClick, 500),\n [handlePageLinkClick],\n );\n\n // Keep input state synced to pagination state when other user action changes\n // pagination state.\n useEffect(() => {\n if (currentPage != null) {\n setSelectedPage(currentPage);\n }\n }, [currentPage]);\n\n if (!paginationParams) {\n return <div />;\n }\n\n return (\n <PageSelectorStack data-test='pagination__page-selector' id='pagination__page-selector'>\n <PageInput>\n {totalPages < PAGE_LIMIT_BEFORE_SCROLL_MODE && !lowerBound ? (\n <Input\n aria-label='Go to page number'\n size='sm'\n inputSize={2}\n onChange={(e) => {\n const value = e.target.valueAsNumber;\n if (Number.isNaN(value)) {\n setSelectedPage(undefined);\n } else {\n // Setting unbounded value feels smoother as the value is not corrected until after the fetch via useEffect.\n setSelectedPage(value);\n const boundedValue = Math.min(Math.max(e.target.valueAsNumber, 1), totalPages);\n handlePageLinkClickDebounced(boundedValue);\n onPageChange?.(boundedValue);\n }\n }}\n onBlur={(e) => {\n // Fill blank value on blur.\n if (Number.isNaN(e.target.valueAsNumber)) {\n setSelectedPage(currentPage);\n }\n }}\n min={1}\n max={totalPages}\n type='number'\n disabled={isLoading}\n value={selectedPage ?? ''}\n />\n ) : (\n currentPage + ' '\n )}\n of {lowerBound ? 'many' : totalPages} pages\n </PageInput>\n <Button\n id='pagination__page-selector--left'\n disabled={currentPage === 1 || isLoading}\n onClick={() => {\n if (currentPage !== 1) {\n const prevPageNum = currentPage - 1;\n setSelectedPage(prevPageNum);\n handlePageLinkClick(prevPageNum);\n onPageChange?.(prevPageNum);\n }\n }}\n data-test='pagination__page-selector-paddle-left'\n variant='inverse'\n size='sm'\n width='auto'\n aria-label='Previous page'\n >\n Prev\n </Button>\n <Button\n id='pagination__page-selector--right'\n disabled={(currentPage === totalPages && !lowerBound) || isLoading}\n onClick={() => {\n if (currentPage !== totalPages || lowerBound) {\n const nextPageNum = currentPage + 1;\n setSelectedPage(nextPageNum);\n handlePageLinkClick(nextPageNum);\n onPageChange?.(nextPageNum);\n }\n }}\n data-test='pagination__page-selector-paddle-right'\n variant='inverse'\n size='sm'\n width='auto'\n aria-label='Next page'\n >\n Next\n </Button>\n </PageSelectorStack>\n );\n}\n","import styled from 'styled-components';\n\nimport Select, { Option } from '@persona/design-system/components/Select';\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nconst Selector = styled('div')`\n padding: ${Spacing[2]};\n display: flex;\n justify-content: flex-end;\n`;\n\nconst Label = styled.label`\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: ${Spacing[2]};\n padding: ${Spacing[2]};\n`;\n\ninterface PageSizeOptionProps {\n currentPageSize: number;\n pageSizeOption: number;\n}\n\nexport const PageSizeOption = styled('div')<PageSizeOptionProps>`\n padding: 0 ${Spacing[1]};\n color: ${({ theme }) => semanticColor(theme, 'FgAccentStatic', Color.PrimaryPurple)};\n cursor: pointer;\n\n ${({ currentPageSize, pageSizeOption }) => {\n if (currentPageSize === pageSizeOption) {\n return `\n ${Typography.TextMediumBold};\n text-decoration: underline;\n `;\n }\n }};\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\ninterface PageSizeSelectorProps {\n pageSize: number;\n pageSizeOptions: number[];\n handlePageSizeClick: (pageSize: number) => void;\n /**\n * Element the options menu renders into. Pass a container inside the surrounding dialog when the\n * pager sits in a clipping container, where the menu would otherwise be cut off.\n */\n menuPortalContainer?: HTMLElement | null;\n}\n\nconst PageSizeSelector = ({\n pageSize,\n pageSizeOptions,\n handlePageSizeClick,\n menuPortalContainer,\n}: PageSizeSelectorProps) => {\n // Add pageSize to selector just in case it isn't part of the options so UI doesn't look weird\n const pageSizes = [\n ...pageSizeOptions,\n ...(pageSizeOptions.includes(pageSize) ? [] : [pageSize]),\n ].sort((a, b) => a - b);\n\n return (\n <Selector data-test='pagination__page-size-selector'>\n <Label>\n Items per page:\n <Select\n value={pageSize.toString()}\n onValueChange={(val) => handlePageSizeClick(Number(val))}\n size='sm'\n portal={menuPortalContainer != null}\n portalContainer={menuPortalContainer}\n >\n {pageSizes.map((size) => (\n <Option key={size} value={size.toString()}>\n {size}\n </Option>\n ))}\n </Select>\n </Label>\n </Selector>\n );\n};\n\nexport default PageSizeSelector;\n","import styled from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nimport { DEFAULT_PAGE_SIZE_OPTIONS } from './constants';\nimport PageSelector from './PageSelector';\nimport PageSizeSelector from './PageSizeSelector';\nimport type { PaginationParams } from './types';\n\n// NB: this is configured in config/initializers/kaminari.rb\nconst MAX_PAGES = 100;\n\nconst Container = styled('nav')`\n ${Typography.TextMedium};\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nexport const PaginationInfo = styled('div')`\n display: flex;\n align-items: center;\n\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n`;\n\ninterface PaginationProps {\n pageSize?: number;\n pageSizeOptions?: number[];\n paginationParams?: PaginationParams;\n handlePageSizeClick: (pageSize: number) => void;\n handlePageLinkClick: (pageNumber: number) => void;\n isLoading?: boolean;\n showPageSizeSelector?: boolean;\n /**\n * Called with the new page number after the page changes. Lets the consumer\n * react to page changes -- e.g. scroll the page back to the top.\n */\n onPageChange?: (pageNumber: number) => void;\n /**\n * Element the page-size menu renders into. Pass a container inside the surrounding dialog when\n * the pager sits in a clipping container, where the menu would otherwise be cut off.\n */\n menuPortalContainer?: HTMLElement | null;\n}\n\nconst Pagination = ({\n pageSize,\n pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n paginationParams,\n handlePageSizeClick,\n handlePageLinkClick,\n isLoading,\n showPageSizeSelector = true,\n onPageChange,\n menuPortalContainer,\n}: PaginationProps) => {\n if (!paginationParams || !pageSize) {\n return <div />;\n }\n\n const {\n 'current-page': currentPage,\n 'total-count': totalCount,\n 'total-pages': totalPages,\n 'lower-bound': lowerBound,\n } = paginationParams;\n\n // If the total number of pages is the same as MAX_PAGES, we guess that the total number of\n // items might be limited by max pages, and that the total could change based on page size.\n // To limit user confusion here, we use 'many' instead of a specific number.\n const totalCountDisplay = lowerBound || totalPages >= MAX_PAGES ? 'many' : totalCount;\n\n const lastItemIndex = lowerBound\n ? currentPage * pageSize\n : Math.min(currentPage * pageSize, totalCount);\n const firstItemIndex = pageSize * (currentPage - 1) + 1;\n\n return (\n <Container role='navigation' aria-label='pagination'>\n {showPageSizeSelector && (\n <PageSizeSelector\n pageSize={pageSize}\n pageSizeOptions={pageSizeOptions}\n handlePageSizeClick={handlePageSizeClick}\n menuPortalContainer={menuPortalContainer}\n />\n )}\n {totalCount > 0 && (\n <>\n <div>\n Showing {firstItemIndex}-{lastItemIndex} of {totalCountDisplay} items\n </div>\n <PaginationInfo>\n <PageSelector\n paginationParams={paginationParams}\n handlePageLinkClick={handlePageLinkClick}\n isLoading={isLoading}\n onPageChange={onPageChange}\n />\n </PaginationInfo>\n </>\n )}\n </Container>\n );\n};\n\nexport default Pagination;\n","import Pagination from './Pagination';\n\nexport { default as PageSelector, PAGE_LIMIT_BEFORE_SCROLL_MODE } from './PageSelector';\nexport * from './constants';\nexport default Pagination;\n"],"mappings":"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"}

package/dist/TabBar-Bj84q1Mr.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"TabBar-Bj84q1Mr.mjs","names":["TabBarContext","TabBarContext"],"sources":["../components/TabBar/TabBarContext.ts","../components/TabBar/TabBar.tsx","../components/TabBar/Tab.tsx","../components/TabBar/TabBarIconButton.tsx"],"sourcesContent":["import { createContext } from 'react';\n\nexport default createContext<{ maxTabChars?: number; size?: 'md' | 'sm' }>({});\n","import { mergeRefs } from '@react-aria/utils';\nimport {\n type ComponentPropsWithoutRef,\n type ForwardedRef,\n forwardRef,\n type KeyboardEventHandler,\n type ReactNode,\n useRef,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst TabBarContainer = styled.div`\n display: flex;\n height: ${Spacing[6]};\n position: relative;\n box-sizing: border-box;\n border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n justify-content: space-between;\n gap: ${Spacing[4]};\n`;\n\nconst RightActions = styled.div`\n align-self: center;\n`;\n\nconst TitleTab = styled.div`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n ${paragraphMixins.mdBold};\n`;\n\nconst StyledTabContainer = styled.div<{ $size?: 'md' | 'sm' }>`\n display: flex;\n gap: ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[3] : Spacing[4])};\n // These two lines prevent the overflow hidden from hiding the bottom border of the selected tab\n margin-bottom: -2px;\n padding-bottom: 2px;\n overflow: hidden;\n flex-wrap: wrap;\n`;\n\ninterface TabContainerProps extends ComponentPropsWithoutRef<'div'> {\n children: ReactNode;\n /**\n * Truncate tab text to the specified number of characters.\n */\n maxTabChars?: number;\n /**\n * Size of the tabs. Affects font size.\n */\n size?: 'md' | 'sm';\n}\n\nexport const TabContainer = forwardRef<HTMLDivElement, TabContainerProps>(function TabContainer(\n { children, maxTabChars, size, ...props },\n forwardedRef,\n) {\n const tabListRef = useRef<HTMLDivElement>(null);\n\n const getIndexOfCurrentTab = (list: Element[]) => {\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n return getIndex(list, document.activeElement);\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const list = getTabList(tabListRef.current.children);\n\n if (document.activeElement && !list.includes(document.activeElement)) {\n return;\n }\n\n switch (e.key) {\n case 'ArrowLeft': {\n // Go to previous tab\n const curIndex = getIndexOfCurrentTab(list);\n const nextIndex = curIndex === 0 ? list.length - 1 : curIndex - 1;\n (list[nextIndex] as HTMLElement).focus();\n break;\n }\n case 'ArrowRight': {\n // Go to next tab\n const curIndex = getIndexOfCurrentTab(list);\n (list[(curIndex + 1) % list.length] as HTMLElement).focus();\n break;\n }\n case 'Home': {\n // Go to first tab\n (list[0] as HTMLElement).focus();\n break;\n }\n case 'End': {\n // Go to last tab\n (list[list.length - 1] as HTMLElement).focus();\n break;\n }\n default:\n break;\n }\n };\n\n return (\n <TabBarContext.Provider value={{ maxTabChars, size }}>\n <StyledTabContainer\n role='tablist'\n ref={mergeRefs<HTMLDivElement>(tabListRef, forwardedRef)}\n onKeyDown={handleKeyDown}\n $size={size}\n {...props}\n >\n {children}\n </StyledTabContainer>\n </TabBarContext.Provider>\n );\n});\n\nconst getIndex = (children: Element[], element: Element) => {\n return children.indexOf(element);\n};\n\nconst getTabList = (list: HTMLCollection) => {\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n return Array.from(list).filter((e: HTMLElement) => {\n return !(e.getAttribute('aria-disabled') || e.getAttribute('disabled'));\n });\n};\n\nexport interface TabBarProps extends ComponentPropsWithoutRef<'div'> {\n actions?: ReactNode;\n title?: string;\n 'data-tour-target'?: string;\n /**\n * Truncate tab text to the specified number of characters.\n */\n maxTabChars?: number;\n /**\n * Size of the tabs. Affects font size.\n */\n size?: 'md' | 'sm';\n}\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(function TabBar(\n {\n children,\n actions,\n title,\n 'data-tour-target': dataTourTarget,\n maxTabChars,\n size,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n ...elemProps\n },\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <TabBarContainer {...elemProps}>\n <TabContainer\n ref={forwardedRef}\n maxTabChars={maxTabChars}\n size={size}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n >\n {title && <TitleTab data-tour-target={dataTourTarget}>{title}</TitleTab>}\n {children}\n </TabContainer>\n {actions && <RightActions>{actions}</RightActions>}\n </TabBarContainer>\n );\n});\n\nexport default TabBar;\n","import {\n cloneElement,\n type ComponentPropsWithoutRef,\n type ElementType,\n type ReactElement,\n useContext,\n} from 'react';\nimport styled, {\n css,\n type DefaultTheme,\n type FlattenInterpolation,\n type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport Badge from 'design-system/components/Badge';\nimport Button from 'design-system/components/Button';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\n/** A tab carries either a count or a label beside its text, never both. */\ntype TabAdornment =\n | { badge?: ReactElement; sticker?: never }\n | { badge?: never; sticker?: ReactElement };\n\ninterface TabBaseProps<T extends ElementType = 'button'> extends ComponentPropsWithoutRef<\n typeof Button\n> {\n selected?: boolean;\n as?: T;\n size?: 'md' | 'sm';\n}\n\ntype TabProps<T extends ElementType = 'button'> = TabBaseProps<T> & TabAdornment;\n\nconst AdornmentContainer = styled.span`\n display: inline-flex;\n vertical-align: middle;\n /* Align the atomic badge with the label's cap midpoint, not its x-height midpoint. */\n transform: translateY(calc((1ex - 1cap) / 2));\n padding: 0;\n margin-left: ${Spacing[1]};\n`;\n\nconst sizeStyles: Record<\n NonNullable<TabBaseProps['size']>,\n FlattenInterpolation<ThemeProps<DefaultTheme>>\n> = {\n md: css`\n ${paragraphMixins.md}\n `,\n sm: css`\n ${paragraphMixins.sm}\n `,\n};\n\nconst tabSelectedStyle = css`\n color: ${({ theme }) => semanticColor(theme, 'FgAccent', theme.color.primary.brand)};\n border-bottom-color: ${({ theme }) => semanticColor(theme, 'BorderAccent', theme.color.primary.brand)};\n box-shadow: none;\n &:after {\n transition: border-bottom-color ${TransitionDuration.Fast};\n border-bottom-color: ${({ theme }) => semanticColor(theme, 'BorderAccent', theme.color.primary.brand)};\n }\n`;\n\nexport const StyledTab = styled(Button).attrs<TabBaseProps>({\n width: 'auto',\n variant: 'basic',\n})<TabBaseProps>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n white-space: nowrap;\n background-color: transparent;\n color: ${({ theme, disabled }) =>\n disabled\n ? semanticColor(theme, 'FgDisabled', theme.color.variants.basic.textDisabled)\n : semanticColor(theme, 'FgSecondary', theme.color.text.tertiary)};\n transition: color ${TransitionDuration.Fast} ease-out;\n height: 32px;\n margin: 0;\n padding: 0;\n ${({ size }) => sizeStyles[size || 'md']};\n outline: none;\n border-radius: ${({ theme }) => theme.button.borderRadius};\n\n a {\n color: currentColor;\n }\n\n /* remove default button focused/hovered box shadow */\n &${isActive}${isNotDisabled} {\n background-color: unset;\n }\n &${isHovered}${isNotDisabled} {\n background-color: unset;\n ${({ selected, theme }) =>\n !selected &&\n css`\n color: ${semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n `}\n }\n &${isFocused}${isNotDisabled} {\n box-shadow: none;\n background-color: unset;\n }\n &${isHovered}${isFocused}${isNotDisabled} {\n background-color: unset;\n }\n &:disabled {\n background-color: unset;\n }\n\n &:after {\n position: absolute;\n bottom: 0px;\n width: 100%;\n border-bottom: 1px solid transparent;\n content: '';\n }\n\n &.selected,\n &.active {\n ${tabSelectedStyle}\n }\n\n ${({ selected }) => selected && tabSelectedStyle}\n\n ${({ disabled }) =>\n disabled &&\n css`\n cursor: default;\n `}\n\n a& {\n text-decoration: none;\n }\n`;\n\n/**\n * Helper function to truncate text if it exceeds maxCharacters\n */\nconst truncateText = (text: string, maxCharacters: number): string => {\n if (text.length <= maxCharacters) {\n return text;\n }\n return `${text.substring(0, maxCharacters).trimEnd()}...`;\n};\n\nconst Tab = <T extends ElementType = 'button'>({\n selected,\n disabled,\n children,\n badge,\n sticker,\n as,\n size,\n ...elemProps\n}: TabProps<T> & ComponentPropsWithoutRef<T>) => {\n const { maxTabChars, size: contextSize } = useContext(TabBarContext);\n const finalSize = size || contextSize || 'md';\n\n // Truncate text if maxTabChars is provided and children is a string\n const hasTruncation = maxTabChars && typeof children === 'string';\n const displayChildren = hasTruncation ? truncateText(children, maxTabChars) : children;\n\n return (\n <StyledTab\n role='tab'\n selected={selected}\n aria-selected={selected}\n aria-disabled={disabled}\n disabled={disabled}\n as={as as ElementType}\n size={finalSize}\n title={hasTruncation ? children : undefined}\n {...elemProps}\n >\n {displayChildren}\n {badge && (\n <AdornmentContainer>\n {badge.type === Badge\n ? cloneElement(badge, {\n variant: selected ? 'active' : 'basic',\n })\n : badge}\n </AdornmentContainer>\n )}\n {sticker && <AdornmentContainer>{sticker}</AdornmentContainer>}\n </StyledTab>\n );\n};\n\nexport default Tab;\n","import styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { IconButton } from 'design-system/components/Button';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nexport default styled(IconButton).attrs({\n size: 'sm',\n})`\n padding-left: ${Spacing[2]};\n padding-right: ${Spacing[2]};\n border-radius: ${BorderRadius.Sm};\n\n // remove default button focused/hovered box shadow\n &${isActive}${isNotDisabled} {\n background-color: transparent;\n }\n &${isHovered}${isNotDisabled} {\n box-shadow: none;\n }\n &${isFocused}${isNotDisabled} {\n box-shadow: none;\n }\n &${isHovered}${isFocused}${isNotDisabled} {\n box-shadow: none;\n }\n &:disabled {\n background-color: transparent;\n }\n &:focus-visible${isNotDisabled}, &${isHovered}${isNotDisabled}:focus-visible {\n box-shadow: 0 0 0 3px ${({ theme }) => semanticColor(theme, 'ActionNeutralActive', theme.color.variants.basic.highlight)};\n }\n\n svg {\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.CoreSlate800)};\n }\n\n &:hover {\n svg {\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.CoreSlate900)};\n }\n }\n`;\n"],"mappings":"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"}