@cloudscape-design/components-themeable 3.0.1093 → 3.0.1095
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/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/template/calendar/grid/index.js +1 -1
- package/lib/internal/template/calendar/grid/index.js.map +1 -1
- package/lib/internal/template/input/index.d.ts.map +1 -1
- package/lib/internal/template/input/index.js +3 -2
- package/lib/internal/template/input/index.js.map +1 -1
- package/lib/internal/template/input/interfaces.d.ts +16 -0
- package/lib/internal/template/input/interfaces.d.ts.map +1 -1
- package/lib/internal/template/input/interfaces.js.map +1 -1
- package/lib/internal/template/input/internal.d.ts +2 -1
- package/lib/internal/template/input/internal.d.ts.map +1 -1
- package/lib/internal/template/input/internal.js +24 -9
- package/lib/internal/template/input/internal.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/components/autosuggest-input/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/autosuggest-input/index.js +3 -2
- package/lib/internal/template/internal/components/autosuggest-input/index.js.map +1 -1
- package/lib/internal/template/internal/components/masked-input/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/masked-input/index.js +4 -3
- package/lib/internal/template/internal/components/masked-input/index.js.map +1 -1
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/hooks/{use-effect-on-update.d.ts → use-effect-on-update/index.d.ts} +1 -1
- package/lib/internal/template/internal/hooks/use-effect-on-update/index.d.ts.map +1 -0
- package/lib/internal/template/internal/hooks/use-effect-on-update/index.js +37 -0
- package/lib/internal/template/internal/hooks/use-effect-on-update/index.js.map +1 -0
- package/lib/internal/template/internal/utils/with-native-attributes.d.ts +3 -1
- package/lib/internal/template/internal/utils/with-native-attributes.d.ts.map +1 -1
- package/lib/internal/template/internal/utils/with-native-attributes.js +10 -7
- package/lib/internal/template/internal/utils/with-native-attributes.js.map +1 -1
- package/lib/internal/template/prompt-input/interfaces.d.ts +16 -1
- package/lib/internal/template/prompt-input/interfaces.d.ts.map +1 -1
- package/lib/internal/template/prompt-input/interfaces.js.map +1 -1
- package/lib/internal/template/prompt-input/internal.d.ts.map +1 -1
- package/lib/internal/template/prompt-input/internal.js +3 -2
- package/lib/internal/template/prompt-input/internal.js.map +1 -1
- package/lib/internal/template/select/parts/filter.d.ts +1 -1
- package/lib/internal/template/select/parts/filter.d.ts.map +1 -1
- package/lib/internal/template/select/parts/filter.js +1 -1
- package/lib/internal/template/select/parts/filter.js.map +1 -1
- package/lib/internal/template/select/utils/use-select.js +1 -1
- package/lib/internal/template/select/utils/use-select.js.map +1 -1
- package/lib/internal/template/textarea/index.d.ts.map +1 -1
- package/lib/internal/template/textarea/index.js +3 -2
- package/lib/internal/template/textarea/index.js.map +1 -1
- package/lib/internal/template/textarea/interfaces.d.ts +17 -1
- package/lib/internal/template/textarea/interfaces.d.ts.map +1 -1
- package/lib/internal/template/textarea/interfaces.js.map +1 -1
- package/lib/internal/template/wizard/wizard-form.d.ts.map +1 -1
- package/lib/internal/template/wizard/wizard-form.js +1 -3
- package/lib/internal/template/wizard/wizard-form.js.map +1 -1
- package/package.json +1 -1
- package/lib/internal/template/internal/hooks/use-effect-on-update.d.ts.map +0 -1
- package/lib/internal/template/internal/hooks/use-effect-on-update.js +0 -18
- package/lib/internal/template/internal/hooks/use-effect-on-update.js.map +0 -1
|
@@ -6,7 +6,7 @@ import clsx from 'clsx';
|
|
|
6
6
|
import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
|
|
7
7
|
import ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';
|
|
8
8
|
import Tooltip from '../../internal/components/tooltip';
|
|
9
|
-
import { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update
|
|
9
|
+
import { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';
|
|
10
10
|
import useHiddenDescription from '../../internal/hooks/use-hidden-description';
|
|
11
11
|
import { applyDisplayName } from '../../internal/utils/apply-display-name';
|
|
12
12
|
import styles from '../styles.css.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/calendar/grid/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 React, { forwardRef, TdHTMLAttributes, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { DatePickerProps } from '../../date-picker/interfaces';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';\nimport Tooltip from '../../internal/components/tooltip';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update.js';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { applyDisplayName } from '../../internal/utils/apply-display-name';\nimport { CalendarProps } from '../interfaces';\n\nimport styles from '../styles.css.js';\n\n/**\n * Calendar grid supports two mechanisms of keyboard navigation:\n * - Native screen-reader table navigation (semantic table markup);\n * - Keyboard arrow-keys navigation (a custom key-down handler).\n *\n * The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:\n * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;\n * - (table navigation) Safari+VO - \"dimmed\" state is announced twice;\n * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;\n * - (keyboard navigation) Firefox+NVDA - every date is announced as \"not selected\";\n * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;\n * - (keyboard navigation) Safari/Chrome+VO - dates are not announced as interactive (clickable or selectable);\n * - (keyboard navigation) Safari/Chrome+VO - date announcements are not interruptive and can be missed if navigating fast.\n */\n\nexport interface GridProps {\n isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n dateDisabledReason: CalendarProps.DateDisabledReasonFunction;\n focusedDate: Date | null;\n focusableDate: Date | null;\n onSelectDate: (date: Date) => void;\n onFocusDate: (date: null | Date) => void;\n onChangePage: (date: Date) => void;\n selectedDate: Date | null;\n ariaLabelledby: string;\n header?: React.ReactNode;\n rows: ReadonlyArray<ReadonlyArray<Date>>;\n isCurrentPage: (date: Date) => boolean;\n renderDate: (date: Date) => string;\n renderDateAnnouncement: (date: Date, isOnCurrentDate: boolean) => string;\n isSameDate: (date: Date, baseDate: Date) => boolean;\n onGridKeyDownHandler: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\ninterface GridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n disabledReason?: string;\n}\n\nconst GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTMLTableCellElement>) => {\n const { disabledReason, ...rest } = props;\n const isDisabledWithReason = !!disabledReason;\n const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n const ref = useRef<HTMLTableCellElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n\n return (\n <td\n ref={useMergeRefs(focusedDateRef, ref)}\n {...(isDisabledWithReason ? targetProps : {})}\n {...rest}\n onFocus={() => (isDisabledWithReason ? setShowTooltip(true) : undefined)}\n onBlur={() => (isDisabledWithReason ? setShowTooltip(false) : undefined)}\n onMouseEnter={() => (isDisabledWithReason ? setShowTooltip(true) : undefined)}\n onMouseLeave={() => (isDisabledWithReason ? setShowTooltip(false) : undefined)}\n >\n {props.children}\n {isDisabledWithReason && (\n <>\n {descriptionEl}\n {showTooltip && (\n <Tooltip\n className={styles['disabled-reason-tooltip']}\n trackRef={ref}\n value={disabledReason!}\n onDismiss={() => setShowTooltip(false)}\n />\n )}\n </>\n )}\n </td>\n );\n});\n\napplyDisplayName(GridCell, 'GridCell');\n\nexport default function Grid({\n isDateEnabled,\n dateDisabledReason,\n focusedDate,\n focusableDate,\n onSelectDate,\n selectedDate,\n ariaLabelledby,\n header,\n rows,\n isCurrentPage,\n renderDate,\n renderDateAnnouncement,\n isSameDate,\n onGridKeyDownHandler,\n}: GridProps) {\n const focusedDateRef = useRef<HTMLTableCellElement>(null);\n\n // The focused date changes as a feedback to keyboard navigation in the grid.\n // Once changed, the corresponding date button needs to receive the actual focus.\n useEffectOnUpdate(() => {\n if (focusedDate && focusedDateRef.current) {\n (focusedDateRef.current as HTMLDivElement).focus();\n }\n }, [focusedDate]);\n\n const rowLength = rows[0].length;\n\n const denseGrid = rowLength > 3;\n\n return (\n <table\n role=\"grid\"\n className={clsx(styles['calendar-grid'], denseGrid && styles['calendar-grid-dense'])}\n aria-labelledby={ariaLabelledby}\n >\n {header}\n <tbody onKeyDown={onGridKeyDownHandler}>\n {rows.map((row, rowIndex) => (\n <tr key={rowIndex} className={styles['calendar-row']}>\n {row.map((date, dateIndex) => {\n const isFocusable = !!focusableDate && isSameDate(date, focusableDate);\n const isSelected = !!selectedDate && isSameDate(date, selectedDate);\n const isEnabled = !isDateEnabled || isDateEnabled(date);\n const disabledReason = dateDisabledReason(date);\n const isDisabledWithReason = !isEnabled && !!disabledReason;\n const isCurrentDate = isSameDate(date, new Date());\n\n // Can't be focused.\n let tabIndex = undefined;\n if (isFocusable && (isEnabled || isDisabledWithReason)) {\n // Next focus target.\n tabIndex = 0;\n } else if (isEnabled || isDisabledWithReason) {\n // Can be focused programmatically.\n tabIndex = -1;\n }\n\n return (\n <GridCell\n key={`${rowIndex}:${dateIndex}`}\n ref={tabIndex === 0 ? focusedDateRef : undefined}\n tabIndex={tabIndex}\n aria-current={isCurrentDate ? 'date' : undefined}\n aria-selected={isEnabled ? isSelected : undefined}\n aria-disabled={!isEnabled}\n // Do not attach click event when the date is disabled, otherwise VO+safari announces clickable\n onClick={isEnabled ? () => onSelectDate(date) : undefined}\n className={clsx(styles['calendar-grid-cell'], styles['calendar-date'], {\n [styles['calendar-date-current-page']]: isCurrentPage(date),\n [styles['calendar-date-enabled']]: isEnabled,\n [styles['calendar-date-selected']]: isSelected,\n [styles['calendar-date-current']]: isCurrentDate,\n [styles['calendar-date-dense']]: denseGrid,\n })}\n disabledReason={isDisabledWithReason ? disabledReason : undefined}\n >\n <span className={styles['date-inner']} aria-hidden=\"true\">\n {renderDate(date)}\n </span>\n {/* Screen-reader announcement for the focused date. */}\n <ScreenreaderOnly>{renderDateAnnouncement(date, isCurrentDate)}</ScreenreaderOnly>\n </GridCell>\n );\n })}\n </tr>\n ))}\n </tbody>\n </table>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/calendar/grid/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 React, { forwardRef, TdHTMLAttributes, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { DatePickerProps } from '../../date-picker/interfaces';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';\nimport Tooltip from '../../internal/components/tooltip';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { applyDisplayName } from '../../internal/utils/apply-display-name';\nimport { CalendarProps } from '../interfaces';\n\nimport styles from '../styles.css.js';\n\n/**\n * Calendar grid supports two mechanisms of keyboard navigation:\n * - Native screen-reader table navigation (semantic table markup);\n * - Keyboard arrow-keys navigation (a custom key-down handler).\n *\n * The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:\n * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;\n * - (table navigation) Safari+VO - \"dimmed\" state is announced twice;\n * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;\n * - (keyboard navigation) Firefox+NVDA - every date is announced as \"not selected\";\n * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;\n * - (keyboard navigation) Safari/Chrome+VO - dates are not announced as interactive (clickable or selectable);\n * - (keyboard navigation) Safari/Chrome+VO - date announcements are not interruptive and can be missed if navigating fast.\n */\n\nexport interface GridProps {\n isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n dateDisabledReason: CalendarProps.DateDisabledReasonFunction;\n focusedDate: Date | null;\n focusableDate: Date | null;\n onSelectDate: (date: Date) => void;\n onFocusDate: (date: null | Date) => void;\n onChangePage: (date: Date) => void;\n selectedDate: Date | null;\n ariaLabelledby: string;\n header?: React.ReactNode;\n rows: ReadonlyArray<ReadonlyArray<Date>>;\n isCurrentPage: (date: Date) => boolean;\n renderDate: (date: Date) => string;\n renderDateAnnouncement: (date: Date, isOnCurrentDate: boolean) => string;\n isSameDate: (date: Date, baseDate: Date) => boolean;\n onGridKeyDownHandler: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\ninterface GridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n disabledReason?: string;\n}\n\nconst GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTMLTableCellElement>) => {\n const { disabledReason, ...rest } = props;\n const isDisabledWithReason = !!disabledReason;\n const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n const ref = useRef<HTMLTableCellElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n\n return (\n <td\n ref={useMergeRefs(focusedDateRef, ref)}\n {...(isDisabledWithReason ? targetProps : {})}\n {...rest}\n onFocus={() => (isDisabledWithReason ? setShowTooltip(true) : undefined)}\n onBlur={() => (isDisabledWithReason ? setShowTooltip(false) : undefined)}\n onMouseEnter={() => (isDisabledWithReason ? setShowTooltip(true) : undefined)}\n onMouseLeave={() => (isDisabledWithReason ? setShowTooltip(false) : undefined)}\n >\n {props.children}\n {isDisabledWithReason && (\n <>\n {descriptionEl}\n {showTooltip && (\n <Tooltip\n className={styles['disabled-reason-tooltip']}\n trackRef={ref}\n value={disabledReason!}\n onDismiss={() => setShowTooltip(false)}\n />\n )}\n </>\n )}\n </td>\n );\n});\n\napplyDisplayName(GridCell, 'GridCell');\n\nexport default function Grid({\n isDateEnabled,\n dateDisabledReason,\n focusedDate,\n focusableDate,\n onSelectDate,\n selectedDate,\n ariaLabelledby,\n header,\n rows,\n isCurrentPage,\n renderDate,\n renderDateAnnouncement,\n isSameDate,\n onGridKeyDownHandler,\n}: GridProps) {\n const focusedDateRef = useRef<HTMLTableCellElement>(null);\n\n // The focused date changes as a feedback to keyboard navigation in the grid.\n // Once changed, the corresponding date button needs to receive the actual focus.\n useEffectOnUpdate(() => {\n if (focusedDate && focusedDateRef.current) {\n (focusedDateRef.current as HTMLDivElement).focus();\n }\n }, [focusedDate]);\n\n const rowLength = rows[0].length;\n\n const denseGrid = rowLength > 3;\n\n return (\n <table\n role=\"grid\"\n className={clsx(styles['calendar-grid'], denseGrid && styles['calendar-grid-dense'])}\n aria-labelledby={ariaLabelledby}\n >\n {header}\n <tbody onKeyDown={onGridKeyDownHandler}>\n {rows.map((row, rowIndex) => (\n <tr key={rowIndex} className={styles['calendar-row']}>\n {row.map((date, dateIndex) => {\n const isFocusable = !!focusableDate && isSameDate(date, focusableDate);\n const isSelected = !!selectedDate && isSameDate(date, selectedDate);\n const isEnabled = !isDateEnabled || isDateEnabled(date);\n const disabledReason = dateDisabledReason(date);\n const isDisabledWithReason = !isEnabled && !!disabledReason;\n const isCurrentDate = isSameDate(date, new Date());\n\n // Can't be focused.\n let tabIndex = undefined;\n if (isFocusable && (isEnabled || isDisabledWithReason)) {\n // Next focus target.\n tabIndex = 0;\n } else if (isEnabled || isDisabledWithReason) {\n // Can be focused programmatically.\n tabIndex = -1;\n }\n\n return (\n <GridCell\n key={`${rowIndex}:${dateIndex}`}\n ref={tabIndex === 0 ? focusedDateRef : undefined}\n tabIndex={tabIndex}\n aria-current={isCurrentDate ? 'date' : undefined}\n aria-selected={isEnabled ? isSelected : undefined}\n aria-disabled={!isEnabled}\n // Do not attach click event when the date is disabled, otherwise VO+safari announces clickable\n onClick={isEnabled ? () => onSelectDate(date) : undefined}\n className={clsx(styles['calendar-grid-cell'], styles['calendar-date'], {\n [styles['calendar-date-current-page']]: isCurrentPage(date),\n [styles['calendar-date-enabled']]: isEnabled,\n [styles['calendar-date-selected']]: isSelected,\n [styles['calendar-date-current']]: isCurrentDate,\n [styles['calendar-date-dense']]: denseGrid,\n })}\n disabledReason={isDisabledWithReason ? disabledReason : undefined}\n >\n <span className={styles['date-inner']} aria-hidden=\"true\">\n {renderDate(date)}\n </span>\n {/* Screen-reader announcement for the focused date. */}\n <ScreenreaderOnly>{renderDateAnnouncement(date, isCurrentDate)}</ScreenreaderOnly>\n </GridCell>\n );\n })}\n </tr>\n ))}\n </tbody>\n </table>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,mFA4FV,CAAC;AAGF,eAAe,KAAK,CAAC"}
|
|
@@ -10,7 +10,7 @@ import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
|
10
10
|
import InternalInput from './internal';
|
|
11
11
|
import styles from './styles.css.js';
|
|
12
12
|
const Input = React.forwardRef((_a, ref) => {
|
|
13
|
-
var { value, type = 'text', step, inputMode, autoComplete = true, spellcheck, disabled, readOnly, disableBrowserAutocorrect, onKeyDown, onKeyUp, onChange, onBlur, onFocus, ariaRequired, name, placeholder, autoFocus, ariaLabel, ariaLabelledby, ariaDescribedby, invalid, warning, controlId, clearAriaLabel } = _a, rest = __rest(_a, ["value", "type", "step", "inputMode", "autoComplete", "spellcheck", "disabled", "readOnly", "disableBrowserAutocorrect", "onKeyDown", "onKeyUp", "onChange", "onBlur", "onFocus", "ariaRequired", "name", "placeholder", "autoFocus", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "invalid", "warning", "controlId", "clearAriaLabel"]);
|
|
13
|
+
var { value, type = 'text', step, inputMode, autoComplete = true, spellcheck, disabled, readOnly, disableBrowserAutocorrect, onKeyDown, onKeyUp, onChange, onBlur, onFocus, ariaRequired, name, placeholder, autoFocus, ariaLabel, ariaLabelledby, ariaDescribedby, invalid, warning, controlId, clearAriaLabel, nativeInputAttributes } = _a, rest = __rest(_a, ["value", "type", "step", "inputMode", "autoComplete", "spellcheck", "disabled", "readOnly", "disableBrowserAutocorrect", "onKeyDown", "onKeyUp", "onChange", "onBlur", "onFocus", "ariaRequired", "name", "placeholder", "autoFocus", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "invalid", "warning", "controlId", "clearAriaLabel", "nativeInputAttributes"]);
|
|
14
14
|
const baseComponentProps = useBaseComponent('Input', {
|
|
15
15
|
props: { autoComplete, autoFocus, disableBrowserAutocorrect, inputMode, readOnly, spellcheck, type },
|
|
16
16
|
});
|
|
@@ -50,7 +50,8 @@ const Input = React.forwardRef((_a, ref) => {
|
|
|
50
50
|
invalid,
|
|
51
51
|
warning,
|
|
52
52
|
controlId,
|
|
53
|
-
clearAriaLabel
|
|
53
|
+
clearAriaLabel,
|
|
54
|
+
nativeInputAttributes }), { className: clsx(styles.root, baseProps.className), __inheritFormFieldProps: true, __injectAnalyticsComponentMetadata: true })));
|
|
54
55
|
});
|
|
55
56
|
applyDisplayName(Input, 'Input');
|
|
56
57
|
export default Input;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/input/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;;AACb,OAAO,KAAK,EAAE,EAAO,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,MAAM,YAAY,CAAC;AAEvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/input/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;;AACb,OAAO,KAAK,EAAE,EAAO,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,MAAM,YAAY,CAAC;AAEvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EA4Ba,EACb,GAAwB,EACxB,EAAE;QA9BF,EACE,KAAK,EACL,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,SAAS,EACT,YAAY,GAAG,IAAI,EACnB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,yBAAyB,EACzB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,OAAO,EACP,OAAO,EACP,SAAS,EACT,cAAc,EACd,qBAAqB,OAEV,EADR,IAAI,cA3BT,sWA4BC,CADQ;IAIT,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,EAAE;QACnD,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,yBAAyB,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE;KACrG,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,CAAC,GAAG,IAAsC;;YAC7C,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;QACnC,CAAC;QACD,MAAM;;YACJ,MAAA,QAAQ,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;QAC7B,CAAC;KACF,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,kBACZ,GAAG,EAAE,QAAQ,kDAER,SAAS,GACT,kBAAkB,KACrB,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,SAAS;QACT,QAAQ;QACR,yBAAyB;QACzB,IAAI;QACJ,SAAS;QACT,OAAO;QACP,QAAQ;QACR,MAAM;QACN,OAAO;QACP,WAAW;QACX,QAAQ;QACR,IAAI;QACJ,IAAI;QACJ,SAAS;QACT,UAAU;QACV,KAAK;QACL,eAAe;QACf,cAAc;QACd,OAAO;QACP,OAAO;QACP,SAAS;QACT,cAAc;QACd,qBAAqB,OAEvB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACjD,uBAAuB,EAAE,IAAI,EAC7B,kCAAkC,EAAE,IAAI,IACxC,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React, { Ref, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { InputProps } from './interfaces';\nimport InternalInput from './internal';\n\nimport styles from './styles.css.js';\n\nexport { InputProps };\n\nconst Input = React.forwardRef(\n (\n {\n value,\n type = 'text',\n step,\n inputMode,\n autoComplete = true,\n spellcheck,\n disabled,\n readOnly,\n disableBrowserAutocorrect,\n onKeyDown,\n onKeyUp,\n onChange,\n onBlur,\n onFocus,\n ariaRequired,\n name,\n placeholder,\n autoFocus,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n invalid,\n warning,\n controlId,\n clearAriaLabel,\n nativeInputAttributes,\n ...rest\n }: InputProps,\n ref: Ref<InputProps.Ref>\n ) => {\n const baseComponentProps = useBaseComponent('Input', {\n props: { autoComplete, autoFocus, disableBrowserAutocorrect, inputMode, readOnly, spellcheck, type },\n });\n const baseProps = getBaseProps(rest);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus(...args: Parameters<HTMLElement['focus']>) {\n inputRef.current?.focus(...args);\n },\n select() {\n inputRef.current?.select();\n },\n }),\n [inputRef]\n );\n\n return (\n <InternalInput\n ref={inputRef}\n {...{\n ...baseProps,\n ...baseComponentProps,\n autoComplete,\n ariaLabel,\n ariaRequired,\n autoFocus,\n disabled,\n disableBrowserAutocorrect,\n name,\n onKeyDown,\n onKeyUp,\n onChange,\n onBlur,\n onFocus,\n placeholder,\n readOnly,\n type,\n step,\n inputMode,\n spellcheck,\n value,\n ariaDescribedby,\n ariaLabelledby,\n invalid,\n warning,\n controlId,\n clearAriaLabel,\n nativeInputAttributes,\n }}\n className={clsx(styles.root, baseProps.className)}\n __inheritFormFieldProps={true}\n __injectAnalyticsComponentMetadata={true}\n />\n );\n }\n);\n\napplyDisplayName(Input, 'Input');\nexport default Input;\n"]}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { BaseComponentProps } from '../internal/base-component';
|
|
2
3
|
import { FormFieldValidationControlProps } from '../internal/context/form-field-context';
|
|
3
4
|
import { BaseKeyDetail, CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';
|
|
5
|
+
/**
|
|
6
|
+
* @awsuiSystem core
|
|
7
|
+
*/
|
|
8
|
+
import { NativeAttributes } from '../internal/utils/with-native-attributes';
|
|
4
9
|
export interface BaseInputProps {
|
|
5
10
|
/**
|
|
6
11
|
* Specifies the text entered into the form element.
|
|
@@ -60,6 +65,17 @@ export interface BaseInputProps {
|
|
|
60
65
|
* The event `detail` contains the current value of the field.
|
|
61
66
|
*/
|
|
62
67
|
onChange?: NonCancelableEventHandler<InputProps.ChangeDetail>;
|
|
68
|
+
/**
|
|
69
|
+
* Attributes to add to the native `input` element.
|
|
70
|
+
* Some attributes will be automatically combined with internal attribute values:
|
|
71
|
+
* - `className` will be appended.
|
|
72
|
+
* - Event handlers will be chained, unless the default is prevented.
|
|
73
|
+
*
|
|
74
|
+
* We do not support using this attribute to apply custom styling.
|
|
75
|
+
*
|
|
76
|
+
* @awsuiSystem core
|
|
77
|
+
*/
|
|
78
|
+
nativeInputAttributes?: NativeAttributes<React.InputHTMLAttributes<HTMLInputElement>>;
|
|
63
79
|
}
|
|
64
80
|
export interface InputAutoCorrect {
|
|
65
81
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/input/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/input/interfaces.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/input/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { BaseKeyDetail, CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';\n\nexport interface BaseInputProps {\n /**\n * Specifies the text entered into the form element.\n */\n value: string;\n\n /**\n * Specifies the name of the control used in HTML forms.\n */\n name?: string;\n\n /**\n * Specifies the placeholder text rendered when the value is an empty string.\n */\n placeholder?: string;\n\n /**\n * Specifies if the control is disabled, which prevents the\n * user from modifying the value and prevents the value from\n * being included in a form submission. A disabled control can't\n * receive focus.\n */\n disabled?: boolean;\n\n /**\n * Specifies if the control is read-only, which prevents the\n * user from modifying the value but includes it in a form\n * submission. A read-only control can receive focus.\n *\n * Don't use read-only inputs outside a form.\n */\n readOnly?: boolean;\n\n /**\n * Indicates whether the control should be focused as\n * soon as the page loads, which enables the user to\n * start typing without having to manually focus the control. Don't\n * use this option on pages where the control may be\n * scrolled out of the viewport.\n */\n autoFocus?: boolean;\n\n /**\n * Adds an `aria-label` to the native control.\n *\n * Use this if you don't have a visible label for this control.\n */\n ariaLabel?: string;\n\n /**\n * Specifies whether to add `aria-required` to the native control.\n */\n ariaRequired?: boolean;\n\n /**\n * Called when input focus is removed from the UI control.\n */\n onBlur?: NonCancelableEventHandler<null>;\n\n /**\n * Called when input focus is moved to the UI control.\n */\n onFocus?: NonCancelableEventHandler<null>;\n\n /**\n * Called whenever a user changes the input value (by typing or pasting).\n * The event `detail` contains the current value of the field.\n */\n onChange?: NonCancelableEventHandler<InputProps.ChangeDetail>;\n}\n\nexport interface InputAutoCorrect {\n /**\n * Specifies whether to disable browser autocorrect and related features.\n * If you set this to `true`, it disables any native browser capabilities\n * that automatically correct user input, such as `autocorrect` and\n * `autocapitalize`. If you don't set it, the behavior follows the default behavior\n * of the user's browser.\n */\n disableBrowserAutocorrect?: boolean;\n}\n\nexport interface InputAutoComplete {\n /**\n * Specifies whether to enable a browser's autocomplete functionality for this input.\n * In some cases it might be appropriate to disable autocomplete (for example, for security-sensitive fields).\n * To use it correctly, set the `name` property.\n *\n * You can either provide a boolean value to set the property to \"on\" or \"off\", or specify a string value\n * for the [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute.\n */\n autoComplete?: boolean | string;\n}\n\nexport interface InputSpellcheck {\n /**\n * Specifies the value of the `spellcheck` attribute on the native control.\n * This value controls the native browser capability to check for spelling/grammar errors.\n * If not set, the browser default behavior is to perform spellchecking.\n * For more details, check the [spellcheck MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).\n *\n * Enhanced spellchecking features of your browser and/or operating system may send input values to external parties.\n * Make sure it’s deactivated for fields with sensitive information to prevent\n * inadvertently sending data (such as user passwords) to third parties.\n */\n spellcheck?: boolean;\n}\n\nexport interface InputKeyEvents {\n /**\n * Called when the underlying native textarea emits a `keydown` event.\n * The event `detail` contains the `keyCode` and information\n * about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).\n */\n onKeyDown?: CancelableEventHandler<InputProps.KeyDetail>;\n\n /**\n * Called when the underlying native textarea emits a `keyup` event.\n * The event `detail` contains the `keyCode` and information\n * about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).\n */\n onKeyUp?: CancelableEventHandler<InputProps.KeyDetail>;\n}\n\nexport interface InputClearLabel {\n /**\n * Adds an `aria-label` to the clear button inside the search input.\n * @i18n\n */\n clearAriaLabel?: string;\n}\n\nexport interface InputProps\n extends BaseComponentProps,\n BaseInputProps,\n InputKeyEvents,\n InputAutoCorrect,\n InputAutoComplete,\n InputSpellcheck,\n InputClearLabel,\n FormFieldValidationControlProps {\n /**\n * Specifies the type of control to render.\n * Inputs with a `number` type use the native element behavior, which might\n * be slightly different across browsers.\n */\n type?: InputProps.Type;\n\n /**\n * Adds a hint to the browser about the type of data a user may enter into this field.\n * Some devices may render a different virtual keyboard depending on this value.\n * This value may not be supported by all browsers or devices.\n */\n inputMode?: InputProps.InputMode;\n\n /**\n * The step attribute is a number that specifies the granularity that the value\n * must adhere to or the keyword \"any\". It is valid for the numeric input types,\n * including the date, month, week, time, datetime-local, number and range types.\n */\n step?: InputProps.Step;\n}\n\nexport namespace InputProps {\n export type Type = 'text' | 'password' | 'search' | 'number' | 'email' | 'url';\n export type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n export type Step = number | 'any';\n\n export type ChangeDetail = BaseChangeDetail;\n export type KeyDetail = BaseKeyDetail;\n\n export interface Ref {\n /**\n * Sets input focus onto the UI control.\n */\n focus(): void;\n\n /**\n * Selects all text in the input control.\n */\n select(): void;\n }\n}\nexport interface BaseChangeDetail {\n value: string;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/input/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { BaseKeyDetail, CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../internal/utils/with-native-attributes';\n\nexport interface BaseInputProps {\n /**\n * Specifies the text entered into the form element.\n */\n value: string;\n\n /**\n * Specifies the name of the control used in HTML forms.\n */\n name?: string;\n\n /**\n * Specifies the placeholder text rendered when the value is an empty string.\n */\n placeholder?: string;\n\n /**\n * Specifies if the control is disabled, which prevents the\n * user from modifying the value and prevents the value from\n * being included in a form submission. A disabled control can't\n * receive focus.\n */\n disabled?: boolean;\n\n /**\n * Specifies if the control is read-only, which prevents the\n * user from modifying the value but includes it in a form\n * submission. A read-only control can receive focus.\n *\n * Don't use read-only inputs outside a form.\n */\n readOnly?: boolean;\n\n /**\n * Indicates whether the control should be focused as\n * soon as the page loads, which enables the user to\n * start typing without having to manually focus the control. Don't\n * use this option on pages where the control may be\n * scrolled out of the viewport.\n */\n autoFocus?: boolean;\n\n /**\n * Adds an `aria-label` to the native control.\n *\n * Use this if you don't have a visible label for this control.\n */\n ariaLabel?: string;\n\n /**\n * Specifies whether to add `aria-required` to the native control.\n */\n ariaRequired?: boolean;\n\n /**\n * Called when input focus is removed from the UI control.\n */\n onBlur?: NonCancelableEventHandler<null>;\n\n /**\n * Called when input focus is moved to the UI control.\n */\n onFocus?: NonCancelableEventHandler<null>;\n\n /**\n * Called whenever a user changes the input value (by typing or pasting).\n * The event `detail` contains the current value of the field.\n */\n onChange?: NonCancelableEventHandler<InputProps.ChangeDetail>;\n\n /**\n * Attributes to add to the native `input` element.\n * Some attributes will be automatically combined with internal attribute values:\n * - `className` will be appended.\n * - Event handlers will be chained, unless the default is prevented.\n *\n * We do not support using this attribute to apply custom styling.\n *\n * @awsuiSystem core\n */\n nativeInputAttributes?: NativeAttributes<React.InputHTMLAttributes<HTMLInputElement>>;\n}\n\nexport interface InputAutoCorrect {\n /**\n * Specifies whether to disable browser autocorrect and related features.\n * If you set this to `true`, it disables any native browser capabilities\n * that automatically correct user input, such as `autocorrect` and\n * `autocapitalize`. If you don't set it, the behavior follows the default behavior\n * of the user's browser.\n */\n disableBrowserAutocorrect?: boolean;\n}\n\nexport interface InputAutoComplete {\n /**\n * Specifies whether to enable a browser's autocomplete functionality for this input.\n * In some cases it might be appropriate to disable autocomplete (for example, for security-sensitive fields).\n * To use it correctly, set the `name` property.\n *\n * You can either provide a boolean value to set the property to \"on\" or \"off\", or specify a string value\n * for the [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute.\n */\n autoComplete?: boolean | string;\n}\n\nexport interface InputSpellcheck {\n /**\n * Specifies the value of the `spellcheck` attribute on the native control.\n * This value controls the native browser capability to check for spelling/grammar errors.\n * If not set, the browser default behavior is to perform spellchecking.\n * For more details, check the [spellcheck MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).\n *\n * Enhanced spellchecking features of your browser and/or operating system may send input values to external parties.\n * Make sure it’s deactivated for fields with sensitive information to prevent\n * inadvertently sending data (such as user passwords) to third parties.\n */\n spellcheck?: boolean;\n}\n\nexport interface InputKeyEvents {\n /**\n * Called when the underlying native textarea emits a `keydown` event.\n * The event `detail` contains the `keyCode` and information\n * about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).\n */\n onKeyDown?: CancelableEventHandler<InputProps.KeyDetail>;\n\n /**\n * Called when the underlying native textarea emits a `keyup` event.\n * The event `detail` contains the `keyCode` and information\n * about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).\n */\n onKeyUp?: CancelableEventHandler<InputProps.KeyDetail>;\n}\n\nexport interface InputClearLabel {\n /**\n * Adds an `aria-label` to the clear button inside the search input.\n * @i18n\n */\n clearAriaLabel?: string;\n}\n\nexport interface InputProps\n extends BaseComponentProps,\n BaseInputProps,\n InputKeyEvents,\n InputAutoCorrect,\n InputAutoComplete,\n InputSpellcheck,\n InputClearLabel,\n FormFieldValidationControlProps {\n /**\n * Specifies the type of control to render.\n * Inputs with a `number` type use the native element behavior, which might\n * be slightly different across browsers.\n */\n type?: InputProps.Type;\n\n /**\n * Adds a hint to the browser about the type of data a user may enter into this field.\n * Some devices may render a different virtual keyboard depending on this value.\n * This value may not be supported by all browsers or devices.\n */\n inputMode?: InputProps.InputMode;\n\n /**\n * The step attribute is a number that specifies the granularity that the value\n * must adhere to or the keyword \"any\". It is valid for the numeric input types,\n * including the date, month, week, time, datetime-local, number and range types.\n */\n step?: InputProps.Step;\n}\n\nexport namespace InputProps {\n export type Type = 'text' | 'password' | 'search' | 'number' | 'email' | 'url';\n export type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n export type Step = number | 'any';\n\n export type ChangeDetail = BaseChangeDetail;\n export type KeyDetail = BaseKeyDetail;\n\n export interface Ref {\n /**\n * Sets input focus onto the UI control.\n */\n focus(): void;\n\n /**\n * Selects all text in the input control.\n */\n select(): void;\n }\n}\nexport interface BaseChangeDetail {\n value: string;\n}\n"]}
|
|
@@ -4,6 +4,7 @@ import { BaseComponentProps } from '../internal/base-component';
|
|
|
4
4
|
import { FormFieldValidationControlProps } from '../internal/context/form-field-context';
|
|
5
5
|
import { NonCancelableEventHandler } from '../internal/events';
|
|
6
6
|
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
7
|
+
import { SkipWarnings } from '../internal/utils/with-native-attributes';
|
|
7
8
|
import { BaseChangeDetail, BaseInputProps, InputAutoCorrect, InputProps } from './interfaces';
|
|
8
9
|
export interface InternalInputProps extends BaseComponentProps, BaseInputProps, Omit<InputProps, 'type'>, InputAutoCorrect, FormFieldValidationControlProps, InternalBaseComponentProps {
|
|
9
10
|
type?: InputProps['type'] | 'visualSearch';
|
|
@@ -12,7 +13,6 @@ export interface InternalInputProps extends BaseComponentProps, BaseInputProps,
|
|
|
12
13
|
__onLeftIconClick?: () => void;
|
|
13
14
|
__rightIcon?: IconProps['name'];
|
|
14
15
|
__onRightIconClick?: () => void;
|
|
15
|
-
__nativeAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
|
|
16
16
|
__noBorderRadius?: boolean;
|
|
17
17
|
__onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;
|
|
18
18
|
__onBlurWithDetail?: NonCancelableEventHandler<{
|
|
@@ -20,6 +20,7 @@ export interface InternalInputProps extends BaseComponentProps, BaseInputProps,
|
|
|
20
20
|
}>;
|
|
21
21
|
__inheritFormFieldProps?: boolean;
|
|
22
22
|
__injectAnalyticsComponentMetadata?: boolean;
|
|
23
|
+
__skipNativeAttributesWarnings?: SkipWarnings;
|
|
23
24
|
}
|
|
24
25
|
declare const _default: React.ForwardRefExoticComponent<InternalInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
25
26
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAW3C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,kBAAkB,EAAgB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,+BAA+B,EAAuB,MAAM,wCAAwC,CAAC;AAC9G,OAAO,EAA6C,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC1G,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAW3C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,kBAAkB,EAAgB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,+BAA+B,EAAuB,MAAM,wCAAwC,CAAC;AAC9G,OAAO,EAA6C,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC1G,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAA6B,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAK9F,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK9F,MAAM,WAAW,kBACf,SAAQ,kBAAkB,EACxB,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,EACxB,gBAAgB,EAChB,+BAA+B,EAC/B,0BAA0B;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC/B,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,kBAAkB,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAE/E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,8BAA8B,CAAC,EAAE,YAAY,CAAC;CAC/C;;AA+LD,wBAA+C"}
|
|
@@ -12,10 +12,11 @@ import { getBaseProps } from '../internal/base-component';
|
|
|
12
12
|
import { useFormFieldContext } from '../internal/context/form-field-context';
|
|
13
13
|
import { fireKeyboardEvent, fireNonCancelableEvent } from '../internal/events';
|
|
14
14
|
import { useDebounceCallback } from '../internal/hooks/use-debounce-callback';
|
|
15
|
+
import WithNativeAttributes from '../internal/utils/with-native-attributes';
|
|
15
16
|
import { convertAutoComplete, useSearchProps } from './utils';
|
|
16
17
|
import styles from './styles.css.js';
|
|
17
18
|
function InternalInput(_a, ref) {
|
|
18
|
-
var { type = 'text', step, inputMode, autoComplete = true, ariaLabel, clearAriaLabel: clearAriaLabelOverride, name, value, placeholder, autoFocus, disabled, readOnly, disableBrowserAutocorrect, spellcheck, __noBorderRadius, __leftIcon, __leftIconVariant = 'subtle', __onLeftIconClick, ariaRequired, __rightIcon, __onRightIconClick, onKeyDown, onKeyUp, onChange, __onDelayedInput, __onBlurWithDetail, onBlur, onFocus,
|
|
19
|
+
var { type = 'text', step, inputMode, autoComplete = true, ariaLabel, clearAriaLabel: clearAriaLabelOverride, name, value, placeholder, autoFocus, disabled, readOnly, disableBrowserAutocorrect, spellcheck, __noBorderRadius, __leftIcon, __leftIconVariant = 'subtle', __onLeftIconClick, ariaRequired, __rightIcon, __onRightIconClick, onKeyDown, onKeyUp, onChange, __onDelayedInput, __onBlurWithDetail, onBlur, onFocus, nativeInputAttributes, __internalRootRef, __inheritFormFieldProps, __injectAnalyticsComponentMetadata, __skipNativeAttributesWarnings } = _a, rest = __rest(_a, ["type", "step", "inputMode", "autoComplete", "ariaLabel", "clearAriaLabel", "name", "value", "placeholder", "autoFocus", "disabled", "readOnly", "disableBrowserAutocorrect", "spellcheck", "__noBorderRadius", "__leftIcon", "__leftIconVariant", "__onLeftIconClick", "ariaRequired", "__rightIcon", "__onRightIconClick", "onKeyDown", "onKeyUp", "onChange", "__onDelayedInput", "__onBlurWithDetail", "onBlur", "onFocus", "nativeInputAttributes", "__internalRootRef", "__inheritFormFieldProps", "__injectAnalyticsComponentMetadata", "__skipNativeAttributesWarnings"]);
|
|
19
20
|
const baseProps = getBaseProps(rest);
|
|
20
21
|
const i18n = useInternalI18n('input');
|
|
21
22
|
const fireDelayedInput = useDebounceCallback((value) => fireNonCancelableEvent(__onDelayedInput, { value }));
|
|
@@ -32,26 +33,40 @@ function InternalInput(_a, ref) {
|
|
|
32
33
|
const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = __inheritFormFieldProps
|
|
33
34
|
? formFieldContext
|
|
34
35
|
: rest;
|
|
35
|
-
const attributes =
|
|
36
|
+
const attributes = {
|
|
37
|
+
'aria-label': ariaLabel,
|
|
36
38
|
// aria-labelledby has precedence over aria-label in accessible name calculation.
|
|
37
39
|
// When aria-label is provided for Input, it should override aria-labelledBy from form-field context.
|
|
38
40
|
// If both aria-label and aria-labelledby come from Input props, aria-labelledby will be used in accessible name
|
|
39
|
-
'aria-labelledby': ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby,
|
|
41
|
+
'aria-labelledby': ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby,
|
|
42
|
+
'aria-describedby': ariaDescribedby,
|
|
43
|
+
name,
|
|
40
44
|
placeholder,
|
|
41
|
-
autoFocus,
|
|
45
|
+
autoFocus,
|
|
46
|
+
id: controlId,
|
|
47
|
+
className: clsx(styles.input, type && styles[`input-type-${type}`], __rightIcon && styles['input-has-icon-right'], __leftIcon && styles['input-has-icon-left'], __noBorderRadius && styles['input-has-no-border-radius'], {
|
|
42
48
|
[styles['input-readonly']]: readOnly,
|
|
43
49
|
[styles['input-invalid']]: invalid,
|
|
44
50
|
[styles['input-warning']]: warning && !invalid,
|
|
45
|
-
}),
|
|
51
|
+
}),
|
|
52
|
+
autoComplete: convertAutoComplete(autoComplete),
|
|
53
|
+
disabled,
|
|
46
54
|
readOnly,
|
|
47
55
|
type,
|
|
48
56
|
step,
|
|
49
|
-
inputMode,
|
|
57
|
+
inputMode,
|
|
58
|
+
spellCheck: spellcheck,
|
|
59
|
+
onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),
|
|
60
|
+
onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),
|
|
50
61
|
// We set a default value on the component in order to force it into the controlled mode.
|
|
51
|
-
value: value !== null && value !== void 0 ? value : '',
|
|
62
|
+
value: value !== null && value !== void 0 ? value : '',
|
|
63
|
+
onChange: onChange && (event => handleChange(event.target.value)),
|
|
64
|
+
onBlur: e => {
|
|
52
65
|
fireNonCancelableEvent(onBlur);
|
|
53
66
|
fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: e.relatedTarget });
|
|
54
|
-
},
|
|
67
|
+
},
|
|
68
|
+
onFocus: onFocus && (() => fireNonCancelableEvent(onFocus)),
|
|
69
|
+
};
|
|
55
70
|
if (type === 'number') {
|
|
56
71
|
// Chrome and Safari have a weird built-in behavior of letting focused
|
|
57
72
|
// number inputs be controlled by scrolling on them. However, they don't
|
|
@@ -87,7 +102,7 @@ function InternalInput(_a, ref) {
|
|
|
87
102
|
: copyAnalyticsMetadataAttribute(rest))),
|
|
88
103
|
__leftIcon && (React.createElement("span", { onClick: __onLeftIconClick, className: styles['input-icon-left'] },
|
|
89
104
|
React.createElement(InternalIcon, { name: __leftIcon, variant: disabled || readOnly ? 'disabled' : __leftIconVariant }))),
|
|
90
|
-
React.createElement(
|
|
105
|
+
React.createElement(WithNativeAttributes, Object.assign({}, attributes, { tag: "input", componentName: "Input", nativeAttributes: nativeInputAttributes, skipWarnings: __skipNativeAttributesWarnings, ref: mergedRef })),
|
|
91
106
|
__rightIcon && (React.createElement("span", Object.assign({ className: styles['input-icon-right'] }, (__rightIcon === 'close'
|
|
92
107
|
? getAnalyticsMetadataAttribute({
|
|
93
108
|
action: 'clearInput',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/input/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 React, { Ref, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport {\n copyAnalyticsMetadataAttribute,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalButton from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { BaseComponentProps, getBaseProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireKeyboardEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport {\n GeneratedAnalyticsMetadataInputClearInput,\n GeneratedAnalyticsMetadataInputComponent,\n} from './analytics-metadata/interfaces';\nimport { BaseChangeDetail, BaseInputProps, InputAutoCorrect, InputProps } from './interfaces';\nimport { convertAutoComplete, useSearchProps } from './utils';\n\nimport styles from './styles.css.js';\n\nexport interface InternalInputProps\n extends BaseComponentProps,\n BaseInputProps,\n Omit<InputProps, 'type'>,\n InputAutoCorrect,\n FormFieldValidationControlProps,\n InternalBaseComponentProps {\n type?: InputProps['type'] | 'visualSearch';\n __leftIcon?: IconProps['name'];\n __leftIconVariant?: IconProps['variant'];\n __onLeftIconClick?: () => void;\n\n __rightIcon?: IconProps['name'];\n __onRightIconClick?: () => void;\n\n __nativeAttributes?: React.InputHTMLAttributes<HTMLInputElement>;\n __noBorderRadius?: boolean;\n\n __onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n __onBlurWithDetail?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n\n __inheritFormFieldProps?: boolean;\n __injectAnalyticsComponentMetadata?: boolean;\n}\n\nfunction InternalInput(\n {\n type = 'text',\n step,\n inputMode,\n autoComplete = true,\n ariaLabel,\n clearAriaLabel: clearAriaLabelOverride,\n name,\n value,\n placeholder,\n autoFocus,\n disabled,\n readOnly,\n disableBrowserAutocorrect,\n spellcheck,\n __noBorderRadius,\n\n __leftIcon,\n __leftIconVariant = 'subtle',\n __onLeftIconClick,\n\n ariaRequired,\n\n __rightIcon,\n __onRightIconClick,\n\n onKeyDown,\n onKeyUp,\n onChange,\n __onDelayedInput,\n __onBlurWithDetail,\n onBlur,\n onFocus,\n __nativeAttributes,\n __internalRootRef,\n __inheritFormFieldProps,\n __injectAnalyticsComponentMetadata,\n ...rest\n }: InternalInputProps,\n ref: Ref<HTMLInputElement>\n) {\n const baseProps = getBaseProps(rest);\n const i18n = useInternalI18n('input');\n const fireDelayedInput = useDebounceCallback((value: string) => fireNonCancelableEvent(__onDelayedInput, { value }));\n\n const handleChange = (value: string) => {\n fireDelayedInput(value);\n fireNonCancelableEvent(onChange, { value });\n };\n\n const inputRef = useRef<HTMLInputElement>(null);\n const searchProps = useSearchProps(type, disabled, readOnly, value, inputRef, handleChange);\n __leftIcon = __leftIcon ?? searchProps.__leftIcon;\n __rightIcon = __rightIcon ?? searchProps.__rightIcon;\n __onRightIconClick = __onRightIconClick ?? searchProps.__onRightIconClick;\n\n const formFieldContext = useFormFieldContext(rest);\n const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = __inheritFormFieldProps\n ? formFieldContext\n : rest;\n\n const attributes: React.InputHTMLAttributes<HTMLInputElement> = {\n 'aria-label': ariaLabel,\n // aria-labelledby has precedence over aria-label in accessible name calculation.\n // When aria-label is provided for Input, it should override aria-labelledBy from form-field context.\n // If both aria-label and aria-labelledby come from Input props, aria-labelledby will be used in accessible name\n 'aria-labelledby': ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n name,\n placeholder,\n autoFocus,\n id: controlId,\n className: clsx(\n styles.input,\n type && styles[`input-type-${type}`],\n __rightIcon && styles['input-has-icon-right'],\n __leftIcon && styles['input-has-icon-left'],\n __noBorderRadius && styles['input-has-no-border-radius'],\n {\n [styles['input-readonly']]: readOnly,\n [styles['input-invalid']]: invalid,\n [styles['input-warning']]: warning && !invalid,\n }\n ),\n autoComplete: convertAutoComplete(autoComplete),\n disabled,\n readOnly,\n type,\n step,\n inputMode,\n spellCheck: spellcheck,\n onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n // We set a default value on the component in order to force it into the controlled mode.\n value: value ?? '',\n onChange: onChange && (event => handleChange(event.target.value)),\n onBlur: e => {\n fireNonCancelableEvent(onBlur);\n fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: e.relatedTarget });\n },\n onFocus: onFocus && (() => fireNonCancelableEvent(onFocus)),\n ...__nativeAttributes,\n };\n\n if (type === 'number') {\n // Chrome and Safari have a weird built-in behavior of letting focused\n // number inputs be controlled by scrolling on them. However, they don't\n // lock the browser's scroll, so it's very easy to accidentally increment\n // the input while scrolling down the page.\n attributes.onWheel = event => event.currentTarget.blur();\n }\n\n if (disableBrowserAutocorrect) {\n attributes.autoCorrect = 'off';\n attributes.autoCapitalize = 'off';\n }\n\n // ensure aria properties are string literal \"true\"\n if (ariaRequired) {\n attributes['aria-required'] = 'true';\n }\n if (invalid) {\n attributes['aria-invalid'] = 'true';\n }\n\n const mergedRef = useMergeRefs(ref, inputRef);\n\n // type = \"visualSearch\" renders a type=\"text' input\n if (attributes.type === 'visualSearch') {\n attributes.type = 'text';\n }\n\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataInputComponent = {\n name: 'awsui.Input',\n label: 'input',\n properties: {\n value: value || '',\n },\n };\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles['input-container'])}\n ref={__internalRootRef}\n dir={type === 'email' ? 'ltr' : undefined}\n {...(__injectAnalyticsComponentMetadata\n ? getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })\n : copyAnalyticsMetadataAttribute(rest))}\n >\n {__leftIcon && (\n <span onClick={__onLeftIconClick} className={styles['input-icon-left']}>\n <InternalIcon name={__leftIcon} variant={disabled || readOnly ? 'disabled' : __leftIconVariant} />\n </span>\n )}\n <input ref={mergedRef} {...attributes} />\n {__rightIcon && (\n <span\n className={styles['input-icon-right']}\n {...(__rightIcon === 'close'\n ? getAnalyticsMetadataAttribute({\n action: 'clearInput',\n } as Partial<GeneratedAnalyticsMetadataInputClearInput>)\n : {})}\n >\n <InternalButton\n // Used for test utils\n className={styles['input-button-right']}\n variant=\"inline-icon-pointer-target\"\n formAction=\"none\"\n iconName={__rightIcon}\n onClick={__onRightIconClick}\n ariaLabel={i18n('clearAriaLabel', clearAriaLabelOverride)}\n disabled={disabled}\n />\n </span>\n )}\n </div>\n );\n}\n\nexport default React.forwardRef(InternalInput);\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/input/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 React, { Ref, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport {\n copyAnalyticsMetadataAttribute,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalButton from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { BaseComponentProps, getBaseProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireKeyboardEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport WithNativeAttributes, { SkipWarnings } from '../internal/utils/with-native-attributes';\nimport {\n GeneratedAnalyticsMetadataInputClearInput,\n GeneratedAnalyticsMetadataInputComponent,\n} from './analytics-metadata/interfaces';\nimport { BaseChangeDetail, BaseInputProps, InputAutoCorrect, InputProps } from './interfaces';\nimport { convertAutoComplete, useSearchProps } from './utils';\n\nimport styles from './styles.css.js';\n\nexport interface InternalInputProps\n extends BaseComponentProps,\n BaseInputProps,\n Omit<InputProps, 'type'>,\n InputAutoCorrect,\n FormFieldValidationControlProps,\n InternalBaseComponentProps {\n type?: InputProps['type'] | 'visualSearch';\n __leftIcon?: IconProps['name'];\n __leftIconVariant?: IconProps['variant'];\n __onLeftIconClick?: () => void;\n\n __rightIcon?: IconProps['name'];\n __onRightIconClick?: () => void;\n\n __noBorderRadius?: boolean;\n\n __onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n __onBlurWithDetail?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n\n __inheritFormFieldProps?: boolean;\n __injectAnalyticsComponentMetadata?: boolean;\n __skipNativeAttributesWarnings?: SkipWarnings;\n}\n\nfunction InternalInput(\n {\n type = 'text',\n step,\n inputMode,\n autoComplete = true,\n ariaLabel,\n clearAriaLabel: clearAriaLabelOverride,\n name,\n value,\n placeholder,\n autoFocus,\n disabled,\n readOnly,\n disableBrowserAutocorrect,\n spellcheck,\n __noBorderRadius,\n\n __leftIcon,\n __leftIconVariant = 'subtle',\n __onLeftIconClick,\n\n ariaRequired,\n\n __rightIcon,\n __onRightIconClick,\n\n onKeyDown,\n onKeyUp,\n onChange,\n __onDelayedInput,\n __onBlurWithDetail,\n onBlur,\n onFocus,\n nativeInputAttributes,\n __internalRootRef,\n __inheritFormFieldProps,\n __injectAnalyticsComponentMetadata,\n __skipNativeAttributesWarnings,\n ...rest\n }: InternalInputProps,\n ref: Ref<HTMLInputElement>\n) {\n const baseProps = getBaseProps(rest);\n const i18n = useInternalI18n('input');\n const fireDelayedInput = useDebounceCallback((value: string) => fireNonCancelableEvent(__onDelayedInput, { value }));\n\n const handleChange = (value: string) => {\n fireDelayedInput(value);\n fireNonCancelableEvent(onChange, { value });\n };\n\n const inputRef = useRef<HTMLInputElement>(null);\n const searchProps = useSearchProps(type, disabled, readOnly, value, inputRef, handleChange);\n __leftIcon = __leftIcon ?? searchProps.__leftIcon;\n __rightIcon = __rightIcon ?? searchProps.__rightIcon;\n __onRightIconClick = __onRightIconClick ?? searchProps.__onRightIconClick;\n\n const formFieldContext = useFormFieldContext(rest);\n const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = __inheritFormFieldProps\n ? formFieldContext\n : rest;\n\n const attributes: React.InputHTMLAttributes<HTMLInputElement> = {\n 'aria-label': ariaLabel,\n // aria-labelledby has precedence over aria-label in accessible name calculation.\n // When aria-label is provided for Input, it should override aria-labelledBy from form-field context.\n // If both aria-label and aria-labelledby come from Input props, aria-labelledby will be used in accessible name\n 'aria-labelledby': ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n name,\n placeholder,\n autoFocus,\n id: controlId,\n className: clsx(\n styles.input,\n type && styles[`input-type-${type}`],\n __rightIcon && styles['input-has-icon-right'],\n __leftIcon && styles['input-has-icon-left'],\n __noBorderRadius && styles['input-has-no-border-radius'],\n {\n [styles['input-readonly']]: readOnly,\n [styles['input-invalid']]: invalid,\n [styles['input-warning']]: warning && !invalid,\n }\n ),\n autoComplete: convertAutoComplete(autoComplete),\n disabled,\n readOnly,\n type,\n step,\n inputMode,\n spellCheck: spellcheck,\n onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n // We set a default value on the component in order to force it into the controlled mode.\n value: value ?? '',\n onChange: onChange && (event => handleChange(event.target.value)),\n onBlur: e => {\n fireNonCancelableEvent(onBlur);\n fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: e.relatedTarget });\n },\n onFocus: onFocus && (() => fireNonCancelableEvent(onFocus)),\n };\n\n if (type === 'number') {\n // Chrome and Safari have a weird built-in behavior of letting focused\n // number inputs be controlled by scrolling on them. However, they don't\n // lock the browser's scroll, so it's very easy to accidentally increment\n // the input while scrolling down the page.\n attributes.onWheel = event => event.currentTarget.blur();\n }\n\n if (disableBrowserAutocorrect) {\n attributes.autoCorrect = 'off';\n attributes.autoCapitalize = 'off';\n }\n\n // ensure aria properties are string literal \"true\"\n if (ariaRequired) {\n attributes['aria-required'] = 'true';\n }\n if (invalid) {\n attributes['aria-invalid'] = 'true';\n }\n\n const mergedRef = useMergeRefs(ref, inputRef);\n\n // type = \"visualSearch\" renders a type=\"text' input\n if (attributes.type === 'visualSearch') {\n attributes.type = 'text';\n }\n\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataInputComponent = {\n name: 'awsui.Input',\n label: 'input',\n properties: {\n value: value || '',\n },\n };\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles['input-container'])}\n ref={__internalRootRef}\n dir={type === 'email' ? 'ltr' : undefined}\n {...(__injectAnalyticsComponentMetadata\n ? getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })\n : copyAnalyticsMetadataAttribute(rest))}\n >\n {__leftIcon && (\n <span onClick={__onLeftIconClick} className={styles['input-icon-left']}>\n <InternalIcon name={__leftIcon} variant={disabled || readOnly ? 'disabled' : __leftIconVariant} />\n </span>\n )}\n <WithNativeAttributes\n {...attributes}\n tag=\"input\"\n componentName=\"Input\"\n nativeAttributes={nativeInputAttributes}\n skipWarnings={__skipNativeAttributesWarnings}\n ref={mergedRef}\n />\n {__rightIcon && (\n <span\n className={styles['input-icon-right']}\n {...(__rightIcon === 'close'\n ? getAnalyticsMetadataAttribute({\n action: 'clearInput',\n } as Partial<GeneratedAnalyticsMetadataInputClearInput>)\n : {})}\n >\n <InternalButton\n // Used for test utils\n className={styles['input-button-right']}\n variant=\"inline-icon-pointer-target\"\n formAction=\"none\"\n iconName={__rightIcon}\n onClick={__onRightIconClick}\n ariaLabel={i18n('clearAriaLabel', clearAriaLabelOverride)}\n disabled={disabled}\n />\n </span>\n )}\n </div>\n );\n}\n\nexport default React.forwardRef(InternalInput);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/autosuggest-input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAGrF,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,cAAc,EACf,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,+BAA+B,EAAuB,MAAM,kCAAkC,CAAC;AACxG,OAAO,EAA8D,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACrH,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/autosuggest-input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAGrF,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,cAAc,EACf,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,+BAA+B,EAAuB,MAAM,kCAAkC,CAAC;AACxG,OAAO,EAA8D,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACrH,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAK5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI1D,UAAU,qBACR,SAAQ,kBAAkB,EACxB,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,+BAA+B,EAC/B,gBAAgB,EAChB,0BAA0B;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC;CAC9B;AAED,UAAU,4BAA4B;IACpC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB,CAAC,GAAG;IAC/D,KAAK,CAAC,OAAO,CAAC,EAAE,4BAA4B,GAAG,IAAI,CAAC;IACpD,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;CACf;AAED,QAAA,MAAM,gBAAgB,mGAqPrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -9,10 +9,11 @@ import { useFormFieldContext } from '../../context/form-field-context';
|
|
|
9
9
|
import { fireCancelableEvent, fireNonCancelableEvent } from '../../events';
|
|
10
10
|
import { KeyCode } from '../../keycode';
|
|
11
11
|
import { nodeBelongs } from '../../utils/node-belongs';
|
|
12
|
+
import { processAttributes } from '../../utils/with-native-attributes';
|
|
12
13
|
import Dropdown from '../dropdown';
|
|
13
14
|
import styles from './styles.css.js';
|
|
14
15
|
const AutosuggestInput = React.forwardRef((_a, ref) => {
|
|
15
|
-
var { value, onChange, onBlur, onFocus, onKeyUp, onKeyDown, name, placeholder, disabled, readOnly, autoFocus, ariaLabel, ariaRequired, disableBrowserAutocorrect = false, expandToViewport, ariaControls, ariaActivedescendant, clearAriaLabel, dropdownExpanded = true, dropdownContentKey, dropdownContentFocusable = false, dropdownContent = null, dropdownFooter = null, dropdownWidth, loopFocus, onCloseDropdown, onDelayedInput, onPressArrowDown, onPressArrowUp, onPressEnter, __internalRootRef } = _a, restProps = __rest(_a, ["value", "onChange", "onBlur", "onFocus", "onKeyUp", "onKeyDown", "name", "placeholder", "disabled", "readOnly", "autoFocus", "ariaLabel", "ariaRequired", "disableBrowserAutocorrect", "expandToViewport", "ariaControls", "ariaActivedescendant", "clearAriaLabel", "dropdownExpanded", "dropdownContentKey", "dropdownContentFocusable", "dropdownContent", "dropdownFooter", "dropdownWidth", "loopFocus", "onCloseDropdown", "onDelayedInput", "onPressArrowDown", "onPressArrowUp", "onPressEnter", "__internalRootRef"]);
|
|
16
|
+
var { value, onChange, onBlur, onFocus, onKeyUp, onKeyDown, name, placeholder, disabled, readOnly, autoFocus, ariaLabel, ariaRequired, disableBrowserAutocorrect = false, expandToViewport, ariaControls, ariaActivedescendant, clearAriaLabel, dropdownExpanded = true, dropdownContentKey, dropdownContentFocusable = false, dropdownContent = null, dropdownFooter = null, dropdownWidth, loopFocus, nativeInputAttributes, onCloseDropdown, onDelayedInput, onPressArrowDown, onPressArrowUp, onPressEnter, __internalRootRef } = _a, restProps = __rest(_a, ["value", "onChange", "onBlur", "onFocus", "onKeyUp", "onKeyDown", "name", "placeholder", "disabled", "readOnly", "autoFocus", "ariaLabel", "ariaRequired", "disableBrowserAutocorrect", "expandToViewport", "ariaControls", "ariaActivedescendant", "clearAriaLabel", "dropdownExpanded", "dropdownContentKey", "dropdownContentFocusable", "dropdownContent", "dropdownFooter", "dropdownWidth", "loopFocus", "nativeInputAttributes", "onCloseDropdown", "onDelayedInput", "onPressArrowDown", "onPressArrowUp", "onPressEnter", "__internalRootRef"]);
|
|
16
17
|
const baseProps = getBaseProps(restProps);
|
|
17
18
|
const formFieldContext = useFormFieldContext(restProps);
|
|
18
19
|
const inputRef = useRef(null);
|
|
@@ -152,7 +153,7 @@ const AutosuggestInput = React.forwardRef((_a, ref) => {
|
|
|
152
153
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
153
154
|
}, [open]);
|
|
154
155
|
return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }),
|
|
155
|
-
React.createElement(Dropdown, { minWidth: dropdownWidth, stretchWidth: !dropdownWidth, stretchBeyondTriggerWidth: true, contentKey: dropdownContentKey, onFocus: handleFocus, onBlur: handleBlur, trigger: React.createElement(InternalInput, Object.assign({ type: "visualSearch", value: value, onChange: event => handleChange(event.detail.value), __onDelayedInput: event => handleDelayedInput(event.detail.value), onKeyDown: handleKeyDown, onKeyUp: onKeyUp, disabled: disabled, disableBrowserAutocorrect: disableBrowserAutocorrect, readOnly: readOnly, ariaRequired: ariaRequired, clearAriaLabel: clearAriaLabel, ref: inputRef, autoComplete: false,
|
|
156
|
+
React.createElement(Dropdown, { minWidth: dropdownWidth, stretchWidth: !dropdownWidth, stretchBeyondTriggerWidth: true, contentKey: dropdownContentKey, onFocus: handleFocus, onBlur: handleBlur, trigger: React.createElement(InternalInput, Object.assign({ type: "visualSearch", value: value, onChange: event => handleChange(event.detail.value), __onDelayedInput: event => handleDelayedInput(event.detail.value), onKeyDown: handleKeyDown, onKeyUp: onKeyUp, disabled: disabled, disableBrowserAutocorrect: disableBrowserAutocorrect, readOnly: readOnly, ariaRequired: ariaRequired, clearAriaLabel: clearAriaLabel, ref: inputRef, autoComplete: false, nativeInputAttributes: processAttributes(nativeAttributes, nativeInputAttributes, 'Autosuggest'), __skipNativeAttributesWarnings: Object.keys(nativeAttributes) }, formFieldContext)), onMouseDown: handleDropdownMouseDown, open: open && (!!dropdownContent || !!dropdownFooter), footer: dropdownFooterRef && (React.createElement("div", { ref: dropdownFooterRef, className: styles['dropdown-footer'] }, open && dropdownFooter ? dropdownFooter : null)), expandToViewport: expandToViewport, loopFocus: loopFocus }, open && dropdownContent ? (React.createElement("div", { ref: dropdownContentRef, className: styles['dropdown-content'] }, dropdownContent)) : null)));
|
|
156
157
|
});
|
|
157
158
|
export default AutosuggestInput;
|
|
158
159
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/autosuggest-input/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\n\nimport React, { Ref, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { AutosuggestProps } from '../../../autosuggest/interfaces';\nimport {\n BaseChangeDetail,\n BaseInputProps,\n InputAutoCorrect,\n InputClearLabel,\n InputKeyEvents,\n} from '../../../input/interfaces';\nimport InternalInput, { InternalInputProps } from '../../../input/internal';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../../context/form-field-context';\nimport { BaseKeyDetail, fireCancelableEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport { KeyCode } from '../../keycode';\nimport { nodeBelongs } from '../../utils/node-belongs';\nimport Dropdown from '../dropdown';\nimport { ExpandToViewport } from '../dropdown/interfaces';\n\nimport styles from './styles.css.js';\n\ninterface AutosuggestInputProps\n extends BaseComponentProps,\n BaseInputProps,\n InputAutoCorrect,\n InputKeyEvents,\n InputClearLabel,\n FormFieldValidationControlProps,\n ExpandToViewport,\n InternalBaseComponentProps {\n ariaControls?: string;\n ariaActivedescendant?: string;\n dropdownExpanded?: boolean;\n dropdownContentKey?: string;\n dropdownContentFocusable?: boolean;\n dropdownContent?: React.ReactNode;\n dropdownFooter?: React.ReactNode;\n dropdownWidth?: number;\n loopFocus?: boolean;\n onCloseDropdown?: NonCancelableEventHandler<null>;\n onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n onPressArrowDown?: () => void;\n onPressArrowUp?: () => void;\n onPressEnter?: () => boolean;\n}\n\ninterface AutosuggestInputFocusOptions {\n preventDropdown?: boolean;\n}\n\nexport interface AutosuggestInputRef extends AutosuggestProps.Ref {\n focus(options?: AutosuggestInputFocusOptions): void;\n open(): void;\n close(): void;\n}\n\nconst AutosuggestInput = React.forwardRef(\n (\n {\n value,\n onChange,\n onBlur,\n onFocus,\n onKeyUp,\n onKeyDown,\n name,\n placeholder,\n disabled,\n readOnly,\n autoFocus,\n ariaLabel,\n ariaRequired,\n disableBrowserAutocorrect = false,\n expandToViewport,\n ariaControls,\n ariaActivedescendant,\n clearAriaLabel,\n dropdownExpanded = true,\n dropdownContentKey,\n dropdownContentFocusable = false,\n dropdownContent = null,\n dropdownFooter = null,\n dropdownWidth,\n loopFocus,\n onCloseDropdown,\n onDelayedInput,\n onPressArrowDown,\n onPressArrowUp,\n onPressEnter,\n __internalRootRef,\n ...restProps\n }: AutosuggestInputProps,\n ref: Ref<AutosuggestInputRef>\n ) => {\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const dropdownContentRef = useRef<HTMLDivElement>(null);\n const dropdownFooterRef = useRef<HTMLDivElement>(null);\n const preventOpenOnFocusRef = useRef(false);\n const preventCloseOnBlurRef = useRef(false);\n\n const [open, setOpen] = useState(false);\n\n const openDropdown = () => !readOnly && setOpen(true);\n\n const closeDropdown = () => {\n setOpen(false);\n fireNonCancelableEvent(onCloseDropdown, null);\n };\n\n useImperativeHandle(ref, () => ({\n focus(options?: AutosuggestInputFocusOptions) {\n if (options?.preventDropdown) {\n preventOpenOnFocusRef.current = true;\n }\n inputRef.current?.focus();\n },\n select() {\n inputRef.current?.select();\n },\n open: openDropdown,\n close: closeDropdown,\n }));\n\n const handleBlur = () => {\n if (!preventCloseOnBlurRef.current) {\n closeDropdown();\n fireNonCancelableEvent(onBlur, null);\n }\n };\n\n const handleFocus = () => {\n if (!preventOpenOnFocusRef.current) {\n openDropdown();\n fireNonCancelableEvent(onFocus, null);\n }\n preventOpenOnFocusRef.current = false;\n };\n\n const fireKeydown = (event: CustomEvent<BaseKeyDetail>) => fireCancelableEvent(onKeyDown, event.detail, event);\n\n const handleKeyDown = (event: CustomEvent<BaseKeyDetail>) => {\n switch (event.detail.keyCode) {\n case KeyCode.down: {\n onPressArrowDown?.();\n openDropdown();\n event.preventDefault();\n break;\n }\n case KeyCode.up: {\n onPressArrowUp?.();\n openDropdown();\n event.preventDefault();\n break;\n }\n case KeyCode.enter: {\n if (open) {\n if (!onPressEnter?.()) {\n closeDropdown();\n }\n event.preventDefault();\n }\n fireKeydown(event);\n break;\n }\n case KeyCode.escape: {\n if (open) {\n event.stopPropagation();\n closeDropdown();\n } else if (value) {\n event.stopPropagation();\n fireNonCancelableEvent(onChange, { value: '' });\n }\n event.preventDefault();\n fireKeydown(event);\n break;\n }\n default: {\n fireKeydown(event);\n }\n }\n };\n\n const handleChange = (value: string) => {\n openDropdown();\n fireNonCancelableEvent(onChange, { value });\n };\n\n const handleDelayedInput = (value: string) => {\n fireNonCancelableEvent(onDelayedInput, { value });\n };\n\n const handleDropdownMouseDown: React.MouseEventHandler = event => {\n // Prevent currently focused element from losing focus.\n if (!dropdownContentFocusable) {\n event.preventDefault();\n }\n // Prevent closing dropdown on click inside.\n else {\n preventCloseOnBlurRef.current = true;\n requestAnimationFrame(() => {\n preventCloseOnBlurRef.current = false;\n });\n }\n };\n\n const expanded = open && dropdownExpanded;\n const nativeAttributes: InternalInputProps['__nativeAttributes'] = {\n name,\n placeholder,\n autoFocus,\n onClick: openDropdown,\n role: 'combobox',\n 'aria-autocomplete': 'list',\n 'aria-expanded': expanded,\n 'aria-controls': open ? ariaControls : undefined,\n // 'aria-owns' needed for safari+vo to announce activedescendant content\n 'aria-owns': open ? ariaControls : undefined,\n 'aria-label': ariaLabel,\n 'aria-activedescendant': ariaActivedescendant,\n };\n\n // Closes dropdown when outside click is detected.\n // Similar to the internal dropdown implementation but includes the target as well.\n useEffect(() => {\n if (!open) {\n return;\n }\n\n const clickListener = (event: MouseEvent) => {\n if (\n !nodeBelongs(inputRef.current, event.target) &&\n !nodeBelongs(dropdownContentRef.current, event.target) &&\n !nodeBelongs(dropdownFooterRef.current, event.target)\n ) {\n closeDropdown();\n }\n };\n\n window.addEventListener('mousedown', clickListener);\n\n return () => {\n window.removeEventListener('mousedown', clickListener);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n <Dropdown\n minWidth={dropdownWidth}\n stretchWidth={!dropdownWidth}\n stretchBeyondTriggerWidth={true}\n contentKey={dropdownContentKey}\n onFocus={handleFocus}\n onBlur={handleBlur}\n trigger={\n <InternalInput\n type=\"visualSearch\"\n value={value}\n onChange={event => handleChange(event.detail.value)}\n __onDelayedInput={event => handleDelayedInput(event.detail.value)}\n onKeyDown={handleKeyDown}\n onKeyUp={onKeyUp}\n disabled={disabled}\n disableBrowserAutocorrect={disableBrowserAutocorrect}\n readOnly={readOnly}\n ariaRequired={ariaRequired}\n clearAriaLabel={clearAriaLabel}\n ref={inputRef}\n autoComplete={false}\n __nativeAttributes={nativeAttributes}\n {...formFieldContext}\n />\n }\n onMouseDown={handleDropdownMouseDown}\n open={open && (!!dropdownContent || !!dropdownFooter)}\n footer={\n dropdownFooterRef && (\n <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>\n {open && dropdownFooter ? dropdownFooter : null}\n </div>\n )\n }\n expandToViewport={expandToViewport}\n loopFocus={loopFocus}\n >\n {open && dropdownContent ? (\n <div ref={dropdownContentRef} className={styles['dropdown-content']}>\n {dropdownContent}\n </div>\n ) : null}\n </Dropdown>\n </div>\n );\n }\n);\n\nexport default AutosuggestInput;\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/autosuggest-input/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\n\nimport React, { Ref, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { AutosuggestProps } from '../../../autosuggest/interfaces';\nimport {\n BaseChangeDetail,\n BaseInputProps,\n InputAutoCorrect,\n InputClearLabel,\n InputKeyEvents,\n} from '../../../input/interfaces';\nimport InternalInput from '../../../input/internal';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../../context/form-field-context';\nimport { BaseKeyDetail, fireCancelableEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport { KeyCode } from '../../keycode';\nimport { nodeBelongs } from '../../utils/node-belongs';\nimport { processAttributes } from '../../utils/with-native-attributes';\nimport Dropdown from '../dropdown';\nimport { ExpandToViewport } from '../dropdown/interfaces';\n\nimport styles from './styles.css.js';\n\ninterface AutosuggestInputProps\n extends BaseComponentProps,\n BaseInputProps,\n InputAutoCorrect,\n InputKeyEvents,\n InputClearLabel,\n FormFieldValidationControlProps,\n ExpandToViewport,\n InternalBaseComponentProps {\n ariaControls?: string;\n ariaActivedescendant?: string;\n dropdownExpanded?: boolean;\n dropdownContentKey?: string;\n dropdownContentFocusable?: boolean;\n dropdownContent?: React.ReactNode;\n dropdownFooter?: React.ReactNode;\n dropdownWidth?: number;\n loopFocus?: boolean;\n onCloseDropdown?: NonCancelableEventHandler<null>;\n onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n onPressArrowDown?: () => void;\n onPressArrowUp?: () => void;\n onPressEnter?: () => boolean;\n}\n\ninterface AutosuggestInputFocusOptions {\n preventDropdown?: boolean;\n}\n\nexport interface AutosuggestInputRef extends AutosuggestProps.Ref {\n focus(options?: AutosuggestInputFocusOptions): void;\n open(): void;\n close(): void;\n}\n\nconst AutosuggestInput = React.forwardRef(\n (\n {\n value,\n onChange,\n onBlur,\n onFocus,\n onKeyUp,\n onKeyDown,\n name,\n placeholder,\n disabled,\n readOnly,\n autoFocus,\n ariaLabel,\n ariaRequired,\n disableBrowserAutocorrect = false,\n expandToViewport,\n ariaControls,\n ariaActivedescendant,\n clearAriaLabel,\n dropdownExpanded = true,\n dropdownContentKey,\n dropdownContentFocusable = false,\n dropdownContent = null,\n dropdownFooter = null,\n dropdownWidth,\n loopFocus,\n nativeInputAttributes,\n onCloseDropdown,\n onDelayedInput,\n onPressArrowDown,\n onPressArrowUp,\n onPressEnter,\n __internalRootRef,\n ...restProps\n }: AutosuggestInputProps,\n ref: Ref<AutosuggestInputRef>\n ) => {\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const dropdownContentRef = useRef<HTMLDivElement>(null);\n const dropdownFooterRef = useRef<HTMLDivElement>(null);\n const preventOpenOnFocusRef = useRef(false);\n const preventCloseOnBlurRef = useRef(false);\n\n const [open, setOpen] = useState(false);\n\n const openDropdown = () => !readOnly && setOpen(true);\n\n const closeDropdown = () => {\n setOpen(false);\n fireNonCancelableEvent(onCloseDropdown, null);\n };\n\n useImperativeHandle(ref, () => ({\n focus(options?: AutosuggestInputFocusOptions) {\n if (options?.preventDropdown) {\n preventOpenOnFocusRef.current = true;\n }\n inputRef.current?.focus();\n },\n select() {\n inputRef.current?.select();\n },\n open: openDropdown,\n close: closeDropdown,\n }));\n\n const handleBlur = () => {\n if (!preventCloseOnBlurRef.current) {\n closeDropdown();\n fireNonCancelableEvent(onBlur, null);\n }\n };\n\n const handleFocus = () => {\n if (!preventOpenOnFocusRef.current) {\n openDropdown();\n fireNonCancelableEvent(onFocus, null);\n }\n preventOpenOnFocusRef.current = false;\n };\n\n const fireKeydown = (event: CustomEvent<BaseKeyDetail>) => fireCancelableEvent(onKeyDown, event.detail, event);\n\n const handleKeyDown = (event: CustomEvent<BaseKeyDetail>) => {\n switch (event.detail.keyCode) {\n case KeyCode.down: {\n onPressArrowDown?.();\n openDropdown();\n event.preventDefault();\n break;\n }\n case KeyCode.up: {\n onPressArrowUp?.();\n openDropdown();\n event.preventDefault();\n break;\n }\n case KeyCode.enter: {\n if (open) {\n if (!onPressEnter?.()) {\n closeDropdown();\n }\n event.preventDefault();\n }\n fireKeydown(event);\n break;\n }\n case KeyCode.escape: {\n if (open) {\n event.stopPropagation();\n closeDropdown();\n } else if (value) {\n event.stopPropagation();\n fireNonCancelableEvent(onChange, { value: '' });\n }\n event.preventDefault();\n fireKeydown(event);\n break;\n }\n default: {\n fireKeydown(event);\n }\n }\n };\n\n const handleChange = (value: string) => {\n openDropdown();\n fireNonCancelableEvent(onChange, { value });\n };\n\n const handleDelayedInput = (value: string) => {\n fireNonCancelableEvent(onDelayedInput, { value });\n };\n\n const handleDropdownMouseDown: React.MouseEventHandler = event => {\n // Prevent currently focused element from losing focus.\n if (!dropdownContentFocusable) {\n event.preventDefault();\n }\n // Prevent closing dropdown on click inside.\n else {\n preventCloseOnBlurRef.current = true;\n requestAnimationFrame(() => {\n preventCloseOnBlurRef.current = false;\n });\n }\n };\n\n const expanded = open && dropdownExpanded;\n const nativeAttributes: BaseInputProps['nativeInputAttributes'] = {\n name,\n placeholder,\n autoFocus,\n onClick: openDropdown,\n role: 'combobox',\n 'aria-autocomplete': 'list',\n 'aria-expanded': expanded,\n 'aria-controls': open ? ariaControls : undefined,\n // 'aria-owns' needed for safari+vo to announce activedescendant content\n 'aria-owns': open ? ariaControls : undefined,\n 'aria-label': ariaLabel,\n 'aria-activedescendant': ariaActivedescendant,\n };\n\n // Closes dropdown when outside click is detected.\n // Similar to the internal dropdown implementation but includes the target as well.\n useEffect(() => {\n if (!open) {\n return;\n }\n\n const clickListener = (event: MouseEvent) => {\n if (\n !nodeBelongs(inputRef.current, event.target) &&\n !nodeBelongs(dropdownContentRef.current, event.target) &&\n !nodeBelongs(dropdownFooterRef.current, event.target)\n ) {\n closeDropdown();\n }\n };\n\n window.addEventListener('mousedown', clickListener);\n\n return () => {\n window.removeEventListener('mousedown', clickListener);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n <Dropdown\n minWidth={dropdownWidth}\n stretchWidth={!dropdownWidth}\n stretchBeyondTriggerWidth={true}\n contentKey={dropdownContentKey}\n onFocus={handleFocus}\n onBlur={handleBlur}\n trigger={\n <InternalInput\n type=\"visualSearch\"\n value={value}\n onChange={event => handleChange(event.detail.value)}\n __onDelayedInput={event => handleDelayedInput(event.detail.value)}\n onKeyDown={handleKeyDown}\n onKeyUp={onKeyUp}\n disabled={disabled}\n disableBrowserAutocorrect={disableBrowserAutocorrect}\n readOnly={readOnly}\n ariaRequired={ariaRequired}\n clearAriaLabel={clearAriaLabel}\n ref={inputRef}\n autoComplete={false}\n nativeInputAttributes={processAttributes(nativeAttributes, nativeInputAttributes, 'Autosuggest')}\n __skipNativeAttributesWarnings={Object.keys(nativeAttributes)}\n {...formFieldContext}\n />\n }\n onMouseDown={handleDropdownMouseDown}\n open={open && (!!dropdownContent || !!dropdownFooter)}\n footer={\n dropdownFooterRef && (\n <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>\n {open && dropdownFooter ? dropdownFooter : null}\n </div>\n )\n }\n expandToViewport={expandToViewport}\n loopFocus={loopFocus}\n >\n {open && dropdownContent ? (\n <div ref={dropdownContentRef} className={styles['dropdown-content']}>\n {dropdownContent}\n </div>\n ) : null}\n </Dropdown>\n </div>\n );\n }\n);\n\nexport default AutosuggestInput;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/masked-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/masked-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAS9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIhD,QAAA,MAAM,WAAW,+FAgEhB,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,eAAe,WAAW,CAAC"}
|
|
@@ -7,10 +7,11 @@ import InternalInput from '../../../input/internal';
|
|
|
7
7
|
import { getBaseProps } from '../../base-component';
|
|
8
8
|
import { useFormFieldContext } from '../../context/form-field-context';
|
|
9
9
|
import { fireCancelableEvent, fireNonCancelableEvent } from '../../events';
|
|
10
|
+
import { processAttributes } from '../../utils/with-native-attributes';
|
|
10
11
|
import useMask from './use-mask';
|
|
11
12
|
import MaskFormat from './utils/mask-format';
|
|
12
13
|
const MaskedInput = React.forwardRef((_a, ref) => {
|
|
13
|
-
var { value, onBlur, onChange, onKeyDown, mask, autofix = false, disableAutocompleteOnBlur = false, showUnmaskedValue = false } = _a, rest = __rest(_a, ["value", "onBlur", "onChange", "onKeyDown", "mask", "autofix", "disableAutocompleteOnBlur", "showUnmaskedValue"]);
|
|
14
|
+
var { value, onBlur, onChange, onKeyDown, mask, autofix = false, disableAutocompleteOnBlur = false, showUnmaskedValue = false, nativeInputAttributes } = _a, rest = __rest(_a, ["value", "onBlur", "onChange", "onKeyDown", "mask", "autofix", "disableAutocompleteOnBlur", "showUnmaskedValue", "nativeInputAttributes"]);
|
|
14
15
|
const baseProps = getBaseProps(rest);
|
|
15
16
|
const formFieldContext = useFormFieldContext(rest);
|
|
16
17
|
const inputRef = React.useRef(null);
|
|
@@ -35,9 +36,9 @@ const MaskedInput = React.forwardRef((_a, ref) => {
|
|
|
35
36
|
}), { onPaste } = _b, maskProps = __rest(_b, ["onPaste"]);
|
|
36
37
|
const inputProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, rest), baseProps), formFieldContext), maskProps), { value: showUnmaskedValue ? value : maskProps.value });
|
|
37
38
|
const mergedRef = useMergeRefs(ref, inputRef);
|
|
38
|
-
return (React.createElement(InternalInput, Object.assign({}, inputProps, { ref: mergedRef,
|
|
39
|
+
return (React.createElement(InternalInput, Object.assign({}, inputProps, { ref: mergedRef, nativeInputAttributes: processAttributes({
|
|
39
40
|
onPaste,
|
|
40
|
-
} })));
|
|
41
|
+
}, nativeInputAttributes, 'MaskedInput') })));
|
|
41
42
|
});
|
|
42
43
|
export default MaskedInput;
|
|
43
44
|
//# sourceMappingURL=index.js.map
|