@veeqo/ui 15.3.2 → 15.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DatePicker/DatePicker.cjs +3 -2
- package/dist/components/DatePicker/DatePicker.cjs.map +1 -1
- package/dist/components/DatePicker/DatePicker.d.ts +7 -0
- package/dist/components/DatePicker/DatePicker.js +3 -2
- package/dist/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.cjs +5 -3
- package/dist/components/DateRangePicker/DateRangePicker.cjs.map +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.js +5 -3
- package/dist/components/DateRangePicker/DateRangePicker.js.map +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.module.scss.cjs +9 -0
- package/dist/components/DateRangePicker/DateRangePicker.module.scss.cjs.map +1 -0
- package/dist/components/DateRangePicker/DateRangePicker.module.scss.js +7 -0
- package/dist/components/DateRangePicker/DateRangePicker.module.scss.js.map +1 -0
- package/dist/components/DateRangePicker/types.d.ts +9 -0
- package/dist/components/Popover/Popover.cjs +11 -1
- package/dist/components/Popover/Popover.cjs.map +1 -1
- package/dist/components/Popover/Popover.js +12 -2
- package/dist/components/Popover/Popover.js.map +1 -1
- package/package.json +8 -1
|
@@ -12,11 +12,12 @@ require('../Grid/Grid.cjs');
|
|
|
12
12
|
require('@internationalized/date');
|
|
13
13
|
require('../Calendars/types.cjs');
|
|
14
14
|
require('../Calendars/data/constants.cjs');
|
|
15
|
-
|
|
15
|
+
require('../Button/Button.cjs');
|
|
16
16
|
require('../Stack/Stack.cjs');
|
|
17
17
|
require('../Calendars/components/subcomponents/CalendarHeading.cjs');
|
|
18
18
|
var useIsDateUnavailable = require('../Calendars/data/useIsDateUnavailable.cjs');
|
|
19
19
|
var Calendar = require('../Calendars/components/Calendar/Calendar.cjs');
|
|
20
|
+
var Action = require('../Action/Action.cjs');
|
|
20
21
|
|
|
21
22
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
22
23
|
|
|
@@ -62,7 +63,7 @@ const DatePicker = ({ className, style, value, onChange, 'aria-label': ariaLabel
|
|
|
62
63
|
React__default.default.createElement(Card.Card.Surface, { style: { padding: sizes.sizes.base } },
|
|
63
64
|
React__default.default.createElement(Calendar.Calendar, { value: value, onChange: onSelectDate, "aria-label": `${ariaLabel} Calendar`, isDisabled: isDisabled, ...validationProps }),
|
|
64
65
|
React__default.default.createElement("footer", { className: DatePicker_module.footer },
|
|
65
|
-
React__default.default.createElement(
|
|
66
|
+
React__default.default.createElement(Action.Action, { type: "button", variant: "flat", onClick: () => onSelectDate(resetToValue.current), size: "sm", disabled: isDisabled }, "Reset")))))));
|
|
66
67
|
};
|
|
67
68
|
|
|
68
69
|
exports.DatePicker = DatePicker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.cjs","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { DateValue } from 'react-aria-components';\nimport { sizes } from 'Theme/modules/sizes';\nimport styles from './DatePicker.module.scss';\nimport { WithLabelsProps } from '../../hoc/withLabels/withLabels';\nimport { CalendarIcon } from '../../icons';\nimport { DateInputField } from '../DateInputField';\nimport { Popover } from '../Popover';\nimport { Card } from '../Card';\nimport { Calendar } from '../Calendars';\nimport {
|
|
1
|
+
{"version":3,"file":"DatePicker.cjs","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { DateValue } from 'react-aria-components';\nimport { sizes } from 'Theme/modules/sizes';\nimport styles from './DatePicker.module.scss';\nimport { WithLabelsProps } from '../../hoc/withLabels/withLabels';\nimport { CalendarIcon } from '../../icons';\nimport { DateInputField } from '../DateInputField';\nimport { Popover } from '../Popover';\nimport { Card } from '../Card';\nimport { Calendar } from '../Calendars';\nimport { Action } from '../Action';\nimport { PopoverProps } from '../Popover/types';\nimport { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable';\nimport { DateValidationProps } from '../DateInputField/types';\n\ntype DatePickerProps = {\n /** The currently selected date value */\n value: DateValue | null;\n /** Accessible label describing the date picker's purpose */\n 'aria-label': string;\n /** Callback fired when a date is selected or cleared */\n onChange: (date: DateValue | null) => void;\n /** Whether the date picker is disabled */\n isDisabled?: boolean;\n /** Whether the calendar dropdown closes after selecting a date */\n shouldCloseOnSelect?: boolean;\n /** Additional CSS class name */\n className?: string;\n /** Inline styles */\n style?: React.CSSProperties;\n} & WithLabelsProps &\n DateValidationProps &\n Pick<PopoverProps, 'rootElementRef'>;\n\nexport const DatePicker = ({\n className,\n style,\n value,\n onChange,\n 'aria-label': ariaLabel,\n isDisabled,\n shouldCloseOnSelect = true,\n rootElementRef,\n maxValue,\n minValue,\n disabledRanges,\n disallowWeekends,\n ...withLabelProps\n}: DatePickerProps) => {\n const [shouldShowDropdown, setShouldShowDropdown] = useState(false);\n const resetToValue = useRef(value);\n\n const rangeRef = useRef<HTMLDivElement | null>(null);\n const openDropdownRef = useRef<HTMLButtonElement | null>(null);\n\n const closeDropdown = () => {\n setShouldShowDropdown(false);\n openDropdownRef.current?.focus();\n };\n\n const onSelectDate = (date: DateValue | null) => {\n onChange(date);\n\n if (!shouldCloseOnSelect || !shouldShowDropdown) return;\n setTimeout(closeDropdown, 0); // Calendar state must update first.\n };\n\n const validationProps = {\n maxValue,\n minValue,\n disabledRanges,\n disallowWeekends,\n } as DateValidationProps;\n\n const { isDateUnavailable } = useIsDateUnavailable(validationProps);\n const isSelectedDateInvalid = useMemo(\n () => (value ? isDateUnavailable(value) : false),\n [isDateUnavailable, value],\n );\n\n const error =\n withLabelProps.error || (isSelectedDateInvalid ? 'Invalid date selection' : undefined);\n\n return (\n <>\n <DateInputField\n disabled={isDisabled}\n aria-label={ariaLabel}\n startValue={value}\n rightActionRef={openDropdownRef}\n rightAction={{\n iconSlot: <CalendarIcon />,\n 'aria-label': 'Open Calendar',\n onClick: () => setShouldShowDropdown(!shouldShowDropdown),\n disabled: isDisabled,\n 'aria-controls': 'data-picker-dropdown',\n 'aria-haspopup': true,\n 'aria-expanded': shouldShowDropdown,\n }}\n onChange={onSelectDate}\n rangeRef={rangeRef}\n className={className}\n style={style}\n {...withLabelProps}\n {...validationProps}\n error={error}\n />\n\n {shouldShowDropdown && (\n <Popover\n id=\"date-picker-dropdown\"\n style={{ marginTop: sizes.sm }}\n anchorElement={rangeRef.current}\n onShouldClose={closeDropdown}\n placement=\"bottom-start\"\n ignoreAriaWarnings // We want to anchor to input, but be powered by right action.\n rootElementRef={rootElementRef}\n >\n <Card.Surface style={{ padding: sizes.base }}>\n <Calendar\n value={value}\n onChange={onSelectDate}\n aria-label={`${ariaLabel} Calendar`}\n isDisabled={isDisabled}\n {...validationProps}\n />\n <footer className={styles.footer}>\n <Action\n type=\"button\"\n variant=\"flat\"\n onClick={() => onSelectDate(resetToValue.current)}\n size=\"sm\"\n disabled={isDisabled}\n >\n Reset\n </Action>\n </footer>\n </Card.Surface>\n </Popover>\n )}\n </>\n );\n};\n"],"names":["useState","useRef","useIsDateUnavailable","useMemo","React","DateInputField","CalendarIcon","Popover","sizes","Card","Calendar","styles","Action"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkCO,MAAM,UAAU,GAAG,CAAC,EACzB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,UAAU,EACV,mBAAmB,GAAG,IAAI,EAC1B,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,gBAAgB,EAChB,GAAG,cAAc,EACD,KAAI;IACpB,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AACnE,IAAA,MAAM,YAAY,GAAGC,YAAM,CAAC,KAAK,CAAC;AAElC,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAwB,IAAI,CAAC;AACpD,IAAA,MAAM,eAAe,GAAGA,YAAM,CAA2B,IAAI,CAAC;IAE9D,MAAM,aAAa,GAAG,MAAK;;QACzB,qBAAqB,CAAC,KAAK,CAAC;AAC5B,QAAA,CAAA,EAAA,GAAA,eAAe,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,EAAE;AAClC,IAAA,CAAC;AAED,IAAA,MAAM,YAAY,GAAG,CAAC,IAAsB,KAAI;QAC9C,QAAQ,CAAC,IAAI,CAAC;AAEd,QAAA,IAAI,CAAC,mBAAmB,IAAI,CAAC,kBAAkB;YAAE;AACjD,QAAA,UAAU,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;AAC/B,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GAAG;QACtB,QAAQ;QACR,QAAQ;QACR,cAAc;QACd,gBAAgB;KACM;IAExB,MAAM,EAAE,iBAAiB,EAAE,GAAGC,yCAAoB,CAAC,eAAe,CAAC;AACnE,IAAA,MAAM,qBAAqB,GAAGC,aAAO,CACnC,OAAO,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,EAChD,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAC3B;AAED,IAAA,MAAM,KAAK,GACT,cAAc,CAAC,KAAK,KAAK,qBAAqB,GAAG,wBAAwB,GAAG,SAAS,CAAC;AAExF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACE,QAAAA,sBAAA,CAAA,aAAA,CAACC,oBAAc,EAAA,EACb,QAAQ,EAAE,UAAU,gBACR,SAAS,EACrB,UAAU,EAAE,KAAK,EACjB,cAAc,EAAE,eAAe,EAC/B,WAAW,EAAE;gBACX,QAAQ,EAAED,sBAAA,CAAA,aAAA,CAACE,2BAAY,EAAA,IAAA,CAAG;AAC1B,gBAAA,YAAY,EAAE,eAAe;gBAC7B,OAAO,EAAE,MAAM,qBAAqB,CAAC,CAAC,kBAAkB,CAAC;AACzD,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,eAAe,EAAE,sBAAsB;AACvC,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,eAAe,EAAE,kBAAkB;aACpC,EACD,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EAAA,GACR,cAAc,EAAA,GACd,eAAe,EACnB,KAAK,EAAE,KAAK,EAAA,CACZ;AAED,QAAA,kBAAkB,KACjBF,sBAAA,CAAA,aAAA,CAACG,eAAO,IACN,EAAE,EAAC,sBAAsB,EACzB,KAAK,EAAE,EAAE,SAAS,EAAEC,WAAK,CAAC,EAAE,EAAE,EAC9B,aAAa,EAAE,QAAQ,CAAC,OAAO,EAC/B,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAC,cAAc,EACxB,kBAAkB;AAClB,cAAA,IAAA,EAAA,cAAc,EAAE,cAAc,EAAA;AAE9B,YAAAJ,sBAAA,CAAA,aAAA,CAACK,SAAI,CAAC,OAAO,EAAA,EAAC,KAAK,EAAE,EAAE,OAAO,EAAED,WAAK,CAAC,IAAI,EAAE,EAAA;AAC1C,gBAAAJ,sBAAA,CAAA,aAAA,CAACM,iBAAQ,EAAA,EACP,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,gBACV,CAAA,EAAG,SAAS,WAAW,EACnC,UAAU,EAAE,UAAU,EAAA,GAClB,eAAe,EAAA,CACnB;AACF,gBAAAN,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAEO,iBAAM,CAAC,MAAM,EAAA;AAC9B,oBAAAP,sBAAA,CAAA,aAAA,CAACQ,aAAM,EAAA,EACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,MAAM,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,EACjD,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,UAAU,EAAA,EAAA,OAAA,CAGb,CACF,CACI,CACP,CACX,CACA;AAEP;;;;"}
|
|
@@ -4,12 +4,19 @@ import { WithLabelsProps } from '../../hoc/withLabels/withLabels';
|
|
|
4
4
|
import { PopoverProps } from '../Popover/types';
|
|
5
5
|
import { DateValidationProps } from '../DateInputField/types';
|
|
6
6
|
type DatePickerProps = {
|
|
7
|
+
/** The currently selected date value */
|
|
7
8
|
value: DateValue | null;
|
|
9
|
+
/** Accessible label describing the date picker's purpose */
|
|
8
10
|
'aria-label': string;
|
|
11
|
+
/** Callback fired when a date is selected or cleared */
|
|
9
12
|
onChange: (date: DateValue | null) => void;
|
|
13
|
+
/** Whether the date picker is disabled */
|
|
10
14
|
isDisabled?: boolean;
|
|
15
|
+
/** Whether the calendar dropdown closes after selecting a date */
|
|
11
16
|
shouldCloseOnSelect?: boolean;
|
|
17
|
+
/** Additional CSS class name */
|
|
12
18
|
className?: string;
|
|
19
|
+
/** Inline styles */
|
|
13
20
|
style?: React.CSSProperties;
|
|
14
21
|
} & WithLabelsProps & DateValidationProps & Pick<PopoverProps, 'rootElementRef'>;
|
|
15
22
|
export declare const DatePicker: ({ className, style, value, onChange, "aria-label": ariaLabel, isDisabled, shouldCloseOnSelect, rootElementRef, maxValue, minValue, disabledRanges, disallowWeekends, ...withLabelProps }: DatePickerProps) => React.JSX.Element;
|
|
@@ -10,11 +10,12 @@ import '../Grid/Grid.js';
|
|
|
10
10
|
import '@internationalized/date';
|
|
11
11
|
import '../Calendars/types.js';
|
|
12
12
|
import '../Calendars/data/constants.js';
|
|
13
|
-
import
|
|
13
|
+
import '../Button/Button.js';
|
|
14
14
|
import '../Stack/Stack.js';
|
|
15
15
|
import '../Calendars/components/subcomponents/CalendarHeading.js';
|
|
16
16
|
import { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable.js';
|
|
17
17
|
import { Calendar } from '../Calendars/components/Calendar/Calendar.js';
|
|
18
|
+
import { Action } from '../Action/Action.js';
|
|
18
19
|
|
|
19
20
|
const DatePicker = ({ className, style, value, onChange, 'aria-label': ariaLabel, isDisabled, shouldCloseOnSelect = true, rootElementRef, maxValue, minValue, disabledRanges, disallowWeekends, ...withLabelProps }) => {
|
|
20
21
|
const [shouldShowDropdown, setShouldShowDropdown] = useState(false);
|
|
@@ -56,7 +57,7 @@ const DatePicker = ({ className, style, value, onChange, 'aria-label': ariaLabel
|
|
|
56
57
|
React__default.createElement(Card.Surface, { style: { padding: sizes.base } },
|
|
57
58
|
React__default.createElement(Calendar, { value: value, onChange: onSelectDate, "aria-label": `${ariaLabel} Calendar`, isDisabled: isDisabled, ...validationProps }),
|
|
58
59
|
React__default.createElement("footer", { className: styles.footer },
|
|
59
|
-
React__default.createElement(
|
|
60
|
+
React__default.createElement(Action, { type: "button", variant: "flat", onClick: () => onSelectDate(resetToValue.current), size: "sm", disabled: isDisabled }, "Reset")))))));
|
|
60
61
|
};
|
|
61
62
|
|
|
62
63
|
export { DatePicker };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { DateValue } from 'react-aria-components';\nimport { sizes } from 'Theme/modules/sizes';\nimport styles from './DatePicker.module.scss';\nimport { WithLabelsProps } from '../../hoc/withLabels/withLabels';\nimport { CalendarIcon } from '../../icons';\nimport { DateInputField } from '../DateInputField';\nimport { Popover } from '../Popover';\nimport { Card } from '../Card';\nimport { Calendar } from '../Calendars';\nimport {
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { DateValue } from 'react-aria-components';\nimport { sizes } from 'Theme/modules/sizes';\nimport styles from './DatePicker.module.scss';\nimport { WithLabelsProps } from '../../hoc/withLabels/withLabels';\nimport { CalendarIcon } from '../../icons';\nimport { DateInputField } from '../DateInputField';\nimport { Popover } from '../Popover';\nimport { Card } from '../Card';\nimport { Calendar } from '../Calendars';\nimport { Action } from '../Action';\nimport { PopoverProps } from '../Popover/types';\nimport { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable';\nimport { DateValidationProps } from '../DateInputField/types';\n\ntype DatePickerProps = {\n /** The currently selected date value */\n value: DateValue | null;\n /** Accessible label describing the date picker's purpose */\n 'aria-label': string;\n /** Callback fired when a date is selected or cleared */\n onChange: (date: DateValue | null) => void;\n /** Whether the date picker is disabled */\n isDisabled?: boolean;\n /** Whether the calendar dropdown closes after selecting a date */\n shouldCloseOnSelect?: boolean;\n /** Additional CSS class name */\n className?: string;\n /** Inline styles */\n style?: React.CSSProperties;\n} & WithLabelsProps &\n DateValidationProps &\n Pick<PopoverProps, 'rootElementRef'>;\n\nexport const DatePicker = ({\n className,\n style,\n value,\n onChange,\n 'aria-label': ariaLabel,\n isDisabled,\n shouldCloseOnSelect = true,\n rootElementRef,\n maxValue,\n minValue,\n disabledRanges,\n disallowWeekends,\n ...withLabelProps\n}: DatePickerProps) => {\n const [shouldShowDropdown, setShouldShowDropdown] = useState(false);\n const resetToValue = useRef(value);\n\n const rangeRef = useRef<HTMLDivElement | null>(null);\n const openDropdownRef = useRef<HTMLButtonElement | null>(null);\n\n const closeDropdown = () => {\n setShouldShowDropdown(false);\n openDropdownRef.current?.focus();\n };\n\n const onSelectDate = (date: DateValue | null) => {\n onChange(date);\n\n if (!shouldCloseOnSelect || !shouldShowDropdown) return;\n setTimeout(closeDropdown, 0); // Calendar state must update first.\n };\n\n const validationProps = {\n maxValue,\n minValue,\n disabledRanges,\n disallowWeekends,\n } as DateValidationProps;\n\n const { isDateUnavailable } = useIsDateUnavailable(validationProps);\n const isSelectedDateInvalid = useMemo(\n () => (value ? isDateUnavailable(value) : false),\n [isDateUnavailable, value],\n );\n\n const error =\n withLabelProps.error || (isSelectedDateInvalid ? 'Invalid date selection' : undefined);\n\n return (\n <>\n <DateInputField\n disabled={isDisabled}\n aria-label={ariaLabel}\n startValue={value}\n rightActionRef={openDropdownRef}\n rightAction={{\n iconSlot: <CalendarIcon />,\n 'aria-label': 'Open Calendar',\n onClick: () => setShouldShowDropdown(!shouldShowDropdown),\n disabled: isDisabled,\n 'aria-controls': 'data-picker-dropdown',\n 'aria-haspopup': true,\n 'aria-expanded': shouldShowDropdown,\n }}\n onChange={onSelectDate}\n rangeRef={rangeRef}\n className={className}\n style={style}\n {...withLabelProps}\n {...validationProps}\n error={error}\n />\n\n {shouldShowDropdown && (\n <Popover\n id=\"date-picker-dropdown\"\n style={{ marginTop: sizes.sm }}\n anchorElement={rangeRef.current}\n onShouldClose={closeDropdown}\n placement=\"bottom-start\"\n ignoreAriaWarnings // We want to anchor to input, but be powered by right action.\n rootElementRef={rootElementRef}\n >\n <Card.Surface style={{ padding: sizes.base }}>\n <Calendar\n value={value}\n onChange={onSelectDate}\n aria-label={`${ariaLabel} Calendar`}\n isDisabled={isDisabled}\n {...validationProps}\n />\n <footer className={styles.footer}>\n <Action\n type=\"button\"\n variant=\"flat\"\n onClick={() => onSelectDate(resetToValue.current)}\n size=\"sm\"\n disabled={isDisabled}\n >\n Reset\n </Action>\n </footer>\n </Card.Surface>\n </Popover>\n )}\n </>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var
|
|
4
|
+
var Action = require('../Action/Action.cjs');
|
|
5
5
|
var Select = require('../Select/Select.cjs');
|
|
6
6
|
var index$1 = require('../DateInputField/index.cjs');
|
|
7
7
|
var RangeCalendar = require('../Calendars/components/RangeCalendar/RangeCalendar.cjs');
|
|
@@ -10,6 +10,7 @@ require('../Grid/Grid.cjs');
|
|
|
10
10
|
require('@internationalized/date');
|
|
11
11
|
require('../Calendars/types.cjs');
|
|
12
12
|
require('../Calendars/data/constants.cjs');
|
|
13
|
+
require('../Button/Button.cjs');
|
|
13
14
|
var Stack = require('../Stack/Stack.cjs');
|
|
14
15
|
require('../Calendars/components/subcomponents/CalendarHeading.cjs');
|
|
15
16
|
var useIsDateUnavailable = require('../Calendars/data/useIsDateUnavailable.cjs');
|
|
@@ -18,6 +19,7 @@ var index = require('../../theme/index.cjs');
|
|
|
18
19
|
var ComparePreviousPeriod = require('./components/ComparePreviousPeriod.cjs');
|
|
19
20
|
var constants = require('./constants.cjs');
|
|
20
21
|
var Divider = require('./components/Divider.cjs');
|
|
22
|
+
var DateRangePicker_module = require('./DateRangePicker.module.scss.cjs');
|
|
21
23
|
|
|
22
24
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
23
25
|
|
|
@@ -73,8 +75,8 @@ disabledRanges, disallowWeekends, maxValue, minValue, selectedPreset, setSelecte
|
|
|
73
75
|
React__default.default.createElement(RangeCalendar.RangeCalendar, { "aria-label": "Selected Date Range", isDisabled: isDisabled, value: selectedRange, onChange: setSelectedRange, disabledRanges: disabledRanges, maxValue: maxValue, minValue: minValue, disallowWeekends: disallowWeekends })),
|
|
74
76
|
!!onReset && (React__default.default.createElement(React__default.default.Fragment, null,
|
|
75
77
|
React__default.default.createElement(Divider.Divider, null),
|
|
76
|
-
React__default.default.createElement(Card.Card.Footer, {
|
|
77
|
-
React__default.default.createElement(
|
|
78
|
+
React__default.default.createElement(Card.Card.Footer, { className: DateRangePicker_module.resetFooter },
|
|
79
|
+
React__default.default.createElement(Action.Action, { variant: "default", size: "sm", onClick: onReset, disabled: isDisabled }, "Reset"))))));
|
|
78
80
|
};
|
|
79
81
|
|
|
80
82
|
exports.DateRangePicker = DateRangePicker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangePicker.cjs","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react';\nimport type { DateRange, DateValue } from 'react-aria-components';\nimport {
|
|
1
|
+
{"version":3,"file":"DateRangePicker.cjs","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react';\nimport type { DateRange, DateValue } from 'react-aria-components';\nimport { Action } from '../Action';\nimport { Select } from '../Select';\nimport { DateInputField } from '../DateInputField';\nimport { RangeCalendar, useIsDateUnavailable } from '../Calendars';\nimport { Card } from '../Card';\nimport { theme } from '../../theme';\nimport { Stack } from '../Stack';\nimport { ComparePreviousPeriod } from './components/ComparePreviousPeriod';\nimport { DATE_RANGE_OPTIONS, DateRanges, checkForMatchingPreset, getDateRange } from './constants';\nimport { Divider } from './components/Divider';\nimport { DateRangePickerProps } from './types';\nimport styles from './DateRangePicker.module.scss';\n\nexport const DateRangePicker = ({\n // Style props\n className,\n style,\n isDisabled,\n // Customizable options\n showDatePresets = true,\n onReset,\n // Calendar props\n disabledRanges,\n disallowWeekends,\n maxValue,\n minValue,\n selectedPreset,\n setSelectedPreset,\n selectedRange,\n setSelectedRange,\n // Previous period props\n 'aria-describedby': ariaDescribedBy,\n 'aria-label': ariaLabel,\n ...previousPeriodProps\n}: DateRangePickerProps) => {\n const { isDateRangeUnavailable } = useIsDateUnavailable({\n disabledRanges,\n disallowWeekends,\n maxValue,\n minValue,\n });\n\n const updateRangePreset = (selectedValue: string) => {\n setSelectedRange(getDateRange(DateRanges[selectedValue as DateRanges]));\n setSelectedPreset(\n DATE_RANGE_OPTIONS.find(({ value }) => value === selectedValue) || DATE_RANGE_OPTIONS[0],\n );\n };\n\n const updateDateSegment = useCallback(\n (slot: 'start' | 'end') => (value: DateValue | null) => {\n if (!value) return;\n\n const newRange = {\n start: slot === 'start' ? value : selectedRange?.start,\n end: slot === 'end' ? value : selectedRange?.end,\n } as DateRange;\n\n setSelectedRange(newRange);\n },\n [selectedRange?.end, selectedRange?.start, setSelectedRange],\n );\n\n const isDateRangeInvalid = useMemo(\n () => isDateRangeUnavailable(selectedRange),\n [isDateRangeUnavailable, selectedRange],\n );\n\n // Memoize finding preset since checkForMatchingPreset isn't quick.\n const matchedPreset = useMemo(() => {\n if (!selectedRange) return null;\n return checkForMatchingPreset(selectedRange);\n }, [selectedRange]);\n\n useEffect(() => {\n if (matchedPreset)\n setSelectedPreset(matchedPreset); // If selected value is a preset, set it.\n else setSelectedPreset(DATE_RANGE_OPTIONS[0]); // Otherwise, select \"custom\" option.\n }, [matchedPreset, setSelectedPreset]);\n\n return (\n <Stack\n direction=\"vertical\"\n alignX=\"stretch\"\n spacing=\"0\"\n style={{ gap: theme.sizes.base, ...style }}\n className={className}\n aria-describedby={ariaDescribedBy}\n aria-label={ariaLabel}\n >\n {showDatePresets && (\n <Select\n disabled={isDisabled}\n label=\"Date Range\"\n options={DATE_RANGE_OPTIONS}\n value={selectedPreset?.value}\n onChange={updateRangePreset}\n />\n )}\n\n <DateInputField\n isRangeInput\n disabled={isDisabled}\n label=\"Start date - End date\"\n onChangeStartDate={updateDateSegment('start')}\n onChangeEndDate={updateDateSegment('end')}\n startValue={selectedRange && selectedRange.start}\n endValue={selectedRange && selectedRange.end}\n error={isDateRangeInvalid ? 'Range contains invalid dates' : undefined}\n disabledRanges={disabledRanges}\n disallowWeekends={disallowWeekends}\n maxValue={maxValue}\n minValue={minValue}\n />\n\n {previousPeriodProps.showPreviousPeriod && <ComparePreviousPeriod {...previousPeriodProps} />}\n\n <Divider />\n\n <Stack alignX=\"center\">\n <RangeCalendar\n aria-label=\"Selected Date Range\"\n isDisabled={isDisabled}\n value={selectedRange}\n onChange={setSelectedRange}\n disabledRanges={disabledRanges}\n maxValue={maxValue}\n minValue={minValue}\n disallowWeekends={disallowWeekends}\n />\n </Stack>\n\n {!!onReset && (\n <>\n <Divider />\n <Card.Footer className={styles.resetFooter}>\n <Action variant=\"default\" size=\"sm\" onClick={onReset} disabled={isDisabled}>\n Reset\n </Action>\n </Card.Footer>\n </>\n )}\n </Stack>\n );\n};\n"],"names":["useIsDateUnavailable","getDateRange","DateRanges","DATE_RANGE_OPTIONS","useCallback","useMemo","checkForMatchingPreset","useEffect","React","Stack","theme","Select","DateInputField","ComparePreviousPeriod","Divider","RangeCalendar","Card","styles","Action"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React__default, { useCallback, useMemo, useEffect } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { Action } from '../Action/Action.js';
|
|
3
3
|
import { Select } from '../Select/Select.js';
|
|
4
4
|
import { DateInputField } from '../DateInputField/index.js';
|
|
5
5
|
import { RangeCalendar } from '../Calendars/components/RangeCalendar/RangeCalendar.js';
|
|
@@ -8,6 +8,7 @@ import '../Grid/Grid.js';
|
|
|
8
8
|
import '@internationalized/date';
|
|
9
9
|
import '../Calendars/types.js';
|
|
10
10
|
import '../Calendars/data/constants.js';
|
|
11
|
+
import '../Button/Button.js';
|
|
11
12
|
import { Stack } from '../Stack/Stack.js';
|
|
12
13
|
import '../Calendars/components/subcomponents/CalendarHeading.js';
|
|
13
14
|
import { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable.js';
|
|
@@ -16,6 +17,7 @@ import { theme } from '../../theme/index.js';
|
|
|
16
17
|
import { ComparePreviousPeriod } from './components/ComparePreviousPeriod.js';
|
|
17
18
|
import { checkForMatchingPreset, DATE_RANGE_OPTIONS, getDateRange, DateRanges } from './constants.js';
|
|
18
19
|
import { Divider } from './components/Divider.js';
|
|
20
|
+
import styles from './DateRangePicker.module.scss.js';
|
|
19
21
|
|
|
20
22
|
const DateRangePicker = ({
|
|
21
23
|
// Style props
|
|
@@ -67,8 +69,8 @@ disabledRanges, disallowWeekends, maxValue, minValue, selectedPreset, setSelecte
|
|
|
67
69
|
React__default.createElement(RangeCalendar, { "aria-label": "Selected Date Range", isDisabled: isDisabled, value: selectedRange, onChange: setSelectedRange, disabledRanges: disabledRanges, maxValue: maxValue, minValue: minValue, disallowWeekends: disallowWeekends })),
|
|
68
70
|
!!onReset && (React__default.createElement(React__default.Fragment, null,
|
|
69
71
|
React__default.createElement(Divider, null),
|
|
70
|
-
React__default.createElement(Card.Footer, {
|
|
71
|
-
React__default.createElement(
|
|
72
|
+
React__default.createElement(Card.Footer, { className: styles.resetFooter },
|
|
73
|
+
React__default.createElement(Action, { variant: "default", size: "sm", onClick: onReset, disabled: isDisabled }, "Reset"))))));
|
|
72
74
|
};
|
|
73
75
|
|
|
74
76
|
export { DateRangePicker };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangePicker.js","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react';\nimport type { DateRange, DateValue } from 'react-aria-components';\nimport {
|
|
1
|
+
{"version":3,"file":"DateRangePicker.js","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react';\nimport type { DateRange, DateValue } from 'react-aria-components';\nimport { Action } from '../Action';\nimport { Select } from '../Select';\nimport { DateInputField } from '../DateInputField';\nimport { RangeCalendar, useIsDateUnavailable } from '../Calendars';\nimport { Card } from '../Card';\nimport { theme } from '../../theme';\nimport { Stack } from '../Stack';\nimport { ComparePreviousPeriod } from './components/ComparePreviousPeriod';\nimport { DATE_RANGE_OPTIONS, DateRanges, checkForMatchingPreset, getDateRange } from './constants';\nimport { Divider } from './components/Divider';\nimport { DateRangePickerProps } from './types';\nimport styles from './DateRangePicker.module.scss';\n\nexport const DateRangePicker = ({\n // Style props\n className,\n style,\n isDisabled,\n // Customizable options\n showDatePresets = true,\n onReset,\n // Calendar props\n disabledRanges,\n disallowWeekends,\n maxValue,\n minValue,\n selectedPreset,\n setSelectedPreset,\n selectedRange,\n setSelectedRange,\n // Previous period props\n 'aria-describedby': ariaDescribedBy,\n 'aria-label': ariaLabel,\n ...previousPeriodProps\n}: DateRangePickerProps) => {\n const { isDateRangeUnavailable } = useIsDateUnavailable({\n disabledRanges,\n disallowWeekends,\n maxValue,\n minValue,\n });\n\n const updateRangePreset = (selectedValue: string) => {\n setSelectedRange(getDateRange(DateRanges[selectedValue as DateRanges]));\n setSelectedPreset(\n DATE_RANGE_OPTIONS.find(({ value }) => value === selectedValue) || DATE_RANGE_OPTIONS[0],\n );\n };\n\n const updateDateSegment = useCallback(\n (slot: 'start' | 'end') => (value: DateValue | null) => {\n if (!value) return;\n\n const newRange = {\n start: slot === 'start' ? value : selectedRange?.start,\n end: slot === 'end' ? value : selectedRange?.end,\n } as DateRange;\n\n setSelectedRange(newRange);\n },\n [selectedRange?.end, selectedRange?.start, setSelectedRange],\n );\n\n const isDateRangeInvalid = useMemo(\n () => isDateRangeUnavailable(selectedRange),\n [isDateRangeUnavailable, selectedRange],\n );\n\n // Memoize finding preset since checkForMatchingPreset isn't quick.\n const matchedPreset = useMemo(() => {\n if (!selectedRange) return null;\n return checkForMatchingPreset(selectedRange);\n }, [selectedRange]);\n\n useEffect(() => {\n if (matchedPreset)\n setSelectedPreset(matchedPreset); // If selected value is a preset, set it.\n else setSelectedPreset(DATE_RANGE_OPTIONS[0]); // Otherwise, select \"custom\" option.\n }, [matchedPreset, setSelectedPreset]);\n\n return (\n <Stack\n direction=\"vertical\"\n alignX=\"stretch\"\n spacing=\"0\"\n style={{ gap: theme.sizes.base, ...style }}\n className={className}\n aria-describedby={ariaDescribedBy}\n aria-label={ariaLabel}\n >\n {showDatePresets && (\n <Select\n disabled={isDisabled}\n label=\"Date Range\"\n options={DATE_RANGE_OPTIONS}\n value={selectedPreset?.value}\n onChange={updateRangePreset}\n />\n )}\n\n <DateInputField\n isRangeInput\n disabled={isDisabled}\n label=\"Start date - End date\"\n onChangeStartDate={updateDateSegment('start')}\n onChangeEndDate={updateDateSegment('end')}\n startValue={selectedRange && selectedRange.start}\n endValue={selectedRange && selectedRange.end}\n error={isDateRangeInvalid ? 'Range contains invalid dates' : undefined}\n disabledRanges={disabledRanges}\n disallowWeekends={disallowWeekends}\n maxValue={maxValue}\n minValue={minValue}\n />\n\n {previousPeriodProps.showPreviousPeriod && <ComparePreviousPeriod {...previousPeriodProps} />}\n\n <Divider />\n\n <Stack alignX=\"center\">\n <RangeCalendar\n aria-label=\"Selected Date Range\"\n isDisabled={isDisabled}\n value={selectedRange}\n onChange={setSelectedRange}\n disabledRanges={disabledRanges}\n maxValue={maxValue}\n minValue={minValue}\n disallowWeekends={disallowWeekends}\n />\n </Stack>\n\n {!!onReset && (\n <>\n <Divider />\n <Card.Footer className={styles.resetFooter}>\n <Action variant=\"default\" size=\"sm\" onClick={onReset} disabled={isDisabled}>\n Reset\n </Action>\n </Card.Footer>\n </>\n )}\n </Stack>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._resetFooter_luszr_1 {\n display: flex;\n justify-content: flex-end;\n padding: 0;\n margin: 0;\n}");
|
|
6
|
+
var styles = {"resetFooter":"_resetFooter_luszr_1"};
|
|
7
|
+
|
|
8
|
+
module.exports = styles;
|
|
9
|
+
//# sourceMappingURL=DateRangePicker.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateRangePicker.module.scss.cjs","sources":["../../../src/components/DateRangePicker/DateRangePicker.module.scss"],"sourcesContent":[".resetFooter {\n display: flex;\n justify-content: flex-end;\n padding: 0;\n margin: 0;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,yGAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._resetFooter_luszr_1 {\n display: flex;\n justify-content: flex-end;\n padding: 0;\n margin: 0;\n}");
|
|
4
|
+
var styles = {"resetFooter":"_resetFooter_luszr_1"};
|
|
5
|
+
|
|
6
|
+
export { styles as default };
|
|
7
|
+
//# sourceMappingURL=DateRangePicker.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateRangePicker.module.scss.js","sources":["../../../src/components/DateRangePicker/DateRangePicker.module.scss"],"sourcesContent":[".resetFooter {\n display: flex;\n justify-content: flex-end;\n padding: 0;\n margin: 0;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,yGAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}
|
|
@@ -4,14 +4,23 @@ import { ComparePreviousPeriodProps } from './components/ComparePreviousPeriod';
|
|
|
4
4
|
import { SelectOption } from '../Select/Select';
|
|
5
5
|
import { DateValidationProps } from '../DateInputField/types';
|
|
6
6
|
export type DateRangePickerProps = {
|
|
7
|
+
/** Inline styles */
|
|
7
8
|
style?: CSSProperties;
|
|
9
|
+
/** Additional CSS class name */
|
|
8
10
|
className?: string;
|
|
11
|
+
/** Whether the date range picker is disabled */
|
|
9
12
|
isDisabled?: boolean;
|
|
13
|
+
/** Whether to show the date presets dropdown (e.g. "Last 7 days") */
|
|
10
14
|
showDatePresets?: boolean;
|
|
15
|
+
/** Callback to render a Reset button. When provided, a Reset action appears below the calendar */
|
|
11
16
|
onReset?: () => void;
|
|
17
|
+
/** The currently selected preset option */
|
|
12
18
|
selectedPreset: SelectOption;
|
|
19
|
+
/** Callback fired when a preset is selected */
|
|
13
20
|
setSelectedPreset: (selected: SelectOption) => void;
|
|
21
|
+
/** The currently selected date range (start and end) */
|
|
14
22
|
selectedRange: DateRange | null;
|
|
23
|
+
/** Callback fired when the date range changes */
|
|
15
24
|
setSelectedRange: (selected: DateRange | null) => void;
|
|
16
25
|
} & PreviousPeriodProps & DateValidationProps & RequiredLabel;
|
|
17
26
|
type RequiredLabel = {
|
|
@@ -20,7 +20,17 @@ const Popover = ({ id: passedId, children, zIndex = index.theme.layers.popup, pl
|
|
|
20
20
|
const { refs, floatingStyles, placement: resolvedPlacement } = react.useFloating({
|
|
21
21
|
elements: { reference: anchorElement },
|
|
22
22
|
placement,
|
|
23
|
-
middleware: [
|
|
23
|
+
middleware: [
|
|
24
|
+
react.flip({ fallbackAxisSideDirection: 'start' }),
|
|
25
|
+
react.shift({ limiter: react.limitShift() }),
|
|
26
|
+
react.size({
|
|
27
|
+
apply({ availableHeight, elements }) {
|
|
28
|
+
Object.assign(elements.floating.style, {
|
|
29
|
+
maxHeight: `${Math.max(0, availableHeight)}px`,
|
|
30
|
+
});
|
|
31
|
+
},
|
|
32
|
+
}),
|
|
33
|
+
],
|
|
24
34
|
whileElementsMounted: react.autoUpdate,
|
|
25
35
|
});
|
|
26
36
|
// Setup popover id to use passed, or generate its' own.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useFloating, autoUpdate, flip, shift, limitShift } from '@floating-ui/react';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { buildClassnames, generateId, assignCssVars } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport popoverStyles from './Popover.module.scss';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up Floating UI positioning\n const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({\n elements: { reference: anchorElement },\n placement,\n middleware: [flip()
|
|
1
|
+
{"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useFloating, autoUpdate, flip, shift, limitShift, size } from '@floating-ui/react';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { buildClassnames, generateId, assignCssVars } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport popoverStyles from './Popover.module.scss';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up Floating UI positioning\n const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({\n elements: { reference: anchorElement },\n placement,\n middleware: [\n flip({ fallbackAxisSideDirection: 'start' }),\n shift({ limiter: limitShift() }),\n size({\n apply({ availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${Math.max(0, availableHeight)}px`,\n });\n },\n }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement: refs.floating.current as HTMLDialogElement | null,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <div\n className={popoverStyles.backdrop}\n style={assignCssVars({ zIndex })}\n onClick={onClose}\n data-testid=\"popover-backdrop\"\n />\n )}\n <dialog\n open\n id={id}\n data-dialog-type=\"popover\"\n data-placement={resolvedPlacement}\n className={buildClassnames([popoverStyles.dialog, className])}\n ref={refs.setFloating}\n style={{\n ...assignCssVars({ zIndex: zIndex + 1 }),\n ...floatingStyles,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...dialogProps}\n >\n {children}\n </dialog>\n </Portal>\n );\n};\n"],"names":["theme","useFloating","flip","shift","limitShift","size","autoUpdate","useMemo","generateId","useUpdateAriaAnchor","useHandleFocus","React","Portal","popoverStyles","assignCssVars","buildClassnames"],"mappings":";;;;;;;;;;;;;;;;;MAWa,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAGA,WAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,SAAS,EACT,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAGC,iBAAW,CAAC;AACzE,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;QACtC,SAAS;AACT,QAAA,UAAU,EAAE;AACV,YAAAC,UAAI,CAAC,EAAE,yBAAyB,EAAE,OAAO,EAAE,CAAC;AAC5C,YAAAC,WAAK,CAAC,EAAE,OAAO,EAAEC,gBAAU,EAAE,EAAE,CAAC;AAChC,YAAAC,UAAI,CAAC;AACH,gBAAA,KAAK,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAA;oBACjC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE;wBACrC,SAAS,EAAE,CAAA,EAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,eAAe,CAAC,CAAA,EAAA,CAAI;AAC/C,qBAAA,CAAC;gBACJ,CAAC;aACF,CAAC;AACH,SAAA;AACD,QAAA,oBAAoB,EAAEC,gBAAU;AACjC,KAAA,CAAC;;AAGF,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,qBAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvEC,uCAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,EAAI;AACnB,IAAA,CAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAGC,6BAAc,CAAC;AACvC,QAAA,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAmC;QAChE,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,cAAc,EAAE,cAAc,EAAA;QACnC,CAAC,cAAc,KACdD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEE,cAAa,CAAC,QAAQ,EACjC,KAAK,EAAEC,2BAAa,CAAC,EAAE,MAAM,EAAE,CAAC,EAChC,OAAO,EAAE,OAAO,EAAA,aAAA,EACJ,kBAAkB,EAAA,CAC9B,CACH;AACD,QAAAH,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAA,IAAA,EACJ,EAAE,EAAE,EAAE,EAAA,kBAAA,EACW,SAAS,EAAA,gBAAA,EACV,iBAAiB,EACjC,SAAS,EAAEI,+BAAe,CAAC,CAACF,cAAa,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAC7D,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;gBACL,GAAGC,2BAAa,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC;AACxC,gBAAA,GAAG,cAAc;AACjB,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;aACpE,EACD,SAAS,EAAE,aAAa,EAAA,GACpB,WAAW,IAEd,QAAQ,CACF,CACF;AAEb;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React__default, { useMemo } from 'react';
|
|
2
|
-
import { useFloating, autoUpdate, flip, shift, limitShift } from '@floating-ui/react';
|
|
2
|
+
import { useFloating, autoUpdate, flip, shift, limitShift, size } from '@floating-ui/react';
|
|
3
3
|
import { Portal } from '../Portal/Portal.js';
|
|
4
4
|
import { theme } from '../../theme/index.js';
|
|
5
5
|
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
@@ -14,7 +14,17 @@ const Popover = ({ id: passedId, children, zIndex = theme.layers.popup, placemen
|
|
|
14
14
|
const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({
|
|
15
15
|
elements: { reference: anchorElement },
|
|
16
16
|
placement,
|
|
17
|
-
middleware: [
|
|
17
|
+
middleware: [
|
|
18
|
+
flip({ fallbackAxisSideDirection: 'start' }),
|
|
19
|
+
shift({ limiter: limitShift() }),
|
|
20
|
+
size({
|
|
21
|
+
apply({ availableHeight, elements }) {
|
|
22
|
+
Object.assign(elements.floating.style, {
|
|
23
|
+
maxHeight: `${Math.max(0, availableHeight)}px`,
|
|
24
|
+
});
|
|
25
|
+
},
|
|
26
|
+
}),
|
|
27
|
+
],
|
|
18
28
|
whileElementsMounted: autoUpdate,
|
|
19
29
|
});
|
|
20
30
|
// Setup popover id to use passed, or generate its' own.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useFloating, autoUpdate, flip, shift, limitShift } from '@floating-ui/react';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { buildClassnames, generateId, assignCssVars } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport popoverStyles from './Popover.module.scss';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up Floating UI positioning\n const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({\n elements: { reference: anchorElement },\n placement,\n middleware: [flip()
|
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useFloating, autoUpdate, flip, shift, limitShift, size } from '@floating-ui/react';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { buildClassnames, generateId, assignCssVars } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport popoverStyles from './Popover.module.scss';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up Floating UI positioning\n const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({\n elements: { reference: anchorElement },\n placement,\n middleware: [\n flip({ fallbackAxisSideDirection: 'start' }),\n shift({ limiter: limitShift() }),\n size({\n apply({ availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${Math.max(0, availableHeight)}px`,\n });\n },\n }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement: refs.floating.current as HTMLDialogElement | null,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <div\n className={popoverStyles.backdrop}\n style={assignCssVars({ zIndex })}\n onClick={onClose}\n data-testid=\"popover-backdrop\"\n />\n )}\n <dialog\n open\n id={id}\n data-dialog-type=\"popover\"\n data-placement={resolvedPlacement}\n className={buildClassnames([popoverStyles.dialog, className])}\n ref={refs.setFloating}\n style={{\n ...assignCssVars({ zIndex: zIndex + 1 }),\n ...floatingStyles,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...dialogProps}\n >\n {children}\n </dialog>\n </Portal>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;MAWa,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,SAAS,EACT,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,WAAW,CAAC;AACzE,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;QACtC,SAAS;AACT,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,CAAC,EAAE,yBAAyB,EAAE,OAAO,EAAE,CAAC;AAC5C,YAAA,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC;AAChC,YAAA,IAAI,CAAC;AACH,gBAAA,KAAK,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAA;oBACjC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE;wBACrC,SAAS,EAAE,CAAA,EAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,eAAe,CAAC,CAAA,EAAA,CAAI;AAC/C,qBAAA,CAAC;gBACJ,CAAC;aACF,CAAC;AACH,SAAA;AACD,QAAA,oBAAoB,EAAE,UAAU;AACjC,KAAA,CAAC;;AAGF,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvE,mBAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,EAAI;AACnB,IAAA,CAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,cAAc,CAAC;AACvC,QAAA,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAmC;QAChE,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,cAAc,EAAE,cAAc,EAAA;QACnC,CAAC,cAAc,KACdA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,aAAa,CAAC,QAAQ,EACjC,KAAK,EAAE,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC,EAChC,OAAO,EAAE,OAAO,EAAA,aAAA,EACJ,kBAAkB,EAAA,CAC9B,CACH;AACD,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAA,IAAA,EACJ,EAAE,EAAE,EAAE,EAAA,kBAAA,EACW,SAAS,EAAA,gBAAA,EACV,iBAAiB,EACjC,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAC7D,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;gBACL,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC;AACxC,gBAAA,GAAG,cAAc;AACjB,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;aACpE,EACD,SAAS,EAAE,aAAa,EAAA,GACpB,WAAW,IAEd,QAAQ,CACF,CACF;AAEb;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veeqo/ui",
|
|
3
|
-
"version": "15.3.
|
|
3
|
+
"version": "15.3.4",
|
|
4
4
|
"description": "New optimised component library for Veeqo.",
|
|
5
5
|
"author": "Robert Wealthall",
|
|
6
6
|
"license": "ISC",
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"lint": "eslint --quiet src/* --ext .ts,.tsx && stylelint 'src/**/*.scss'",
|
|
36
36
|
"lint:fix": "eslint --quiet src/* --ext .ts,.tsx --fix && stylelint 'src/**/*.scss' --fix",
|
|
37
37
|
"emit-declarations": "echo 'Emit declarations is no longer required for buildstep. Deprecated.'",
|
|
38
|
+
"pre-npm-pretty-much": "node scripts/brazil-rename.cjs",
|
|
38
39
|
"prepublishOnly": "npm run test && npm run build",
|
|
39
40
|
"patch": "npm version patch && npm run changelog:update",
|
|
40
41
|
"minor": "npm version minor && npm run changelog:update",
|
|
@@ -52,6 +53,9 @@
|
|
|
52
53
|
"issueUrl": "https://sim.amazon.com/issues/{id}",
|
|
53
54
|
"issuePattern": "VQCL-[0-9]+"
|
|
54
55
|
},
|
|
56
|
+
"npm-pretty-much": {
|
|
57
|
+
"allowUnsafeName": "Renamed to @amzn/veeqo-ui via pre-npm-pretty-much hook; published externally as @veeqo/ui on npmjs.com"
|
|
58
|
+
},
|
|
55
59
|
"devDependencies": {
|
|
56
60
|
"@babel/eslint-parser": "^7.22.15",
|
|
57
61
|
"@figma-export/cli": "^6.2.2",
|
|
@@ -147,6 +151,9 @@
|
|
|
147
151
|
"jest-environment-jsdom": {
|
|
148
152
|
"nwsapi": "2.2.7"
|
|
149
153
|
},
|
|
154
|
+
"@types/jest-axe": {
|
|
155
|
+
"axe-core": "4.0.0"
|
|
156
|
+
},
|
|
150
157
|
"@figma/code-connect": {
|
|
151
158
|
"typescript": "$typescript"
|
|
152
159
|
}
|