@elliemae/ds-form-layout-blocks 3.17.0-next.9 → 3.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/form-layout-block-item/DSFormLayoutBlockItem.js +6 -6
- package/dist/cjs/form-layout-block-item/DSFormLayoutBlockItem.js.map +2 -2
- package/dist/cjs/form-layout-block-item/propTypes.js.map +2 -2
- package/dist/cjs/form-layout-block-item/styles.js +3 -4
- package/dist/cjs/form-layout-block-item/styles.js.map +2 -2
- package/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js +6 -6
- package/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js.map +2 -2
- package/dist/esm/form-layout-block-item/propTypes.js.map +2 -2
- package/dist/esm/form-layout-block-item/styles.js +3 -4
- package/dist/esm/form-layout-block-item/styles.js.map +2 -2
- package/dist/types/exported-related/DSFormLayoutBlockItemDataTestId.d.ts +7 -0
- package/dist/types/form-layout-block-item/DSFormLayoutBlockItem.d.ts +9 -0
- package/dist/types/form-layout-block-item/DSFormLayoutBlockItemDefinitions.d.ts +1 -0
- package/dist/types/form-layout-block-item/config/useFormLayoutBlockItem.d.ts +9 -0
- package/dist/types/form-layout-block-item/index.d.ts +1 -0
- package/dist/types/form-layout-block-item/propTypes.d.ts +33 -0
- package/dist/types/form-layout-block-item/styles.d.ts +30 -0
- package/dist/types/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.d.ts +455 -0
- package/dist/types/form-layout-checkbox-group/DSFormLayoutCheckboxGroupDefinitions.d.ts +1 -0
- package/dist/types/form-layout-checkbox-group/config/useFormLayoutCheckboxGroup.d.ts +9 -0
- package/dist/types/form-layout-checkbox-group/index.d.ts +1 -0
- package/dist/types/form-layout-checkbox-group/propTypes.d.ts +466 -0
- package/dist/types/form-layout-checkbox-group/styles.d.ts +6 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/tests/DsFormLayoutBlockItem.test.d.ts +1 -0
- package/dist/types/tests/axe-block-item.test.d.ts +1 -0
- package/dist/types/tests/axe-checkbox-and-radio.test.d.ts +1 -0
- package/package.json +8 -8
|
@@ -63,7 +63,7 @@ const DSFormLayoutBlockItem = (props) => {
|
|
|
63
63
|
isGroup
|
|
64
64
|
} = propsWithDefault;
|
|
65
65
|
const { className, label: globalLabel, ...othersGlobalAttributes } = globalAttributes;
|
|
66
|
-
const instanceUID = (0, import_react.useMemo)(() => `form_layout_block_item_${(0, import_uid.uid)(6)}`, []);
|
|
66
|
+
const instanceUID = (0, import_react.useMemo)(() => inputID ?? `form_layout_block_item_${(0, import_uid.uid)(6)}`, [inputID]);
|
|
67
67
|
const cols = (0, import_react.useMemo)(() => maxCharCounter !== void 0 ? ["1fr", "auto"] : ["1fr"], [maxCharCounter]);
|
|
68
68
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
69
69
|
import_styles.StyledContainer,
|
|
@@ -75,7 +75,7 @@ const DSFormLayoutBlockItem = (props) => {
|
|
|
75
75
|
withHighlight,
|
|
76
76
|
as: isGroup ? "fieldset" : "div",
|
|
77
77
|
isGroup,
|
|
78
|
-
"aria-describedby": !isGroup ? `${
|
|
78
|
+
"aria-describedby": !isGroup ? `${instanceUID}_feedback_message` : void 0,
|
|
79
79
|
className,
|
|
80
80
|
...xstyledProps,
|
|
81
81
|
children: [
|
|
@@ -83,9 +83,9 @@ const DSFormLayoutBlockItem = (props) => {
|
|
|
83
83
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
84
84
|
import_styles.StyledLabel,
|
|
85
85
|
{
|
|
86
|
-
id: `${
|
|
86
|
+
id: `${instanceUID}_block_label`,
|
|
87
87
|
"data-testid": import_DSFormLayoutBlockItemDataTestId.DSFormLayoutBlockItemDataTestId.LABEL,
|
|
88
|
-
htmlFor:
|
|
88
|
+
htmlFor: instanceUID,
|
|
89
89
|
leftLabel,
|
|
90
90
|
hideLabel,
|
|
91
91
|
"aria-hidden": isGroup,
|
|
@@ -114,7 +114,7 @@ const DSFormLayoutBlockItem = (props) => {
|
|
|
114
114
|
leftLabel,
|
|
115
115
|
hideLabel,
|
|
116
116
|
"aria-hidden": isGroup,
|
|
117
|
-
id: `${
|
|
117
|
+
id: `${instanceUID}_feedback_message`,
|
|
118
118
|
children: feedbackMessage
|
|
119
119
|
}
|
|
120
120
|
),
|
|
@@ -127,7 +127,7 @@ const DSFormLayoutBlockItem = (props) => {
|
|
|
127
127
|
"aria-label": `${label}`,
|
|
128
128
|
hideLabel,
|
|
129
129
|
role: "alert",
|
|
130
|
-
id: `${
|
|
130
|
+
id: `${instanceUID}_error_message`,
|
|
131
131
|
children: [
|
|
132
132
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.AlertsSmallFill, { width: 8, height: 8, color: ["danger", "900"], style: { marginBottom: "2px" } }),
|
|
133
133
|
"\xA0",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/form-layout-block-item/DSFormLayoutBlockItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { AlertsSmallFill } from '@elliemae/ds-icons';\nimport { DSFormLayoutBlockItemDataTestId } from '../exported-related/DSFormLayoutBlockItemDataTestId.js';\nimport type { DSFormLayoutBlockItemT } from './propTypes.js';\nimport { propTypes } from './propTypes.js';\nimport {\n StyledMessage,\n StyledLabel,\n StyledContainer,\n StyledMark,\n ScreenReaderOnly,\n StyledCharCount,\n} from './styles.js';\nimport { useFormLayoutBlockItem } from './config/useFormLayoutBlockItem.js';\n\nconst DSFormLayoutBlockItem = (props: DSFormLayoutBlockItemT.Props) => {\n const { globalAttributes, xstyledProps, propsWithDefault } = useFormLayoutBlockItem(props);\n const {\n label,\n feedbackMessage,\n maxCharCounter,\n currentChar,\n validationMessage,\n inputID,\n children,\n hasError,\n leftLabel,\n required,\n optional,\n hideLabel,\n fitContent,\n withHighlight,\n isGroup,\n } = propsWithDefault;\n\n const { className, label: globalLabel, ...othersGlobalAttributes } = globalAttributes;\n const instanceUID = useMemo(() => `form_layout_block_item_${uid(6)}`, []);\n\n const cols = useMemo(() => (maxCharCounter !== undefined ? ['1fr', 'auto'] : ['1fr']), [maxCharCounter]);\n\n return (\n <StyledContainer\n data-testid={DSFormLayoutBlockItemDataTestId.CONTAINER}\n leftLabel={leftLabel}\n fitContent={fitContent}\n hideLabel={hideLabel}\n withHighlight={withHighlight}\n as={isGroup ? 'fieldset' : 'div'}\n isGroup={isGroup}\n aria-describedby={!isGroup ? `${
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { AlertsSmallFill } from '@elliemae/ds-icons';\nimport { DSFormLayoutBlockItemDataTestId } from '../exported-related/DSFormLayoutBlockItemDataTestId.js';\nimport type { DSFormLayoutBlockItemT } from './propTypes.js';\nimport { propTypes } from './propTypes.js';\nimport {\n StyledMessage,\n StyledLabel,\n StyledContainer,\n StyledMark,\n ScreenReaderOnly,\n StyledCharCount,\n} from './styles.js';\nimport { useFormLayoutBlockItem } from './config/useFormLayoutBlockItem.js';\n\nconst DSFormLayoutBlockItem = (props: DSFormLayoutBlockItemT.Props) => {\n const { globalAttributes, xstyledProps, propsWithDefault } = useFormLayoutBlockItem(props);\n const {\n label,\n feedbackMessage,\n maxCharCounter,\n currentChar,\n validationMessage,\n inputID,\n children,\n hasError,\n leftLabel,\n required,\n optional,\n hideLabel,\n fitContent,\n withHighlight,\n isGroup,\n } = propsWithDefault;\n\n // eslint-disable-next-line no-unused-vars\n const { className, label: globalLabel, ...othersGlobalAttributes } = globalAttributes;\n const instanceUID = useMemo(() => inputID ?? `form_layout_block_item_${uid(6)}`, [inputID]);\n\n const cols = useMemo(() => (maxCharCounter !== undefined ? ['1fr', 'auto'] : ['1fr']), [maxCharCounter]);\n\n return (\n <StyledContainer\n data-testid={DSFormLayoutBlockItemDataTestId.CONTAINER}\n leftLabel={leftLabel}\n fitContent={fitContent}\n hideLabel={hideLabel}\n withHighlight={withHighlight}\n as={isGroup ? 'fieldset' : 'div'}\n isGroup={isGroup}\n aria-describedby={!isGroup ? `${instanceUID}_feedback_message` : undefined}\n className={className}\n {...xstyledProps}\n >\n <Grid cols={cols} gutter=\"xxs\">\n <StyledLabel\n id={`${instanceUID}_block_label`}\n data-testid={DSFormLayoutBlockItemDataTestId.LABEL}\n htmlFor={instanceUID}\n leftLabel={leftLabel}\n hideLabel={hideLabel}\n aria-hidden={isGroup}\n {...othersGlobalAttributes}\n >\n {label}\n {(required || optional) && <StyledMark required={required} />}\n </StyledLabel>\n {maxCharCounter !== undefined && currentChar !== undefined ? (\n <StyledCharCount\n data-testid={DSFormLayoutBlockItemDataTestId.COUNTER}\n hasError={currentChar > maxCharCounter}\n >{`${currentChar}/${maxCharCounter}`}</StyledCharCount>\n ) : null}\n </Grid>\n {isGroup && <ScreenReaderOnly as=\"legend\">{`${label}. ${feedbackMessage || ''}`}</ScreenReaderOnly>}\n {children}\n {feedbackMessage && !hasError && (\n <StyledMessage\n data-testid={DSFormLayoutBlockItemDataTestId.MESSAGE}\n leftLabel={leftLabel}\n hideLabel={hideLabel}\n aria-hidden={isGroup}\n id={`${instanceUID}_feedback_message`}\n >\n {feedbackMessage}\n </StyledMessage>\n )}\n {validationMessage && hasError && (\n <StyledMessage\n data-testid={DSFormLayoutBlockItemDataTestId.ERROR_MESSAGE}\n hasError={hasError}\n leftLabel={leftLabel}\n aria-label={`${label}`}\n hideLabel={hideLabel}\n role=\"alert\"\n id={`${instanceUID}_error_message`}\n >\n <AlertsSmallFill width={8} height={8} color={['danger', '900']} style={{ marginBottom: '2px' }} />\n \n {`${validationMessage}`}\n </StyledMessage>\n )}\n </StyledContainer>\n );\n};\n\nDSFormLayoutBlockItem.propTypes = propTypes;\nDSFormLayoutBlockItem.displayName = 'DSFormLayoutBlockItem';\nconst DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);\nDSFormLayoutBlockItemWithSchema.propTypes = propTypes;\n\nexport { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Df;AA1DR,mBAA+B;AAC/B,qBAAqB;AACrB,8BAAyB;AACzB,iBAAoB;AACpB,sBAAgC;AAChC,6CAAgD;AAEhD,uBAA0B;AAC1B,oBAOO;AACP,oCAAuC;AAEvC,MAAM,wBAAwB,CAAC,UAAwC;AACrE,QAAM,EAAE,kBAAkB,cAAc,iBAAiB,QAAI,sDAAuB,KAAK;AACzF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAGJ,QAAM,EAAE,WAAW,OAAO,aAAa,GAAG,uBAAuB,IAAI;AACrE,QAAM,kBAAc,sBAAQ,MAAM,WAAW,8BAA0B,gBAAI,CAAC,KAAK,CAAC,OAAO,CAAC;AAE1F,QAAM,WAAO,sBAAQ,MAAO,mBAAmB,SAAY,CAAC,OAAO,MAAM,IAAI,CAAC,KAAK,GAAI,CAAC,cAAc,CAAC;AAEvG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,uEAAgC;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,IAAI,UAAU,aAAa;AAAA,MAC3B;AAAA,MACA,oBAAkB,CAAC,UAAU,GAAG,iCAAiC;AAAA,MACjE;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,qDAAC,uBAAK,MAAY,QAAO,OACvB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,GAAG;AAAA,cACP,eAAa,uEAAgC;AAAA,cAC7C,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cACA,eAAa;AAAA,cACZ,GAAG;AAAA,cAEH;AAAA;AAAA,iBACC,YAAY,aAAa,4CAAC,4BAAW,UAAoB;AAAA;AAAA;AAAA,UAC7D;AAAA,UACC,mBAAmB,UAAa,gBAAgB,SAC/C;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,uEAAgC;AAAA,cAC7C,UAAU,cAAc;AAAA,cACxB,aAAG,eAAe;AAAA;AAAA,UAAiB,IACnC;AAAA,WACN;AAAA,QACC,WAAW,4CAAC,kCAAiB,IAAG,UAAU,aAAG,UAAU,mBAAmB,MAAK;AAAA,QAC/E;AAAA,QACA,mBAAmB,CAAC,YACnB;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,uEAAgC;AAAA,YAC7C;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACb,IAAI,GAAG;AAAA,YAEN;AAAA;AAAA,QACH;AAAA,QAED,qBAAqB,YACpB;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,uEAAgC;AAAA,YAC7C;AAAA,YACA;AAAA,YACA,cAAY,GAAG;AAAA,YACf;AAAA,YACA,MAAK;AAAA,YACL,IAAI,GAAG;AAAA,YAEP;AAAA,0DAAC,mCAAgB,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,UAAU,KAAK,GAAG,OAAO,EAAE,cAAc,MAAM,GAAG;AAAA,cAAE;AAAA,cAEjG,GAAG;AAAA;AAAA;AAAA,QACN;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,sCAAkC,kCAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/form-layout-block-item/propTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport const defaultProps = {\n isGroup: false,\n};\n\nexport declare namespace DSFormLayoutBlockItemT {\n export interface PropsOptional {\n maxCharCounter?: number;\n currentChar?: number;\n inputID
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAuE;
|
|
4
|
+
"sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport const defaultProps = {\n isGroup: false,\n};\n\nexport declare namespace DSFormLayoutBlockItemT {\n export interface PropsOptional {\n maxCharCounter?: number;\n currentChar?: number;\n inputID?: string;\n iconError?: boolean;\n validationMessage?: string;\n feedbackMessage?: string;\n hasError?: boolean;\n leftLabel?: boolean;\n required?: boolean;\n fitContent?: boolean;\n optional?: boolean;\n hideLabel?: boolean;\n withHighlight?: boolean;\n }\n\n export interface DefaultProps {\n isGroup: boolean;\n }\n\n export interface PropsRequired {\n children: JSX.Element;\n label: string;\n }\n\n export interface Props extends PropsOptional, PropsRequired, Partial<DefaultProps> {}\n export interface InternalProps extends PropsOptional, PropsRequired, DefaultProps {}\n}\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.node.isRequired.description('Input component. '),\n label: PropTypes.string.description(\n 'Label property for the input component. This property is required for accesibility purposes.',\n ),\n inputID: PropTypes.string.description(\n \"String that matches the input component's id. This property is required for accesibility purposes.\",\n ),\n maxCharCounter: PropTypes.number.description('Max of characters allowed.'),\n currentChar: PropTypes.number.description('Current counter of input text area'),\n feedbackMessage: PropTypes.string.description('Feedback message to show below the input component.'),\n validationMessage: PropTypes.string.description(\n 'Validation message to show below the input component. It requires hasError property set to true to be visible.',\n ),\n hasError: PropTypes.bool.description('Helper boolean property for the validation message.'),\n required: PropTypes.bool.description('Adds required extra styling.'),\n optional: PropTypes.bool.description('Adds optional extra styling.'),\n fitContent: PropTypes.bool.description('Set the width of the layout to the input component.'),\n leftLabel: PropTypes.bool.description('Adds the label at the left of the input component.'),\n hideLabel: PropTypes.bool.description(\n 'Hides the input label. It still requires label and labelFor property for accesibility purposes',\n ),\n withHighlight: PropTypes.bool.description(\n 'Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.',\n ),\n isGroup: PropTypes.bool.description(\n 'Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input.',\n ),\n iconError: PropTypes.bool.description('Adds icon error extra styling.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAuE;AAGhE,MAAM,eAAe;AAAA,EAC1B,SAAS;AACX;AAgCO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,WAAW,YAAY,mBAAmB;AAAA,EACnE,OAAO,kCAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,SAAS,kCAAU,OAAO;AAAA,IACxB;AAAA,EACF;AAAA,EACA,gBAAgB,kCAAU,OAAO,YAAY,4BAA4B;AAAA,EACzE,aAAa,kCAAU,OAAO,YAAY,oCAAoC;AAAA,EAC9E,iBAAiB,kCAAU,OAAO,YAAY,qDAAqD;AAAA,EACnG,mBAAmB,kCAAU,OAAO;AAAA,IAClC;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,KAAK,YAAY,qDAAqD;AAAA,EAC1F,UAAU,kCAAU,KAAK,YAAY,8BAA8B;AAAA,EACnE,UAAU,kCAAU,KAAK,YAAY,8BAA8B;AAAA,EACnE,YAAY,kCAAU,KAAK,YAAY,qDAAqD;AAAA,EAC5F,WAAW,kCAAU,KAAK,YAAY,oDAAoD;AAAA,EAC1F,WAAW,kCAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,eAAe,kCAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS,kCAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA,EACA,WAAW,kCAAU,KAAK,YAAY,gCAAgC;AACxE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -126,9 +126,8 @@ const ScreenReaderOnly = import_ds_system.styled.div`
|
|
|
126
126
|
width: 1px;
|
|
127
127
|
`;
|
|
128
128
|
const StyledCharCount = import_ds_system.styled.span`
|
|
129
|
-
justify-self: flex-end;
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
color: ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[500]};
|
|
129
|
+
justify-self: flex-end;
|
|
130
|
+
margin-left: 16px;
|
|
131
|
+
color: ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[500]};
|
|
133
132
|
`;
|
|
134
133
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/form-layout-block-item/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\n\ninterface DSFormLayoutBlockItemStyledMessageT {\n hasError?: boolean;\n leftLabel?: boolean;\n hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledContainerT {\n leftLabel?: boolean;\n fitContent?: boolean;\n hideLabel?: boolean;\n withHighlight?: boolean;\n isGroup?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledLabelT {\n leftLabel?: boolean;\n hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledMarkT {\n required?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledCharCounterT {\n hasError?: boolean;\n}\nexport const StyledContainer = styled('div')<DSFormLayoutBlockItemStyledContainerT>`\n position: relative;\n padding: 0;\n margin: 0;\n display: grid;\n ${xStyledCommonProps}\n ${({ fitContent }) => (fitContent ? 'width: fit-content;' : undefined)}\n ${({ isGroup }) => (isGroup ? 'border: none' : '')};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-template-columns: auto 1fr;' : undefined)}\n align-items: center;\n ${({ theme, withHighlight }) =>\n withHighlight\n ? `\n &::after {\n position: absolute;\n content: '';\n left: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${theme.space.xxs});\n background-color: #FEFBEE;\n border : 1px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);\n }\n &:hover, \n &:focus-within {\n &::after {\n position: absolute;\n content: '';\n left: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${theme.space.xxs});\n background-color: #FFF9D3;\n border : 2px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);\n }\n }\n `\n : undefined}\n`;\nexport const StyledLabel = styled.label<DSFormLayoutBlockItemStyledLabelT>`\n display: flex;\n ${({ theme, leftLabel }) => (leftLabel ? `padding-right: ${theme.space.xxxs};` : undefined)}\n ${({ hideLabel }) =>\n hideLabel\n ? `position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n `\n : undefined}\n`;\nexport const StyledMessage = styled('div')<DSFormLayoutBlockItemStyledMessageT>`\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n line-height: 15px;\n min-height: 15px;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined)}\n font-style: normal;\n`;\nexport const StyledMark = styled.span<DSFormLayoutBlockItemStyledMarkT>`\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-left: ${({ theme }) => theme.space.xxxs};\n ${({ theme, required }) =>\n required\n ? `\n background-color: ${theme.colors.danger[900]};\n `\n : `\n border: 1px solid ${theme.colors.brand[600]};\n `}\n`;\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\nexport const StyledCharCount = styled.span<DSFormLayoutBlockItemStyledCharCounterT>`\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AA4BpC,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKvC;AAAA,IACA,CAAC,EAAE,WAAW,MAAO,aAAa,wBAAwB;AAAA,IAC1D,CAAC,EAAE,QAAQ,MAAO,UAAU,iBAAiB;AAAA,IAC7C,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,qCAAqC;AAAA;AAAA,IAE9F,CAAC,EAAE,OAAO,cAAc,MACxB,gBACI;AAAA;AAAA;AAAA;AAAA,iBAIS,MAAM,MAAM;AAAA,gBACb,MAAM,MAAM;AAAA;AAAA,6BAEC,MAAM,MAAM;AAAA,+BACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAWtB,MAAM,MAAM;AAAA,oBACb,MAAM,MAAM;AAAA;AAAA,iCAEC,MAAM,MAAM;AAAA,mCACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQvC;AAAA;AAED,MAAM,cAAc,wBAAO;AAAA;AAAA,IAE9B,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,kBAAkB,MAAM,MAAM,UAAU;AAAA,IAC/E,CAAC,EAAE,UAAU,MACb,YACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA;AAAA;AAED,MAAM,oBAAgB,yBAAO,KAAK;AAAA,eAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMhD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA,IAC/F,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAAA;AAG5E,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA,iBAIhB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,sBACc,MAAM,OAAO,OAAO,GAAG;AAAA,MAErC;AAAA,sBACc,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAGrC,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,kBAAkB,wBAAO;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\n\ninterface DSFormLayoutBlockItemStyledMessageT {\n hasError?: boolean;\n leftLabel?: boolean;\n hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledContainerT {\n leftLabel?: boolean;\n fitContent?: boolean;\n hideLabel?: boolean;\n withHighlight?: boolean;\n isGroup?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledLabelT {\n leftLabel?: boolean;\n hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledMarkT {\n required?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledCharCounterT {\n hasError?: boolean;\n}\nexport const StyledContainer = styled('div')<DSFormLayoutBlockItemStyledContainerT>`\n position: relative;\n padding: 0;\n margin: 0;\n display: grid;\n ${xStyledCommonProps}\n ${({ fitContent }) => (fitContent ? 'width: fit-content;' : undefined)}\n ${({ isGroup }) => (isGroup ? 'border: none' : '')};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-template-columns: auto 1fr;' : undefined)}\n align-items: center;\n ${({ theme, withHighlight }) =>\n withHighlight\n ? `\n &::after {\n position: absolute;\n content: '';\n left: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${theme.space.xxs});\n background-color: #FEFBEE;\n border : 1px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);\n }\n &:hover, \n &:focus-within {\n &::after {\n position: absolute;\n content: '';\n left: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${theme.space.xxs});\n background-color: #FFF9D3;\n border : 2px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);\n }\n }\n `\n : undefined}\n`;\nexport const StyledLabel = styled.label<DSFormLayoutBlockItemStyledLabelT>`\n display: flex;\n ${({ theme, leftLabel }) => (leftLabel ? `padding-right: ${theme.space.xxxs};` : undefined)}\n ${({ hideLabel }) =>\n hideLabel\n ? `position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n `\n : undefined}\n`;\nexport const StyledMessage = styled('div')<DSFormLayoutBlockItemStyledMessageT>`\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n line-height: 15px;\n min-height: 15px;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined)}\n font-style: normal;\n`;\nexport const StyledMark = styled.span<DSFormLayoutBlockItemStyledMarkT>`\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-left: ${({ theme }) => theme.space.xxxs};\n ${({ theme, required }) =>\n required\n ? `\n background-color: ${theme.colors.danger[900]};\n `\n : `\n border: 1px solid ${theme.colors.brand[600]};\n `}\n`;\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\nexport const StyledCharCount = styled.span<DSFormLayoutBlockItemStyledCharCounterT>`\n justify-self: flex-end;\n margin-left: 16px;\n color: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AA4BpC,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKvC;AAAA,IACA,CAAC,EAAE,WAAW,MAAO,aAAa,wBAAwB;AAAA,IAC1D,CAAC,EAAE,QAAQ,MAAO,UAAU,iBAAiB;AAAA,IAC7C,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,qCAAqC;AAAA;AAAA,IAE9F,CAAC,EAAE,OAAO,cAAc,MACxB,gBACI;AAAA;AAAA;AAAA;AAAA,iBAIS,MAAM,MAAM;AAAA,gBACb,MAAM,MAAM;AAAA;AAAA,6BAEC,MAAM,MAAM;AAAA,+BACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAWtB,MAAM,MAAM;AAAA,oBACb,MAAM,MAAM;AAAA;AAAA,iCAEC,MAAM,MAAM;AAAA,mCACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQvC;AAAA;AAED,MAAM,cAAc,wBAAO;AAAA;AAAA,IAE9B,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,kBAAkB,MAAM,MAAM,UAAU;AAAA,IAC/E,CAAC,EAAE,UAAU,MACb,YACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA;AAAA;AAED,MAAM,oBAAgB,yBAAO,KAAK;AAAA,eAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMhD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA,IAC/F,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAAA;AAG5E,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA,iBAIhB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,sBACc,MAAM,OAAO,OAAO,GAAG;AAAA,MAErC;AAAA,sBACc,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAGrC,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA,WAG3B,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,7 +36,7 @@ const DSFormLayoutBlockItem = (props) => {
|
|
|
36
36
|
isGroup
|
|
37
37
|
} = propsWithDefault;
|
|
38
38
|
const { className, label: globalLabel, ...othersGlobalAttributes } = globalAttributes;
|
|
39
|
-
const instanceUID = useMemo(() => `form_layout_block_item_${uid(6)}`, []);
|
|
39
|
+
const instanceUID = useMemo(() => inputID ?? `form_layout_block_item_${uid(6)}`, [inputID]);
|
|
40
40
|
const cols = useMemo(() => maxCharCounter !== void 0 ? ["1fr", "auto"] : ["1fr"], [maxCharCounter]);
|
|
41
41
|
return /* @__PURE__ */ jsxs(
|
|
42
42
|
StyledContainer,
|
|
@@ -48,7 +48,7 @@ const DSFormLayoutBlockItem = (props) => {
|
|
|
48
48
|
withHighlight,
|
|
49
49
|
as: isGroup ? "fieldset" : "div",
|
|
50
50
|
isGroup,
|
|
51
|
-
"aria-describedby": !isGroup ? `${
|
|
51
|
+
"aria-describedby": !isGroup ? `${instanceUID}_feedback_message` : void 0,
|
|
52
52
|
className,
|
|
53
53
|
...xstyledProps,
|
|
54
54
|
children: [
|
|
@@ -56,9 +56,9 @@ const DSFormLayoutBlockItem = (props) => {
|
|
|
56
56
|
/* @__PURE__ */ jsxs(
|
|
57
57
|
StyledLabel,
|
|
58
58
|
{
|
|
59
|
-
id: `${
|
|
59
|
+
id: `${instanceUID}_block_label`,
|
|
60
60
|
"data-testid": DSFormLayoutBlockItemDataTestId.LABEL,
|
|
61
|
-
htmlFor:
|
|
61
|
+
htmlFor: instanceUID,
|
|
62
62
|
leftLabel,
|
|
63
63
|
hideLabel,
|
|
64
64
|
"aria-hidden": isGroup,
|
|
@@ -87,7 +87,7 @@ const DSFormLayoutBlockItem = (props) => {
|
|
|
87
87
|
leftLabel,
|
|
88
88
|
hideLabel,
|
|
89
89
|
"aria-hidden": isGroup,
|
|
90
|
-
id: `${
|
|
90
|
+
id: `${instanceUID}_feedback_message`,
|
|
91
91
|
children: feedbackMessage
|
|
92
92
|
}
|
|
93
93
|
),
|
|
@@ -100,7 +100,7 @@ const DSFormLayoutBlockItem = (props) => {
|
|
|
100
100
|
"aria-label": `${label}`,
|
|
101
101
|
hideLabel,
|
|
102
102
|
role: "alert",
|
|
103
|
-
id: `${
|
|
103
|
+
id: `${instanceUID}_error_message`,
|
|
104
104
|
children: [
|
|
105
105
|
/* @__PURE__ */ jsx(AlertsSmallFill, { width: 8, height: 8, color: ["danger", "900"], style: { marginBottom: "2px" } }),
|
|
106
106
|
"\xA0",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/form-layout-block-item/DSFormLayoutBlockItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { AlertsSmallFill } from '@elliemae/ds-icons';\nimport { DSFormLayoutBlockItemDataTestId } from '../exported-related/DSFormLayoutBlockItemDataTestId.js';\nimport type { DSFormLayoutBlockItemT } from './propTypes.js';\nimport { propTypes } from './propTypes.js';\nimport {\n StyledMessage,\n StyledLabel,\n StyledContainer,\n StyledMark,\n ScreenReaderOnly,\n StyledCharCount,\n} from './styles.js';\nimport { useFormLayoutBlockItem } from './config/useFormLayoutBlockItem.js';\n\nconst DSFormLayoutBlockItem = (props: DSFormLayoutBlockItemT.Props) => {\n const { globalAttributes, xstyledProps, propsWithDefault } = useFormLayoutBlockItem(props);\n const {\n label,\n feedbackMessage,\n maxCharCounter,\n currentChar,\n validationMessage,\n inputID,\n children,\n hasError,\n leftLabel,\n required,\n optional,\n hideLabel,\n fitContent,\n withHighlight,\n isGroup,\n } = propsWithDefault;\n\n const { className, label: globalLabel, ...othersGlobalAttributes } = globalAttributes;\n const instanceUID = useMemo(() => `form_layout_block_item_${uid(6)}`, []);\n\n const cols = useMemo(() => (maxCharCounter !== undefined ? ['1fr', 'auto'] : ['1fr']), [maxCharCounter]);\n\n return (\n <StyledContainer\n data-testid={DSFormLayoutBlockItemDataTestId.CONTAINER}\n leftLabel={leftLabel}\n fitContent={fitContent}\n hideLabel={hideLabel}\n withHighlight={withHighlight}\n as={isGroup ? 'fieldset' : 'div'}\n isGroup={isGroup}\n aria-describedby={!isGroup ? `${
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { AlertsSmallFill } from '@elliemae/ds-icons';\nimport { DSFormLayoutBlockItemDataTestId } from '../exported-related/DSFormLayoutBlockItemDataTestId.js';\nimport type { DSFormLayoutBlockItemT } from './propTypes.js';\nimport { propTypes } from './propTypes.js';\nimport {\n StyledMessage,\n StyledLabel,\n StyledContainer,\n StyledMark,\n ScreenReaderOnly,\n StyledCharCount,\n} from './styles.js';\nimport { useFormLayoutBlockItem } from './config/useFormLayoutBlockItem.js';\n\nconst DSFormLayoutBlockItem = (props: DSFormLayoutBlockItemT.Props) => {\n const { globalAttributes, xstyledProps, propsWithDefault } = useFormLayoutBlockItem(props);\n const {\n label,\n feedbackMessage,\n maxCharCounter,\n currentChar,\n validationMessage,\n inputID,\n children,\n hasError,\n leftLabel,\n required,\n optional,\n hideLabel,\n fitContent,\n withHighlight,\n isGroup,\n } = propsWithDefault;\n\n // eslint-disable-next-line no-unused-vars\n const { className, label: globalLabel, ...othersGlobalAttributes } = globalAttributes;\n const instanceUID = useMemo(() => inputID ?? `form_layout_block_item_${uid(6)}`, [inputID]);\n\n const cols = useMemo(() => (maxCharCounter !== undefined ? ['1fr', 'auto'] : ['1fr']), [maxCharCounter]);\n\n return (\n <StyledContainer\n data-testid={DSFormLayoutBlockItemDataTestId.CONTAINER}\n leftLabel={leftLabel}\n fitContent={fitContent}\n hideLabel={hideLabel}\n withHighlight={withHighlight}\n as={isGroup ? 'fieldset' : 'div'}\n isGroup={isGroup}\n aria-describedby={!isGroup ? `${instanceUID}_feedback_message` : undefined}\n className={className}\n {...xstyledProps}\n >\n <Grid cols={cols} gutter=\"xxs\">\n <StyledLabel\n id={`${instanceUID}_block_label`}\n data-testid={DSFormLayoutBlockItemDataTestId.LABEL}\n htmlFor={instanceUID}\n leftLabel={leftLabel}\n hideLabel={hideLabel}\n aria-hidden={isGroup}\n {...othersGlobalAttributes}\n >\n {label}\n {(required || optional) && <StyledMark required={required} />}\n </StyledLabel>\n {maxCharCounter !== undefined && currentChar !== undefined ? (\n <StyledCharCount\n data-testid={DSFormLayoutBlockItemDataTestId.COUNTER}\n hasError={currentChar > maxCharCounter}\n >{`${currentChar}/${maxCharCounter}`}</StyledCharCount>\n ) : null}\n </Grid>\n {isGroup && <ScreenReaderOnly as=\"legend\">{`${label}. ${feedbackMessage || ''}`}</ScreenReaderOnly>}\n {children}\n {feedbackMessage && !hasError && (\n <StyledMessage\n data-testid={DSFormLayoutBlockItemDataTestId.MESSAGE}\n leftLabel={leftLabel}\n hideLabel={hideLabel}\n aria-hidden={isGroup}\n id={`${instanceUID}_feedback_message`}\n >\n {feedbackMessage}\n </StyledMessage>\n )}\n {validationMessage && hasError && (\n <StyledMessage\n data-testid={DSFormLayoutBlockItemDataTestId.ERROR_MESSAGE}\n hasError={hasError}\n leftLabel={leftLabel}\n aria-label={`${label}`}\n hideLabel={hideLabel}\n role=\"alert\"\n id={`${instanceUID}_error_message`}\n >\n <AlertsSmallFill width={8} height={8} color={['danger', '900']} style={{ marginBottom: '2px' }} />\n \n {`${validationMessage}`}\n </StyledMessage>\n )}\n </StyledContainer>\n );\n};\n\nDSFormLayoutBlockItem.propTypes = propTypes;\nDSFormLayoutBlockItem.displayName = 'DSFormLayoutBlockItem';\nconst DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);\nDSFormLayoutBlockItemWithSchema.propTypes = propTypes;\n\nexport { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC2Df,SAU6B,KAV7B;AA1DR,SAAgB,eAAe;AAC/B,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,WAAW;AACpB,SAAS,uBAAuB;AAChC,SAAS,uCAAuC;AAEhD,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AAEvC,MAAM,wBAAwB,CAAC,UAAwC;AACrE,QAAM,EAAE,kBAAkB,cAAc,iBAAiB,IAAI,uBAAuB,KAAK;AACzF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAGJ,QAAM,EAAE,WAAW,OAAO,aAAa,GAAG,uBAAuB,IAAI;AACrE,QAAM,cAAc,QAAQ,MAAM,WAAW,0BAA0B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;AAE1F,QAAM,OAAO,QAAQ,MAAO,mBAAmB,SAAY,CAAC,OAAO,MAAM,IAAI,CAAC,KAAK,GAAI,CAAC,cAAc,CAAC;AAEvG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,gCAAgC;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,IAAI,UAAU,aAAa;AAAA,MAC3B;AAAA,MACA,oBAAkB,CAAC,UAAU,GAAG,iCAAiC;AAAA,MACjE;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,6BAAC,QAAK,MAAY,QAAO,OACvB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,GAAG;AAAA,cACP,eAAa,gCAAgC;AAAA,cAC7C,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cACA,eAAa;AAAA,cACZ,GAAG;AAAA,cAEH;AAAA;AAAA,iBACC,YAAY,aAAa,oBAAC,cAAW,UAAoB;AAAA;AAAA;AAAA,UAC7D;AAAA,UACC,mBAAmB,UAAa,gBAAgB,SAC/C;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,gCAAgC;AAAA,cAC7C,UAAU,cAAc;AAAA,cACxB,aAAG,eAAe;AAAA;AAAA,UAAiB,IACnC;AAAA,WACN;AAAA,QACC,WAAW,oBAAC,oBAAiB,IAAG,UAAU,aAAG,UAAU,mBAAmB,MAAK;AAAA,QAC/E;AAAA,QACA,mBAAmB,CAAC,YACnB;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,gCAAgC;AAAA,YAC7C;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACb,IAAI,GAAG;AAAA,YAEN;AAAA;AAAA,QACH;AAAA,QAED,qBAAqB,YACpB;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,gCAAgC;AAAA,YAC7C;AAAA,YACA;AAAA,YACA,cAAY,GAAG;AAAA,YACf;AAAA,YACA,MAAK;AAAA,YACL,IAAI,GAAG;AAAA,YAEP;AAAA,kCAAC,mBAAgB,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,UAAU,KAAK,GAAG,OAAO,EAAE,cAAc,MAAM,GAAG;AAAA,cAAE;AAAA,cAEjG,GAAG;AAAA;AAAA;AAAA,QACN;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/form-layout-block-item/propTypes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport const defaultProps = {\n isGroup: false,\n};\n\nexport declare namespace DSFormLayoutBlockItemT {\n export interface PropsOptional {\n maxCharCounter?: number;\n currentChar?: number;\n inputID
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,2BAA2B,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport const defaultProps = {\n isGroup: false,\n};\n\nexport declare namespace DSFormLayoutBlockItemT {\n export interface PropsOptional {\n maxCharCounter?: number;\n currentChar?: number;\n inputID?: string;\n iconError?: boolean;\n validationMessage?: string;\n feedbackMessage?: string;\n hasError?: boolean;\n leftLabel?: boolean;\n required?: boolean;\n fitContent?: boolean;\n optional?: boolean;\n hideLabel?: boolean;\n withHighlight?: boolean;\n }\n\n export interface DefaultProps {\n isGroup: boolean;\n }\n\n export interface PropsRequired {\n children: JSX.Element;\n label: string;\n }\n\n export interface Props extends PropsOptional, PropsRequired, Partial<DefaultProps> {}\n export interface InternalProps extends PropsOptional, PropsRequired, DefaultProps {}\n}\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.node.isRequired.description('Input component. '),\n label: PropTypes.string.description(\n 'Label property for the input component. This property is required for accesibility purposes.',\n ),\n inputID: PropTypes.string.description(\n \"String that matches the input component's id. This property is required for accesibility purposes.\",\n ),\n maxCharCounter: PropTypes.number.description('Max of characters allowed.'),\n currentChar: PropTypes.number.description('Current counter of input text area'),\n feedbackMessage: PropTypes.string.description('Feedback message to show below the input component.'),\n validationMessage: PropTypes.string.description(\n 'Validation message to show below the input component. It requires hasError property set to true to be visible.',\n ),\n hasError: PropTypes.bool.description('Helper boolean property for the validation message.'),\n required: PropTypes.bool.description('Adds required extra styling.'),\n optional: PropTypes.bool.description('Adds optional extra styling.'),\n fitContent: PropTypes.bool.description('Set the width of the layout to the input component.'),\n leftLabel: PropTypes.bool.description('Adds the label at the left of the input component.'),\n hideLabel: PropTypes.bool.description(\n 'Hides the input label. It still requires label and labelFor property for accesibility purposes',\n ),\n withHighlight: PropTypes.bool.description(\n 'Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.',\n ),\n isGroup: PropTypes.bool.description(\n 'Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input.',\n ),\n iconError: PropTypes.bool.description('Adds icon error extra styling.'),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,2BAA2B,wBAAwB;AAGhE,MAAM,eAAe;AAAA,EAC1B,SAAS;AACX;AAgCO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,WAAW,YAAY,mBAAmB;AAAA,EACnE,OAAO,UAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,SAAS,UAAU,OAAO;AAAA,IACxB;AAAA,EACF;AAAA,EACA,gBAAgB,UAAU,OAAO,YAAY,4BAA4B;AAAA,EACzE,aAAa,UAAU,OAAO,YAAY,oCAAoC;AAAA,EAC9E,iBAAiB,UAAU,OAAO,YAAY,qDAAqD;AAAA,EACnG,mBAAmB,UAAU,OAAO;AAAA,IAClC;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,qDAAqD;AAAA,EAC1F,UAAU,UAAU,KAAK,YAAY,8BAA8B;AAAA,EACnE,UAAU,UAAU,KAAK,YAAY,8BAA8B;AAAA,EACnE,YAAY,UAAU,KAAK,YAAY,qDAAqD;AAAA,EAC5F,WAAW,UAAU,KAAK,YAAY,oDAAoD;AAAA,EAC1F,WAAW,UAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,eAAe,UAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS,UAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA,EACA,WAAW,UAAU,KAAK,YAAY,gCAAgC;AACxE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -88,10 +88,9 @@ const ScreenReaderOnly = styled.div`
|
|
|
88
88
|
width: 1px;
|
|
89
89
|
`;
|
|
90
90
|
const StyledCharCount = styled.span`
|
|
91
|
-
justify-self: flex-end;
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
color: ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[500]};
|
|
91
|
+
justify-self: flex-end;
|
|
92
|
+
margin-left: 16px;
|
|
93
|
+
color: ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[500]};
|
|
95
94
|
`;
|
|
96
95
|
export {
|
|
97
96
|
ScreenReaderOnly,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/form-layout-block-item/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\n\ninterface DSFormLayoutBlockItemStyledMessageT {\n hasError?: boolean;\n leftLabel?: boolean;\n hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledContainerT {\n leftLabel?: boolean;\n fitContent?: boolean;\n hideLabel?: boolean;\n withHighlight?: boolean;\n isGroup?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledLabelT {\n leftLabel?: boolean;\n hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledMarkT {\n required?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledCharCounterT {\n hasError?: boolean;\n}\nexport const StyledContainer = styled('div')<DSFormLayoutBlockItemStyledContainerT>`\n position: relative;\n padding: 0;\n margin: 0;\n display: grid;\n ${xStyledCommonProps}\n ${({ fitContent }) => (fitContent ? 'width: fit-content;' : undefined)}\n ${({ isGroup }) => (isGroup ? 'border: none' : '')};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-template-columns: auto 1fr;' : undefined)}\n align-items: center;\n ${({ theme, withHighlight }) =>\n withHighlight\n ? `\n &::after {\n position: absolute;\n content: '';\n left: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${theme.space.xxs});\n background-color: #FEFBEE;\n border : 1px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);\n }\n &:hover, \n &:focus-within {\n &::after {\n position: absolute;\n content: '';\n left: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${theme.space.xxs});\n background-color: #FFF9D3;\n border : 2px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);\n }\n }\n `\n : undefined}\n`;\nexport const StyledLabel = styled.label<DSFormLayoutBlockItemStyledLabelT>`\n display: flex;\n ${({ theme, leftLabel }) => (leftLabel ? `padding-right: ${theme.space.xxxs};` : undefined)}\n ${({ hideLabel }) =>\n hideLabel\n ? `position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n `\n : undefined}\n`;\nexport const StyledMessage = styled('div')<DSFormLayoutBlockItemStyledMessageT>`\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n line-height: 15px;\n min-height: 15px;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined)}\n font-style: normal;\n`;\nexport const StyledMark = styled.span<DSFormLayoutBlockItemStyledMarkT>`\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-left: ${({ theme }) => theme.space.xxxs};\n ${({ theme, required }) =>\n required\n ? `\n background-color: ${theme.colors.danger[900]};\n `\n : `\n border: 1px solid ${theme.colors.brand[600]};\n `}\n`;\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\nexport const StyledCharCount = styled.span<DSFormLayoutBlockItemStyledCharCounterT>`\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AA4BpC,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKvC;AAAA,IACA,CAAC,EAAE,WAAW,MAAO,aAAa,wBAAwB;AAAA,IAC1D,CAAC,EAAE,QAAQ,MAAO,UAAU,iBAAiB;AAAA,IAC7C,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,qCAAqC;AAAA;AAAA,IAE9F,CAAC,EAAE,OAAO,cAAc,MACxB,gBACI;AAAA;AAAA;AAAA;AAAA,iBAIS,MAAM,MAAM;AAAA,gBACb,MAAM,MAAM;AAAA;AAAA,6BAEC,MAAM,MAAM;AAAA,+BACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAWtB,MAAM,MAAM;AAAA,oBACb,MAAM,MAAM;AAAA;AAAA,iCAEC,MAAM,MAAM;AAAA,mCACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQvC;AAAA;AAED,MAAM,cAAc,OAAO;AAAA;AAAA,IAE9B,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,kBAAkB,MAAM,MAAM,UAAU;AAAA,IAC/E,CAAC,EAAE,UAAU,MACb,YACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA;AAAA;AAED,MAAM,gBAAgB,OAAO,KAAK;AAAA,eAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMhD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA,IAC/F,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAAA;AAG5E,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA,iBAIhB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,sBACc,MAAM,OAAO,OAAO,GAAG;AAAA,MAErC;AAAA,sBACc,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAGrC,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,kBAAkB,OAAO;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\n\ninterface DSFormLayoutBlockItemStyledMessageT {\n hasError?: boolean;\n leftLabel?: boolean;\n hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledContainerT {\n leftLabel?: boolean;\n fitContent?: boolean;\n hideLabel?: boolean;\n withHighlight?: boolean;\n isGroup?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledLabelT {\n leftLabel?: boolean;\n hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledMarkT {\n required?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledCharCounterT {\n hasError?: boolean;\n}\nexport const StyledContainer = styled('div')<DSFormLayoutBlockItemStyledContainerT>`\n position: relative;\n padding: 0;\n margin: 0;\n display: grid;\n ${xStyledCommonProps}\n ${({ fitContent }) => (fitContent ? 'width: fit-content;' : undefined)}\n ${({ isGroup }) => (isGroup ? 'border: none' : '')};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-template-columns: auto 1fr;' : undefined)}\n align-items: center;\n ${({ theme, withHighlight }) =>\n withHighlight\n ? `\n &::after {\n position: absolute;\n content: '';\n left: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${theme.space.xxs});\n background-color: #FEFBEE;\n border : 1px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);\n }\n &:hover, \n &:focus-within {\n &::after {\n position: absolute;\n content: '';\n left: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${theme.space.xxs});\n background-color: #FFF9D3;\n border : 2px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);\n }\n }\n `\n : undefined}\n`;\nexport const StyledLabel = styled.label<DSFormLayoutBlockItemStyledLabelT>`\n display: flex;\n ${({ theme, leftLabel }) => (leftLabel ? `padding-right: ${theme.space.xxxs};` : undefined)}\n ${({ hideLabel }) =>\n hideLabel\n ? `position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n `\n : undefined}\n`;\nexport const StyledMessage = styled('div')<DSFormLayoutBlockItemStyledMessageT>`\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n line-height: 15px;\n min-height: 15px;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined)}\n font-style: normal;\n`;\nexport const StyledMark = styled.span<DSFormLayoutBlockItemStyledMarkT>`\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-left: ${({ theme }) => theme.space.xxxs};\n ${({ theme, required }) =>\n required\n ? `\n background-color: ${theme.colors.danger[900]};\n `\n : `\n border: 1px solid ${theme.colors.brand[600]};\n `}\n`;\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\nexport const StyledCharCount = styled.span<DSFormLayoutBlockItemStyledCharCounterT>`\n justify-self: flex-end;\n margin-left: 16px;\n color: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AA4BpC,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKvC;AAAA,IACA,CAAC,EAAE,WAAW,MAAO,aAAa,wBAAwB;AAAA,IAC1D,CAAC,EAAE,QAAQ,MAAO,UAAU,iBAAiB;AAAA,IAC7C,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,qCAAqC;AAAA;AAAA,IAE9F,CAAC,EAAE,OAAO,cAAc,MACxB,gBACI;AAAA;AAAA;AAAA;AAAA,iBAIS,MAAM,MAAM;AAAA,gBACb,MAAM,MAAM;AAAA;AAAA,6BAEC,MAAM,MAAM;AAAA,+BACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAWtB,MAAM,MAAM;AAAA,oBACb,MAAM,MAAM;AAAA;AAAA,iCAEC,MAAM,MAAM;AAAA,mCACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQvC;AAAA;AAED,MAAM,cAAc,OAAO;AAAA;AAAA,IAE9B,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,kBAAkB,MAAM,MAAM,UAAU;AAAA,IAC/E,CAAC,EAAE,UAAU,MACb,YACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA;AAAA;AAED,MAAM,gBAAgB,OAAO,KAAK;AAAA,eAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMhD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA,IAC/F,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAAA;AAG5E,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA,iBAIhB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,sBACc,MAAM,OAAO,OAAO,GAAG;AAAA,MAErC;AAAA,sBACc,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAGrC,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA,WAG3B,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DSFormLayoutBlockItemT } from './propTypes.js';
|
|
3
|
+
declare const DSFormLayoutBlockItem: {
|
|
4
|
+
(props: DSFormLayoutBlockItemT.Props): import("react/jsx-runtime.js").JSX.Element;
|
|
5
|
+
propTypes: React.WeakValidationMap<unknown>;
|
|
6
|
+
displayName: string;
|
|
7
|
+
};
|
|
8
|
+
declare const DSFormLayoutBlockItemWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSFormLayoutBlockItemT.Props>;
|
|
9
|
+
export { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const DSFormLayoutBlockItemName = "DSFormLayoutBlockItem";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
|
|
2
|
+
import { type DSFormLayoutBlockItemT } from '../propTypes.js';
|
|
3
|
+
interface UseFormLayoutBlockItemT {
|
|
4
|
+
propsWithDefault: DSFormLayoutBlockItemT.InternalProps;
|
|
5
|
+
globalAttributes: GlobalAttributesT;
|
|
6
|
+
xstyledProps: XstyledProps;
|
|
7
|
+
}
|
|
8
|
+
export declare const useFormLayoutBlockItem: (props: DSFormLayoutBlockItemT.Props) => UseFormLayoutBlockItemT;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './DSFormLayoutBlockItem.js';
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { WeakValidationMap } from 'react';
|
|
2
|
+
export declare const defaultProps: {
|
|
3
|
+
isGroup: boolean;
|
|
4
|
+
};
|
|
5
|
+
export declare namespace DSFormLayoutBlockItemT {
|
|
6
|
+
interface PropsOptional {
|
|
7
|
+
maxCharCounter?: number;
|
|
8
|
+
currentChar?: number;
|
|
9
|
+
inputID?: string;
|
|
10
|
+
iconError?: boolean;
|
|
11
|
+
validationMessage?: string;
|
|
12
|
+
feedbackMessage?: string;
|
|
13
|
+
hasError?: boolean;
|
|
14
|
+
leftLabel?: boolean;
|
|
15
|
+
required?: boolean;
|
|
16
|
+
fitContent?: boolean;
|
|
17
|
+
optional?: boolean;
|
|
18
|
+
hideLabel?: boolean;
|
|
19
|
+
withHighlight?: boolean;
|
|
20
|
+
}
|
|
21
|
+
interface DefaultProps {
|
|
22
|
+
isGroup: boolean;
|
|
23
|
+
}
|
|
24
|
+
interface PropsRequired {
|
|
25
|
+
children: JSX.Element;
|
|
26
|
+
label: string;
|
|
27
|
+
}
|
|
28
|
+
interface Props extends PropsOptional, PropsRequired, Partial<DefaultProps> {
|
|
29
|
+
}
|
|
30
|
+
interface InternalProps extends PropsOptional, PropsRequired, DefaultProps {
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
export declare const propTypes: WeakValidationMap<unknown>;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface DSFormLayoutBlockItemStyledMessageT {
|
|
3
|
+
hasError?: boolean;
|
|
4
|
+
leftLabel?: boolean;
|
|
5
|
+
hideLabel?: boolean;
|
|
6
|
+
}
|
|
7
|
+
interface DSFormLayoutBlockItemStyledContainerT {
|
|
8
|
+
leftLabel?: boolean;
|
|
9
|
+
fitContent?: boolean;
|
|
10
|
+
hideLabel?: boolean;
|
|
11
|
+
withHighlight?: boolean;
|
|
12
|
+
isGroup?: boolean;
|
|
13
|
+
}
|
|
14
|
+
interface DSFormLayoutBlockItemStyledLabelT {
|
|
15
|
+
leftLabel?: boolean;
|
|
16
|
+
hideLabel?: boolean;
|
|
17
|
+
}
|
|
18
|
+
interface DSFormLayoutBlockItemStyledMarkT {
|
|
19
|
+
required?: boolean;
|
|
20
|
+
}
|
|
21
|
+
interface DSFormLayoutBlockItemStyledCharCounterT {
|
|
22
|
+
hasError?: boolean;
|
|
23
|
+
}
|
|
24
|
+
export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, DSFormLayoutBlockItemStyledContainerT, never>;
|
|
25
|
+
export declare const StyledLabel: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & DSFormLayoutBlockItemStyledLabelT, never>;
|
|
26
|
+
export declare const StyledMessage: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, DSFormLayoutBlockItemStyledMessageT, never>;
|
|
27
|
+
export declare const StyledMark: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & DSFormLayoutBlockItemStyledMarkT, never>;
|
|
28
|
+
export declare const ScreenReaderOnly: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
|
|
29
|
+
export declare const StyledCharCount: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & DSFormLayoutBlockItemStyledCharCounterT, never>;
|
|
30
|
+
export {};
|