npm - @pega/cosmos-react-core - Versions diffs - 3.0.0-dev.16.1 → 3.0.0-dev.17.0 - Mend

@pega/cosmos-react-core 3.0.0-dev.16.1 → 3.0.0-dev.17.0

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 (150) hide show

package/lib/components/DateTime/Picker/Calendar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAYf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAcrD,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,oFAAoF;IACpF,aAAa,CAAC,EAAE;QAAE,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC;QAAC,OAAO,EAAE,IAAI,GAAG,SAAS,CAAA;KAAE,CAAC;IAC3E,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,uGAAuG;IACvG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,~~CAiU7D~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAYf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAcrD,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,oFAAoF;IACpF,aAAa,CAAC,EAAE;QAAE,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC;QAAC,OAAO,EAAE,IAAI,GAAG,SAAS,CAAA;KAAE,CAAC;IAC3E,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,uGAAuG;IACvG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkU7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/DateTime/Picker/Calendar.js CHANGED Viewed

@@ -101,7 +101,7 @@ const Calendar = forwardRef(({ selected, current = selected ? new Date(selected.
                     if (hasFocus)
                         focusedRef?.focus();
                 }
-                : undefined, tabIndex: isFocused(day) ? 0 : -1, disabled: disabled || mode === 'week' || isDisabled(day), current: toUTCDateString(day) === today, highlighted: isInRange(day) || isHighlighted(day), "aria-selected": isSelected(day) || undefined, "aria-current": isFocused(day) ? 'date' : undefined, dayInNexOrPrevMonth: day.getUTCMonth() !== current.getUTCMonth(), "aria-label": toUTCDateString(day, Intl.DateTimeFormat(locale, ariaOpts)), onMouseOver: showHighlight ? () => setHighlightBoundary(day) : undefined, onMouseOut: showHighlight ? () => setHighlightBoundary(undefined) : undefined, onMouseDown: () => {
+                : undefined, tabIndex: isFocused(day) ? 0 : -1, disabled: disabled || mode === 'week' || isDisabled(day), current: toUTCDateString(day) === today, highlighted: isInRange(day) || isHighlighted(day), "aria-selected": isSelected(day) || undefined, "aria-current": isSelected(day) ? 'date' : undefined, dayInNexOrPrevMonth: day.getUTCMonth() !== current.getUTCMonth(), "aria-label": toUTCDateString(day, Intl.DateTimeFormat(locale, ariaOpts)), onMouseOver: showHighlight ? () => setHighlightBoundary(day) : undefined, onMouseOut: showHighlight ? () => setHighlightBoundary(undefined) : undefined, onMouseDown: () => {
                 setFocusedDay(day);
                 onFocus?.(day);
                 onSelect?.(day);
@@ -122,7 +122,7 @@ const Calendar = forwardRef(({ selected, current = selected ? new Date(selected.
                     if (hasFocus)
                         focusedRef?.focus();
                 }
-                : undefined, tabIndex: isWeekFocused(dateOfISOWeek) ? 0 : -1, disabled: disabled || mode === 'date' || isDisabled(dateOfISOWeek), "aria-selected": isWeekSelected(dateOfISOWeek) || undefined, "aria-label": `${t('week_label_a11y')} ${weekNo.toString()}, ${dateOfISOWeek.toLocaleDateString()} - ${lastDayOfWeek.toLocaleDateString()}`, "aria-current": isWeekFocused(dateOfISOWeek) ? 'date' : undefined, onMouseDown: () => {
+                : undefined, tabIndex: isWeekFocused(dateOfISOWeek) ? 0 : -1, disabled: disabled || mode === 'date' || isDisabled(dateOfISOWeek), "aria-selected": isWeekSelected(dateOfISOWeek) || undefined, "aria-label": `${t('week_label_a11y')} ${weekNo.toString()} ${toUTCDateString(dateOfISOWeek, Intl.DateTimeFormat(locale, ariaOpts))} - ${toUTCDateString(lastDayOfWeek, Intl.DateTimeFormat(locale, ariaOpts))}`, "aria-current": isWeekFocused(dateOfISOWeek) ? 'date' : undefined, onMouseDown: () => {
                 setFocusedDay(dateOfISOWeek);
                 onFocus?.(dateOfISOWeek);
                 onSelect?.(dateOfISOWeek);

package/lib/components/DateTime/Picker/Calendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/Calendar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useMemo,\n FunctionComponent,\n KeyboardEvent,\n useState,\n forwardRef,\n PropsWithoutRef,\n Ref,\n useEffect,\n useCallback\n} from 'react';\n\nimport Text from '../../Text';\nimport { CALENDAR_TYPES } from '../Input/local';\nimport {\n getCalendarTypeFromLocale,\n getDateOfISOWeek,\n getWeek,\n parseToDate,\n toUTCDateString\n} from '../Input/utils';\nimport { useConfiguration, useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';\nimport { ForwardProps } from '../../../types';\nimport { FormControlProps } from '../../FormControl';\n\nimport { getDaysOfMonth, getLocalizedDays, getWeeksOfMonth } from './utils';\nimport {\n StyledColumnLabel,\n ScreenReaderOnly,\n StyledPick,\n StyledDay,\n StyledCalendar,\n StyledWeekGrid,\n StyledWeekLabel,\n StyledWeekNumber\n} from './Calendar.styles';\n\nexport interface CalendarProps {\n /*\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /\n Defines default date that will be selected initially when the Calendar is visible.\n /\n selected?: Date;\n /\n Defines currently visible month.\n * @default new Date()\n /\n current?: Date;\n /* Defines dates range with start date and end date that can be set by the user. /\n selectedRange?: { startDate: Date \| undefined; endDate: Date \| undefined };\n /* Defines if days should be highlighted for range selection /\n showHighlight?: boolean;\n /* Defines if week numbers should be displayed in calendar /\n showWeekNumber?: boolean;\n /\n The mode of the calendar that will be rendered, ie. whether single date or week are selectable.\n * @default \"date\"\n /\n mode?: 'date' \| 'week';\n /* Callback fired when new day is selected. /\n onSelect?: (date: Date) => void;\n /* Callback fired when user focuses new day. /\n onFocus?: (date: Date) => void;\n /* Sets the type of calendar to be used. This will be determined by locale if no value is provided. /\n calendarType?: string;\n /* Defines minimum available value that can be selected by the user. /\n min?: string \| number \| Date;\n /* Defines maximum available value that can be selected by the user. /\n max?: string \| number \| Date;\n /* Set the calendar to disabled state, ie. non-interactive. */\n disabled?: boolean;\n}\n\nconst ariaOpts = { day: 'numeric', month: 'long', year: 'numeric' } as const;\n\nconst Calendar: FunctionComponent<CalendarProps & ForwardProps> = forwardRef(\n (\n {\n selected,\n current = selected ? new Date(selected.getTime()) : new Date(),\n selectedRange,\n showHighlight,\n mode = 'date',\n showWeekNumber,\n calendarType: calendar = CALENDAR_TYPES.ISO_8601,\n onSelect,\n onFocus,\n disabled,\n min: minProp,\n max: maxProp\n }: PropsWithoutRef<CalendarProps>,\n ref: Ref<HTMLTableElement>\n ) => {\n const { locale } = useConfiguration();\n const min = minProp ? parseToDate(minProp) : -Infinity;\n const max = maxProp ? parseToDate(maxProp) : Infinity;\n\n const showWeekLabel = mode === 'week' ? false : showWeekNumber;\n const [focusedDay, setFocusedDay] = useState(current);\n useEffect(() => {\n setFocusedDay(current);\n }, [current.getUTCFullYear(), current.getUTCMonth()]);\n\n const calendarType = useMemo(\n () => calendar ?? getCalendarTypeFromLocale(locale),\n [locale, calendar]\n );\n\n const [highlightBoundary, setHighlightBoundary] = useState<Date>();\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n if (\n (mode === 'date'\n ? ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n : ['ArrowUp', 'ArrowDown']\n ).includes(e.key)\n ) {\n e.preventDefault();\n const newFocused = new Date(focusedDay);\n switch (e.key) {\n case 'ArrowUp':\n newFocused.setUTCDate(focusedDay.getUTCDate() - 7);\n break;\n case 'ArrowDown':\n newFocused.setUTCDate(focusedDay.getUTCDate() + 7);\n break;\n case 'ArrowRight':\n newFocused.setUTCDate(focusedDay.getUTCDate() + 1);\n break;\n case 'ArrowLeft':\n newFocused.setUTCDate(focusedDay.getUTCDate() - 1);\n break;\n default:\n }\n if (newFocused < min \|\| newFocused > max) return;\n setFocusedDay(newFocused);\n onFocus?.(newFocused);\n setHighlightBoundary(newFocused);\n }\n if (e.key === 'Enter') {\n e.preventDefault();\n onSelect?.(focusedDay);\n }\n },\n [mode, focusedDay, onFocus, onSelect]\n );\n\n const containerRef = useConsolidatedRef<HTMLTableElement>(ref);\n const hasFocus = useFocusWithin([containerRef]);\n\n const today = toUTCDateString(new Date());\n\n const isDisabled = (day: Date) => {\n return min > day.getTime() \|\| day.getTime() > max;\n };\n\n const isSelected = (day: Date) => {\n return [\n selected && toUTCDateString(selected),\n selectedRange?.startDate && toUTCDateString(selectedRange?.startDate),\n selectedRange?.endDate && toUTCDateString(selectedRange?.endDate)\n ].includes(toUTCDateString(day));\n };\n\n const isWeekSelected = (day: Date) => {\n return (\n selected &&\n toUTCDateString(day) ===\n toUTCDateString(getDateOfISOWeek(getWeek(selected, calendarType), selected.getFullYear()))\n );\n };\n\n const isFocused = (day: Date) => {\n return toUTCDateString(day) === toUTCDateString(focusedDay);\n };\n\n const isWeekFocused = (day: Date) => {\n return (\n toUTCDateString(day) ===\n toUTCDateString(\n getDateOfISOWeek(getWeek(focusedDay, calendarType), focusedDay.getFullYear())\n )\n );\n };\n\n const isInRange = (day: Date) => {\n return (\n selectedRange &&\n selectedRange.startDate &&\n selectedRange.endDate &&\n day >= selectedRange.startDate &&\n day <= selectedRange.endDate\n );\n };\n\n const isHighlighted = (day: Date) => {\n if (!selectedRange \|\| !showHighlight \|\| !highlightBoundary) return false;\n const betweenHighlightAndBoundary = (rangeBoundaryType: 'startDate' \| 'endDate') => {\n const rangeBoundary = selectedRange[rangeBoundaryType];\n if (!rangeBoundary) return false;\n return !!(\n rangeBoundary &&\n ((day >= rangeBoundary && day <= highlightBoundary) \|\|\n (day <= rangeBoundary && day >= highlightBoundary))\n );\n };\n return betweenHighlightAndBoundary('startDate') \|\| betweenHighlightAndBoundary('endDate');\n };\n\n const days = getDaysOfMonth(current, calendarType ?? CALENDAR_TYPES.ISO_8601).map(day => {\n return (\n <StyledDay\n key={day.getTime()}\n variant='simple'\n icon={false}\n type='button'\n loading={false}\n ref={\n isFocused(day)\n ? (focusedRef: HTMLButtonElement) => {\n if (hasFocus) focusedRef?.focus();\n }\n : undefined\n }\n tabIndex={isFocused(day) ? 0 : -1}\n disabled={disabled \|\| mode === 'week' \|\| isDisabled(day)}\n current={toUTCDateString(day) === today}\n highlighted={isInRange(day) \|\| isHighlighted(day)}\n aria-selected={isSelected(day) \|\| undefined}\n aria-current={isFocused(day) ? 'date' : undefined}\n dayInNexOrPrevMonth={day.getUTCMonth() !== current.getUTCMonth()}\n aria-label={toUTCDateString(day, Intl.DateTimeFormat(locale, ariaOpts))}\n onMouseOver={showHighlight ? () => setHighlightBoundary(day) : undefined}\n onMouseOut={showHighlight ? () => setHighlightBoundary(undefined) : undefined}\n onMouseDown={() => {\n setFocusedDay(day);\n onFocus?.(day);\n onSelect?.(day);\n }}\n >\n {day.getUTCDate()}\n </StyledDay>\n );\n });\n\n const names = useMemo(() => getLocalizedDays(calendarType, locale), [locale, calendarType]);\n\n const t = useI18n();\n\n const weekText = t('week_label_a11y');\n\n const weeks = getWeeksOfMonth(current, calendarType).map(weekNo => {\n return (\n <>\n <Text as={StyledWeekNumber} key={weekNo} aria-hidden='true'>\n {weekNo.toString()}\n </Text>\n <ScreenReaderOnly>\n {`${weekText} ${weekNo.toString()} ${current.getUTCFullYear().toString()}`}\n </ScreenReaderOnly>\n </>\n );\n });\n\n const weeksButtons = getWeeksOfMonth(current, calendarType).map(weekNo => {\n const dateOfISOWeek = getDateOfISOWeek(weekNo, current.getUTCFullYear());\n const lastDayOfWeek = new Date(dateOfISOWeek);\n lastDayOfWeek.setDate(dateOfISOWeek.getDate() + 6);\n return (\n <StyledPick\n key={weekNo}\n variant='simple'\n icon={false}\n type='button'\n loading={false}\n ref={\n isWeekFocused(dateOfISOWeek)\n ? (focusedRef: HTMLButtonElement) => {\n if (hasFocus) focusedRef?.focus();\n }\n : undefined\n }\n tabIndex={isWeekFocused(dateOfISOWeek) ? 0 : -1}\n disabled={disabled \|\| mode === 'date' \|\| isDisabled(dateOfISOWeek)}\n aria-selected={isWeekSelected(dateOfISOWeek) \|\| undefined}\n aria-label={`${t(\n 'week_label_a11y'\n )} ${weekNo.toString()}, ${dateOfISOWeek.toLocaleDateString()} - ${lastDayOfWeek.toLocaleDateString()}`}\n aria-current={isWeekFocused(dateOfISOWeek) ? 'date' : undefined}\n onMouseDown={() => {\n setFocusedDay(dateOfISOWeek);\n onFocus?.(dateOfISOWeek);\n onSelect?.(dateOfISOWeek);\n }}\n >\n {`${weekText} `}\n {weekNo.toString()}\n </StyledPick>\n );\n });\n\n const weekLabel =\n mode === 'date' ? (\n <>\n <Text as={StyledWeekLabel} forwardedAs='abbr' title={weekText} aria-hidden='true'>\n {t('week_text_short')}\n </Text>\n <ScreenReaderOnly>{weekText}</ScreenReaderOnly>\n </>\n ) : (\n <Text as={StyledWeekLabel}>{weekText}</Text>\n );\n\n const headerLabels = names.map(([name, abbr]) => (\n <th role='columnheader' key={name}>\n <Text as={StyledColumnLabel} forwardedAs='abbr' key={name} title={name} aria-hidden='true'>\n {abbr}\n </Text>\n <ScreenReaderOnly>{name}</ScreenReaderOnly>\n </th>\n ));\n\n const splitToWeeks = (resultArray: JSX.Element[][], item: JSX.Element, index: number) => {\n const chunkIndex = Math.floor(index / 7);\n\n if (!resultArray[chunkIndex]) {\n resultArray[chunkIndex] = [] as JSX.Element[];\n }\n\n resultArray[chunkIndex].push(item);\n return resultArray;\n };\n\n const cells = days.reduce(splitToWeeks, []).map((week, index) => {\n const rowHeader = mode === 'week' ? weeksButtons[index] : weeks[index];\n return (\n // eslint-disable-next-line react/no-array-index-key\n <tr key={`week-${index}`}>\n {showWeekLabel && <th scope='row'>{rowHeader}</th>}\n {week.map((day, dayIndex) => {\n // eslint-disable-next-line react/no-array-index-key\n return <td key={`day-${dayIndex}`}>{day}</td>;\n })}\n </tr>\n );\n });\n\n const weeksCells = weeksButtons.map((week, index) => {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <tr key={`week-${index}`}>\n <td>{week}</td>\n </tr>\n );\n });\n\n const weeksGrid = (\n <StyledWeekGrid role='grid' onKeyDown={onKeyDown} ref={containerRef}>\n <thead>\n <tr>\n <th>{weekLabel}</th>\n </tr>\n </thead>\n <tbody>{weeksCells}</tbody>\n </StyledWeekGrid>\n );\n\n return (\n <>\n {mode === 'week' && weeksGrid}\n <StyledCalendar\n ref={mode === 'date' ? containerRef : undefined}\n aria-label={current.toLocaleString(locale, {\n month: 'long',\n year: 'numeric',\n timeZone: 'UTC'\n })}\n onKeyDown={onKeyDown}\n aria-hidden={mode === 'week' ? true : undefined}\n role='grid'\n >\n <thead>\n <tr>\n {showWeekLabel && <th>{weekLabel}</th>}\n {headerLabels}\n </tr>\n </thead>\n <tbody>{cells}</tbody>\n </StyledCalendar>\n <ScreenReaderOnly aria-live='polite' role='alert'>\n {t('calendar_assist')}\n </ScreenReaderOnly>\n </>\n );\n }\n);\n\nexport default Calendar;\n"]}
1	+ {"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/Calendar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useMemo,\n FunctionComponent,\n KeyboardEvent,\n useState,\n forwardRef,\n PropsWithoutRef,\n Ref,\n useEffect,\n useCallback\n} from 'react';\n\nimport Text from '../../Text';\nimport { CALENDAR_TYPES } from '../Input/local';\nimport {\n getCalendarTypeFromLocale,\n getDateOfISOWeek,\n getWeek,\n parseToDate,\n toUTCDateString\n} from '../Input/utils';\nimport { useConfiguration, useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';\nimport { ForwardProps } from '../../../types';\nimport { FormControlProps } from '../../FormControl';\n\nimport { getDaysOfMonth, getLocalizedDays, getWeeksOfMonth } from './utils';\nimport {\n StyledColumnLabel,\n ScreenReaderOnly,\n StyledPick,\n StyledDay,\n StyledCalendar,\n StyledWeekGrid,\n StyledWeekLabel,\n StyledWeekNumber\n} from './Calendar.styles';\n\nexport interface CalendarProps {\n /*\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /\n Defines default date that will be selected initially when the Calendar is visible.\n /\n selected?: Date;\n /\n Defines currently visible month.\n * @default new Date()\n /\n current?: Date;\n /* Defines dates range with start date and end date that can be set by the user. /\n selectedRange?: { startDate: Date \| undefined; endDate: Date \| undefined };\n /* Defines if days should be highlighted for range selection /\n showHighlight?: boolean;\n /* Defines if week numbers should be displayed in calendar /\n showWeekNumber?: boolean;\n /\n The mode of the calendar that will be rendered, ie. whether single date or week are selectable.\n * @default \"date\"\n /\n mode?: 'date' \| 'week';\n /* Callback fired when new day is selected. /\n onSelect?: (date: Date) => void;\n /* Callback fired when user focuses new day. /\n onFocus?: (date: Date) => void;\n /* Sets the type of calendar to be used. This will be determined by locale if no value is provided. /\n calendarType?: string;\n /* Defines minimum available value that can be selected by the user. /\n min?: string \| number \| Date;\n /* Defines maximum available value that can be selected by the user. /\n max?: string \| number \| Date;\n /* Set the calendar to disabled state, ie. non-interactive. */\n disabled?: boolean;\n}\n\nconst ariaOpts = { day: 'numeric', month: 'long', year: 'numeric' } as const;\n\nconst Calendar: FunctionComponent<CalendarProps & ForwardProps> = forwardRef(\n (\n {\n selected,\n current = selected ? new Date(selected.getTime()) : new Date(),\n selectedRange,\n showHighlight,\n mode = 'date',\n showWeekNumber,\n calendarType: calendar = CALENDAR_TYPES.ISO_8601,\n onSelect,\n onFocus,\n disabled,\n min: minProp,\n max: maxProp\n }: PropsWithoutRef<CalendarProps>,\n ref: Ref<HTMLTableElement>\n ) => {\n const { locale } = useConfiguration();\n const min = minProp ? parseToDate(minProp) : -Infinity;\n const max = maxProp ? parseToDate(maxProp) : Infinity;\n\n const showWeekLabel = mode === 'week' ? false : showWeekNumber;\n const [focusedDay, setFocusedDay] = useState(current);\n useEffect(() => {\n setFocusedDay(current);\n }, [current.getUTCFullYear(), current.getUTCMonth()]);\n\n const calendarType = useMemo(\n () => calendar ?? getCalendarTypeFromLocale(locale),\n [locale, calendar]\n );\n\n const [highlightBoundary, setHighlightBoundary] = useState<Date>();\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n if (\n (mode === 'date'\n ? ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n : ['ArrowUp', 'ArrowDown']\n ).includes(e.key)\n ) {\n e.preventDefault();\n const newFocused = new Date(focusedDay);\n switch (e.key) {\n case 'ArrowUp':\n newFocused.setUTCDate(focusedDay.getUTCDate() - 7);\n break;\n case 'ArrowDown':\n newFocused.setUTCDate(focusedDay.getUTCDate() + 7);\n break;\n case 'ArrowRight':\n newFocused.setUTCDate(focusedDay.getUTCDate() + 1);\n break;\n case 'ArrowLeft':\n newFocused.setUTCDate(focusedDay.getUTCDate() - 1);\n break;\n default:\n }\n if (newFocused < min \|\| newFocused > max) return;\n setFocusedDay(newFocused);\n onFocus?.(newFocused);\n setHighlightBoundary(newFocused);\n }\n if (e.key === 'Enter') {\n e.preventDefault();\n onSelect?.(focusedDay);\n }\n },\n [mode, focusedDay, onFocus, onSelect]\n );\n\n const containerRef = useConsolidatedRef<HTMLTableElement>(ref);\n const hasFocus = useFocusWithin([containerRef]);\n\n const today = toUTCDateString(new Date());\n\n const isDisabled = (day: Date) => {\n return min > day.getTime() \|\| day.getTime() > max;\n };\n\n const isSelected = (day: Date) => {\n return [\n selected && toUTCDateString(selected),\n selectedRange?.startDate && toUTCDateString(selectedRange?.startDate),\n selectedRange?.endDate && toUTCDateString(selectedRange?.endDate)\n ].includes(toUTCDateString(day));\n };\n\n const isWeekSelected = (day: Date) => {\n return (\n selected &&\n toUTCDateString(day) ===\n toUTCDateString(getDateOfISOWeek(getWeek(selected, calendarType), selected.getFullYear()))\n );\n };\n\n const isFocused = (day: Date) => {\n return toUTCDateString(day) === toUTCDateString(focusedDay);\n };\n\n const isWeekFocused = (day: Date) => {\n return (\n toUTCDateString(day) ===\n toUTCDateString(\n getDateOfISOWeek(getWeek(focusedDay, calendarType), focusedDay.getFullYear())\n )\n );\n };\n\n const isInRange = (day: Date) => {\n return (\n selectedRange &&\n selectedRange.startDate &&\n selectedRange.endDate &&\n day >= selectedRange.startDate &&\n day <= selectedRange.endDate\n );\n };\n\n const isHighlighted = (day: Date) => {\n if (!selectedRange \|\| !showHighlight \|\| !highlightBoundary) return false;\n const betweenHighlightAndBoundary = (rangeBoundaryType: 'startDate' \| 'endDate') => {\n const rangeBoundary = selectedRange[rangeBoundaryType];\n if (!rangeBoundary) return false;\n return !!(\n rangeBoundary &&\n ((day >= rangeBoundary && day <= highlightBoundary) \|\|\n (day <= rangeBoundary && day >= highlightBoundary))\n );\n };\n return betweenHighlightAndBoundary('startDate') \|\| betweenHighlightAndBoundary('endDate');\n };\n\n const days = getDaysOfMonth(current, calendarType ?? CALENDAR_TYPES.ISO_8601).map(day => {\n return (\n <StyledDay\n key={day.getTime()}\n variant='simple'\n icon={false}\n type='button'\n loading={false}\n ref={\n isFocused(day)\n ? (focusedRef: HTMLButtonElement) => {\n if (hasFocus) focusedRef?.focus();\n }\n : undefined\n }\n tabIndex={isFocused(day) ? 0 : -1}\n disabled={disabled \|\| mode === 'week' \|\| isDisabled(day)}\n current={toUTCDateString(day) === today}\n highlighted={isInRange(day) \|\| isHighlighted(day)}\n aria-selected={isSelected(day) \|\| undefined}\n aria-current={isSelected(day) ? 'date' : undefined}\n dayInNexOrPrevMonth={day.getUTCMonth() !== current.getUTCMonth()}\n aria-label={toUTCDateString(day, Intl.DateTimeFormat(locale, ariaOpts))}\n onMouseOver={showHighlight ? () => setHighlightBoundary(day) : undefined}\n onMouseOut={showHighlight ? () => setHighlightBoundary(undefined) : undefined}\n onMouseDown={() => {\n setFocusedDay(day);\n onFocus?.(day);\n onSelect?.(day);\n }}\n >\n {day.getUTCDate()}\n </StyledDay>\n );\n });\n\n const names = useMemo(() => getLocalizedDays(calendarType, locale), [locale, calendarType]);\n\n const t = useI18n();\n\n const weekText = t('week_label_a11y');\n\n const weeks = getWeeksOfMonth(current, calendarType).map(weekNo => {\n return (\n <>\n <Text as={StyledWeekNumber} key={weekNo} aria-hidden='true'>\n {weekNo.toString()}\n </Text>\n <ScreenReaderOnly>\n {`${weekText} ${weekNo.toString()} ${current.getUTCFullYear().toString()}`}\n </ScreenReaderOnly>\n </>\n );\n });\n\n const weeksButtons = getWeeksOfMonth(current, calendarType).map(weekNo => {\n const dateOfISOWeek = getDateOfISOWeek(weekNo, current.getUTCFullYear());\n const lastDayOfWeek = new Date(dateOfISOWeek);\n lastDayOfWeek.setDate(dateOfISOWeek.getDate() + 6);\n return (\n <StyledPick\n key={weekNo}\n variant='simple'\n icon={false}\n type='button'\n loading={false}\n ref={\n isWeekFocused(dateOfISOWeek)\n ? (focusedRef: HTMLButtonElement) => {\n if (hasFocus) focusedRef?.focus();\n }\n : undefined\n }\n tabIndex={isWeekFocused(dateOfISOWeek) ? 0 : -1}\n disabled={disabled \|\| mode === 'date' \|\| isDisabled(dateOfISOWeek)}\n aria-selected={isWeekSelected(dateOfISOWeek) \|\| undefined}\n aria-label={`${t('week_label_a11y')} ${weekNo.toString()} ${toUTCDateString(\n dateOfISOWeek,\n Intl.DateTimeFormat(locale, ariaOpts)\n )} - ${toUTCDateString(lastDayOfWeek, Intl.DateTimeFormat(locale, ariaOpts))}`}\n aria-current={isWeekFocused(dateOfISOWeek) ? 'date' : undefined}\n onMouseDown={() => {\n setFocusedDay(dateOfISOWeek);\n onFocus?.(dateOfISOWeek);\n onSelect?.(dateOfISOWeek);\n }}\n >\n {`${weekText} `}\n {weekNo.toString()}\n </StyledPick>\n );\n });\n\n const weekLabel =\n mode === 'date' ? (\n <>\n <Text as={StyledWeekLabel} forwardedAs='abbr' title={weekText} aria-hidden='true'>\n {t('week_text_short')}\n </Text>\n <ScreenReaderOnly>{weekText}</ScreenReaderOnly>\n </>\n ) : (\n <Text as={StyledWeekLabel}>{weekText}</Text>\n );\n\n const headerLabels = names.map(([name, abbr]) => (\n <th role='columnheader' key={name}>\n <Text as={StyledColumnLabel} forwardedAs='abbr' key={name} title={name} aria-hidden='true'>\n {abbr}\n </Text>\n <ScreenReaderOnly>{name}</ScreenReaderOnly>\n </th>\n ));\n\n const splitToWeeks = (resultArray: JSX.Element[][], item: JSX.Element, index: number) => {\n const chunkIndex = Math.floor(index / 7);\n\n if (!resultArray[chunkIndex]) {\n resultArray[chunkIndex] = [] as JSX.Element[];\n }\n\n resultArray[chunkIndex].push(item);\n return resultArray;\n };\n\n const cells = days.reduce(splitToWeeks, []).map((week, index) => {\n const rowHeader = mode === 'week' ? weeksButtons[index] : weeks[index];\n return (\n // eslint-disable-next-line react/no-array-index-key\n <tr key={`week-${index}`}>\n {showWeekLabel && <th scope='row'>{rowHeader}</th>}\n {week.map((day, dayIndex) => {\n // eslint-disable-next-line react/no-array-index-key\n return <td key={`day-${dayIndex}`}>{day}</td>;\n })}\n </tr>\n );\n });\n\n const weeksCells = weeksButtons.map((week, index) => {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <tr key={`week-${index}`}>\n <td>{week}</td>\n </tr>\n );\n });\n\n const weeksGrid = (\n <StyledWeekGrid role='grid' onKeyDown={onKeyDown} ref={containerRef}>\n <thead>\n <tr>\n <th>{weekLabel}</th>\n </tr>\n </thead>\n <tbody>{weeksCells}</tbody>\n </StyledWeekGrid>\n );\n\n return (\n <>\n {mode === 'week' && weeksGrid}\n <StyledCalendar\n ref={mode === 'date' ? containerRef : undefined}\n aria-label={current.toLocaleString(locale, {\n month: 'long',\n year: 'numeric',\n timeZone: 'UTC'\n })}\n onKeyDown={onKeyDown}\n aria-hidden={mode === 'week' ? true : undefined}\n role='grid'\n >\n <thead>\n <tr>\n {showWeekLabel && <th>{weekLabel}</th>}\n {headerLabels}\n </tr>\n </thead>\n <tbody>{cells}</tbody>\n </StyledCalendar>\n <ScreenReaderOnly aria-live='polite' role='alert'>\n {t('calendar_assist')}\n </ScreenReaderOnly>\n </>\n );\n }\n);\n\nexport default Calendar;\n"]}

package/lib/components/DateTime/Picker/TimePicker.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAI1E,OAAO,EAAE,SAAS,EAAU,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGjE,OAAO,EAAE,WAAW,EAAoB,MAAM,gBAAgB,CAAC;AAI/D,oBAAY,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE1C,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAqDD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,~~CA6FjE~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAI1E,OAAO,EAAE,SAAS,EAAU,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGjE,OAAO,EAAE,WAAW,EAAoB,MAAM,gBAAgB,CAAC;AAI/D,oBAAY,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE1C,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAqDD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAqGjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/DateTime/Picker/TimePicker.js CHANGED Viewed

@@ -89,24 +89,29 @@ const TimePicker = (props) => {
             return;
         const focusableElements = Array.from(focusEl.querySelectorAll('button'));
         if (focusableElements.length > 0) {
-            if (!selected)
-                focusableElements[0].tabIndex = 0;
+            let isChecked = false;
             focusableElements.slice(1).forEach(item => {
                 const checked = item.checked;
-                if (checked)
+                if (checked) {
+                    isChecked = true;
                     item.tabIndex = 0;
+                }
                 else
                     item.tabIndex = -1;
             });
+            if (!isChecked) {
+                focusableElements[0].tabIndex = 0;
+                focusableElements[0].focus();
+            }
         }
     }, [selected]);
     useEffect(() => {
         buttonEl?.focus();
         setTabIndexes();
     }, [buttonEl]);
-    return (_jsx(StyledTimePicker, { role: 'menu', tabIndex: 0, ref: menuRef, ...restProps, children: actionsList.map(({ text, id }) => {
+    return (_jsx(StyledTimePicker, { role: 'menu', tabIndex: -1, ref: menuRef, ...restProps, children: actionsList.map(({ text, id }) => {
             const item = new Date(Number(id));
-            return (_jsx(StyledTimeItem, { role: 'presentation', children: _jsx(StyledTimeButton, { role: 'menuitem', as: Button, variant: 'simple', ref: isSelected(item) ? setButtonEl : null, "aria-label": text, selected: isSelected(item), checked: isSelected(item), onClick: () => {
+            return (_jsx(StyledTimeItem, { role: 'presentation', children: _jsx(StyledTimeButton, { role: 'menuitem', as: Button, variant: 'simple', ref: isSelected(item) ? setButtonEl : null, "aria-label": text, selected: isSelected(item), "aria-current": isSelected(item) ? 'time' : undefined, checked: isSelected(item), onClick: () => {
                         onSelect?.(item);
                     }, tabIndex: '-1', children: renderTime(text) }) }, id));
         }) }));

package/lib/components/DateTime/Picker/TimePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/TimePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAuB/C,MAAM,gBAAgB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAKjC,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAiB;;;;;;;;;;;sBAWjC,KAAK,CAAC,EAAE,CAC1B,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa;;;;;6BAKnD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;;;;;;;;;;wBAapE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;CAE7D,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAA;;CAE/B,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,UAAU,GAAsD,CAAC,KAAsB,EAAE,EAAE;IAC/F,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,EAAE,QAAQ,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE7F,MAAM,YAAY,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEtC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC,EAAE;QACxE,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QAC3D,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE;YAC7B,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;gBAChC,IAAI,EAAE,SAAS;gBACf,MAAM,EAAE,SAAS;gBACjB,QAAQ,EAAE,KAAK;gBACf,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC;aACpE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;SAChB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,CAAC,IAAU,EAAE,EAAE;QAChC,OAAO,CACL,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC,WAAW,EAAE;YAC9C,QAAQ,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC,aAAa,EAAE,CACnD,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAe,CAAC;IAC1D,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE/C,SAAS,CAAC,OAAO,EAAE;QACjB,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,IAAI;QACX,GAAG,EAAE,SAAS;QACd,aAAa,EAAE,KAAK;KACrB,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,EAAE;QAClC,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACnD,OAAO,CACL,8BACE,yBAAO,IAAI,GAAQ,OAAC,yBAAO,MAAM,GAAQ,EACxC,QAAQ,IAAI,yBAAO,QAAQ,GAAQ,IACnC,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;QAEzE,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;YAChC,IAAI,~~CAAC~~,~~QAAQ;gBAAG,iBAAiB,CAAC,CAAC,CAAiB,CAAC,QAAQ,~~GAAG,~~CAAC~~,CAAC;~~YAClE~~,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACxC,MAAM,OAAO,GAAI,IAAyB,CAAC,OAAO,CAAC;gBACnD,IAAI,OAAO;~~oBAAE~~,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;;~~oBAC1B~~,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;~~YAC1B~~,CAAC,CAAC,CAAC;~~SACJ~~;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,EAAE,KAAK,EAAE,CAAC;QAClB,aAAa,EAAE,CAAC;IAClB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,KAAC,gBAAgB,IAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,KAAM,SAAS,~~YACnE~~,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAU,EAAE,EAAE;YACxC,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;YAClC,OAAO,CACL,KAAC,cAAc,IAAC,IAAI,EAAC,cAAc,YACjC,KAAC,gBAAgB,IACf,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,MAAM,EACV,OAAO,EAAC,QAAQ,EAChB,GAAG,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,gBAC9B,IAAI,EAChB,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,~~EAC1B~~,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,EACzB,OAAO,EAAE,GAAG,EAAE;wBACZ,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;oBACnB,CAAC,EACD,QAAQ,EAAC,IAAI,YAEZ,UAAU,CAAC,IAAI,CAAC,GACA,~~IAfoB~~,EAAE,~~CAgB1B~~,CAClB,CAAC;QACJ,CAAC,CAAC,GACe,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FunctionComponent, useCallback, useEffect, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { BaseProps, Action, ForwardProps } from '../../../types';\nimport Button from '../../Button';\nimport { useArrows, useConfiguration, useElement } from '../../../hooks';\nimport { ClockFormat, is12HClockFormat } from '../Input/utils';\n\nimport { getIntervalGenerator } from './utils';\n\nexport type MinuteInterval = 15 \| 30 \| 60;\n\nexport interface TimePickerProps extends BaseProps {\n /*\n Defines default time that will be selected when the Time Picker is opened.\n * @default new Date()\n /\n selected?: Date;\n /* Callback fired when selected value changes. /\n onSelect?: (date: Date) => void;\n /\n Defines interval for time picker options (in minutes).\n * @default 30\n /\n interval?: MinuteInterval;\n /\n Defines clock format that overrides locale based format\n /\n clockFormat?: ClockFormat;\n}\n\nconst StyledTimePicker = styled.ul`\n list-style: none;\n max-height: 10rem;\n overflow: auto;\n width: 100%;\n`;\n\nStyledTimePicker.defaultProps = defaultThemeProp;\n\nconst StyledTimeButton = styled.button<TimePickerProps>`\n color: black;\n width: 100%;\n border-radius: inherit;\n overflow: hidden;\n text-align: start;\n text-overflow: ellipsis;\n white-space: nowrap;\n border-width: 0;\n justify-content: start;\n padding: 0;\n background-color: ${props =>\n props.selected ? props.theme.base.colors.blue['extra-light'] : 'transparent'};\n\n > span {\n margin-inline-end: 0.125rem;\n &:first-child {\n margin-inline-start: ${({ theme }) => theme.components['form-control']['border-width']};\n }\n &:nth-child(2) {\n margin-inline-start: 0.125rem;\n }\n &:first-child,\n &:nth-child(3) {\n padding-inline-start: 0.5rem;\n }\n }\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: inset ${props => props.theme.base.shadow.focus};\n }\n`;\n\nStyledTimeButton.defaultProps = defaultThemeProp;\n\nconst StyledTimeItem = styled.li`\n border-radius: 0;\n`;\n\nStyledTimeItem.defaultProps = defaultThemeProp;\n\nconst TimePicker: FunctionComponent<TimePickerProps & ForwardProps> = (props: TimePickerProps) => {\n const { locale } = useConfiguration();\n const { selected = new Date(0), interval = 30, clockFormat, onSelect, ...restProps } = props;\n\n const intervalInMS = interval 60000;\n\n const actionsList = Array.from(getIntervalGenerator(intervalInMS), time => {\n const date = new Date(selected);\n date.setUTCHours(time.getUTCHours(), time.getUTCMinutes());\n return {\n id: date.getTime().toString(),\n text: Intl.DateTimeFormat(locale, {\n hour: '2-digit',\n minute: '2-digit',\n timeZone: 'UTC',\n hour12: clockFormat ? clockFormat === 12 : is12HClockFormat(locale)\n }).format(date)\n };\n });\n\n const isSelected = (date: Date) => {\n return (\n selected?.getUTCHours() === date.getUTCHours() &&\n selected?.getUTCMinutes() === date.getUTCMinutes()\n );\n };\n\n const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n const menuRef = useRef<HTMLUListElement>(null);\n\n useArrows(menuRef, {\n selector: 'button',\n cycle: true,\n dir: 'up-down',\n allowTabFocus: false\n });\n\n const renderTime = (text: string) => {\n const [hour, minute, meridiem] = text.split(/:\| /);\n return (\n <>\n <span>{hour}</span>:<span>{minute}</span>\n {meridiem && <span>{meridiem}</span>}\n </>\n );\n };\n\n const setTabIndexes = useCallback(() => {\n const focusEl = menuRef.current;\n if (!focusEl) return;\n const focusableElements = Array.from(focusEl.querySelectorAll('button'));\n\n if (focusableElements.length > 0) {\n if ~~(!selected)~~ ~~(focusableElements[0] as HTMLElement).tabIndex~~ = 0;\n focusableElements.slice(1).forEach(item => {\n const checked = (item as HTMLInputElement).checked;\n if (checked) item.tabIndex = 0;\n else item.tabIndex = -1;\n });\n }\n }, [selected]);\n\n useEffect(() => {\n buttonEl?.focus();\n setTabIndexes();\n }, [buttonEl]);\n\n return (\n <StyledTimePicker role='menu' tabIndex={0} ref={menuRef} {...restProps}>\n {actionsList.map(({ text, id }: Action) => {\n const item = new Date(Number(id));\n return (\n <StyledTimeItem role='presentation' key={id}>\n <StyledTimeButton\n role='menuitem'\n as={Button}\n variant='simple'\n ref={isSelected(item) ? setButtonEl : null}\n aria-label={text}\n selected={isSelected(item)}\n checked={isSelected(item)}\n onClick={() => {\n onSelect?.(item);\n }}\n tabIndex='-1'\n >\n {renderTime(text)}\n </StyledTimeButton>\n </StyledTimeItem>\n );\n })}\n </StyledTimePicker>\n );\n};\n\nexport default TimePicker;\n"]}
1	+ {"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/TimePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useCallback, useEffect, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { BaseProps, Action, ForwardProps } from '../../../types';\nimport Button from '../../Button';\nimport { useArrows, useConfiguration, useElement } from '../../../hooks';\nimport { ClockFormat, is12HClockFormat } from '../Input/utils';\n\nimport { getIntervalGenerator } from './utils';\n\nexport type MinuteInterval = 15 \| 30 \| 60;\n\nexport interface TimePickerProps extends BaseProps {\n /*\n Defines default time that will be selected when the Time Picker is opened.\n * @default new Date()\n /\n selected?: Date;\n /* Callback fired when selected value changes. /\n onSelect?: (date: Date) => void;\n /\n Defines interval for time picker options (in minutes).\n * @default 30\n /\n interval?: MinuteInterval;\n /\n Defines clock format that overrides locale based format\n /\n clockFormat?: ClockFormat;\n}\n\nconst StyledTimePicker = styled.ul`\n list-style: none;\n max-height: 10rem;\n overflow: auto;\n width: 100%;\n`;\n\nStyledTimePicker.defaultProps = defaultThemeProp;\n\nconst StyledTimeButton = styled.button<TimePickerProps>`\n color: black;\n width: 100%;\n border-radius: inherit;\n overflow: hidden;\n text-align: start;\n text-overflow: ellipsis;\n white-space: nowrap;\n border-width: 0;\n justify-content: start;\n padding: 0;\n background-color: ${props =>\n props.selected ? props.theme.base.colors.blue['extra-light'] : 'transparent'};\n\n > span {\n margin-inline-end: 0.125rem;\n &:first-child {\n margin-inline-start: ${({ theme }) => theme.components['form-control']['border-width']};\n }\n &:nth-child(2) {\n margin-inline-start: 0.125rem;\n }\n &:first-child,\n &:nth-child(3) {\n padding-inline-start: 0.5rem;\n }\n }\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: inset ${props => props.theme.base.shadow.focus};\n }\n`;\n\nStyledTimeButton.defaultProps = defaultThemeProp;\n\nconst StyledTimeItem = styled.li`\n border-radius: 0;\n`;\n\nStyledTimeItem.defaultProps = defaultThemeProp;\n\nconst TimePicker: FunctionComponent<TimePickerProps & ForwardProps> = (props: TimePickerProps) => {\n const { locale } = useConfiguration();\n const { selected = new Date(0), interval = 30, clockFormat, onSelect, ...restProps } = props;\n\n const intervalInMS = interval 60000;\n\n const actionsList = Array.from(getIntervalGenerator(intervalInMS), time => {\n const date = new Date(selected);\n date.setUTCHours(time.getUTCHours(), time.getUTCMinutes());\n return {\n id: date.getTime().toString(),\n text: Intl.DateTimeFormat(locale, {\n hour: '2-digit',\n minute: '2-digit',\n timeZone: 'UTC',\n hour12: clockFormat ? clockFormat === 12 : is12HClockFormat(locale)\n }).format(date)\n };\n });\n\n const isSelected = (date: Date) => {\n return (\n selected?.getUTCHours() === date.getUTCHours() &&\n selected?.getUTCMinutes() === date.getUTCMinutes()\n );\n };\n\n const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n const menuRef = useRef<HTMLUListElement>(null);\n\n useArrows(menuRef, {\n selector: 'button',\n cycle: true,\n dir: 'up-down',\n allowTabFocus: false\n });\n\n const renderTime = (text: string) => {\n const [hour, minute, meridiem] = text.split(/:\| /);\n return (\n <>\n <span>{hour}</span>:<span>{minute}</span>\n {meridiem && <span>{meridiem}</span>}\n </>\n );\n };\n\n const setTabIndexes = useCallback(() => {\n const focusEl = menuRef.current;\n if (!focusEl) return;\n const focusableElements = Array.from(focusEl.querySelectorAll('button'));\n\n if (focusableElements.length > 0) {\n let isChecked = false;\n focusableElements.slice(1).forEach(item => {\n const checked = (item as HTMLInputElement).checked;\n if (checked) {\n isChecked = true;\n item.tabIndex = 0;\n } else item.tabIndex = -1;\n });\n\n if (!isChecked) {\n (focusableElements[0] as HTMLElement).tabIndex = 0;\n focusableElements[0].focus();\n }\n }\n }, [selected]);\n\n useEffect(() => {\n buttonEl?.focus();\n setTabIndexes();\n }, [buttonEl]);\n\n return (\n <StyledTimePicker role='menu' tabIndex={-1} ref={menuRef} {...restProps}>\n {actionsList.map(({ text, id }: Action) => {\n const item = new Date(Number(id));\n return (\n <StyledTimeItem role='presentation' key={id}>\n <StyledTimeButton\n role='menuitem'\n as={Button}\n variant='simple'\n ref={isSelected(item) ? setButtonEl : null}\n aria-label={text}\n selected={isSelected(item)}\n aria-current={isSelected(item) ? 'time' : undefined}\n checked={isSelected(item)}\n onClick={() => {\n onSelect?.(item);\n }}\n tabIndex='-1'\n >\n {renderTime(text)}\n </StyledTimeButton>\n </StyledTimeItem>\n );\n })}\n </StyledTimePicker>\n );\n};\n\nexport default TimePicker;\n"]}

package/lib/components/ExpandCollapse/ExpandCollapse.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandCollapse.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGjB,SAAS,EAMV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AAGjF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,EAAE,SAAS;IAC5D,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yIAAyI;IACzI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAmED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,~~CA0FzE~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"ExpandCollapse.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGjB,SAAS,EAMV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AAGjF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,EAAE,SAAS;IAC5D,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yIAAyI;IACzI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAmED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAgGzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/ExpandCollapse/ExpandCollapse.js CHANGED Viewed

@@ -87,7 +87,7 @@ const ExpandCollapse = forwardRef((props, refArg) => {
             transitionTimingFunction: themeAnimation.timing.ease
         });
     }
-    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, { ref: ref, onTransitionEnd: onTransitionEnd, ...restProps, style: style, children: children }));
+    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, { ref: ref, onTransitionEnd: onTransitionEnd, ...restProps, style: style, "aria-expanded": collapsed ? 'false' : 'true', children: children }));
 });
 export default ExpandCollapse;
 //# sourceMappingURL=ExpandCollapse.js.map

package/lib/components/ExpandCollapse/ExpandCollapse.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n Ref,\n forwardRef,\n ReactNode,\n PropsWithoutRef,\n useState,\n useLayoutEffect,\n useCallback,\n CSSProperties\n} from 'react';\n\nimport { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n /** Content to expand/collapse. /\n children?: ReactNode;\n /\n If true,the content will be hidden.\n * @default false\n /\n collapsed?: boolean;\n /\n Used to determine the transition property.\n * @default \"height\"\n /\n dimension?: 'height' \| 'width';\n /* Minimum height/width to collapse to. This will set the starting collapsed size as well. /\n min?: string;\n /* Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. /\n max?: string;\n /* Callback fired after content collapsed. /\n onAfterCollapse?: () => void;\n /* Callback fired after content expanded. /\n onAfterExpand?: () => void;\n /* Callback fired before content collapsed. /\n onBeforeCollapse?: () => void;\n /* Callback fired before content expanded. /\n onBeforeExpand?: () => void;\n /\n Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n * @default \"0.25s\"\n /\n transitionSpeed?: string;\n /\n If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n */\n nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n ExpandCollapseProps,\n 'collapsed' \| 'dimension' \| 'transitionSpeed' \| 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' \| 'collapsing' \| 'expanded' \| 'expanding';\n\ninterface GetStyleProps\n extends Pick<\n ExpandCollapsePropsWithDefaults,\n 'dimension' \| 'transitionSpeed' \| 'min' \| 'max' \| 'nullWhenCollapsed'\n > {\n status: Statuses;\n el?: HTMLElement \| null;\n transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n el: HTMLElement,\n dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n if (!el) return '';\n return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n const {\n status,\n dimension,\n transitionSpeed,\n transitionTimingFunction,\n min,\n max,\n nullWhenCollapsed,\n el\n } = props;\n const style: CSSProperties = {};\n let maxSize = max;\n\n if (el && !max) {\n maxSize = getScrollSize(el, dimension!);\n }\n\n if (status === 'expanded' \|\| status === 'collapsed') {\n if (max \|\| min) {\n style[dimension as 'height' \| 'width'] = status === 'expanded' ? maxSize : min \|\| 0;\n style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';\n }\n\n if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n style.display = 'none';\n }\n }\n\n if (status === 'expanding' \|\| status === 'collapsing') {\n style[dimension as 'height' \| 'width'] = status === 'expanding' ? maxSize : min \|\| 0;\n style.overflow = 'hidden';\n style.transitionProperty = dimension;\n style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n style.transitionTimingFunction = transitionTimingFunction;\n }\n\n return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) => {\n const {\n base: { animation: themeAnimation }\n } = useTheme();\n\n const {\n children,\n dimension = 'height',\n collapsed = false,\n onBeforeExpand,\n onAfterExpand,\n onBeforeCollapse,\n onAfterCollapse,\n transitionSpeed = themeAnimation.speed,\n min,\n max,\n nullWhenCollapsed = false,\n as: Tag = 'div',\n ...restProps\n } = props;\n\n const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n const styleStateHook = useState<CSSProperties>();\n const setStyle = styleStateHook[1];\n let style = styleStateHook[0];\n const previousStatus = usePrevious(status);\n const ref = useConsolidatedRef(refArg);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent) => {\n if (e.target !== ref.current \|\| e.propertyName !== dimension) return;\n setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n },\n [ref.current, status]\n );\n\n useLayoutEffect(() => {\n const wantsToCollapse = collapsed;\n const wantsToExpand = !collapsed;\n const canCollapse = ['expanded', 'expanding'].includes(status);\n const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n if (wantsToExpand && canExpand) {\n onBeforeExpand?.();\n setStatus('expanding');\n } else if (wantsToCollapse && canCollapse) {\n onBeforeCollapse?.();\n setStatus('collapsing');\n }\n\n if (status === 'expanded' && previousStatus !== 'expanded') {\n onAfterExpand?.();\n } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n onAfterCollapse?.();\n }\n\n setStyle(\n getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status,\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n })\n );\n }, [collapsed, status, min, max]);\n\n if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n style = getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status: status === 'expanding' ? 'collapsing' : 'expanding',\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n });\n }\n\n return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n <Tag ref={ref} onTransitionEnd={onTransitionEnd} {...restProps} style={style}>\n {children}\n </Tag>\n );\n }\n);\n\nexport default ExpandCollapse;\n"]}
1	+ {"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n Ref,\n forwardRef,\n ReactNode,\n PropsWithoutRef,\n useState,\n useLayoutEffect,\n useCallback,\n CSSProperties\n} from 'react';\n\nimport { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n /** Content to expand/collapse. /\n children?: ReactNode;\n /\n If true,the content will be hidden.\n * @default false\n /\n collapsed?: boolean;\n /\n Used to determine the transition property.\n * @default \"height\"\n /\n dimension?: 'height' \| 'width';\n /* Minimum height/width to collapse to. This will set the starting collapsed size as well. /\n min?: string;\n /* Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. /\n max?: string;\n /* Callback fired after content collapsed. /\n onAfterCollapse?: () => void;\n /* Callback fired after content expanded. /\n onAfterExpand?: () => void;\n /* Callback fired before content collapsed. /\n onBeforeCollapse?: () => void;\n /* Callback fired before content expanded. /\n onBeforeExpand?: () => void;\n /\n Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n * @default \"0.25s\"\n /\n transitionSpeed?: string;\n /\n If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n */\n nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n ExpandCollapseProps,\n 'collapsed' \| 'dimension' \| 'transitionSpeed' \| 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' \| 'collapsing' \| 'expanded' \| 'expanding';\n\ninterface GetStyleProps\n extends Pick<\n ExpandCollapsePropsWithDefaults,\n 'dimension' \| 'transitionSpeed' \| 'min' \| 'max' \| 'nullWhenCollapsed'\n > {\n status: Statuses;\n el?: HTMLElement \| null;\n transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n el: HTMLElement,\n dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n if (!el) return '';\n return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n const {\n status,\n dimension,\n transitionSpeed,\n transitionTimingFunction,\n min,\n max,\n nullWhenCollapsed,\n el\n } = props;\n const style: CSSProperties = {};\n let maxSize = max;\n\n if (el && !max) {\n maxSize = getScrollSize(el, dimension!);\n }\n\n if (status === 'expanded' \|\| status === 'collapsed') {\n if (max \|\| min) {\n style[dimension as 'height' \| 'width'] = status === 'expanded' ? maxSize : min \|\| 0;\n style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';\n }\n\n if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n style.display = 'none';\n }\n }\n\n if (status === 'expanding' \|\| status === 'collapsing') {\n style[dimension as 'height' \| 'width'] = status === 'expanding' ? maxSize : min \|\| 0;\n style.overflow = 'hidden';\n style.transitionProperty = dimension;\n style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n style.transitionTimingFunction = transitionTimingFunction;\n }\n\n return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) => {\n const {\n base: { animation: themeAnimation }\n } = useTheme();\n\n const {\n children,\n dimension = 'height',\n collapsed = false,\n onBeforeExpand,\n onAfterExpand,\n onBeforeCollapse,\n onAfterCollapse,\n transitionSpeed = themeAnimation.speed,\n min,\n max,\n nullWhenCollapsed = false,\n as: Tag = 'div',\n ...restProps\n } = props;\n\n const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n const styleStateHook = useState<CSSProperties>();\n const setStyle = styleStateHook[1];\n let style = styleStateHook[0];\n const previousStatus = usePrevious(status);\n const ref = useConsolidatedRef(refArg);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent) => {\n if (e.target !== ref.current \|\| e.propertyName !== dimension) return;\n setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n },\n [ref.current, status]\n );\n\n useLayoutEffect(() => {\n const wantsToCollapse = collapsed;\n const wantsToExpand = !collapsed;\n const canCollapse = ['expanded', 'expanding'].includes(status);\n const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n if (wantsToExpand && canExpand) {\n onBeforeExpand?.();\n setStatus('expanding');\n } else if (wantsToCollapse && canCollapse) {\n onBeforeCollapse?.();\n setStatus('collapsing');\n }\n\n if (status === 'expanded' && previousStatus !== 'expanded') {\n onAfterExpand?.();\n } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n onAfterCollapse?.();\n }\n\n setStyle(\n getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status,\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n })\n );\n }, [collapsed, status, min, max]);\n\n if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n style = getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status: status === 'expanding' ? 'collapsing' : 'expanding',\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n });\n }\n\n return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n <Tag\n ref={ref}\n onTransitionEnd={onTransitionEnd}\n {...restProps}\n style={style}\n aria-expanded={collapsed ? 'false' : 'true'}\n >\n {children}\n </Tag>\n );\n }\n);\n\nexport default ExpandCollapse;\n"]}

package/lib/components/FieldGroup/FieldGroup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASjG,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAQD,eAAO,MAAM,sBAAsB;UAAyB,OAAO;~~SAsClE~~,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAqC5B,CAAC;AAoBF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAgEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASjG,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAQD,eAAO,MAAM,sBAAsB;UAAyB,OAAO;SAyClE,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAqC5B,CAAC;AAoBF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAgEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/FieldGroup/FieldGroup.js CHANGED Viewed

@@ -9,37 +9,40 @@ import Icon, { StyledIcon, registerIcon } from '../Icon';
 import * as caretRightIcon from '../Icon/icons/caret-right.icon';
 import Actions from '../Actions';
 import { defaultThemeProp } from '../../theme';
-import { useI18n, useUID } from '../../hooks';
+import { useDirection, useI18n, useUID } from '../../hooks';
 import { calculateFontSize } from '../../styles';
 registerIcon(caretRightIcon);
-export const StyledFieldGroupLegend = styled.legend(({ open, theme: { base: { spacing, animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => css `
-    width: 100%;
-    margin-bottom: 0;
-    ${open &&
-    css `
-      margin-block-end: calc(1.5 * ${spacing});
-    `}
-    transition: margin-block-end ${animation.speed} ${animation.timing.ease};
+export const StyledFieldGroupLegend = styled.legend(({ open, theme: { base: { spacing, animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => {
+    const { rtl } = useDirection();
+    return css `
+      width: 100%;
+      margin-bottom: 0;
+      ${open &&
+        css `
+        margin-block-end: calc(1.5 * ${spacing});
+      `}
+      transition: margin-block-end ${animation.speed} ${animation.timing.ease};
-    button ${StyledIcon} {
-      transition: transform ${animation.speed} ${animation.timing.ease};
-    }
+      button ${StyledIcon} {
+        transition: transform ${animation.speed} ${animation.timing.ease};
+      }
-    button[aria-expanded='true'] ${StyledIcon} {
-      transform: rotate(90deg);
-    }
-    button[aria-expanded='false'] ${StyledIcon} {
-      transform: rotate(0);
-    }
+      button[aria-expanded='true'] ${StyledIcon} {
+        transform: rotate(90deg);
+      }
+      button[aria-expanded='false'] ${StyledIcon} {
+        transform: rotate(${rtl ? 180 : 0}deg);
+      }
-    > ${StyledFlex} ${StyledButton} {
-      min-height: ${hitAreaMouse};
+      > ${StyledFlex} ${StyledButton} {
+        min-height: ${hitAreaMouse};
-      @media (pointer: 'coarse') {
-        min-height: ${hitAreaFinger};
+        @media (pointer: 'coarse') {
+          min-height: ${hitAreaFinger};
+        }
       }
-    }
-  `);
+    `;
+});
 StyledFieldGroupLegend.defaultProps = defaultThemeProp;
 export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale }, components: { text } } }) => {
     const fontSizes = calculateFontSize(fontSize, fontScale);

package/lib/components/FieldGroup/FieldGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex, { StyledFlex } from '../Flex';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n /** The content of the Field Group. /\n children: ReactNode;\n /* A description of the field group to be displayed above the controls. /\n description?: string;\n /\n If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n * @default false\n /\n collapsible?: boolean;\n /\n If true, the Field Group will be collapsed on the first render.\n * @default false\n /\n defaultCollapsed?: boolean;\n /* The name associated with the Field Group. /\n name?: string;\n /* An array of actions to add to the header. /\n actions?: ActionsProps['items'];\n /* A reference to the wrapping element. /\n ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n open: boolean;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n}\n\nexport const StyledFieldGroupLegend = styled.legend<{ open: boolean }>(\n ({\n open,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => css`\n width: 100%;\n margin-bottom: 0;\n ${open &&\n css`\n margin-block-end: calc(1.5 ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n button ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n button[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n button[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(0);\n }\n\n > ${StyledFlex} ${StyledButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n ${StyledFieldGroupLegend} ${StyledButton} {\n font-weight: inherit;\n }\n\n & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n children,\n open,\n actions,\n ...restProps\n}) => {\n return (\n <StyledFieldGroupLegend open={open} {...restProps}>\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n {children}\n {actions && <Actions items={actions} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n (\n {\n children,\n description,\n name,\n actions,\n collapsible = false,\n defaultCollapsed = false,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n ) => {\n const [open, setOpen] = useState(!defaultCollapsed);\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <Flex container={{ direction: 'column', gap: 3 }}>\n {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n <div>{children}</div>\n </Flex>\n );\n\n return (\n <StyledFieldGroup\n aria-label={name}\n aria-describedby={description ? `${uid}-description` : undefined}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend open={open} actions={actions}>\n {collapsible ? (\n <Button\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open ? 'true' : 'false'}\n aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n <span>{name}</span>\n </Flex>\n </Button>\n ) : (\n <span>{name}</span>\n )}\n </FieldGroupLegend>\n )}\n {collapsible ? (\n <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n );\n }\n);\n\nexport default FieldGroup;\n"]}
1	+ {"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex, { StyledFlex } from '../Flex';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n /** The content of the Field Group. /\n children: ReactNode;\n /* A description of the field group to be displayed above the controls. /\n description?: string;\n /\n If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n * @default false\n /\n collapsible?: boolean;\n /\n If true, the Field Group will be collapsed on the first render.\n * @default false\n /\n defaultCollapsed?: boolean;\n /* The name associated with the Field Group. /\n name?: string;\n /* An array of actions to add to the header. /\n actions?: ActionsProps['items'];\n /* A reference to the wrapping element. /\n ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n open: boolean;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n}\n\nexport const StyledFieldGroupLegend = styled.legend<{ open: boolean }>(\n ({\n open,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => {\n const { rtl } = useDirection();\n return css`\n width: 100%;\n margin-bottom: 0;\n ${open &&\n css`\n margin-block-end: calc(1.5 ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n button ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n button[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n button[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n\n > ${StyledFlex} ${StyledButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `;\n }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n ${StyledFieldGroupLegend} ${StyledButton} {\n font-weight: inherit;\n }\n\n & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n children,\n open,\n actions,\n ...restProps\n}) => {\n return (\n <StyledFieldGroupLegend open={open} {...restProps}>\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n {children}\n {actions && <Actions items={actions} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n (\n {\n children,\n description,\n name,\n actions,\n collapsible = false,\n defaultCollapsed = false,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n ) => {\n const [open, setOpen] = useState(!defaultCollapsed);\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <Flex container={{ direction: 'column', gap: 3 }}>\n {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n <div>{children}</div>\n </Flex>\n );\n\n return (\n <StyledFieldGroup\n aria-label={name}\n aria-describedby={description ? `${uid}-description` : undefined}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend open={open} actions={actions}>\n {collapsible ? (\n <Button\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open ? 'true' : 'false'}\n aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n <span>{name}</span>\n </Flex>\n </Button>\n ) : (\n <span>{name}</span>\n )}\n </FieldGroupLegend>\n )}\n {collapsible ? (\n <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n );\n }\n);\n\nexport default FieldGroup;\n"]}

package/lib/components/FormControl/FormControl.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export interface FormControlProps extends BaseProps {
      */
     id?: string;
     /** Set visual state based on a validation state. */
-    status?: 'success' | 'warning' | 'error';
+    status?: 'success' | 'warning' | 'error' | 'pending';
     /** Pass a string or a fragment with an Icon and string. */
     label?: ReactNode;
     /** Visually hides the label region. */
@@ -33,8 +33,12 @@ export interface FormControlProps extends BaseProps {
     readOnly?: boolean;
     /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */
     name?: string;
+    /** Callback fired when AI suggestion is accepted/rejected */
+    onResolveSuggestion?: (accepted: boolean) => void;
 }
-export declare const StyledFormControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<FormControlProps, never> & Required<Pick<FormControlProps, never>>, never>;
+export declare const StyledFormControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<FormControlProps, never> & Required<Pick<FormControlProps, never>> & {
+    hasSuggestion?: boolean | undefined;
+}, never>;
 declare const FormControl: FunctionComponent<FormControlProps & ForwardProps>;
 export default FormControl;
 //# sourceMappingURL=FormControl.d.ts.map

package/lib/components/FormControl/FormControl.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAGvF~~,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAIzE,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;~~IACzC~~,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;~~CACf~~;AAID,eAAO,MAAM,iBAAiB,~~0MAwE5B,~~CAAC;~~AAIH~~,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAIzE,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACrD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,eAAO,MAAM,iBAAiB;;SA2G7B,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/FormControl/FormControl.js CHANGED Viewed

@@ -1,53 +1,78 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { mix, rgba } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import { calculateFontSize } from '../../styles';
-export const StyledFormControl = styled.div(props => {
-    const { theme: { base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale }, components: { 'form-field': formField, 'form-control': { 'foreground-color': foreground, 'background-color': background, 'border-color': brd, 'border-radius': radius, 'border-width': borderWidth, ':hover': { 'border-color': hoverBorderColor }, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }, ':disabled': { 'border-color': disabledBorderColor, 'background-color': disabledBackgroundColor }, ':read-only': { 'border-color': readOnlyBorderColor, 'background-color': readOnlyBackgroundColor } } } }, status } = props;
+export const StyledFormControl = styled.div(({ theme: { base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale, animation: { speed, timing }, palette }, components: { 'form-field': formField, 'form-control': { 'foreground-color': foreground, 'background-color': background, 'border-color': brd, 'border-radius': radius, 'border-width': borderWidth, ':hover': { 'border-color': hoverBorderColor }, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }, ':disabled': { 'border-color': disabledBorderColor, 'background-color': disabledBackgroundColor }, ':read-only': { 'border-color': readOnlyBorderColor, 'background-color': readOnlyBackgroundColor } } } }, status, hasSuggestion }) => {
     const fontSize = calculateFontSize(baseFontSize, baseFontScale);
     const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;
+    const backgroundColor = hasSuggestion && status
+        ? mix(0.1, formField[status]['status-color'], palette['primary-background'])
+        : background;
     return css `
-    color: ${foreground};
-    background-color: ${background};
-    border-radius: calc(${baseRadius} * ${radius});
-    border-color: ${borderColor};
-    border-width: ${borderWidth};
-    border-style: solid;
-    &,
-    & > select {
-      outline: none;
-    }
+      color: ${foreground};
+      background-color: ${backgroundColor};
+      border-radius: calc(${baseRadius} * ${radius});
+      border-color: ${borderColor};
+      border-width: ${borderWidth};
+      border-style: solid;
+      transition: all ${timing.ease} ${speed};
+      &,
+      & > select {
+        outline: none;
+      }
+      &:disabled,
+      &[disabled] {
+        background-color: ${disabledBackgroundColor};
+        border-color: ${disabledBorderColor};
+        cursor: not-allowed;
+      }
-    &:disabled,
-    &[disabled] {
-      background-color: ${disabledBackgroundColor};
-      border-color: ${disabledBorderColor};
-      cursor: not-allowed;
-    }
+      &:focus:not([disabled]) {
+        border-color: ${focusBorderColor};
+        box-shadow: ${shadow};
+        ${hasSuggestion &&
+        css `
+          background-color: ${background};
+        `}
+      }
-    &:focus:not([disabled]) {
-      border-color: ${focusBorderColor};
-      box-shadow: ${shadow};
-    }
+      &:focus-within:not([disabled]) {
+        ${hasSuggestion &&
+        css `
+          background-color: ${background};
+        `}
+      }
-    ${!status &&
+      &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {
+        ${!status &&
+        css `
+          border-color: ${hoverBorderColor};
+        `}
+        ${hasSuggestion &&
         css `
-      &:hover:not([readonly]):not([disabled]):not(:focus) {
-        border-color: ${hoverBorderColor};
+          background-color: ${background};
+          box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};
+        `}
       }
-    `}
-    &[readonly] {
-      background-color: ${readOnlyBackgroundColor};
-      border-color: ${readOnlyBorderColor};
-    }
+      ${hasSuggestion &&
+        css `
+        border-end-end-radius: 0;
+      `}
+      &[readonly] {
+        background-color: ${readOnlyBackgroundColor};
+        border-color: ${readOnlyBorderColor};
+      }
-    @media (pointer: coarse) {
-      /* stylelint-disable-next-line unit-allowed-list */
-      font-size: max(${fontSize.s}, 16px);
-    }
-  `;
+      @media (pointer: coarse) {
+        /* stylelint-disable-next-line unit-allowed-list */
+        font-size: max(${fontSize.s}, 16px);
+      }
+    `;
 });
 StyledFormControl.defaultProps = defaultThemeProp;
 const FormControl = forwardRef((props, ref) => {