@veeqo/ui 15.3.3 → 15.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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/hoc/withLabels/withLabels.cjs +6 -8
- package/dist/hoc/withLabels/withLabels.cjs.map +1 -1
- package/dist/hoc/withLabels/withLabels.js +6 -8
- package/dist/hoc/withLabels/withLabels.js.map +1 -1
- package/package.json +8 -2
|
@@ -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 = {
|
|
@@ -3,11 +3,10 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var FlexCol = require('../../components/Flex/FlexCol/FlexCol.cjs');
|
|
5
5
|
var FlexRow = require('../../components/Flex/FlexRow/FlexRow.cjs');
|
|
6
|
+
var MiniAlert = require('../../components/Alerts/MiniAlert/MiniAlert.cjs');
|
|
6
7
|
var Text = require('../../components/Text/Text.cjs');
|
|
7
8
|
var useId = require('../../hooks/useId.cjs');
|
|
8
|
-
var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
|
|
9
9
|
var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
|
|
10
|
-
var LockIcon = require('../../icons/design-system/components/LockIcon.cjs');
|
|
11
10
|
var index = require('../../theme/index.cjs');
|
|
12
11
|
var BlockTooltip = require('./BlockTooltip.cjs');
|
|
13
12
|
var withLabels_module = require('./withLabels.module.scss.cjs');
|
|
@@ -29,12 +28,11 @@ const withLabels = (Component) => {
|
|
|
29
28
|
React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
|
|
30
29
|
hint && (React__default.default.createElement(Text.Text, { variant: "hintText", as: "span", className: withLabels_module.hint, id: `${componentId}-hint` }, hint)),
|
|
31
30
|
React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }),
|
|
32
|
-
error && (React__default.default.createElement(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
React__default.default.createElement(Text.Text, { variant: "bodyBold", as: "span" }, disabledMessage)))));
|
|
31
|
+
error && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert",
|
|
32
|
+
// Overcomplicated but title only accepts string & titleSlot skips <Text> wrapper (wrong font size).
|
|
33
|
+
// Use both with typeof to get correct sizing for strings and support JSX errors.
|
|
34
|
+
title: typeof error === 'string' ? error : undefined, titleSlot: typeof error !== 'string' ? error : undefined })),
|
|
35
|
+
disabledMessage && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: typeof disabledMessage === 'string' ? disabledMessage : undefined, titleSlot: typeof disabledMessage !== 'string' ? disabledMessage : undefined }))));
|
|
38
36
|
});
|
|
39
37
|
ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
|
|
40
38
|
return ComponentWithLabels;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport {
|
|
1
|
+
{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <FlexCol className={styles.rootStack}>\n <FlexRow>\n <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Text>\n {(tooltip || tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && (\n <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n {hint}\n </Text>\n )}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <MiniAlert\n id={`${componentId}-error`}\n variant=\"error\"\n isBold={false}\n role=\"alert\"\n // Overcomplicated but title only accepts string & titleSlot skips <Text> wrapper (wrong font size).\n // Use both with typeof to get correct sizing for strings and support JSX errors.\n title={typeof error === 'string' ? error : undefined}\n titleSlot={typeof error !== 'string' ? error : undefined}\n />\n )}\n {disabledMessage && (\n <MiniAlert\n id={`${componentId}-disabled`}\n isBold={false}\n title={typeof disabledMessage === 'string' ? disabledMessage : undefined}\n titleSlot={typeof disabledMessage !== 'string' ? disabledMessage : undefined}\n />\n )}\n </FlexCol>\n );\n },\n );\n\n ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","FlexCol","styles","FlexRow","Text","BlockTooltip","HelpIcon","theme","MiniAlert"],"mappings":"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"}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import React__default, { forwardRef } from 'react';
|
|
2
2
|
import { FlexCol } from '../../components/Flex/FlexCol/FlexCol.js';
|
|
3
3
|
import { FlexRow } from '../../components/Flex/FlexRow/FlexRow.js';
|
|
4
|
+
import { MiniAlert } from '../../components/Alerts/MiniAlert/MiniAlert.js';
|
|
4
5
|
import { Text } from '../../components/Text/Text.js';
|
|
5
6
|
import { useId } from '../../hooks/useId.js';
|
|
6
|
-
import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
|
|
7
7
|
import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
|
|
8
|
-
import { ReactComponent as LockIcon } from '../../icons/design-system/components/LockIcon.js';
|
|
9
8
|
import { theme } from '../../theme/index.js';
|
|
10
9
|
import { BlockTooltip } from './BlockTooltip.js';
|
|
11
10
|
import labelStyles from './withLabels.module.scss.js';
|
|
@@ -23,12 +22,11 @@ const withLabels = (Component) => {
|
|
|
23
22
|
React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
|
|
24
23
|
hint && (React__default.createElement(Text, { variant: "hintText", as: "span", className: labelStyles.hint, id: `${componentId}-hint` }, hint)),
|
|
25
24
|
React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }),
|
|
26
|
-
error && (React__default.createElement(
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
React__default.createElement(Text, { variant: "bodyBold", as: "span" }, disabledMessage)))));
|
|
25
|
+
error && (React__default.createElement(MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert",
|
|
26
|
+
// Overcomplicated but title only accepts string & titleSlot skips <Text> wrapper (wrong font size).
|
|
27
|
+
// Use both with typeof to get correct sizing for strings and support JSX errors.
|
|
28
|
+
title: typeof error === 'string' ? error : undefined, titleSlot: typeof error !== 'string' ? error : undefined })),
|
|
29
|
+
disabledMessage && (React__default.createElement(MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: typeof disabledMessage === 'string' ? disabledMessage : undefined, titleSlot: typeof disabledMessage !== 'string' ? disabledMessage : undefined }))));
|
|
32
30
|
});
|
|
33
31
|
ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
|
|
34
32
|
return ComponentWithLabels;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport {
|
|
1
|
+
{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <FlexCol className={styles.rootStack}>\n <FlexRow>\n <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Text>\n {(tooltip || tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && (\n <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n {hint}\n </Text>\n )}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <MiniAlert\n id={`${componentId}-error`}\n variant=\"error\"\n isBold={false}\n role=\"alert\"\n // Overcomplicated but title only accepts string & titleSlot skips <Text> wrapper (wrong font size).\n // Use both with typeof to get correct sizing for strings and support JSX errors.\n title={typeof error === 'string' ? error : undefined}\n titleSlot={typeof error !== 'string' ? error : undefined}\n />\n )}\n {disabledMessage && (\n <MiniAlert\n id={`${componentId}-disabled`}\n isBold={false}\n title={typeof disabledMessage === 'string' ? disabledMessage : undefined}\n titleSlot={typeof disabledMessage !== 'string' ? disabledMessage : undefined}\n />\n )}\n </FlexCol>\n );\n },\n );\n\n ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n return ComponentWithLabels;\n};\n"],"names":["React","styles"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veeqo/ui",
|
|
3
|
-
"version": "15.
|
|
3
|
+
"version": "15.4.0",
|
|
4
4
|
"description": "New optimised component library for Veeqo.",
|
|
5
5
|
"author": "Robert Wealthall",
|
|
6
6
|
"license": "ISC",
|
|
@@ -35,7 +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
|
-
"prepublishOnly": "npm run test && npm run build",
|
|
38
|
+
"prepublishOnly": "node scripts/internal-publish-rename.cjs && npm run test && npm run build",
|
|
39
39
|
"patch": "npm version patch && npm run changelog:update",
|
|
40
40
|
"minor": "npm version minor && npm run changelog:update",
|
|
41
41
|
"major": "npm version major && npm run changelog:update",
|
|
@@ -52,6 +52,9 @@
|
|
|
52
52
|
"issueUrl": "https://sim.amazon.com/issues/{id}",
|
|
53
53
|
"issuePattern": "VQCL-[0-9]+"
|
|
54
54
|
},
|
|
55
|
+
"npm-pretty-much": {
|
|
56
|
+
"allowUnsafeName": "Renamed to @amzn/veeqo-ui via prepublishOnly for internal builds; published externally as @veeqo/ui on npmjs.com"
|
|
57
|
+
},
|
|
55
58
|
"devDependencies": {
|
|
56
59
|
"@babel/eslint-parser": "^7.22.15",
|
|
57
60
|
"@figma-export/cli": "^6.2.2",
|
|
@@ -147,6 +150,9 @@
|
|
|
147
150
|
"jest-environment-jsdom": {
|
|
148
151
|
"nwsapi": "2.2.7"
|
|
149
152
|
},
|
|
153
|
+
"@types/jest-axe": {
|
|
154
|
+
"axe-core": "4.0.0"
|
|
155
|
+
},
|
|
150
156
|
"@figma/code-connect": {
|
|
151
157
|
"typescript": "$typescript"
|
|
152
158
|
}
|