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
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface HintTextProps {
|
|
3
|
+
/** The alignment of the hint text */
|
|
4
|
+
align?: "left" | "right";
|
|
5
|
+
/** Children elements */
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
/** Sets the font weight for the hint text */
|
|
8
|
+
fontWeight?: string;
|
|
9
|
+
/** Sets the id for the component. */
|
|
10
|
+
id?: string;
|
|
11
|
+
/** Indicates whether the parent component is inline. */
|
|
12
|
+
isComponentInline?: boolean;
|
|
13
|
+
/** Indicates whether the parent component has a dark background. */
|
|
14
|
+
isDarkBackground?: boolean;
|
|
15
|
+
/** Indicates whether the parent component is disabled. */
|
|
16
|
+
isDisabled?: boolean;
|
|
17
|
+
/** Margin bottom for the hint text */
|
|
18
|
+
marginBottom?: string;
|
|
19
|
+
/** Margin top for the hint text */
|
|
20
|
+
marginTop?: string;
|
|
21
|
+
/** Max width for the hint text */
|
|
22
|
+
maxWidth?: string;
|
|
23
|
+
/** Set large font-size */
|
|
24
|
+
isLarge?: boolean;
|
|
25
|
+
}
|
|
26
|
+
export declare const HintText: ({ align, children, fontWeight, id, isComponentInline, isDarkBackground, isDisabled, marginBottom, marginTop, maxWidth, isLarge, }: HintTextProps) => React.JSX.Element | null;
|
|
27
|
+
export default HintText;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as i}from"react/jsx-runtime";import{useContext as t}from"react";import n from"./hint-text.style.js";import a from"../../components/carbon-provider/__internal__/new-validation.context.js";const r=({align:r,children:o,fontWeight:e,id:m,isComponentInline:s=!1,isDarkBackground:d=!1,isDisabled:l=!1,marginBottom:g="var(--spacing100)",marginTop:p="var(--spacing000)",maxWidth:c,isLarge:h})=>{const{validationRedesignOptIn:f}=t(a);return s&&!f?null:i(n,{align:r,"data-element":"input-hint","data-role":"hint-text",fontWeight:e,id:m,isDarkBackground:d,isDisabled:l,marginBottom:g,marginTop:p,maxWidth:c,isLarge:h,children:o})};export{r as HintText,r as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import t,{css as i}from"styled-components";const o=t.div.withConfig({displayName:"hint-text.style__StyledHintText",componentId:"sc-92b90b9-0"})(["display:flex;align-items:center;font-size:14px;"," "," margin-bottom:",";margin-top:",";"," "," ",' ::after{content:" ";}'],(({isLarge:t})=>t&&i(["font-size:var(--fontSizes200);"])),(({align:t})=>i(["justify-content:",";"],"right"!==t?"flex-start":"flex-end")),(({marginBottom:t})=>t),(({marginTop:t})=>t),(({isDarkBackground:t,isDisabled:o})=>i(["color:",";"],((t,i)=>t?"var(--colorsUtilityYang080)":i?"var(--colorsUtilityYin030)":"var(--colorsUtilityYin055)")(t,o))),(({fontWeight:t})=>t&&i(["font-weight:",";"],t)),(({maxWidth:t})=>t&&i(["max-width:",";"],t)));export{o as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{HintText as default}from"./hint-text.component.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import t from"./input.component.js";export{default as InputPresentation}from"./input-presentation.component.js";export{t as Input,t as default};
|
package/{lib/__internal__/input → esm/__internal__/legacy-input}/input-presentation.style.d.ts
RENAMED
|
@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
|
|
|
2
2
|
import { InputContextProps } from "../input-behaviour";
|
|
3
3
|
import { CarbonProviderProps } from "../../components/carbon-provider";
|
|
4
4
|
export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
|
|
5
|
-
declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "
|
|
5
|
+
declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "readOnly" | "size" | "align" | "borderRadius" | "hasIcon" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
|
|
6
6
|
export default InputPresentationStyle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import r,{css as i}from"styled-components";import t from"./input-sizes.style.js";import o from"./input.style.js";import e from"../../style/utils/add-focus-styling.js";const n=r.div.withConfig({displayName:"input-presentation.style__StyledInputPresentationContainer",componentId:"sc-
|
|
1
|
+
import r,{css as i}from"styled-components";import t from"./input-sizes.style.js";import o from"./input.style.js";import e from"../../style/utils/add-focus-styling.js";const n=r.div.withConfig({displayName:"input-presentation.style__StyledInputPresentationContainer",componentId:"sc-83661d80-0"})(["flex:0 0 ","%;display:flex;position:relative;max-width:",";"],(({inputWidth:r})=>r),(({maxWidth:r})=>r?`${r}`:"100%")),a=r.div.withConfig({displayName:"input-presentation.style__InputPresentationStyle",componentId:"sc-83661d80-1"})(["align-items:stretch;background:var(--colorsUtilityYang100);"," box-sizing:border-box;cursor:text;display:flex;flex-wrap:wrap;width:100%;margin:0;"," "," "," "," "," "," "," input::-ms-clear{display:none;}input::-webkit-contacts-auto-fill-button{display:none !important;}"],(({hideBorders:r})=>r?"border: 1px solid transparent;":"border: 1px solid var(--colorsUtilityMajor300);"),(({borderRadius:r})=>Array.isArray(r)?`border-radius: ${r.map((r=>`var(--${r})`)).join(" ")};`:`border-radius: var(--${r});`),(({size:r,hasIcon:e,align:n})=>r&&i(["min-height:",";","{padding:0 ",";"," ","}"],t[r].height,o,t[r].horizontalPadding,e&&"right"===n&&"padding-left: 0;",e&&"left"===n&&"padding-right: 0;")),(({disabled:r,hideBorders:t})=>r&&i(["background:var(--colorsUtilityDisabled400);border-color:",";cursor:not-allowed;"],t?"transparent":"var(--colorsUtilityDisabled600)")),(({hasFocus:r})=>r&&i(["&{"," z-index:2;}"],e())),(function({error:r,warning:t,info:o,disabled:e,validationRedesignOptIn:n}){let a;if(e)return"";if(r)a="var(--colorsSemanticNegative500)";else if(t)a=n?"var(--colorsUtilityMajor300)":"var(--colorsSemanticCaution500)";else{if(!o)return"";a="var(--colorsSemanticInfo500)"}return i(["border-color:"," !important;z-index:1;",""],a,r&&`box-shadow: inset 1px 1px 0 ${a}, inset -1px -1px 0 ${a};`)}),(({readOnly:r})=>r&&i(["background-color:var(--colorsUtilityReadOnly400);border-color:transparent;"])),(({align:r})=>"right"===r&&"flex-direction: row-reverse;\n "));export{n as StyledInputPresentationContainer,a as default};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BorderRadiusType } from "../../components/box/box.component";
|
|
3
|
+
export type EnterKeyHintTypes = "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
|
|
4
|
+
export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value"> {
|
|
5
|
+
align?: "right" | "left";
|
|
6
|
+
/** The ID of the input's description, is set along with hint text and error message. */
|
|
7
|
+
"aria-describedby"?: string;
|
|
8
|
+
/** Override the variant component */
|
|
9
|
+
as?: React.ElementType;
|
|
10
|
+
/** If true the Component will be focused when rendered */
|
|
11
|
+
autoFocus?: boolean;
|
|
12
|
+
/** If true, the component will be disabled */
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
/** HTML id attribute of the input */
|
|
15
|
+
id?: string;
|
|
16
|
+
/** Specify a custom border radius for the input. Any valid border-radius design token, or an array of border-radius design tokens. */
|
|
17
|
+
inputBorderRadius?: BorderRadiusType | BorderRadiusType[];
|
|
18
|
+
/** Name of the input */
|
|
19
|
+
name?: string;
|
|
20
|
+
/** Specify a callback triggered on blur */
|
|
21
|
+
onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
|
|
22
|
+
/** Specify a callback triggered on change */
|
|
23
|
+
onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
|
|
24
|
+
/** Specify a callback triggered on click */
|
|
25
|
+
onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
|
|
26
|
+
/** Specify a callback triggered on focus */
|
|
27
|
+
onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
|
|
28
|
+
/** Specify a callback triggered on keyDown */
|
|
29
|
+
onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
30
|
+
/** Placeholder string to be displayed in input */
|
|
31
|
+
placeholder?: string;
|
|
32
|
+
/** If true, the component will be read-only */
|
|
33
|
+
readOnly?: boolean;
|
|
34
|
+
/** Flag to configure component as mandatory */
|
|
35
|
+
required?: boolean;
|
|
36
|
+
/** Id of the validation icon */
|
|
37
|
+
validationIconId?: string;
|
|
38
|
+
/** The value of the input */
|
|
39
|
+
value: string | readonly string[] | number | undefined;
|
|
40
|
+
}
|
|
41
|
+
export interface InputProps extends CommonInputProps {
|
|
42
|
+
/** The visible width of the text control, in average character widths */
|
|
43
|
+
cols?: number;
|
|
44
|
+
/** Integer to determine a timeout for the deferred callback */
|
|
45
|
+
deferTimeout?: number;
|
|
46
|
+
/** Deferred callback to be called after the onChange event */
|
|
47
|
+
onChangeDeferred?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
|
|
48
|
+
/** The number of visible text lines for the control */
|
|
49
|
+
rows?: number;
|
|
50
|
+
/** HTML type attribute of the input */
|
|
51
|
+
type?: string;
|
|
52
|
+
}
|
|
53
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
|
|
54
|
+
export default Input;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import r,{useContext as t,useRef as n,useCallback as o,useEffect as u}from"react";import i from"./input.style.js";import{InputContext as a}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as c}from"../input-behaviour/input-group-behaviour.component.js";function l(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const s=r.forwardRef(((r,s)=>{var{align:d,"aria-labelledby":p,"aria-describedby":b,placeholder:f,disabled:y,readOnly:O,autoFocus:m,onClick:h,onChangeDeferred:g,onChange:v,onBlur:j,onFocus:B,deferTimeout:P,type:w="text",id:F,name:C,validationIconId:R,inputBorderRadius:S="borderRadius050",enterKeyHint:k}=r,x=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},u=Object.keys(e);for(n=0;n<u.length;n++)t=u[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(n=0;n<u.length;n++)t=u[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(r,["align","aria-labelledby","aria-describedby","placeholder","disabled","readOnly","autoFocus","onClick","onChangeDeferred","onChange","onBlur","onFocus","deferTimeout","type","id","name","validationIconId","inputBorderRadius","enterKeyHint"]);const D=t(a),I=t(c),E=n(null);let T=n(null);s&&"current"in s&&(T=s);const H=o((e=>{T.current=e,"function"==typeof s&&s(e),m&&e&&e.focus(),k&&e&&e.setAttribute("enterkeyhint",k)}),[m,s,k]);u((()=>{D.inputRef&&D.inputRef(T)}),[D,T]),u((()=>{y&&D.onBlur&&D.onBlur()}),[y,D]);const K=b?[b]:[];(D.hasFocus||I.hasFocus||D.hasMouseOver||I.hasMouseOver)&&R&&K.push(R);const M=K.length?K.filter(Boolean).join(" "):void 0;return e(i,(A=function(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){l(e,r,t[r])}))}return e}({},x),N={"data-has-autofocus":!!m||void 0,"aria-describedby":M,"aria-labelledby":p,align:d,placeholder:f,disabled:y,readOnly:O,name:C,type:w,id:F||C,ref:H,"data-element":"input",onFocus:e=>{B&&B(e),D.onFocus&&D.onFocus(),I.onFocus&&I.onFocus(),"text"===w&&function(e){setTimeout((()=>{if(null==e?void 0:e.current){const{selectionStart:r,selectionEnd:t,value:n}=e.current,{length:o}=n;(0===r&&0===t||r===o&&t===o)&&document.activeElement===e.current&&e.current.setSelectionRange(0,o)}}))}(T)},onBlur:e=>{j&&j(e),D.onBlur&&D.onBlur(),I.onBlur&&I.onBlur()},onClick:y||O?void 0:e=>{var r;h&&h(e),null==T||null===(r=T.current)||void 0===r||r.focus()},onChange:e=>{v&&v(e),(e=>{g&&(E.current&&clearTimeout(E.current),E.current=setTimeout((()=>{g(e)}),P||750))})(e)},inputBorderRadius:S},N=null!=N?N:{},Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(N)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(N)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(N,e))})),A));var A,N}));s.displayName="Input";export{s as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import o,{css as r}from"styled-components";const t=o.input.withConfig({displayName:"input.style__StyledInput",componentId:"sc-745cf632-0"})(["background:transparent;border:none;color:var(--colorsUtilityYin090);flex-grow:1;font-size:var(--fontSizes100);outline:none;padding:0;margin:0;width:30px;&:-webkit-autofill{background-clip:text;-webkit-background-clip:text;}"," &::placeholder{color:var(--colorsUtilityYin055);}"," ",""],(({inputBorderRadius:o})=>Array.isArray(o)?`border-radius: ${o.map((o=>`var(--${o})`)).join(" ")};`:`border-radius: var(--${o});`),(({align:o})=>o&&r(["text-align:",";"],o)),(({disabled:o})=>o&&r(["color:var(--colorsUtilityYin030);cursor:not-allowed;"])));export{t as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{default}from"./label.component.js";
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { StyledLabelProps, StyledLabelContainerProps } from "./label.style";
|
|
3
|
+
import { ValidationProps } from "../validations";
|
|
4
|
+
import { IconType } from "../../components/icon";
|
|
5
|
+
export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLabelContainerProps {
|
|
6
|
+
as?: "span" | "label";
|
|
7
|
+
/** Children elements */
|
|
8
|
+
children?: React.ReactNode;
|
|
9
|
+
/** A message that the Help component will display */
|
|
10
|
+
help?: React.ReactNode;
|
|
11
|
+
/** Icon type */
|
|
12
|
+
helpIcon?: IconType;
|
|
13
|
+
/** A string that represents the ID of another form element */
|
|
14
|
+
htmlFor?: string;
|
|
15
|
+
/** The unique id of the label element */
|
|
16
|
+
labelId?: string;
|
|
17
|
+
/** The unique id of the Help component tooltip, used for accessibility */
|
|
18
|
+
tooltipId?: string;
|
|
19
|
+
/** Whether to show the validation icon */
|
|
20
|
+
useValidationIcon?: boolean;
|
|
21
|
+
/** Id of the validation icon */
|
|
22
|
+
validationIconId?: string;
|
|
23
|
+
/**
|
|
24
|
+
* @private
|
|
25
|
+
* @internal
|
|
26
|
+
* Sets className for component. INTERNAL USE ONLY. */
|
|
27
|
+
className?: string;
|
|
28
|
+
/** Sets aria-label for label element */
|
|
29
|
+
"aria-label"?: string;
|
|
30
|
+
/** Whether this component is shown against a dark background */
|
|
31
|
+
isDarkBackground?: boolean;
|
|
32
|
+
/** @internal @private */
|
|
33
|
+
onClick?: () => void;
|
|
34
|
+
}
|
|
35
|
+
export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, onClick, "aria-label": ariaLabel, isLarge, }: LabelProps) => React.JSX.Element;
|
|
36
|
+
declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, onClick, "aria-label": ariaLabel, isLarge, }: LabelProps) => React.JSX.Element>;
|
|
37
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o,{useState as n,useContext as t,useRef as i}from"react";import{Help as l}from"../../components/help/help.component.js";import a,{StyledLabelContainer as c}from"./label.style.js";import{ValidationIcon as s}from"../validations/validation-icon.component.js";import p from"./icon-wrapper.style.js";import{InputContext as u}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as b}from"../input-behaviour/input-group-behaviour.component.js";import d from"../utils/helpers/guid/index.js";function m(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function f(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},n=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),n.forEach((function(r){m(e,r,o[r])}))}return e}function g(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 o=Object.getOwnPropertySymbols(e);r.push.apply(r,o)}return r}(Object(r)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))})),e}const h=({align:o,as:m="label",children:h,disabled:O,error:j,help:y,helpIcon:w,htmlFor:v,info:P,inline:k,isDarkBackground:I=!1,isRequired:D,labelId:L,pr:M,pl:E,tooltipId:F,useValidationIcon:S=!0,validationIconId:x,warning:B,width:q=30,className:C,onClick:N,"aria-label":R,isLarge:V})=>{const[$,z]=n(!1),{onMouseEnter:A,onMouseLeave:G}=t(u),{onMouseEnter:H,onMouseLeave:J}=t(b),K=i(d());let Q;return Q=k&&!o?"right":o||"left",e(c,{"data-role":"label-container",id:`label-container-${null!=L?L:K.current}`,align:Q,inline:k,width:q,pr:M,pl:E,className:C,onClick:N,children:[r(a,g(f({"data-element":"label",disabled:O,id:L},"label"===m?{htmlFor:v}:{}),{onMouseEnter:()=>{A&&A(),H&&H()},onMouseLeave:()=>{G&&G(),J&&J()},isRequired:D,as:m,"aria-label":R,isDarkBackground:I,isLarge:V,children:h})),(()=>{const e={onFocus:()=>z(!0),onBlur:()=>z(!1)};if(S&&(({error:e,warning:r,info:o,disabled:n})=>!n&&"string"==typeof(e||r||o))({error:j,warning:B,info:P,disabled:O})){const e=(({error:e,warning:r,info:o,inline:n})=>(e||r||o)&&n?"top":"right")({error:j,warning:B,info:P,inline:k});return r(p,{children:r(s,{tooltipId:x,error:j,warning:B,info:P,tooltipPosition:e,tooltipFlipOverrides:["top","bottom"]})})}return y&&r(p,g(f({},e),{children:r(l,{tooltipId:F,type:w,isFocused:$,children:y})}))})()]})};var O=o.memo(h);export{h as Label,O as default};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export interface StyledLabelProps {
|
|
2
|
+
/** If true, the component will be disabled */
|
|
3
|
+
disabled?: boolean;
|
|
4
|
+
/** Flag to configure component as mandatory */
|
|
5
|
+
isRequired?: boolean;
|
|
6
|
+
/** Flag to determine whether to use colours for dark backgrounds */
|
|
7
|
+
isDarkBackground?: boolean;
|
|
8
|
+
/** Set large font-size */
|
|
9
|
+
isLarge?: boolean;
|
|
10
|
+
}
|
|
11
|
+
declare const StyledLabel: import("styled-components").StyledComponent<"label", any, StyledLabelProps, never>;
|
|
12
|
+
export interface StyledLabelContainerProps {
|
|
13
|
+
/** Label alignment */
|
|
14
|
+
align?: "left" | "right";
|
|
15
|
+
/** When true, label is placed in line an input */
|
|
16
|
+
inline?: boolean;
|
|
17
|
+
/** Padding right, integer multiplied by base spacing constant (8) */
|
|
18
|
+
pr?: 1 | 2;
|
|
19
|
+
/** Padding left, integer multiplied by base spacing constant (8) */
|
|
20
|
+
pl?: 1 | 2;
|
|
21
|
+
/** Label width */
|
|
22
|
+
width?: number;
|
|
23
|
+
}
|
|
24
|
+
export declare const StyledLabelContainer: import("styled-components").StyledComponent<"div", any, StyledLabelContainerProps, never>;
|
|
25
|
+
export default StyledLabel;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import i,{css as t}from"styled-components";const e=i.label.withConfig({displayName:"label.style__StyledLabel",componentId:"sc-e75e7420-0"})([""," display:block;font-weight:var(--fontWeights500);"," "," ",""],(({isDarkBackground:i})=>t(["color:",";"],i?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)")),(({isLarge:i})=>i&&t(["font-size:var(--fontSizes200);"])),(({isRequired:i})=>i&&t(['::after{content:"*";color:var(--colorsSemanticNegative500);font-weight:var(--fontWeights500);margin-left:var(--spacing050);}'])),(({disabled:i})=>i&&t(["color:var(--colorsUtilityYin030);"]))),a=i.div.withConfig({displayName:"label.style__StyledLabelContainer",componentId:"sc-e75e7420-1"})(["display:flex;align-items:center;margin-bottom:8px;"," ",""],(({align:i})=>t(["justify-content:",";"],"right"!==i?"flex-start":"flex-end")),(({inline:i,pr:e,pl:a,width:o})=>i&&t(["box-sizing:border-box;margin-bottom:0;",";",";width:","%;"],e&&t(["padding-right:var(",");"],1===e?"--spacing100":"--spacing200"),a&&t(["padding-left:var(",");"],1===a?"--spacing100":"--spacing200"),o)));export{a as StyledLabelContainer,e as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var r=(...r)=>t=>{r.forEach((r=>{r&&("function"!=typeof r?"current"in r&&(r.current=t):r(t))}))};export{r as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./validation-message.component";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{default}from"./validation-message.component.js";
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TagProps } from "../../../__internal__/utils/helpers/tags";
|
|
3
|
+
export interface ValidationMessageProps extends TagProps {
|
|
4
|
+
/**
|
|
5
|
+
* If true, displays error styling. If passed as a valid string, displays error styling
|
|
6
|
+
* and the message as children.
|
|
7
|
+
*/
|
|
8
|
+
error?: boolean | string;
|
|
9
|
+
/** Id of the component, to be used for accessibility purposes */
|
|
10
|
+
id?: string;
|
|
11
|
+
/**
|
|
12
|
+
* If true, displays warning styling. If passed as a valid string, displays warning styling
|
|
13
|
+
* and the message as children.
|
|
14
|
+
*/
|
|
15
|
+
warning?: boolean | string;
|
|
16
|
+
/** Size of the validation message font */
|
|
17
|
+
size?: "small" | "medium" | "large";
|
|
18
|
+
}
|
|
19
|
+
declare const ValidationMessage: ({ error, id, warning, "data-element": dataElement, "data-role": dataRole, size, }: ValidationMessageProps) => React.JSX.Element | null;
|
|
20
|
+
export default ValidationMessage;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import"react";import t from"./validation-message.style.js";import r from"../../utils/helpers/tags/tags.js";function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const o=({error:o,id:i,warning:a,"data-element":c,"data-role":s="validation-message",size:l})=>{const p=o||a;return"string"==typeof p?e(t,(u=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}({id:i,$isError:Boolean(o)},r("validation-message",{"data-element":c,"data-role":s})),b=null!=(b={$size:l,children:p})?b:{},Object.getOwnPropertyDescriptors?Object.defineProperties(u,Object.getOwnPropertyDescriptors(b)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(b)).forEach((function(e){Object.defineProperty(u,e,Object.getOwnPropertyDescriptor(b,e))})),u)):null;var u,b};export{o as default};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
interface StyledValidationMessageProps {
|
|
2
|
+
$isError?: boolean;
|
|
3
|
+
$size?: "small" | "medium" | "large";
|
|
4
|
+
}
|
|
5
|
+
declare const StyledValidationMessage: import("styled-components").StyledComponent<"span", any, StyledValidationMessageProps, never>;
|
|
6
|
+
export default StyledValidationMessage;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import a,{css as t}from"styled-components";const l=a.span.withConfig({displayName:"validation-message.style__StyledValidationMessage",componentId:"sc-554aba6-0"})(["",""],(({$isError:a,$size:l})=>t(["display:flex;align-items:center;align-content:center;align-self:stretch;flex-wrap:wrap;margin:0px;color:",";"," "," ",""],a?"var(--input-validation-label-error)":"var(--input-validation-label-warn)","large"===l&&t(["font:",";"],a?"var(--global-font-static-comp-medium-l)":"var(--global-font-static-comp-regular-l)"),"medium"===l&&t(["font:",";"],a?"var(--global-font-static-comp-medium-m)":"var(--global-font-static-comp-regular-m)"),"small"===l&&t(["font:",";"],a?"var(--global-font-static-comp-medium-s)":"var(--global-font-static-comp-regular-s)"))));export{l as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import l,{useMemo as n,useRef as r,useContext as i,useState as o}from"react";import a from"invariant";import p from"../../../__internal__/form-field/form-field.component.js";import s from"../../../__internal__/utils/helpers/tags/tags.js";import u from"../../../__internal__/utils/helpers/guid/index.js";import c from"./button-toggle-group.style.js";import{ButtonToggle as d}from"../button-toggle.component.js";import"../../../style/utils/filter-styled-system-padding-props.js";import b from"../../../style/utils/filter-styled-system-margin-props.js";import{TooltipProvider as f}from"../../../__internal__/tooltip-provider/index.js";import{InputGroupBehaviour as m}from"../../../__internal__/input-behaviour/input-group-behaviour.component.js";import g from"../../../__internal__/utils/helpers/events/events.js";import y from"../../carbon-provider/__internal__/new-validation.context.js";import{ButtonToggleGroupProvider as h}from"./__internal__/button-toggle-group.context.js";import{HintText as _}from"../../../__internal__/hint-text/hint-text.component.js";function j(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function v(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{},n=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),n.forEach((function(t){j(e,t,l[t])}))}return e}function O(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t.push.apply(t,l)}return t}(Object(t)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(t,l))})),e}const w=j=>{var{children:w,fieldHelp:P,fieldHelpInline:x,"aria-label":H,label:I,labelHelp:D,labelSpacing:S,inputHint:B,inputWidth:W,fullWidth:A,labelInline:E,labelWidth:C,onChange:T,value:k,helpAriaLabel:L,id:G,allowDeselect:K=!1,disabled:N=!1}=j,R=function(e,t){if(null==e)return{};var l,n,r=function(e,t){if(null==e)return{};var l,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)l=i[n],t.indexOf(l)>=0||(r[l]=e[l]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)l=i[n],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(r[l]=e[l])}return r}(j,["children","fieldHelp","fieldHelpInline","aria-label","label","labelHelp","labelSpacing","inputHint","inputWidth","fullWidth","labelInline","labelWidth","onChange","value","helpAriaLabel","id","allowDeselect","disabled"]);const V=n((()=>!l.Children.toArray(w).find((e=>!l.isValidElement(e)||"ButtonToggle"!==e.type.displayName))),[w]);a(V,`\`ButtonToggleGroup\` only accepts children of type \`${d.displayName}\``);const q=r(u()),M=r(u()),$=r(null),{validationRedesignOptIn:z}=i(y),F=e=>z?void 0:e,J=()=>{var e;return null===(e=$.current)||void 0===e?void 0:e.querySelectorAll('[data-element="button-toggle-button"]')},[Q,U]=o();var X;return e(f,{helpAriaLabel:L,children:e(m,{children:e(p,O(v({label:I,labelHelp:F(D),labelSpacing:F(S),fieldHelp:F(P),fieldHelpInline:F(x),labelInline:F(E),labelWidth:F(C),labelId:q.current,id:G,labelAs:"span",disabled:N},b(R),s(null!==(X=R["data-component"])&&void 0!==X?X:"button-toggle-group",R)),{children:t(h,{value:{onButtonClick:()=>{},handleKeyDown:e=>{const t=J();if(!t||!document.activeElement)return;const l=Array.from(t).indexOf(document.activeElement);let n;g.isLeftKey(e)?n=t[0===l?t.length-1:l-1]:g.isRightKey(e)&&(n=t[(l+1)%t.length]),n instanceof HTMLButtonElement&&n.focus()},pressedButtonValue:k,onChange:T,allowDeselect:K,isInGroup:!0,isDisabled:N,firstButton:Q,childButtonCallbackRef:e=>{setTimeout((()=>{if(e){const t=J();t?e===t[0]&&U(e):U(void 0)}}),0)},hintTextId:B?M.current:void 0},children:[B&&e(_,{id:M.current,isDisabled:N,marginBottom:"var(--spacing150)",children:B}),e(c,O(v({ref:$},I?{"aria-labelledby":q.current}:{"aria-label":H}),{labelInline:E,inputWidth:W,fullWidth:A,role:"group",id:G,disabled:N,children:w}))]})}))})})};w.displayName="ButtonToggleGroup";export{w as default};
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import l,{useMemo as n,useRef as r,useContext as i,useState as o}from"react";import a from"invariant";import p from"../../../__internal__/form-field/form-field.component.js";import s from"../../../__internal__/utils/helpers/tags/tags.js";import u from"../../../__internal__/utils/helpers/guid/index.js";import c from"./button-toggle-group.style.js";import{ButtonToggle as d}from"../button-toggle.component.js";import"../../../style/utils/filter-styled-system-padding-props.js";import b from"../../../style/utils/filter-styled-system-margin-props.js";import{TooltipProvider as f}from"../../../__internal__/tooltip-provider/index.js";import{InputGroupBehaviour as m}from"../../../__internal__/input-behaviour/input-group-behaviour.component.js";import g from"../../../__internal__/utils/helpers/events/events.js";import y from"../../carbon-provider/__internal__/new-validation.context.js";import{ButtonToggleGroupProvider as h}from"./__internal__/button-toggle-group.context.js";import{HintText as _}from"../../../__internal__/legacy-hint-text/hint-text.component.js";function j(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function v(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{},n=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),n.forEach((function(t){j(e,t,l[t])}))}return e}function O(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t.push.apply(t,l)}return t}(Object(t)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(t,l))})),e}const w=j=>{var{children:w,fieldHelp:P,fieldHelpInline:x,"aria-label":H,label:I,labelHelp:D,labelSpacing:S,inputHint:B,inputWidth:W,fullWidth:A,labelInline:E,labelWidth:C,onChange:T,value:k,helpAriaLabel:L,id:G,allowDeselect:K=!1,disabled:N=!1}=j,R=function(e,t){if(null==e)return{};var l,n,r=function(e,t){if(null==e)return{};var l,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)l=i[n],t.indexOf(l)>=0||(r[l]=e[l]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)l=i[n],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(r[l]=e[l])}return r}(j,["children","fieldHelp","fieldHelpInline","aria-label","label","labelHelp","labelSpacing","inputHint","inputWidth","fullWidth","labelInline","labelWidth","onChange","value","helpAriaLabel","id","allowDeselect","disabled"]);const V=n((()=>!l.Children.toArray(w).find((e=>!l.isValidElement(e)||"ButtonToggle"!==e.type.displayName))),[w]);a(V,`\`ButtonToggleGroup\` only accepts children of type \`${d.displayName}\``);const q=r(u()),M=r(u()),$=r(null),{validationRedesignOptIn:z}=i(y),F=e=>z?void 0:e,J=()=>{var e;return null===(e=$.current)||void 0===e?void 0:e.querySelectorAll('[data-element="button-toggle-button"]')},[Q,U]=o();var X;return e(f,{helpAriaLabel:L,children:e(m,{children:e(p,O(v({label:I,labelHelp:F(D),labelSpacing:F(S),fieldHelp:F(P),fieldHelpInline:F(x),labelInline:F(E),labelWidth:F(C),labelId:q.current,id:G,labelAs:"span",disabled:N},b(R),s(null!==(X=R["data-component"])&&void 0!==X?X:"button-toggle-group",R)),{children:t(h,{value:{onButtonClick:()=>{},handleKeyDown:e=>{const t=J();if(!t||!document.activeElement)return;const l=Array.from(t).indexOf(document.activeElement);let n;g.isLeftKey(e)?n=t[0===l?t.length-1:l-1]:g.isRightKey(e)&&(n=t[(l+1)%t.length]),n instanceof HTMLButtonElement&&n.focus()},pressedButtonValue:k,onChange:T,allowDeselect:K,isInGroup:!0,isDisabled:N,firstButton:Q,childButtonCallbackRef:e=>{setTimeout((()=>{if(e){const t=J();t?e===t[0]&&U(e):U(void 0)}}),0)},hintTextId:B?M.current:void 0},children:[B&&e(_,{id:M.current,isDisabled:N,marginBottom:"var(--spacing150)",children:B}),e(c,O(v({ref:$},I?{"aria-labelledby":q.current}:{"aria-label":H}),{labelInline:E,inputWidth:W,fullWidth:A,role:"group",id:G,disabled:N,children:w}))]})}))})})};w.displayName="ButtonToggleGroup";export{w as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import i,{css as o}from"styled-components";import e from"../../../__internal__/form-field/form-field.style.js";import t from"../../icon/icon.style.js";import l from"../checkbox.style.js";import{StyledLabelContainer as n}from"../../../__internal__/label/label.style.js";import r from"../../../__internal__/validations/validation-icon.style.js";const
|
|
1
|
+
import i,{css as o}from"styled-components";import e from"../../../__internal__/form-field/form-field.style.js";import t from"../../icon/icon.style.js";import l from"../checkbox.style.js";import{StyledLabelContainer as n}from"../../../__internal__/legacy-label/label.style.js";import r from"../../../__internal__/validations/validation-icon.style.js";const a=i.div.withConfig({displayName:"checkbox-group.style__StyledCheckboxGroup",componentId:"sc-ffa9ebbb-0"})(["display:flex;flex-direction:column;","::before{font-size:16px;}&& ","{margin:0;}& ","{margin-bottom:var(--spacing150);:last-of-type{margin-bottom:0;}}& > ","{& > ","{margin-bottom:4px;vertical-align:middle;","{display:inline-block;}}}"," ",""],t,e,l,e,n,r,(({legendInline:i})=>i&&o(["",":first-child{padding-top:4px;}"],l)),(({inline:i})=>i&&o(["flex-direction:row;","{margin:0;:not(:first-of-type){margin-left:32px;}}"],l)));export{a as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import i,{css as e}from"styled-components";import{margin as r}from"styled-system";import{StyledCheckableInput as t}from"../../__internal__/checkable-input/checkable-input.style.js";import o from"../../__internal__/field-help/field-help.style.js";import l from"../../__internal__/checkable-input/hidden-checkable-input.style.js";import a from"../../__internal__/checkable-input/checkable-input-svg-wrapper.style.js";import n,{StyledLabelContainer as s}from"../../__internal__/label/label.style.js";import d from"../../__internal__/validations/validation-icon.style.js";import p from"../../style/themes/apply-base-theme.js";import c from"../../style/utils/add-focus-styling.js";const g=i.div.attrs(p).withConfig({displayName:"checkbox.style__StyledCheckbox",componentId:"sc-
|
|
1
|
+
import i,{css as e}from"styled-components";import{margin as r}from"styled-system";import{StyledCheckableInput as t}from"../../__internal__/checkable-input/checkable-input.style.js";import o from"../../__internal__/field-help/field-help.style.js";import l from"../../__internal__/checkable-input/hidden-checkable-input.style.js";import a from"../../__internal__/checkable-input/checkable-input-svg-wrapper.style.js";import n,{StyledLabelContainer as s}from"../../__internal__/legacy-label/label.style.js";import d from"../../__internal__/validations/validation-icon.style.js";import p from"../../style/themes/apply-base-theme.js";import c from"../../style/utils/add-focus-styling.js";const g=i.div.attrs(p).withConfig({displayName:"checkbox.style__StyledCheckbox",componentId:"sc-4f65151c-0"})(["margin-bottom:var(--fieldSpacing);"," ",""],r,(({disabled:i,error:r,warning:p,info:g,fieldHelpInline:m,labelSpacing:f,inputWidth:h,reverse:b,size:v,adaptiveSpacingSmallScreen:x,applyNewValidation:y})=>e([""," ","{padding-top:1px;}","{height:16px;}svg{background-color:var(--colorsUtilityYang100);","}",",svg{height:16px;position:absolute;padding:1px;}",",",",",",svg{box-sizing:border-box;min-width:16px;width:16px;border-radius:var(--borderRadius025);",";}",":not([disabled]){&:focus + ",",&:hover + ","{","}}","{width:auto;flex:0 1 auto;}","{margin-left:16px;margin-top:0;padding-left:",";}","{position:relative;display:inline-block;}"," ",":checked ~ "," svg path{fill:var(--colorsUtilityYin090);}"," "," "," ",""],x&&"margin-left: 0;",t,a,!i&&e(["border:1px solid var(--colorsUtilityMajor300);"," "," "," ",""],g&&"border: 1px solid var(--colorsSemanticInfo500);",p&&"border: 1px solid var(--colorsSemanticCaution500);",r&&"border: 2px solid var(--colorsSemanticNegative500);",p&&y&&"border: 1px solid var(--colorsUtilityMajor300);"),l,t,l,a,"large"===v&&"border-radius: var(--borderRadius050)",l,a,a,c(),s,o,1===f?"var(--spacing100)":"var(--spacing200)",d,"large"===v&&e(["","{height:24px;}",",",",",",svg{height:24px;width:24px;min-width:24px;}","{margin-left:24px;}",""],a,t,l,a,o,m&&e(["",",","{align-self:center;}"],o,s)),l,a,i&&e(["svg{background-color:var(--colorsUtilityDisabled400);border:1px solid var(--colorsUtilityDisabled600);}svg path{fill:var(--colorsUtilityDisabled400);}",":checked ~ "," svg path{fill:var(--colorsUtilityYin030);}","{&:hover,&:focus{outline:none;cursor:not-allowed;}}"],l,a,a),m&&`\n ${o} {\n margin-left: 0;\n }\n\n ${n} {\n flex: 0 1 auto;\n }\n `,void 0!==h&&0!==h&&`\n ${o} {\n ${b?"margin-right":"margin-left"}: ${h}% !important;\n }\n `,b&&e(["","{margin-left:0;padding-left:0;}","{flex:0 1 auto;}",""],o,n,m&&e(["","{margin-right:8px;}","{padding-left:6px;}"],t,o)))));export{g as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useMemo as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useMemo as a,useContext as o,useState as l,useCallback as i,useEffect as u}from"react";import{isValidLocaleDate as s,checkISOFormatAndLength as c,parseISODate as p,parseDate as d,findMatchedFormatAndValue as m,isDateValid as f,additionalYears as b,formattedValue as y,getSeparator as v,formatToISO as g}from"./__internal__/utils.js";import O from"../../hooks/__internal__/useLocale/useLocale.js";import _ from"../../__internal__/utils/helpers/events/events.js";import"../../style/utils/filter-styled-system-padding-props.js";import P from"../../style/utils/filter-styled-system-margin-props.js";import j from"../../style/utils/filter-out-styled-system-spacing-props.js";import k from"./__internal__/date-formats/index.js";import h from"./date.style.js";import{Textbox as w}from"../textbox/textbox.component.js";import{DatePicker as x}from"./__internal__/date-picker/date-picker.component.js";import D from"../date-range/__internal__/date-range.context.js";import L from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import C from"../../__internal__/utils/helpers/guid/index.js";import B from"../../__internal__/utils/helpers/tags/tags.js";function W(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function F(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},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(t){W(e,t,r[t])}))}return e}function M(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const A={large:"140px",medium:"135px",small:"120px"},S=r.forwardRef(((r,W)=>{var{adaptiveLabelBreakpoint:S,allowEmptyValue:I,autoFocus:E,"data-element":T,"data-role":V,disabled:K,disablePortal:z=!0,helpAriaLabel:R,labelInline:N,minDate:q,maxDate:G,onBlur:$,onChange:H,onClick:J,onFocus:Q,onKeyDown:U,pickerProps:X,readOnly:Y,size:Z="medium",tooltipPosition:ee,value:te,inputWidth:re,labelWidth:ne,maxWidth:ae,inputName:oe,onPickerClose:le,onPickerOpen:ie,dateFormatOverride:ue,datePickerAriaLabel:se,datePickerAriaLabelledBy:ce,validationMessagePositionTop:pe=!0}=r,de=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}(r,["adaptiveLabelBreakpoint","allowEmptyValue","autoFocus","data-element","data-role","disabled","disablePortal","helpAriaLabel","labelInline","minDate","maxDate","onBlur","onChange","onClick","onFocus","onKeyDown","pickerProps","readOnly","size","tooltipPosition","value","inputWidth","labelWidth","maxWidth","inputName","onPickerClose","onPickerOpen","dateFormatOverride","datePickerAriaLabel","datePickerAriaLabelledBy","validationMessagePositionTop"]);const me=n(null),fe=n(null),be=n(null),ye=n(!1),ve=n(!1),ge=n(!1),Oe=O(),{dateFnsLocale:_e,dateFormatOverride:Pe}=Oe.date,{format:je,formats:ke}=a((()=>k(_e(),ue||Pe)),[_e,Pe,ue]),{inputRefMap:he,setInputRefMap:we,validationMessagePositionTop:xe}=o(D),[De,Le]=l(!1),[Ce,Be]=l((()=>{if(s(te,_e()))return c(te)?p(te):d(je,te)})),We=n(!0),Fe=n(C()),Me=null!=xe?xe:pe,Ae=e=>I&&!e.length?e:null,Se=e=>{const{id:t,name:r}=e.target,[n,a]=m(e.target.value,ke),o="blur"===e.type?y(je,Ce):e.target.value,l=f(d(n,a))?g(...b(n,a)):Ae(e.target.value);return{target:M(F({},r&&{name:r},t&&{id:t}),{value:{formattedValue:o,rawValue:l}})}},Ie=L((()=>{var e,t;De&&(ye.current=!0,null===(e=be.current)||void 0===e||e.focus(),ve.current=!1,null===(t=be.current)||void 0===t||t.blur(),Le(!1),null==le||le(),ye.current=!1)}),"mousedown"),Ee=e=>{J&&J(e)},Te=i((e=>{var t;be.current=e,fe.current=null==e?void 0:e.parentElement,W&&("function"==typeof W?W(e):W.current=e),oe&&(null==he||null===(t=he[oe])||void 0===t?void 0:t.setOpen)!==Le&&(null==we||we({[oe]:{isBlurBlocked:ve,setOpen:Le}}))}),[oe,he,we,W]);u((()=>{const[e,t]=m(te,ke);e&&t&&f(d(e,t))?Be(d(...b(e,t))):c(te)&&We.current?Be(p(te)):Be(void 0)}),[te,ke]);const Ve=P(de);return e(h,M(F(M(F({ref:me,role:"presentation",size:Z,labelInline:N},Ve),{applyDateRangeStyling:!!he,maxWidth:ae,inputWidth:re}),B("date",{"data-element":T,"data-role":V})),{onMouseDown:Ie,className:"date",children:[t(w,M(F({},j(de)),{"data-component":"date-input",value:(()=>{if(c(te)&&We.current)return y(je,p(te));const e=v(te),t=v(je),r=()=>te.split("").map((r=>r===e?t:r)).join("");if(We.current&&e!==t&&f(d(je,r()))){We.current=!1;const[e,t]=m(r(),ke);return y(je,d(...b(e,t)))}return te})(),onBlur:e=>{if(K||Y)return;let t;if(f(Ce)){t=Se(e);const r=c(te)?y(je,p(te)):te,[,n]=m(r,ke);y(je,Ce)!==n&&H(t)}else{const{id:r,name:n}=e.target;t={target:M(F({},n&&{name:n},r&&{id:r}),{value:{formattedValue:e.target.value,rawValue:Ae(e.target.value)}})}}ve.current||$&&$(t)},onChange:e=>{We.current=!1,H(Se(e))},onClick:Ee,onFocus:e=>{K||Y||(ve.current=!1,Q&&Q(e))},onKeyDown:e=>{if(U&&U(e),De&&_.isTabKey(e)){if(_.isShiftKey(e))Le(!1),null==le||le();else if(!z){var t,r;e.preventDefault(),null===(r=document)||void 0===r||null===(t=r.querySelector(`[id="${Fe.current}"]`))||void 0===t||t.focus()}ye.current=!1}},iconOnClick:Ee,onMouseDown:()=>{we&&(ve.current=!0),De||null==ie||ie()},iconOnMouseDown:()=>{ve.current=!0,ye.current=!0,De?(Le(!1),null==le||le()):(Le(!0),null==ie||ie())},inputIcon:"calendar",labelInline:N,ref:Te,adaptiveLabelBreakpoint:S,tooltipPosition:ee,helpAriaLabel:R,autoFocus:E,size:Z,disabled:K,readOnly:Y,inputWidth:re,labelWidth:ne,maxWidth:null!=ae?ae:A[Z],m:0,validationMessagePositionTop:Me})),t(x,{disablePortal:z,inputElement:fe,pickerProps:X,selectedDays:Ce,onDayClick:(e,t)=>{var r;Be(e),H(Se(M(F({},t),{target:M(F({},t.target),{value:y(je,e)})}))),ge.current=!0,null===(r=be.current)||void 0===r||r.focus(),Le(!1)},minDate:q,maxDate:G,pickerMouseDown:()=>{ve.current=!0},open:De,setOpen:Le,pickerTabGuardId:Fe.current,onPickerClose:le,ariaLabel:se,ariaLabelledBy:ce})]}))}));export{S as DateInput,S as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e,{css as t}from"styled-components";import{margin as a}from"styled-system";import l from"../../style/themes/apply-base-theme.js";import o from"../../__internal__/validation-message/validation-message.style.js";import s from"../../__internal__/label/label.style.js";const i=e.div.attrs(l).withConfig({displayName:"date.style__StyledDateInput",componentId:"sc-24718135-0"})(["margin-bottom:var(--fieldSpacing);"," ",""],a,(({applyDateRangeStyling:e,labelInline:a})=>e&&!a&&t(["",",","{overflow-wrap:anywhere;}"],o,s)));export{i as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import t from"styled-components";import{margin as e}from"styled-system";import a from"../date/date.style.js";import
|
|
1
|
+
import t from"styled-components";import{margin as e}from"styled-system";import a from"../date/date.style.js";import i from"../../style/themes/apply-base-theme.js";const o=t.div.attrs(i).withConfig({displayName:"date-range.style__StyledDateRange",componentId:"sc-d672a1b1-0"})([""," margin-bottom:var(--fieldSpacing);"," & ","{width:auto;display:inline-block;vertical-align:",";}& ",":first-of-type{margin-right:var(--spacing300);}"],(({validationMessagePositionTop:t})=>`\n display: flex;\n align-items: ${t?"flex-end":"flex-start"};\n `),e,a,(({labelsInline:t})=>t?"top":"bottom"),a);export{o as default};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
3
|
import { ValidationProps } from "../../__internal__/validations";
|
|
4
|
-
import { InputProps } from "../../__internal__/input";
|
|
4
|
+
import { InputProps } from "../../__internal__/legacy-input";
|
|
5
5
|
import { TagProps } from "../../__internal__/utils/helpers/tags";
|
|
6
6
|
import { FileUploadStatusProps } from "./__internal__/file-upload-status";
|
|
7
7
|
export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<InputProps, "id" | "name" | "required">, TagProps, MarginProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import n,{useState as i,useRef as o,useEffect as a,createElement as l}from"react";import"../../style/utils/filter-styled-system-padding-props.js";import s from"../../style/utils/filter-styled-system-margin-props.js";import{InputBehaviour as d}from"../../__internal__/input-behaviour/input-behaviour.component.js";import p from"../../__internal__/form-field/form-field.component.js";import m from"../../hooks/__internal__/useUniqueId/index.js";import
|
|
1
|
+
import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import n,{useState as i,useRef as o,useEffect as a,createElement as l}from"react";import"../../style/utils/filter-styled-system-padding-props.js";import s from"../../style/utils/filter-styled-system-margin-props.js";import{InputBehaviour as d}from"../../__internal__/input-behaviour/input-behaviour.component.js";import p from"../../__internal__/form-field/form-field.component.js";import m from"../../hooks/__internal__/useUniqueId/index.js";import c from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import u from"../../__internal__/validation-message/validation-message.component.js";import{StyledHiddenFileInput as f,StyledFileInputPresentation as g}from"./file-input.style.js";import v from"../../__internal__/legacy-error-border/error-border.style.js";import{ButtonMinor as y}from"../button-minor/button-minor.component.js";import{Typography as b}from"../typography/typography.component.js";import{FileUploadStatus as h}from"./__internal__/file-upload-status/file-upload-status.component.js";import{Box as _}from"../box/box.component.js";import j from"../../hooks/__internal__/useLocale/useLocale.js";import{HintText as O}from"../../__internal__/legacy-hint-text/hint-text.component.js";function x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function P(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},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(t){x(e,t,r[t])}))}return e}function D(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const w=n.forwardRef(((n,x)=>{var{accept:w,buttonText:I,"data-element":T,"data-role":k,dragAndDropText:E,error:L,label:S,id:H,inputHint:A,isVertical:W,maxHeight:q,maxWidth:F,minHeight:C,minWidth:M="280px",name:R,onChange:V,required:U,uploadStatus:N=[],validationMessagePositionTop:z=!0}=n,B=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(n,["accept","buttonText","data-element","data-role","dragAndDropText","error","label","id","inputHint","isVertical","maxHeight","maxWidth","minHeight","minWidth","name","onChange","required","uploadStatus","validationMessagePositionTop"]);const G=j(),J=I||G.fileInput.selectFile(),K=E||G.fileInput.dragAndDrop(),Q={maxHeight:q||void 0,maxWidth:F||M,minHeight:C,minWidth:M},[X,Y]=m(H,R),[Z,$]=i(!1),[ee,te]=i(!1),re=o(null),ne=e=>{var t;e.preventDefault(),(null===(t=e.dataTransfer)||void 0===t?void 0:t.types.includes("Files"))&&te(!0)},ie=e=>{e.preventDefault(),te(!1)};a((()=>(document.addEventListener("dragover",ne),document.addEventListener("drop",ie),document.addEventListener("dragleave",ie),()=>{document.removeEventListener("dragover",ne),document.removeEventListener("drop",ie),document.removeEventListener("dragleave",ie)})),[]);const oe=e=>{null==V||V(e)},{labelId:ae,validationId:le}=c({id:X,validationRedesignOptIn:!0,error:L,label:S}),se=Array.isArray(N)?N:[N],de=e(t,{children:[A&&r(O,{children:A}),e(_,{position:"relative",children:[z&&e(t,{children:[r(u,{error:L,validationId:le,validationMessagePositionTop:z,"data-role":"validation-message-top"}),L&&r(v,{warning:!1})]}),r(f,P(D(P({},U&&{required:U}),{accept:w,"aria-invalid":!!L,id:X,ref:e=>{re.current=e,"function"==typeof x?x(e):x&&(x.current=e)},name:Y,onChange:e=>{oe(e.target.files)},type:"file"}),B)),e(g,D(P({"data-role":"file-input-presentation",isDraggedOver:Z,isDraggingFile:ee,error:L,onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),$(!1)},onDragOver:e=>{var t;e.preventDefault(),(null===(t=e.dataTransfer)||void 0===t?void 0:t.types.includes("Files"))&&$(!0)},onDrop:e=>{e.preventDefault(),$(!1),oe(e.dataTransfer.files)},isVertical:W},Q),{children:[r(y,{buttonType:"primary",onClick:()=>{var e;null===(e=re.current)||void 0===e||e.click()},children:J}),r(b,{m:0,children:K})]})),!z&&e(t,{children:[r(u,{error:L,validationId:le,validationMessagePositionTop:z,"data-role":"validation-message-bottom"}),L&&r(v,{warning:!1})]})]})]});return r(d,{children:r(p,D(P({error:L,label:S,labelId:ae,id:X,isRequired:U,"data-component":"file-input","data-role":k,"data-element":T,validationRedesignOptIn:!0},s(B)),{children:0===se.length?de:se.map((e=>l(g,D(P({hasUploadStatus:!0},Q),{key:e.filename}),r(h,P({},e)))))}))})}));w.displayName="FileInput";export{w as FileInput,w as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { InputProps } from "../../__internal__/input";
|
|
1
|
+
import type { InputProps } from "../../__internal__/legacy-input";
|
|
2
2
|
import type { ValidationProps } from "../../__internal__/validations";
|
|
3
3
|
type CustomFileInputProps = Omit<InputProps, "value"> & {
|
|
4
4
|
value?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import i,{css as t}from"styled-components";import e from"../typography/typography.style.js";const r=i.input.withConfig({displayName:"file-input.style__StyledHiddenFileInput",componentId:"sc-
|
|
1
|
+
import i,{css as t}from"styled-components";import e from"../typography/typography.style.js";const r=i.input.withConfig({displayName:"file-input.style__StyledHiddenFileInput",componentId:"sc-f1cdfaa4-0"})(["display:none;"]),o=i.div.withConfig({displayName:"file-input.style__StyledFileInputPresentation",componentId:"sc-f1cdfaa4-1"})([""," ",""],(({hasUploadStatus:i,minWidth:e,minHeight:r,maxWidth:o,maxHeight:a})=>t(["min-width:",";min-height:",";max-width:",";",""],e,r,o,!i&&t(["padding:11px;max-height:",";box-sizing:border-box;"],a))),(({hasUploadStatus:i,isDraggedOver:r,isDraggingFile:o,error:a,isVertical:n})=>{let l="colorsUtilityMajor300",d="colorsUtilityYang100";return r?(l="colorsUtilityMajor400",d="colorsUtilityMajor100"):o&&(l="colorsUtilityMajor400"),a&&(l="colorsSemanticNegative"+(o?600:500)),!i&&t(["display:flex;"," flex-wrap:wrap;justify-content:center;align-content:center;align-items:center;text-align:center;gap:var(--spacing100);border-radius:var(--borderRadius050);border:var(--",") dashed var(--",");background:var(--",");","{color:var(--colorsUtilityYin055);}"],n&&"flex-direction: column;",a||o?"borderWidth200":"borderWidth100",l,d,e)}));export{o as StyledFileInputPresentation,r as StyledHiddenFileInput};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as e}from"styled-components";import{margin as t}from"styled-system";import
|
|
1
|
+
import o,{css as e}from"styled-components";import{margin as t}from"styled-system";import r from"../../__internal__/utils/logger/index.js";import i from"../../style/themes/apply-base-theme.js";import n from"../../style/utils/add-focus-styling.js";import l from"../../style/utils/color.js";import{getWindow as s,getNavigator as a}from"../../__internal__/dom/globals.js";import c,{isSafari as m}from"../../__internal__/utils/helpers/browser-type-check/index.js";import d from"./icon-config.js";import g from"./icon-unicodes.js";import{StyledButton as f}from"../button/__next__/button.style.js";const p=e([""," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}.search &{color:var(--colorsUtilityYin065);:hover{color:var(--colorsUtilityYin100);}}.search.dark-background:not(.with-button) &{color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}}.multi-select &,.filterable-select &{cursor:pointer;}"],f),u=o.span.attrs(i).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-56ac9ede-0"})(["",""],(({theme:o,color:i,bg:f,isInteractive:u,bgSize:h,bgShape:b,type:y,fontSize:_,disabled:v,hasTooltip:z})=>{let S="var(--colorsYin090)",j="transparent";const k=s(),x=a(),w=function(o,e){const t={small:1,medium:2,large:3,"extra-large":4};return o&&e?t[e]<t[o]?(r.warn(`[WARNING - Icon] The "${e}" \`bgSize\` is smaller than "${o}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`),d.backgroundSize[o]):d.backgroundSize[e]:e?d.backgroundSize[e]:void 0}(_,h);if(v)S="var(--colorsYin030)";else if(i){const{color:e}=l({color:i,theme:o});S=e}if(f){const{backgroundColor:e}=l({bg:f,theme:o});j=e}return e(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," "," ",""],S,j,w,w,b?`border-radius: ${d.backgroundShape[b]}`:"",u&&e(["&:not(:focus):hover{filter:brightness(0.9);}"]),g[y],_&&e(["font-size:",";line-height:",";"],d.iconSize[_],d.iconSize[_]),k&&"services"===y&&c(k)&&e(["margin-top:",";"],"small"===_?"-7px":"-8px"),x&&k&&"services"===y&&m(x)&&!c(k)&&e(["margin-top:-6px;"]),z&&`\n :focus {\n ${n()}\n }\n `,t,p)}));export{u as default};
|
|
@@ -6,7 +6,11 @@ import { TagProps } from "../../__internal__/utils/helpers/tags";
|
|
|
6
6
|
* @deprecated `InlineInputs` has been deprecated. See the Carbon documentation for migration details.
|
|
7
7
|
*/
|
|
8
8
|
export interface InlineInputsProps extends MarginProps, StyledContentContainerProps, StyledInlineInputsProps, TagProps {
|
|
9
|
-
/**
|
|
9
|
+
/**
|
|
10
|
+
* @deprecated `adaptiveLabelBreakpoint` has been deprecated.
|
|
11
|
+
* It is recommended to use `useMediaQuery` hook to implement adaptive behaviour.
|
|
12
|
+
* Breakpoint for adaptive label (inline label change to top aligned). Enables the adaptive behaviour when set
|
|
13
|
+
**/
|
|
10
14
|
adaptiveLabelBreakpoint?: number;
|
|
11
15
|
/** Children elements */
|
|
12
16
|
children?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useEffect as l}from"react";import i from"../../__internal__/label/label.component.js";import o,{StyledContentContainer as a,StyledInlineInput as u}from"./inline-inputs.style.js";import p from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import s from"../../__internal__/utils/helpers/tags/tags.js";import"../../style/utils/filter-styled-system-padding-props.js";import c from"../../style/utils/filter-styled-system-margin-props.js";function b(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const f=(e,n)=>r.Children.map(e,(e=>t(u,{gutter:n,"data-element":"inline-input",children:e}))),d=r=>{var{adaptiveLabelBreakpoint:u,label:d,labelAlign:m,labelId:y,htmlFor:O,children:g=null,gutter:h="none",inputWidth:j,labelInline:v=!0,labelWidth:P,required:_}=r,w=function(e,t){if(null==e)return{};var r,n,l=function(e,t){if(null==e)return{};var r,n,l={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(l[r]=e[r]);return l}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(l[r]=e[r])}return l}(r,["adaptiveLabelBreakpoint","label","labelAlign","labelId","htmlFor","children","gutter","inputWidth","labelInline","labelWidth","required"]);const I=p(u),k=n(null);let A=v;u&&(A=I);const S=c(w);return l((()=>{var e;_&&Array.from((null===(e=k.current)||void 0===e?void 0:e.querySelectorAll("input"))||[]).forEach((e=>e.setAttribute("required","")))}),[_]),e(o,(W=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},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(t){b(e,t,r[t])}))}return e}({gutter:h,labelWidth:P,labelInline:A,ref:k},S,s("inline-inputs",w)),q=null!=(q={children:[d?t(i,{align:m,labelId:y,inline:A,htmlFor:O,isRequired:_,children:d}):null,t(a,{gutter:h,"data-element":"inline-inputs-container","data-role":"inline-inputs-container",inputWidth:j,children:f(g,h)})]})?q:{},Object.getOwnPropertyDescriptors?Object.defineProperties(W,Object.getOwnPropertyDescriptors(q)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(q)).forEach((function(e){Object.defineProperty(W,e,Object.getOwnPropertyDescriptor(q,e))})),W));var W,q};d.displayName="InlineInputs";export{d as default};
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useEffect as l}from"react";import i from"../../__internal__/legacy-label/label.component.js";import o,{StyledContentContainer as a,StyledInlineInput as u}from"./inline-inputs.style.js";import p from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import s from"../../__internal__/utils/helpers/tags/tags.js";import"../../style/utils/filter-styled-system-padding-props.js";import c from"../../style/utils/filter-styled-system-margin-props.js";function b(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const f=(e,n)=>r.Children.map(e,(e=>t(u,{gutter:n,"data-element":"inline-input",children:e}))),d=r=>{var{adaptiveLabelBreakpoint:u,label:d,labelAlign:m,labelId:y,htmlFor:O,children:g=null,gutter:h="none",inputWidth:j,labelInline:v=!0,labelWidth:P,required:_}=r,w=function(e,t){if(null==e)return{};var r,n,l=function(e,t){if(null==e)return{};var r,n,l={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(l[r]=e[r]);return l}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(l[r]=e[r])}return l}(r,["adaptiveLabelBreakpoint","label","labelAlign","labelId","htmlFor","children","gutter","inputWidth","labelInline","labelWidth","required"]);const I=p(u),k=n(null);let A=v;u&&(A=I);const S=c(w);return l((()=>{var e;_&&Array.from((null===(e=k.current)||void 0===e?void 0:e.querySelectorAll("input"))||[]).forEach((e=>e.setAttribute("required","")))}),[_]),e(o,(W=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},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(t){b(e,t,r[t])}))}return e}({gutter:h,labelWidth:P,labelInline:A,ref:k,role:"group"},S,s("inline-inputs",w)),q=null!=(q={children:[d?t(i,{align:m,labelId:y,inline:A,htmlFor:O,isRequired:_,children:d}):null,t(a,{gutter:h,"data-element":"inline-inputs-container","data-role":"inline-inputs-container",inputWidth:j,children:f(g,h)})]})?q:{},Object.getOwnPropertyDescriptors?Object.defineProperties(W,Object.getOwnPropertyDescriptors(q)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(q)).forEach((function(e){Object.defineProperty(W,e,Object.getOwnPropertyDescriptor(q,e))})),W));var W,q};d.displayName="InlineInputs";export{d as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import t,{css as e}from"styled-components";import{margin as r}from"styled-system";import i from"../../__internal__/input/input-presentation.style.js";import{StyledLabelContainer as o}from"../../__internal__/label/label.style.js";import a from"../../style/themes/apply-base-theme.js";const n={none:0,"extra-small":8,small:16,"medium-small":20,medium:24,"medium-large":28,large:32,"extra-large":40},d=t.div.withConfig({displayName:"inline-inputs.style__StyledInlineInput",componentId:"sc-
|
|
1
|
+
import t,{css as e}from"styled-components";import{margin as r}from"styled-system";import i from"../../__internal__/legacy-input/input-presentation.style.js";import{StyledLabelContainer as o}from"../../__internal__/legacy-label/label.style.js";import a from"../../style/themes/apply-base-theme.js";const n={none:0,"extra-small":8,small:16,"medium-small":20,medium:24,"medium-large":28,large:32,"extra-large":40},d=t.div.withConfig({displayName:"inline-inputs.style__StyledInlineInput",componentId:"sc-7bef1a9c-0"})(["flex:1;",""],(({gutter:t})=>t&&e(["margin-bottom:0;padding-left:","px;"],n[t]))),l=t.div.withConfig({displayName:"inline-inputs.style__StyledContentContainer",componentId:"sc-7bef1a9c-1"})(["display:flex;flex:",";",""],(({inputWidth:t})=>t?`0 0 ${t}%`:1),(({gutter:t})=>t&&e(["margin-bottom:0;margin-left:-","px;",""],n[t],"none"===t&&e([""," + "," ","{border-left:none;}",":not(:first-of-type):not(:last-of-type) ","{border-radius:var(--borderRadius000);}",":first-of-type:not(:last-of-type) ","{border-top-right-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius000);border-top-left-radius:var(--borderRadius050);border-bottom-left-radius:var(--borderRadius050);}",":last-of-type:not(:first-of-type) ","{border-top-left-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);border-top-right-radius:var(--borderRadius050);border-bottom-right-radius:var(--borderRadius050);}"],d,d,i,d,i,d,i,d,i)))),s=t.div.attrs(a).withConfig({displayName:"inline-inputs.style__StyledInlineInputs",componentId:"sc-7bef1a9c-2"})(["margin-bottom:var(--fieldSpacing);"," display:",";align-items:center;","{width:auto;margin-bottom:",";padding-right:16px;flex:0 0 ",';}input{width:1px;}[data-component="carbon-select"] input{width:30px;}'],r,(({labelInline:t})=>t?"flex":"block"),o,(({labelInline:t})=>t?"0px":"8px"),(({labelWidth:t})=>t?`${t}%`:"auto"));export{l as StyledContentContainer,d as StyledInlineInput,s as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as t}from"styled-components";import
|
|
1
|
+
import o,{css as t}from"styled-components";import i from"../../../style/themes/apply-base-theme.js";import e from"../../icon-button/icon-button.style.js";import r from"../../box/box.style.js";import s from"../../search/search.style.js";import l from"../../icon/icon.style.js";import n from"../../button/button.style.js";import a from"../menu.config.js";import d from"../../../style/utils/add-focus-styling.js";import{StyledLink as m}from"../../link/link.style.js";const c=o.div.attrs(i).withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreen",componentId:"sc-28b344f8-0"})(["position:fixed;top:0;bottom:0;"," ",""],(({theme:o})=>t(["z-index:",";"],o.zIndex.fullScreenModal)),(({startPosition:o,transitionDuration:i})=>t(["&.enter{visibility:hidden;",":-100%;}&.enter-active{visibility:visible;",":0;transition:all ","ms ease;}&.exit{visibility:visible;",":0;}&.exit-active{visibility:hidden;",":-100%;transition:all ","ms ease;}"],o,o,i,o,o,i))),b=o.div.attrs(i).withConfig({displayName:"menu-full-screen.style__StyledMenuModal",componentId:"sc-28b344f8-1"})(["height:100vh;width:100vw;outline:none;&&{","{max-width:100vw;}"," > a,"," > button,> div{font-size:var(--fontSizes200);}}",""],m,m,m,(({menuType:o})=>t(["background-color:",";&&&{","{","{display:inline-flex;bottom:auto;}","{display:flex;line-height:normal;padding-bottom:0;&:focus{border-bottom-right-radius:var(--borderRadius050);border-top-right-radius:var(--borderRadius050);","}}}}","{scrollbar-color:",";&::-webkit-scrollbar{width:var(--sizing150);}&::-webkit-scrollbar-thumb{background-color:",";}&::-webkit-scrollbar-track{background-color:",";}}"],a[o].background,s,l,n,d(),r,a[o].scrollbarColor,a[o].scrollbarThumb,a[o].scrollbarTrack))),u=o.div.withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreenHeader",componentId:"sc-28b344f8-2"})(["height:40px;","{position:absolute;z-index:1;right:16px;top:8px;}",""],e,(({menuType:o})=>t(["background-color:",";"],a[o].submenuItemBackground)));export{c as StyledMenuFullscreen,u as StyledMenuFullscreenHeader,b as StyledMenuModal};
|