@planningcenter/tapestry 3.2.3-rc.2 → 3.2.3-rc.21

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 (69) hide show
  1. package/dist/components/button/BaseButton.d.ts +4 -0
  2. package/dist/components/button/BaseButton.d.ts.map +1 -1
  3. package/dist/components/button/BaseButton.js.map +1 -1
  4. package/dist/components/button/Button.d.ts +2 -0
  5. package/dist/components/button/Button.d.ts.map +1 -1
  6. package/dist/components/button/Button.js.map +1 -1
  7. package/dist/components/button/DropdownButton.d.ts +2 -0
  8. package/dist/components/button/DropdownButton.d.ts.map +1 -1
  9. package/dist/components/button/DropdownButton.js.map +1 -1
  10. package/dist/components/button/IconButton.d.ts +4 -0
  11. package/dist/components/button/IconButton.d.ts.map +1 -1
  12. package/dist/components/button/IconButton.js.map +1 -1
  13. package/dist/components/button/LoadingButton.d.ts +2 -0
  14. package/dist/components/button/LoadingButton.d.ts.map +1 -1
  15. package/dist/components/button/LoadingButton.js.map +1 -1
  16. package/dist/components/button/PageHeaderActionsDropdownButton.d.ts +2 -0
  17. package/dist/components/button/PageHeaderActionsDropdownButton.d.ts.map +1 -1
  18. package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
  19. package/dist/components/checkbox/Checkbox.d.ts +4 -0
  20. package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
  21. package/dist/components/checkbox/Checkbox.js.map +1 -1
  22. package/dist/components/checkbox-group/CheckboxGroup.d.ts +4 -0
  23. package/dist/components/checkbox-group/CheckboxGroup.d.ts.map +1 -1
  24. package/dist/components/checkbox-group/CheckboxGroup.js.map +1 -1
  25. package/dist/components/combo-box/ComboBox.d.ts +17 -4
  26. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  27. package/dist/components/combo-box/ComboBox.js +21 -4
  28. package/dist/components/combo-box/ComboBox.js.map +1 -1
  29. package/dist/components/combo-box/index.d.ts +1 -1
  30. package/dist/components/combo-box/index.d.ts.map +1 -1
  31. package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
  32. package/dist/components/date-picker/DatePicker.js +8 -6
  33. package/dist/components/date-picker/DatePicker.js.map +1 -1
  34. package/dist/components/link/IconLink.d.ts +2 -0
  35. package/dist/components/link/IconLink.d.ts.map +1 -1
  36. package/dist/components/link/IconLink.js.map +1 -1
  37. package/dist/components/page-header/PageHeader.d.ts +6 -3
  38. package/dist/components/page-header/PageHeader.d.ts.map +1 -1
  39. package/dist/components/page-header/PageHeader.js.map +1 -1
  40. package/dist/components/radio/Radio.d.ts +3 -0
  41. package/dist/components/radio/Radio.d.ts.map +1 -1
  42. package/dist/components/radio/Radio.js.map +1 -1
  43. package/dist/components/radio-group/RadioGroup.d.ts +4 -0
  44. package/dist/components/radio-group/RadioGroup.d.ts.map +1 -1
  45. package/dist/components/radio-group/RadioGroup.js.map +1 -1
  46. package/dist/components/select/Select.d.ts +59 -9
  47. package/dist/components/select/Select.d.ts.map +1 -1
  48. package/dist/components/select/Select.js.map +1 -1
  49. package/dist/components/time-field/TimeField.d.ts +8 -18
  50. package/dist/components/time-field/TimeField.d.ts.map +1 -1
  51. package/dist/components/time-field/TimeField.js +2 -2
  52. package/dist/components/time-field/TimeField.js.map +1 -1
  53. package/dist/components/time-field/index.d.ts +1 -1
  54. package/dist/components/time-field/index.d.ts.map +1 -1
  55. package/dist/components/toggle-switch/ToggleSwitch.d.ts +10 -4
  56. package/dist/components/toggle-switch/ToggleSwitch.d.ts.map +1 -1
  57. package/dist/components/toggle-switch/ToggleSwitch.js.map +1 -1
  58. package/dist/index.css +34 -20
  59. package/dist/index.css.map +1 -1
  60. package/dist/reactRender.css +1164 -1070
  61. package/dist/reactRender.css.map +1 -1
  62. package/dist/reactRenderLegacy.css +1164 -1070
  63. package/dist/reactRenderLegacy.css.map +1 -1
  64. package/dist/unstable.css +205 -111
  65. package/dist/unstable.css.map +1 -1
  66. package/dist/utilities/buttonLinkShared.d.ts +5 -0
  67. package/dist/utilities/buttonLinkShared.d.ts.map +1 -1
  68. package/dist/utilities/buttonLinkShared.js.map +1 -1
  69. package/package.json +2 -2
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.js","sources":["../../../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"./index.css\"\n\nimport {\n CalendarDate,\n type DateValue,\n getLocalTimeZone,\n parseDate,\n today as todayCalendar,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode, useContext, useState } from \"react\"\nimport {\n Button,\n Calendar,\n CalendarCell,\n CalendarGrid,\n CalendarGridBody,\n CalendarGridHeader,\n CalendarHeaderCell,\n CalendarStateContext,\n DateInput,\n DatePicker as AriaDatePicker,\n type DatePickerProps as AriaDatePickerProps,\n DateSegment,\n Group,\n Heading,\n Label,\n ListBox,\n ListBoxItem,\n Popover,\n Text,\n} from \"react-aria-components\"\n\nconst _today = todayCalendar(getLocalTimeZone())\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i)\nconst YEARS = Array.from({ length: 131 }, (_, i) => _today.year - 100 + i)\nconst shortMonthFormatter = new Intl.DateTimeFormat(undefined, {\n month: \"short\",\n})\nconst longMonthFormatter = new Intl.DateTimeFormat(undefined, { month: \"long\" })\n\nexport type DatePickerSize = \"md\" | \"lg\"\n\nexport type DatePickerDateValue = DateValue | string\n\nfunction toCalendarDate(\n input: DatePickerDateValue | null | undefined\n): DateValue | null | undefined {\n if (input === null) return null\n if (input === undefined) return undefined\n\n if (typeof input === \"object\" && \"calendar\" in input) {\n return input\n }\n\n return parseDate(input)\n}\n\nexport interface DatePickerProps {\n /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n description?: string\n /** Disables the input and calendar button. */\n disabled?: boolean\n /** Sets the first day of the week in the calendar. Defaults to locale-appropriate value. */\n firstDayOfWeek?: \"fri\" | \"mon\" | \"sat\" | \"sun\" | \"thu\" | \"tue\" | \"wed\"\n /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n hideLabel?: boolean\n /** Whether the input is in an invalid state. */\n invalid?: boolean\n /** Callback that returns `true` for dates that should be visible but not selectable. */\n isDateUnavailable?: (date: DateValue) => boolean\n /** Accessible label for the field. */\n label: string\n /** Maximum selectable date. Accepts a DateValue or ISO date string. */\n max?: DatePickerDateValue\n /** Minimum selectable date. Accepts a DateValue or ISO date string. */\n min?: DatePickerDateValue\n /** Called when the selected date changes. */\n onChange?: (value: DateValue | null) => void\n /** If `true`, allows the value to be read but not changed. */\n readOnly?: boolean\n /** If `true`, appends an asterisk at the end of the label text. */\n required?: boolean\n /** The size of the date picker. */\n size?: DatePickerSize\n /** The controlled value. Accepts a DateValue or ISO date string. */\n value?: DatePickerDateValue | null\n}\n\ntype AriaDatePickerPropsToOmit =\n | \"children\"\n | \"defaultOpen\"\n | \"defaultValue\"\n | \"granularity\"\n | \"hideTimeZone\"\n | \"hourCycle\"\n | \"pageBehavior\"\n | \"placeholderValue\"\n | \"shouldCloseOnSelect\"\n | \"shouldForceLeadingZeros\"\n | \"slot\"\n\ntype AriaDatePickerPropsToInclude = \"isOpen\" | \"name\" | \"onOpenChange\"\n\nexport type DatePickerElementProps = CombineAriaPropsWithCustomProps<\n AriaDatePickerProps<DateValue>,\n DatePickerProps,\n AriaDatePickerPropsToOmit,\n AriaDatePickerPropsToInclude\n>\n\nfunction DatePickerOverlay({\n children,\n variant,\n}: {\n children: ReactNode\n variant: \"month\" | \"year\"\n}) {\n return (\n <div\n aria-label={`Select ${variant}`}\n aria-modal=\"true\"\n className={`tds-date-picker-overlay tds-date-picker-overlay--${variant}`}\n role=\"dialog\"\n >\n {children}\n </div>\n )\n}\n\nfunction DatePickerCalendarBody({\n activeOverlay,\n setActiveOverlay,\n}: {\n activeOverlay: \"month\" | \"year\" | null\n setActiveOverlay: (overlay: \"month\" | \"year\" | null) => void\n}) {\n // Read and drive Calendar's focused date through its state context. This\n // lets react-aria-components own the \"open to selected month\" behavior:\n // when the popover opens, Calendar mounts and auto-focuses the DatePicker's\n // current value (whether typed into the input segments or set via `value`).\n const state = useContext(CalendarStateContext)!\n const focusedDate = state.focusedDate\n\n function handleOverlaySelectionChange(\n keys: \"all\" | Set<number | string>,\n onSelect: (key: number) => void\n ) {\n if (keys === \"all\") return\n const [first] = Array.from(keys)\n if (first !== undefined) onSelect(Number(first))\n }\n\n function handleMonthSelect(monthIndex: number) {\n state.setFocusedDate(new CalendarDate(focusedDate.year, monthIndex + 1, 1))\n setActiveOverlay(null)\n }\n\n function handleYearSelect(year: number) {\n state.setFocusedDate(new CalendarDate(year, focusedDate.month, 1))\n setActiveOverlay(null)\n }\n\n return (\n <>\n <header className=\"tds-date-picker-calendar-header\">\n <Heading className=\"tds-date-picker-calendar-title tds-date-picker-calendar-title--visually-hidden\" />\n <div className=\"tds-date-picker-calendar-heading\">\n <Button\n aria-expanded={activeOverlay === \"month\"}\n aria-haspopup=\"dialog\"\n className=\"tds-date-picker-calendar-overlay-trigger\"\n onPress={() =>\n setActiveOverlay(activeOverlay === \"month\" ? null : \"month\")\n }\n slot={null}\n >\n {longMonthFormatter.format(\n new Date(2000, focusedDate.month - 1, 1)\n )}\n </Button>\n <Button\n aria-expanded={activeOverlay === \"year\"}\n aria-haspopup=\"dialog\"\n className=\"tds-date-picker-calendar-overlay-trigger\"\n onPress={() =>\n setActiveOverlay(activeOverlay === \"year\" ? null : \"year\")\n }\n slot={null}\n >\n {focusedDate.year}\n </Button>\n </div>\n {activeOverlay ? (\n <Button\n aria-label={`Close ${activeOverlay} picker`}\n className=\"tds-date-picker-calendar-nav\"\n onPress={() => setActiveOverlay(null)}\n slot={null}\n >\n <Icon aria-hidden symbol=\"general#x\" />\n </Button>\n ) : (\n <>\n <Button\n aria-label=\"Go to today\"\n className=\"tds-date-picker-calendar-nav\"\n style={{\n visibility:\n focusedDate.month === _today.month &&\n focusedDate.year === _today.year\n ? \"hidden\"\n : undefined,\n }}\n onPress={() => {\n const today = todayCalendar(getLocalTimeZone())\n state.setFocusedDate(today)\n state.setFocused(true)\n }}\n slot={null}\n >\n {/* TODO: Add to icon library and use Icon once icon is decided on */}\n <svg\n aria-hidden\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n height=\"14\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M13.444 14.222H2.556V5.667H13.444V14.222ZM13.444 1.778H12.667V0.222H11.111V1.778H4.889V0.222H3.333V1.778H2.556C2.35212 1.778 2.15025 1.81827 1.96199 1.8965C1.77372 1.97473 1.60275 2.08938 1.45892 2.23387C1.31508 2.37836 1.2012 2.54984 1.12382 2.73846C1.04644 2.92708 1.00708 3.12913 1.008 3.333L1 14.222C0.999869 14.4264 1.04003 14.6288 1.11818 14.8176C1.19633 15.0065 1.31093 15.178 1.45545 15.3226C1.59996 15.4671 1.77155 15.5817 1.96039 15.6598C2.14923 15.738 2.35163 15.7781 2.556 15.778H13.444C13.8564 15.7769 14.2515 15.6127 14.5431 15.3211C14.8347 15.0295 14.9989 14.6344 15 14.222V3.333C14.9987 2.92082 14.8343 2.52592 14.5427 2.23455C14.2512 1.94319 13.8562 1.77905 13.444 1.778Z\" />\n <circle cx=\"8\" cy=\"9.75\" r=\"2.25\" />\n </svg>\n </Button>\n <Button\n aria-label=\"Previous month\"\n className=\"tds-date-picker-calendar-nav\"\n slot=\"previous\"\n >\n <Icon aria-hidden symbol=\"general#left-chevron\" />\n </Button>\n <Button\n aria-label=\"Next month\"\n className=\"tds-date-picker-calendar-nav\"\n slot=\"next\"\n >\n <Icon aria-hidden symbol=\"general#right-chevron\" />\n </Button>\n </>\n )}\n </header>\n <div className=\"tds-date-picker-calendar-body\">\n {activeOverlay === \"month\" && (\n <DatePickerOverlay variant=\"month\">\n <ListBox\n aria-label=\"Months\"\n // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n autoFocus\n className=\"tds-date-picker-overlay-list\"\n disallowEmptySelection\n escapeKeyBehavior=\"none\"\n layout=\"grid\"\n onSelectionChange={(keys) =>\n handleOverlaySelectionChange(keys, handleMonthSelect)\n }\n selectedKeys={[String(focusedDate.month - 1)]}\n selectionMode=\"single\"\n >\n {MONTHS.map((i) => {\n const date = new Date(2000, i, 1)\n const shortMonth = shortMonthFormatter.format(date)\n const longMonth = longMonthFormatter.format(date)\n\n return (\n <ListBoxItem\n className=\"tds-date-picker-overlay-cell\"\n id={String(i)}\n key={i}\n aria-label={longMonth}\n textValue={longMonth}\n >\n {shortMonth}\n </ListBoxItem>\n )\n })}\n </ListBox>\n </DatePickerOverlay>\n )}\n {activeOverlay === \"year\" && (\n <DatePickerOverlay variant=\"year\">\n <ListBox\n aria-label=\"Years\"\n // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n autoFocus\n className=\"tds-date-picker-overlay-list\"\n disallowEmptySelection\n escapeKeyBehavior=\"none\"\n layout=\"grid\"\n onSelectionChange={(keys) =>\n handleOverlaySelectionChange(keys, handleYearSelect)\n }\n selectedKeys={[String(focusedDate.year)]}\n selectionMode=\"single\"\n >\n {YEARS.map((year) => (\n <ListBoxItem\n className=\"tds-date-picker-overlay-cell\"\n id={String(year)}\n key={year}\n textValue={String(year)}\n >\n {year}\n </ListBoxItem>\n ))}\n </ListBox>\n </DatePickerOverlay>\n )}\n <CalendarGrid className=\"tds-date-picker-calendar-grid\">\n <CalendarGridHeader className=\"tds-date-picker-calendar-grid-header\">\n {(day) => (\n <CalendarHeaderCell className=\"tds-date-picker-calendar-header-cell\">\n {day}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody className=\"tds-date-picker-calendar-grid-body\">\n {(date) => (\n <CalendarCell\n className=\"tds-date-picker-calendar-cell\"\n date={date}\n />\n )}\n </CalendarGridBody>\n </CalendarGrid>\n </div>\n </>\n )\n}\n\nexport function DatePicker({\n className,\n description,\n disabled,\n firstDayOfWeek,\n hideLabel,\n invalid,\n isDateUnavailable,\n label,\n max,\n min,\n onChange,\n readOnly,\n required,\n size = \"md\",\n value,\n ...restProps\n}: DatePickerElementProps) {\n const convertedValue = toCalendarDate(value)\n const convertedMin = toCalendarDate(min) ?? undefined\n const convertedMax = toCalendarDate(max) ?? undefined\n\n const combinedClassName = classNames(\n \"tds-date-picker\",\n { \"tds-date-picker--lg\": size === \"lg\" },\n className\n )\n\n const [activeOverlay, setActiveOverlay] = useState<\"month\" | \"year\" | null>(\n null\n )\n\n return (\n <AriaDatePicker\n {...restProps}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n isDateUnavailable={isDateUnavailable}\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n maxValue={convertedMax}\n minValue={convertedMin}\n onChange={onChange ?? undefined}\n onOpenChange={(isOpen) => {\n if (!isOpen) setActiveOverlay(null)\n }}\n value={convertedValue}\n >\n {!hideLabel && <Label className=\"tds-date-picker-label\">{label}</Label>}\n <Group className=\"tds-date-picker-field\">\n <DateInput className=\"tds-date-picker-input\">\n {(segment) => (\n <DateSegment\n className={\n segment.type === \"literal\"\n ? \"tds-date-picker-segment-separator\"\n : \"tds-date-picker-segment\"\n }\n segment={segment}\n />\n )}\n </DateInput>\n <Button className=\"tds-btn tds-btn--infield tds-date-picker-button\">\n <Icon aria-hidden symbol=\"general#calendar\" />\n </Button>\n </Group>\n <Popover className=\"tds-date-picker-popover\">\n <Calendar\n className=\"tds-date-picker-calendar\"\n firstDayOfWeek={firstDayOfWeek}\n >\n <DatePickerCalendarBody\n activeOverlay={activeOverlay}\n setActiveOverlay={setActiveOverlay}\n />\n </Calendar>\n </Popover>\n {description && (\n <Text\n elementType=\"p\"\n className=\"tds-date-picker-description\"\n slot=\"description\"\n >\n <Icon\n aria-hidden\n className=\"tds-date-picker-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaDatePicker>\n )\n}\n\nDatePicker.displayName = \"DatePicker\"\n"],"names":["todayCalendar","getLocalTimeZone","parseDate","React","CalendarDate","AriaDatePicker"],"mappings":"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"}
1
+ {"version":3,"file":"DatePicker.js","sources":["../../../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"./index.css\"\n\nimport {\n CalendarDate,\n type DateValue,\n getLocalTimeZone,\n parseDate,\n today as todayCalendar,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode, useContext, useState } from \"react\"\nimport {\n Button,\n Calendar,\n CalendarCell,\n CalendarGrid,\n CalendarGridBody,\n CalendarGridHeader,\n CalendarHeaderCell,\n CalendarStateContext,\n DateInput,\n DatePicker as AriaDatePicker,\n type DatePickerProps as AriaDatePickerProps,\n DateSegment,\n Group,\n Heading,\n Label,\n ListBox,\n ListBoxItem,\n Popover,\n Text,\n} from \"react-aria-components\"\n\nconst _today = todayCalendar(getLocalTimeZone())\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i)\nconst YEARS = Array.from({ length: 131 }, (_, i) => _today.year - 100 + i)\nconst shortMonthFormatter = new Intl.DateTimeFormat(undefined, {\n month: \"short\",\n})\nconst longMonthFormatter = new Intl.DateTimeFormat(undefined, { month: \"long\" })\n\nexport type DatePickerSize = \"md\" | \"lg\"\n\nexport type DatePickerDateValue = DateValue | string\n\nfunction toCalendarDate(\n input: DatePickerDateValue | null | undefined\n): DateValue | null | undefined {\n if (input === null) return null\n if (input === undefined) return undefined\n\n if (typeof input === \"object\" && \"calendar\" in input) {\n return input\n }\n\n return parseDate(input)\n}\n\nexport interface DatePickerProps {\n /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n description?: string\n /** Disables the input and calendar button. */\n disabled?: boolean\n /** Sets the first day of the week in the calendar. Defaults to locale-appropriate value. */\n firstDayOfWeek?: \"fri\" | \"mon\" | \"sat\" | \"sun\" | \"thu\" | \"tue\" | \"wed\"\n /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n hideLabel?: boolean\n /** Whether the input is in an invalid state. */\n invalid?: boolean\n /** Callback that returns `true` for dates that should be visible but not selectable. */\n isDateUnavailable?: (date: DateValue) => boolean\n /** Accessible label for the field. */\n label: string\n /** Maximum selectable date. Accepts a DateValue or ISO date string. */\n max?: DatePickerDateValue\n /** Minimum selectable date. Accepts a DateValue or ISO date string. */\n min?: DatePickerDateValue\n /** Called when the selected date changes. */\n onChange?: (value: DateValue | null) => void\n /** If `true`, allows the value to be read but not changed. */\n readOnly?: boolean\n /** If `true`, appends an asterisk at the end of the label text. */\n required?: boolean\n /** The size of the date picker. */\n size?: DatePickerSize\n /** The controlled value. Accepts a DateValue or ISO date string. */\n value?: DatePickerDateValue | null\n}\n\ntype AriaDatePickerPropsToOmit =\n | \"children\"\n | \"defaultOpen\"\n | \"defaultValue\"\n | \"granularity\"\n | \"hideTimeZone\"\n | \"hourCycle\"\n | \"pageBehavior\"\n | \"placeholderValue\"\n | \"shouldCloseOnSelect\"\n | \"shouldForceLeadingZeros\"\n | \"slot\"\n\ntype AriaDatePickerPropsToInclude = \"isOpen\" | \"name\" | \"onOpenChange\"\n\nexport type DatePickerElementProps = CombineAriaPropsWithCustomProps<\n AriaDatePickerProps<DateValue>,\n DatePickerProps,\n AriaDatePickerPropsToOmit,\n AriaDatePickerPropsToInclude\n>\n\nfunction DatePickerOverlay({\n children,\n variant,\n}: {\n children: ReactNode\n variant: \"month\" | \"year\"\n}) {\n return (\n <div\n aria-label={`Select ${variant}`}\n aria-modal=\"true\"\n className={`tds-date-picker-overlay tds-date-picker-overlay--${variant}`}\n role=\"dialog\"\n >\n {children}\n </div>\n )\n}\n\nfunction DatePickerCalendarBody({\n activeOverlay,\n setActiveOverlay,\n}: {\n activeOverlay: \"month\" | \"year\" | null\n setActiveOverlay: (overlay: \"month\" | \"year\" | null) => void\n}) {\n // Read and drive Calendar's focused date through its state context. This\n // lets react-aria-components own the \"open to selected month\" behavior:\n // when the popover opens, Calendar mounts and auto-focuses the DatePicker's\n // current value (whether typed into the input segments or set via `value`).\n const state = useContext(CalendarStateContext)!\n const focusedDate = state.focusedDate\n const today = todayCalendar(getLocalTimeZone())\n\n function handleOverlaySelectionChange(\n keys: \"all\" | Set<number | string>,\n onSelect: (key: number) => void\n ) {\n if (keys === \"all\") return\n const [first] = Array.from(keys)\n if (first !== undefined) onSelect(Number(first))\n }\n\n function handleMonthSelect(monthIndex: number) {\n state.setFocusedDate(new CalendarDate(focusedDate.year, monthIndex + 1, 1))\n setActiveOverlay(null)\n }\n\n function handleYearSelect(year: number) {\n state.setFocusedDate(new CalendarDate(year, focusedDate.month, 1))\n setActiveOverlay(null)\n }\n\n return (\n <>\n <header className=\"tds-date-picker-calendar-header\">\n <Heading className=\"tds-date-picker-calendar-title tds-date-picker-calendar-title--visually-hidden\" />\n <div className=\"tds-date-picker-calendar-heading\">\n <Button\n aria-expanded={activeOverlay === \"month\"}\n aria-haspopup=\"dialog\"\n className=\"tds-date-picker-calendar-overlay-trigger\"\n onPress={() =>\n setActiveOverlay(activeOverlay === \"month\" ? null : \"month\")\n }\n slot={null}\n >\n {longMonthFormatter.format(\n new Date(2000, focusedDate.month - 1, 1)\n )}\n </Button>\n <Button\n aria-expanded={activeOverlay === \"year\"}\n aria-haspopup=\"dialog\"\n className=\"tds-date-picker-calendar-overlay-trigger\"\n onPress={() =>\n setActiveOverlay(activeOverlay === \"year\" ? null : \"year\")\n }\n slot={null}\n >\n {focusedDate.year}\n </Button>\n </div>\n {activeOverlay ? (\n <Button\n aria-label={`Close ${activeOverlay} picker`}\n className=\"tds-date-picker-calendar-nav\"\n onPress={() => setActiveOverlay(null)}\n slot={null}\n >\n <Icon aria-hidden symbol=\"general#x\" />\n </Button>\n ) : (\n <>\n <Button\n aria-label=\"Go to today\"\n className=\"tds-date-picker-calendar-nav tds-date-picker-calendar-nav--lg\"\n style={{\n visibility:\n focusedDate.month === today.month &&\n focusedDate.year === today.year\n ? \"hidden\"\n : undefined,\n }}\n onPress={() => {\n state.setFocusedDate(today)\n state.setFocused(true)\n }}\n slot={null}\n >\n {/* TODO: Add to icon library and use Icon once icon is decided on */}\n <svg\n aria-hidden\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n height=\"0.875em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M13.444 14.222H2.556V5.667H13.444V14.222ZM13.444 1.778H12.667V0.222H11.111V1.778H4.889V0.222H3.333V1.778H2.556C2.35212 1.778 2.15025 1.81827 1.96199 1.8965C1.77372 1.97473 1.60275 2.08938 1.45892 2.23387C1.31508 2.37836 1.2012 2.54984 1.12382 2.73846C1.04644 2.92708 1.00708 3.12913 1.008 3.333L1 14.222C0.999869 14.4264 1.04003 14.6288 1.11818 14.8176C1.19633 15.0065 1.31093 15.178 1.45545 15.3226C1.59996 15.4671 1.77155 15.5817 1.96039 15.6598C2.14923 15.738 2.35163 15.7781 2.556 15.778H13.444C13.8564 15.7769 14.2515 15.6127 14.5431 15.3211C14.8347 15.0295 14.9989 14.6344 15 14.222V3.333C14.9987 2.92082 14.8343 2.52592 14.5427 2.23455C14.2512 1.94319 13.8562 1.77905 13.444 1.778Z\" />\n <circle cx=\"8\" cy=\"9.75\" r=\"2.25\" />\n </svg>\n </Button>\n <Button\n aria-label=\"Previous month\"\n className=\"tds-date-picker-calendar-nav\"\n slot=\"previous\"\n >\n <Icon aria-hidden symbol=\"general#left-chevron\" />\n </Button>\n <Button\n aria-label=\"Next month\"\n className=\"tds-date-picker-calendar-nav\"\n slot=\"next\"\n >\n <Icon aria-hidden symbol=\"general#right-chevron\" />\n </Button>\n </>\n )}\n </header>\n <div className=\"tds-date-picker-calendar-body\">\n {activeOverlay === \"month\" && (\n <DatePickerOverlay variant=\"month\">\n <ListBox\n aria-label=\"Months\"\n // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n autoFocus\n className=\"tds-date-picker-overlay-list\"\n disallowEmptySelection\n escapeKeyBehavior=\"none\"\n layout=\"grid\"\n onSelectionChange={(keys) =>\n handleOverlaySelectionChange(keys, handleMonthSelect)\n }\n selectedKeys={[String(focusedDate.month - 1)]}\n selectionMode=\"single\"\n >\n {MONTHS.map((i) => {\n const date = new Date(2000, i, 1)\n const shortMonth = shortMonthFormatter.format(date)\n const longMonth = longMonthFormatter.format(date)\n\n return (\n <ListBoxItem\n className=\"tds-date-picker-overlay-cell\"\n id={String(i)}\n key={i}\n aria-label={longMonth}\n textValue={longMonth}\n >\n {shortMonth}\n </ListBoxItem>\n )\n })}\n </ListBox>\n </DatePickerOverlay>\n )}\n {activeOverlay === \"year\" && (\n <DatePickerOverlay variant=\"year\">\n <ListBox\n aria-label=\"Years\"\n // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n autoFocus\n className=\"tds-date-picker-overlay-list\"\n disallowEmptySelection\n escapeKeyBehavior=\"none\"\n layout=\"grid\"\n onSelectionChange={(keys) =>\n handleOverlaySelectionChange(keys, handleYearSelect)\n }\n selectedKeys={[String(focusedDate.year)]}\n selectionMode=\"single\"\n >\n {YEARS.map((year) => (\n <ListBoxItem\n className=\"tds-date-picker-overlay-cell\"\n id={String(year)}\n key={year}\n textValue={String(year)}\n >\n {year}\n </ListBoxItem>\n ))}\n </ListBox>\n </DatePickerOverlay>\n )}\n <CalendarGrid className=\"tds-date-picker-calendar-grid\">\n <CalendarGridHeader className=\"tds-date-picker-calendar-grid-header\">\n {(day) => (\n <CalendarHeaderCell className=\"tds-date-picker-calendar-header-cell\">\n {day}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody className=\"tds-date-picker-calendar-grid-body\">\n {(date) => (\n <CalendarCell\n className=\"tds-date-picker-calendar-cell\"\n date={date}\n />\n )}\n </CalendarGridBody>\n </CalendarGrid>\n </div>\n </>\n )\n}\n\nexport function DatePicker({\n className,\n description,\n disabled,\n firstDayOfWeek,\n hideLabel,\n invalid,\n isDateUnavailable,\n label,\n max,\n min,\n onChange,\n readOnly,\n required,\n size = \"md\",\n value,\n ...restProps\n}: DatePickerElementProps) {\n const convertedValue = toCalendarDate(value)\n const convertedMin = toCalendarDate(min) ?? undefined\n const convertedMax = toCalendarDate(max) ?? undefined\n\n const combinedClassName = classNames(\n \"tds-date-picker\",\n { \"tds-date-picker--lg\": size === \"lg\" },\n className\n )\n\n const [activeOverlay, setActiveOverlay] = useState<\"month\" | \"year\" | null>(\n null\n )\n\n return (\n <AriaDatePicker\n {...restProps}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n isDateUnavailable={isDateUnavailable}\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n maxValue={convertedMax}\n minValue={convertedMin}\n onChange={onChange ?? undefined}\n onOpenChange={(isOpen) => {\n if (!isOpen) setActiveOverlay(null)\n }}\n value={convertedValue}\n >\n {!hideLabel && <Label className=\"tds-date-picker-label\">{label}</Label>}\n <Group className=\"tds-date-picker-field\">\n <DateInput className=\"tds-date-picker-input\">\n {(segment) => (\n <DateSegment\n className={\n segment.type === \"literal\"\n ? \"tds-date-picker-segment-separator\"\n : \"tds-date-picker-segment\"\n }\n segment={segment}\n />\n )}\n </DateInput>\n <Button className=\"tds-btn tds-btn--infield tds-date-picker-button\">\n <Icon aria-hidden symbol=\"general#calendar\" />\n </Button>\n </Group>\n <Popover\n className={classNames(\"tds-date-picker-popover\", {\n \"tds-date-picker-popover--lg\": size === \"lg\",\n })}\n offset={2}\n >\n <Calendar\n className=\"tds-date-picker-calendar\"\n firstDayOfWeek={firstDayOfWeek}\n >\n <DatePickerCalendarBody\n activeOverlay={activeOverlay}\n setActiveOverlay={setActiveOverlay}\n />\n </Calendar>\n </Popover>\n {description && (\n <Text\n elementType=\"p\"\n className=\"tds-date-picker-description\"\n slot=\"description\"\n >\n <Icon\n aria-hidden\n className=\"tds-date-picker-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaDatePicker>\n )\n}\n\nDatePicker.displayName = \"DatePicker\"\n"],"names":["todayCalendar","getLocalTimeZone","parseDate","React","CalendarDate","AriaDatePicker"],"mappings":";;;;;;;;AAoCA,MAAM,MAAM,GAAGA,yCAAa,CAACC,yCAAgB,EAAE,CAAC;AAChD,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AACtD,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC;AAC1E,MAAM,mBAAmB,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;AAC7D,IAAA,KAAK,EAAE,OAAO;AACf,CAAA,CAAC;AACF,MAAM,kBAAkB,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAMhF,SAAS,cAAc,CACrB,KAA6C,EAAA;IAE7C,IAAI,KAAK,KAAK,IAAI;AAAE,QAAA,OAAO,IAAI;IAC/B,IAAI,KAAK,KAAK,SAAS;AAAE,QAAA,OAAO,SAAS;IAEzC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,UAAU,IAAI,KAAK,EAAE;AACpD,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,OAAOC,wCAAS,CAAC,KAAK,CAAC;AACzB;AAuDA,SAAS,iBAAiB,CAAC,EACzB,QAAQ,EACR,OAAO,GAIR,EAAA;IACC,QACEC,oDACc,CAAA,OAAA,EAAU,OAAO,EAAE,EAAA,YAAA,EACpB,MAAM,EACjB,SAAS,EAAE,oDAAoD,OAAO,CAAA,CAAE,EACxE,IAAI,EAAC,QAAQ,EAAA,EAEZ,QAAQ,CACL;AAEV;AAEA,SAAS,sBAAsB,CAAC,EAC9B,aAAa,EACb,gBAAgB,GAIjB,EAAA;;;;;AAKC,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,oBAAoB,CAAE;AAC/C,IAAA,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW;AACrC,IAAA,MAAM,KAAK,GAAGH,yCAAa,CAACC,yCAAgB,EAAE,CAAC;AAE/C,IAAA,SAAS,4BAA4B,CACnC,IAAkC,EAClC,QAA+B,EAAA;QAE/B,IAAI,IAAI,KAAK,KAAK;YAAE;QACpB,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QAChC,IAAI,KAAK,KAAK,SAAS;AAAE,YAAA,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAClD;IAEA,SAAS,iBAAiB,CAAC,UAAkB,EAAA;AAC3C,QAAA,KAAK,CAAC,cAAc,CAAC,IAAIG,yCAAY,CAAC,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3E,gBAAgB,CAAC,IAAI,CAAC;IACxB;IAEA,SAAS,gBAAgB,CAAC,IAAY,EAAA;AACpC,QAAA,KAAK,CAAC,cAAc,CAAC,IAAIA,yCAAY,CAAC,IAAI,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAClE,gBAAgB,CAAC,IAAI,CAAC;IACxB;AAEA,IAAA,QACED,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,iCAAiC,EAAA;AACjD,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,gFAAgF,EAAA,CAAG;YACtGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA;gBAC/CA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,eAAA,EACU,aAAa,KAAK,OAAO,mBAC1B,QAAQ,EACtB,SAAS,EAAC,0CAA0C,EACpD,OAAO,EAAE,MACP,gBAAgB,CAAC,aAAa,KAAK,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,EAE9D,IAAI,EAAE,IAAI,EAAA,EAET,kBAAkB,CAAC,MAAM,CACxB,IAAI,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CACzC,CACM;AACT,gBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,eAAA,EACU,aAAa,KAAK,MAAM,EAAA,eAAA,EACzB,QAAQ,EACtB,SAAS,EAAC,0CAA0C,EACpD,OAAO,EAAE,MACP,gBAAgB,CAAC,aAAa,KAAK,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC,EAE5D,IAAI,EAAE,IAAI,EAAA,EAET,WAAW,CAAC,IAAI,CACV,CACL;YACL,aAAa,IACZA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,YAAA,EACO,CAAA,MAAA,EAAS,aAAa,CAAA,OAAA,CAAS,EAC3C,SAAS,EAAC,8BAA8B,EACxC,OAAO,EAAE,MAAM,gBAAgB,CAAC,IAAI,CAAC,EACrC,IAAI,EAAE,IAAI,EAAA;gBAEVA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,WAAW,EAAA,CAAG,CAChC,KAETA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,cAAA,CAAA,aAAA,CAAC,MAAM,kBACM,aAAa,EACxB,SAAS,EAAC,+DAA+D,EACzE,KAAK,EAAE;AACL,wBAAA,UAAU,EACR,WAAW,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK;AACjC,4BAAA,WAAW,CAAC,IAAI,KAAK,KAAK,CAAC;AACzB,8BAAE;AACF,8BAAE,SAAS;qBAChB,EACD,OAAO,EAAE,MAAK;AACZ,wBAAA,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;AAC3B,wBAAA,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;oBACxB,CAAC,EACD,IAAI,EAAE,IAAI,EAAA;AAGV,oBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAEE,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,SAAS,EAChB,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B,EAAA;wBAElCA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,krBAAkrB,EAAA,CAAG;AAC7rB,wBAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,MAAM,EAAC,CAAC,EAAC,MAAM,EAAA,CAAG,CAChC,CACC;gBACTA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,YAAA,EACM,gBAAgB,EAC3B,SAAS,EAAC,8BAA8B,EACxC,IAAI,EAAC,UAAU,EAAA;AAEf,oBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,sBAAsB,GAAG,CAC3C;gBACTA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,YAAA,EACM,YAAY,EACvB,SAAS,EAAC,8BAA8B,EACxC,IAAI,EAAC,MAAM,EAAA;oBAEXA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAAa,MAAM,EAAC,uBAAuB,EAAA,CAAG,CAC5C,CACR,CACJ,CACM;QACTA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+BAA+B,EAAA;YAC3C,aAAa,KAAK,OAAO,KACxBA,6BAAC,iBAAiB,EAAA,EAAC,OAAO,EAAC,OAAO,EAAA;gBAChCA,cAAA,CAAA,aAAA,CAAC,OAAO,kBACK,QAAQ;;oBAEnB,SAAS,EAAA,IAAA,EACT,SAAS,EAAC,8BAA8B,EACxC,sBAAsB,EAAA,IAAA,EACtB,iBAAiB,EAAC,MAAM,EACxB,MAAM,EAAC,MAAM,EACb,iBAAiB,EAAE,CAAC,IAAI,KACtB,4BAA4B,CAAC,IAAI,EAAE,iBAAiB,CAAC,EAEvD,YAAY,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAC7C,aAAa,EAAC,QAAQ,EAAA,EAErB,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAI;oBAChB,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;oBACjC,MAAM,UAAU,GAAG,mBAAmB,CAAC,MAAM,CAAC,IAAI,CAAC;oBACnD,MAAM,SAAS,GAAG,kBAAkB,CAAC,MAAM,CAAC,IAAI,CAAC;AAEjD,oBAAA,QACEA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,EACb,GAAG,EAAE,CAAC,EAAA,YAAA,EACM,SAAS,EACrB,SAAS,EAAE,SAAS,EAAA,EAEnB,UAAU,CACC;gBAElB,CAAC,CAAC,CACM,CACQ,CACrB;YACA,aAAa,KAAK,MAAM,KACvBA,6BAAC,iBAAiB,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA;gBAC/BA,cAAA,CAAA,aAAA,CAAC,OAAO,kBACK,OAAO;;AAElB,oBAAA,SAAS,QACT,SAAS,EAAC,8BAA8B,EACxC,sBAAsB,QACtB,iBAAiB,EAAC,MAAM,EACxB,MAAM,EAAC,MAAM,EACb,iBAAiB,EAAE,CAAC,IAAI,KACtB,4BAA4B,CAAC,IAAI,EAAE,gBAAgB,CAAC,EAEtD,YAAY,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EACxC,aAAa,EAAC,QAAQ,EAAA,EAErB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACdA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,EAChB,GAAG,EAAE,IAAI,EACT,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,IAEtB,IAAI,CACO,CACf,CAAC,CACM,CACQ,CACrB;AACD,YAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAC,+BAA+B,EAAA;gBACrDA,cAAA,CAAA,aAAA,CAAC,kBAAkB,IAAC,SAAS,EAAC,sCAAsC,EAAA,EACjE,CAAC,GAAG,MACHA,cAAA,CAAA,aAAA,CAAC,kBAAkB,IAAC,SAAS,EAAC,sCAAsC,EAAA,EACjE,GAAG,CACe,CACtB,CACkB;AACrB,gBAAAA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EAAC,SAAS,EAAC,oCAAoC,EAAA,EAC7D,CAAC,IAAI,MACJA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACX,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAE,IAAI,EAAA,CACV,CACH,CACgB,CACN,CACX,CACL;AAEP;SAEgB,UAAU,CAAC,EACzB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,cAAc,EACd,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,SAAS,EACW,EAAA;AACvB,IAAA,MAAM,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC;IAC5C,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,SAAS;IACrD,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,SAAS;AAErD,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,iBAAiB,EACjB,EAAE,qBAAqB,EAAE,IAAI,KAAK,IAAI,EAAE,EACxC,SAAS,CACV;IAED,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,IAAI,CACL;IAED,QACEA,cAAA,CAAA,aAAA,CAACE,YAAc,EAAA,EAAA,GACT,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,YAAY,EAAE,CAAC,MAAM,KAAI;AACvB,YAAA,IAAI,CAAC,MAAM;gBAAE,gBAAgB,CAAC,IAAI,CAAC;QACrC,CAAC,EACD,KAAK,EAAE,cAAc,EAAA;QAEpB,CAAC,SAAS,IAAIF,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAA,EAAE,KAAK,CAAS;AACvE,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAA;YACtCA,cAAA,CAAA,aAAA,CAAC,SAAS,IAAC,SAAS,EAAC,uBAAuB,EAAA,EACzC,CAAC,OAAO,MACPA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,SAAS,EACP,OAAO,CAAC,IAAI,KAAK;AACf,sBAAE;sBACA,yBAAyB,EAE/B,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACS;AACZ,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,iDAAiD,EAAA;AACjE,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,kBAAkB,EAAA,CAAG,CACvC,CACH;AACR,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,SAAS,EAAE,UAAU,CAAC,yBAAyB,EAAE;gBAC/C,6BAA6B,EAAE,IAAI,KAAK,IAAI;aAC7C,CAAC,EACF,MAAM,EAAE,CAAC,EAAA;YAETA,cAAA,CAAA,aAAA,CAAC,QAAQ,IACP,SAAS,EAAC,0BAA0B,EACpC,cAAc,EAAE,cAAc,EAAA;gBAE9BA,cAAA,CAAA,aAAA,CAAC,sBAAsB,EAAA,EACrB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACO,CACH;AACT,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,WAAW,EAAC,GAAG,EACf,SAAS,EAAC,6BAA6B,EACvC,IAAI,EAAC,aAAa,EAAA;YAElBA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,0CAA0C,EACpD,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACc;AAErB;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
@@ -3,10 +3,12 @@ import React from "react";
3
3
  import { BaseLinkElementProps } from "./BaseLink";
4
4
  export type IconLinkProps = Omit<BaseLinkElementProps, "label" | "children"> & {
5
5
  "aria-label": string;
6
+ /** The icon element to display. */
6
7
  icon: React.ReactNode;
7
8
  };
8
9
  export declare const IconLink: React.ForwardRefExoticComponent<Omit<BaseLinkElementProps, "label" | "children"> & {
9
10
  "aria-label": string;
11
+ /** The icon element to display. */
10
12
  icon: React.ReactNode;
11
13
  } & React.RefAttributes<HTMLAnchorElement>>;
12
14
  //# sourceMappingURL=IconLink.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"IconLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/IconLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAG1B,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAY,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAE3D,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC7E,YAAY,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,QAAQ;kBAJL,MAAM;UACd,KAAK,CAAC,SAAS;2CAiBtB,CAAA"}
1
+ {"version":3,"file":"IconLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/IconLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAG1B,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAY,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAE3D,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC7E,YAAY,EAAE,MAAM,CAAA;IACpB,mCAAmC;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,QAAQ;kBALL,MAAM;IACpB,mCAAmC;UAC7B,KAAK,CAAC,SAAS;2CAiBtB,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"IconLink.js","sources":["../../../src/components/link/IconLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type IconLinkProps = Omit<BaseLinkElementProps, \"label\" | \"children\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\nexport const IconLink = forwardRef<HTMLAnchorElement, IconLinkProps>(\n ({ className, href, icon, ...restProps }: IconLinkProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseLink\n href={href}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n {...restProps}\n />\n )\n }\n)\n\nIconLink.displayName = \"IconLink\"\n"],"names":["React"],"mappings":";;;;MAYa,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAiB,EAAE,GAAG,KAAI;IAC9D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;IAEpE,QACEA,6BAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EAAA,CACb;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
1
+ {"version":3,"file":"IconLink.js","sources":["../../../src/components/link/IconLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type IconLinkProps = Omit<BaseLinkElementProps, \"label\" | \"children\"> & {\n \"aria-label\": string\n /** The icon element to display. */\n icon: React.ReactNode\n}\n\nexport const IconLink = forwardRef<HTMLAnchorElement, IconLinkProps>(\n ({ className, href, icon, ...restProps }: IconLinkProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseLink\n href={href}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n {...restProps}\n />\n )\n }\n)\n\nIconLink.displayName = \"IconLink\"\n"],"names":["React"],"mappings":";;;;MAaa,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAiB,EAAE,GAAG,KAAI;IAC9D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;IAEpE,QACEA,6BAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EAAA,CACb;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
@@ -1,7 +1,8 @@
1
1
  import React from "react";
2
2
  export declare function PageHeader({ children, actions, navigation, className, inactive, profile, }: {
3
3
  /**
4
- * Additional content (typically actions) that complements the primary slot.
4
+ * Actions to be displayed on the right side of the header. Elements
5
+ * should be styled as buttons.
5
6
  */
6
7
  actions?: React.ReactNode;
7
8
  /**
@@ -14,8 +15,10 @@ export declare function PageHeader({ children, actions, navigation, className, i
14
15
  */
15
16
  inactive?: boolean;
16
17
  /**
17
- * Navigation for the page. Should contain an unstyled unordered list (ul)
18
- * that contains a list of links or buttons.
18
+ * Navigation links to be displayed on the left side of the header.
19
+ * Contents should be an unordered list with items being links or
20
+ * buttons. Specify `selected` for the active link (as well as adding
21
+ * `aria-current="page"` for accessibility).
19
22
  */
20
23
  navigation?: React.ReactNode;
21
24
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAEhD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,OAAe,GAChB,EAAE;IACD;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBA+BA"}
1
+ {"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAEhD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,OAAe,GAChB,EAAE;IACD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBA+BA"}
@@ -1 +1 @@
1
- {"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { useEffect, useRef } from \"react\"\n\nexport function PageHeader({\n children,\n actions,\n navigation,\n className,\n inactive = false,\n profile = false,\n}: {\n /**\n * Additional content (typically actions) that complements the primary slot.\n */\n actions?: React.ReactNode\n /**\n * The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.\n */\n children: React.ReactNode\n className?: string\n /**\n * Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive\n */\n inactive?: boolean\n /**\n * Navigation for the page. Should contain an unstyled unordered list (ul)\n * that contains a list of links or buttons.\n */\n navigation?: React.ReactNode\n /**\n * Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.\n */\n profile?: boolean\n}) {\n const hasMultiActions = actions\n ? React.isValidElement(actions) && actions.type === React.Fragment\n ? React.Children.count(actions.props.children) > 1\n : React.Children.count(actions) > 1\n : false\n\n const nav = useScrollToSelected(navigation)\n\n return (\n <header\n className={classNames(\"tds-page-header\", className, {\n \"has-multi-actions\": hasMultiActions,\n \"has-nav\": !!navigation,\n inactive,\n \"tds-page-header--profile\": profile,\n })}\n >\n <div className=\"tds-page-header__title-bar\">\n <div className=\"tds-page-header__primary\">{children}</div>\n {actions && (\n <div className=\"tds-page-header__actions tds-no-print\">{actions}</div>\n )}\n </div>\n {navigation && (\n <nav ref={nav} className=\"tds-page-header__nav tds-no-print\">\n {navigation}\n </nav>\n )}\n </header>\n )\n}\n\nfunction useScrollToSelected(navigation: React.ReactNode) {\n const nav = useRef<HTMLElement>(null)\n useEffect(() => {\n if (!nav.current) return\n const ulElement = nav.current.querySelector(\"ul\")\n if (!ulElement) return\n const selectedItem = ulElement.querySelector(\".selected\")\n if (selectedItem) {\n const bounds = selectedItem.getBoundingClientRect()\n const ulBounds = ulElement.getBoundingClientRect()\n if (bounds.right > ulBounds.right || bounds.left < ulBounds.left) {\n ulElement.scrollTo({\n left: ulElement.scrollLeft + bounds.left - ulBounds.left,\n })\n }\n }\n }, [navigation])\n return nav\n}\n"],"names":[],"mappings":";;;SAGgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,GAwBhB,EAAA;IACC,MAAM,eAAe,GAAG;AACtB,UAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC;AACxD,cAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG;cAC/C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;UAClC,KAAK;AAET,IAAA,MAAM,GAAG,GAAG,mBAAmB,CAAC,UAAU,CAAC;IAE3C,QACE,gCACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;AAClD,YAAA,mBAAmB,EAAE,eAAe;YACpC,SAAS,EAAE,CAAC,CAAC,UAAU;YACvB,QAAQ;AACR,YAAA,0BAA0B,EAAE,OAAO;SACpC,CAAC,EAAA;QAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA;AACzC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,QAAQ,CAAO;YACzD,OAAO,KACN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,EAAE,OAAO,CAAO,CACvE,CACG;AACL,QAAA,UAAU,KACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,mCAAmC,IACzD,UAAU,CACP,CACP,CACM;AAEb;AAEA,SAAS,mBAAmB,CAAC,UAA2B,EAAA;AACtD,IAAA,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC;IACrC,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE;QAClB,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC;AACjD,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;QACzD,IAAI,YAAY,EAAE;AAChB,YAAA,MAAM,MAAM,GAAG,YAAY,CAAC,qBAAqB,EAAE;AACnD,YAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,qBAAqB,EAAE;AAClD,YAAA,IAAI,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE;gBAChE,SAAS,CAAC,QAAQ,CAAC;oBACjB,IAAI,EAAE,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI;AACzD,iBAAA,CAAC;YACJ;QACF;AACF,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAChB,IAAA,OAAO,GAAG;AACZ;;;;"}
1
+ {"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { useEffect, useRef } from \"react\"\n\nexport function PageHeader({\n children,\n actions,\n navigation,\n className,\n inactive = false,\n profile = false,\n}: {\n /**\n * Actions to be displayed on the right side of the header. Elements\n * should be styled as buttons.\n */\n actions?: React.ReactNode\n /**\n * The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.\n */\n children: React.ReactNode\n className?: string\n /**\n * Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive\n */\n inactive?: boolean\n /**\n * Navigation links to be displayed on the left side of the header.\n * Contents should be an unordered list with items being links or\n * buttons. Specify `selected` for the active link (as well as adding\n * `aria-current=\"page\"` for accessibility).\n */\n navigation?: React.ReactNode\n /**\n * Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.\n */\n profile?: boolean\n}) {\n const hasMultiActions = actions\n ? React.isValidElement(actions) && actions.type === React.Fragment\n ? React.Children.count(actions.props.children) > 1\n : React.Children.count(actions) > 1\n : false\n\n const nav = useScrollToSelected(navigation)\n\n return (\n <header\n className={classNames(\"tds-page-header\", className, {\n \"has-multi-actions\": hasMultiActions,\n \"has-nav\": !!navigation,\n inactive,\n \"tds-page-header--profile\": profile,\n })}\n >\n <div className=\"tds-page-header__title-bar\">\n <div className=\"tds-page-header__primary\">{children}</div>\n {actions && (\n <div className=\"tds-page-header__actions tds-no-print\">{actions}</div>\n )}\n </div>\n {navigation && (\n <nav ref={nav} className=\"tds-page-header__nav tds-no-print\">\n {navigation}\n </nav>\n )}\n </header>\n )\n}\n\nfunction useScrollToSelected(navigation: React.ReactNode) {\n const nav = useRef<HTMLElement>(null)\n useEffect(() => {\n if (!nav.current) return\n const ulElement = nav.current.querySelector(\"ul\")\n if (!ulElement) return\n const selectedItem = ulElement.querySelector(\".selected\")\n if (selectedItem) {\n const bounds = selectedItem.getBoundingClientRect()\n const ulBounds = ulElement.getBoundingClientRect()\n if (bounds.right > ulBounds.right || bounds.left < ulBounds.left) {\n ulElement.scrollTo({\n left: ulElement.scrollLeft + bounds.left - ulBounds.left,\n })\n }\n }\n }, [navigation])\n return nav\n}\n"],"names":[],"mappings":";;;SAGgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,GA2BhB,EAAA;IACC,MAAM,eAAe,GAAG;AACtB,UAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC;AACxD,cAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG;cAC/C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;UAClC,KAAK;AAET,IAAA,MAAM,GAAG,GAAG,mBAAmB,CAAC,UAAU,CAAC;IAE3C,QACE,gCACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;AAClD,YAAA,mBAAmB,EAAE,eAAe;YACpC,SAAS,EAAE,CAAC,CAAC,UAAU;YACvB,QAAQ;AACR,YAAA,0BAA0B,EAAE,OAAO;SACpC,CAAC,EAAA;QAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA;AACzC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,QAAQ,CAAO;YACzD,OAAO,KACN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,EAAE,OAAO,CAAO,CACvE,CACG;AACL,QAAA,UAAU,KACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,mCAAmC,IACzD,UAAU,CACP,CACP,CACM;AAEb;AAEA,SAAS,mBAAmB,CAAC,UAA2B,EAAA;AACtD,IAAA,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC;IACrC,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE;QAClB,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC;AACjD,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;QACzD,IAAI,YAAY,EAAE;AAChB,YAAA,MAAM,MAAM,GAAG,YAAY,CAAC,qBAAqB,EAAE;AACnD,YAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,qBAAqB,EAAE;AAClD,YAAA,IAAI,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE;gBAChE,SAAS,CAAC,QAAQ,CAAC;oBACjB,IAAI,EAAE,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI;AACzD,iBAAA,CAAC;YACJ;QACF;AACF,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAChB,IAAA,OAAO,GAAG;AACZ;;;;"}
@@ -2,8 +2,11 @@ import "./index.css";
2
2
  import React, { InputHTMLAttributes } from "react";
3
3
  export type RadioSize = "md" | "sm";
4
4
  interface RadioBaseProps {
5
+ /** Optional description text that appears below the radio label. */
5
6
  description?: string;
7
+ /** The name of the radio group. All radios in the group must have the same name. */
6
8
  name: string;
9
+ /** The size of the radio. */
7
10
  size?: RadioSize;
8
11
  }
9
12
  interface RadioWithLabel extends RadioBaseProps {
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE9D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,cAAe,SAAQ,cAAc;IAC7C,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,uBAAwB,SAAQ,cAAc;IACtD,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,uBAAuB,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,CAC1B,GACC,UAAU,CAAA;AAEZ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK,4FAuCjB,CAAA"}
1
+ {"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE9D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,UAAU,cAAc;IACtB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oFAAoF;IACpF,IAAI,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,cAAe,SAAQ,cAAc;IAC7C,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,uBAAwB,SAAQ,cAAc;IACtD,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,uBAAuB,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,CAC1B,GACC,UAAU,CAAA;AAEZ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK,4FAuCjB,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nexport type RadioSize = \"md\" | \"sm\"\n\ninterface RadioBaseProps {\n description?: string\n name: string\n size?: RadioSize\n}\n\ninterface RadioWithLabel extends RadioBaseProps {\n \"aria-labelledby\"?: never\n /**\n * Label content for the radio. When using non-string content\n * (e.g. JSX), it must not contain interactive elements. This\n * includes native HTML elements such as `<a>` and `<button>`, as\n * well as Tapestry or Tapestry-React interactive components.\n */\n label: React.ReactNode\n}\n\ninterface RadioWithAriaLabelledBy extends RadioBaseProps {\n \"aria-labelledby\": string\n label?: never\n}\n\nexport type RadioProps = RadioWithLabel | RadioWithAriaLabelledBy\n\nexport type RadioElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof RadioProps | \"type\"\n> &\n RadioProps\n\n/**\n * A radio component that renders as a radio input with label.\n * Supports various sizes.\n * Must have a name attribute.\n *\n * **Required:** You must provide either:\n * - `label` - Label content for the radio\n * - `aria-labelledby` - ID of an external element that provides the label\n *\n * When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\n *\n * @component\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioElementProps>(\n (\n {\n className,\n description,\n id,\n label,\n size = \"md\",\n ...restProps\n }: RadioElementProps,\n ref\n ) => {\n const combinedClassName = classNames(\n \"tds-radio\",\n size && size === \"sm\" && `tds-radio--sm`,\n className\n )\n\n const stableId = useId()\n const radioId = id || `tds-radio-${stableId}`\n\n return (\n <div className={combinedClassName}>\n <input\n {...restProps}\n aria-describedby={description ? `${radioId}-description` : undefined}\n id={radioId}\n ref={ref}\n type=\"radio\"\n />\n {label && <label htmlFor={radioId}>{label}</label>}\n {description && (\n <p id={`${radioId}-description`} className=\"tds-radio-description\">\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nRadio.displayName = \"Radio\"\n"],"names":["React"],"mappings":";;;;AAsCA;;;;;;;;;;;;;;AAcG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACM,EACpB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,WAAW,EACX,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,aAAA,CAAe,EACxC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC/BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS,EACpE,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EAAA,CACZ;AACD,QAAA,KAAK,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAA,EAAG,KAAK,CAAS;AACjD,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,EAAE,SAAS,EAAC,uBAAuB,EAAA,EAC/D,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
1
+ {"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nexport type RadioSize = \"md\" | \"sm\"\n\ninterface RadioBaseProps {\n /** Optional description text that appears below the radio label. */\n description?: string\n /** The name of the radio group. All radios in the group must have the same name. */\n name: string\n /** The size of the radio. */\n size?: RadioSize\n}\n\ninterface RadioWithLabel extends RadioBaseProps {\n \"aria-labelledby\"?: never\n /**\n * Label content for the radio. When using non-string content\n * (e.g. JSX), it must not contain interactive elements. This\n * includes native HTML elements such as `<a>` and `<button>`, as\n * well as Tapestry or Tapestry-React interactive components.\n */\n label: React.ReactNode\n}\n\ninterface RadioWithAriaLabelledBy extends RadioBaseProps {\n \"aria-labelledby\": string\n label?: never\n}\n\nexport type RadioProps = RadioWithLabel | RadioWithAriaLabelledBy\n\nexport type RadioElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof RadioProps | \"type\"\n> &\n RadioProps\n\n/**\n * A radio component that renders as a radio input with label.\n * Supports various sizes.\n * Must have a name attribute.\n *\n * **Required:** You must provide either:\n * - `label` - Label content for the radio\n * - `aria-labelledby` - ID of an external element that provides the label\n *\n * When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\n *\n * @component\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioElementProps>(\n (\n {\n className,\n description,\n id,\n label,\n size = \"md\",\n ...restProps\n }: RadioElementProps,\n ref\n ) => {\n const combinedClassName = classNames(\n \"tds-radio\",\n size && size === \"sm\" && `tds-radio--sm`,\n className\n )\n\n const stableId = useId()\n const radioId = id || `tds-radio-${stableId}`\n\n return (\n <div className={combinedClassName}>\n <input\n {...restProps}\n aria-describedby={description ? `${radioId}-description` : undefined}\n id={radioId}\n ref={ref}\n type=\"radio\"\n />\n {label && <label htmlFor={radioId}>{label}</label>}\n {description && (\n <p id={`${radioId}-description`} className=\"tds-radio-description\">\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nRadio.displayName = \"Radio\"\n"],"names":["React"],"mappings":";;;;AAyCA;;;;;;;;;;;;;;AAcG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACM,EACpB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,WAAW,EACX,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,aAAA,CAAe,EACxC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC/BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS,EACpE,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EAAA,CACZ;AACD,QAAA,KAAK,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAA,EAAG,KAAK,CAAS;AACjD,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,EAAE,SAAS,EAAC,uBAAuB,EAAA,EAC/D,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
@@ -2,9 +2,13 @@ import "./index.css";
2
2
  import React, { FieldsetHTMLAttributes } from "react";
3
3
  export type RadioGroupSize = "md" | "sm";
4
4
  export interface RadioGroupProps {
5
+ /** Optional description text that appears below the label. */
5
6
  description?: string;
7
+ /** Is invalid. If true, include a description to explain why; and if no description is provided, description defaults to "Please select an option". */
6
8
  invalid?: boolean;
9
+ /** The label text (required). Renders as `<legend>` (not `<label>`) because `RadioGroup` is a `<fieldset>`. */
7
10
  label: string;
11
+ /** The size. Does not affect child radios. */
8
12
  size?: RadioGroupSize;
9
13
  }
10
14
  export type RadioGroupElementProps = Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, keyof RadioGroupProps> & RadioGroupProps;
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAA;AAErD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,eAAe,CACtB,GACC,eAAe,CAAA;AAEjB;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;+EAQpB,sBAAsB;;CAiCxB,CAAA"}
1
+ {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAA;AAErD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uJAAuJ;IACvJ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+GAA+G;IAC/G,KAAK,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,eAAe,CACtB,GACC,eAAe,CAAA;AAEjB;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;+EAQpB,sBAAsB;;CAiCxB,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { FieldsetHTMLAttributes } from \"react\"\n\nexport type RadioGroupSize = \"md\" | \"sm\"\n\nexport interface RadioGroupProps {\n description?: string\n invalid?: boolean\n label: string\n size?: RadioGroupSize\n}\n\nexport type RadioGroupElementProps = Omit<\n FieldsetHTMLAttributes<HTMLFieldSetElement>,\n keyof RadioGroupProps\n> &\n RadioGroupProps\n\n/**\n * A radio group component that renders as a fieldset with legend.\n * Use to group two or more Radio components.\n * Supports label and description text, sizes, invalid, and disabled state.\n * Label is required and must be a string. Renders as <legend>.\n *\n * @component\n */\nexport const RadioGroup = ({\n children,\n className,\n description,\n invalid,\n label,\n size = \"md\",\n ...restProps\n}: RadioGroupElementProps) => {\n const combinedClassName = classNames(\n \"tds-radio-group\",\n size && size === \"sm\" && \"tds-radio-group--sm\",\n className\n )\n const stableId = useId()\n\n const displayDescription =\n description || (invalid ? \"Please select an option\" : undefined)\n const descriptionId = `tds-radio-group-${stableId}-description`\n\n return (\n <fieldset\n {...restProps}\n aria-describedby={displayDescription ? descriptionId : undefined}\n aria-invalid={invalid ? \"true\" : undefined}\n className={combinedClassName}\n >\n <legend>{label}</legend>\n {displayDescription && (\n <p id={descriptionId} className=\"tds-radio-group-description\">\n <Icon\n className=\"tds-radio-group-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n aria-hidden\n />\n {displayDescription}\n </p>\n )}\n <div className=\"tds-radio-group-fields\">{children}</div>\n </fieldset>\n )\n}\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"names":["React"],"mappings":";;;;;AAsBA;;;;;;;AAOG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACW,KAAI;AAC3B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,iBAAiB,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,qBAAqB,EAC9C,SAAS,CACV;AACD,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AAExB,IAAA,MAAM,kBAAkB,GACtB,WAAW,KAAK,OAAO,GAAG,yBAAyB,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,aAAa,GAAG,CAAA,gBAAA,EAAmB,QAAQ,cAAc;IAE/D,QACEA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,kBAAkB,GAAG,aAAa,GAAG,SAAS,kBAClD,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,SAAS,EAAE,iBAAiB,EAAA;AAE5B,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,KAAK,CAAU;QACvB,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,6BAA6B,EAAA;YAC3DA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,0CAA0C,EACpD,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,kBAAkB,CACjB,CACL;QACDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,EAAE,QAAQ,CAAO,CAC/C;AAEf;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
1
+ {"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { FieldsetHTMLAttributes } from \"react\"\n\nexport type RadioGroupSize = \"md\" | \"sm\"\n\nexport interface RadioGroupProps {\n /** Optional description text that appears below the label. */\n description?: string\n /** Is invalid. If true, include a description to explain why; and if no description is provided, description defaults to \"Please select an option\". */\n invalid?: boolean\n /** The label text (required). Renders as `<legend>` (not `<label>`) because `RadioGroup` is a `<fieldset>`. */\n label: string\n /** The size. Does not affect child radios. */\n size?: RadioGroupSize\n}\n\nexport type RadioGroupElementProps = Omit<\n FieldsetHTMLAttributes<HTMLFieldSetElement>,\n keyof RadioGroupProps\n> &\n RadioGroupProps\n\n/**\n * A radio group component that renders as a fieldset with legend.\n * Use to group two or more Radio components.\n * Supports label and description text, sizes, invalid, and disabled state.\n * Label is required and must be a string. Renders as <legend>.\n *\n * @component\n */\nexport const RadioGroup = ({\n children,\n className,\n description,\n invalid,\n label,\n size = \"md\",\n ...restProps\n}: RadioGroupElementProps) => {\n const combinedClassName = classNames(\n \"tds-radio-group\",\n size && size === \"sm\" && \"tds-radio-group--sm\",\n className\n )\n const stableId = useId()\n\n const displayDescription =\n description || (invalid ? \"Please select an option\" : undefined)\n const descriptionId = `tds-radio-group-${stableId}-description`\n\n return (\n <fieldset\n {...restProps}\n aria-describedby={displayDescription ? descriptionId : undefined}\n aria-invalid={invalid ? \"true\" : undefined}\n className={combinedClassName}\n >\n <legend>{label}</legend>\n {displayDescription && (\n <p id={descriptionId} className=\"tds-radio-group-description\">\n <Icon\n className=\"tds-radio-group-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n aria-hidden\n />\n {displayDescription}\n </p>\n )}\n <div className=\"tds-radio-group-fields\">{children}</div>\n </fieldset>\n )\n}\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"names":["React"],"mappings":";;;;;AA0BA;;;;;;;AAOG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACW,KAAI;AAC3B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,iBAAiB,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,qBAAqB,EAC9C,SAAS,CACV;AACD,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AAExB,IAAA,MAAM,kBAAkB,GACtB,WAAW,KAAK,OAAO,GAAG,yBAAyB,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,aAAa,GAAG,CAAA,gBAAA,EAAmB,QAAQ,cAAc;IAE/D,QACEA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,kBAAkB,GAAG,aAAa,GAAG,SAAS,kBAClD,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,SAAS,EAAE,iBAAiB,EAAA;AAE5B,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,KAAK,CAAU;QACvB,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,6BAA6B,EAAA;YAC3DA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,0CAA0C,EACpD,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,kBAAkB,CACjB,CACL;QACDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,EAAE,QAAQ,CAAO,CAC/C;AAEf;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
@@ -1,7 +1,13 @@
1
1
  import "./index.css";
2
2
  import React, { type SelectHTMLAttributes } from "react";
3
3
  export type SelectSize = "lg" | "md";
4
+ /**
5
+ * String-labelled option variant. Valid in both native (`complex={false}`)
6
+ * and complex (`complex={true}`) modes. The `label` doubles as the type-ahead
7
+ * search target.
8
+ */
4
9
  export interface SelectOptionWithTextLabel {
10
+ /** Arbitrary `data-*` attributes are forwarded to the rendered option. */
5
11
  [key: `data-${string}`]: boolean | number | string | undefined;
6
12
  /** Whether this option is non-interactive. */
7
13
  disabled?: boolean;
@@ -9,19 +15,40 @@ export interface SelectOptionWithTextLabel {
9
15
  /** Displayed as the option content and used for type-ahead matching. */
10
16
  label: string;
11
17
  textValue?: never;
18
+ /** Unique identifier for the option. */
12
19
  value: string;
13
20
  }
21
+ /**
22
+ * Rich-content option variant. The popover (`complex={true}`) renders the
23
+ * `label` node directly; the native `<select>` (`complex={false}`) falls back
24
+ * to `textValue` for the visible text. Requires a plain-text `textValue` so
25
+ * type-ahead matching, screen reader announcements, and the native fallback
26
+ * all have something stable to use.
27
+ */
14
28
  export interface SelectOptionWithNodeLabel {
29
+ /** Arbitrary `data-*` attributes are forwarded to the rendered option. */
15
30
  [key: `data-${string}`]: boolean | number | string | undefined;
16
31
  /** Whether this option is non-interactive. */
17
32
  disabled?: boolean;
18
33
  divider?: never;
19
- /** Displayed as the option content. Accepts React nodes in complex mode. */
34
+ /**
35
+ * Option content. Rendered as JSX in complex mode; in native mode, the
36
+ * visible text comes from `textValue` instead.
37
+ */
20
38
  label: React.ReactNode;
21
- /** Plain-text fallback for type-ahead matching when `label` is a React node. */
39
+ /**
40
+ * Plain-text fallback for type-ahead matching, screen reader
41
+ * announcements, and the native `<select>`'s visible option text when
42
+ * `label` is a React node.
43
+ */
22
44
  textValue: string;
45
+ /** Unique identifier for the option. */
23
46
  value: string;
24
47
  }
48
+ /**
49
+ * Visual-separator option variant. Renders a divider line between options
50
+ * (or between groups of options). Carries no value of its own.
51
+ */
25
52
  export interface SelectOptionDivider {
26
53
  disabled?: never;
27
54
  /** Renders a visual separator between options. */
@@ -31,21 +58,38 @@ export interface SelectOptionDivider {
31
58
  value?: never;
32
59
  }
33
60
  export type SelectOption = SelectOptionDivider | SelectOptionWithNodeLabel | SelectOptionWithTextLabel;
61
+ /**
62
+ * A group entry in `Select`'s `options` array. Renders a heading above its
63
+ * `options` and nests them visually beneath it.
64
+ */
34
65
  export interface SelectOptionsGroup {
35
- /** Whether all options in this group are non-interactive. */
66
+ /**
67
+ * Whether all options in this group are non-interactive. Disables every
68
+ * nested option regardless of its own `disabled` flag.
69
+ */
36
70
  disabled?: boolean;
37
71
  /** Visible heading displayed above the group's options. */
38
72
  label: string;
39
- /** The selectable options within this group. */
73
+ /** The selectable options nested under this group. */
40
74
  options: SelectOption[];
41
75
  }
42
76
  export type SelectItem = SelectOption | SelectOptionsGroup;
43
77
  interface SelectBaseProps {
44
- /** When true, renders as a popover listbox instead of a native `<select>`. */
78
+ /**
79
+ * When true, renders as a popover listbox instead of a native `<select>`.
80
+ * Enables rich content in options (icons, descriptions).
81
+ */
45
82
  complex?: boolean;
46
- /** Helper text displayed below the select. Styled as error text when `invalid`. */
83
+ /**
84
+ * Helper text displayed below the select. Styled as error text when
85
+ * `invalid`. Defaults to `"Please select an option"` when `invalid` is true
86
+ * and no description is provided.
87
+ */
47
88
  description?: string;
48
- /** Whether the select is in an invalid state. */
89
+ /**
90
+ * Whether the select is in an invalid state. Shows the default description
91
+ * if none is provided.
92
+ */
49
93
  invalid?: boolean;
50
94
  /** A flat or mixed array of options and option groups. */
51
95
  options: SelectItem[];
@@ -57,7 +101,10 @@ interface SelectBaseProps {
57
101
  interface SelectWithVisibleLabel extends SelectBaseProps {
58
102
  /** If true, the label is visually hidden and set as aria-label. */
59
103
  hideLabel?: false;
60
- /** The label text for the select. */
104
+ /**
105
+ * The label text for the select. Required unless `aria-label` or
106
+ * `aria-labelledby` is provided.
107
+ */
61
108
  label: string;
62
109
  }
63
110
  interface SelectWithHiddenLabel extends SelectBaseProps {
@@ -73,7 +120,10 @@ interface SelectWithAriaLabel extends SelectBaseProps {
73
120
  label?: never;
74
121
  }
75
122
  interface SelectWithAriaLabelledBy extends SelectBaseProps {
76
- /** ID of an external label element. Use instead of `label`. */
123
+ /**
124
+ * ID of an external label element. Use instead of `label` when a visible
125
+ * label exists elsewhere on the page.
126
+ */
77
127
  "aria-labelledby": string;
78
128
  hideLabel?: never;
79
129
  label?: never;
@@ -1 +1 @@
1
- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type SelectHTMLAttributes, useRef } from \"react\"\n\nimport { SelectNative } from \"./SelectNative\"\nimport { SelectPopover } from \"./SelectPopover\"\n\n// ---------------------------------------------------------------------------\n// Shared types\n// ---------------------------------------------------------------------------\n\nexport type SelectSize = \"lg\" | \"md\"\n\nexport interface SelectOptionWithTextLabel {\n [key: `data-${string}`]: boolean | number | string | undefined\n /** Whether this option is non-interactive. */\n disabled?: boolean\n divider?: never\n /** Displayed as the option content and used for type-ahead matching. */\n label: string\n textValue?: never\n value: string\n}\n\nexport interface SelectOptionWithNodeLabel {\n [key: `data-${string}`]: boolean | number | string | undefined\n /** Whether this option is non-interactive. */\n disabled?: boolean\n divider?: never\n /** Displayed as the option content. Accepts React nodes in complex mode. */\n label: React.ReactNode\n /** Plain-text fallback for type-ahead matching when `label` is a React node. */\n textValue: string\n value: string\n}\n\nexport interface SelectOptionDivider {\n disabled?: never\n /** Renders a visual separator between options. */\n divider: true\n label?: never\n textValue?: never\n value?: never\n}\n\nexport type SelectOption =\n | SelectOptionDivider\n | SelectOptionWithNodeLabel\n | SelectOptionWithTextLabel\n\nexport interface SelectOptionsGroup {\n /** Whether all options in this group are non-interactive. */\n disabled?: boolean\n /** Visible heading displayed above the group's options. */\n label: string\n /** The selectable options within this group. */\n options: SelectOption[]\n}\n\nexport type SelectItem = SelectOption | SelectOptionsGroup\n\n// ---------------------------------------------------------------------------\n// Select component props\n// ---------------------------------------------------------------------------\n\ninterface SelectBaseProps {\n /** When true, renders as a popover listbox instead of a native `<select>`. */\n complex?: boolean\n /** Helper text displayed below the select. Styled as error text when `invalid`. */\n description?: string\n /** Whether the select is in an invalid state. */\n invalid?: boolean\n /** A flat or mixed array of options and option groups. */\n options: SelectItem[]\n /** Placeholder text shown when no option is selected. Defaults to `\"Select an option\"`. */\n placeholder?: string\n /** The size of the select. */\n size?: SelectSize\n}\n\ninterface SelectWithVisibleLabel extends SelectBaseProps {\n /** If true, the label is visually hidden and set as aria-label. */\n hideLabel?: false\n /** The label text for the select. */\n label: string\n}\n\ninterface SelectWithHiddenLabel extends SelectBaseProps {\n /** If true, the label is visually hidden and set as aria-label. */\n hideLabel: true\n /** The label text for the select. Must be a string when hidden. */\n label: string\n}\n\ninterface SelectWithAriaLabel extends SelectBaseProps {\n /** Accessible label for the select. Use when no visible label exists. */\n \"aria-label\": string\n hideLabel?: never\n label?: never\n}\n\ninterface SelectWithAriaLabelledBy extends SelectBaseProps {\n /** ID of an external label element. Use instead of `label`. */\n \"aria-labelledby\": string\n hideLabel?: never\n label?: never\n}\n\nexport type SelectProps =\n | SelectWithAriaLabel\n | SelectWithAriaLabelledBy\n | SelectWithHiddenLabel\n | SelectWithVisibleLabel\n\ntype BaseSelectElementProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n keyof SelectProps | \"multiple\" | \"size\"\n>\n\nexport type NativeSelectElementProps = BaseSelectElementProps &\n SelectProps & {\n complex?: false\n }\n\nexport type ComplexSelectElementProps = BaseSelectElementProps &\n SelectProps & {\n complex: true\n }\n\nexport type SelectElementProps =\n | NativeSelectElementProps\n | ComplexSelectElementProps\n\nfunction normalizeSelectValue(\n value:\n | NativeSelectElementProps[\"defaultValue\"]\n | NativeSelectElementProps[\"value\"]\n | ComplexSelectElementProps[\"defaultValue\"]\n | ComplexSelectElementProps[\"value\"]\n) {\n if (value === undefined || value === null) return undefined\n if (Array.isArray(value)) return value[0]\n return String(value)\n}\n\n// ---------------------------------------------------------------------------\n// Select (public)\n// ---------------------------------------------------------------------------\n\nexport const Select = forwardRef<HTMLSelectElement, SelectElementProps>(\n function Select(props: SelectElementProps, ref) {\n const {\n \"aria-label\": userAriaLabel,\n \"aria-labelledby\": userAriaLabelledBy,\n className,\n complex,\n defaultValue,\n description,\n hideLabel,\n id,\n invalid,\n label,\n onChange,\n options,\n placeholder,\n required,\n size,\n value,\n ...restProps\n } = props\n\n const triggerRef = useRef<HTMLButtonElement>(null)\n const stableId = useId()\n const controlId = id || `tds-select-${stableId}`\n const labelId = `${controlId}-label`\n const resolvedDescription =\n description || (invalid ? \"Please select an option\" : undefined)\n const descriptionId = resolvedDescription\n ? `${controlId}-description`\n : undefined\n const computedClassName = classNames(\n \"tds-select\",\n {\n \"tds-select--invalid\": invalid,\n \"tds-select--lg\": size === \"lg\",\n \"tds-select--required\": required,\n },\n className\n )\n\n const normalizedDefaultValue = normalizeSelectValue(defaultValue)\n const normalizedValue = normalizeSelectValue(value)\n\n const computedDefaultValue =\n normalizedDefaultValue === undefined && normalizedValue === undefined\n ? \"\"\n : normalizedDefaultValue\n const effectivePlaceholder =\n normalizedDefaultValue !== undefined && normalizedDefaultValue !== \"\"\n ? null\n : placeholder || \"Select an option\"\n const showLabel = !!label && !hideLabel\n const computedAriaLabel = userAriaLabel ?? (hideLabel ? label : undefined)\n const computedAriaLabelledBy =\n userAriaLabelledBy ??\n (computedAriaLabel || !showLabel ? undefined : labelId)\n\n const sharedControlProps = {\n ...restProps,\n \"aria-describedby\": descriptionId,\n \"aria-label\": computedAriaLabel,\n \"aria-labelledby\": computedAriaLabelledBy,\n defaultValue: computedDefaultValue,\n invalid,\n options,\n placeholder: effectivePlaceholder,\n required,\n value: normalizedValue,\n }\n\n const handleComplexLabelClick = () => triggerRef.current?.focus()\n\n const SelectComponent = complex ? SelectPopover : SelectNative\n\n return (\n <div className={computedClassName}>\n {showLabel &&\n (complex ? (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- mirrors native label click-to-focus; keyboard users interact with the combobox directly\n <div\n className=\"tds-select-label\"\n id={labelId}\n onClick={handleComplexLabelClick}\n >\n {label}\n </div>\n ) : (\n <label htmlFor={controlId} id={labelId}>\n {label}\n </label>\n ))}\n <SelectComponent\n {...sharedControlProps}\n ref={ref}\n id={controlId}\n onChange={onChange}\n {...(complex && { triggerRef })}\n />\n {resolvedDescription && descriptionId && (\n <p className=\"tds-select-description\" id={descriptionId}>\n <Icon\n aria-hidden\n className=\"tds-select-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {resolvedDescription}\n </p>\n )}\n </div>\n )\n }\n)\n\nSelect.displayName = \"Select\"\n"],"names":["React"],"mappings":"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"}
1
+ {"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type SelectHTMLAttributes, useRef } from \"react\"\n\nimport { SelectNative } from \"./SelectNative\"\nimport { SelectPopover } from \"./SelectPopover\"\n\n// ---------------------------------------------------------------------------\n// Shared types\n// ---------------------------------------------------------------------------\n\nexport type SelectSize = \"lg\" | \"md\"\n\n/**\n * String-labelled option variant. Valid in both native (`complex={false}`)\n * and complex (`complex={true}`) modes. The `label` doubles as the type-ahead\n * search target.\n */\nexport interface SelectOptionWithTextLabel {\n /** Arbitrary `data-*` attributes are forwarded to the rendered option. */\n [key: `data-${string}`]: boolean | number | string | undefined\n /** Whether this option is non-interactive. */\n disabled?: boolean\n divider?: never\n /** Displayed as the option content and used for type-ahead matching. */\n label: string\n textValue?: never\n /** Unique identifier for the option. */\n value: string\n}\n\n/**\n * Rich-content option variant. The popover (`complex={true}`) renders the\n * `label` node directly; the native `<select>` (`complex={false}`) falls back\n * to `textValue` for the visible text. Requires a plain-text `textValue` so\n * type-ahead matching, screen reader announcements, and the native fallback\n * all have something stable to use.\n */\nexport interface SelectOptionWithNodeLabel {\n /** Arbitrary `data-*` attributes are forwarded to the rendered option. */\n [key: `data-${string}`]: boolean | number | string | undefined\n /** Whether this option is non-interactive. */\n disabled?: boolean\n divider?: never\n /**\n * Option content. Rendered as JSX in complex mode; in native mode, the\n * visible text comes from `textValue` instead.\n */\n label: React.ReactNode\n /**\n * Plain-text fallback for type-ahead matching, screen reader\n * announcements, and the native `<select>`'s visible option text when\n * `label` is a React node.\n */\n textValue: string\n /** Unique identifier for the option. */\n value: string\n}\n\n/**\n * Visual-separator option variant. Renders a divider line between options\n * (or between groups of options). Carries no value of its own.\n */\nexport interface SelectOptionDivider {\n disabled?: never\n /** Renders a visual separator between options. */\n divider: true\n label?: never\n textValue?: never\n value?: never\n}\n\nexport type SelectOption =\n | SelectOptionDivider\n | SelectOptionWithNodeLabel\n | SelectOptionWithTextLabel\n\n/**\n * A group entry in `Select`'s `options` array. Renders a heading above its\n * `options` and nests them visually beneath it.\n */\nexport interface SelectOptionsGroup {\n /**\n * Whether all options in this group are non-interactive. Disables every\n * nested option regardless of its own `disabled` flag.\n */\n disabled?: boolean\n /** Visible heading displayed above the group's options. */\n label: string\n /** The selectable options nested under this group. */\n options: SelectOption[]\n}\n\nexport type SelectItem = SelectOption | SelectOptionsGroup\n\n// ---------------------------------------------------------------------------\n// Select component props\n// ---------------------------------------------------------------------------\n\ninterface SelectBaseProps {\n /**\n * When true, renders as a popover listbox instead of a native `<select>`.\n * Enables rich content in options (icons, descriptions).\n */\n complex?: boolean\n /**\n * Helper text displayed below the select. Styled as error text when\n * `invalid`. Defaults to `\"Please select an option\"` when `invalid` is true\n * and no description is provided.\n */\n description?: string\n /**\n * Whether the select is in an invalid state. Shows the default description\n * if none is provided.\n */\n invalid?: boolean\n /** A flat or mixed array of options and option groups. */\n options: SelectItem[]\n /** Placeholder text shown when no option is selected. Defaults to `\"Select an option\"`. */\n placeholder?: string\n /** The size of the select. */\n size?: SelectSize\n}\n\ninterface SelectWithVisibleLabel extends SelectBaseProps {\n /** If true, the label is visually hidden and set as aria-label. */\n hideLabel?: false\n /**\n * The label text for the select. Required unless `aria-label` or\n * `aria-labelledby` is provided.\n */\n label: string\n}\n\ninterface SelectWithHiddenLabel extends SelectBaseProps {\n /** If true, the label is visually hidden and set as aria-label. */\n hideLabel: true\n /** The label text for the select. Must be a string when hidden. */\n label: string\n}\n\ninterface SelectWithAriaLabel extends SelectBaseProps {\n /** Accessible label for the select. Use when no visible label exists. */\n \"aria-label\": string\n hideLabel?: never\n label?: never\n}\n\ninterface SelectWithAriaLabelledBy extends SelectBaseProps {\n /**\n * ID of an external label element. Use instead of `label` when a visible\n * label exists elsewhere on the page.\n */\n \"aria-labelledby\": string\n hideLabel?: never\n label?: never\n}\n\nexport type SelectProps =\n | SelectWithAriaLabel\n | SelectWithAriaLabelledBy\n | SelectWithHiddenLabel\n | SelectWithVisibleLabel\n\ntype BaseSelectElementProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n keyof SelectProps | \"multiple\" | \"size\"\n>\n\nexport type NativeSelectElementProps = BaseSelectElementProps &\n SelectProps & {\n complex?: false\n }\n\nexport type ComplexSelectElementProps = BaseSelectElementProps &\n SelectProps & {\n complex: true\n }\n\nexport type SelectElementProps =\n | NativeSelectElementProps\n | ComplexSelectElementProps\n\nfunction normalizeSelectValue(\n value:\n | NativeSelectElementProps[\"defaultValue\"]\n | NativeSelectElementProps[\"value\"]\n | ComplexSelectElementProps[\"defaultValue\"]\n | ComplexSelectElementProps[\"value\"]\n) {\n if (value === undefined || value === null) return undefined\n if (Array.isArray(value)) return value[0]\n return String(value)\n}\n\n// ---------------------------------------------------------------------------\n// Select (public)\n// ---------------------------------------------------------------------------\n\nexport const Select = forwardRef<HTMLSelectElement, SelectElementProps>(\n function Select(props: SelectElementProps, ref) {\n const {\n \"aria-label\": userAriaLabel,\n \"aria-labelledby\": userAriaLabelledBy,\n className,\n complex,\n defaultValue,\n description,\n hideLabel,\n id,\n invalid,\n label,\n onChange,\n options,\n placeholder,\n required,\n size,\n value,\n ...restProps\n } = props\n\n const triggerRef = useRef<HTMLButtonElement>(null)\n const stableId = useId()\n const controlId = id || `tds-select-${stableId}`\n const labelId = `${controlId}-label`\n const resolvedDescription =\n description || (invalid ? \"Please select an option\" : undefined)\n const descriptionId = resolvedDescription\n ? `${controlId}-description`\n : undefined\n const computedClassName = classNames(\n \"tds-select\",\n {\n \"tds-select--invalid\": invalid,\n \"tds-select--lg\": size === \"lg\",\n \"tds-select--required\": required,\n },\n className\n )\n\n const normalizedDefaultValue = normalizeSelectValue(defaultValue)\n const normalizedValue = normalizeSelectValue(value)\n\n const computedDefaultValue =\n normalizedDefaultValue === undefined && normalizedValue === undefined\n ? \"\"\n : normalizedDefaultValue\n const effectivePlaceholder =\n normalizedDefaultValue !== undefined && normalizedDefaultValue !== \"\"\n ? null\n : placeholder || \"Select an option\"\n const showLabel = !!label && !hideLabel\n const computedAriaLabel = userAriaLabel ?? (hideLabel ? label : undefined)\n const computedAriaLabelledBy =\n userAriaLabelledBy ??\n (computedAriaLabel || !showLabel ? undefined : labelId)\n\n const sharedControlProps = {\n ...restProps,\n \"aria-describedby\": descriptionId,\n \"aria-label\": computedAriaLabel,\n \"aria-labelledby\": computedAriaLabelledBy,\n defaultValue: computedDefaultValue,\n invalid,\n options,\n placeholder: effectivePlaceholder,\n required,\n value: normalizedValue,\n }\n\n const handleComplexLabelClick = () => triggerRef.current?.focus()\n\n const SelectComponent = complex ? SelectPopover : SelectNative\n\n return (\n <div className={computedClassName}>\n {showLabel &&\n (complex ? (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- mirrors native label click-to-focus; keyboard users interact with the combobox directly\n <div\n className=\"tds-select-label\"\n id={labelId}\n onClick={handleComplexLabelClick}\n >\n {label}\n </div>\n ) : (\n <label htmlFor={controlId} id={labelId}>\n {label}\n </label>\n ))}\n <SelectComponent\n {...sharedControlProps}\n ref={ref}\n id={controlId}\n onChange={onChange}\n {...(complex && { triggerRef })}\n />\n {resolvedDescription && descriptionId && (\n <p className=\"tds-select-description\" id={descriptionId}>\n <Icon\n aria-hidden\n className=\"tds-select-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {resolvedDescription}\n </p>\n )}\n </div>\n )\n }\n)\n\nSelect.displayName = \"Select\"\n"],"names":["React"],"mappings":"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"}
@@ -1,11 +1,11 @@
1
1
  import "./index.css";
2
2
  import type { CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
3
- import React, { type AriaAttributes } from "react";
3
+ import type { CombineAriaPropsWithCustomProps } from "../../utilities/reactAriaProps";
4
+ import React from "react";
5
+ import { type TimeFieldProps as AriaTimeFieldProps } from "react-aria-components";
4
6
  export type TimeFieldSize = "md" | "lg";
5
7
  export type TimeFieldValue = CalendarDateTime | Time | ZonedDateTime;
6
8
  export interface TimeFieldProps {
7
- /** The default uncontrolled value (e.g. `new Time(9, 30)` or `new CalendarDateTime(2025, 1, 1, 9, 30)`). */
8
- defaultValue?: TimeFieldValue | null;
9
9
  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */
10
10
  description?: string;
11
11
  /** Disables the field. */
@@ -14,10 +14,6 @@ export interface TimeFieldProps {
14
14
  forceLeadingZeros?: boolean;
15
15
  /** If `true`, renders the label visually hidden. */
16
16
  hideLabel?: boolean;
17
- /** If `true`, hides the time zone abbreviation for ZonedDateTime values. */
18
- hideTimeZone?: boolean;
19
- /** Whether to display in 12 or 24 hour format. By default, determined by locale. */
20
- hourCycle?: 12 | 24;
21
17
  /** If `true`, applies error styling to the field and description. */
22
18
  invalid?: boolean;
23
19
  /** Accessible label for the field. */
@@ -26,22 +22,16 @@ export interface TimeFieldProps {
26
22
  max?: TimeFieldValue;
27
23
  /** The minimum allowed time (e.g. `new Time(9, 0)`). */
28
24
  min?: TimeFieldValue;
29
- /** Field name for form submission. */
30
- name?: string;
31
- /** Called when the value changes. */
32
- onChange?: (value: TimeFieldValue | null) => void;
33
25
  /** Allows the value to be read but not changed. */
34
26
  readOnly?: boolean;
35
27
  /** If `true`, appends an asterisk after the label text. */
36
28
  required?: boolean;
37
29
  /** The size of the time field. */
38
30
  size?: TimeFieldSize;
39
- /** The controlled value (e.g. `new Time(9, 30)` or `new CalendarDateTime(2025, 1, 1, 9, 30)`). */
40
- value?: TimeFieldValue | null;
41
31
  }
42
- export type TimeFieldElementProps = TimeFieldProps & Omit<AriaAttributes, keyof TimeFieldProps> & {
43
- className?: string;
44
- id?: string;
45
- };
46
- export declare function TimeField({ className, defaultValue, description, disabled, forceLeadingZeros, hideLabel, hideTimeZone, hourCycle, invalid, label, max, min, name, onChange, readOnly, required, size, value, ...restProps }: TimeFieldElementProps): React.JSX.Element;
32
+ type AriaTimeFieldPropsToOmit = "children" | "granularity" | "placeholderValue" | "shouldForceLeadingZeros" | "slot";
33
+ type AriaTimeFieldPropsToInclude = "defaultValue" | "hideTimeZone" | "hourCycle" | "name" | "onChange" | "value";
34
+ export type TimeFieldElementProps = CombineAriaPropsWithCustomProps<AriaTimeFieldProps<TimeFieldValue>, TimeFieldProps, AriaTimeFieldPropsToOmit, AriaTimeFieldPropsToInclude>;
35
+ export declare function TimeField({ className, description, disabled, forceLeadingZeros, hideLabel, invalid, label, max, min, readOnly, required, size, ...restProps }: TimeFieldElementProps): React.JSX.Element;
36
+ export {};
47
37
  //# sourceMappingURL=TimeField.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,EACV,gBAAgB,EAChB,IAAI,EACJ,aAAa,EACd,MAAM,yBAAyB,CAAA;AAGhC,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AASlD,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAA;AAEvC,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,IAAI,GAAG,aAAa,CAAA;AAEpE,MAAM,WAAW,cAAc;IAC7B,4GAA4G;IAC5G,YAAY,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IACpC,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,oFAAoF;IACpF,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,wDAAwD;IACxD,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAA;IACjD,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,kGAAkG;IAClG,KAAK,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;CAC9B;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,GAChD,IAAI,CAAC,cAAc,EAAE,MAAM,cAAc,CAAC,GAAG;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAEH,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,KAAK,EACL,GAAG,SAAS,EACb,EAAE,qBAAqB,qBAwDvB"}
1
+ {"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,EACV,gBAAgB,EAChB,IAAI,EACJ,aAAa,EACd,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAML,KAAK,cAAc,IAAI,kBAAkB,EAC1C,MAAM,uBAAuB,CAAA;AAE9B,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAA;AAEvC,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,IAAI,GAAG,aAAa,CAAA;AAEpE,MAAM,WAAW,cAAc;IAC7B,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,wDAAwD;IACxD,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB;AAED,KAAK,wBAAwB,GACzB,UAAU,GACV,aAAa,GACb,kBAAkB,GAClB,yBAAyB,GACzB,MAAM,CAAA;AAEV,KAAK,2BAA2B,GAC5B,cAAc,GACd,cAAc,GACd,WAAW,GACX,MAAM,GACN,UAAU,GACV,OAAO,CAAA;AAEX,MAAM,MAAM,qBAAqB,GAAG,+BAA+B,CACjE,kBAAkB,CAAC,cAAc,CAAC,EAClC,cAAc,EACd,wBAAwB,EACxB,2BAA2B,CAC5B,CAAA;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,GAAG,SAAS,EACb,EAAE,qBAAqB,qBAkDvB"}
@@ -3,9 +3,9 @@ import classNames from 'classnames';
3
3
  import React__default from 'react';
4
4
  import { TimeField as TimeField$1, Label, DateInput, DateSegment, Text } from 'react-aria-components';
5
5
 
6
- function TimeField({ className, defaultValue, description, disabled, forceLeadingZeros, hideLabel, hideTimeZone, hourCycle, invalid, label, max, min, name, onChange, readOnly, required, size = "md", value, ...restProps }) {
6
+ function TimeField({ className, description, disabled, forceLeadingZeros, hideLabel, invalid, label, max, min, readOnly, required, size = "md", ...restProps }) {
7
7
  const combinedClassName = classNames("tds-time-field", { "tds-time-field--lg": size === "lg" }, className);
8
- return (React__default.createElement(TimeField$1, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultValue: defaultValue, granularity: "minute", hideTimeZone: hideTimeZone, hourCycle: hourCycle, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, maxValue: max ?? undefined, minValue: min ?? undefined, name: name, onChange: onChange ?? undefined, shouldForceLeadingZeros: forceLeadingZeros, value: value },
8
+ return (React__default.createElement(TimeField$1, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, granularity: "minute", isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, maxValue: max ?? undefined, minValue: min ?? undefined, shouldForceLeadingZeros: forceLeadingZeros },
9
9
  !hideLabel && React__default.createElement(Label, { className: "tds-time-field-label" }, label),
10
10
  React__default.createElement(DateInput, { className: "tds-time-field-input" }, (segment) => (React__default.createElement(DateSegment, { className: segment.type === "literal"
11
11
  ? "tds-time-field-segment-separator"