@transferwise/components 0.0.0-experimental-973eefd → 0.0.0-experimental-981ae6b

package/build/dateLookup/DateLookup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateLookup.mjs","sources":["../../src/dateLookup/DateLookup.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { createRef, PureComponent, KeyboardEvent } from 'react';\n\nimport {\n  Size,\n  MonthFormat,\n  Position,\n  Breakpoint,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n} from '../common';\nimport { isWithinRange, moveToWithinRange } from '../common/dateUtils';\nimport ResponsivePanel from '../common/responsivePanel';\nimport { WithInputAttributesProps, withInputAttributes } from '../inputs/contexts';\nimport DateTrigger from './dateTrigger';\nimport DayCalendar from './dayCalendar';\nimport { getStartOfDay } from './getStartOfDay';\nimport MonthCalendar from './monthCalendar';\nimport YearCalendar from './yearCalendar';\n\nexport interface DateLookupProps {\n  id?: string;\n  value: Date | null;\n  min?: Date | null;\n  max?: Date | null;\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  placeholder?: string;\n  label?: string;\n  'aria-labelledby'?: string;\n  monthFormat?: `${MonthFormat}`;\n  disabled?: boolean;\n  clearable?: boolean;\n  onChange: (date: Date | null) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n}\n\ntype DateLookupPropsWithInputAttributes = DateLookupProps & Partial<WithInputAttributesProps>;\n\ninterface DateLookupState {\n  selectedDate: Date | null;\n  originalDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewMonth: number;\n  viewYear: number;\n  open: boolean;\n  mode: 'day' | 'month' | 'year';\n  isMobile: boolean;\n}\n\nclass DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateLookupState> {\n  declare props: DateLookupPropsWithInputAttributes &\n    Required<Pick<DateLookupPropsWithInputAttributes, keyof typeof DateLookup.defaultProps>>;\n\n  static defaultProps = {\n    value: null,\n    min: null,\n    max: null,\n    size: Size.MEDIUM,\n    placeholder: '',\n    label: '',\n    monthFormat: MonthFormat.LONG,\n    disabled: false,\n    clearable: false,\n  } satisfies Partial<DateLookupPropsWithInputAttributes>;\n\n  element = createRef<HTMLDivElement>();\n  dropdown = createRef<HTMLDivElement>();\n\n  constructor(props: DateLookup['props']) {\n    super(props);\n    this.state = {\n      selectedDate: getStartOfDay(props.value),\n      originalDate: null,\n      min: getStartOfDay(props.min),\n      max: getStartOfDay(props.max),\n      viewMonth: (props.value || new Date()).getMonth(),\n      viewYear: (props.value || new Date()).getFullYear(),\n      open: false,\n      mode: 'day',\n      isMobile: false,\n    };\n  }\n\n  static getDerivedStateFromProps(props: DateLookup['props'], state: DateLookupState) {\n    const propsSelected = getStartOfDay(props.value);\n    const propsMin = getStartOfDay(props.min);\n    const propsMax = getStartOfDay(props.max);\n    const hasSelectedChanged = state.selectedDate?.getTime() !== propsSelected?.getTime();\n    const hasMinChanged = state.min?.getTime() !== propsMin?.getTime();\n    const hasMaxChanged = state.max?.getTime() !== propsMax?.getTime();\n    if (hasSelectedChanged || hasMinChanged || hasMaxChanged) {\n      const selectedDate = hasSelectedChanged ? propsSelected : state.selectedDate;\n      const min = hasMinChanged ? propsMin : state.min;\n      const max = hasMaxChanged ? propsMax : state.max;\n      if (selectedDate && !isWithinRange(selectedDate, min, max)) {\n        props.onChange(moveToWithinRange(selectedDate, min, max));\n        return null;\n      }\n      const viewDateThatIsWithinRange: Date =\n        selectedDate || ((min || max) && moveToWithinRange(new Date(), min, max)) || new Date();\n      const viewMonth = viewDateThatIsWithinRange.getMonth();\n      const viewYear = viewDateThatIsWithinRange.getFullYear();\n      return { selectedDate, min, max, viewMonth, viewYear };\n    }\n    return null;\n  }\n\n  componentDidUpdate(previousProps: DateLookupPropsWithInputAttributes) {\n    if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {\n      this.focusOn('.active');\n    }\n    const mediaQuery = window.matchMedia(`(max-width: ${Breakpoint.SMALL}px)`);\n    this.setState({ isMobile: mediaQuery.matches });\n  }\n\n  componentWillUnmount() {\n    // Prevents memory leak by cleaning state.\n    this.setState = () => {};\n  }\n\n  open = () => {\n    const { onFocus } = this.props;\n\n    this.setState({ open: true, mode: 'day' });\n    if (onFocus) {\n      onFocus();\n    }\n  };\n\n  discard = () => {\n    const { originalDate } = this.state;\n    if (originalDate !== null) {\n      this.props.onChange(originalDate);\n    }\n    this.close();\n  };\n\n  close = () => {\n    const { onBlur } = this.props;\n    this.setState({ open: false, originalDate: null });\n    if (onBlur) {\n      onBlur();\n    }\n  };\n\n  handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const { open, originalDate } = this.state;\n    switch (event.key) {\n      case 'ArrowLeft':\n        if (open) {\n          this.adjustDate(-1, -1, -1);\n        } else {\n          this.open();\n        }\n        event.preventDefault();\n        break;\n      case 'ArrowUp':\n        if (open) {\n          this.adjustDate(-7, -4, -4);\n        } else {\n          this.open();\n        }\n        event.preventDefault();\n        break;\n      case 'ArrowRight':\n        if (open) {\n          this.adjustDate(1, 1, 1);\n        } else {\n          this.open();\n        }\n        event.preventDefault();\n        break;\n      case 'ArrowDown':\n        if (open) {\n          this.adjustDate(7, 4, 4);\n        } else {\n          this.open();\n        }\n        event.preventDefault();\n        break;\n      case 'Escape':\n        if (originalDate !== null) {\n          this.props.onChange(originalDate);\n        }\n        this.close();\n        event.preventDefault();\n        break;\n      default:\n        break;\n    }\n  };\n\n  adjustDate = (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {\n    const { selectedDate, min, max, mode, originalDate } = this.state;\n    if (originalDate === null) {\n      this.setState({ originalDate: selectedDate });\n    }\n    let date: Date | null;\n    if (selectedDate) {\n      date = new Date(\n        mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),\n        mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),\n        mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),\n      );\n    } else {\n      date = getStartOfDay(new Date());\n    }\n    if (date) {\n      date = moveToWithinRange(date, min, max);\n    }\n    if (date?.getTime() !== selectedDate?.getTime()) {\n      this.props.onChange(date);\n    }\n  };\n\n  focusOn = (preferredElement: string, fallbackElement?: string) => {\n    const element = this.element.current?.querySelector(preferredElement) as HTMLElement | null;\n    if (element) {\n      element.focus();\n    } else if (fallbackElement) {\n      this.focusOn(fallbackElement);\n    }\n  };\n\n  switchMode = (mode: 'day' | 'month' | 'year') => {\n    this.setState({ mode }, () => {\n      this.focusOn('.active', '.today');\n    });\n  };\n\n  switchToDays = () => this.switchMode('day');\n\n  switchToMonths = () => this.switchMode('month');\n\n  switchToYears = () => this.switchMode('year');\n\n  handleSelectedDateUpdate = (selectedDate: Date) => {\n    this.setState({ selectedDate }, () => {\n      this.props.onChange(selectedDate);\n      this.close();\n      this.focusOn('.btn');\n    });\n  };\n\n  handleViewDateUpdate = ({ month = this.state.viewMonth, year = this.state.viewYear }) => {\n    this.setState({ viewMonth: month, viewYear: year });\n  };\n\n  getCalendar = () => {\n    const { selectedDate, min, max, viewMonth, viewYear, mode, isMobile } = this.state;\n    const { placeholder, monthFormat } = this.props;\n    return (\n      <div className={classNames({ 'p-a-1': !isMobile })}>\n        {mode === 'day' && (\n          <DayCalendar\n            selectedDate={selectedDate}\n            min={min}\n            max={max}\n            viewMonth={viewMonth}\n            viewYear={viewYear}\n            monthFormat={monthFormat}\n            onSelect={this.handleSelectedDateUpdate}\n            onLabelClick={this.switchToYears}\n            onViewDateUpdate={this.handleViewDateUpdate}\n          />\n        )}\n        {mode === 'month' && (\n          <MonthCalendar\n            selectedDate={selectedDate}\n            min={min}\n            max={max}\n            viewYear={viewYear}\n            placeholder={placeholder}\n            onSelect={this.switchToDays}\n            onLabelClick={this.switchToYears}\n            onViewDateUpdate={this.handleViewDateUpdate}\n          />\n        )}\n        {mode === 'year' && (\n          <YearCalendar\n            selectedDate={selectedDate}\n            min={min}\n            max={max}\n            viewYear={viewYear}\n            placeholder={placeholder}\n            onSelect={this.switchToMonths}\n            onViewDateUpdate={this.handleViewDateUpdate}\n          />\n        )}\n      </div>\n    );\n  };\n\n  handleClear = () => {\n    this.props.onChange(null);\n    this.focusOn('.np-date-trigger');\n  };\n\n  render() {\n    const { selectedDate, open } = this.state;\n\n    const {\n      inputAttributes,\n      id: idProp,\n      'aria-labelledby': ariaLabelledByProp,\n      size,\n      placeholder,\n      label,\n      monthFormat,\n      disabled,\n      clearable,\n      value,\n    } = this.props;\n    const id = idProp ?? inputAttributes?.id;\n    const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];\n\n    return (\n      <div\n        ref={this.element}\n        {...inputAttributes}\n        id={id}\n        aria-labelledby={ariaLabelledBy}\n        className=\"input-group\"\n        onKeyDown={this.handleKeyDown}\n      >\n        <DateTrigger\n          selectedDate={selectedDate}\n          size={size}\n          placeholder={placeholder}\n          label={label}\n          monthFormat={monthFormat}\n          disabled={disabled || false}\n          onClick={this.open}\n          onClear={!disabled && clearable && value ? this.handleClear : undefined}\n        />\n        <ResponsivePanel\n          anchorRef={this.element}\n          open={open}\n          className=\"tw-date-lookup-menu\"\n          position={Position.BOTTOM}\n          onClose={this.discard}\n        >\n          {this.getCalendar()}\n        </ResponsivePanel>\n      </div>\n    );\n  }\n}\n\nexport const DateLookupWithoutInputAttributes = DateLookup;\n\nexport default withInputAttributes(\n  DateLookup as React.ComponentType<DateLookupPropsWithInputAttributes>,\n  { nonLabelable: true },\n);\n"],"names":["DateLookup","PureComponent","defaultProps","value","min","max","size","Size","MEDIUM","placeholder","label","monthFormat","MonthFormat","LONG","disabled","clearable","element","createRef","dropdown","constructor","props","state","selectedDate","getStartOfDay","originalDate","viewMonth","Date","getMonth","viewYear","getFullYear","open","mode","isMobile","getDerivedStateFromProps","propsSelected","propsMin","propsMax","hasSelectedChanged","getTime","hasMinChanged","hasMaxChanged","isWithinRange","onChange","moveToWithinRange","viewDateThatIsWithinRange","componentDidUpdate","previousProps","focusOn","mediaQuery","window","matchMedia","Breakpoint","SMALL","setState","matches","componentWillUnmount","onFocus","discard","close","onBlur","handleKeyDown","event","key","adjustDate","preventDefault","daysToAdd","monthsToAdd","yearsToAdd","date","getDate","preferredElement","fallbackElement","current","querySelector","focus","switchMode","switchToDays","switchToMonths","switchToYears","handleSelectedDateUpdate","handleViewDateUpdate","month","year","getCalendar","_jsxs","className","classNames","children","_jsx","DayCalendar","onSelect","onLabelClick","onViewDateUpdate","MonthCalendar","YearCalendar","handleClear","render","inputAttributes","id","idProp","ariaLabelledByProp","ariaLabelledBy","ref","onKeyDown","DateTrigger","onClick","onClear","undefined","ResponsivePanel","anchorRef","position","Position","BOTTOM","onClose","withInputAttributes","nonLabelable"],"mappings":"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"}
+{"version":3,"file":"DateLookup.mjs","sources":["../../src/dateLookup/DateLookup.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { createRef, PureComponent, KeyboardEvent } from 'react';\n\nimport {\n  Size,\n  MonthFormat,\n  Position,\n  Breakpoint,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n} from '../common';\nimport { isWithinRange, moveToWithinRange } from '../common/dateUtils';\nimport ResponsivePanel from '../common/responsivePanel';\nimport { WithInputAttributesProps, withInputAttributes } from '../inputs/contexts';\nimport { OverlayIdContext, OverlayIdProvider } from '../provider/overlay/OverlayIdProvider';\nimport DateTrigger from './dateTrigger';\nimport DayCalendar from './dayCalendar';\nimport { getStartOfDay } from './getStartOfDay';\nimport MonthCalendar from './monthCalendar';\nimport YearCalendar from './yearCalendar';\n\nexport interface DateLookupProps {\n  id?: string;\n  value: Date | null;\n  min?: Date | null;\n  max?: Date | null;\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  placeholder?: string;\n  label?: string;\n  'aria-labelledby'?: string;\n  monthFormat?: `${MonthFormat}`;\n  disabled?: boolean;\n  clearable?: boolean;\n  onChange: (date: Date | null) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n}\n\ntype DateLookupPropsWithInputAttributes = DateLookupProps & Partial<WithInputAttributesProps>;\n\ninterface DateLookupState {\n  selectedDate: Date | null;\n  originalDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewMonth: number;\n  viewYear: number;\n  open: boolean;\n  mode: 'day' | 'month' | 'year';\n  isMobile: boolean;\n}\n\nclass DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateLookupState> {\n  declare props: DateLookupPropsWithInputAttributes &\n    Required<Pick<DateLookupPropsWithInputAttributes, keyof typeof DateLookup.defaultProps>>;\n\n  static defaultProps = {\n    value: null,\n    min: null,\n    max: null,\n    size: Size.MEDIUM,\n    placeholder: '',\n    label: '',\n    monthFormat: MonthFormat.LONG,\n    disabled: false,\n    clearable: false,\n  } satisfies Partial<DateLookupPropsWithInputAttributes>;\n\n  element = createRef<HTMLDivElement>();\n  dropdown = createRef<HTMLDivElement>();\n\n  constructor(props: DateLookup['props']) {\n    super(props);\n    this.state = {\n      selectedDate: getStartOfDay(props.value),\n      originalDate: null,\n      min: getStartOfDay(props.min),\n      max: getStartOfDay(props.max),\n      viewMonth: (props.value || new Date()).getMonth(),\n      viewYear: (props.value || new Date()).getFullYear(),\n      open: false,\n      mode: 'day',\n      isMobile: false,\n    };\n  }\n\n  static getDerivedStateFromProps(props: DateLookup['props'], state: DateLookupState) {\n    const propsSelected = getStartOfDay(props.value);\n    const propsMin = getStartOfDay(props.min);\n    const propsMax = getStartOfDay(props.max);\n    const hasSelectedChanged = state.selectedDate?.getTime() !== propsSelected?.getTime();\n    const hasMinChanged = state.min?.getTime() !== propsMin?.getTime();\n    const hasMaxChanged = state.max?.getTime() !== propsMax?.getTime();\n    if (hasSelectedChanged || hasMinChanged || hasMaxChanged) {\n      const selectedDate = hasSelectedChanged ? propsSelected : state.selectedDate;\n      const min = hasMinChanged ? propsMin : state.min;\n      const max = hasMaxChanged ? propsMax : state.max;\n      if (selectedDate && !isWithinRange(selectedDate, min, max)) {\n        props.onChange(moveToWithinRange(selectedDate, min, max));\n        return null;\n      }\n      const viewDateThatIsWithinRange: Date =\n        selectedDate || ((min || max) && moveToWithinRange(new Date(), min, max)) || new Date();\n      const viewMonth = viewDateThatIsWithinRange.getMonth();\n      const viewYear = viewDateThatIsWithinRange.getFullYear();\n      return { selectedDate, min, max, viewMonth, viewYear };\n    }\n    return null;\n  }\n\n  componentDidUpdate(previousProps: DateLookupPropsWithInputAttributes) {\n    if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {\n      this.focusOn('.active');\n    }\n    const mediaQuery = window.matchMedia(`(max-width: ${Breakpoint.SMALL}px)`);\n    this.setState({ isMobile: mediaQuery.matches });\n  }\n\n  componentWillUnmount() {\n    // Prevents memory leak by cleaning state.\n    this.setState = () => {};\n  }\n\n  open = () => {\n    const { onFocus } = this.props;\n\n    this.setState({ open: true, mode: 'day' });\n    if (onFocus) {\n      onFocus();\n    }\n  };\n\n  discard = () => {\n    const { originalDate } = this.state;\n    if (originalDate !== null) {\n      this.props.onChange(originalDate);\n    }\n    this.close();\n  };\n\n  close = () => {\n    const { onBlur } = this.props;\n    this.setState({ open: false, originalDate: null });\n    if (onBlur) {\n      onBlur();\n    }\n  };\n\n  handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const { open, originalDate } = this.state;\n    switch (event.key) {\n      case 'ArrowLeft':\n        if (open) {\n          this.adjustDate(-1, -1, -1);\n        } else {\n          this.open();\n        }\n        event.preventDefault();\n        break;\n      case 'ArrowUp':\n        if (open) {\n          this.adjustDate(-7, -4, -4);\n        } else {\n          this.open();\n        }\n        event.preventDefault();\n        break;\n      case 'ArrowRight':\n        if (open) {\n          this.adjustDate(1, 1, 1);\n        } else {\n          this.open();\n        }\n        event.preventDefault();\n        break;\n      case 'ArrowDown':\n        if (open) {\n          this.adjustDate(7, 4, 4);\n        } else {\n          this.open();\n        }\n        event.preventDefault();\n        break;\n      case 'Escape':\n        if (originalDate !== null) {\n          this.props.onChange(originalDate);\n        }\n        this.close();\n        event.preventDefault();\n        break;\n      default:\n        break;\n    }\n  };\n\n  adjustDate = (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {\n    const { selectedDate, min, max, mode, originalDate } = this.state;\n    if (originalDate === null) {\n      this.setState({ originalDate: selectedDate });\n    }\n    let date: Date | null;\n    if (selectedDate) {\n      date = new Date(\n        mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),\n        mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),\n        mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),\n      );\n    } else {\n      date = getStartOfDay(new Date());\n    }\n    if (date) {\n      date = moveToWithinRange(date, min, max);\n    }\n    if (date?.getTime() !== selectedDate?.getTime()) {\n      this.props.onChange(date);\n    }\n  };\n\n  focusOn = (preferredElement: string, fallbackElement?: string) => {\n    const element = this.element.current?.querySelector(preferredElement) as HTMLElement | null;\n    if (element) {\n      element.focus();\n    } else if (fallbackElement) {\n      this.focusOn(fallbackElement);\n    }\n  };\n\n  switchMode = (mode: 'day' | 'month' | 'year') => {\n    this.setState({ mode }, () => {\n      this.focusOn('.active', '.today');\n    });\n  };\n\n  switchToDays = () => this.switchMode('day');\n\n  switchToMonths = () => this.switchMode('month');\n\n  switchToYears = () => this.switchMode('year');\n\n  handleSelectedDateUpdate = (selectedDate: Date) => {\n    this.setState({ selectedDate }, () => {\n      this.props.onChange(selectedDate);\n      this.close();\n      this.focusOn('.btn');\n    });\n  };\n\n  handleViewDateUpdate = ({ month = this.state.viewMonth, year = this.state.viewYear }) => {\n    this.setState({ viewMonth: month, viewYear: year });\n  };\n\n  getCalendar = () => {\n    const { selectedDate, min, max, viewMonth, viewYear, mode, isMobile } = this.state;\n    const { placeholder, monthFormat } = this.props;\n    return (\n      <div className={classNames({ 'p-a-1': !isMobile })}>\n        {mode === 'day' && (\n          <DayCalendar\n            selectedDate={selectedDate}\n            min={min}\n            max={max}\n            viewMonth={viewMonth}\n            viewYear={viewYear}\n            monthFormat={monthFormat}\n            onSelect={this.handleSelectedDateUpdate}\n            onLabelClick={this.switchToYears}\n            onViewDateUpdate={this.handleViewDateUpdate}\n          />\n        )}\n        {mode === 'month' && (\n          <MonthCalendar\n            selectedDate={selectedDate}\n            min={min}\n            max={max}\n            viewYear={viewYear}\n            placeholder={placeholder}\n            onSelect={this.switchToDays}\n            onLabelClick={this.switchToYears}\n            onViewDateUpdate={this.handleViewDateUpdate}\n          />\n        )}\n        {mode === 'year' && (\n          <YearCalendar\n            selectedDate={selectedDate}\n            min={min}\n            max={max}\n            viewYear={viewYear}\n            placeholder={placeholder}\n            onSelect={this.switchToMonths}\n            onViewDateUpdate={this.handleViewDateUpdate}\n          />\n        )}\n      </div>\n    );\n  };\n\n  handleClear = () => {\n    this.props.onChange(null);\n    this.focusOn('.np-date-trigger');\n  };\n\n  render() {\n    const { selectedDate, open } = this.state;\n\n    const {\n      inputAttributes,\n      id: idProp,\n      'aria-labelledby': ariaLabelledByProp,\n      size,\n      placeholder,\n      label,\n      monthFormat,\n      disabled,\n      clearable,\n      value,\n    } = this.props;\n    const id = idProp ?? inputAttributes?.id;\n    const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];\n\n    return (\n      <div\n        ref={this.element}\n        {...inputAttributes}\n        id={id}\n        aria-labelledby={ariaLabelledBy}\n        className=\"input-group\"\n        onKeyDown={this.handleKeyDown}\n      >\n        <OverlayIdProvider open={open}>\n          <DateTrigger\n            selectedDate={selectedDate}\n            size={size}\n            placeholder={placeholder}\n            label={label}\n            monthFormat={monthFormat}\n            disabled={disabled || false}\n            onClick={this.open}\n            onClear={!disabled && clearable && value ? this.handleClear : undefined}\n          />\n          <ResponsivePanel\n            anchorRef={this.element}\n            open={open}\n            className=\"tw-date-lookup-menu\"\n            position={Position.BOTTOM}\n            onClose={this.discard}\n          >\n            {this.getCalendar()}\n          </ResponsivePanel>\n        </OverlayIdProvider>\n      </div>\n    );\n  }\n}\n\nexport const DateLookupWithoutInputAttributes = DateLookup;\n\nexport default withInputAttributes(\n  DateLookup as React.ComponentType<DateLookupPropsWithInputAttributes>,\n  { nonLabelable: true },\n);\n"],"names":["DateLookup","PureComponent","defaultProps","value","min","max","size","Size","MEDIUM","placeholder","label","monthFormat","MonthFormat","LONG","disabled","clearable","element","createRef","dropdown","constructor","props","state","selectedDate","getStartOfDay","originalDate","viewMonth","Date","getMonth","viewYear","getFullYear","open","mode","isMobile","getDerivedStateFromProps","propsSelected","propsMin","propsMax","hasSelectedChanged","getTime","hasMinChanged","hasMaxChanged","isWithinRange","onChange","moveToWithinRange","viewDateThatIsWithinRange","componentDidUpdate","previousProps","focusOn","mediaQuery","window","matchMedia","Breakpoint","SMALL","setState","matches","componentWillUnmount","onFocus","discard","close","onBlur","handleKeyDown","event","key","adjustDate","preventDefault","daysToAdd","monthsToAdd","yearsToAdd","date","getDate","preferredElement","fallbackElement","current","querySelector","focus","switchMode","switchToDays","switchToMonths","switchToYears","handleSelectedDateUpdate","handleViewDateUpdate","month","year","getCalendar","_jsxs","className","classNames","children","_jsx","DayCalendar","onSelect","onLabelClick","onViewDateUpdate","MonthCalendar","YearCalendar","handleClear","render","inputAttributes","id","idProp","ariaLabelledByProp","ariaLabelledBy","ref","onKeyDown","OverlayIdProvider","DateTrigger","onClick","onClear","undefined","ResponsivePanel","anchorRef","position","Position","BOTTOM","onClose","withInputAttributes","nonLabelable"],"mappings":"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"}

package/build/dateLookup/dateTrigger/DateTrigger.js

@@ -5,6 +5,8 @@ var reactIntl = require('react-intl');
 var Chevron = require('../../chevron/Chevron.js');
 var CloseButton = require('../../common/closeButton/CloseButton.js');
 var DateTrigger_messages = require('./DateTrigger.messages.js');
+var React = require('react');
+var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
 var jsxRuntime = require('react/jsx-runtime');
 var position = require('../../common/propsValues/position.js');
 var size = require('../../common/propsValues/size.js');
@@ -23,8 +25,12 @@ const DateTrigger = ({
     locale,
     formatMessage
   } = reactIntl.useIntl();
+  const overlayId = React.useContext(OverlayIdProvider.OverlayIdContext);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("button", {
+      "aria-haspopup": "dialog",
+      "aria-expanded": overlayId != null,
+      "aria-controls": overlayId,
       className: `btn btn-${size$1} btn-input np-date-trigger`,
       disabled: disabled,
       type: "button",

package/build/dateLookup/dateTrigger/DateTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTrigger.js","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\n\ninterface DateTriggerProps {\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n\n  return (\n    <>\n      <button\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && <span className=\"control-label small m-r-1\">{label}</span>}\n        {selectedDate ? (\n          <span className=\"font-weight-normal\">\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </span>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <CloseButton\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              size={Size.SMALL}\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            />\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","onClick","onClear","locale","formatMessage","useIntl","_jsxs","_Fragment","children","className","type","_jsx","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":";;;;;;;;;;;AAoBMA,MAAAA,WAAW,GAA+BA,CAAC;EAC/CC,YAAY;QACZC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAClBC,WAAW;EACXC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,OAAO;AACPC,EAAAA,OAAAA;AACD,CAAA,KAAI;EACH,MAAM;IAAEC,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;EAE3C,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEF,eAAA,CAAA,QAAA,EAAA;MACEG,SAAS,EAAE,CAAWf,QAAAA,EAAAA,MAAI,CAA6B,0BAAA,CAAA;AACvDM,MAAAA,QAAQ,EAAEA,QAAS;AACnBU,MAAAA,IAAI,EAAC,QAAQ;AACbT,MAAAA,OAAO,EAAEA,OAAQ;MAAAO,QAAA,EAAA,CAEhBV,KAAK,iBAAIa,cAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,2BAA2B;AAAAD,QAAAA,QAAA,EAAEV,KAAAA;AAAK,OAAO,CAAC,EACnEL,YAAY,gBACXkB,cAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,oBAAoB;AAAAD,QAAAA,QAAA,EACjCI,qBAAU,CAACnB,YAAY,EAAEU,MAAM,EAAE;AAChCU,UAAAA,GAAG,EAAE,SAAS;AACdC,UAAAA,KAAK,EAAEf,WAAW;AAClBgB,UAAAA,IAAI,EAAE,SAAA;SACP,CAAA;OACG,CAAC,gBAEPJ,cAAA,CAAA,MAAA,EAAA;AACEF,QAAAA,SAAS,EAAC,oHACuD;AAAAD,QAAAA,QAAA,EAEhEX,WAAAA;AAAW,OACR,CACP,EACA,CAACK,OAAO,gBAAGS,cAAA,CAACK,OAAO,EAAA;QAACC,WAAW,EAAEC,iBAAQ,CAACC,MAAO;AAACnB,QAAAA,QAAQ,EAAEA,QAAAA;OAAS,CAAG,GAAG,IAAI,CAAA;AAAA,KAC1E,CACR,EAACE,OAAO,gBACNI,eAAA,CAAAC,mBAAA,EAAA;AAAAC,MAAAA,QAAA,gBACEG,cAAA,CAAA,KAAA,EAAA;AAAKF,QAAAA,SAAS,EAAC,UAAA;OACf,CAAA,eAAAE,cAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,mBAAmB;QAAAD,QAAA,eACjCG,cAAA,CAACS,uBAAW,EAAA;UACVX,SAAS,EAAE,CAAwBf,qBAAAA,EAAAA,MAAI,CAAG,CAAA;UAC1C,YAAY,EAAA,CAAA,EAAGU,aAAa,CAACiB,oBAAQ,CAACC,SAAS,CAAC,CAAIxB,CAAAA,EAAAA,KAAK,CAAG,CAAA;UAC5DJ,IAAI,EAAEC,SAAI,CAAC4B,KAAM;UACjBtB,OAAO,EAAGuB,KAA0C,IAAI;YACtDA,KAAK,CAACC,eAAe,EAAE,CAAA;YACvBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtBxB,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SAEJ,CAAA;AAAA,OAAM,CACR,CAAA;KAAA,CAAG,GACD,IAAI,CAAA;AAAA,GACV,CAAG,CAAA;AAEP;;;;"}
+{"version":3,"file":"DateTrigger.js","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\ninterface DateTriggerProps {\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <>\n      <button\n        aria-haspopup=\"dialog\"\n        aria-expanded={overlayId != null}\n        aria-controls={overlayId}\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && <span className=\"control-label small m-r-1\">{label}</span>}\n        {selectedDate ? (\n          <span className=\"font-weight-normal\">\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </span>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <CloseButton\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              size={Size.SMALL}\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            />\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","onClick","onClear","locale","formatMessage","useIntl","overlayId","useContext","OverlayIdContext","_jsxs","_Fragment","children","className","type","_jsx","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":";;;;;;;;;;;;;AAsBMA,MAAAA,WAAW,GAA+BA,CAAC;EAC/CC,YAAY;QACZC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAClBC,WAAW;EACXC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,OAAO;AACPC,EAAAA,OAAAA;AACD,CAAA,KAAI;EACH,MAAM;IAAEC,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AAE3C,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEF,eAAA,CAAA,QAAA,EAAA;AACE,MAAA,eAAA,EAAc,QAAQ;MACtB,eAAeH,EAAAA,SAAS,IAAI,IAAK;AACjC,MAAA,eAAA,EAAeA,SAAU;MACzBM,SAAS,EAAE,CAAWlB,QAAAA,EAAAA,MAAI,CAA6B,0BAAA,CAAA;AACvDM,MAAAA,QAAQ,EAAEA,QAAS;AACnBa,MAAAA,IAAI,EAAC,QAAQ;AACbZ,MAAAA,OAAO,EAAEA,OAAQ;MAAAU,QAAA,EAAA,CAEhBb,KAAK,iBAAIgB,cAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,2BAA2B;AAAAD,QAAAA,QAAA,EAAEb,KAAAA;AAAK,OAAO,CAAC,EACnEL,YAAY,gBACXqB,cAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,oBAAoB;AAAAD,QAAAA,QAAA,EACjCI,qBAAU,CAACtB,YAAY,EAAEU,MAAM,EAAE;AAChCa,UAAAA,GAAG,EAAE,SAAS;AACdC,UAAAA,KAAK,EAAElB,WAAW;AAClBmB,UAAAA,IAAI,EAAE,SAAA;SACP,CAAA;OACG,CAAC,gBAEPJ,cAAA,CAAA,MAAA,EAAA;AACEF,QAAAA,SAAS,EAAC,oHACuD;AAAAD,QAAAA,QAAA,EAEhEd,WAAAA;AAAW,OACR,CACP,EACA,CAACK,OAAO,gBAAGY,cAAA,CAACK,OAAO,EAAA;QAACC,WAAW,EAAEC,iBAAQ,CAACC,MAAO;AAACtB,QAAAA,QAAQ,EAAEA,QAAAA;OAAS,CAAG,GAAG,IAAI,CAAA;AAAA,KAC1E,CACR,EAACE,OAAO,gBACNO,eAAA,CAAAC,mBAAA,EAAA;AAAAC,MAAAA,QAAA,gBACEG,cAAA,CAAA,KAAA,EAAA;AAAKF,QAAAA,SAAS,EAAC,UAAA;OACf,CAAA,eAAAE,cAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,mBAAmB;QAAAD,QAAA,eACjCG,cAAA,CAACS,uBAAW,EAAA;UACVX,SAAS,EAAE,CAAwBlB,qBAAAA,EAAAA,MAAI,CAAG,CAAA;UAC1C,YAAY,EAAA,CAAA,EAAGU,aAAa,CAACoB,oBAAQ,CAACC,SAAS,CAAC,CAAI3B,CAAAA,EAAAA,KAAK,CAAG,CAAA;UAC5DJ,IAAI,EAAEC,SAAI,CAAC+B,KAAM;UACjBzB,OAAO,EAAG0B,KAA0C,IAAI;YACtDA,KAAK,CAACC,eAAe,EAAE,CAAA;YACvBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtB3B,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SAEJ,CAAA;AAAA,OAAM,CACR,CAAA;KAAA,CAAG,GACD,IAAI,CAAA;AAAA,GACV,CAAG,CAAA;AAEP;;;;"}

package/build/dateLookup/dateTrigger/DateTrigger.mjs

@@ -3,6 +3,8 @@ import { useIntl } from 'react-intl';
 import Chevron from '../../chevron/Chevron.mjs';
 import { CloseButton } from '../../common/closeButton/CloseButton.mjs';
 import dateTriggerMessages from './DateTrigger.messages.mjs';
+import { useContext } from 'react';
+import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Position } from '../../common/propsValues/position.mjs';
 import { Size } from '../../common/propsValues/size.mjs';
@@ -21,8 +23,12 @@ const DateTrigger = ({
     locale,
     formatMessage
   } = useIntl();
+  const overlayId = useContext(OverlayIdContext);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs("button", {
+      "aria-haspopup": "dialog",
+      "aria-expanded": overlayId != null,
+      "aria-controls": overlayId,
       className: `btn btn-${size} btn-input np-date-trigger`,
       disabled: disabled,
       type: "button",

package/build/dateLookup/dateTrigger/DateTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateTrigger.mjs","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\n\ninterface DateTriggerProps {\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n\n  return (\n    <>\n      <button\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && <span className=\"control-label small m-r-1\">{label}</span>}\n        {selectedDate ? (\n          <span className=\"font-weight-normal\">\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </span>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <CloseButton\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              size={Size.SMALL}\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            />\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","onClick","onClear","locale","formatMessage","useIntl","_jsxs","_Fragment","children","className","type","_jsx","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":";;;;;;;;;AAoBMA,MAAAA,WAAW,GAA+BA,CAAC;EAC/CC,YAAY;EACZC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAClBC,WAAW;EACXC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,OAAO;AACPC,EAAAA,OAAAA;AACD,CAAA,KAAI;EACH,MAAM;IAAEC,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;EAE3C,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEF,IAAA,CAAA,QAAA,EAAA;MACEG,SAAS,EAAE,CAAWf,QAAAA,EAAAA,IAAI,CAA6B,0BAAA,CAAA;AACvDM,MAAAA,QAAQ,EAAEA,QAAS;AACnBU,MAAAA,IAAI,EAAC,QAAQ;AACbT,MAAAA,OAAO,EAAEA,OAAQ;MAAAO,QAAA,EAAA,CAEhBV,KAAK,iBAAIa,GAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,2BAA2B;AAAAD,QAAAA,QAAA,EAAEV,KAAAA;AAAK,OAAO,CAAC,EACnEL,YAAY,gBACXkB,GAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,oBAAoB;AAAAD,QAAAA,QAAA,EACjCI,UAAU,CAACnB,YAAY,EAAEU,MAAM,EAAE;AAChCU,UAAAA,GAAG,EAAE,SAAS;AACdC,UAAAA,KAAK,EAAEf,WAAW;AAClBgB,UAAAA,IAAI,EAAE,SAAA;SACP,CAAA;OACG,CAAC,gBAEPJ,GAAA,CAAA,MAAA,EAAA;AACEF,QAAAA,SAAS,EAAC,oHACuD;AAAAD,QAAAA,QAAA,EAEhEX,WAAAA;AAAW,OACR,CACP,EACA,CAACK,OAAO,gBAAGS,GAAA,CAACK,OAAO,EAAA;QAACC,WAAW,EAAEC,QAAQ,CAACC,MAAO;AAACnB,QAAAA,QAAQ,EAAEA,QAAAA;OAAS,CAAG,GAAG,IAAI,CAAA;AAAA,KAC1E,CACR,EAACE,OAAO,gBACNI,IAAA,CAAAC,QAAA,EAAA;AAAAC,MAAAA,QAAA,gBACEG,GAAA,CAAA,KAAA,EAAA;AAAKF,QAAAA,SAAS,EAAC,UAAA;OACf,CAAA,eAAAE,GAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,mBAAmB;QAAAD,QAAA,eACjCG,GAAA,CAACS,WAAW,EAAA;UACVX,SAAS,EAAE,CAAwBf,qBAAAA,EAAAA,IAAI,CAAG,CAAA;UAC1C,YAAY,EAAA,CAAA,EAAGU,aAAa,CAACiB,mBAAQ,CAACC,SAAS,CAAC,CAAIxB,CAAAA,EAAAA,KAAK,CAAG,CAAA;UAC5DJ,IAAI,EAAEC,IAAI,CAAC4B,KAAM;UACjBtB,OAAO,EAAGuB,KAA0C,IAAI;YACtDA,KAAK,CAACC,eAAe,EAAE,CAAA;YACvBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtBxB,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SAEJ,CAAA;AAAA,OAAM,CACR,CAAA;KAAA,CAAG,GACD,IAAI,CAAA;AAAA,GACV,CAAG,CAAA;AAEP;;;;"}
+{"version":3,"file":"DateTrigger.mjs","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\ninterface DateTriggerProps {\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <>\n      <button\n        aria-haspopup=\"dialog\"\n        aria-expanded={overlayId != null}\n        aria-controls={overlayId}\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && <span className=\"control-label small m-r-1\">{label}</span>}\n        {selectedDate ? (\n          <span className=\"font-weight-normal\">\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </span>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <CloseButton\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              size={Size.SMALL}\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            />\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","onClick","onClear","locale","formatMessage","useIntl","overlayId","useContext","OverlayIdContext","_jsxs","_Fragment","children","className","type","_jsx","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":";;;;;;;;;;;AAsBMA,MAAAA,WAAW,GAA+BA,CAAC;EAC/CC,YAAY;EACZC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAClBC,WAAW;EACXC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,OAAO;AACPC,EAAAA,OAAAA;AACD,CAAA,KAAI;EACH,MAAM;IAAEC,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AAE3C,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;EAE9C,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEF,IAAA,CAAA,QAAA,EAAA;AACE,MAAA,eAAA,EAAc,QAAQ;MACtB,eAAeH,EAAAA,SAAS,IAAI,IAAK;AACjC,MAAA,eAAA,EAAeA,SAAU;MACzBM,SAAS,EAAE,CAAWlB,QAAAA,EAAAA,IAAI,CAA6B,0BAAA,CAAA;AACvDM,MAAAA,QAAQ,EAAEA,QAAS;AACnBa,MAAAA,IAAI,EAAC,QAAQ;AACbZ,MAAAA,OAAO,EAAEA,OAAQ;MAAAU,QAAA,EAAA,CAEhBb,KAAK,iBAAIgB,GAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,2BAA2B;AAAAD,QAAAA,QAAA,EAAEb,KAAAA;AAAK,OAAO,CAAC,EACnEL,YAAY,gBACXqB,GAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,oBAAoB;AAAAD,QAAAA,QAAA,EACjCI,UAAU,CAACtB,YAAY,EAAEU,MAAM,EAAE;AAChCa,UAAAA,GAAG,EAAE,SAAS;AACdC,UAAAA,KAAK,EAAElB,WAAW;AAClBmB,UAAAA,IAAI,EAAE,SAAA;SACP,CAAA;OACG,CAAC,gBAEPJ,GAAA,CAAA,MAAA,EAAA;AACEF,QAAAA,SAAS,EAAC,oHACuD;AAAAD,QAAAA,QAAA,EAEhEd,WAAAA;AAAW,OACR,CACP,EACA,CAACK,OAAO,gBAAGY,GAAA,CAACK,OAAO,EAAA;QAACC,WAAW,EAAEC,QAAQ,CAACC,MAAO;AAACtB,QAAAA,QAAQ,EAAEA,QAAAA;OAAS,CAAG,GAAG,IAAI,CAAA;AAAA,KAC1E,CACR,EAACE,OAAO,gBACNO,IAAA,CAAAC,QAAA,EAAA;AAAAC,MAAAA,QAAA,gBACEG,GAAA,CAAA,KAAA,EAAA;AAAKF,QAAAA,SAAS,EAAC,UAAA;OACf,CAAA,eAAAE,GAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,mBAAmB;QAAAD,QAAA,eACjCG,GAAA,CAACS,WAAW,EAAA;UACVX,SAAS,EAAE,CAAwBlB,qBAAAA,EAAAA,IAAI,CAAG,CAAA;UAC1C,YAAY,EAAA,CAAA,EAAGU,aAAa,CAACoB,mBAAQ,CAACC,SAAS,CAAC,CAAI3B,CAAAA,EAAAA,KAAK,CAAG,CAAA;UAC5DJ,IAAI,EAAEC,IAAI,CAAC+B,KAAM;UACjBzB,OAAO,EAAG0B,KAA0C,IAAI;YACtDA,KAAK,CAACC,eAAe,EAAE,CAAA;YACvBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtB3B,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SAEJ,CAAA;AAAA,OAAM,CACR,CAAA;KAAA,CAAG,GACD,IAAI,CAAA;AAAA,GACV,CAAG,CAAA;AAEP;;;;"}

package/build/drawer/Drawer.js

@@ -4,6 +4,7 @@ var classNames = require('classnames');
 var React = require('react');
 var CloseButton = require('../common/closeButton/CloseButton.js');
 var Dimmer = require('../dimmer/Dimmer.js');
+var OverlayIdProvider = require('../provider/overlay/OverlayIdProvider.js');
 var SlidingPanel = require('../slidingPanel/SlidingPanel.js');
 var Title = require('../title/Title.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -30,6 +31,7 @@ function Drawer({
     isMobile
   } = useLayout.useLayout();
   const titleId = React.useId();
+  const overlayId = React.useContext(OverlayIdProvider.OverlayIdContext);
   return /*#__PURE__*/jsxRuntime.jsx(Dimmer.default, {
     open: open,
     onClose: onClose,
@@ -37,6 +39,7 @@ function Drawer({
       open: open,
       position: isMobile ? position.Position.BOTTOM : position$1,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        id: overlayId,
         role: "dialog",
         "aria-modal": true,
         "aria-labelledby": headerTitle ? titleId : undefined,

package/build/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport interface DrawerProps {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n}\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          role=\"dialog\"\n          aria-modal\n          aria-labelledby={headerTitle ? titleId : undefined}\n          className={classNames('np-drawer', className)}\n        >\n          <div\n            className={classNames('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={classNames('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={classNames('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","logActionRequiredIf","isMobile","useLayout","titleId","useId","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","role","undefined","classNames","Title","id","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;;;;AA2BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAA;AACC,CAAA,EAAA;AACZC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACH,OAAO,CACT,CAAA;EAED,MAAM;AAAEI,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;EAEvB,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACR,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCY,cAAA,CAACE,oBAAY,EAAA;AAACT,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEE,QAAQ,GAAGO,iBAAQ,CAACC,MAAM,GAAGV,UAAS;AAAAN,MAAAA,QAAA,eACxEiB,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBf,WAAW,GAAGO,OAAO,GAAGS,SAAU;AACnDlB,QAAAA,SAAS,EAAEmB,2BAAU,CAAC,WAAW,EAAEnB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAE9CiB,eAAA,CAAA,KAAA,EAAA;AACEhB,UAAAA,SAAS,EAAEmB,2BAAU,CAAC,kBAAkB,EAAE;AACxC,YAAA,8BAA8B,EAAEjB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVS,cAAA,CAACS,KAAK,EAAA;AAACC,YAAAA,EAAE,EAAEZ,OAAQ;YAACa,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAAzB,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDS,cAAA,CAACc,uBAAW,EAAA;AAACC,YAAAA,OAAO,EAAEvB,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIY,cAAA,CAAA,KAAA,EAAA;AAAKX,UAAAA,SAAS,EAAEmB,2BAAU,CAAC,mBAAmB,CAAE;AAAApB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EAC7EE,aAAa,iBAAIU,cAAA,CAAA,KAAA,EAAA;AAAKX,UAAAA,SAAS,EAAEmB,2BAAU,CAAC,kBAAkB,CAAE;AAAApB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OACpF,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport interface DrawerProps {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n}\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          id={overlayId}\n          role=\"dialog\"\n          aria-modal\n          aria-labelledby={headerTitle ? titleId : undefined}\n          className={classNames('np-drawer', className)}\n        >\n          <div\n            className={classNames('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={classNames('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={classNames('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","role","undefined","classNames","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAA;AACC,CAAA,EAAA;AACZC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACH,OAAO,CACT,CAAA;EAED,MAAM;AAAEI,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACX,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCe,cAAA,CAACE,oBAAY,EAAA;AAACZ,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEE,QAAQ,GAAGU,iBAAQ,CAACC,MAAM,GAAGb,UAAS;AAAAN,MAAAA,QAAA,eACxEoB,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdU,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBnB,WAAW,GAAGO,OAAO,GAAGa,SAAU;AACnDtB,QAAAA,SAAS,EAAEuB,2BAAU,CAAC,WAAW,EAAEvB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAE9CoB,eAAA,CAAA,KAAA,EAAA;AACEnB,UAAAA,SAAS,EAAEuB,2BAAU,CAAC,kBAAkB,EAAE;AACxC,YAAA,8BAA8B,EAAErB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVY,cAAA,CAACU,KAAK,EAAA;AAACJ,YAAAA,EAAE,EAAEX,OAAQ;YAACgB,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAA5B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDY,cAAA,CAACc,uBAAW,EAAA;AAACC,YAAAA,OAAO,EAAE1B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIe,cAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,2BAAU,CAAC,mBAAmB,CAAE;AAAAxB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EAC7EE,aAAa,iBAAIa,cAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,2BAAU,CAAC,kBAAkB,CAAE;AAAAxB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OACpF,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/drawer/Drawer.mjs

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
-import { useId } from 'react';
+import { useId, useContext } from 'react';
 import { CloseButton } from '../common/closeButton/CloseButton.mjs';
 import Dimmer from '../dimmer/Dimmer.mjs';
+import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider.mjs';
 import SlidingPanel from '../slidingPanel/SlidingPanel.mjs';
 import Title from '../title/Title.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -24,6 +25,7 @@ function Drawer({
     isMobile
   } = useLayout();
   const titleId = useId();
+  const overlayId = useContext(OverlayIdContext);
   return /*#__PURE__*/jsx(Dimmer, {
     open: open,
     onClose: onClose,
@@ -31,6 +33,7 @@ function Drawer({
       open: open,
       position: isMobile ? Position.BOTTOM : position,
       children: /*#__PURE__*/jsxs("div", {
+        id: overlayId,
         role: "dialog",
         "aria-modal": true,
         "aria-labelledby": headerTitle ? titleId : undefined,

package/build/drawer/Drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport interface DrawerProps {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n}\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          role=\"dialog\"\n          aria-modal\n          aria-labelledby={headerTitle ? titleId : undefined}\n          className={classNames('np-drawer', className)}\n        >\n          <div\n            className={classNames('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={classNames('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={classNames('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","logActionRequiredIf","isMobile","useLayout","titleId","useId","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","role","undefined","classNames","Title","id","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;AA2BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAA;AACC,CAAA,EAAA;AACZC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACH,OAAO,CACT,CAAA;EAED,MAAM;AAAEI,IAAAA,QAAAA;GAAU,GAAGC,SAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE,CAAA;EAEvB,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACR,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCY,GAAA,CAACE,YAAY,EAAA;AAACT,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEE,QAAQ,GAAGO,QAAQ,CAACC,MAAM,GAAGV,QAAS;AAAAN,MAAAA,QAAA,eACxEiB,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBf,WAAW,GAAGO,OAAO,GAAGS,SAAU;AACnDlB,QAAAA,SAAS,EAAEmB,UAAU,CAAC,WAAW,EAAEnB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAE9CiB,IAAA,CAAA,KAAA,EAAA;AACEhB,UAAAA,SAAS,EAAEmB,UAAU,CAAC,kBAAkB,EAAE;AACxC,YAAA,8BAA8B,EAAEjB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVS,GAAA,CAACS,KAAK,EAAA;AAACC,YAAAA,EAAE,EAAEZ,OAAQ;YAACa,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAAzB,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDS,GAAA,CAACc,WAAW,EAAA;AAACC,YAAAA,OAAO,EAAEvB,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIY,GAAA,CAAA,KAAA,EAAA;AAAKX,UAAAA,SAAS,EAAEmB,UAAU,CAAC,mBAAmB,CAAE;AAAApB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EAC7EE,aAAa,iBAAIU,GAAA,CAAA,KAAA,EAAA;AAAKX,UAAAA,SAAS,EAAEmB,UAAU,CAAC,kBAAkB,CAAE;AAAApB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OACpF,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport interface DrawerProps {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n}\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          id={overlayId}\n          role=\"dialog\"\n          aria-modal\n          aria-labelledby={headerTitle ? titleId : undefined}\n          className={classNames('np-drawer', className)}\n        >\n          <div\n            className={classNames('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={classNames('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={classNames('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","role","undefined","classNames","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAA;AACC,CAAA,EAAA;AACZC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACH,OAAO,CACT,CAAA;EAED,MAAM;AAAEI,IAAAA,QAAAA;GAAU,GAAGC,SAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACX,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCe,GAAA,CAACE,YAAY,EAAA;AAACZ,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEE,QAAQ,GAAGU,QAAQ,CAACC,MAAM,GAAGb,QAAS;AAAAN,MAAAA,QAAA,eACxEoB,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdU,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBnB,WAAW,GAAGO,OAAO,GAAGa,SAAU;AACnDtB,QAAAA,SAAS,EAAEuB,UAAU,CAAC,WAAW,EAAEvB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAE9CoB,IAAA,CAAA,KAAA,EAAA;AACEnB,UAAAA,SAAS,EAAEuB,UAAU,CAAC,kBAAkB,EAAE;AACxC,YAAA,8BAA8B,EAAErB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVY,GAAA,CAACU,KAAK,EAAA;AAACJ,YAAAA,EAAE,EAAEX,OAAQ;YAACgB,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAA5B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDY,GAAA,CAACc,WAAW,EAAA;AAACC,YAAAA,OAAO,EAAE1B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIe,GAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,UAAU,CAAC,mBAAmB,CAAE;AAAAxB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EAC7EE,aAAa,iBAAIa,GAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,UAAU,CAAC,kBAAkB,CAAE;AAAAxB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OACpF,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/main.css

@@ -5472,11 +5472,6 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-button .media {
   align-items: flex-start;
 }
-@media (max-width: 320px) {
-  .np-upload-icon {
-    padding-left: 0;
-  }
-}
 .np-upload-input.form-control {
   height: auto;
   padding: 0;
@@ -5568,9 +5563,9 @@ label.np-upload-button:not(.disabled):active {
   border: 1px solid var(--color-interactive-secondary);
   position: relative;
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
-.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
-.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
+.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
+.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
+.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
   display: block;
   position: absolute;
   height: 1px;
@@ -5582,27 +5577,27 @@ label.np-upload-button:not(.disabled):active {
   width: calc(100% - 2 * 16px);
   width: calc(100% - 2 * var(--size-16));
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
-.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
+.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
+.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
   top: 0;
 }
-.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
+.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
   bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
   border-top: 1px;
 }
-.np-upload-item:not(:first-child) .np-upload-item__link:hover {
+.np-upload-item:not(:first-child) .np-upload-item--link:hover {
   border-top-color: rgba(0,0,0,0.10196);
   border-top-color: var(--color-border-neutral);
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
-.np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
-.np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
-.np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
+.np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
   display: none;
 }
 .np-upload-button-container:hover:before,
@@ -5617,41 +5612,38 @@ label.np-upload-button:not(.disabled):active {
   outline-offset: -3px;
 }
 .np-upload-item--single-file:focus-visible,
-.np-upload-item__link:focus-visible,
+.np-upload-item--link:focus-visible,
 .np-upload-button-container:has(:focus-visible) {
   outline-width: 3px;
 }
-.np-upload-item--link a {
+.np-upload-item__link a {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-top: 1px solid transparent;
   border-radius: inherit;
 }
-.np-upload-item--link a:focus-visible {
+.np-upload-item__link a:focus-visible {
   outline-offset: -2px;
 }
-.np-upload-item--link a:hover:before {
+.np-upload-item__link a:hover:before {
   display: none !important;
 }
-.np-upload-item--link a:hover:after {
+.np-upload-item__link a:hover:after {
   left: 0 !important;
   width: 100% !important;
 }
-.np-upload-item--link a:hover,
-.np-upload-item--link a:active {
+.np-upload-item__link a:hover,
+.np-upload-item__link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
-.np-upload-item--link a:hover .np-upload-button,
-.np-upload-item--link a:active .np-upload-button {
+.np-upload-item__link a:hover .np-upload-button,
+.np-upload-item__link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   border-radius: inherit;
 }
-.np-upload-item--link:first-of-type a {
-  border-top: 0;
-}
 .np-upload-item__body {
   display: flex;
   align-items: center;

package/build/modal/Modal.js

@@ -6,6 +6,7 @@ var reactTransitionGroup = require('react-transition-group');
 var CloseButton = require('../common/closeButton/CloseButton.js');
 var Dimmer = require('../dimmer/Dimmer.js');
 var Drawer = require('../drawer/Drawer.js');
+var OverlayIdProvider = require('../provider/overlay/OverlayIdProvider.js');
 var Title = require('../title/Title.js');
 var jsxRuntime = require('react/jsx-runtime');
 var useLayout = require('../common/hooks/useLayout/useLayout.js');
@@ -41,6 +42,7 @@ const Modal = ({
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = React.useRef(null);
   const titleId = React.useId();
+  const overlayId = React.useContext(OverlayIdProvider.OverlayIdContext);
   return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer, {
     open: open,
     headerTitle: title,
@@ -68,6 +70,7 @@ const Modal = ({
         className: classNames__default.default('tw-modal', 'd-flex', 'fade', 'outline-none', scroll$1 === scroll.Scroll.CONTENT && 'tw-modal--scrollable', className),
         ...otherProps,
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          id: overlayId,
           role: "dialog",
           "aria-modal": true,
           "aria-labelledby": titleId,

package/build/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport Title from '../title/Title';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  title?: ReactNode;\n  body: ReactNode;\n  footer?: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  open: boolean;\n  scroll?: ScrollContent | ScrollViewport;\n  position?: PositionTop | PositionCenter;\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const checkSpecialClasses = (classToCheck: string) =>\n    className?.split(' ').includes(classToCheck);\n  const { isMedium } = useLayout();\n\n  // These should be replaced with props in breaking change.\n  const isCompact = checkSpecialClasses('compact');\n  const noDivider = checkSpecialClasses('no-divider');\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={classNames(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={classNames('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={classNames(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n                {\n                  'tw-modal-compact': isCompact,\n                  'tw-modal-no-title': !title,\n                },\n              )}\n            >\n              <div\n                className={classNames(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  'justify-content-between',\n                  'flex-wrap',\n                  {\n                    'modal--withoutborder': !title || noDivider,\n                  },\n                )}\n              >\n                <Title id={titleId} type={Typography.TITLE_BODY} className=\"tw-modal-title\">\n                  {title}\n                </Title>\n                <CloseButton onClick={onClose} />\n              </div>\n              <div\n                className={classNames('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer && (\n                <div\n                  className={classNames(\n                    'tw-modal-footer',\n                    'd-flex',\n                    'align-items-center',\n                    'flex-wrap',\n                    {\n                      'modal--withoutborder': noDivider,\n                    },\n                  )}\n                >\n                  {footer}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","checkSpecialClasses","classToCheck","split","includes","isMedium","useLayout","isCompact","noDivider","contentReference","useRef","titleId","useId","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","CONTENT","role","_jsxs","Title","id","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  title?: ReactNode;\n  body: ReactNode;\n  footer?: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  open: boolean;\n  scroll?: ScrollContent | ScrollViewport;\n  position?: PositionTop | PositionCenter;\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const checkSpecialClasses = (classToCheck: string) =>\n    className?.split(' ').includes(classToCheck);\n  const { isMedium } = useLayout();\n\n  // These should be replaced with props in breaking change.\n  const isCompact = checkSpecialClasses('compact');\n  const noDivider = checkSpecialClasses('no-divider');\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={classNames(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={classNames('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={classNames(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n                {\n                  'tw-modal-compact': isCompact,\n                  'tw-modal-no-title': !title,\n                },\n              )}\n            >\n              <div\n                className={classNames(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  'justify-content-between',\n                  'flex-wrap',\n                  {\n                    'modal--withoutborder': !title || noDivider,\n                  },\n                )}\n              >\n                <Title id={titleId} type={Typography.TITLE_BODY} className=\"tw-modal-title\">\n                  {title}\n                </Title>\n                <CloseButton onClick={onClose} />\n              </div>\n              <div\n                className={classNames('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer && (\n                <div\n                  className={classNames(\n                    'tw-modal-footer',\n                    'd-flex',\n                    'align-items-center',\n                    'flex-wrap',\n                    {\n                      'modal--withoutborder': noDivider,\n                    },\n                  )}\n                >\n                  {footer}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","checkSpecialClasses","classToCheck","split","includes","isMedium","useLayout","isCompact","noDivider","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":"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"}

package/build/modal/Modal.mjs

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
-import { useRef, useId } from 'react';
+import { useRef, useId, useContext } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { CloseButton } from '../common/closeButton/CloseButton.mjs';
 import Dimmer from '../dimmer/Dimmer.mjs';
 import Drawer from '../drawer/Drawer.mjs';
+import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider.mjs';
 import Title from '../title/Title.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useLayout } from '../common/hooks/useLayout/useLayout.mjs';
@@ -35,6 +36,7 @@ const Modal = ({
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = useRef(null);
   const titleId = useId();
+  const overlayId = useContext(OverlayIdContext);
   return !isMedium ? /*#__PURE__*/jsx(Drawer, {
     open: open,
     headerTitle: title,
@@ -62,6 +64,7 @@ const Modal = ({
         className: classNames('tw-modal', 'd-flex', 'fade', 'outline-none', scroll === Scroll.CONTENT && 'tw-modal--scrollable', className),
         ...otherProps,
         children: /*#__PURE__*/jsx("div", {
+          id: overlayId,
           role: "dialog",
           "aria-modal": true,
           "aria-labelledby": titleId,

package/build/modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport Title from '../title/Title';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  title?: ReactNode;\n  body: ReactNode;\n  footer?: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  open: boolean;\n  scroll?: ScrollContent | ScrollViewport;\n  position?: PositionTop | PositionCenter;\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const checkSpecialClasses = (classToCheck: string) =>\n    className?.split(' ').includes(classToCheck);\n  const { isMedium } = useLayout();\n\n  // These should be replaced with props in breaking change.\n  const isCompact = checkSpecialClasses('compact');\n  const noDivider = checkSpecialClasses('no-divider');\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={classNames(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={classNames('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={classNames(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n                {\n                  'tw-modal-compact': isCompact,\n                  'tw-modal-no-title': !title,\n                },\n              )}\n            >\n              <div\n                className={classNames(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  'justify-content-between',\n                  'flex-wrap',\n                  {\n                    'modal--withoutborder': !title || noDivider,\n                  },\n                )}\n              >\n                <Title id={titleId} type={Typography.TITLE_BODY} className=\"tw-modal-title\">\n                  {title}\n                </Title>\n                <CloseButton onClick={onClose} />\n              </div>\n              <div\n                className={classNames('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer && (\n                <div\n                  className={classNames(\n                    'tw-modal-footer',\n                    'd-flex',\n                    'align-items-center',\n                    'flex-wrap',\n                    {\n                      'modal--withoutborder': noDivider,\n                    },\n                  )}\n                >\n                  {footer}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","checkSpecialClasses","classToCheck","split","includes","isMedium","useLayout","isCompact","noDivider","contentReference","useRef","titleId","useId","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","CONTENT","role","_jsxs","Title","id","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":"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"}
+{"version":3,"file":"Modal.mjs","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  title?: ReactNode;\n  body: ReactNode;\n  footer?: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  open: boolean;\n  scroll?: ScrollContent | ScrollViewport;\n  position?: PositionTop | PositionCenter;\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const checkSpecialClasses = (classToCheck: string) =>\n    className?.split(' ').includes(classToCheck);\n  const { isMedium } = useLayout();\n\n  // These should be replaced with props in breaking change.\n  const isCompact = checkSpecialClasses('compact');\n  const noDivider = checkSpecialClasses('no-divider');\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={classNames(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={classNames('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={classNames(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n                {\n                  'tw-modal-compact': isCompact,\n                  'tw-modal-no-title': !title,\n                },\n              )}\n            >\n              <div\n                className={classNames(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  'justify-content-between',\n                  'flex-wrap',\n                  {\n                    'modal--withoutborder': !title || noDivider,\n                  },\n                )}\n              >\n                <Title id={titleId} type={Typography.TITLE_BODY} className=\"tw-modal-title\">\n                  {title}\n                </Title>\n                <CloseButton onClick={onClose} />\n              </div>\n              <div\n                className={classNames('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer && (\n                <div\n                  className={classNames(\n                    'tw-modal-footer',\n                    'd-flex',\n                    'align-items-center',\n                    'flex-wrap',\n                    {\n                      'modal--withoutborder': noDivider,\n                    },\n                  )}\n                >\n                  {footer}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","checkSpecialClasses","classToCheck","split","includes","isMedium","useLayout","isCompact","noDivider","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":"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"}