@pega/cosmos-react-core 4.0.0-dev.10.1 → 4.0.0-dev.11.1

package/lib/components/DateTime/Picker/DatePicker.types.d.ts

@@ -1,4 +1,6 @@
 import { BaseProps } from '../../../types';
+import { TimeInputProps } from '../Input/TimeInput';
+export type MinuteInterval = 15 | 30 | 60;
 export default interface DatePickerProps extends BaseProps {
     /**
      * Defines default date that will be selected when the Date Picker is opened.
@@ -10,15 +12,30 @@ export default interface DatePickerProps extends BaseProps {
     min?: string | number | Date;
     /** Defines maximum available value that can be set by the user. */
     max?: string | number | Date;
+    /**
+     * Display the time with seconds.
+     * @default false
+     */
+    withSeconds?: boolean;
     /**
      * Displays additional column with week number.
      * @default false
      */
     showWeekNumber?: boolean;
+    /**
+     * Time input picker interval in minutes.
+     * @default 30
+     */
+    pickerInterval?: TimeInputProps['pickerInterval'];
+    /**
+     * Clock format override for time input.
+     * @default undefined
+     */
+    clockFormat?: TimeInputProps['clockFormat'];
     /**
      * The mode of the calendar that will be rendered, ie. whether single date or week are selectable.
      * @default "date"
      */
-    mode?: 'date' | 'week';
+    mode?: 'date' | 'datetime' | 'week';
 }
 //# sourceMappingURL=DatePicker.types.d.ts.map

package/lib/components/DateTime/Picker/DatePicker.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.types.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,CAAC,OAAO,WAAW,eAAgB,SAAQ,SAAS;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,mEAAmE;IACnE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,mEAAmE;IACnE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB"}
+{"version":3,"file":"DatePicker.types.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,MAAM,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE1C,MAAM,CAAC,OAAO,WAAW,eAAgB,SAAQ,SAAS;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,mEAAmE;IACnE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,mEAAmE;IACnE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IAC5C;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;CACrC"}

package/lib/components/DateTime/Picker/DatePicker.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.types.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.types.ts"],"names":[],"mappings":"","sourcesContent":["import { BaseProps } from '../../../types';\n\nexport default interface DatePickerProps extends BaseProps {\n  /**\n   * Defines default date that will be selected when the Date Picker is opened.\n   */\n  selected?: Date;\n  /** Callback fired when selected value changes. */\n  onChange?: (date: Date) => void;\n  /** Defines minimum available value that can be set by the user. */\n  min?: string | number | Date;\n  /** Defines maximum available value that can be set by the user. */\n  max?: string | number | Date;\n  /**\n   * Displays additional column with week number.\n   * @default false\n   */\n  showWeekNumber?: boolean;\n  /**\n   * The mode of the calendar that will be rendered, ie. whether single date or week are selectable.\n   * @default \"date\"\n   */\n  mode?: 'date' | 'week';\n}\n"]}
+{"version":3,"file":"DatePicker.types.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.types.ts"],"names":[],"mappings":"","sourcesContent":["import { BaseProps } from '../../../types';\nimport { TimeInputProps } from '../Input/TimeInput';\n\nexport type MinuteInterval = 15 | 30 | 60;\n\nexport default interface DatePickerProps extends BaseProps {\n  /**\n   * Defines default date that will be selected when the Date Picker is opened.\n   */\n  selected?: Date;\n  /** Callback fired when selected value changes. */\n  onChange?: (date: Date) => void;\n  /** Defines minimum available value that can be set by the user. */\n  min?: string | number | Date;\n  /** Defines maximum available value that can be set by the user. */\n  max?: string | number | Date;\n  /**\n   * Display the time with seconds.\n   * @default false\n   */\n  withSeconds?: boolean;\n  /**\n   * Displays additional column with week number.\n   * @default false\n   */\n  showWeekNumber?: boolean;\n  /**\n   * Time input picker interval in minutes.\n   * @default 30\n   */\n  pickerInterval?: TimeInputProps['pickerInterval'];\n  /**\n   * Clock format override for time input.\n   * @default undefined\n   */\n  clockFormat?: TimeInputProps['clockFormat'];\n  /**\n   * The mode of the calendar that will be rendered, ie. whether single date or week are selectable.\n   * @default \"date\"\n   */\n  mode?: 'date' | 'datetime' | 'week';\n}\n"]}

package/lib/components/DateTime/Picker/DateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAYvE,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAOjD,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,uDAAuD;IACvD,aAAa,CAAC,EAAE;QAAE,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC;QAAC,OAAO,EAAE,IAAI,GAAG,SAAS,CAAA;KAAE,CAAC;CAC5E;AAMD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAkG5D,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAYvE,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAOjD,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,uDAAuD;IACvD,aAAa,CAAC,EAAE;QAAE,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC;QAAC,OAAO,EAAE,IAAI,GAAG,SAAS,CAAA;KAAE,CAAC;CAC5E;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAkG5D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/DateTime/Picker/DateRangePicker.js

@@ -7,26 +7,23 @@ import Icon, { registerIcon } from '../../Icon';
 import * as caretLeftIcon from '../../Icon/icons/caret-left.icon';
 import * as caretRightIcon from '../../Icon/icons/caret-right.icon';
 import { useConfiguration, useI18n } from '../../../hooks';
-import { getCalendarTypeFromLocale, toUTCDateString } from '../Input/utils';
+import { getCalendarTypeFromLocale } from '../Input/utils';
 import Calendar from './Calendar';
 import Weeks from './Weeks';
 import { StyledDatePicker, StyledMonthPicker } from './DatePicker.styles';
-import { isValidDate } from './utils';
+import { isValidDate, toDateTimeString } from './utils';
 registerIcon(caretLeftIcon, caretRightIcon);
-function toDateString(date) {
-    return date ? toUTCDateString(date) : undefined;
-}
 const DateRangePicker = (props) => {
     const { locale } = useConfiguration();
     const { selected: initial, selectedRange, onChange, min, max, mode, showWeekNumber, ...restProps } = props;
     const [selected, setSelected] = useState(initial);
     const [current, setCurrent] = useState(selected && isValidDate(selected) ? selected : new Date());
     useEffect(() => {
-        if (toDateString(initial) !== toDateString(selected)) {
+        if (toDateTimeString(initial) !== toDateTimeString(selected)) {
             setSelected(initial);
             setCurrent(initial || new Date());
         }
-    }, [toDateString(initial)]);
+    }, [toDateTimeString(initial)]);
     const calendarRef = useRef(null);
     useEffect(() => {
         // need to postpone focusing to make sure onFocusWithin has been attached

package/lib/components/DateTime/Picker/DateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DateRangePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,KAAK,aAAa,MAAM,kCAAkC,CAAC;AAClE,OAAO,KAAK,cAAc,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAE5E,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAO5C,SAAS,YAAY,CAAC,IAAsB;IAC1C,OAAO,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AAClD,CAAC;AAED,MAAM,eAAe,GAA4C,CAAC,KAA2B,EAAE,EAAE;IAC/F,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,EACJ,QAAQ,EAAE,OAAO,EACjB,aAAa,EACb,QAAQ,EACR,GAAG,EACH,GAAG,EACH,IAAI,EACJ,cAAc,EACd,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,QAAQ,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;IAElG,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,CAAC,KAAK,YAAY,CAAC,QAAQ,CAAC,EAAE;YACpD,WAAW,CAAC,OAAO,CAAC,CAAC;YACrB,UAAU,CAAC,OAAO,IAAI,IAAI,IAAI,EAAE,CAAC,CAAC;SACnC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAE5B,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,SAAS,CAAC,GAAG,EAAE;QACb,yEAAyE;QACzE,UAAU,CAAC,GAAG,EAAE;YACd,WAAW,CAAC,OAAO,EAAE,aAAa,CAAc,8BAA8B,CAAC,EAAE,KAAK,EAAE,CAAC;QAC3F,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,yBAAyB,CAAC,MAAM,CAAC,CAAC;IACvD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,gBAAgB,kBAAa,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,EAAC,QAAQ,KAAK,SAAS,aACtE,MAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAClF,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE;4BACZ,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;4BACrC,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;4BACrD,UAAU,CAAC,UAAU,CAAC,CAAC;wBACzB,CAAC,gBACW,CAAC,CAAC,mBAAmB,CAAC,YAElC,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACnB,EACT,KAAC,UAAU,IACT,KAAK,EAAE,OAAO,EACd,QAAQ,QACR,IAAI,EAAC,OAAO,gBACA,CAAC,CAAC,+BAA+B,CAAC,EAC9C,QAAQ,EAAE,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE;4BACjC,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,gBAAiB,CAAC,CAAC;4BAC/C,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;4BAC5C,UAAU,CAAC,UAAU,CAAC,CAAC;wBACzB,CAAC,EACD,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,GACR,EACF,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE;4BACZ,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;4BACrC,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;4BACrD,UAAU,CAAC,UAAU,CAAC,CAAC;wBACzB,CAAC,gBACW,CAAC,CAAC,mBAAmB,CAAC,YAElC,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,IACJ,EACP,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,aAChC,cAAc,IAAI,KAAC,KAAK,IAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,SAAG,EACnF,KAAC,QAAQ,IACP,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,QAAQ,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAClE,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,aAAa,QACb,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,EAAE;4BACd,UAAU,CAAC,IAAI,CAAC,CAAC;wBACnB,CAAC,EACD,QAAQ,EAAE,IAAI,CAAC,EAAE;4BACf,UAAU,CAAC,IAAI,CAAC,CAAC;4BACjB,WAAW,CAAC,IAAI,CAAC,CAAC;4BAClB,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;wBACnB,CAAC,EACD,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,GACR,IACG,IACU,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent, useState, useEffect, useRef } from 'react';\n\nimport Flex from '../../Flex';\nimport MonthInput from '../Input/MonthInput';\nimport Button from '../../Button';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as caretLeftIcon from '../../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../../Icon/icons/caret-right.icon';\nimport { useConfiguration, useI18n } from '../../../hooks';\nimport { getCalendarTypeFromLocale, toUTCDateString } from '../Input/utils';\n\nimport Calendar from './Calendar';\nimport DatePickerProps from './DatePicker.types';\nimport Weeks from './Weeks';\nimport { StyledDatePicker, StyledMonthPicker } from './DatePicker.styles';\nimport { isValidDate } from './utils';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface DateRangePickerProps extends DatePickerProps {\n  /** Defines dates range that can be set by the user. */\n  selectedRange?: { startDate: Date | undefined; endDate: Date | undefined };\n}\n\nfunction toDateString(date: Date | undefined) {\n  return date ? toUTCDateString(date) : undefined;\n}\n\nconst DateRangePicker: FunctionComponent<DateRangePickerProps> = (props: DateRangePickerProps) => {\n  const { locale } = useConfiguration();\n  const {\n    selected: initial,\n    selectedRange,\n    onChange,\n    min,\n    max,\n    mode,\n    showWeekNumber,\n    ...restProps\n  } = props;\n\n  const [selected, setSelected] = useState(initial);\n  const [current, setCurrent] = useState(selected && isValidDate(selected) ? selected : new Date());\n\n  useEffect(() => {\n    if (toDateString(initial) !== toDateString(selected)) {\n      setSelected(initial);\n      setCurrent(initial || new Date());\n    }\n  }, [toDateString(initial)]);\n\n  const calendarRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    // need to postpone focusing to make sure onFocusWithin has been attached\n    setTimeout(() => {\n      calendarRef.current?.querySelector<HTMLElement>('button[tabindex=\"0\"]:enabled')?.focus();\n    });\n  }, []);\n\n  const calendarType = getCalendarTypeFromLocale(locale);\n  const t = useI18n();\n\n  return (\n    <StyledDatePicker aria-label={t('calendar')} role='region' {...restProps}>\n      <Flex as={StyledMonthPicker} container={{ justify: 'between', alignItems: 'center' }}>\n        <Button\n          variant='simple'\n          icon\n          onClick={() => {\n            const newCurrent = new Date(current);\n            newCurrent.setUTCMonth(newCurrent.getUTCMonth() - 1);\n            setCurrent(newCurrent);\n          }}\n          aria-label={t('picker_prev_month')}\n        >\n          <Icon name='caret-left' />\n        </Button>\n        <MonthInput\n          value={current}\n          required\n          role='group'\n          aria-label={t('picker_jump_to_month_and_year')}\n          onChange={({ valueAsTimestamp }) => {\n            const newCurrent = new Date(valueAsTimestamp!);\n            newCurrent.setUTCDate(current.getUTCDate());\n            setCurrent(newCurrent);\n          }}\n          min={min}\n          max={max}\n        />\n        <Button\n          variant='simple'\n          icon\n          onClick={() => {\n            const newCurrent = new Date(current);\n            newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);\n            setCurrent(newCurrent);\n          }}\n          aria-label={t('picker_next_month')}\n        >\n          <Icon name='caret-right' />\n        </Button>\n      </Flex>\n      <Flex container={{ wrap: 'nowrap' }}>\n        {showWeekNumber && <Weeks current={current} calendarType={calendarType} disabled />}\n        <Calendar\n          ref={calendarRef}\n          selected={selected && isValidDate(selected) ? selected : undefined}\n          current={current}\n          selectedRange={selectedRange}\n          showHighlight\n          calendarType={calendarType}\n          onFocus={date => {\n            setCurrent(date);\n          }}\n          onSelect={date => {\n            setCurrent(date);\n            setSelected(date);\n            onChange?.(date);\n          }}\n          min={min}\n          max={max}\n        />\n      </Flex>\n    </StyledDatePicker>\n  );\n};\n\nexport default DateRangePicker;\n"]}
+{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DateRangePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useState, useEffect, useRef } from 'react';\n\nimport Flex from '../../Flex';\nimport MonthInput from '../Input/MonthInput';\nimport Button from '../../Button';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as caretLeftIcon from '../../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../../Icon/icons/caret-right.icon';\nimport { useConfiguration, useI18n } from '../../../hooks';\nimport { getCalendarTypeFromLocale } from '../Input/utils';\n\nimport Calendar from './Calendar';\nimport DatePickerProps from './DatePicker.types';\nimport Weeks from './Weeks';\nimport { StyledDatePicker, StyledMonthPicker } from './DatePicker.styles';\nimport { isValidDate, toDateTimeString } from './utils';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface DateRangePickerProps extends DatePickerProps {\n  /** Defines dates range that can be set by the user. */\n  selectedRange?: { startDate: Date | undefined; endDate: Date | undefined };\n}\n\nconst DateRangePicker: FunctionComponent<DateRangePickerProps> = (props: DateRangePickerProps) => {\n  const { locale } = useConfiguration();\n  const {\n    selected: initial,\n    selectedRange,\n    onChange,\n    min,\n    max,\n    mode,\n    showWeekNumber,\n    ...restProps\n  } = props;\n\n  const [selected, setSelected] = useState(initial);\n  const [current, setCurrent] = useState(selected && isValidDate(selected) ? selected : new Date());\n\n  useEffect(() => {\n    if (toDateTimeString(initial) !== toDateTimeString(selected)) {\n      setSelected(initial);\n      setCurrent(initial || new Date());\n    }\n  }, [toDateTimeString(initial)]);\n\n  const calendarRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    // need to postpone focusing to make sure onFocusWithin has been attached\n    setTimeout(() => {\n      calendarRef.current?.querySelector<HTMLElement>('button[tabindex=\"0\"]:enabled')?.focus();\n    });\n  }, []);\n\n  const calendarType = getCalendarTypeFromLocale(locale);\n  const t = useI18n();\n\n  return (\n    <StyledDatePicker aria-label={t('calendar')} role='region' {...restProps}>\n      <Flex as={StyledMonthPicker} container={{ justify: 'between', alignItems: 'center' }}>\n        <Button\n          variant='simple'\n          icon\n          onClick={() => {\n            const newCurrent = new Date(current);\n            newCurrent.setUTCMonth(newCurrent.getUTCMonth() - 1);\n            setCurrent(newCurrent);\n          }}\n          aria-label={t('picker_prev_month')}\n        >\n          <Icon name='caret-left' />\n        </Button>\n        <MonthInput\n          value={current}\n          required\n          role='group'\n          aria-label={t('picker_jump_to_month_and_year')}\n          onChange={({ valueAsTimestamp }) => {\n            const newCurrent = new Date(valueAsTimestamp!);\n            newCurrent.setUTCDate(current.getUTCDate());\n            setCurrent(newCurrent);\n          }}\n          min={min}\n          max={max}\n        />\n        <Button\n          variant='simple'\n          icon\n          onClick={() => {\n            const newCurrent = new Date(current);\n            newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);\n            setCurrent(newCurrent);\n          }}\n          aria-label={t('picker_next_month')}\n        >\n          <Icon name='caret-right' />\n        </Button>\n      </Flex>\n      <Flex container={{ wrap: 'nowrap' }}>\n        {showWeekNumber && <Weeks current={current} calendarType={calendarType} disabled />}\n        <Calendar\n          ref={calendarRef}\n          selected={selected && isValidDate(selected) ? selected : undefined}\n          current={current}\n          selectedRange={selectedRange}\n          showHighlight\n          calendarType={calendarType}\n          onFocus={date => {\n            setCurrent(date);\n          }}\n          onSelect={date => {\n            setCurrent(date);\n            setSelected(date);\n            onChange?.(date);\n          }}\n          min={min}\n          max={max}\n        />\n      </Flex>\n    </StyledDatePicker>\n  );\n};\n\nexport default DateRangePicker;\n"]}

package/lib/components/DateTime/Picker/TimePicker.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { BaseProps, ForwardProps } from '../../../types';
 import { ClockFormat } from '../Input/utils';
-export type MinuteInterval = 15 | 30 | 60;
+import type { MinuteInterval } from './DatePicker.types';
 export interface TimePickerProps extends BaseProps {
     /**
      * Defines default time that will be selected when the Time Picker is opened.

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAInF,OAAO,EAAE,SAAS,EAAU,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGjE,OAAO,EAAE,WAAW,EAAoB,MAAM,gBAAgB,CAAC;AAI/D,MAAM,MAAM,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE1C,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,kDAAkD;IAClD,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAqDD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA+GjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAKnF,OAAO,EAAE,SAAS,EAAU,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGjE,OAAO,EAAE,WAAW,EAAoB,MAAM,gBAAgB,CAAC;AAI/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,kDAAkD;IAClD,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AA4DD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA+GjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -1,10 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { mix } from 'polished';
 import { defaultThemeProp } from '../../../theme';
 import Button from '../../Button';
 import { useArrows, useConfiguration, useElement } from '../../../hooks';
 import { is12HClockFormat } from '../Input/utils';
+import { tryCatch } from '../../../utils';
 import { getIntervalGenerator } from './utils';
 const StyledTimePicker = styled.ul `
   list-style: none;
@@ -13,38 +15,41 @@ const StyledTimePicker = styled.ul `
   width: 100%;
 `;
 StyledTimePicker.defaultProps = defaultThemeProp;
-const StyledTimeButton = styled.button `
-  color: black;
-  width: 100%;
-  border-radius: inherit;
-  overflow: hidden;
-  text-align: start;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  border-width: 0;
-  justify-content: start;
-  padding: 0;
-  background-color: ${props => props.selected ? props.theme.base.colors.blue['extra-light'] : 'transparent'};
+const StyledTimeButton = styled.button(({ theme: { base, components }, selected }) => {
+    const activeColor = tryCatch(() => mix(0.85, base.palette['primary-background'], base.palette.interactive));
+    return css `
+      color: ${base.palette['foreground-color']};
+      width: 100%;
+      border-radius: inherit;
+      overflow: hidden;
+      text-align: start;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-width: 0;
+      justify-content: start;
+      padding: 0;
+      background-color: ${selected ? activeColor : 'transparent'};
 
-  > span {
-    margin-inline-end: 0.125rem;
-    &:first-child {
-      margin-inline-start: ${({ theme }) => theme.components['form-control']['border-width']};
-    }
-    &:nth-child(2) {
-      margin-inline-start: 0.125rem;
-    }
-    &:first-child,
-    &:nth-child(3) {
-      padding-inline-start: 0.5rem;
-    }
-  }
+      > span {
+        margin-inline-end: 0.125rem;
+        &:first-child {
+          margin-inline-start: ${components['form-control']['border-width']};
+        }
+        &:nth-child(2) {
+          margin-inline-start: 0.125rem;
+        }
+        &:first-child,
+        &:nth-child(3) {
+          padding-inline-start: 0.5rem;
+        }
+      }
 
-  &:enabled:focus,
-  &:not([disabled]):focus {
-    box-shadow: ${props => props.theme.base.shadow['focus-inset']};
-  }
-`;
+      &:enabled:focus,
+      &:not([disabled]):focus {
+        box-shadow: ${base.shadow['focus-inset']};
+      }
+    `;
+});
 StyledTimeButton.defaultProps = defaultThemeProp;
 const StyledTimeItem = styled.li `
   border-radius: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/TimePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { BaseProps, Action, ForwardProps } from '../../../types';\nimport Button from '../../Button';\nimport { useArrows, useConfiguration, useElement } from '../../../hooks';\nimport { ClockFormat, is12HClockFormat } from '../Input/utils';\n\nimport { getIntervalGenerator } from './utils';\n\nexport type MinuteInterval = 15 | 30 | 60;\n\nexport interface TimePickerProps extends BaseProps {\n  /**\n   * Defines default time that will be selected when the Time Picker is opened.\n   * @default new Date()\n   */\n  selected?: Date;\n  /** Callback fired when selected value changes. */\n  onSelect: (date: Date) => void;\n  /**\n   * Defines interval for time picker options (in minutes).\n   * @default 30\n   */\n  interval?: MinuteInterval;\n  /**\n   * Defines clock format that overrides locale based format\n   */\n  clockFormat?: ClockFormat;\n}\n\nconst StyledTimePicker = styled.ul`\n  list-style: none;\n  max-height: 10rem;\n  overflow: auto;\n  width: 100%;\n`;\n\nStyledTimePicker.defaultProps = defaultThemeProp;\n\nconst StyledTimeButton = styled.button<TimePickerProps>`\n  color: black;\n  width: 100%;\n  border-radius: inherit;\n  overflow: hidden;\n  text-align: start;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-width: 0;\n  justify-content: start;\n  padding: 0;\n  background-color: ${props =>\n    props.selected ? props.theme.base.colors.blue['extra-light'] : 'transparent'};\n\n  > span {\n    margin-inline-end: 0.125rem;\n    &:first-child {\n      margin-inline-start: ${({ theme }) => theme.components['form-control']['border-width']};\n    }\n    &:nth-child(2) {\n      margin-inline-start: 0.125rem;\n    }\n    &:first-child,\n    &:nth-child(3) {\n      padding-inline-start: 0.5rem;\n    }\n  }\n\n  &:enabled:focus,\n  &:not([disabled]):focus {\n    box-shadow: ${props => props.theme.base.shadow['focus-inset']};\n  }\n`;\n\nStyledTimeButton.defaultProps = defaultThemeProp;\n\nconst StyledTimeItem = styled.li`\n  border-radius: 0;\n`;\n\nStyledTimeItem.defaultProps = defaultThemeProp;\n\nconst TimePicker: FunctionComponent<TimePickerProps & ForwardProps> = (props: TimePickerProps) => {\n  const { locale } = useConfiguration();\n  const { selected = new Date(0), interval = 30, clockFormat, onSelect, ...restProps } = props;\n\n  const intervalInMS = interval * 60000;\n\n  const { hourCycle: defaultHourCycle } = useMemo(\n    () =>\n      new Intl.DateTimeFormat(locale, {\n        hour: '2-digit',\n        hour12: clockFormat ? clockFormat === 12 : is12HClockFormat(locale)\n      }).resolvedOptions(),\n    [clockFormat, locale]\n  );\n\n  const actionsList = Array.from(getIntervalGenerator(intervalInMS), time => {\n    const date = new Date(selected);\n    date.setUTCHours(time.getUTCHours(), time.getUTCMinutes());\n    return {\n      id: date.getTime().toString(),\n      text: Intl.DateTimeFormat(locale, {\n        hour: '2-digit',\n        minute: '2-digit',\n        timeZone: 'UTC',\n        /** Use this to fix Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=1045791 */\n        hourCycle: defaultHourCycle === 'h24' ? 'h23' : defaultHourCycle\n      }).format(date)\n    };\n  });\n\n  const isSelected = (date: Date) => {\n    return (\n      selected?.getUTCHours() === date.getUTCHours() &&\n      selected?.getUTCMinutes() === date.getUTCMinutes()\n    );\n  };\n\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const menuRef = useRef<HTMLUListElement>(null);\n\n  useArrows(menuRef, {\n    selector: 'button',\n    cycle: true,\n    dir: 'up-down',\n    allowTabFocus: false\n  });\n\n  const renderTime = (text: string) => {\n    const [hour, minute, meridiem] = text.split(/:| /);\n    return (\n      <>\n        <span>{hour}</span>:<span>{minute}</span>\n        {meridiem && <span>{meridiem}</span>}\n      </>\n    );\n  };\n\n  const setTabIndexes = useCallback(() => {\n    const focusEl = menuRef.current;\n    if (!focusEl) return;\n    const focusableElements = Array.from(focusEl.querySelectorAll('button'));\n\n    if (focusableElements.length > 0) {\n      let isChecked = false;\n      focusableElements.slice(1).forEach(item => {\n        const checked = (item as HTMLInputElement).checked;\n        if (checked) {\n          isChecked = true;\n          item.tabIndex = 0;\n        } else item.tabIndex = -1;\n      });\n\n      if (!isChecked) {\n        (focusableElements[0] as HTMLElement).tabIndex = 0;\n        focusableElements[0].focus();\n      }\n    }\n  }, [selected]);\n\n  useEffect(() => {\n    buttonEl?.focus();\n    setTabIndexes();\n  }, [buttonEl]);\n\n  return (\n    <StyledTimePicker role='menu' tabIndex={-1} ref={menuRef} {...restProps}>\n      {actionsList.map(({ text, id }: Action) => {\n        const item = new Date(Number(id));\n        return (\n          <StyledTimeItem role='presentation' key={id}>\n            <StyledTimeButton\n              role='menuitem'\n              as={Button}\n              variant='simple'\n              ref={isSelected(item) ? setButtonEl : null}\n              aria-label={text}\n              selected={isSelected(item)}\n              aria-current={isSelected(item) ? 'time' : undefined}\n              checked={isSelected(item)}\n              onClick={() => {\n                onSelect?.(item);\n              }}\n              tabIndex='-1'\n            >\n              {renderTime(text)}\n            </StyledTimeButton>\n          </StyledTimeItem>\n        );\n      })}\n    </StyledTimePicker>\n  );\n};\n\nexport default TimePicker;\n"]}
+{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/TimePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { BaseProps, Action, ForwardProps } from '../../../types';\nimport Button from '../../Button';\nimport { useArrows, useConfiguration, useElement } from '../../../hooks';\nimport { ClockFormat, is12HClockFormat } from '../Input/utils';\nimport { tryCatch } from '../../../utils';\n\nimport { getIntervalGenerator } from './utils';\nimport type { MinuteInterval } from './DatePicker.types';\n\nexport interface TimePickerProps extends BaseProps {\n  /**\n   * Defines default time that will be selected when the Time Picker is opened.\n   * @default new Date()\n   */\n  selected?: Date;\n  /** Callback fired when selected value changes. */\n  onSelect: (date: Date) => void;\n  /**\n   * Defines interval for time picker options (in minutes).\n   * @default 30\n   */\n  interval?: MinuteInterval;\n  /**\n   * Defines clock format that overrides locale based format\n   */\n  clockFormat?: ClockFormat;\n}\n\nconst StyledTimePicker = styled.ul`\n  list-style: none;\n  max-height: 10rem;\n  overflow: auto;\n  width: 100%;\n`;\n\nStyledTimePicker.defaultProps = defaultThemeProp;\n\nconst StyledTimeButton = styled.button<TimePickerProps>(\n  ({ theme: { base, components }, selected }) => {\n    const activeColor = tryCatch(() =>\n      mix(0.85, base.palette['primary-background'], base.palette.interactive)\n    );\n\n    return css`\n      color: ${base.palette['foreground-color']};\n      width: 100%;\n      border-radius: inherit;\n      overflow: hidden;\n      text-align: start;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      border-width: 0;\n      justify-content: start;\n      padding: 0;\n      background-color: ${selected ? activeColor : 'transparent'};\n\n      > span {\n        margin-inline-end: 0.125rem;\n        &:first-child {\n          margin-inline-start: ${components['form-control']['border-width']};\n        }\n        &:nth-child(2) {\n          margin-inline-start: 0.125rem;\n        }\n        &:first-child,\n        &:nth-child(3) {\n          padding-inline-start: 0.5rem;\n        }\n      }\n\n      &:enabled:focus,\n      &:not([disabled]):focus {\n        box-shadow: ${base.shadow['focus-inset']};\n      }\n    `;\n  }\n);\n\nStyledTimeButton.defaultProps = defaultThemeProp;\n\nconst StyledTimeItem = styled.li`\n  border-radius: 0;\n`;\n\nStyledTimeItem.defaultProps = defaultThemeProp;\n\nconst TimePicker: FunctionComponent<TimePickerProps & ForwardProps> = (props: TimePickerProps) => {\n  const { locale } = useConfiguration();\n  const { selected = new Date(0), interval = 30, clockFormat, onSelect, ...restProps } = props;\n\n  const intervalInMS = interval * 60000;\n\n  const { hourCycle: defaultHourCycle } = useMemo(\n    () =>\n      new Intl.DateTimeFormat(locale, {\n        hour: '2-digit',\n        hour12: clockFormat ? clockFormat === 12 : is12HClockFormat(locale)\n      }).resolvedOptions(),\n    [clockFormat, locale]\n  );\n\n  const actionsList = Array.from(getIntervalGenerator(intervalInMS), time => {\n    const date = new Date(selected);\n    date.setUTCHours(time.getUTCHours(), time.getUTCMinutes());\n    return {\n      id: date.getTime().toString(),\n      text: Intl.DateTimeFormat(locale, {\n        hour: '2-digit',\n        minute: '2-digit',\n        timeZone: 'UTC',\n        /** Use this to fix Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=1045791 */\n        hourCycle: defaultHourCycle === 'h24' ? 'h23' : defaultHourCycle\n      }).format(date)\n    };\n  });\n\n  const isSelected = (date: Date) => {\n    return (\n      selected?.getUTCHours() === date.getUTCHours() &&\n      selected?.getUTCMinutes() === date.getUTCMinutes()\n    );\n  };\n\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const menuRef = useRef<HTMLUListElement>(null);\n\n  useArrows(menuRef, {\n    selector: 'button',\n    cycle: true,\n    dir: 'up-down',\n    allowTabFocus: false\n  });\n\n  const renderTime = (text: string) => {\n    const [hour, minute, meridiem] = text.split(/:| /);\n    return (\n      <>\n        <span>{hour}</span>:<span>{minute}</span>\n        {meridiem && <span>{meridiem}</span>}\n      </>\n    );\n  };\n\n  const setTabIndexes = useCallback(() => {\n    const focusEl = menuRef.current;\n    if (!focusEl) return;\n    const focusableElements = Array.from(focusEl.querySelectorAll('button'));\n\n    if (focusableElements.length > 0) {\n      let isChecked = false;\n      focusableElements.slice(1).forEach(item => {\n        const checked = (item as HTMLInputElement).checked;\n        if (checked) {\n          isChecked = true;\n          item.tabIndex = 0;\n        } else item.tabIndex = -1;\n      });\n\n      if (!isChecked) {\n        (focusableElements[0] as HTMLElement).tabIndex = 0;\n        focusableElements[0].focus();\n      }\n    }\n  }, [selected]);\n\n  useEffect(() => {\n    buttonEl?.focus();\n    setTabIndexes();\n  }, [buttonEl]);\n\n  return (\n    <StyledTimePicker role='menu' tabIndex={-1} ref={menuRef} {...restProps}>\n      {actionsList.map(({ text, id }: Action) => {\n        const item = new Date(Number(id));\n        return (\n          <StyledTimeItem role='presentation' key={id}>\n            <StyledTimeButton\n              role='menuitem'\n              as={Button}\n              variant='simple'\n              ref={isSelected(item) ? setButtonEl : null}\n              aria-label={text}\n              selected={isSelected(item)}\n              aria-current={isSelected(item) ? 'time' : undefined}\n              checked={isSelected(item)}\n              onClick={() => {\n                onSelect?.(item);\n              }}\n              tabIndex='-1'\n            >\n              {renderTime(text)}\n            </StyledTimeButton>\n          </StyledTimeItem>\n        );\n      })}\n    </StyledTimePicker>\n  );\n};\n\nexport default TimePicker;\n"]}

package/lib/components/DateTime/Picker/utils.d.ts

@@ -1,3 +1,4 @@
+import type DatePickerProps from './DatePicker.types';
 export declare const getLocalizedDays: (calendarType: string, localeTag?: string) => string[][];
 export declare const isValidDate: (date: Date) => boolean;
 export declare const getDaysOfMonth: (date: Date, calendarType: string) => Date[];
@@ -5,4 +6,5 @@ export declare const getWeeksOfMonth: (date: Date, calendarType: string) => numb
 export declare const getNextMonth: (date: Date) => number;
 export declare const getPreviousMonth: (date: Date) => number;
 export declare function getIntervalGenerator(interval: number): Generator<Date, void, unknown>;
+export declare const toDateTimeString: (date: Date | undefined, mode?: DatePickerProps['mode']) => string | undefined;
 //# sourceMappingURL=utils.d.ts.map

package/lib/components/DateTime/Picker/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,iBAAkB,MAAM,cAAc,MAAM,eAOxE,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,IAAI,YAErC,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,IAAI,gBAAgB,MAAM,KAAG,IAAI,EAQrE,CAAC;AAEF,eAAO,MAAM,eAAe,SAAU,IAAI,gBAAgB,MAAM,KAAG,MAAM,EAmBxE,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,IAAI,WAGtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,SAAU,IAAI,WAG1C,CAAC;AAIF,wBAAiB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,kCAMrD"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,eAAe,MAAM,oBAAoB,CAAC;AAEtD,eAAO,MAAM,gBAAgB,iBAAkB,MAAM,cAAc,MAAM,eAOxE,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,IAAI,YAErC,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,IAAI,gBAAgB,MAAM,KAAG,IAAI,EAQrE,CAAC;AAEF,eAAO,MAAM,eAAe,SAAU,IAAI,gBAAgB,MAAM,KAAG,MAAM,EAmBxE,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,IAAI,WAGtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,SAAU,IAAI,WAG1C,CAAC;AAIF,wBAAiB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,kCAMrD;AAED,eAAO,MAAM,gBAAgB,SACrB,IAAI,GAAG,SAAS,SAChB,eAAe,CAAC,MAAM,CAAC,uBAU9B,CAAC"}

package/lib/components/DateTime/Picker/utils.js

@@ -52,4 +52,11 @@ export function* getIntervalGenerator(interval) {
         current.setTime(current.getTime() + interval);
     }
 }
+export const toDateTimeString = (date, mode = 'date') => {
+    return date
+        ? date.toLocaleString(undefined, mode === 'datetime'
+            ? { dateStyle: 'medium', timeStyle: 'medium', timeZone: 'UTC' }
+            : { dateStyle: 'medium', timeZone: 'UTC' })
+        : undefined;
+};
 //# sourceMappingURL=utils.js.map

package/lib/components/DateTime/Picker/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEpE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,YAAoB,EAAE,SAAkB,EAAE,EAAE;IAC3E,OAAO,WAAW,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;QACjD,OAAO;YACL,GAAG,CAAC,WAAW,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;YAC/D,GAAG,CAAC,WAAW,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;SACjE,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAU,EAAE,EAAE;IACxC,OAAO,IAAI,CAAC,QAAQ,EAAE,KAAK,cAAc,CAAC;AAC5C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAU,EAAE,YAAoB,EAAU,EAAE;IACzE,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IACzF,MAAM,eAAe,GAAG,YAAY,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;IAEpE,4BAA4B;IAC5B,OAAO,KAAK,CAAC,CAAC,GAAG,eAAe,EAAE,EAAE,GAAG,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,GAAW,EAAE,EAAE;QAC1E,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC;IAC5E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAU,EAAE,YAAoB,EAAY,EAAE;IAC5E,MAAM,QAAQ,GAAG,EAAE,CAAC;IACpB,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IACnC,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACjC,MAAM,aAAa,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;IAC1D,MAAM,QAAQ,GAAG,OAAO,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;IAEtD,IAAI,GAAG,CAAC;IACR,IAAI,WAAW,CAAC;IAChB,IAAI,QAAQ,GAAG,CAAC,CAAC;IAEjB,GAAG;QACD,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;QAChD,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;QACzC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC3B,QAAQ,IAAI,CAAC,CAAC;KACf,QAAQ,WAAW,KAAK,QAAQ,EAAE;IAEnC,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAU,EAAE,EAAE;IACzC,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAClF,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;AAC5B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAU,EAAE,EAAE;IAC7C,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAClF,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;AAC5B,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,QAAQ,CAAC;AAErC,MAAM,SAAS,CAAC,CAAC,oBAAoB,CAAC,QAAgB;IACpD,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC;IAC5B,OAAO,OAAO,CAAC,OAAO,EAAE,GAAG,mBAAmB,EAAE;QAC9C,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;QACxB,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,QAAQ,CAAC,CAAC;KAC/C;AACH,CAAC","sourcesContent":["import { cap, range } from '../../../utils';\nimport { getDayOfWeek, getWeek, getWeekdays } from '../Input/utils';\n\nexport const getLocalizedDays = (calendarType: string, localeTag?: string) => {\n  return getWeekdays(calendarType).map(weekdayDate => {\n    return [\n      cap(weekdayDate.toLocaleString(localeTag, { weekday: 'long' })),\n      cap(weekdayDate.toLocaleString(localeTag, { weekday: 'short' }))\n    ];\n  });\n};\n\nexport const isValidDate = (date: Date) => {\n  return date.toString() !== 'Invalid Date';\n};\n\nexport const getDaysOfMonth = (date: Date, calendarType: string): Date[] => {\n  const firstDayInMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));\n  const startingWeekDay = getDayOfWeek(firstDayInMonth, calendarType);\n\n  /** 6 rows * 7 days = 42  */\n  return range(1 - startingWeekDay, 42 - startingWeekDay).map((day: number) => {\n    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), day));\n  });\n};\n\nexport const getWeeksOfMonth = (date: Date, calendarType: string): number[] => {\n  const weekdays = [];\n  const year = date.getUTCFullYear();\n  const month = date.getUTCMonth();\n  const dayInLastWeek = new Date(Date.UTC(year, month, 36));\n  const lastWeek = getWeek(dayInLastWeek, calendarType);\n\n  let day;\n  let currentWeek;\n  let iterator = 1;\n\n  do {\n    day = new Date(Date.UTC(year, month, iterator));\n    currentWeek = getWeek(day, calendarType);\n    weekdays.push(currentWeek);\n    iterator += 7;\n  } while (currentWeek !== lastWeek);\n\n  return weekdays;\n};\n\nexport const getNextMonth = (date: Date) => {\n  const next = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 1));\n  return next.getUTCMonth();\n};\n\nexport const getPreviousMonth = (date: Date) => {\n  const prev = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() - 1, 1));\n  return prev.getUTCMonth();\n};\n\nconst DAY_IN_MILLISECONDS = 86400000;\n\nexport function* getIntervalGenerator(interval: number) {\n  const current = new Date(0);\n  while (current.getTime() < DAY_IN_MILLISECONDS) {\n    yield new Date(current);\n    current.setTime(current.getTime() + interval);\n  }\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { cap, range } from '../../../utils';\nimport { getDayOfWeek, getWeek, getWeekdays } from '../Input/utils';\n\nimport type DatePickerProps from './DatePicker.types';\n\nexport const getLocalizedDays = (calendarType: string, localeTag?: string) => {\n  return getWeekdays(calendarType).map(weekdayDate => {\n    return [\n      cap(weekdayDate.toLocaleString(localeTag, { weekday: 'long' })),\n      cap(weekdayDate.toLocaleString(localeTag, { weekday: 'short' }))\n    ];\n  });\n};\n\nexport const isValidDate = (date: Date) => {\n  return date.toString() !== 'Invalid Date';\n};\n\nexport const getDaysOfMonth = (date: Date, calendarType: string): Date[] => {\n  const firstDayInMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));\n  const startingWeekDay = getDayOfWeek(firstDayInMonth, calendarType);\n\n  /** 6 rows * 7 days = 42  */\n  return range(1 - startingWeekDay, 42 - startingWeekDay).map((day: number) => {\n    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), day));\n  });\n};\n\nexport const getWeeksOfMonth = (date: Date, calendarType: string): number[] => {\n  const weekdays = [];\n  const year = date.getUTCFullYear();\n  const month = date.getUTCMonth();\n  const dayInLastWeek = new Date(Date.UTC(year, month, 36));\n  const lastWeek = getWeek(dayInLastWeek, calendarType);\n\n  let day;\n  let currentWeek;\n  let iterator = 1;\n\n  do {\n    day = new Date(Date.UTC(year, month, iterator));\n    currentWeek = getWeek(day, calendarType);\n    weekdays.push(currentWeek);\n    iterator += 7;\n  } while (currentWeek !== lastWeek);\n\n  return weekdays;\n};\n\nexport const getNextMonth = (date: Date) => {\n  const next = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 1));\n  return next.getUTCMonth();\n};\n\nexport const getPreviousMonth = (date: Date) => {\n  const prev = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() - 1, 1));\n  return prev.getUTCMonth();\n};\n\nconst DAY_IN_MILLISECONDS = 86400000;\n\nexport function* getIntervalGenerator(interval: number) {\n  const current = new Date(0);\n  while (current.getTime() < DAY_IN_MILLISECONDS) {\n    yield new Date(current);\n    current.setTime(current.getTime() + interval);\n  }\n}\n\nexport const toDateTimeString = (\n  date: Date | undefined,\n  mode: DatePickerProps['mode'] = 'date'\n) => {\n  return date\n    ? date.toLocaleString(\n        undefined,\n        mode === 'datetime'\n          ? { dateStyle: 'medium', timeStyle: 'medium', timeZone: 'UTC' }\n          : { dateStyle: 'medium', timeZone: 'UTC' }\n      )\n    : undefined;\n};\n"]}

package/lib/components/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,iBAAiB,EACjB,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAqBtD,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,mFAAmF;IACnF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,iBAAiB;aAAyB,OAAO;SAQ7D,CAAC;AAIF,eAAO,MAAM,oBAAoB,oLAyC/B,CAAC;AAIH,eAAO,MAAM,2BAA2B,oLA+BtC,CAAC;AAIH,eAAO,MAAM,UAAU,iJAAmB,CAAC;AAM3C,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAyLrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,iBAAiB,EACjB,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAqBtD,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,mFAAmF;IACnF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,iBAAiB;aAAyB,OAAO;SAU7D,CAAC;AAIF,eAAO,MAAM,oBAAoB,oLAyC/B,CAAC;AAIH,eAAO,MAAM,2BAA2B,oLA+BtC,CAAC;AAIH,eAAO,MAAM,UAAU,iJAAmB,CAAC;AAM3C,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA2LrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Link/Link.js

@@ -19,6 +19,8 @@ import * as openIcon from '../Icon/icons/open.icon';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 export const StyledLinkPopover = styled.div(({ theme, preview }) => css `
     background-color: ${theme.components.tooltip['background-color']};
+    z-index: ${theme.base['z-index'].tooltip};
+
     ${preview &&
     css `
       padding: ${theme.base.spacing};
@@ -168,7 +170,7 @@ const Link = forwardRef(({ href, variant = 'link', icon = false, previewable, on
                     setPopoverHideDelay('none');
                     setPreviewPopover(false);
                     setPopover(false);
-                }, children: [children, target === '_blank' && (_jsx(VisuallyHiddenText, { children: t('opens_in_a_new_tab') })), !icon && crossOrigin && _jsx(Icon, { name: 'open' })] }), !inModal && (_jsx(Popover, { show: previewPopover, groupId: 'link_preview', showDelay: 'short', hideDelay: popoverHideDelay, placement: 'bottom', target: linkRef.current, onMouseEnter: showPreviewPopover, onMouseLeave: hidePreviewPopover, as: StyledLinkPopover, arrow: true, preview: true, onHide: hidePreviewPopover, children: _jsx(StyledLinkPreviewPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: _jsxs(Text, { children: [_jsx("span", { children: t('preview') }), _jsxs(Flex, { container: { inline: true, justify: 'end' }, children: [_jsx(Keyboard, { keyName: 'Alt' }), _jsx(Keyboard, { keyName: 'P' })] })] }) }) })), _jsxs(Popover, { show: popover, groupId: 'link_preview', showDelay: 'short', hideDelay: popoverHideDelay, placement: 'bottom', target: linkRef.current, onMouseEnter: showPopover, onMouseLeave: hidePopover, as: StyledLinkPopover, arrow: true, children: [!inModal && (_jsx(StyledLinkPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: t('preview') })), _jsx(StyledLinkPopoverBtn, { forwardedAs: 'a', href: href, target: '_blank', rel: 'noreferrer', tabIndex: '-1', children: t('link_open_in_tab_text') })] }), previewable && (_jsx("span", { id: `${uid}-preview-instructions`, hidden: true, children: t('preview_link_instruction', [macintosh ? 'option' : 'alt']) }))] }));
+                }, children: [children, target === '_blank' && (_jsx(VisuallyHiddenText, { children: t('opens_in_a_new_tab') })), !icon && crossOrigin && _jsx(Icon, { name: 'open' })] }), !inModal && (_jsx(Popover, { show: previewPopover, groupId: 'link_preview', showDelay: 'short', hideDelay: popoverHideDelay, placement: 'bottom', target: linkRef.current, onMouseEnter: showPreviewPopover, onMouseLeave: hidePreviewPopover, as: StyledLinkPopover, arrow: true, preview: true, portal: true, onHide: hidePreviewPopover, children: _jsx(StyledLinkPreviewPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: _jsxs(Text, { children: [_jsx("span", { children: t('preview') }), _jsxs(Flex, { container: { inline: true, justify: 'end' }, children: [_jsx(Keyboard, { keyName: 'Alt' }), _jsx(Keyboard, { keyName: 'P' })] })] }) }) })), _jsxs(Popover, { show: popover, groupId: 'link_preview', showDelay: 'short', hideDelay: popoverHideDelay, placement: 'bottom', target: linkRef.current, onMouseEnter: showPopover, onMouseLeave: hidePopover, as: StyledLinkPopover, arrow: true, portal: true, children: [!inModal && (_jsx(StyledLinkPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: t('preview') })), _jsx(StyledLinkPopoverBtn, { forwardedAs: 'a', href: href, target: '_blank', rel: 'noreferrer', tabIndex: '-1', children: t('link_open_in_tab_text') })] }), previewable && (_jsx("span", { id: `${uid}-preview-instructions`, hidden: true, children: t('preview_link_instruction', [macintosh ? 'option' : 'alt']) }))] }));
 });
 export default Link;
 //# sourceMappingURL=Link.js.map

package/lib/components/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  ReactNode,\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  useState,\n  useRef,\n  KeyboardEvent,\n  useContext,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport Button, { ButtonProps } from '../Button';\nimport Popover, { PopoverProps } from '../Popover';\nimport BareButton from '../Button/BareButton';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  useBreakpoint,\n  useConsolidatedRef,\n  useI18n,\n  useUID,\n  useModalContext,\n  useOS\n} from '../../hooks';\nimport { documentIsAvailable, sameOrigin, tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { Keyboard } from '../Badges';\nimport Text, { StyledText } from '../Text';\nimport { StyledKeyboard } from '../Badges/Keyboard';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as openIcon from '../Icon/icons/open.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface LinkProps extends BaseProps {\n  /** Text or content for the Link. */\n  children: ReactNode;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /**\n   * Controls the styling of the Link.\n   * @default \"link\"\n   */\n  variant?: ButtonProps['variant'];\n  /**\n   * Set the Icon prop to `true` if you're using just an Icon in your Link. Make sure to pass an Icon as children if `true`.\n   * @default false\n   */\n  icon?: ButtonProps['icon'];\n  /** Determines if the Link should render a popover when focused or hovered over. */\n  previewable?: boolean;\n  /** Callback function that is run when the preview popover is interacted with. */\n  onPreview?: (e: { href: string }) => void;\n  /** Specifies where to open the link href. */\n  target?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nexport const StyledLinkPopover = styled.div<{ preview: boolean }>(\n  ({ theme, preview }) => css`\n    background-color: ${theme.components.tooltip['background-color']};\n    ${preview &&\n    css`\n      padding: ${theme.base.spacing};\n    `}\n  `\n);\n\nStyledLinkPopover.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {\n  const contrastColor = tryCatch(() => readableColor(theme.base.palette.interactive));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    z-index: 1;\n    padding: 0 ${theme.base.spacing};\n    min-height: 1.5rem;\n    line-height: 1;\n    color: ${contrastColor};\n    font-size: ${fontSize.xs};\n    text-decoration: none;\n\n    /* FIXME: Button selector specificity... */\n    & + & {\n      margin: 0;\n    }\n\n    & + &::before {\n      content: '';\n      position: absolute;\n      inset-inline-start: 0;\n      inset-block: 0;\n      width: 1px; /* stylelint-disable-line unit-allowed-list */\n      background-color: ${contrastColor};\n      opacity: ${theme.base.transparency['transparent-3']};\n    }\n\n    &:hover,\n    &:active {\n      text-decoration: underline;\n    }\n\n    &:focus {\n      box-shadow: inset 0 0 0 0.0625rem ${theme.base.palette.light},\n        0 0 0.125rem 0.0625rem ${theme.base.palette.interactive};\n    }\n  `;\n});\n\nStyledLinkPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPreviewPopoverBtn = styled(StyledLinkPopoverBtn)(({ theme }) => {\n  return css`\n    width: 100%;\n    padding: unset;\n\n    &:hover,\n    &:active {\n      text-decoration: none;\n      ${StyledText} span {\n        text-decoration: underline;\n      }\n    }\n\n    ${StyledText} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      width: 100%;\n    }\n\n    ${StyledKeyboard} {\n      color: ${theme.base.palette.light};\n      background-color: ${theme.base.colors.gray.dark};\n      border-color: ${theme.base.colors.gray.medium};\n      inset-block-start: unset;\n\n      &:first-of-type {\n        margin-inline: ${theme.base.spacing};\n      }\n    }\n  `;\n});\n\nStyledLinkPreviewPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLink = styled(Button)``;\n\nStyledLink.defaultProps = defaultThemeProp;\n\nregisterIcon(openIcon);\n\nconst Link: FunctionComponent<LinkProps & ForwardProps> = forwardRef(\n  (\n    {\n      href,\n      variant = 'link',\n      icon = false,\n      previewable,\n      onPreview,\n      target: targetProp,\n      children,\n      ...restProps\n    }: PropsWithoutRef<LinkProps>,\n    ref: LinkProps['ref']\n  ) => {\n    const { initialized: inModal } = useModalContext();\n    const { previewTriggerRef } = useContext(AppShellContext);\n    const uid = useUID();\n    const linkRef = useConsolidatedRef(ref);\n    const [popover, setPopover] = useState(false);\n    const [popoverHideDelay, setPopoverHideDelay] = useState<PopoverProps['hideDelay']>('short');\n    const [previewPopover, setPreviewPopover] = useState(false);\n    const previewBtnRef = useRef<HTMLButtonElement>(null);\n    const isSmallOrAbove = useBreakpoint('sm');\n    const t = useI18n();\n    const { macintosh } = useOS();\n    const contextMenuOpened = useRef(false);\n\n    const url = new URL(href, document.location.href);\n    const crossOrigin = documentIsAvailable\n      ? /^https?:$/.test(url.protocol) && !sameOrigin(document.location, url)\n      : false;\n    const target = crossOrigin ? '_blank' : targetProp;\n\n    const showPopover = () => {\n      if (isSmallOrAbove) {\n        setPopover(true);\n        setPreviewPopover(false);\n      }\n    };\n\n    const showPreviewPopover = () => {\n      if (isSmallOrAbove && !popover && !contextMenuOpened.current) setPreviewPopover(true);\n    };\n\n    const hidePopover = () => {\n      setPopover(false);\n    };\n\n    const hidePreviewPopover = () => {\n      setPreviewPopover(false);\n    };\n\n    const onEnterLink = () => {\n      if (previewable) showPopover();\n    };\n\n    const onFocusLink = () => {\n      if (previewable) showPreviewPopover();\n    };\n\n    const onBlurLink = () => {\n      contextMenuOpened.current = false;\n      hidePreviewPopover();\n    };\n\n    const onPreviewClick = () => {\n      previewTriggerRef.current = linkRef.current;\n      onPreview?.({ href });\n    };\n\n    const onKeyUp = (e: KeyboardEvent) => {\n      if (e.getModifierState('Alt') && e.code === 'KeyP') {\n        onPreviewClick();\n      }\n    };\n\n    useEffect(() => {\n      if (popoverHideDelay === 'none' && !popover && !previewPopover) {\n        setPopoverHideDelay('short');\n      }\n    }, [popoverHideDelay, popover, previewPopover]);\n\n    return (\n      <>\n        <StyledLink\n          href={href}\n          variant={variant}\n          ref={linkRef as any}\n          target={target}\n          {...restProps}\n          onMouseEnter={onEnterLink}\n          onMouseLeave={hidePopover}\n          onFocus={onFocusLink}\n          onBlur={onBlurLink}\n          onKeyUp={onKeyUp}\n          onContextMenu={() => {\n            contextMenuOpened.current = true;\n\n            setPopoverHideDelay('none');\n            setPreviewPopover(false);\n            setPopover(false);\n          }}\n        >\n          {children}\n          {target === '_blank' && (\n            <VisuallyHiddenText>{t('opens_in_a_new_tab')}</VisuallyHiddenText>\n          )}\n          {!icon && crossOrigin && <Icon name='open' />}\n        </StyledLink>\n\n        {!inModal && (\n          <Popover\n            show={previewPopover}\n            groupId='link_preview'\n            showDelay='short'\n            hideDelay={popoverHideDelay}\n            placement='bottom'\n            target={linkRef.current}\n            onMouseEnter={showPreviewPopover}\n            onMouseLeave={hidePreviewPopover}\n            as={StyledLinkPopover}\n            arrow\n            preview\n            onHide={hidePreviewPopover}\n          >\n            <StyledLinkPreviewPopoverBtn\n              preview\n              type='button'\n              ref={previewBtnRef}\n              onClick={onPreviewClick}\n              tabIndex='-1'\n            >\n              <Text>\n                <span>{t('preview')}</span>\n                <Flex container={{ inline: true, justify: 'end' }}>\n                  <Keyboard keyName='Alt' />\n                  <Keyboard keyName='P' />\n                </Flex>\n              </Text>\n            </StyledLinkPreviewPopoverBtn>\n          </Popover>\n        )}\n\n        <Popover\n          show={popover}\n          groupId='link_preview'\n          showDelay='short'\n          hideDelay={popoverHideDelay}\n          placement='bottom'\n          target={linkRef.current}\n          onMouseEnter={showPopover}\n          onMouseLeave={hidePopover}\n          as={StyledLinkPopover}\n          arrow\n        >\n          {!inModal && (\n            <StyledLinkPopoverBtn\n              preview\n              type='button'\n              ref={previewBtnRef}\n              onClick={onPreviewClick}\n              tabIndex='-1'\n            >\n              {t('preview')}\n            </StyledLinkPopoverBtn>\n          )}\n          <StyledLinkPopoverBtn\n            forwardedAs='a'\n            href={href}\n            target='_blank'\n            rel='noreferrer'\n            tabIndex='-1'\n          >\n            {t('link_open_in_tab_text')}\n          </StyledLinkPopoverBtn>\n        </Popover>\n\n        {previewable && (\n          <span id={`${uid}-preview-instructions`} hidden>\n            {t('preview_link_instruction', [macintosh ? 'option' : 'alt'])}\n          </span>\n        )}\n      </>\n    );\n  }\n);\n\nexport default Link;\n"]}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  ReactNode,\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  useState,\n  useRef,\n  KeyboardEvent,\n  useContext,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport Button, { ButtonProps } from '../Button';\nimport Popover, { PopoverProps } from '../Popover';\nimport BareButton from '../Button/BareButton';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  useBreakpoint,\n  useConsolidatedRef,\n  useI18n,\n  useUID,\n  useModalContext,\n  useOS\n} from '../../hooks';\nimport { documentIsAvailable, sameOrigin, tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { Keyboard } from '../Badges';\nimport Text, { StyledText } from '../Text';\nimport { StyledKeyboard } from '../Badges/Keyboard';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as openIcon from '../Icon/icons/open.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface LinkProps extends BaseProps {\n  /** Text or content for the Link. */\n  children: ReactNode;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /**\n   * Controls the styling of the Link.\n   * @default \"link\"\n   */\n  variant?: ButtonProps['variant'];\n  /**\n   * Set the Icon prop to `true` if you're using just an Icon in your Link. Make sure to pass an Icon as children if `true`.\n   * @default false\n   */\n  icon?: ButtonProps['icon'];\n  /** Determines if the Link should render a popover when focused or hovered over. */\n  previewable?: boolean;\n  /** Callback function that is run when the preview popover is interacted with. */\n  onPreview?: (e: { href: string }) => void;\n  /** Specifies where to open the link href. */\n  target?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nexport const StyledLinkPopover = styled.div<{ preview: boolean }>(\n  ({ theme, preview }) => css`\n    background-color: ${theme.components.tooltip['background-color']};\n    z-index: ${theme.base['z-index'].tooltip};\n\n    ${preview &&\n    css`\n      padding: ${theme.base.spacing};\n    `}\n  `\n);\n\nStyledLinkPopover.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {\n  const contrastColor = tryCatch(() => readableColor(theme.base.palette.interactive));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    z-index: 1;\n    padding: 0 ${theme.base.spacing};\n    min-height: 1.5rem;\n    line-height: 1;\n    color: ${contrastColor};\n    font-size: ${fontSize.xs};\n    text-decoration: none;\n\n    /* FIXME: Button selector specificity... */\n    & + & {\n      margin: 0;\n    }\n\n    & + &::before {\n      content: '';\n      position: absolute;\n      inset-inline-start: 0;\n      inset-block: 0;\n      width: 1px; /* stylelint-disable-line unit-allowed-list */\n      background-color: ${contrastColor};\n      opacity: ${theme.base.transparency['transparent-3']};\n    }\n\n    &:hover,\n    &:active {\n      text-decoration: underline;\n    }\n\n    &:focus {\n      box-shadow: inset 0 0 0 0.0625rem ${theme.base.palette.light},\n        0 0 0.125rem 0.0625rem ${theme.base.palette.interactive};\n    }\n  `;\n});\n\nStyledLinkPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPreviewPopoverBtn = styled(StyledLinkPopoverBtn)(({ theme }) => {\n  return css`\n    width: 100%;\n    padding: unset;\n\n    &:hover,\n    &:active {\n      text-decoration: none;\n      ${StyledText} span {\n        text-decoration: underline;\n      }\n    }\n\n    ${StyledText} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      width: 100%;\n    }\n\n    ${StyledKeyboard} {\n      color: ${theme.base.palette.light};\n      background-color: ${theme.base.colors.gray.dark};\n      border-color: ${theme.base.colors.gray.medium};\n      inset-block-start: unset;\n\n      &:first-of-type {\n        margin-inline: ${theme.base.spacing};\n      }\n    }\n  `;\n});\n\nStyledLinkPreviewPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLink = styled(Button)``;\n\nStyledLink.defaultProps = defaultThemeProp;\n\nregisterIcon(openIcon);\n\nconst Link: FunctionComponent<LinkProps & ForwardProps> = forwardRef(\n  (\n    {\n      href,\n      variant = 'link',\n      icon = false,\n      previewable,\n      onPreview,\n      target: targetProp,\n      children,\n      ...restProps\n    }: PropsWithoutRef<LinkProps>,\n    ref: LinkProps['ref']\n  ) => {\n    const { initialized: inModal } = useModalContext();\n    const { previewTriggerRef } = useContext(AppShellContext);\n    const uid = useUID();\n    const linkRef = useConsolidatedRef(ref);\n    const [popover, setPopover] = useState(false);\n    const [popoverHideDelay, setPopoverHideDelay] = useState<PopoverProps['hideDelay']>('short');\n    const [previewPopover, setPreviewPopover] = useState(false);\n    const previewBtnRef = useRef<HTMLButtonElement>(null);\n    const isSmallOrAbove = useBreakpoint('sm');\n    const t = useI18n();\n    const { macintosh } = useOS();\n    const contextMenuOpened = useRef(false);\n\n    const url = new URL(href, document.location.href);\n    const crossOrigin = documentIsAvailable\n      ? /^https?:$/.test(url.protocol) && !sameOrigin(document.location, url)\n      : false;\n    const target = crossOrigin ? '_blank' : targetProp;\n\n    const showPopover = () => {\n      if (isSmallOrAbove) {\n        setPopover(true);\n        setPreviewPopover(false);\n      }\n    };\n\n    const showPreviewPopover = () => {\n      if (isSmallOrAbove && !popover && !contextMenuOpened.current) setPreviewPopover(true);\n    };\n\n    const hidePopover = () => {\n      setPopover(false);\n    };\n\n    const hidePreviewPopover = () => {\n      setPreviewPopover(false);\n    };\n\n    const onEnterLink = () => {\n      if (previewable) showPopover();\n    };\n\n    const onFocusLink = () => {\n      if (previewable) showPreviewPopover();\n    };\n\n    const onBlurLink = () => {\n      contextMenuOpened.current = false;\n      hidePreviewPopover();\n    };\n\n    const onPreviewClick = () => {\n      previewTriggerRef.current = linkRef.current;\n      onPreview?.({ href });\n    };\n\n    const onKeyUp = (e: KeyboardEvent) => {\n      if (e.getModifierState('Alt') && e.code === 'KeyP') {\n        onPreviewClick();\n      }\n    };\n\n    useEffect(() => {\n      if (popoverHideDelay === 'none' && !popover && !previewPopover) {\n        setPopoverHideDelay('short');\n      }\n    }, [popoverHideDelay, popover, previewPopover]);\n\n    return (\n      <>\n        <StyledLink\n          href={href}\n          variant={variant}\n          ref={linkRef as any}\n          target={target}\n          {...restProps}\n          onMouseEnter={onEnterLink}\n          onMouseLeave={hidePopover}\n          onFocus={onFocusLink}\n          onBlur={onBlurLink}\n          onKeyUp={onKeyUp}\n          onContextMenu={() => {\n            contextMenuOpened.current = true;\n\n            setPopoverHideDelay('none');\n            setPreviewPopover(false);\n            setPopover(false);\n          }}\n        >\n          {children}\n          {target === '_blank' && (\n            <VisuallyHiddenText>{t('opens_in_a_new_tab')}</VisuallyHiddenText>\n          )}\n          {!icon && crossOrigin && <Icon name='open' />}\n        </StyledLink>\n\n        {!inModal && (\n          <Popover\n            show={previewPopover}\n            groupId='link_preview'\n            showDelay='short'\n            hideDelay={popoverHideDelay}\n            placement='bottom'\n            target={linkRef.current}\n            onMouseEnter={showPreviewPopover}\n            onMouseLeave={hidePreviewPopover}\n            as={StyledLinkPopover}\n            arrow\n            preview\n            portal\n            onHide={hidePreviewPopover}\n          >\n            <StyledLinkPreviewPopoverBtn\n              preview\n              type='button'\n              ref={previewBtnRef}\n              onClick={onPreviewClick}\n              tabIndex='-1'\n            >\n              <Text>\n                <span>{t('preview')}</span>\n                <Flex container={{ inline: true, justify: 'end' }}>\n                  <Keyboard keyName='Alt' />\n                  <Keyboard keyName='P' />\n                </Flex>\n              </Text>\n            </StyledLinkPreviewPopoverBtn>\n          </Popover>\n        )}\n\n        <Popover\n          show={popover}\n          groupId='link_preview'\n          showDelay='short'\n          hideDelay={popoverHideDelay}\n          placement='bottom'\n          target={linkRef.current}\n          onMouseEnter={showPopover}\n          onMouseLeave={hidePopover}\n          as={StyledLinkPopover}\n          arrow\n          portal\n        >\n          {!inModal && (\n            <StyledLinkPopoverBtn\n              preview\n              type='button'\n              ref={previewBtnRef}\n              onClick={onPreviewClick}\n              tabIndex='-1'\n            >\n              {t('preview')}\n            </StyledLinkPopoverBtn>\n          )}\n          <StyledLinkPopoverBtn\n            forwardedAs='a'\n            href={href}\n            target='_blank'\n            rel='noreferrer'\n            tabIndex='-1'\n          >\n            {t('link_open_in_tab_text')}\n          </StyledLinkPopoverBtn>\n        </Popover>\n\n        {previewable && (\n          <span id={`${uid}-preview-instructions`} hidden>\n            {t('preview_link_instruction', [macintosh ? 'option' : 'alt'])}\n          </span>\n        )}\n      </>\n    );\n  }\n);\n\nexport default Link;\n"]}

package/lib/components/ListToolbar/ListToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAU,YAAY,EAAE,MAAM,aAAa,CAAC;AAgCnD,OAAO,EACL,gBAAgB,EAIjB,MAAM,qBAAqB,CAAC;AAkC7B,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA0UnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ListToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAU,YAAY,EAAE,MAAM,aAAa,CAAC;AAiCnD,OAAO,EACL,gBAAgB,EAIjB,MAAM,qBAAqB,CAAC;AAkC7B,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAyUnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/ListToolbar/ListToolbar.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Actions from '../Actions';
 import Button from '../Button';
@@ -15,7 +15,7 @@ import { hasProp } from '../../utils';
 import FormDialog from '../Dialog/FormDialog';
 import { formatNumber } from '../Number';
 import PresetMenuPopover from './PresetMenuPopover';
-import { StyledViewSelector, StyledSearchForm, StyledListToolbar, StyledHeadingText, StyledCountMeta, StyledContainer } from './ListToolbar.styles';
+import { StyledViewSelector, StyledSearchForm, StyledListToolbar, StyledHeadingText, StyledCountMeta, StyledContainer, StyledListToolbarContent } from './ListToolbar.styles';
 registerIcon(filterIcon, arrowUpDownIcon, rowIcon, plusIcon, moreIcon);
 const CountMeta = ({ count }) => {
     const { locale } = useConfiguration();
@@ -41,7 +41,7 @@ const ListToolbar = forwardRef(({ name, viewSelector, formControlProps, createNe
     const t = useI18n();
     const isSmallOrAbove = useBreakpoint('sm');
     const consolidatedActionsButtonRef = useConsolidatedRef(actionsButtonRef);
-    const toolbarRef = useConsolidatedRef(ref);
+    const toolbarContentRef = useRef(null);
     const searchInputRef = useRef(null);
     const searchWrapperRef = useRef(null);
     const searchButtonRef = useRef(null);
@@ -58,7 +58,7 @@ const ListToolbar = forwardRef(({ name, viewSelector, formControlProps, createNe
         }
     }, [search?.value]);
     const hasFocus = useFocusWithin([searchWrapperRef]);
-    useArrows(hasFocus ? { current: null } : toolbarRef, {
+    useArrows(hasFocus ? { current: null } : toolbarContentRef, {
         dir: 'left-right',
         selector: "button:enabled:first-child, :not(input) + button:enabled, div[role='button']"
     });
@@ -121,7 +121,7 @@ const ListToolbar = forwardRef(({ name, viewSelector, formControlProps, createNe
         if (queryOptionProps &&
             hasProp(queryOptionProps, 'renderer') &&
             queryOptionPopoverTarget.current) {
-            queryOptionPopover = (_jsx(FormDialog, { target: queryOptionPopoverTarget.current, heading: t(`${currentQueryOptionId}_by`), onCancel: () => {
+            queryOptionPopover = (_jsx(FormDialog, { target: queryOptionPopoverTarget.current, heading: t(`${currentQueryOptionId}_by`), placement: 'bottom-end', onCancel: () => {
                     if (queryOptionProps.onCancel() === false)
                         return;
                     setCurrentQueryOptionId(null);
@@ -180,24 +180,24 @@ const ListToolbar = forwardRef(({ name, viewSelector, formControlProps, createNe
         ? viewSelector.views.find(view => view.selected)?.text ?? viewSelector.views[0].text
         : null;
     const labelText = viewSelector ? selectedViewName : name;
-    return (_jsxs(Flex, { as: StyledListToolbar, container: { direction: 'column', gap: 0.5 }, item: { grow: 1 }, ref: toolbarRef, role: 'toolbar', children: [_jsxs(Flex, { container: { alignItems: 'start', justify: 'between', gap: 2 }, children: [_jsxs(StyledContainer, { container: {
-                            alignItems: 'center',
-                            gap: 1,
-                            wrap: 'wrap'
-                        }, children: [_jsx(StyledHeadingText, { variant: 'h3', required: viewSelector?.views?.length && formControlProps?.required, "aria-label": selectedViewName ? `${name} - ${selectedViewName}` : name, children: !viewSelector || viewSelector.views.length <= 1 ? (labelText) : (_jsx(StyledViewSelector, { variant: 'text', text: labelText, menu: {
-                                        mode: 'single-select',
-                                        items: viewSelector.views.map(view => ({
-                                            ...view,
-                                            primary: `${view.text}${view.id === viewSelector.defaultId ? ` (${t('default')})` : ''}${view.id === viewSelector.appDefaultId ? ` (${t('app_default')})` : ''}`
-                                        })),
-                                        onItemClick: viewSelector.onViewSelect
-                                    } })) }), isSmallOrAbove && count && _jsx(CountMeta, { count: count })] }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, item: { shrink: 0 }, children: [isSmallOrAbove && additionalActions, search && isSmallOrAbove && searchButton, isSmallOrAbove && createNewButton, isSmallOrAbove && basicModeActions && (_jsx("span", { children: _jsx(Actions, { items: basicModeActions.map(({ icon, ...restProps }) => ({
+    return (_jsxs(Flex, { container: true, as: StyledListToolbar, ref: ref, role: 'toolbar', children: [_jsxs(StyledListToolbarContent, { container: { direction: 'column', gap: 0.5 }, ref: toolbarContentRef, item: { grow: 1 }, children: [_jsxs(Flex, { container: { alignItems: 'start', justify: 'between', gap: 2 }, children: [_jsxs(StyledContainer, { container: {
+                                    alignItems: 'center',
+                                    gap: 1,
+                                    wrap: 'wrap'
+                                }, children: [_jsx(StyledHeadingText, { variant: 'h3', required: viewSelector?.views?.length && formControlProps?.required, "aria-label": selectedViewName ? `${name} - ${selectedViewName}` : name, children: !viewSelector || viewSelector.views.length <= 1 ? (labelText) : (_jsx(StyledViewSelector, { variant: 'text', text: labelText, menu: {
+                                                mode: 'single-select',
+                                                items: viewSelector.views.map(view => ({
+                                                    ...view,
+                                                    primary: `${view.text}${view.id === viewSelector.defaultId ? ` (${t('default')})` : ''}${view.id === viewSelector.appDefaultId ? ` (${t('app_default')})` : ''}`
+                                                })),
+                                                onItemClick: viewSelector.onViewSelect
+                                            } })) }), isSmallOrAbove && count && _jsx(CountMeta, { count: count })] }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, item: { shrink: 0 }, children: [isSmallOrAbove && additionalActions, search && isSmallOrAbove && searchButton, isSmallOrAbove && createNewButton, isSmallOrAbove && basicModeActions && (_jsx("span", { children: _jsx(Actions, { items: basicModeActions.map(({ icon, ...restProps }) => ({
+                                                visual: icon ? _jsx(Icon, { name: icon }) : undefined,
+                                                ...restProps
+                                            })), menuAt: 1, ref: consolidatedActionsButtonRef }) })), !isSmallOrAbove && count && _jsx(CountMeta, { count: count })] })] }), !isSmallOrAbove && (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between', gap: 1 }, children: [additionalActions, _jsx(Flex, { as: StyledSearchForm, container: { alignItems: 'center', wrap: 'wrap', gap: 1 }, item: { grow: 1 }, children: search && searchInputWrapper }), createNewButton, basicModeActions && (_jsx("span", { children: _jsx(Actions, { items: basicModeActions.map(({ icon, ...restProps }) => ({
                                         visual: icon ? _jsx(Icon, { name: icon }) : undefined,
                                         ...restProps
-                                    })), menuAt: 1, ref: consolidatedActionsButtonRef }) })), !isSmallOrAbove && count && _jsx(CountMeta, { count: count })] })] }), !isSmallOrAbove && (_jsx(_Fragment, { children: _jsxs(Flex, { container: { alignItems: 'start', justify: 'between', gap: 1 }, children: [additionalActions, _jsx(Flex, { as: StyledSearchForm, container: { alignItems: 'center', wrap: 'wrap', gap: 1 }, item: { grow: 1 }, children: search && searchInputWrapper }), createNewButton, basicModeActions && (_jsx("span", { children: _jsx(Actions, { items: basicModeActions.map(({ icon, ...restProps }) => ({
-                                    visual: icon ? _jsx(Icon, { name: icon }) : undefined,
-                                    ...restProps
-                                })), menuAt: 1, ref: consolidatedActionsButtonRef }) }))] }) })), queryOptionPopover, _jsx(PresetMenuPopover, { buttonRef: consolidatedActionsButtonRef, heading: actionsQueryOptionPreset?.heading, menu: actionsQueryOptionPreset?.menu, isOpen: optionPresetMenuOpen, onClose: () => setOptionPresetMenuOpen(false) })] }));
+                                    })), menuAt: 1, ref: consolidatedActionsButtonRef }) }))] }))] }), queryOptionPopover, _jsx(PresetMenuPopover, { buttonRef: consolidatedActionsButtonRef, heading: actionsQueryOptionPreset?.heading, menu: actionsQueryOptionPreset?.menu, isOpen: optionPresetMenuOpen, onClose: () => setOptionPresetMenuOpen(false) })] }));
 });
 export default ListToolbar;
 //# sourceMappingURL=ListToolbar.js.map