@cloudscape-design/components 3.0.87 → 3.0.88
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/checkbox/internal.d.ts +0 -1
- package/checkbox/internal.d.ts.map +1 -1
- package/checkbox/internal.js +9 -11
- package/checkbox/internal.js.map +1 -1
- package/date-picker/index.js +1 -1
- package/date-picker/index.js.map +1 -1
- package/date-picker/styles.css.js +7 -6
- package/date-picker/styles.scoped.css +14 -7
- package/date-picker/styles.selectors.js +7 -6
- package/date-range-picker/dropdown.js +1 -1
- package/date-range-picker/dropdown.js.map +1 -1
- package/date-range-picker/styles.css.js +37 -36
- package/date-range-picker/styles.scoped.css +48 -44
- package/date-range-picker/styles.selectors.js +37 -36
- package/hotspot/index.d.ts.map +1 -1
- package/hotspot/index.js +2 -2
- package/hotspot/index.js.map +1 -1
- package/internal/components/abstract-switch/index.d.ts +2 -2
- package/internal/components/abstract-switch/index.d.ts.map +1 -1
- package/internal/components/abstract-switch/index.js +2 -9
- package/internal/components/abstract-switch/index.js.map +1 -1
- package/internal/components/abstract-switch/styles.css.js +12 -12
- package/internal/components/abstract-switch/styles.scoped.css +20 -19
- package/internal/components/abstract-switch/styles.selectors.js +12 -12
- package/internal/components/focus-lock/index.d.ts +2 -1
- package/internal/components/focus-lock/index.d.ts.map +1 -1
- package/internal/components/focus-lock/index.js +2 -2
- package/internal/components/focus-lock/index.js.map +1 -1
- package/internal/components/screenreader-only/index.js +1 -1
- package/internal/components/screenreader-only/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/package.json +1 -1
- package/property-filter/controller.d.ts +4 -7
- package/property-filter/controller.d.ts.map +1 -1
- package/property-filter/controller.js +3 -2
- package/property-filter/controller.js.map +1 -1
- package/property-filter/filter-options.d.ts +3 -0
- package/property-filter/filter-options.d.ts.map +1 -0
- package/property-filter/filter-options.js +31 -0
- package/property-filter/filter-options.js.map +1 -0
- package/property-filter/index.d.ts.map +1 -1
- package/property-filter/index.js +0 -5
- package/property-filter/index.js.map +1 -1
- package/property-filter/property-filter-autosuggest.d.ts.map +1 -1
- package/property-filter/property-filter-autosuggest.js +9 -7
- package/property-filter/property-filter-autosuggest.js.map +1 -1
- package/property-filter/styles.css.js +33 -32
- package/property-filter/styles.scoped.css +38 -34
- package/property-filter/styles.selectors.js +33 -32
- package/radio-group/radio-button.d.ts +3 -3
- package/radio-group/radio-button.d.ts.map +1 -1
- package/radio-group/radio-button.js +18 -6
- package/radio-group/radio-button.js.map +1 -1
- package/select/parts/trigger.d.ts.map +1 -1
- package/select/parts/trigger.js +8 -2
- package/select/parts/trigger.js.map +1 -1
- package/table/selection-control/index.js +1 -1
- package/table/selection-control/index.js.map +1 -1
- package/tiles/internal.d.ts.map +1 -1
- package/tiles/internal.js +2 -9
- package/tiles/internal.js.map +1 -1
- package/tiles/tile.d.ts +12 -0
- package/tiles/tile.d.ts.map +1 -0
- package/tiles/tile.js +27 -0
- package/tiles/tile.js.map +1 -0
- package/toggle/internal.d.ts.map +1 -1
- package/toggle/internal.js +7 -1
- package/toggle/internal.js.map +1 -1
package/checkbox/internal.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ import React from 'react';
|
|
|
2
2
|
import { CheckboxProps } from './interfaces';
|
|
3
3
|
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
4
4
|
interface InternalProps extends CheckboxProps, InternalBaseComponentProps {
|
|
5
|
-
withoutLabel?: boolean;
|
|
6
5
|
tabIndex?: -1;
|
|
7
6
|
}
|
|
8
7
|
declare const InternalCheckbox: React.ForwardRefExoticComponent<InternalProps & React.RefAttributes<CheckboxProps.Ref>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,UAAU,aAAc,SAAQ,aAAa,EAAE,0BAA0B;IACvE,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,UAAU,aAAc,SAAQ,aAAa,EAAE,0BAA0B;IACvE,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CACf;AAED,QAAA,MAAM,gBAAgB,yFAuErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
package/checkbox/internal.js
CHANGED
|
@@ -11,7 +11,7 @@ import styles from './styles.css.js';
|
|
|
11
11
|
import CheckboxIcon from '../internal/components/checkbox-icon';
|
|
12
12
|
import { useFormFieldContext } from '../internal/context/form-field-context';
|
|
13
13
|
var InternalCheckbox = React.forwardRef(function (_a, ref) {
|
|
14
|
-
var controlId = _a.controlId, name = _a.name, checked = _a.checked, disabled = _a.disabled, indeterminate = _a.indeterminate, children = _a.children, description = _a.description, ariaLabel = _a.ariaLabel, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange,
|
|
14
|
+
var controlId = _a.controlId, name = _a.name, checked = _a.checked, disabled = _a.disabled, indeterminate = _a.indeterminate, children = _a.children, description = _a.description, ariaLabel = _a.ariaLabel, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, tabIndex = _a.tabIndex, __internalRootRef = _a.__internalRootRef, rest = __rest(_a, ["controlId", "name", "checked", "disabled", "indeterminate", "children", "description", "ariaLabel", "onFocus", "onBlur", "onChange", "tabIndex", "__internalRootRef"]);
|
|
15
15
|
var _b = useFormFieldContext(rest), ariaDescribedby = _b.ariaDescribedby, ariaLabelledby = _b.ariaLabelledby;
|
|
16
16
|
var baseProps = getBaseProps(rest);
|
|
17
17
|
var checkboxRef = useRef(null);
|
|
@@ -21,17 +21,15 @@ var InternalCheckbox = React.forwardRef(function (_a, ref) {
|
|
|
21
21
|
checkboxRef.current.indeterminate = Boolean(indeterminate);
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
-
return (React.createElement(AbstractSwitch, __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: styles['checkbox-control'], outlineClassName: styles.outline, controlId: controlId, disabled: disabled, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, nativeControl: function (nativeControlProps) { return (React.createElement("input", __assign({}, nativeControlProps, { ref: checkboxRef, type: "checkbox", checked: checked, name: name, tabIndex: tabIndex, onFocus:
|
|
24
|
+
return (React.createElement(AbstractSwitch, __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: styles['checkbox-control'], outlineClassName: styles.outline, controlId: controlId, disabled: disabled, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, nativeControl: function (nativeControlProps) { return (React.createElement("input", __assign({}, nativeControlProps, { ref: checkboxRef, type: "checkbox", checked: checked, name: name, tabIndex: tabIndex, onFocus: function () { return fireNonCancelableEvent(onFocus); }, onBlur: function () { return fireNonCancelableEvent(onBlur); },
|
|
25
25
|
// empty handler to suppress React controllability warning
|
|
26
|
-
onChange: function () { }, onClick:
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
onChange
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false });
|
|
34
|
-
}) }))); }, styledControl: React.createElement(CheckboxIcon, { checked: checked, indeterminate: indeterminate, disabled: disabled }), withoutLabel: withoutLabel, __internalRootRef: __internalRootRef })));
|
|
26
|
+
onChange: function () { } }))); }, onClick: function () {
|
|
27
|
+
var _a;
|
|
28
|
+
(_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
29
|
+
fireNonCancelableEvent(onChange,
|
|
30
|
+
// for deterministic transitions "indeterminate" -> "checked" -> "unchecked"
|
|
31
|
+
indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false });
|
|
32
|
+
}, styledControl: React.createElement(CheckboxIcon, { checked: checked, indeterminate: indeterminate, disabled: disabled }), __internalRootRef: __internalRootRef })));
|
|
35
33
|
});
|
|
36
34
|
export default InternalCheckbox;
|
|
37
35
|
//# sourceMappingURL=internal.js.map
|
package/checkbox/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,cAAc,MAAM,wCAAwC,CAAC;AAEpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,MAAM,sCAAsC,CAAC;AAEhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect, useRef } from 'react';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { CheckboxProps } from './interfaces';\nimport styles from './styles.css.js';\nimport CheckboxIcon from '../internal/components/checkbox-icon';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\n\ninterface InternalProps extends CheckboxProps, InternalBaseComponentProps {\n tabIndex?: -1;\n}\n\nconst InternalCheckbox = React.forwardRef<CheckboxProps.Ref, InternalProps>(\n (\n {\n controlId,\n name,\n checked,\n disabled,\n indeterminate,\n children,\n description,\n ariaLabel,\n onFocus,\n onBlur,\n onChange,\n tabIndex,\n __internalRootRef,\n ...rest\n },\n ref\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n useForwardFocus(ref, checkboxRef);\n useEffect(() => {\n if (checkboxRef.current) {\n checkboxRef.current.indeterminate = Boolean(indeterminate);\n }\n });\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={styles['checkbox-control']}\n outlineClassName={styles.outline}\n controlId={controlId}\n disabled={disabled}\n label={children}\n description={description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n nativeControl={nativeControlProps => (\n <input\n {...nativeControlProps}\n ref={checkboxRef}\n type=\"checkbox\"\n checked={checked}\n name={name}\n tabIndex={tabIndex}\n onFocus={() => fireNonCancelableEvent(onFocus)}\n onBlur={() => fireNonCancelableEvent(onBlur)}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n />\n )}\n onClick={() => {\n checkboxRef.current?.focus();\n fireNonCancelableEvent(\n onChange,\n // for deterministic transitions \"indeterminate\" -> \"checked\" -> \"unchecked\"\n indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false }\n );\n }}\n styledControl={<CheckboxIcon checked={checked} indeterminate={indeterminate} disabled={disabled} />}\n __internalRootRef={__internalRootRef}\n />\n );\n }\n);\n\nexport default InternalCheckbox;\n"]}
|
package/date-picker/index.js
CHANGED
|
@@ -77,7 +77,7 @@ var DatePicker = React.forwardRef(function (_a, ref) {
|
|
|
77
77
|
// prevent currently focused element from losing it
|
|
78
78
|
event.preventDefault();
|
|
79
79
|
};
|
|
80
|
-
return (React.createElement("div", __assign({}, baseProps, { ref: mergedRef, onKeyDown: !disabled && !readOnly ? onWrapperKeyDownHandler : undefined }), disabled || readOnly ? (trigger) : (React.createElement(Dropdown, { stretchWidth: true, stretchHeight: true, open: isDropDownOpen, onDropdownClose: onDropdownCloseHandler, onMouseDown: handleMouseDown, trigger: trigger, expandToViewport: expandToViewport, scrollable: false, dropdownId: dropdownId }, isDropDownOpen && (React.createElement(FocusLock, { autoFocus: true },
|
|
80
|
+
return (React.createElement("div", __assign({}, baseProps, { ref: mergedRef, onKeyDown: !disabled && !readOnly ? onWrapperKeyDownHandler : undefined }), disabled || readOnly ? (trigger) : (React.createElement(Dropdown, { stretchWidth: true, stretchHeight: true, open: isDropDownOpen, onDropdownClose: onDropdownCloseHandler, onMouseDown: handleMouseDown, trigger: trigger, expandToViewport: expandToViewport, scrollable: false, dropdownId: dropdownId }, isDropDownOpen && (React.createElement(FocusLock, { className: styles['focus-lock'], autoFocus: true },
|
|
81
81
|
React.createElement("div", __assign({}, focusVisible, { tabIndex: 0, className: styles.calendar, role: "dialog", "aria-modal": "true" }),
|
|
82
82
|
React.createElement(InternalCalendar, { value: value, onChange: function (e) {
|
|
83
83
|
var _a;
|
package/date-picker/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/date-picker/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { Ref, useCallback, useRef, useState } from 'react';\nimport styles from './styles.css.js';\nimport { DatePickerProps } from './interfaces';\nimport InternalCalendar from '../calendar/internal';\nimport { normalizeLocale } from '../calendar/utils/locales';\nimport { getDateLabel, renderMonthAndYear } from '../calendar/utils/intl';\nimport { InputProps } from '../input/interfaces';\nimport { KeyCode } from '../internal/keycode';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport Dropdown from '../internal/components/dropdown';\nimport InternalDateInput from '../date-input/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name.js';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { useFocusTracker } from '../internal/hooks/use-focus-tracker.js';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport FocusLock from '../internal/components/focus-lock';\nimport useFocusVisible from '../internal/hooks/focus-visible/index.js';\nimport { parseDate } from '../internal/utils/date-time';\nimport LiveRegion from '../internal/components/live-region';\nimport { useFormFieldContext } from '../contexts/form-field.js';\n\nexport { DatePickerProps };\n\nconst DatePicker = React.forwardRef(\n (\n {\n locale = '',\n startOfWeek,\n isDateEnabled,\n nextMonthAriaLabel,\n previousMonthAriaLabel,\n todayAriaLabel,\n placeholder = '',\n value = '',\n readOnly = false,\n disabled = false,\n onBlur,\n autoFocus = false,\n onChange,\n onFocus,\n name,\n ariaLabel,\n ariaRequired,\n controlId,\n invalid,\n openCalendarAriaLabel,\n expandToViewport,\n ...rest\n }: DatePickerProps,\n ref: Ref<DatePickerProps.Ref>\n ) => {\n const { __internalRootRef } = useBaseComponent('DatePicker');\n checkControlled('DatePicker', 'value', value, 'onChange', onChange);\n\n const baseProps = getBaseProps(rest);\n const [isDropDownOpen, setIsDropDownOpen] = useState<boolean>(false);\n const normalizedLocale = normalizeLocale('DatePicker', locale);\n const focusVisible = useFocusVisible();\n const { ariaLabelledby, ariaDescribedby } = useFormFieldContext(rest);\n\n const internalInputRef = useRef<HTMLInputElement>(null);\n const buttonRef = useRef<ButtonProps.Ref>(null);\n useForwardFocus(ref, internalInputRef);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const dropdownId = useUniqueId('calender');\n const calendarDescriptionId = useUniqueId('calendar-description-');\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n\n useFocusTracker({ rootRef, onBlur, onFocus, viewportId: expandToViewport ? dropdownId : '' });\n\n const onDropdownCloseHandler = useCallback(() => setIsDropDownOpen(false), [setIsDropDownOpen]);\n\n const onButtonClickHandler = () => {\n if (!isDropDownOpen) {\n setIsDropDownOpen(true);\n }\n };\n\n const onWrapperKeyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (event.keyCode === KeyCode.escape && isDropDownOpen) {\n buttonRef.current?.focus();\n setIsDropDownOpen(false);\n }\n };\n\n const onInputChangeHandler: InputProps['onChange'] = event => {\n fireNonCancelableEvent(onChange, { value: event.detail.value });\n };\n\n const onInputBlurHandler: InputProps['onBlur'] = () => {\n if (!isDropDownOpen) {\n setIsDropDownOpen(false);\n }\n };\n\n // Set displayed date to value if defined or to current date otherwise.\n const parsedValue = value && value.length >= 4 ? parseDate(value) : null;\n const baseDate = parsedValue || new Date();\n\n const trigger = (\n <div className={styles['date-picker-trigger']}>\n <div className={styles['date-picker-input']}>\n <InternalDateInput\n name={name}\n invalid={invalid}\n controlId={controlId}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n ariaLabel={ariaLabel}\n ariaRequired={ariaRequired}\n value={value}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onInputChangeHandler}\n onBlur={onInputBlurHandler}\n placeholder={placeholder}\n ref={internalInputRef}\n autoFocus={autoFocus}\n />\n </div>\n <div>\n <InternalButton\n iconName=\"calendar\"\n className={styles['open-calendar-button']}\n onClick={onButtonClickHandler}\n ref={buttonRef}\n ariaLabel={\n openCalendarAriaLabel &&\n openCalendarAriaLabel(value.length === 10 ? getDateLabel(normalizedLocale, parsedValue!) : null)\n }\n disabled={disabled || readOnly}\n formAction=\"none\"\n />\n </div>\n </div>\n );\n\n baseProps.className = clsx(baseProps.className, styles.root, styles['date-picker-container']);\n\n const handleMouseDown = (event: React.MouseEvent) => {\n // prevent currently focused element from losing it\n event.preventDefault();\n };\n\n return (\n <div {...baseProps} ref={mergedRef} onKeyDown={!disabled && !readOnly ? onWrapperKeyDownHandler : undefined}>\n {disabled || readOnly ? (\n trigger\n ) : (\n <Dropdown\n stretchWidth={true}\n stretchHeight={true}\n open={isDropDownOpen}\n onDropdownClose={onDropdownCloseHandler}\n onMouseDown={handleMouseDown}\n trigger={trigger}\n expandToViewport={expandToViewport}\n scrollable={false}\n dropdownId={dropdownId}\n >\n {isDropDownOpen && (\n <FocusLock autoFocus={true}>\n <div {...focusVisible} tabIndex={0} className={styles.calendar} role=\"dialog\" aria-modal=\"true\">\n <InternalCalendar\n value={value}\n onChange={e => {\n fireNonCancelableEvent(onChange, e.detail);\n buttonRef?.current?.focus();\n setIsDropDownOpen(false);\n }}\n locale={normalizedLocale}\n startOfWeek={startOfWeek}\n ariaDescribedby={calendarDescriptionId}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n isDateEnabled={isDateEnabled}\n todayAriaLabel={todayAriaLabel}\n nextMonthAriaLabel={nextMonthAriaLabel}\n previousMonthAriaLabel={previousMonthAriaLabel}\n />\n <LiveRegion id={calendarDescriptionId}>{renderMonthAndYear(normalizedLocale, baseDate)}</LiveRegion>\n </div>\n </FocusLock>\n )}\n </Dropdown>\n )}\n </div>\n );\n }\n);\n\napplyDisplayName(DatePicker, 'DatePicker');\nexport default DatePicker;\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/date-picker/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAO,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE1E,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AACvD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,eAAe,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,eAAe,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAIhE,IAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACjC,UACE,EAuBkB,EAClB,GAA6B;IAvB3B,IAAA,cAAW,EAAX,MAAM,mBAAG,EAAE,KAAA,EACX,WAAW,iBAAA,EACX,aAAa,mBAAA,EACb,kBAAkB,wBAAA,EAClB,sBAAsB,4BAAA,EACtB,cAAc,oBAAA,EACd,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KAAA,EAChB,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,MAAM,YAAA,EACN,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,OAAO,aAAA,EACP,qBAAqB,2BAAA,EACrB,gBAAgB,sBAAA,EACb,IAAI,cAtBT,oTAuBC,CADQ;IAID,IAAA,iBAAiB,GAAK,gBAAgB,CAAC,YAAY,CAAC,kBAAnC,CAAoC;IAC7D,eAAe,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IAEpE,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAC/B,IAAA,KAAsC,QAAQ,CAAU,KAAK,CAAC,EAA7D,cAAc,QAAA,EAAE,iBAAiB,QAA4B,CAAC;IACrE,IAAM,gBAAgB,GAAG,eAAe,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IAC/D,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACjC,IAAA,KAAsC,mBAAmB,CAAC,IAAI,CAAC,EAA7D,cAAc,oBAAA,EAAE,eAAe,qBAA8B,CAAC;IAEtE,IAAM,gBAAgB,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACxD,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,eAAe,CAAC,GAAG,EAAE,gBAAgB,CAAC,CAAC;IAEvC,IAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,IAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAM,qBAAqB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;IACnE,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IAE3D,eAAe,CAAC,EAAE,OAAO,SAAA,EAAE,MAAM,QAAA,EAAE,OAAO,SAAA,EAAE,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE9F,IAAM,sBAAsB,GAAG,WAAW,CAAC,cAAM,OAAA,iBAAiB,CAAC,KAAK,CAAC,EAAxB,CAAwB,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAEhG,IAAM,oBAAoB,GAAG;QAC3B,IAAI,CAAC,cAAc,EAAE;YACnB,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;IACH,CAAC,CAAC;IAEF,IAAM,uBAAuB,GAAG,UAAC,KAA0C;;QACzE,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,MAAM,IAAI,cAAc,EAAE;YACtD,MAAA,SAAS,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC3B,iBAAiB,CAAC,KAAK,CAAC,CAAC;SAC1B;IACH,CAAC,CAAC;IAEF,IAAM,oBAAoB,GAA2B,UAAA,KAAK;QACxD,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAClE,CAAC,CAAC;IAEF,IAAM,kBAAkB,GAAyB;QAC/C,IAAI,CAAC,cAAc,EAAE;YACnB,iBAAiB,CAAC,KAAK,CAAC,CAAC;SAC1B;IACH,CAAC,CAAC;IAEF,uEAAuE;IACvE,IAAM,WAAW,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACzE,IAAM,QAAQ,GAAG,WAAW,IAAI,IAAI,IAAI,EAAE,CAAC;IAE3C,IAAM,OAAO,GAAG,CACd,6BAAK,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC;QAC3C,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC;YACzC,oBAAC,iBAAiB,IAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,oBAAoB,EAC9B,MAAM,EAAE,kBAAkB,EAC1B,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,gBAAgB,EACrB,SAAS,EAAE,SAAS,GACpB,CACE;QACN;YACE,oBAAC,cAAc,IACb,QAAQ,EAAC,UAAU,EACnB,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EACzC,OAAO,EAAE,oBAAoB,EAC7B,GAAG,EAAE,SAAS,EACd,SAAS,EACP,qBAAqB;oBACrB,qBAAqB,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,gBAAgB,EAAE,WAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAElG,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,UAAU,EAAC,MAAM,GACjB,CACE,CACF,CACP,CAAC;IAEF,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAE9F,IAAM,eAAe,GAAG,UAAC,KAAuB;QAC9C,mDAAmD;QACnD,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACL,wCAAS,SAAS,IAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,SAAS,KACxG,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,CACtB,OAAO,CACR,CAAC,CAAC,CAAC,CACF,oBAAC,QAAQ,IACP,YAAY,EAAE,IAAI,EAClB,aAAa,EAAE,IAAI,EACnB,IAAI,EAAE,cAAc,EACpB,eAAe,EAAE,sBAAsB,EACvC,WAAW,EAAE,eAAe,EAC5B,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,IAErB,cAAc,IAAI,CACjB,oBAAC,SAAS,IAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,EAAE,SAAS,EAAE,IAAI;QACzD,wCAAS,YAAY,IAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ,gBAAY,MAAM;YAC7F,oBAAC,gBAAgB,IACf,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAA,CAAC;;oBACT,sBAAsB,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;oBAC3C,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;oBAC5B,iBAAiB,CAAC,KAAK,CAAC,CAAC;gBAC3B,CAAC,EACD,MAAM,EAAE,gBAAgB,EACxB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,qBAAqB,EACtC,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,kBAAkB,EAAE,kBAAkB,EACtC,sBAAsB,EAAE,sBAAsB,GAC9C;YACF,oBAAC,UAAU,IAAC,EAAE,EAAE,qBAAqB,IAAG,kBAAkB,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAc,CAChG,CACI,CACb,CACQ,CACZ,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAC3C,eAAe,UAAU,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { Ref, useCallback, useRef, useState } from 'react';\nimport styles from './styles.css.js';\nimport { DatePickerProps } from './interfaces';\nimport InternalCalendar from '../calendar/internal';\nimport { normalizeLocale } from '../calendar/utils/locales';\nimport { getDateLabel, renderMonthAndYear } from '../calendar/utils/intl';\nimport { InputProps } from '../input/interfaces';\nimport { KeyCode } from '../internal/keycode';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport Dropdown from '../internal/components/dropdown';\nimport InternalDateInput from '../date-input/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name.js';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { useFocusTracker } from '../internal/hooks/use-focus-tracker.js';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport FocusLock from '../internal/components/focus-lock';\nimport useFocusVisible from '../internal/hooks/focus-visible/index.js';\nimport { parseDate } from '../internal/utils/date-time';\nimport LiveRegion from '../internal/components/live-region';\nimport { useFormFieldContext } from '../contexts/form-field.js';\n\nexport { DatePickerProps };\n\nconst DatePicker = React.forwardRef(\n (\n {\n locale = '',\n startOfWeek,\n isDateEnabled,\n nextMonthAriaLabel,\n previousMonthAriaLabel,\n todayAriaLabel,\n placeholder = '',\n value = '',\n readOnly = false,\n disabled = false,\n onBlur,\n autoFocus = false,\n onChange,\n onFocus,\n name,\n ariaLabel,\n ariaRequired,\n controlId,\n invalid,\n openCalendarAriaLabel,\n expandToViewport,\n ...rest\n }: DatePickerProps,\n ref: Ref<DatePickerProps.Ref>\n ) => {\n const { __internalRootRef } = useBaseComponent('DatePicker');\n checkControlled('DatePicker', 'value', value, 'onChange', onChange);\n\n const baseProps = getBaseProps(rest);\n const [isDropDownOpen, setIsDropDownOpen] = useState<boolean>(false);\n const normalizedLocale = normalizeLocale('DatePicker', locale);\n const focusVisible = useFocusVisible();\n const { ariaLabelledby, ariaDescribedby } = useFormFieldContext(rest);\n\n const internalInputRef = useRef<HTMLInputElement>(null);\n const buttonRef = useRef<ButtonProps.Ref>(null);\n useForwardFocus(ref, internalInputRef);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const dropdownId = useUniqueId('calender');\n const calendarDescriptionId = useUniqueId('calendar-description-');\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n\n useFocusTracker({ rootRef, onBlur, onFocus, viewportId: expandToViewport ? dropdownId : '' });\n\n const onDropdownCloseHandler = useCallback(() => setIsDropDownOpen(false), [setIsDropDownOpen]);\n\n const onButtonClickHandler = () => {\n if (!isDropDownOpen) {\n setIsDropDownOpen(true);\n }\n };\n\n const onWrapperKeyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (event.keyCode === KeyCode.escape && isDropDownOpen) {\n buttonRef.current?.focus();\n setIsDropDownOpen(false);\n }\n };\n\n const onInputChangeHandler: InputProps['onChange'] = event => {\n fireNonCancelableEvent(onChange, { value: event.detail.value });\n };\n\n const onInputBlurHandler: InputProps['onBlur'] = () => {\n if (!isDropDownOpen) {\n setIsDropDownOpen(false);\n }\n };\n\n // Set displayed date to value if defined or to current date otherwise.\n const parsedValue = value && value.length >= 4 ? parseDate(value) : null;\n const baseDate = parsedValue || new Date();\n\n const trigger = (\n <div className={styles['date-picker-trigger']}>\n <div className={styles['date-picker-input']}>\n <InternalDateInput\n name={name}\n invalid={invalid}\n controlId={controlId}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n ariaLabel={ariaLabel}\n ariaRequired={ariaRequired}\n value={value}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onInputChangeHandler}\n onBlur={onInputBlurHandler}\n placeholder={placeholder}\n ref={internalInputRef}\n autoFocus={autoFocus}\n />\n </div>\n <div>\n <InternalButton\n iconName=\"calendar\"\n className={styles['open-calendar-button']}\n onClick={onButtonClickHandler}\n ref={buttonRef}\n ariaLabel={\n openCalendarAriaLabel &&\n openCalendarAriaLabel(value.length === 10 ? getDateLabel(normalizedLocale, parsedValue!) : null)\n }\n disabled={disabled || readOnly}\n formAction=\"none\"\n />\n </div>\n </div>\n );\n\n baseProps.className = clsx(baseProps.className, styles.root, styles['date-picker-container']);\n\n const handleMouseDown = (event: React.MouseEvent) => {\n // prevent currently focused element from losing it\n event.preventDefault();\n };\n\n return (\n <div {...baseProps} ref={mergedRef} onKeyDown={!disabled && !readOnly ? onWrapperKeyDownHandler : undefined}>\n {disabled || readOnly ? (\n trigger\n ) : (\n <Dropdown\n stretchWidth={true}\n stretchHeight={true}\n open={isDropDownOpen}\n onDropdownClose={onDropdownCloseHandler}\n onMouseDown={handleMouseDown}\n trigger={trigger}\n expandToViewport={expandToViewport}\n scrollable={false}\n dropdownId={dropdownId}\n >\n {isDropDownOpen && (\n <FocusLock className={styles['focus-lock']} autoFocus={true}>\n <div {...focusVisible} tabIndex={0} className={styles.calendar} role=\"dialog\" aria-modal=\"true\">\n <InternalCalendar\n value={value}\n onChange={e => {\n fireNonCancelableEvent(onChange, e.detail);\n buttonRef?.current?.focus();\n setIsDropDownOpen(false);\n }}\n locale={normalizedLocale}\n startOfWeek={startOfWeek}\n ariaDescribedby={calendarDescriptionId}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n isDateEnabled={isDateEnabled}\n todayAriaLabel={todayAriaLabel}\n nextMonthAriaLabel={nextMonthAriaLabel}\n previousMonthAriaLabel={previousMonthAriaLabel}\n />\n <LiveRegion id={calendarDescriptionId}>{renderMonthAndYear(normalizedLocale, baseDate)}</LiveRegion>\n </div>\n </FocusLock>\n )}\n </Dropdown>\n )}\n </div>\n );\n }\n);\n\napplyDisplayName(DatePicker, 'DatePicker');\nexport default DatePicker;\n"]}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"date-picker-
|
|
8
|
-
"date-picker-
|
|
9
|
-
"
|
|
4
|
+
"root": "awsui_root_145pa_s6s0p_93",
|
|
5
|
+
"focus-lock": "awsui_focus-lock_145pa_s6s0p_104",
|
|
6
|
+
"calendar": "awsui_calendar_145pa_s6s0p_108",
|
|
7
|
+
"date-picker-container": "awsui_date-picker-container_145pa_s6s0p_121",
|
|
8
|
+
"date-picker-trigger": "awsui_date-picker-trigger_145pa_s6s0p_126",
|
|
9
|
+
"date-picker-input": "awsui_date-picker-input_145pa_s6s0p_130",
|
|
10
|
+
"open-calendar-button": "awsui_open-calendar-button_145pa_s6s0p_135"
|
|
10
11
|
};
|
|
11
12
|
|
|
@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
90
90
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
91
|
SPDX-License-Identifier: Apache-2.0
|
|
92
92
|
*/
|
|
93
|
-
.
|
|
93
|
+
.awsui_root_145pa_s6s0p_93:not(#\9) {
|
|
94
94
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
95
95
|
border-collapse: separate;
|
|
96
96
|
border-spacing: 0;
|
|
@@ -127,30 +127,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
127
127
|
font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
|
|
128
128
|
}
|
|
129
129
|
|
|
130
|
-
.
|
|
130
|
+
.awsui_focus-lock_145pa_s6s0p_104:not(#\9) {
|
|
131
|
+
display: contents;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.awsui_calendar_145pa_s6s0p_108:not(#\9) {
|
|
135
|
+
overflow: auto;
|
|
136
|
+
}
|
|
137
|
+
.awsui_calendar_145pa_s6s0p_108:not(#\9):focus {
|
|
131
138
|
outline: none;
|
|
132
139
|
}
|
|
133
|
-
.
|
|
140
|
+
.awsui_calendar_145pa_s6s0p_108[data-awsui-focus-visible=true]:not(#\9):focus {
|
|
134
141
|
outline: 2px dotted transparent;
|
|
135
142
|
outline-offset: 2px;
|
|
136
143
|
border-radius: var(--border-radius-dropdown-ujknaf, 8px);
|
|
137
144
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
138
145
|
}
|
|
139
146
|
|
|
140
|
-
.awsui_date-picker-
|
|
147
|
+
.awsui_date-picker-container_145pa_s6s0p_121:not(#\9) {
|
|
141
148
|
position: relative;
|
|
142
149
|
max-width: 234px;
|
|
143
150
|
}
|
|
144
151
|
|
|
145
|
-
.awsui_date-picker-
|
|
152
|
+
.awsui_date-picker-trigger_145pa_s6s0p_126:not(#\9) {
|
|
146
153
|
display: flex;
|
|
147
154
|
}
|
|
148
155
|
|
|
149
|
-
.awsui_date-picker-
|
|
156
|
+
.awsui_date-picker-input_145pa_s6s0p_130:not(#\9) {
|
|
150
157
|
padding-right: var(--space-xs-rsr2qu, 8px);
|
|
151
158
|
width: 100%;
|
|
152
159
|
}
|
|
153
160
|
|
|
154
|
-
.awsui_open-calendar-
|
|
161
|
+
.awsui_open-calendar-button_145pa_s6s0p_135:not(#\9) {
|
|
155
162
|
/* used in test-utils */
|
|
156
163
|
}
|
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"date-picker-
|
|
9
|
-
"date-picker-
|
|
10
|
-
"
|
|
5
|
+
"root": "awsui_root_145pa_s6s0p_93",
|
|
6
|
+
"focus-lock": "awsui_focus-lock_145pa_s6s0p_104",
|
|
7
|
+
"calendar": "awsui_calendar_145pa_s6s0p_108",
|
|
8
|
+
"date-picker-container": "awsui_date-picker-container_145pa_s6s0p_121",
|
|
9
|
+
"date-picker-trigger": "awsui_date-picker-trigger_145pa_s6s0p_126",
|
|
10
|
+
"date-picker-input": "awsui_date-picker-input_145pa_s6s0p_130",
|
|
11
|
+
"open-calendar-button": "awsui_open-calendar-button_145pa_s6s0p_135"
|
|
11
12
|
};
|
|
12
13
|
|
|
@@ -68,7 +68,7 @@ export function DateRangePickerDropdown(_a) {
|
|
|
68
68
|
};
|
|
69
69
|
useEffect(function () { var _a; return (_a = scrollableContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, [scrollableContainerRef]);
|
|
70
70
|
return (React.createElement(React.Fragment, null,
|
|
71
|
-
React.createElement(FocusLock, { autoFocus: true },
|
|
71
|
+
React.createElement(FocusLock, { className: styles['focus-lock'], autoFocus: true },
|
|
72
72
|
React.createElement("div", __assign({}, focusVisible, { ref: scrollableContainerRef, className: styles.dropdown, tabIndex: 0, role: "dialog", "aria-modal": "true", "aria-label": i18nStrings.ariaLabel, "aria-labelledby": ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : i18nStrings.ariaLabelledby, "aria-describedby": ariaDescribedby !== null && ariaDescribedby !== void 0 ? ariaDescribedby : i18nStrings.ariaDescribedby }),
|
|
73
73
|
React.createElement("div", { className: clsx(styles['dropdown-content'], (_b = {},
|
|
74
74
|
_b[styles['one-grid']] = isSingleGrid,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/date-range-picker/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { DateRangePickerProps, Focusable } from './interfaces';\nimport Calendar from './calendar';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport FocusLock from '../internal/components/focus-lock';\nimport InternalBox from '../box/internal';\nimport SpaceBetween from '../space-between/index.js';\n\nimport styles from './styles.css.js';\nimport RelativeRangePicker from './relative-range';\nimport ModeSwitcher from './mode-switcher';\nimport clsx from 'clsx';\nimport InternalAlert from '../alert/internal';\nimport LiveRegion from '../internal/components/live-region';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { fillMissingTime, getDefaultMode } from './utils';\n\nexport const VALID_RANGE: DateRangePickerProps.ValidRangeResult = { valid: true };\n\nexport interface DateRangePickerDropdownProps\n extends Pick<\n Required<DateRangePickerProps>,\n | 'locale'\n | 'isDateEnabled'\n | 'isValidRange'\n | 'value'\n | 'relativeOptions'\n | 'showClearButton'\n | 'i18nStrings'\n | 'dateOnly'\n | 'timeInputFormat'\n | 'rangeSelectorMode'\n > {\n onClear: () => void;\n onApply: (value: null | DateRangePickerProps.Value) => DateRangePickerProps.ValidationResult;\n startOfWeek: number | undefined;\n onDropdownClose: () => void;\n isSingleGrid: boolean;\n\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}\n\nexport function DateRangePickerDropdown({\n locale = '',\n startOfWeek,\n isDateEnabled,\n isValidRange,\n value,\n onClear: clearValue,\n onApply: applyValue,\n onDropdownClose,\n relativeOptions,\n showClearButton,\n isSingleGrid,\n i18nStrings,\n dateOnly,\n timeInputFormat,\n rangeSelectorMode,\n ariaLabelledby,\n ariaDescribedby,\n}: DateRangePickerDropdownProps) {\n const [rangeSelectionMode, setRangeSelectionMode] = useState<'absolute' | 'relative'>(\n getDefaultMode(value, relativeOptions, rangeSelectorMode)\n );\n\n const [selectedAbsoluteRange, setSelectedAbsoluteRange] = useState<DateRangePickerProps.AbsoluteValue | null>(\n value?.type === 'absolute' ? value : null\n );\n\n const [selectedRelativeRange, setSelectedRelativeRange] = useState<DateRangePickerProps.RelativeValue | null>(\n value?.type === 'relative' ? value : null\n );\n\n const focusVisible = useFocusVisible();\n const scrollableContainerRef = useRef<HTMLDivElement | null>(null);\n const applyButtonRef = useRef<ButtonProps.Ref>(null);\n\n const [applyClicked, setApplyClicked] = useState<boolean>(false);\n\n const [validationResult, setValidationResult] = useState<\n DateRangePickerProps.ValidRangeResult | DateRangePickerProps.InvalidRangeResult\n >(VALID_RANGE);\n\n const closeDropdown = () => {\n setApplyClicked(false);\n onDropdownClose();\n };\n\n const onClear = () => {\n closeDropdown();\n clearValue();\n };\n\n const onApply = () => {\n const newValue = rangeSelectionMode === 'relative' ? selectedRelativeRange : fillMissingTime(selectedAbsoluteRange);\n const newValidationResult = applyValue(newValue);\n if (newValidationResult.valid === false) {\n setApplyClicked(true);\n setValidationResult(newValidationResult);\n } else {\n setApplyClicked(false);\n closeDropdown();\n }\n };\n\n useEffect(() => {\n if (applyClicked) {\n const visibleRange =\n rangeSelectionMode === 'relative' ? selectedRelativeRange : fillMissingTime(selectedAbsoluteRange);\n\n const newValidationResult = isValidRange(visibleRange);\n setValidationResult(newValidationResult || VALID_RANGE);\n }\n }, [\n applyClicked,\n isValidRange,\n rangeSelectionMode,\n selectedRelativeRange,\n selectedAbsoluteRange,\n setValidationResult,\n ]);\n\n const focusRefs = {\n default: useRef<Focusable>(null),\n 'absolute-only': useRef<Focusable>(null),\n 'relative-only': useRef<Focusable>(null),\n };\n\n useEffect(() => scrollableContainerRef.current?.focus(), [scrollableContainerRef]);\n\n return (\n <>\n <FocusLock autoFocus={true}>\n <div\n {...focusVisible}\n ref={scrollableContainerRef}\n className={styles.dropdown}\n tabIndex={0}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={i18nStrings.ariaLabel}\n aria-labelledby={ariaLabelledby ?? i18nStrings.ariaLabelledby}\n aria-describedby={ariaDescribedby ?? i18nStrings.ariaDescribedby}\n >\n <div\n className={clsx(styles['dropdown-content'], {\n [styles['one-grid']]: isSingleGrid,\n })}\n >\n <SpaceBetween size=\"l\">\n <InternalBox padding={{ top: 'm', horizontal: 'l' }}>\n <SpaceBetween direction=\"vertical\" size=\"s\">\n {rangeSelectorMode === 'default' && (\n <ModeSwitcher\n ref={focusRefs.default}\n mode={rangeSelectionMode}\n onChange={(mode: 'absolute' | 'relative') => {\n setRangeSelectionMode(mode);\n setApplyClicked(false);\n setValidationResult(VALID_RANGE);\n }}\n i18nStrings={i18nStrings}\n />\n )}\n\n {rangeSelectionMode === 'absolute' && (\n <Calendar\n ref={focusRefs['absolute-only']}\n isSingleGrid={isSingleGrid}\n initialEndDate={selectedAbsoluteRange?.endDate}\n initialStartDate={selectedAbsoluteRange?.startDate}\n locale={locale}\n startOfWeek={startOfWeek}\n isDateEnabled={isDateEnabled}\n i18nStrings={i18nStrings}\n onSelectDateRange={setSelectedAbsoluteRange}\n dateOnly={dateOnly}\n timeInputFormat={timeInputFormat}\n />\n )}\n\n {rangeSelectionMode === 'relative' && (\n <RelativeRangePicker\n ref={focusRefs['relative-only']}\n isSingleGrid={isSingleGrid}\n options={relativeOptions}\n dateOnly={dateOnly}\n initialSelection={selectedRelativeRange}\n onChange={range => setSelectedRelativeRange(range)}\n i18nStrings={i18nStrings}\n />\n )}\n </SpaceBetween>\n\n <InternalBox\n className={styles['validation-section']}\n margin={!validationResult.valid ? { top: 's' } : undefined}\n >\n {!validationResult.valid && (\n <>\n <InternalAlert type=\"error\" statusIconAriaLabel={i18nStrings.errorIconAriaLabel}>\n <span className={styles['validation-error']}>{validationResult.errorMessage}</span>\n </InternalAlert>\n <LiveRegion>{validationResult.errorMessage}</LiveRegion>\n </>\n )}\n </InternalBox>\n </InternalBox>\n\n <div\n className={clsx(styles.footer, {\n [styles['one-grid']]: isSingleGrid,\n [styles['has-clear-button']]: showClearButton,\n })}\n >\n {showClearButton && (\n <div className={styles['footer-button-wrapper']}>\n <InternalButton\n onClick={onClear}\n className={styles['clear-button']}\n variant=\"link\"\n formAction=\"none\"\n >\n {i18nStrings.clearButtonLabel}\n </InternalButton>\n </div>\n )}\n <div className={styles['footer-button-wrapper']}>\n <SpaceBetween size=\"xs\" direction=\"horizontal\">\n <InternalButton\n onClick={closeDropdown}\n className={styles['cancel-button']}\n variant=\"link\"\n formAction=\"none\"\n >\n {i18nStrings.cancelButtonLabel}\n </InternalButton>\n\n <InternalButton\n onClick={onApply}\n className={styles['apply-button']}\n ref={applyButtonRef}\n formAction=\"none\"\n >\n {i18nStrings.applyButtonLabel}\n </InternalButton>\n </SpaceBetween>\n </div>\n </div>\n </SpaceBetween>\n </div>\n </div>\n </FocusLock>\n </>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/date-range-picker/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { DateRangePickerProps, Focusable } from './interfaces';\nimport Calendar from './calendar';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport FocusLock from '../internal/components/focus-lock';\nimport InternalBox from '../box/internal';\nimport SpaceBetween from '../space-between/index.js';\n\nimport styles from './styles.css.js';\nimport RelativeRangePicker from './relative-range';\nimport ModeSwitcher from './mode-switcher';\nimport clsx from 'clsx';\nimport InternalAlert from '../alert/internal';\nimport LiveRegion from '../internal/components/live-region';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { fillMissingTime, getDefaultMode } from './utils';\n\nexport const VALID_RANGE: DateRangePickerProps.ValidRangeResult = { valid: true };\n\nexport interface DateRangePickerDropdownProps\n extends Pick<\n Required<DateRangePickerProps>,\n | 'locale'\n | 'isDateEnabled'\n | 'isValidRange'\n | 'value'\n | 'relativeOptions'\n | 'showClearButton'\n | 'i18nStrings'\n | 'dateOnly'\n | 'timeInputFormat'\n | 'rangeSelectorMode'\n > {\n onClear: () => void;\n onApply: (value: null | DateRangePickerProps.Value) => DateRangePickerProps.ValidationResult;\n startOfWeek: number | undefined;\n onDropdownClose: () => void;\n isSingleGrid: boolean;\n\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}\n\nexport function DateRangePickerDropdown({\n locale = '',\n startOfWeek,\n isDateEnabled,\n isValidRange,\n value,\n onClear: clearValue,\n onApply: applyValue,\n onDropdownClose,\n relativeOptions,\n showClearButton,\n isSingleGrid,\n i18nStrings,\n dateOnly,\n timeInputFormat,\n rangeSelectorMode,\n ariaLabelledby,\n ariaDescribedby,\n}: DateRangePickerDropdownProps) {\n const [rangeSelectionMode, setRangeSelectionMode] = useState<'absolute' | 'relative'>(\n getDefaultMode(value, relativeOptions, rangeSelectorMode)\n );\n\n const [selectedAbsoluteRange, setSelectedAbsoluteRange] = useState<DateRangePickerProps.AbsoluteValue | null>(\n value?.type === 'absolute' ? value : null\n );\n\n const [selectedRelativeRange, setSelectedRelativeRange] = useState<DateRangePickerProps.RelativeValue | null>(\n value?.type === 'relative' ? value : null\n );\n\n const focusVisible = useFocusVisible();\n const scrollableContainerRef = useRef<HTMLDivElement | null>(null);\n const applyButtonRef = useRef<ButtonProps.Ref>(null);\n\n const [applyClicked, setApplyClicked] = useState<boolean>(false);\n\n const [validationResult, setValidationResult] = useState<\n DateRangePickerProps.ValidRangeResult | DateRangePickerProps.InvalidRangeResult\n >(VALID_RANGE);\n\n const closeDropdown = () => {\n setApplyClicked(false);\n onDropdownClose();\n };\n\n const onClear = () => {\n closeDropdown();\n clearValue();\n };\n\n const onApply = () => {\n const newValue = rangeSelectionMode === 'relative' ? selectedRelativeRange : fillMissingTime(selectedAbsoluteRange);\n const newValidationResult = applyValue(newValue);\n if (newValidationResult.valid === false) {\n setApplyClicked(true);\n setValidationResult(newValidationResult);\n } else {\n setApplyClicked(false);\n closeDropdown();\n }\n };\n\n useEffect(() => {\n if (applyClicked) {\n const visibleRange =\n rangeSelectionMode === 'relative' ? selectedRelativeRange : fillMissingTime(selectedAbsoluteRange);\n\n const newValidationResult = isValidRange(visibleRange);\n setValidationResult(newValidationResult || VALID_RANGE);\n }\n }, [\n applyClicked,\n isValidRange,\n rangeSelectionMode,\n selectedRelativeRange,\n selectedAbsoluteRange,\n setValidationResult,\n ]);\n\n const focusRefs = {\n default: useRef<Focusable>(null),\n 'absolute-only': useRef<Focusable>(null),\n 'relative-only': useRef<Focusable>(null),\n };\n\n useEffect(() => scrollableContainerRef.current?.focus(), [scrollableContainerRef]);\n\n return (\n <>\n <FocusLock className={styles['focus-lock']} autoFocus={true}>\n <div\n {...focusVisible}\n ref={scrollableContainerRef}\n className={styles.dropdown}\n tabIndex={0}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={i18nStrings.ariaLabel}\n aria-labelledby={ariaLabelledby ?? i18nStrings.ariaLabelledby}\n aria-describedby={ariaDescribedby ?? i18nStrings.ariaDescribedby}\n >\n <div\n className={clsx(styles['dropdown-content'], {\n [styles['one-grid']]: isSingleGrid,\n })}\n >\n <SpaceBetween size=\"l\">\n <InternalBox padding={{ top: 'm', horizontal: 'l' }}>\n <SpaceBetween direction=\"vertical\" size=\"s\">\n {rangeSelectorMode === 'default' && (\n <ModeSwitcher\n ref={focusRefs.default}\n mode={rangeSelectionMode}\n onChange={(mode: 'absolute' | 'relative') => {\n setRangeSelectionMode(mode);\n setApplyClicked(false);\n setValidationResult(VALID_RANGE);\n }}\n i18nStrings={i18nStrings}\n />\n )}\n\n {rangeSelectionMode === 'absolute' && (\n <Calendar\n ref={focusRefs['absolute-only']}\n isSingleGrid={isSingleGrid}\n initialEndDate={selectedAbsoluteRange?.endDate}\n initialStartDate={selectedAbsoluteRange?.startDate}\n locale={locale}\n startOfWeek={startOfWeek}\n isDateEnabled={isDateEnabled}\n i18nStrings={i18nStrings}\n onSelectDateRange={setSelectedAbsoluteRange}\n dateOnly={dateOnly}\n timeInputFormat={timeInputFormat}\n />\n )}\n\n {rangeSelectionMode === 'relative' && (\n <RelativeRangePicker\n ref={focusRefs['relative-only']}\n isSingleGrid={isSingleGrid}\n options={relativeOptions}\n dateOnly={dateOnly}\n initialSelection={selectedRelativeRange}\n onChange={range => setSelectedRelativeRange(range)}\n i18nStrings={i18nStrings}\n />\n )}\n </SpaceBetween>\n\n <InternalBox\n className={styles['validation-section']}\n margin={!validationResult.valid ? { top: 's' } : undefined}\n >\n {!validationResult.valid && (\n <>\n <InternalAlert type=\"error\" statusIconAriaLabel={i18nStrings.errorIconAriaLabel}>\n <span className={styles['validation-error']}>{validationResult.errorMessage}</span>\n </InternalAlert>\n <LiveRegion>{validationResult.errorMessage}</LiveRegion>\n </>\n )}\n </InternalBox>\n </InternalBox>\n\n <div\n className={clsx(styles.footer, {\n [styles['one-grid']]: isSingleGrid,\n [styles['has-clear-button']]: showClearButton,\n })}\n >\n {showClearButton && (\n <div className={styles['footer-button-wrapper']}>\n <InternalButton\n onClick={onClear}\n className={styles['clear-button']}\n variant=\"link\"\n formAction=\"none\"\n >\n {i18nStrings.clearButtonLabel}\n </InternalButton>\n </div>\n )}\n <div className={styles['footer-button-wrapper']}>\n <SpaceBetween size=\"xs\" direction=\"horizontal\">\n <InternalButton\n onClick={closeDropdown}\n className={styles['cancel-button']}\n variant=\"link\"\n formAction=\"none\"\n >\n {i18nStrings.cancelButtonLabel}\n </InternalButton>\n\n <InternalButton\n onClick={onApply}\n className={styles['apply-button']}\n ref={applyButtonRef}\n formAction=\"none\"\n >\n {i18nStrings.applyButtonLabel}\n </InternalButton>\n </SpaceBetween>\n </div>\n </div>\n </SpaceBetween>\n </div>\n </div>\n </FocusLock>\n </>\n );\n}\n"]}
|
|
@@ -1,41 +1,42 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"calendar": "
|
|
5
|
-
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-
|
|
6
|
-
"root": "
|
|
7
|
-
"
|
|
8
|
-
"trigger-
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"calendar-header
|
|
12
|
-
"calendar-header-
|
|
13
|
-
"calendar-
|
|
14
|
-
"calendar-
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"date-and-time-
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"label
|
|
25
|
-
"label-
|
|
26
|
-
"label-
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"dropdown
|
|
30
|
-
"
|
|
31
|
-
"start-
|
|
32
|
-
"
|
|
33
|
-
"end-
|
|
34
|
-
"
|
|
35
|
-
"validation-
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
4
|
+
"calendar": "awsui_calendar_mgja0_182lt_93",
|
|
5
|
+
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_182lt_1",
|
|
6
|
+
"root": "awsui_root_mgja0_182lt_120",
|
|
7
|
+
"focus-lock": "awsui_focus-lock_mgja0_182lt_132",
|
|
8
|
+
"trigger-wrapper": "awsui_trigger-wrapper_mgja0_182lt_136",
|
|
9
|
+
"trigger-flexbox": "awsui_trigger-flexbox_mgja0_182lt_140",
|
|
10
|
+
"one-grid": "awsui_one-grid_mgja0_182lt_148",
|
|
11
|
+
"calendar-header": "awsui_calendar-header_mgja0_182lt_151",
|
|
12
|
+
"calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_182lt_157",
|
|
13
|
+
"calendar-header-month": "awsui_calendar-header-month_mgja0_182lt_157",
|
|
14
|
+
"calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_182lt_178",
|
|
15
|
+
"calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_182lt_181",
|
|
16
|
+
"first-grid": "awsui_first-grid_mgja0_182lt_185",
|
|
17
|
+
"second-grid": "awsui_second-grid_mgja0_182lt_186",
|
|
18
|
+
"date-and-time-container": "awsui_date-and-time-container_mgja0_182lt_190",
|
|
19
|
+
"date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_182lt_196",
|
|
20
|
+
"footer": "awsui_footer_mgja0_182lt_203",
|
|
21
|
+
"has-clear-button": "awsui_has-clear-button_mgja0_182lt_210",
|
|
22
|
+
"footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_182lt_217",
|
|
23
|
+
"icon-wrapper": "awsui_icon-wrapper_mgja0_182lt_221",
|
|
24
|
+
"label": "awsui_label_mgja0_182lt_226",
|
|
25
|
+
"label-enabled": "awsui_label-enabled_mgja0_182lt_231",
|
|
26
|
+
"label-text": "awsui_label-text_mgja0_182lt_235",
|
|
27
|
+
"label-token-nowrap": "awsui_label-token-nowrap_mgja0_182lt_240",
|
|
28
|
+
"mode-switch": "awsui_mode-switch_mgja0_182lt_244",
|
|
29
|
+
"dropdown": "awsui_dropdown_mgja0_182lt_248",
|
|
30
|
+
"dropdown-content": "awsui_dropdown-content_mgja0_182lt_264",
|
|
31
|
+
"start-date-input": "awsui_start-date-input_mgja0_182lt_273",
|
|
32
|
+
"start-time-input": "awsui_start-time-input_mgja0_182lt_274",
|
|
33
|
+
"end-date-input": "awsui_end-date-input_mgja0_182lt_275",
|
|
34
|
+
"end-time-input": "awsui_end-time-input_mgja0_182lt_276",
|
|
35
|
+
"validation-section": "awsui_validation-section_mgja0_182lt_280",
|
|
36
|
+
"validation-error": "awsui_validation-error_mgja0_182lt_284",
|
|
37
|
+
"clear-button": "awsui_clear-button_mgja0_182lt_288",
|
|
38
|
+
"apply-button": "awsui_apply-button_mgja0_182lt_292",
|
|
39
|
+
"cancel-button": "awsui_cancel-button_mgja0_182lt_296",
|
|
40
|
+
"calendar-aria-live": "awsui_calendar-aria-live_mgja0_182lt_300"
|
|
40
41
|
};
|
|
41
42
|
|