carbon-react 158.50.0 → 159.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/__internal__/checkable-input/__next__/checkable-input.component.js +1 -1
- package/esm/__internal__/checkable-input/__next__/checkable-input.style.js +1 -1
- package/esm/__internal__/checkable-input/checkable-input.style.js +1 -1
- package/esm/__internal__/error-border/error-border.style.d.ts +4 -0
- package/esm/__internal__/error-border/error-border.style.js +1 -0
- package/esm/__internal__/fieldset/__next__/fieldset.component.js +1 -1
- package/esm/__internal__/fieldset/fieldset.component.js +1 -1
- package/esm/__internal__/fieldset-validation-context/fieldset-validation-context.d.ts +6 -0
- package/esm/__internal__/fieldset-validation-context/index.d.ts +1 -0
- package/esm/__internal__/fieldset-validation-context/index.js +1 -0
- package/esm/__internal__/form-field/form-field.component.d.ts +1 -1
- package/esm/__internal__/form-field/form-field.component.js +1 -1
- package/esm/__internal__/hint-text/hint-text.component.d.ts +6 -21
- package/esm/__internal__/hint-text/hint-text.component.js +1 -1
- package/esm/__internal__/hint-text/hint-text.style.d.ts +5 -2
- package/esm/__internal__/hint-text/hint-text.style.js +1 -1
- package/esm/__internal__/hint-text/index.d.ts +0 -1
- package/esm/__internal__/input/index.d.ts +2 -5
- package/esm/__internal__/input/index.js +1 -1
- package/esm/__internal__/input/input-style-overrides.style.d.ts +8 -0
- package/esm/__internal__/input/input-style-overrides.style.js +1 -0
- package/esm/__internal__/input/input.component.d.ts +22 -31
- package/esm/__internal__/input/input.component.js +1 -1
- package/esm/__internal__/input/input.style.d.ts +9 -5
- package/esm/__internal__/input/input.style.js +1 -1
- package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.d.ts +9 -3
- package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.js +1 -1
- package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.d.ts +7 -9
- package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.js +1 -1
- package/esm/__internal__/label/index.d.ts +0 -1
- package/esm/__internal__/label/label.component.d.ts +14 -31
- package/esm/__internal__/label/label.component.js +1 -1
- package/esm/__internal__/label/label.style.d.ts +5 -22
- package/esm/__internal__/label/label.style.js +1 -1
- package/esm/__internal__/legacy-error-border/error-border.style.js +1 -0
- package/esm/__internal__/legacy-hint-text/hint-text.component.d.ts +27 -0
- package/esm/__internal__/legacy-hint-text/hint-text.component.js +1 -0
- package/esm/__internal__/legacy-hint-text/hint-text.style.d.ts +3 -0
- package/esm/__internal__/legacy-hint-text/hint-text.style.js +1 -0
- package/esm/__internal__/legacy-hint-text/index.d.ts +2 -0
- package/esm/__internal__/legacy-hint-text/index.js +1 -0
- package/esm/__internal__/legacy-input/index.d.ts +5 -0
- package/esm/__internal__/legacy-input/index.js +1 -0
- package/{lib/__internal__/input → esm/__internal__/legacy-input}/input-presentation.style.d.ts +1 -1
- package/esm/__internal__/{input → legacy-input}/input-presentation.style.js +1 -1
- package/esm/__internal__/legacy-input/input.component.d.ts +54 -0
- package/esm/__internal__/legacy-input/input.component.js +1 -0
- package/esm/__internal__/legacy-input/input.style.d.ts +3 -0
- package/esm/__internal__/legacy-input/input.style.js +1 -0
- package/esm/__internal__/legacy-label/index.d.ts +2 -0
- package/esm/__internal__/legacy-label/index.js +1 -0
- package/esm/__internal__/legacy-label/label.component.d.ts +37 -0
- package/esm/__internal__/legacy-label/label.component.js +1 -0
- package/esm/__internal__/legacy-label/label.style.d.ts +25 -0
- package/esm/__internal__/legacy-label/label.style.js +1 -0
- package/esm/__internal__/utils/helpers/combine-refs/index.d.ts +3 -0
- package/esm/__internal__/utils/helpers/combine-refs/index.js +1 -0
- package/esm/__internal__/validation-message/__next__/index.d.ts +1 -0
- package/esm/__internal__/validation-message/__next__/index.js +1 -0
- package/esm/__internal__/validation-message/__next__/validation-message.component.d.ts +20 -0
- package/esm/__internal__/validation-message/__next__/validation-message.component.js +1 -0
- package/esm/__internal__/validation-message/__next__/validation-message.style.d.ts +6 -0
- package/esm/__internal__/validation-message/__next__/validation-message.style.js +1 -0
- package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.js +1 -1
- package/esm/components/checkbox/checkbox-group/checkbox-group.style.js +1 -1
- package/esm/components/checkbox/checkbox.style.js +1 -1
- package/esm/components/date/date.component.js +1 -1
- package/esm/components/date/date.style.js +1 -1
- package/esm/components/date-range/date-range.style.js +1 -1
- package/esm/components/file-input/file-input.component.d.ts +1 -1
- package/esm/components/file-input/file-input.component.js +1 -1
- package/esm/components/file-input/file-input.style.d.ts +1 -1
- package/esm/components/file-input/file-input.style.js +1 -1
- package/esm/components/icon/icon.style.js +1 -1
- package/esm/components/inline-inputs/inline-inputs.component.d.ts +5 -1
- package/esm/components/inline-inputs/inline-inputs.component.js +1 -1
- package/esm/components/inline-inputs/inline-inputs.style.js +1 -1
- package/esm/components/menu/menu-full-screen/menu-full-screen.style.js +1 -1
- package/esm/components/number/number.component.js +1 -1
- package/esm/components/numeral-date/numeral-date.component.d.ts +6 -3
- package/esm/components/numeral-date/numeral-date.component.js +1 -1
- package/esm/components/numeral-date/numeral-date.style.d.ts +2 -14
- package/esm/components/numeral-date/numeral-date.style.js +1 -1
- package/esm/components/pager/__internal__/pager-navigation.component.js +1 -1
- package/esm/components/pager/pager.component.js +1 -1
- package/esm/components/pager/pager.style.js +1 -1
- package/esm/components/search/search-button.style.js +1 -1
- package/esm/components/search/search.component.js +1 -1
- package/esm/components/search/search.style.js +1 -1
- package/esm/components/select/__internal__/select-textbox/select-textbox.component.d.ts +12 -3
- package/esm/components/select/__internal__/select-textbox/select-textbox.component.js +1 -1
- package/esm/components/select/__internal__/select-textbox/select-textbox.style.d.ts +10 -3
- package/esm/components/select/__internal__/select-textbox/select-textbox.style.js +1 -1
- package/esm/components/select/filterable-select/filterable-select.component.js +1 -1
- package/esm/components/select/multi-select/multi-select.component.js +1 -1
- package/esm/components/select/multi-select/multi-select.style.js +1 -1
- package/esm/components/select/select.style.js +1 -1
- package/esm/components/select/simple-select/simple-select.component.js +1 -1
- package/esm/components/simple-color-picker/simple-color/simple-color.style.d.ts +1 -1
- package/esm/components/simple-color-picker/simple-color/simple-color.style.js +1 -1
- package/esm/components/switch/switch.component.js +1 -1
- package/esm/components/text-editor/__internal__/__ui__/ContentEditor/content-editor.component.js +1 -1
- package/esm/components/text-editor/text-editor.component.js +1 -1
- package/esm/components/textarea/textarea.component.d.ts +4 -2
- package/esm/components/textarea/textarea.component.js +1 -1
- package/esm/components/textarea/textarea.style.js +1 -1
- package/esm/components/textbox/__internal__/__next__/index.d.ts +2 -0
- package/esm/components/textbox/__internal__/__next__/index.js +1 -0
- package/esm/components/textbox/__internal__/__next__/text-input.component.d.ts +91 -0
- package/esm/components/textbox/__internal__/__next__/text-input.component.js +1 -0
- package/esm/components/textbox/__internal__/__next__/text-input.style.d.ts +21 -0
- package/esm/components/textbox/__internal__/__next__/text-input.style.js +1 -0
- package/esm/components/textbox/__internal__/__next__/utils.d.ts +81 -0
- package/esm/components/textbox/__internal__/__next__/utils.js +1 -0
- package/esm/components/textbox/textbox.component.d.ts +21 -17
- package/esm/components/textbox/textbox.component.js +1 -1
- package/esm/components/tile-select/tile-select.style.d.ts +1 -1
- package/esm/components/tile-select/tile-select.style.js +1 -1
- package/esm/components/time/time.component.d.ts +1 -1
- package/esm/components/time/time.component.js +1 -1
- package/esm/components/time/time.style.d.ts +1 -1
- package/esm/components/time/time.style.js +1 -1
- package/esm/hooks/__internal__/useRegisterValidationToTabs/index.d.ts +0 -0
- package/esm/hooks/__internal__/useRegisterValidationToTabs/index.js +1 -0
- package/esm/hooks/__internal__/useRegisterValidationToTabs/useRegisterValidationToTabs.d.ts +2 -0
- package/esm/hooks/__internal__/useRegisterValidationToTabs/useRegisterValidationToTabs.js +1 -0
- package/esm/style/themes/apply-base-theme.d.ts +3 -1
- package/esm/style/themes/apply-base-theme.js +1 -1
- package/lib/__internal__/checkable-input/__next__/checkable-input.component.js +1 -1
- package/lib/__internal__/checkable-input/__next__/checkable-input.style.js +1 -1
- package/lib/__internal__/checkable-input/checkable-input.style.js +1 -1
- package/lib/__internal__/error-border/error-border.style.d.ts +4 -0
- package/lib/__internal__/error-border/error-border.style.js +1 -0
- package/lib/__internal__/fieldset/__next__/fieldset.component.js +1 -1
- package/lib/__internal__/fieldset/fieldset.component.js +1 -1
- package/lib/__internal__/fieldset-validation-context/fieldset-validation-context.d.ts +6 -0
- package/lib/__internal__/fieldset-validation-context/index.d.ts +1 -0
- package/lib/__internal__/fieldset-validation-context/index.js +1 -0
- package/lib/__internal__/fieldset-validation-context/package.json +6 -0
- package/lib/__internal__/form-field/form-field.component.d.ts +1 -1
- package/lib/__internal__/form-field/form-field.component.js +1 -1
- package/lib/__internal__/hint-text/hint-text.component.d.ts +6 -21
- package/lib/__internal__/hint-text/hint-text.component.js +1 -1
- package/lib/__internal__/hint-text/hint-text.style.d.ts +5 -2
- package/lib/__internal__/hint-text/hint-text.style.js +1 -1
- package/lib/__internal__/hint-text/index.d.ts +0 -1
- package/lib/__internal__/input/index.d.ts +2 -5
- package/lib/__internal__/input/index.js +1 -1
- package/lib/__internal__/input/input-style-overrides.style.d.ts +8 -0
- package/lib/__internal__/input/input-style-overrides.style.js +1 -0
- package/lib/__internal__/input/input.component.d.ts +22 -31
- package/lib/__internal__/input/input.component.js +1 -1
- package/lib/__internal__/input/input.style.d.ts +9 -5
- package/lib/__internal__/input/input.style.js +1 -1
- package/lib/__internal__/input-icon-toggle/input-icon-toggle.component.d.ts +9 -3
- package/lib/__internal__/input-icon-toggle/input-icon-toggle.component.js +1 -1
- package/lib/__internal__/input-icon-toggle/input-icon-toggle.style.d.ts +7 -9
- package/lib/__internal__/input-icon-toggle/input-icon-toggle.style.js +1 -1
- package/lib/__internal__/label/index.d.ts +0 -1
- package/lib/__internal__/label/label.component.d.ts +14 -31
- package/lib/__internal__/label/label.component.js +1 -1
- package/lib/__internal__/label/label.style.d.ts +5 -22
- package/lib/__internal__/label/label.style.js +1 -1
- package/lib/__internal__/legacy-error-border/error-border.style.js +1 -0
- package/lib/__internal__/legacy-hint-text/hint-text.component.d.ts +27 -0
- package/lib/__internal__/legacy-hint-text/hint-text.component.js +1 -0
- package/lib/__internal__/legacy-hint-text/hint-text.style.d.ts +3 -0
- package/lib/__internal__/legacy-hint-text/hint-text.style.js +1 -0
- package/lib/__internal__/legacy-hint-text/index.d.ts +2 -0
- package/lib/__internal__/legacy-hint-text/index.js +1 -0
- package/lib/__internal__/legacy-hint-text/package.json +6 -0
- package/lib/__internal__/legacy-input/index.d.ts +5 -0
- package/lib/__internal__/legacy-input/index.js +1 -0
- package/{esm/__internal__/input → lib/__internal__/legacy-input}/input-presentation.style.d.ts +1 -1
- package/lib/__internal__/{input → legacy-input}/input-presentation.style.js +1 -1
- package/lib/__internal__/legacy-input/input.component.d.ts +54 -0
- package/lib/__internal__/legacy-input/input.component.js +1 -0
- package/lib/__internal__/legacy-input/input.style.d.ts +3 -0
- package/lib/__internal__/legacy-input/input.style.js +1 -0
- package/lib/__internal__/legacy-input/package.json +6 -0
- package/lib/__internal__/legacy-label/index.d.ts +2 -0
- package/lib/__internal__/legacy-label/index.js +1 -0
- package/lib/__internal__/legacy-label/label.component.d.ts +37 -0
- package/lib/__internal__/legacy-label/label.component.js +1 -0
- package/lib/__internal__/legacy-label/label.style.d.ts +25 -0
- package/lib/__internal__/legacy-label/label.style.js +1 -0
- package/lib/__internal__/legacy-label/package.json +6 -0
- package/lib/__internal__/utils/helpers/combine-refs/index.d.ts +3 -0
- package/lib/__internal__/utils/helpers/combine-refs/index.js +1 -0
- package/lib/__internal__/utils/helpers/combine-refs/package.json +6 -0
- package/lib/__internal__/validation-message/__next__/index.d.ts +1 -0
- package/lib/__internal__/validation-message/__next__/index.js +1 -0
- package/lib/__internal__/validation-message/__next__/package.json +6 -0
- package/lib/__internal__/validation-message/__next__/validation-message.component.d.ts +20 -0
- package/lib/__internal__/validation-message/__next__/validation-message.component.js +1 -0
- package/lib/__internal__/validation-message/__next__/validation-message.style.d.ts +6 -0
- package/lib/__internal__/validation-message/__next__/validation-message.style.js +1 -0
- package/lib/components/button-toggle/button-toggle-group/button-toggle-group.component.js +1 -1
- package/lib/components/checkbox/checkbox-group/checkbox-group.style.js +1 -1
- package/lib/components/checkbox/checkbox.style.js +1 -1
- package/lib/components/date/date.component.js +1 -1
- package/lib/components/date/date.style.js +1 -1
- package/lib/components/date-range/date-range.style.js +1 -1
- package/lib/components/file-input/file-input.component.d.ts +1 -1
- package/lib/components/file-input/file-input.component.js +1 -1
- package/lib/components/file-input/file-input.style.d.ts +1 -1
- package/lib/components/file-input/file-input.style.js +1 -1
- package/lib/components/icon/icon.style.js +1 -1
- package/lib/components/inline-inputs/inline-inputs.component.d.ts +5 -1
- package/lib/components/inline-inputs/inline-inputs.component.js +1 -1
- package/lib/components/inline-inputs/inline-inputs.style.js +1 -1
- package/lib/components/menu/menu-full-screen/menu-full-screen.style.js +1 -1
- package/lib/components/number/number.component.js +1 -1
- package/lib/components/numeral-date/numeral-date.component.d.ts +6 -3
- package/lib/components/numeral-date/numeral-date.component.js +1 -1
- package/lib/components/numeral-date/numeral-date.style.d.ts +2 -14
- package/lib/components/numeral-date/numeral-date.style.js +1 -1
- package/lib/components/pager/__internal__/pager-navigation.component.js +1 -1
- package/lib/components/pager/pager.component.js +1 -1
- package/lib/components/pager/pager.style.js +1 -1
- package/lib/components/search/search-button.style.js +1 -1
- package/lib/components/search/search.component.js +1 -1
- package/lib/components/search/search.style.js +1 -1
- package/lib/components/select/__internal__/select-textbox/select-textbox.component.d.ts +12 -3
- package/lib/components/select/__internal__/select-textbox/select-textbox.component.js +1 -1
- package/lib/components/select/__internal__/select-textbox/select-textbox.style.d.ts +10 -3
- package/lib/components/select/__internal__/select-textbox/select-textbox.style.js +1 -1
- package/lib/components/select/filterable-select/filterable-select.component.js +1 -1
- package/lib/components/select/multi-select/multi-select.component.js +1 -1
- package/lib/components/select/multi-select/multi-select.style.js +1 -1
- package/lib/components/select/select.style.js +1 -1
- package/lib/components/select/simple-select/simple-select.component.js +1 -1
- package/lib/components/simple-color-picker/simple-color/simple-color.style.d.ts +1 -1
- package/lib/components/simple-color-picker/simple-color/simple-color.style.js +1 -1
- package/lib/components/switch/switch.component.js +1 -1
- package/lib/components/text-editor/__internal__/__ui__/ContentEditor/content-editor.component.js +1 -1
- package/lib/components/text-editor/text-editor.component.js +1 -1
- package/lib/components/textarea/textarea.component.d.ts +4 -2
- package/lib/components/textarea/textarea.component.js +1 -1
- package/lib/components/textarea/textarea.style.js +1 -1
- package/lib/components/textbox/__internal__/__next__/index.d.ts +2 -0
- package/lib/components/textbox/__internal__/__next__/index.js +1 -0
- package/lib/components/textbox/__internal__/__next__/package.json +6 -0
- package/lib/components/textbox/__internal__/__next__/text-input.component.d.ts +91 -0
- package/lib/components/textbox/__internal__/__next__/text-input.component.js +1 -0
- package/lib/components/textbox/__internal__/__next__/text-input.style.d.ts +21 -0
- package/lib/components/textbox/__internal__/__next__/text-input.style.js +1 -0
- package/lib/components/textbox/__internal__/__next__/utils.d.ts +81 -0
- package/lib/components/textbox/__internal__/__next__/utils.js +1 -0
- package/lib/components/textbox/textbox.component.d.ts +21 -17
- package/lib/components/textbox/textbox.component.js +1 -1
- package/lib/components/tile-select/tile-select.style.d.ts +1 -1
- package/lib/components/tile-select/tile-select.style.js +1 -1
- package/lib/components/time/time.component.d.ts +1 -1
- package/lib/components/time/time.component.js +1 -1
- package/lib/components/time/time.style.d.ts +1 -1
- package/lib/components/time/time.style.js +1 -1
- package/lib/hooks/__internal__/useRegisterValidationToTabs/index.d.ts +0 -0
- package/lib/hooks/__internal__/useRegisterValidationToTabs/index.js +1 -0
- package/lib/hooks/__internal__/useRegisterValidationToTabs/package.json +6 -0
- package/lib/hooks/__internal__/useRegisterValidationToTabs/useRegisterValidationToTabs.d.ts +2 -0
- package/lib/hooks/__internal__/useRegisterValidationToTabs/useRegisterValidationToTabs.js +1 -0
- package/lib/style/themes/apply-base-theme.d.ts +3 -1
- package/lib/style/themes/apply-base-theme.js +1 -1
- package/package.json +1 -1
- package/esm/components/numeral-date/__internal__/numeral-date.context.d.ts +0 -6
- package/esm/components/select/__internal__/select-textbox/select-textbox.context.d.ts +0 -5
- package/esm/components/select/__internal__/select-textbox/select-textbox.context.js +0 -1
- package/esm/components/textbox/__internal__/prefix.style.d.ts +0 -5
- package/esm/components/textbox/__internal__/prefix.style.js +0 -1
- package/esm/components/textbox/textbox.style.js +0 -1
- package/lib/components/numeral-date/__internal__/numeral-date.context.d.ts +0 -6
- package/lib/components/select/__internal__/select-textbox/select-textbox.context.d.ts +0 -5
- package/lib/components/select/__internal__/select-textbox/select-textbox.context.js +0 -1
- package/lib/components/textbox/__internal__/prefix.style.d.ts +0 -5
- package/lib/components/textbox/__internal__/prefix.style.js +0 -1
- package/lib/components/textbox/textbox.style.js +0 -1
- /package/esm/{components/numeral-date/__internal__/numeral-date.context.js → __internal__/fieldset-validation-context/fieldset-validation-context.js} +0 -0
- /package/esm/{components/textbox/textbox.style.d.ts → __internal__/legacy-error-border/error-border.style.d.ts} +0 -0
- /package/esm/__internal__/{input → legacy-input}/input-presentation.component.d.ts +0 -0
- /package/esm/__internal__/{input → legacy-input}/input-presentation.component.js +0 -0
- /package/esm/__internal__/{input → legacy-input}/input-sizes.style.d.ts +0 -0
- /package/esm/__internal__/{input → legacy-input}/input-sizes.style.js +0 -0
- /package/esm/__internal__/{label → legacy-label}/icon-wrapper.style.d.ts +0 -0
- /package/esm/__internal__/{label → legacy-label}/icon-wrapper.style.js +0 -0
- /package/lib/{components/numeral-date/__internal__/numeral-date.context.js → __internal__/fieldset-validation-context/fieldset-validation-context.js} +0 -0
- /package/lib/{components/textbox/textbox.style.d.ts → __internal__/legacy-error-border/error-border.style.d.ts} +0 -0
- /package/lib/__internal__/{input → legacy-input}/input-presentation.component.d.ts +0 -0
- /package/lib/__internal__/{input → legacy-input}/input-presentation.component.js +0 -0
- /package/lib/__internal__/{input → legacy-input}/input-sizes.style.d.ts +0 -0
- /package/lib/__internal__/{input → legacy-input}/input-sizes.style.js +0 -0
- /package/lib/__internal__/{label → legacy-label}/icon-wrapper.style.d.ts +0 -0
- /package/lib/__internal__/{label → legacy-label}/icon-wrapper.style.js +0 -0
package/esm/components/text-editor/__internal__/__ui__/ContentEditor/content-editor.component.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{ContentEditable as e}from"@lexical/react/LexicalContentEditable";import{forwardRef as i}from"react";import r from"./content-editor.style.js";import"../../__plugins__/AutoLinker/auto-link.component.js";import"@lexical/react/LexicalComposerContext";import"@lexical/link";import"@lexical/headless";import"@lexical/html";import"lexical";import"@lexical/code";import"@lexical/list";import"@lexical/react/LexicalHorizontalRuleNode";import"@lexical/rich-text";import"../../../text-editor.context.js";import n from"../../__plugins__/useCursorAtEnd/index.js";import"../CharacterCounter/character-counter.style.js";import"lodash/debounce";import"../../../../../__internal__/i18n-context/index.js";import a from"../LinkPreviewer/link-previewer.component.js";import"@lexical/react/LexicalTypeaheadMenuPlugin";import"react-dom";import"../Mentions/constants.js";import"../Mentions/mentions.style.js";import"../../../../tooltip/tooltip.component.js";import"../../../../portrait/portrait.style.js";import"../../../../../style/utils/filter-styled-system-padding-props.js";import"../Placeholder/placeholder.style.js";import"@lexical/utils";import"../Toolbar/toolbar.style.js";import"../../../../button/button.component.js";import"../../../../box/box.component.js";import"../Toolbar/buttons/typography-dropdown/dropdown.style.js";import"../../../../icon/icon.component.js";import"../Toolbar/button-group/button-group.style.js";import"../../../../../__internal__/
|
|
1
|
+
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{ContentEditable as e}from"@lexical/react/LexicalContentEditable";import{forwardRef as i}from"react";import r from"./content-editor.style.js";import"../../__plugins__/AutoLinker/auto-link.component.js";import"@lexical/react/LexicalComposerContext";import"@lexical/link";import"@lexical/headless";import"@lexical/html";import"lexical";import"@lexical/code";import"@lexical/list";import"@lexical/react/LexicalHorizontalRuleNode";import"@lexical/rich-text";import"../../../text-editor.context.js";import n from"../../__plugins__/useCursorAtEnd/index.js";import"../CharacterCounter/character-counter.style.js";import"lodash/debounce";import"../../../../../__internal__/i18n-context/index.js";import a from"../LinkPreviewer/link-previewer.component.js";import"@lexical/react/LexicalTypeaheadMenuPlugin";import"react-dom";import"../Mentions/constants.js";import"../Mentions/mentions.style.js";import"../../../../tooltip/tooltip.component.js";import"../../../../portrait/portrait.style.js";import"../../../../../style/utils/filter-styled-system-padding-props.js";import"../Placeholder/placeholder.style.js";import"@lexical/utils";import"../Toolbar/toolbar.style.js";import"../../../../button/button.component.js";import"../../../../box/box.component.js";import"../Toolbar/buttons/typography-dropdown/dropdown.style.js";import"../../../../icon/icon.component.js";import"../Toolbar/button-group/button-group.style.js";import"../../../../../__internal__/input/input.style.js";import"../../../../../__internal__/validation-message/__next__/validation-message.style.js";import"../../../../../__internal__/error-border/error-border.style.js";import"../../../../textbox/__internal__/__next__/text-input.style.js";import"../../../../../__internal__/hint-text/hint-text.style.js";import"../../../../../__internal__/label/label.style.js";import"../../../../tabs/__next__/tabs.style.js";import"../../../../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import"invariant";import"../../../../../__internal__/validations/validation-icon.style.js";import"../../../../../__internal__/character-count/character-count.style.js";import"../../../../dialog/dialog.style.js";import"../../../../heading/heading.style.js";import"../../../../icon-button/icon-button.component.js";import"../../../../typography/typography.component.js";import"react-transition-group";import"../../../../../hooks/__internal__/useScrollBlock/useScrollBlock.js";import"../../../../portal/portal.js";import"../../../../../__internal__/modal/modal-manager.js";import"../../../../../__internal__/modal/modal.style.js";import"../../../../../__internal__/modal/modal.context.js";import"../../../../carbon-provider/__internal__/top-modal.context.js";import"../../../../../__internal__/full-screen-heading/full-screen-heading.component.js";import"../../../../form/form.component.js";import"../../../../form/required-fields-indicator/required-fields-indicator.component.js";const l=i((({inputHint:i,namespace:l,previews:s=[],rows:p,readOnly:m,required:c,error:_,warning:d,validationMessagePositionTop:u,size:j="medium",id:x},y)=>{const b=n(),g=_||d?`${l}-validation-message`:"",h=i?`${l}-input-hint`:"",v=(u?`${g} ${h}`:`${h} ${g}`).trim();return t(r,{"data-role":`${l}-content-editable`,error:_,warning:d,namespace:l,rows:p,readOnly:m,size:j,children:[o(e,{id:x,ref:y,"aria-describedby":v,"aria-labelledby":`${l}-label`,"aria-required":c,"aria-invalid":_,className:`${l}-editable`,"data-role":`${l}-editable`,onBlur:t=>{var o;if(null===(o=t.relatedTarget)||void 0===o?void 0:o.classList.contains("toolbar-button")){var e;const o=null===(e=t.relatedTarget)||void 0===e?void 0:e.id;if(o){const t=document.querySelector(`[id="${o}"]`);t&&t.focus()}}},onFocus:t=>{t.relatedTarget&&t.relatedTarget.classList.contains("toolbar-button")||b(t)},"aria-autocomplete":void 0,"aria-readonly":void 0}),o(a,{previews:s})]})}));export{l as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{LexicalComposer as n}from"@lexical/react/LexicalComposer";import{ClickableLinkPlugin as o}from"@lexical/react/LexicalClickableLinkPlugin";import{LexicalErrorBoundary as i}from"@lexical/react/LexicalErrorBoundary";import{HistoryPlugin as a}from"@lexical/react/LexicalHistoryPlugin";import{MarkdownShortcutPlugin as l}from"@lexical/react/LexicalMarkdownShortcutPlugin";import{RichTextPlugin as s}from"@lexical/react/LexicalRichTextPlugin";import{LinkPlugin as c}from"@lexical/react/LexicalLinkPlugin";import{ListPlugin as p}from"@lexical/react/LexicalListPlugin";import{OnChangePlugin as d}from"@lexical/react/LexicalOnChangePlugin";import{PluginProvider as _}from"./__internal__/__providers__/plugin-provider.js";import{$getRoot as m}from"lexical";import{forwardRef as u,useRef as f,useState as g,useImperativeHandle as h,useEffect as v,useMemo as b,useCallback as
|
|
1
|
+
import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{LexicalComposer as n}from"@lexical/react/LexicalComposer";import{ClickableLinkPlugin as o}from"@lexical/react/LexicalClickableLinkPlugin";import{LexicalErrorBoundary as i}from"@lexical/react/LexicalErrorBoundary";import{HistoryPlugin as a}from"@lexical/react/LexicalHistoryPlugin";import{MarkdownShortcutPlugin as l}from"@lexical/react/LexicalMarkdownShortcutPlugin";import{RichTextPlugin as s}from"@lexical/react/LexicalRichTextPlugin";import{LinkPlugin as c}from"@lexical/react/LexicalLinkPlugin";import{ListPlugin as p}from"@lexical/react/LexicalListPlugin";import{OnChangePlugin as d}from"@lexical/react/LexicalOnChangePlugin";import{PluginProvider as _}from"./__internal__/__providers__/plugin-provider.js";import{$getRoot as m}from"lexical";import{forwardRef as u,useRef as f,useState as g,useImperativeHandle as h,useEffect as v,useMemo as b,useCallback as y}from"react";import j from"../../__internal__/legacy-label/label.component.js";import x from"../../hooks/__internal__/useLocale/useLocale.js";import w from"../../__internal__/utils/logger/index.js";import{COMPONENT_PREFIX as O,MARKDOWN_NODES as P}from"./__internal__/__utils__/constants.js";import L from"./__internal__/__plugins__/AutoLinker/auto-link.component.js";import C from"./__internal__/__plugins__/LinkMonitor/link-monitor.plugin.js";import E from"./__internal__/__plugins__/StyledSpanEnter/styled-span-enter.plugin.js";import"./__internal__/__plugins__/useCursorAtEnd/index.js";import{FormSubmissionPlugin as T}from"./__internal__/__plugins__/FormSubmission/form-submission.plugin.js";import S from"./text-editor.context.js";import{StyledTextEditorWrapper as k,StyledWrapper as M,StyledEditorToolbarWrapper as $,StyledHeaderWrapper as F,StyledTextEditor as B,StyledFooterWrapper as H}from"./text-editor.style.js";import{createEmpty as z,SerializeLexical as A,validateUrl as R}from"./__internal__/__utils__/helpers.js";import{HintText as q}from"../../__internal__/legacy-hint-text/hint-text.component.js";import D from"../../__internal__/validation-message/validation-message.component.js";import I from"../../__internal__/legacy-error-border/error-border.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import V from"../../style/utils/filter-styled-system-margin-props.js";import U from"../../__internal__/utils/helpers/tags/tags.js";import G from"./__internal__/__ui__/ReadOnlyEditor/read-only-rte.component.js";import{getTheme as J}from"./__internal__/__utils__/theme.js";import K from"./__internal__/__ui__/CharacterCounter/character-counter.component.js";import N from"./__internal__/__ui__/ContentEditor/content-editor.component.js";import"./__internal__/__ui__/LinkPreviewer/link-previewer.style.js";import"@lexical/react/LexicalComposerContext";import"@lexical/react/LexicalTypeaheadMenuPlugin";import"react-dom";import"./__internal__/__ui__/Mentions/constants.js";import"./__internal__/__ui__/Mentions/mentions.style.js";import"../tooltip/tooltip.component.js";import"../portrait/portrait.style.js";import Q from"./__internal__/__ui__/Placeholder/placeholder.component.js";import W from"./__internal__/__ui__/Toolbar/toolbar.component.js";function X(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function Y(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){X(e,r,t[r])}))}return e}let Z=!1,ee=!1,re=!1;const te=u(((u,X)=>{var te,ne,oe,{characterLimit:ie=3e3,error:ae,footer:le,header:se,inputHint:ce,labelText:pe,namespace:de=O,id:_e,onBlur:me,onCancel:ue,onChange:fe,onFocus:ge,onLinkAdded:he,onSave:ve,onFormSubmission:be,placeholder:ye,previews:je=[],readOnly:xe=!1,required:we=!1,rows:Oe,size:Pe="medium",warning:Le,customPlugins:Ce,validationMessagePositionTop:Ee=!1,toolbarControls:Te}=u,Se=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(u,["characterLimit","error","footer","header","inputHint","labelText","namespace","id","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","onFormSubmission","placeholder","previews","readOnly","required","rows","size","warning","customPlugins","validationMessagePositionTop","toolbarControls"]);!Z&&Se.value&&(Z=!0,w.deprecate("`value` is deprecated in TextEditor and support will soon be removed. Please use `initialValue` instead.")),!ee&&ue&&(ee=!0,w.deprecate("`onCancel` is deprecated in TextEditor and support will soon be removed. Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the cancel functionality.")),!re&&ve&&(re=!0,w.deprecate("`onSave` is deprecated in TextEditor and support will soon be removed. Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the save functionality."));const ke=f(null!==(oe=null!==(ne=Se.initialValue)&&void 0!==ne?ne:Se.value)&&void 0!==oe?oe:z()),Me=x(),[$e,Fe]=g(void 0),Be=f(null),[He,ze]=g(null),[Ae,Re]=g(!1);h(X,(()=>({focus(){var e;null===(e=Be.current)||void 0===e||e.focus()}})),[]),v((()=>{const e=null==Be?void 0:Be.current,r=()=>{Re(!0)},t=()=>{Re(!1)};return null==e||e.addEventListener("focus",r),null==e||e.addEventListener("blur",t),()=>{null==e||e.removeEventListener("focus",r),null==e||e.removeEventListener("blur",t)}}),[Be]);const qe=b((()=>({namespace:de,nodes:P,onError:e=>w.error(e.message),theme:J(),editorState:ke.current,editable:!xe})),[de,xe]),De=y(((e,r)=>{const t=e.read((()=>m().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(fe){const e=A(r);null==fe||fe(t,e)}if(ie>0){const e=ie-t.length;Fe(e<0?Me.textEditor.characterLimit(Math.abs(e)):void 0)}}),[ie,Me.textEditor,fe]),Ie=y((e=>{if(!e.isEditable())return;if(!ue)return;const r=e.parseEditorState(ke.current);e.setEditorState(r),ue()}),[ue]),Ve=b((()=>({namespace:de,onCancel:ue?Ie:void 0,onSave:ve,toolbarControls:Te})),[Ie,de,ue,ve,Te]),Ue=Le||$e,Ge=()=>{switch(Pe){case"large":return"var(--spacing150)";case"small":return"var(--spacing050)";default:return"var(--spacing100)"}};return e(k,(Je=Y({"data-role":`${de}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||null==me||me(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||null==ge||ge(e)}},V(Se),U("text-editor",Se)),Ke={children:r(S.Provider,{value:{onLinkAdded:he},children:[e(j,{onClick:()=>{var e;return null===(e=Be.current)||void 0===e?void 0:e.focus()},isRequired:we,labelId:`${de}-label`,children:pe}),ce&&!xe&&e(q,{id:`${de}-input-hint`,marginBottom:Ge(),children:ce}),e(n,{initialConfig:qe,children:r(M,{"data-role":`${de}-wrapper`,ref:ze,children:[Ee&&r(t,{children:[e(D,{error:ae,warning:Ue,validationId:`${de}-validation-message`,"data-role":`${de}-validation-message`,validationMessagePositionTop:Ee}),(ae||Ue)&&e(I,{warning:!(ae||!Ue)})]}),r($,{"data-role":`${de}-editor-toolbar-wrapper`,error:!!ae,id:`${de}-editor-toolbar-wrapper`,children:[se&&e(F,{"data-role":`${de}-header-wrapper`,children:se}),xe?e(G,{"aria-label":pe,initialValue:(null===(te=Be.current)||void 0===te?void 0:te.innerHTML)||ke.current,size:Pe}):r(t,{children:[e(W,Y({contentEditorRef:Be,hasHeader:Boolean(se),size:Pe},Ve)),r(B,{"data-role":`${de}-editor`,error:!!ae,children:[e(s,{contentEditable:e(N,{id:_e,ref:Be,inputHint:ce,isFocused:Ae,namespace:de,previews:je,rows:Oe,readOnly:xe,required:we,error:!!ae,warning:!!Le||!!$e,validationMessagePositionTop:Ee,size:Pe}),placeholder:e(Q,{namespace:de,text:ye}),ErrorBoundary:i}),e(p,{}),e(a,{}),e(l,{}),e(d,{onChange:De,ignoreHistoryMergeTagChange:!0,ignoreSelectionChange:!0}),e(c,{validateUrl:R}),e(o,{newTab:!0}),e(L,{}),e(E,{}),e(T,{onFormSubmission:be}),e(_,{parentRef:He,children:Ce})]})]}),le&&e(H,{"data-role":`${de}-footer-wrapper`,size:Pe,children:le}),e(C,{})]}),!Ee&&r(t,{children:[e(D,{error:ae,warning:Ue,validationId:`${de}-validation-message`,"data-role":`${de}-validation-message`,validationMessagePositionTop:Ee}),(ae||Ue)&&e(I,{warning:!(ae||!Ue)})]}),ie>0&&!xe&&e(K,{isFocused:Ae,maxChars:ie,namespace:de,marginTop:Ge()})]})})]})},Ke=null!=Ke?Ke:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Je,Object.getOwnPropertyDescriptors(Ke)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(Ke)).forEach((function(e){Object.defineProperty(Je,e,Object.getOwnPropertyDescriptor(Ke,e))})),Je));var Je,Ke}));export{te as TextEditor,te as default};
|
|
@@ -3,14 +3,16 @@ import { MarginProps } from "styled-system";
|
|
|
3
3
|
import { IconType } from "../icon";
|
|
4
4
|
import { ValidationProps } from "../../__internal__/validations";
|
|
5
5
|
import { TagProps } from "../../__internal__/utils/helpers/tags";
|
|
6
|
-
import { CommonInputProps } from "../../__internal__/input";
|
|
6
|
+
import { CommonInputProps } from "../../__internal__/legacy-input";
|
|
7
7
|
import { BorderRadiusType } from "../box/box.component";
|
|
8
8
|
export interface TextareaProps extends ValidationProps, MarginProps, Omit<CommonInputProps, "size">, TagProps {
|
|
9
9
|
/** Prop to specify the aria-labelledby property of the component */
|
|
10
10
|
"aria-labelledby"?: string;
|
|
11
11
|
/** id of the input */
|
|
12
12
|
id?: string;
|
|
13
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set
|
|
15
|
+
**/
|
|
14
16
|
adaptiveLabelBreakpoint?: number;
|
|
15
17
|
/** Automatically focus the input on component mount */
|
|
16
18
|
autoFocus?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as i,Fragment as
|
|
1
|
+
import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import n,{useContext as t,useState as o,useRef as l,useCallback as a,useEffect as d}from"react";import s from"../../__internal__/utils/helpers/tags/tags.js";import p from"../../__internal__/legacy-input/input.component.js";import c from"../../__internal__/legacy-input/input-presentation.component.js";import u from"../../__internal__/form-field/form-field.component.js";import b from"../../hooks/useCharacterCount/useCharacterCount.js";import{InputBehaviour as m}from"../../__internal__/input-behaviour/input-behaviour.component.js";import f from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import g from"../../__internal__/utils/helpers/guid/index.js";import h,{DEFAULT_MIN_HEIGHT as v}from"./textarea.style.js";import{TooltipProvider as y}from"../../__internal__/tooltip-provider/index.js";import _ from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import O from"../carbon-provider/__internal__/new-validation.context.js";import j from"../../__internal__/legacy-error-border/error-border.style.js";import w from"../../__internal__/validation-message/validation-message.component.js";import{Box as I}from"../box/box.component.js";import x from"../../__internal__/utils/logger/index.js";import{HintText as P}from"../../__internal__/legacy-hint-text/hint-text.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import H from"../../style/utils/filter-styled-system-margin-props.js";function L(e,i,r){return i in e?Object.defineProperty(e,i,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[i]=r,e}function B(e){for(var i=1;i<arguments.length;i++){var r=null!=arguments[i]?arguments[i]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(i){L(e,i,r[i])}))}return e}let T=!1,A=!1;const R=n.forwardRef(((n,L)=>{var{"aria-labelledby":R,"aria-describedby":S,autoFocus:W,inputHint:k,fieldHelp:E,label:C,children:q,characterLimit:F,onChange:D,onFocus:M,onBlur:z,disabled:V=!1,labelInline:N,labelAlign:$,labelHelp:G,labelSpacing:J,inputIcon:K,id:Q,error:U,warning:X,info:Y,name:Z,readOnly:ee=!1,placeholder:ie,expandable:re=!1,rows:ne,validationOnLabel:te=!1,adaptiveLabelBreakpoint:oe,inputWidth:le,maxWidth:ae,labelWidth:de=30,tooltipPosition:se,value:pe,"data-element":ce,"data-role":ue,helpAriaLabel:be,borderRadius:me,hideBorders:fe=!1,required:ge,isOptional:he,minHeight:ve=v,validationMessagePositionTop:ye=!0}=n,_e=function(e,i){if(null==e)return{};var r,n,t=function(e,i){if(null==e)return{};var r,n,t={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],i.indexOf(r)>=0||(t[r]=e[r]);return t}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],i.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(t[r]=e[r])}return t}(n,["aria-labelledby","aria-describedby","autoFocus","inputHint","fieldHelp","label","children","characterLimit","onChange","onFocus","onBlur","disabled","labelInline","labelAlign","labelHelp","labelSpacing","inputIcon","id","error","warning","info","name","readOnly","placeholder","expandable","rows","validationOnLabel","adaptiveLabelBreakpoint","inputWidth","maxWidth","labelWidth","tooltipPosition","value","data-element","data-role","helpAriaLabel","borderRadius","hideBorders","required","isOptional","minHeight","validationMessagePositionTop"]);!T&&he&&(T=!0,x.deprecate("`isOptional` is deprecated in TextArea and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const{validationRedesignOptIn:Oe}=t(O),je=!Oe&&N,[we,Ie]=o(v),xe=e=>Oe?void 0:e,{current:Pe}=l(Q||g()),He=l(null),Le=a((e=>{He.current=e,L&&("current"in L?L.current=e:L(e))}),[L]),[Be,Te]=o("off");Array.isArray(me)&&me.length>4&&!A&&(x.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values."),A=!0);const Ae=a((()=>{const e=He.current;if((null==e?void 0:e.scrollHeight)&&(null==e?void 0:e.scrollHeight)>we){let i=e;for(;i&&!(null==i?void 0:i.scrollTop);)i=(null==i?void 0:i.parentElement)||null;const r=null==i?void 0:i.scrollTop;e.style.height="auto",e.style.height=`${Math.max(e.scrollHeight,we)}px`,i&&r&&(i.scrollTop=r)}}),[we]),{labelId:Re,validationId:Se,fieldHelpId:We,ariaDescribedBy:ke}=_({id:Pe,validationRedesignOptIn:Oe,error:U,warning:X,info:Y,label:C,fieldHelp:E}),[Ee,Ce]=b(pe,F,Be);d((()=>{var e;Ie(ne?(null==He||null===(e=He.current)||void 0===e?void 0:e.scrollHeight)||0:ve>v?ve:v)}),[ve,ne]),d((()=>{re&&Ae()})),d((()=>{var e,i;return re&&(window.addEventListener("resize",Ae),Ie((null==He||null===(e=He.current)||void 0===e?void 0:e.clientHeight)||0),null===(i=document.fonts)||void 0===i||i.addEventListener("loadingdone",Ae)),()=>{var e;re&&(window.removeEventListener("resize",Ae),null===(e=document.fonts)||void 0===e||e.removeEventListener("loadingdone",Ae))}}),[Ae,re]);const qe=!!(K||Se&&!te),Fe=l(g()),De=k?Fe.current:void 0,Me=[...Oe&&ye?[ke,De]:[De,ke],Ce,S].filter(Boolean).join(" "),ze=e(c,{disabled:V,readOnly:ee,inputWidth:"number"==typeof le?le:100-de,maxWidth:ae,error:U,warning:X,info:Y,borderRadius:me,hideBorders:fe,children:[i(p,B({"aria-invalid":!!U,"aria-labelledby":R,"aria-describedby":Me,autoFocus:W,name:Z,value:pe,ref:Le,onChange:D,onFocus:e=>{F&&Te("polite"),null==M||M(e)},onBlur:e=>{F&&Te("off"),null==z||z(e)},disabled:V,readOnly:ee,placeholder:V?"":ie,rows:ne,id:Pe,as:"textarea",validationIconId:Oe?void 0:Se,inputBorderRadius:me,required:ge},_e)),q,i(f,{disabled:V,readOnly:ee,inputIcon:K,error:U,warning:X,info:Y,validationIconId:Oe?void 0:Se,useValidationIcon:!(Oe||te)})]}),Ve=H(_e);return i(y,{tooltipPosition:se,helpAriaLabel:be,children:i(m,{children:i(h,(Ne=B({labelInline:je,hasIcon:qe,minHeight:we},Ve,s("textarea",{"data-element":ce,"data-role":ue})),$e={children:e(u,{fieldHelp:xe(E),fieldHelpId:We,error:U,warning:X,info:Y,label:C,labelId:Re,disabled:V,id:Pe,labelInline:xe(je),labelAlign:$,labelWidth:xe(de),labelHelp:xe(G),labelSpacing:J,isRequired:ge,useValidationIcon:xe(te),adaptiveLabelBreakpoint:oe,validationRedesignOptIn:Oe,my:0,children:[(k||G&&Oe)&&i(P,{align:$,id:De,"data-element":"input-hint",children:k||G}),Oe?e(I,{position:"relative",children:[ye&&e(r,{children:[i(w,{error:U,validationId:Se,warning:X,validationMessagePositionTop:ye}),(U||X)&&i(j,{warning:!(U||!X)})]}),ze,!ye&&e(r,{children:[i(w,{error:U,validationId:Se,warning:X,validationMessagePositionTop:ye}),(U||X)&&i(j,{warning:!(U||!X)})]})]}):ze,Ee]})},$e=null!=$e?$e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Ne,Object.getOwnPropertyDescriptors($e)):function(e){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);i.push.apply(i,r)}return i}(Object($e)).forEach((function(e){Object.defineProperty(Ne,e,Object.getOwnPropertyDescriptor($e,e))})),Ne))})});var Ne,$e}));R.displayName="Textarea";export{R as OriginalTextarea,R as Textarea,R as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import t,{css as e}from"styled-components";import{margin as i}from"styled-system";import
|
|
1
|
+
import t,{css as e}from"styled-components";import{margin as i}from"styled-system";import a from"../../__internal__/legacy-input/input.style.js";import{StyledLabelContainer as n}from"../../__internal__/legacy-label/label.style.js";import o from"../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import p from"../../style/themes/apply-base-theme.js";const s=64,r=t.div.attrs(p).withConfig({displayName:"textarea.style__StyledTextarea",componentId:"sc-4ae1af1-0"})(["margin-bottom:var(--fieldSpacing);",";","{box-sizing:border-box;resize:none;"," padding:var(--spacing150) var(--spacing200);","}"," ","{height:40px;position:absolute;height:100%;top:0px;right:4px;}"],i,a,(({minHeight:t})=>`min-height: ${t||64}px;`),(({hasIcon:t})=>t&&"padding-right: var(--spacing500);"),(({labelInline:t})=>t&&e(["","{align-items:flex-start;padding-top:6px;}"],n)),o);export{s as DEFAULT_MIN_HEIGHT,r as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{TextInput as default}from"./text-input.component.js";
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { MarginProps } from "styled-system";
|
|
3
|
+
import { InputProps } from "../../../../__internal__/input";
|
|
4
|
+
import { ValidationProps } from "../../../../__internal__/validations";
|
|
5
|
+
import { TagProps } from "../../../../__internal__/utils/helpers/tags";
|
|
6
|
+
export interface TextInputProps extends Omit<ValidationProps, "info">, MarginProps, Omit<InputProps, "size" | "error">, TagProps {
|
|
7
|
+
/**
|
|
8
|
+
* @private @internal @ignore
|
|
9
|
+
* Sets the input's text alignment. Does not affect the position of the input's prefix or suffix icons.
|
|
10
|
+
*/
|
|
11
|
+
align?: "left" | "right";
|
|
12
|
+
/**
|
|
13
|
+
* The ID of the element(s) that describe the input, typically used to reference the hint and/or
|
|
14
|
+
* validation message(s) associated with the input. Can be a space-separated list of IDs if there
|
|
15
|
+
* are multiple descriptive elements.
|
|
16
|
+
*/
|
|
17
|
+
"aria-describedby"?: string;
|
|
18
|
+
/**
|
|
19
|
+
* The ID of the element that labels the input, typically used to reference the input's label when
|
|
20
|
+
* the label is not properly associated with the input via the htmlFor attribute.
|
|
21
|
+
*/
|
|
22
|
+
"aria-labelledby"?: string;
|
|
23
|
+
/**
|
|
24
|
+
* If true, the input will automatically receive focus when the component is mounted.
|
|
25
|
+
*/
|
|
26
|
+
autoFocus?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Unique identifier for the input.
|
|
29
|
+
* Label id will be based on it, using following pattern: [id]-label.
|
|
30
|
+
* Will use a randomly generated GUID if none is provided
|
|
31
|
+
*/
|
|
32
|
+
/**
|
|
33
|
+
* @private @internal @ignore
|
|
34
|
+
* `data-component` attribute to be added to the component's root element for testing and tracking purposes.
|
|
35
|
+
*/
|
|
36
|
+
"data-component"?: string;
|
|
37
|
+
/**
|
|
38
|
+
* @private @internal @ignore
|
|
39
|
+
* `data-is-open` attribute to be added to the component's root element when rendered as part of Select.
|
|
40
|
+
*/
|
|
41
|
+
"data-is-open"?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Sets the input's id attribute, is not set a unique id will be generated and used.
|
|
44
|
+
* The label's htmlFor attribute will be set to match the input's id to ensure they are properly associated.
|
|
45
|
+
*/
|
|
46
|
+
id?: string;
|
|
47
|
+
/** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input */
|
|
48
|
+
inputHint?: string;
|
|
49
|
+
/**
|
|
50
|
+
* @internal @private @ignore
|
|
51
|
+
* An Icon to be rendered next to the input
|
|
52
|
+
* */
|
|
53
|
+
inputIcon?: React.ReactNode;
|
|
54
|
+
/** The width of the input as a percentage (e.g., 50 for 50%) */
|
|
55
|
+
inputWidth?: number;
|
|
56
|
+
/** Label content */
|
|
57
|
+
label: string;
|
|
58
|
+
/** When true label is inline */
|
|
59
|
+
labelInline?: boolean;
|
|
60
|
+
/**
|
|
61
|
+
* Slot to render additional content to the left of the input, such as a prefix.
|
|
62
|
+
*/
|
|
63
|
+
leftChildren?: React.ReactNode;
|
|
64
|
+
/** The maximum width of the component container */
|
|
65
|
+
maxWidth?: string;
|
|
66
|
+
/**
|
|
67
|
+
* @param ev - React's mouse event for the input element
|
|
68
|
+
* Callback called when mouse is clicked down on the input, but before it receives focus.
|
|
69
|
+
*/
|
|
70
|
+
onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
71
|
+
/**
|
|
72
|
+
* @param ev - React's mouse event for the input element
|
|
73
|
+
* Callback called when the input is clicked.
|
|
74
|
+
*/
|
|
75
|
+
onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
76
|
+
/** Size of an input */
|
|
77
|
+
size?: "small" | "medium" | "large";
|
|
78
|
+
/**
|
|
79
|
+
* The type of the input, e.g., "text", "email", "password". This prop is passed directly
|
|
80
|
+
* to the underlying input element, so any valid HTML input type is accepted.
|
|
81
|
+
* The default value is "text".
|
|
82
|
+
*/
|
|
83
|
+
type?: string;
|
|
84
|
+
/**
|
|
85
|
+
* @private @internal @ignore
|
|
86
|
+
* If true, the validation message will be rendered above the input, otherwise it will be rendered below.
|
|
87
|
+
*/
|
|
88
|
+
validationMessagePositionTop?: boolean;
|
|
89
|
+
}
|
|
90
|
+
export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
91
|
+
export default TextInput;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useRef as n,useContext as i,useCallback as o}from"react";import l from"../../../../__internal__/input/input.component.js";import a from"../../../../__internal__/validation-message/__next__/validation-message.component.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../../style/utils/filter-styled-system-margin-props.js";import d from"../../../../style/utils/filter-out-styled-system-spacing-props.js";import p from"../../../../hooks/__internal__/useUniqueId/index.js";import c from"../../../../__internal__/utils/helpers/guid/index.js";import u from"../../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import m from"../../../../__internal__/error-border/error-border.style.js";import{StyledTextInput as b,LabelWrapper as f,InputWrapper as y}from"./text-input.style.js";import{HintText as _}from"../../../../__internal__/hint-text/hint-text.component.js";import h from"../../../../__internal__/label/label.component.js";import j from"../../../../hooks/__internal__/useRegisterValidationToTabs/useRegisterValidationToTabs.js";import O from"../../../../__internal__/utils/helpers/combine-refs/index.js";import g from"../../../../__internal__/fieldset-validation-context/fieldset-validation-context.js";function v(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function w(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){v(e,r,t[r])}))}return e}function x(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const P=t.forwardRef(((t,v)=>{var{autoFocus:P,"aria-describedby":I,"aria-labelledby":k,children:C,"data-component":$="text-input","data-element":z,"data-is-open":D,"data-role":W,disabled:S,error:T,id:q,inputHint:E,inputIcon:F,inputWidth:M,label:R,labelInline:B=!1,leftChildren:V,maxWidth:A,name:H,onChange:U,onClick:G,onMouseDown:J,placeholder:K,prefix:L,readOnly:N,required:Q,size:X="medium",type:Y="text",validationMessagePositionTop:Z,value:ee,warning:re}=t,te=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(t,["autoFocus","aria-describedby","aria-labelledby","children","data-component","data-element","data-is-open","data-role","disabled","error","id","inputHint","inputIcon","inputWidth","label","labelInline","leftChildren","maxWidth","name","onChange","onClick","onMouseDown","placeholder","prefix","readOnly","required","size","type","validationMessagePositionTop","value","warning"]);const ne=n(null),ie=O(v,ne),{disableErrorBorder:oe}=i(g),le={disabled:S,readOnly:N},[ae,se]=p(q,H),{labelId:de,validationId:pe,ariaDescribedBy:ce}=u({id:ae,validationRedesignOptIn:!0,error:T,warning:re,label:R}),ue=n(c()),me=E?ue.current:void 0,be=null!=M?M:B?80:100,fe=[me,ce,I].filter(Boolean).join(" "),ye=!(!T&&!re);j(!!T,!!re,ae);const _e=ye&&!oe&&r(a,{id:pe,size:X,error:T,warning:re}),he=ye&&!oe&&r(m,{"data-role":"error-border",$warning:!(T||!re)}),je=o((e=>{S||N||null==J||J(e)}),[J,S,N]),Oe=o((e=>{S||N||null==G||G(e)}),[G,S,N]);return e(b,x(w({"data-element":z,"data-role":W,"data-component":$,$size:X,$labelInline:B,$hasValidationFailure:B&&ye},s(te)),{children:[R&&e(f,{"data-role":"label-wrapper",$labelInline:B,$size:X,$labelWrapperWidth:B&&"number"==typeof be?100-be:void 0,children:[r(h,x(w({id:de,htmlFor:ae,size:X,isRequired:Q},le),{children:R})),E&&r(_,x(w({id:me,size:X},le),{children:E}))]}),e(y,{"data-role":"input-wrapper",$size:X,$maxWidth:A,$inputWidth:M,onClick:()=>{var e;S||N||document.activeElement===ne.current||null===(e=ne.current)||void 0===e||e.focus()},"data-is-open":D,children:[Z&&_e,r(l,x(w({id:ae,name:se,"aria-invalid":!!T,"aria-describedby":fe,"aria-labelledby":k,value:ee,placeholder:S||N?void 0:K,required:Q,ref:ie,autoFocus:P,onMouseDown:je,onClick:Oe,onChange:U,error:!!T,inputIcon:F,size:X,prefix:L,leftChildren:V,type:Y},le,d(te)),{children:C})),!Z&&_e,he]})]}))}));export{P as TextInput,P as default};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
interface StyledTextInputProps {
|
|
2
|
+
$labelInline?: boolean;
|
|
3
|
+
$size: "small" | "medium" | "large";
|
|
4
|
+
$hasValidationFailure?: boolean;
|
|
5
|
+
}
|
|
6
|
+
interface LabelWrapperProps {
|
|
7
|
+
$labelInline?: boolean;
|
|
8
|
+
$labelWrapperWidth?: number;
|
|
9
|
+
$size: "small" | "medium" | "large";
|
|
10
|
+
}
|
|
11
|
+
interface InputWrapperProps {
|
|
12
|
+
$size: "small" | "medium" | "large";
|
|
13
|
+
$maxWidth?: string;
|
|
14
|
+
$inputWidth?: number;
|
|
15
|
+
}
|
|
16
|
+
declare const StyledTextInput: import("styled-components").StyledComponent<"div", any, {
|
|
17
|
+
theme: object;
|
|
18
|
+
} & StyledTextInputProps, "theme">;
|
|
19
|
+
declare const LabelWrapper: import("styled-components").StyledComponent<"div", any, LabelWrapperProps, never>;
|
|
20
|
+
declare const InputWrapper: import("styled-components").StyledComponent<"div", any, InputWrapperProps, never>;
|
|
21
|
+
export { StyledTextInput, LabelWrapper, InputWrapper };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e,{css as a}from"styled-components";import{margin as t}from"styled-system";import l from"../../../../style/themes/apply-base-theme.js";const i=e.div.attrs(l).withConfig({displayName:"text-input.style__StyledTextInput",componentId:"sc-bf599bd2-0"})(['[data-component="inline-inputs"] &,&[data-element="current-page"]{--fieldSpacing:0px;}margin-bottom:var(--fieldSpacing);'," display:flex;align-items:flex-start;flex-direction:",";gap:",";.time &{gap:unset;}.search &{flex:1 1 0%;}"],t,(({$labelInline:e})=>e?"row":"column"),(({$labelInline:e,$size:a,$hasValidationFailure:t})=>{if(!e)switch(a){case"small":return"var(--global-space-comp-xs)";case"large":return"var(--global-space-comp-m)";default:return"var(--global-space-comp-s)"}return"large"===a?t?"var(--global-space-comp-l)":"var(--global-space-comp-m)":t?"var(--global-space-comp-l)":"var(--global-space-comp-s)"})),n=e.div.withConfig({displayName:"text-input.style__LabelWrapper",componentId:"sc-bf599bd2-1"})([""," display:flex;flex-direction:column;align-self:stretch;",""],(({$labelWrapperWidth:e})=>e&&`\n --label-spacing: ${e}%;\n\n [data-component="date-range"] & {\n --label-spacing: ${2*e}%;\n }\n `),(({$labelInline:e,$size:t})=>a([""," ",""],e&&a(["padding-top:var(--global-space-comp-",");justify-content:flex-start;align-items:flex-end;align-self:stretch;width:var(--label-spacing,auto);"],t.charAt(0)),!e&&a(["justify-content:flex-end;align-items:flex-start;"])))),p=e.div.withConfig({displayName:"text-input.style__InputWrapper",componentId:"sc-bf599bd2-2"})(["display:flex;flex-direction:column;position:relative;width:100%;min-width:0;gap:",";",' &[data-is-open="true"]{z-index:var(--adaptiveSidebarModalBackdrop,9999);}'],(({$size:e})=>"small"===e?"var(--global-space-comp-xs)":"var(--global-space-comp-s)"),(({$maxWidth:e,$inputWidth:t})=>a([""," width:",";"],e&&`max-width: ${e};`,t?`${t}%`:"100%")));export{p as InputWrapper,n as LabelWrapper,i as StyledTextInput};
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { IconType } from "../../../icon";
|
|
2
|
+
export interface CommonTextInputArgs {
|
|
3
|
+
label: string;
|
|
4
|
+
placeholder: string;
|
|
5
|
+
inputIcon?: IconType;
|
|
6
|
+
}
|
|
7
|
+
export declare const getCommonTextInputArgsWithSpecialCharacters: (args: CommonTextInputArgs) => {
|
|
8
|
+
label: string;
|
|
9
|
+
placeholder: string;
|
|
10
|
+
inputIcon?: IconType;
|
|
11
|
+
};
|
|
12
|
+
export declare const getCommonTextInputArgs: (labelInlineDefault?: boolean) => {
|
|
13
|
+
disabled: boolean;
|
|
14
|
+
readOnly: boolean;
|
|
15
|
+
prefix: string;
|
|
16
|
+
label: string;
|
|
17
|
+
inputHint: string;
|
|
18
|
+
placeholder: string;
|
|
19
|
+
labelInline: boolean;
|
|
20
|
+
inputWidth: number;
|
|
21
|
+
size: string;
|
|
22
|
+
inputIcon: undefined;
|
|
23
|
+
required: boolean;
|
|
24
|
+
error: string;
|
|
25
|
+
warning: string;
|
|
26
|
+
};
|
|
27
|
+
export declare const commonTextInputArgTypes: () => {
|
|
28
|
+
disabled: {
|
|
29
|
+
control: {
|
|
30
|
+
type: string;
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
size: {
|
|
34
|
+
options: string[];
|
|
35
|
+
control: {
|
|
36
|
+
type: string;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
inputIcon: {
|
|
40
|
+
options: string[];
|
|
41
|
+
control: {
|
|
42
|
+
type: string;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
labelInline: {
|
|
46
|
+
control: {
|
|
47
|
+
type: string;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
inputWidth: {
|
|
51
|
+
control: {
|
|
52
|
+
type: string;
|
|
53
|
+
min: number;
|
|
54
|
+
max: number;
|
|
55
|
+
step: number;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
containerWidth: {
|
|
59
|
+
control: {
|
|
60
|
+
type: string;
|
|
61
|
+
min: number;
|
|
62
|
+
max: number;
|
|
63
|
+
step: number;
|
|
64
|
+
};
|
|
65
|
+
};
|
|
66
|
+
required: {
|
|
67
|
+
control: {
|
|
68
|
+
type: string;
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
error: {
|
|
72
|
+
control: {
|
|
73
|
+
type: string;
|
|
74
|
+
};
|
|
75
|
+
};
|
|
76
|
+
warning: {
|
|
77
|
+
control: {
|
|
78
|
+
type: string;
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{ICONS as e}from"../../../icon/icon-config.js";function t(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const r=e=>{const{label:r,placeholder:n}=e;return o=function(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(r){t(e,r,n[r])}))}return e}({},e),l=null!=(l={label:r,placeholder:n})?l:{},Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(l)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(l)).forEach((function(e){Object.defineProperty(o,e,Object.getOwnPropertyDescriptor(l,e))})),o;var o,l},n=(e=!1)=>({disabled:!1,readOnly:!1,prefix:"",label:e?"Label - new validation":"Label",inputHint:"",placeholder:"",labelInline:e,inputWidth:50,size:"medium",inputIcon:void 0,required:!1,error:"",warning:""}),o=()=>({disabled:{control:{type:"boolean"}},size:{options:["small","medium","large"],control:{type:"select"}},inputIcon:{options:["",...e],control:{type:"select"}},labelInline:{control:{type:"boolean"}},inputWidth:{control:{type:"range",min:0,max:100,step:1}},containerWidth:{control:{type:"range",min:0,max:100,step:1}},required:{control:{type:"boolean"}},error:{control:{type:"text"}},warning:{control:{type:"text"}}});export{o as commonTextInputArgTypes,n as getCommonTextInputArgs,r as getCommonTextInputArgsWithSpecialCharacters};
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
3
|
import { IconType } from "../icon";
|
|
4
|
-
import { CommonInputProps } from "../../__internal__/input";
|
|
4
|
+
import { CommonInputProps } from "../../__internal__/legacy-input";
|
|
5
5
|
import { ValidationProps } from "../../__internal__/validations";
|
|
6
6
|
import { TagProps } from "../../__internal__/utils/helpers/tags";
|
|
7
|
-
export declare const ALIGN_DEFAULT = "left";
|
|
8
7
|
export declare const SIZE_DEFAULT = "medium";
|
|
9
8
|
export declare const LABEL_WIDTH_DEFAULT = 30;
|
|
10
9
|
export declare const LABEL_VALIDATION_DEFAULT = false;
|
|
11
|
-
export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<CommonInputProps, "size" | "inputBorderRadius">, TagProps {
|
|
10
|
+
export interface CommonTextboxProps extends Pick<ValidationProps, "error" | "warning">, MarginProps, Omit<CommonInputProps, "size" | "inputBorderRadius">, TagProps {
|
|
12
11
|
/** Prop to specify the aria-labelledby property of the component */
|
|
13
12
|
"aria-labelledby"?: string;
|
|
14
|
-
/**
|
|
13
|
+
/** @deprecated `adaptiveLabelBreakpoint` has been deprecated, the functionality will no longer work. */
|
|
15
14
|
adaptiveLabelBreakpoint?: number;
|
|
16
15
|
/** Integer to determine a timeout for the deferred callback */
|
|
17
16
|
deferTimeout?: number;
|
|
18
17
|
/** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
|
|
19
18
|
inputHint?: string;
|
|
20
|
-
/**
|
|
19
|
+
/**
|
|
20
|
+
* @deprecated `fieldHelp` has been deprecated, `inputHint` should be used instead.
|
|
21
|
+
* [Legacy] Help content to be displayed under an input. */
|
|
21
22
|
fieldHelp?: React.ReactNode;
|
|
22
23
|
/**
|
|
23
24
|
* An optional alternative for props.value, this is useful if the
|
|
@@ -31,7 +32,7 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
|
|
|
31
32
|
*/
|
|
32
33
|
id?: string;
|
|
33
34
|
/** Type of the icon that will be rendered next to the input */
|
|
34
|
-
inputIcon?: IconType;
|
|
35
|
+
inputIcon?: IconType | React.ReactNode;
|
|
35
36
|
/** Optional handler for click event on Textbox icon */
|
|
36
37
|
iconOnClick?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
|
|
37
38
|
/** Optional handler for mouse down event on Textbox icon */
|
|
@@ -49,24 +50,25 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
|
|
|
49
50
|
leftChildren?: React.ReactNode;
|
|
50
51
|
/** Label content */
|
|
51
52
|
label?: string;
|
|
52
|
-
/**
|
|
53
|
+
/** @deprecated `labelAlign` has been deprecated, the functionality will no longer work. */
|
|
53
54
|
labelAlign?: "left" | "right";
|
|
54
55
|
/**
|
|
56
|
+
* @deprecated `labelHelp` has been deprecated, `inputHint` should be used instead.
|
|
55
57
|
* [Legacy] Text applied to label help tooltip. When opted into new design validations
|
|
56
|
-
*
|
|
58
|
+
* string values will render as a hint above the input, unless an `inputHint`
|
|
57
59
|
* prop is also passed.
|
|
58
60
|
*/
|
|
59
61
|
labelHelp?: React.ReactNode;
|
|
60
|
-
/**
|
|
62
|
+
/** When true label is inline. */
|
|
61
63
|
labelInline?: boolean;
|
|
62
|
-
/**
|
|
64
|
+
/** @deprecated `labelSpacing` has been deprecated, the functionality will no longer work.*/
|
|
63
65
|
labelSpacing?: 1 | 2;
|
|
64
|
-
/**
|
|
66
|
+
/** @deprecated `labelWidth` has been deprecated, the functionality will no longer work. */
|
|
65
67
|
labelWidth?: number;
|
|
66
68
|
/** Specify a callback triggered on change */
|
|
67
69
|
onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
|
|
68
70
|
/** Deferred callback to be called after the onChange event */
|
|
69
|
-
onChangeDeferred?: () => void;
|
|
71
|
+
onChangeDeferred?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
|
|
70
72
|
/** Specify a callback triggered on click */
|
|
71
73
|
onClick?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
|
|
72
74
|
/** Event handler for the focus event */
|
|
@@ -77,22 +79,24 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
|
|
|
77
79
|
onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
78
80
|
/** Emphasized part of the displayed text */
|
|
79
81
|
prefix?: string;
|
|
80
|
-
/**
|
|
82
|
+
/** @deprecated `reverse` has been deprecated, the functionality will no longer work. */
|
|
81
83
|
reverse?: boolean;
|
|
82
84
|
/** Size of an input */
|
|
83
85
|
size?: "small" | "medium" | "large";
|
|
84
|
-
/**
|
|
86
|
+
/** @deprecated `validationOnLabel` has been deprecated, the functionality will no longer work. */
|
|
85
87
|
validationOnLabel?: boolean;
|
|
86
|
-
/**
|
|
88
|
+
/** @deprecated `tooltipPosition` has been deprecated, the functionality will no longer work. */
|
|
87
89
|
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
88
|
-
/**
|
|
90
|
+
/** @deprecated `helpAriaLabel` has been deprecated, the functionality will no longer work. */
|
|
89
91
|
helpAriaLabel?: string;
|
|
90
|
-
/**
|
|
92
|
+
/** @deprecated `tooltipId` has been deprecated, the functionality will no longer work. */
|
|
91
93
|
tooltipId?: string;
|
|
92
94
|
/** @private @internal @ignore */
|
|
93
95
|
"data-component"?: string;
|
|
94
96
|
/** Render the ValidationMessage above the Textbox input when validationRedesignOptIn flag is set */
|
|
95
97
|
validationMessagePositionTop?: boolean;
|
|
98
|
+
/** @deprecated `info` has been deprecated, the functionality will no longer work. */
|
|
99
|
+
info?: string | boolean;
|
|
96
100
|
}
|
|
97
101
|
export interface TextboxProps extends Omit<CommonTextboxProps, "defaultValue"> {
|
|
98
102
|
/** Content to be rendered next to the input */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,
|
|
1
|
+
import{jsxs as e,Fragment as n,jsx as r}from"react/jsx-runtime";import t,{useRef as i,useCallback as o,useState as l}from"react";import{TextInput as a}from"./__internal__/__next__/text-input.component.js";import c from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import d from"../../hooks/useCharacterCount/useCharacterCount.js";import u from"../../hooks/__internal__/useUniqueId/index.js";import p from"../../__internal__/utils/helpers/combine-refs/index.js";function s(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function f(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},t=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),t.forEach((function(n){s(e,n,r[n])}))}return e}const b="medium",m=30,h=!1,y=new Set(["adaptiveLabelBreakpoint","info","helpAriaLabel","labelAlign","labelWidth","labelSpacing","labelId","reverse","tooltipPosition","tooltipId","validationOnLabel"]),O=t.forwardRef(((t,s)=>{var{"aria-describedby":m,"aria-labelledby":h,characterLimit:O,children:g,"data-component":j,"data-element":w,"data-role":v,deferTimeout:C,disabled:_,error:x,formattedValue:P,fieldHelp:k,iconOnClick:I,iconOnMouseDown:D,iconTabIndex:S,id:T,inputHint:M,inputIcon:H,inputWidth:W,label:B,labelHelp:L,labelInline:q,leftChildren:z,maxWidth:E,name:F,onBlur:A,onFocus:V,onChange:$,onChangeDeferred:R,onClick:U,onMouseDown:G,placeholder:J,positionedChildren:K,prefix:N,readOnly:Q,required:X,size:Y=b,warning:Z,validationMessagePositionTop:ee=!0,value:ne}=t,re=function(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r,t,i={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(i[r]=e[r]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(t,["aria-describedby","aria-labelledby","characterLimit","children","data-component","data-element","data-role","deferTimeout","disabled","error","formattedValue","fieldHelp","iconOnClick","iconOnMouseDown","iconTabIndex","id","inputHint","inputIcon","inputWidth","label","labelHelp","labelInline","leftChildren","maxWidth","name","onBlur","onFocus","onChange","onChangeDeferred","onClick","onMouseDown","placeholder","positionedChildren","prefix","readOnly","required","size","warning","validationMessagePositionTop","value"]);const[te,ie]=u(T,F),oe=i(null),le=i(null),ae=p(s,le),ce=o((e=>{if(_||Q)return;const n=null!=I?I:U;null==n||n(e)}),[I,U,_,Q]),de=o((e=>{if(_||Q)return;const n=null!=D?D:G;null==n||n(e)}),[D,G,_,Q]),ue="string"==typeof H?r(c,{inputIcon:H,disabled:_,error:x,iconTabIndex:S,onClick:ce,onMouseDown:de,readOnly:Q,size:Y,warning:Z,blockFocusStyling:!0}):null,pe=o((e=>{R&&(oe.current&&clearTimeout(oe.current),oe.current=setTimeout((()=>{R(e)}),C||750))}),[R,C]),se=o((e=>{$(e),pe(e)}),[$,pe]),fe="string"==typeof ne?ne:"",[be,me]=l("off"),[he,ye]=d(fe,O,be),Oe=[m,ye,k?`${te}-field-help`:void 0].filter(Boolean).join(" "),ge="string"==typeof L?L:void 0;return e(n,{children:[r(a,(je=f({},(ve=re,Object.fromEntries(Object.entries(ve).filter((([e])=>!y.has(e)))))),we={id:te,label:B||"",labelInline:q,disabled:_,readOnly:Q,size:Y,prefix:N,inputHint:M||ge,inputIcon:ue,placeholder:J,value:"string"==typeof P?P:null!=ne?ne:"",inputWidth:W,error:x,warning:Z,"aria-describedby":Oe,"aria-labelledby":h,required:X,name:ie,onChange:se,onBlur:e=>{O&&me("off"),null==A||A(e)},onFocus:e=>{O&&me("polite"),null==V||V(e)},onClick:U,onMouseDown:G,ref:ae,maxWidth:E,"data-component":j,"data-element":w,"data-role":v,validationMessagePositionTop:ee,leftChildren:z||K,children:g},we=null!=we?we:{},Object.getOwnPropertyDescriptors?Object.defineProperties(je,Object.getOwnPropertyDescriptors(we)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n}(Object(we)).forEach((function(e){Object.defineProperty(je,e,Object.getOwnPropertyDescriptor(we,e))})),je)),he,k&&r("span",{"data-element":"help",style:{display:"block",marginTop:"calc(8px - var(--fieldSpacing, 0px))",whiteSpace:"pre-wrap",width:W?W-1+"%":"100%",float:"right"},id:`${te}-field-help`,children:k})]});var je,we,ve}));export{h as LABEL_VALIDATION_DEFAULT,m as LABEL_WIDTH_DEFAULT,b as SIZE_DEFAULT,O as Textbox,O as default};
|
|
@@ -23,7 +23,7 @@ declare const StyledFooterWrapper: import("styled-components").StyledComponent<"
|
|
|
23
23
|
declare const StyledAccordionFooterWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
24
24
|
accordionExpanded?: boolean;
|
|
25
25
|
}, never>;
|
|
26
|
-
declare const StyledTileSelectInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../__internal__/input").InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>, any, {}, never>;
|
|
26
|
+
declare const StyledTileSelectInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../__internal__/legacy-input").InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>, any, {}, never>;
|
|
27
27
|
declare const StyledTitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
28
28
|
declare const StyledDeselectWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
29
29
|
hasActionAdornment: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{css as t}from"styled-components";import{margin as i}from"styled-system";import{Fieldset as o}from"../fieldset/fieldset.component.js";import n from"../../__internal__/input/input.component.js";import"react/jsx-runtime";import"react";import"../../__internal__/input/input-presentation.style.js";import"../carbon-provider/__internal__/new-validation.context.js";import{StyledLegend as r}from"../fieldset/fieldset.style.js";import l from"../icon/icon.style.js";import s from"../../style/themes/apply-base-theme.js";import
|
|
1
|
+
import e,{css as t}from"styled-components";import{margin as i}from"styled-system";import{Fieldset as o}from"../fieldset/fieldset.component.js";import n from"../../__internal__/legacy-input/input.component.js";import"react/jsx-runtime";import"react";import"../../__internal__/legacy-input/input-presentation.style.js";import"../carbon-provider/__internal__/new-validation.context.js";import{StyledLegend as r}from"../fieldset/fieldset.style.js";import l from"../icon/icon.style.js";import s from"../../style/themes/apply-base-theme.js";import c from"../../style/utils/add-focus-styling.js";const a=e.h3.withConfig({displayName:"tile-select.style__StyledTitle",componentId:"sc-166c5ec0-0"})(["font-size:16px;font-weight:700;margin:0;margin-right:16px;margin-bottom:8px;color:var(--colorsActionMinorYin090);"]),d=e.h4.withConfig({displayName:"tile-select.style__StyledSubtitle",componentId:"sc-166c5ec0-1"})(["font-size:14px;font-weight:500;margin:0;margin-right:16px;margin-bottom:8px;color:var(--colorsActionMinorYin090);"]),p=e.div.withConfig({displayName:"tile-select.style__StyledAdornment",componentId:"sc-166c5ec0-2"})(["z-index:500;margin-bottom:","px;"],(({hasAdditionalInformation:e})=>e?"4":"8")),m=e.p.withConfig({displayName:"tile-select.style__StyledDescription",componentId:"sc-166c5ec0-3"})(["color:var(--colorsActionMinorYin055);font-size:14px;margin:0;"]),g=e.div.withConfig({displayName:"tile-select.style__StyledTileSelect",componentId:"sc-166c5ec0-4"})(["background:var(--colorsActionMinorYang100);padding:24px;"," ",""],(({checked:e})=>e&&t(["background:var(--colorsActionMajor025);"])),(({disabled:e})=>e&&t(["background:var(--colorsActionMinorYang100);",",",",","{color:var(--colorsActionMinorYin030);}"," *{opacity:0.3;}"],a,d,m,p))),y=e.div.withConfig({displayName:"tile-select.style__StyledFocusWrapper",componentId:"sc-166c5ec0-5"})(["",""],(({checked:e,hasFocus:i})=>t(["position:relative;border:1px solid var(--colorsActionMinor250);border-radius:var(--borderRadius100);overflow:hidden;"," ",""],e&&t(["border-color:var(--colorsActionMajor500);z-index:10;"]),i&&t([""," z-index:15;"],c())))),f=e.div.attrs(s).withConfig({displayName:"tile-select.style__StyledTileSelectContainer",componentId:"sc-166c5ec0-6"})([""," width:100%;position:relative;& + & ","{margin-top:-1px;}",""],i,y,(({checked:e,disabled:i})=>!e&&!i&&t(["&:hover ","{background:var(--colorsActionMinor050);}"],g))),h=e.div.withConfig({displayName:"tile-select.style__StyledFooterWrapper",componentId:"sc-166c5ec0-7"})(["width:fit-content;position:relative;z-index:200;"]),_=e.div.withConfig({displayName:"tile-select.style__StyledAccordionFooterWrapper",componentId:"sc-166c5ec0-8"})(["width:fit-content;position:relative;z-index:200;left:-12px;border-bottom-right-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);",""],(({accordionExpanded:e})=>`\n span[data-element="chevron_down"] {\n transition: transform 0.3s;\n ${!e&&"transform: rotate(-90deg)"};\n }\n `)),x=e(n).withConfig({displayName:"tile-select.style__StyledTileSelectInput",componentId:"sc-166c5ec0-9"})(["position:absolute;top:0;left:0;opacity:0;height:100%;width:100%;margin:0;z-index:100;cursor:",";"],(({disabled:e})=>e?"not-allowed":"pointer")),v=e.div.withConfig({displayName:"tile-select.style__StyledTitleContainer",componentId:"sc-166c5ec0-10"})(["display:inline-flex;align-items:baseline;flex-wrap:wrap;margin-right:16px;position:relative;"]),b=e.div.withConfig({displayName:"tile-select.style__StyledDeselectWrapper",componentId:"sc-166c5ec0-11"})(["",""],(({hasActionAdornment:e})=>t(["z-index:200;position:relative;top:-4px;right:8px;height:fit-content;",""],e&&`\n margin-right: var(--sizing200);\n display: flex;\n align-items: baseline;\n min-height: var(--sizing400);\n\n ${l} {\n top: 2px;\n }\n `))),w=e(o).attrs(s).withConfig({displayName:"tile-select.style__StyledTileSelectFieldset",componentId:"sc-166c5ec0-12"})([""," ","{margin-bottom:16px;font-size:16px;line-height:16px;margin-left:-2px;}",""],i,r,(({multiSelect:e})=>e&&t(["","{margin-bottom:8px;}"],f))),u=e.p.withConfig({displayName:"tile-select.style__StyledGroupDescription",componentId:"sc-166c5ec0-13"})(["color:var(--colorsActionMinorYin055);margin:0;margin-bottom:16px;"]);export{_ as StyledAccordionFooterWrapper,p as StyledAdornment,m as StyledDescription,b as StyledDeselectWrapper,y as StyledFocusWrapper,h as StyledFooterWrapper,u as StyledGroupDescription,d as StyledSubtitle,g as StyledTileSelect,f as StyledTileSelectContainer,w as StyledTileSelectFieldset,x as StyledTileSelectInput,a as StyledTitle,v as StyledTitleContainer};
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
3
|
import { ValidationProps } from "../../__internal__/validations";
|
|
4
4
|
import { TagProps } from "../../__internal__/utils/helpers/tags";
|
|
5
|
-
import { Sizes } from "../../__internal__/input/input-presentation.component";
|
|
5
|
+
import { Sizes } from "../../__internal__/legacy-input/input-presentation.component";
|
|
6
6
|
import { ToggleDataProps } from "./__internal__/time-toggle";
|
|
7
7
|
export type ToggleValue = "AM" | "PM";
|
|
8
8
|
export type TimeValue = {
|