@elliemae/ds-form-layout-blocks 3.45.1 → 3.46.0-rc.1
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 +5 -4
- package/dist/cjs/form-layout-block-item/DSFormLayoutBlockItem.js.map +2 -2
- package/dist/cjs/form-layout-block-item/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/form-layout-block-item/styles.js +12 -4
- package/dist/cjs/form-layout-block-item/styles.js.map +2 -2
- package/dist/cjs/form-layout-checkbox-group/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-checkbox-group-valid.js +4 -4
- package/dist/cjs/typescript-testing/typescript-checkbox-group-valid.js.map +2 -2
- package/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js +5 -4
- package/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js.map +2 -2
- package/dist/esm/form-layout-block-item/react-desc-prop-types.js.map +2 -2
- package/dist/esm/form-layout-block-item/styles.js +12 -4
- package/dist/esm/form-layout-block-item/styles.js.map +2 -2
- package/dist/esm/form-layout-checkbox-group/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-checkbox-group-valid.js +4 -4
- package/dist/esm/typescript-testing/typescript-checkbox-group-valid.js.map +2 -2
- package/dist/types/form-layout-block-item/react-desc-prop-types.d.ts +3 -3
- package/dist/types/form-layout-checkbox-group/react-desc-prop-types.d.ts +3 -3
- package/package.json +10 -10
- package/dist/cjs/index.d.js +0 -31
- package/dist/cjs/index.d.js.map +0 -7
- package/dist/esm/index.d.js +0 -4
- package/dist/esm/index.d.js.map +0 -7
|
@@ -63,10 +63,11 @@ const DSFormLayoutBlockItem = (props) => {
|
|
|
63
63
|
} = propsWithDefault;
|
|
64
64
|
const { className, label: globalLabel, ...othersGlobalAttributes } = globalAttributes;
|
|
65
65
|
const instanceUID = (0, import_react.useMemo)(() => inputID ?? `form_layout_block_item_${(0, import_uid.uid)(6)}`, [inputID]);
|
|
66
|
-
const containerAriaLabel = (0, import_react.useMemo)(
|
|
67
|
-
(
|
|
68
|
-
|
|
69
|
-
|
|
66
|
+
const containerAriaLabel = (0, import_react.useMemo)(() => {
|
|
67
|
+
if (validationMessage && hasError) return validationMessage;
|
|
68
|
+
if (feedbackMessage && !hasError) return feedbackMessage;
|
|
69
|
+
return "";
|
|
70
|
+
}, [validationMessage, hasError, feedbackMessage]);
|
|
70
71
|
const cols = (0, import_react.useMemo)(() => maxCharCounter !== void 0 ? ["1fr", "auto"] : ["1fr"], [maxCharCounter]);
|
|
71
72
|
const getOwnerProps = (0, import_react.useCallback)(() => propsWithDefault, [propsWithDefault]);
|
|
72
73
|
const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({}), []);
|
|
@@ -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, useCallback } 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 type { DSFormLayoutBlockItemT } from './react-desc-prop-types.js';\nimport { propTypes } from './react-desc-prop-types.js';\nimport {\n StyledMessage,\n StyledLabel,\n StyledContainer,\n StyledMark,\n ScreenReaderOnly,\n StyledCharCount,\n StyledErrorMessage,\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 const containerAriaLabel = useMemo(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useCallback } 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 type { DSFormLayoutBlockItemT } from './react-desc-prop-types.js';\nimport { propTypes } from './react-desc-prop-types.js';\nimport {\n StyledMessage,\n StyledLabel,\n StyledContainer,\n StyledMark,\n ScreenReaderOnly,\n StyledCharCount,\n StyledErrorMessage,\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 const containerAriaLabel = useMemo(() => {\n if (validationMessage && hasError) return validationMessage;\n if (feedbackMessage && !hasError) return feedbackMessage;\n return '';\n }, [validationMessage, hasError, feedbackMessage]);\n\n const cols = useMemo(() => (maxCharCounter !== undefined ? ['1fr', 'auto'] : ['1fr']), [maxCharCounter]);\n\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n return (\n <StyledContainer\n leftLabel={leftLabel}\n fitContent={fitContent}\n hideLabel={hideLabel}\n withHighlight={withHighlight}\n as={isGroup ? 'fieldset' : 'div'}\n isGroup={isGroup}\n aria-label={!isGroup ? `${containerAriaLabel}` : ''}\n className={className}\n {...xstyledProps}\n {...othersGlobalAttributes}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Grid cols={cols} gutter=\"xxs\">\n {label ? (\n <StyledLabel\n id={`${instanceUID}_block_label`}\n htmlFor={instanceUID}\n leftLabel={leftLabel}\n hideLabel={hideLabel}\n aria-hidden={isGroup}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {label}\n {(required || optional) && <StyledMark required={required} />}\n </StyledLabel>\n ) : null}\n\n {maxCharCounter !== undefined && currentChar !== undefined ? (\n <StyledCharCount\n hasError={currentChar > maxCharCounter}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >{`${currentChar}/${maxCharCounter}`}</StyledCharCount>\n ) : null}\n </Grid>\n {isGroup && (\n <ScreenReaderOnly as=\"legend\">{`${label}. ${\n (hasError && validationMessage) || (!hasError && feedbackMessage) || ''\n }`}</ScreenReaderOnly>\n )}\n {children}\n {feedbackMessage && !hasError ? (\n <StyledMessage\n leftLabel={leftLabel}\n hideLabel={hideLabel}\n aria-hidden={isGroup}\n id={`${instanceUID}_feedback_message`}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {feedbackMessage}\n </StyledMessage>\n ) : (\n <ScreenReaderOnly id={`${instanceUID}_feedback_message`} />\n )}\n {validationMessage && hasError ? (\n <StyledErrorMessage\n hasError={hasError}\n leftLabel={leftLabel}\n hideLabel={hideLabel}\n role=\"alert\"\n id={`${instanceUID}_error_message`}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <AlertsSmallFill width={8} height={8} color={['danger', '900']} style={{ marginBottom: '2px' }} />\n \n {`${validationMessage}`}\n </StyledErrorMessage>\n ) : (\n <ScreenReaderOnly id={`${instanceUID}_error_message`} />\n )}\n </StyledContainer>\n );\n};\n\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/form-layout-block-item/react-desc-prop-types.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;
|
|
4
|
+
"sourcesContent": ["import type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFormLayoutBlockItemName, DSFormLayoutBlockItemSlots } from './DSFormLayoutBlockItemDefinitions.js';\nexport const defaultProps = {\n isGroup: false,\n};\n\nexport declare namespace DSFormLayoutBlockItemT {\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSFormLayoutBlockItemName,\n typeof DSFormLayoutBlockItemSlots\n > {\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 RequiredProps {\n children: React.ReactNode;\n label: string;\n }\n\n export interface Props\n extends OptionalProps,\n RequiredProps,\n Partial<DefaultProps>,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof OptionalProps | keyof RequiredProps | keyof DefaultProps>,\n XstyledProps {}\n export interface InternalProps\n extends OptionalProps,\n RequiredProps,\n DefaultProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof OptionalProps | keyof RequiredProps | keyof DefaultProps>,\n XstyledProps {}\n}\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n ...getPropsPerSlotPropTypes(DSFormLayoutBlockItemName, DSFormLayoutBlockItemSlots),\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 ValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAEP,8CAAsE;AAC/D,MAAM,eAAe;AAAA,EAC1B,SAAS;AACX;AA8CO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAG,kDAAyB,mEAA2B,kEAA0B;AAAA,EACjF,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
|
}
|
|
@@ -132,13 +132,21 @@ const StyledMark = (0, import_ds_system.styled)("span", {
|
|
|
132
132
|
name: import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemName,
|
|
133
133
|
slot: import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemSlots.MARK
|
|
134
134
|
})`
|
|
135
|
-
width: 6px;
|
|
136
|
-
height: 6px;
|
|
137
|
-
border-radius: 50%;
|
|
138
135
|
margin-left: ${({ theme }) => theme.space.xxxs};
|
|
139
136
|
${({ theme, required }) => required ? `
|
|
140
|
-
|
|
137
|
+
display: flex;
|
|
138
|
+
flex-direction: column;
|
|
139
|
+
justify-content: center;
|
|
140
|
+
line-height: 1rem;
|
|
141
|
+
font-size: 1.5rem;
|
|
142
|
+
:after {
|
|
143
|
+
content: '*';
|
|
144
|
+
color: ${theme.colors.danger[900]};
|
|
145
|
+
}
|
|
141
146
|
` : `
|
|
147
|
+
width: 6px;
|
|
148
|
+
height: 6px;
|
|
149
|
+
border-radius: 50%;
|
|
142
150
|
border: 1px solid ${theme.colors.brand[600]};
|
|
143
151
|
`}
|
|
144
152
|
`;
|
|
@@ -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, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSFormLayoutBlockItemSlots, DSFormLayoutBlockItemName } from './DSFormLayoutBlockItemDefinitions.js';\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', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.CONTAINER,\n})<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', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.LABEL,\n})<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`;\n\nconst messageCss = css<DSFormLayoutBlockItemStyledMessageT>`\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n line-height: 1.231rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n line-height: 1rem;\n }\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 StyledMessage = styled('div', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.MESSAGE,\n})<DSFormLayoutBlockItemStyledMessageT>`\n ${messageCss}\n`;\n\nexport const StyledErrorMessage = styled('div', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.ERROR_MESSAGE,\n})<DSFormLayoutBlockItemStyledMessageT>`\n ${messageCss}\n`;\n\nexport const StyledMark = styled('span', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.MARK,\n})<DSFormLayoutBlockItemStyledMarkT>`\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAChD,8CAAsE;
|
|
4
|
+
"sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSFormLayoutBlockItemSlots, DSFormLayoutBlockItemName } from './DSFormLayoutBlockItemDefinitions.js';\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}\n\nexport const StyledContainer = styled('div', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.CONTAINER,\n})<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`;\n\nexport const StyledLabel = styled('label', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.LABEL,\n})<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`;\n\nconst messageCss = css<DSFormLayoutBlockItemStyledMessageT>`\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n line-height: 1.231rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n line-height: 1rem;\n }\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`;\n\nexport const StyledMessage = styled('div', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.MESSAGE,\n})<DSFormLayoutBlockItemStyledMessageT>`\n ${messageCss}\n`;\n\nexport const StyledErrorMessage = styled('div', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.ERROR_MESSAGE,\n})<DSFormLayoutBlockItemStyledMessageT>`\n ${messageCss}\n`;\n\nexport const StyledMark = styled('span', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.MARK,\n})<DSFormLayoutBlockItemStyledMarkT>`\n margin-left: ${({ theme }) => theme.space.xxxs};\n ${({ theme, required }) =>\n required\n ? `\n display: flex;\n flex-direction: column;\n justify-content: center;\n line-height: 1rem;\n font-size: 1.5rem;\n :after {\n content: '*';\n color: ${theme.colors.danger[900]};\n }\n `\n : `\n width: 6px;\n height: 6px;\n border-radius: 50%;\n border: 1px solid ${theme.colors.brand[600]};\n `}\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`;\n\nexport const StyledCharCount = styled('span', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.COUNTER,\n})<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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/form-layout-checkbox-group/react-desc-prop-types.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\nimport type {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\ntype DirectionsT = 'horizontal' | 'vertical';\n\nexport declare namespace DSFormLayoutCheckboxGroupT {\n export interface RequiredProps {\n children: React.ReactNode;\n }\n\n export interface DefaultProps {\n direction: DirectionsT;\n }\n\n export interface OptionalProps {}\n\n export interface Props\n extends OptionalProps,\n RequiredProps,\n Partial<DefaultProps>,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof OptionalProps | keyof RequiredProps | keyof DefaultProps>,\n XstyledProps {}\n export interface InternalProps\n extends OptionalProps,\n RequiredProps,\n DefaultProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof OptionalProps | keyof RequiredProps | keyof DefaultProps>,\n XstyledProps {}\n}\n\nexport const defaultProps: DSFormLayoutCheckboxGroupT.DefaultProps = {\n direction: 'horizontal',\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n direction: PropTypes.oneOf(['horizontal', 'vertical']).description('Set direction for the checkbox group.'),\n children: PropTypes.node.isRequired.description('The content of the component.'),\n} as ValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AA6BhE,MAAM,eAAwD;AAAA,EACnE,WAAW;AACb;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,kCAAU,MAAM,CAAC,cAAc,UAAU,CAAC,EAAE,YAAY,uCAAuC;AAAA,EAC1G,UAAU,kCAAU,KAAK,WAAW,YAAY,+BAA+B;AACjF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,7 +25,7 @@ var React = __toESM(require("react"));
|
|
|
25
25
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
26
|
var import__ = require("../index.js");
|
|
27
27
|
const testRequiredProps = {
|
|
28
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
28
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
|
|
29
29
|
};
|
|
30
30
|
const testOptionalProps = {};
|
|
31
31
|
const testPartialDefaults = {};
|
|
@@ -55,17 +55,17 @@ const testInternalPropsAsSyntax = {
|
|
|
55
55
|
const testExplicitDefinition = {
|
|
56
56
|
direction: "horizontal",
|
|
57
57
|
id: "id-1",
|
|
58
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
58
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
|
|
59
59
|
};
|
|
60
60
|
const testInferedTypeCompatibility = {
|
|
61
61
|
direction: "horizontal",
|
|
62
62
|
id: "id-1",
|
|
63
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
63
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
|
|
64
64
|
};
|
|
65
65
|
const testDefinitionAsConst = {
|
|
66
66
|
direction: "horizontal",
|
|
67
67
|
id: "id-1",
|
|
68
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
68
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
|
|
69
69
|
};
|
|
70
70
|
const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
71
71
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSFormLayoutCheckboxGroup, { ...testExplicitDefinition }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-checkbox-group-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSFormLayoutCheckboxGroup } from '../index.js';\nimport type { DSFormLayoutCheckboxGroupT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSFormLayoutCheckboxGroupT.Props;\ntype ComponentPropsInternals = DSFormLayoutCheckboxGroupT.InternalProps;\ntype ComponentPropsDefaultProps = DSFormLayoutCheckboxGroupT.DefaultProps;\ntype ComponentPropsOptionalProps = DSFormLayoutCheckboxGroupT.OptionalProps;\ntype ComponentPropsRequiredProps = DSFormLayoutCheckboxGroupT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n children:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACYX;AAXZ,eAA0C;AAU1C,MAAM,oBAAiD;AAAA,EACrD,UAAU,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSFormLayoutCheckboxGroup } from '../index.js';\nimport type { DSFormLayoutCheckboxGroupT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSFormLayoutCheckboxGroupT.Props;\ntype ComponentPropsInternals = DSFormLayoutCheckboxGroupT.InternalProps;\ntype ComponentPropsDefaultProps = DSFormLayoutCheckboxGroupT.DefaultProps;\ntype ComponentPropsOptionalProps = DSFormLayoutCheckboxGroupT.OptionalProps;\ntype ComponentPropsRequiredProps = DSFormLayoutCheckboxGroupT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n children: <div></div>,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n direction: 'vertical',\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n direction: 'horizontal',\n id: 'id-1',\n children: <div></div>,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n direction: 'horizontal',\n id: 'id-1',\n children: <div></div>,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n direction: 'horizontal',\n id: 'id-1',\n children: <div></div>,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSFormLayoutCheckboxGroup {...testExplicitDefinition} />\n <DSFormLayoutCheckboxGroup {...testInferedTypeCompatibility} />\n <DSFormLayoutCheckboxGroup {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSFormLayoutCheckboxGroup direction=\"vertical\">\n <div></div>\n <div></div>\n </DSFormLayoutCheckboxGroup>\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACYX;AAXZ,eAA0C;AAU1C,MAAM,oBAAiD;AAAA,EACrD,UAAU,4CAAC,SAAI;AACjB;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D,CAAC;AAClE,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,WAAW;AACb;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,UAAU,4CAAC,SAAI;AACjB;AAGA,MAAM,+BAA+B;AAAA,EACnC,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,UAAU,4CAAC,SAAI;AACjB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,UAAU,4CAAC,SAAI;AACjB;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,sCAA2B,GAAG,wBAAwB;AAAA,EACvD,4CAAC,sCAA2B,GAAG,8BAA8B;AAAA,EAC7D,4CAAC,sCAA2B,GAAG,uBAAuB;AAAA,EAEtD,6CAAC,sCAA0B,WAAU,YACnC;AAAA,gDAAC,SAAI;AAAA,IACL,4CAAC,SAAI;AAAA,KACP;AAAA,GACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,10 +37,11 @@ const DSFormLayoutBlockItem = (props) => {
|
|
|
37
37
|
} = propsWithDefault;
|
|
38
38
|
const { className, label: globalLabel, ...othersGlobalAttributes } = globalAttributes;
|
|
39
39
|
const instanceUID = useMemo(() => inputID ?? `form_layout_block_item_${uid(6)}`, [inputID]);
|
|
40
|
-
const containerAriaLabel = useMemo(
|
|
41
|
-
(
|
|
42
|
-
|
|
43
|
-
|
|
40
|
+
const containerAriaLabel = useMemo(() => {
|
|
41
|
+
if (validationMessage && hasError) return validationMessage;
|
|
42
|
+
if (feedbackMessage && !hasError) return feedbackMessage;
|
|
43
|
+
return "";
|
|
44
|
+
}, [validationMessage, hasError, feedbackMessage]);
|
|
44
45
|
const cols = useMemo(() => maxCharCounter !== void 0 ? ["1fr", "auto"] : ["1fr"], [maxCharCounter]);
|
|
45
46
|
const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);
|
|
46
47
|
const getOwnerPropsArguments = useCallback(() => ({}), []);
|
|
@@ -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, useCallback } 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 type { DSFormLayoutBlockItemT } from './react-desc-prop-types.js';\nimport { propTypes } from './react-desc-prop-types.js';\nimport {\n StyledMessage,\n StyledLabel,\n StyledContainer,\n StyledMark,\n ScreenReaderOnly,\n StyledCharCount,\n StyledErrorMessage,\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 const containerAriaLabel = useMemo(
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useCallback } 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 type { DSFormLayoutBlockItemT } from './react-desc-prop-types.js';\nimport { propTypes } from './react-desc-prop-types.js';\nimport {\n StyledMessage,\n StyledLabel,\n StyledContainer,\n StyledMark,\n ScreenReaderOnly,\n StyledCharCount,\n StyledErrorMessage,\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 const containerAriaLabel = useMemo(() => {\n if (validationMessage && hasError) return validationMessage;\n if (feedbackMessage && !hasError) return feedbackMessage;\n return '';\n }, [validationMessage, hasError, feedbackMessage]);\n\n const cols = useMemo(() => (maxCharCounter !== undefined ? ['1fr', 'auto'] : ['1fr']), [maxCharCounter]);\n\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n return (\n <StyledContainer\n leftLabel={leftLabel}\n fitContent={fitContent}\n hideLabel={hideLabel}\n withHighlight={withHighlight}\n as={isGroup ? 'fieldset' : 'div'}\n isGroup={isGroup}\n aria-label={!isGroup ? `${containerAriaLabel}` : ''}\n className={className}\n {...xstyledProps}\n {...othersGlobalAttributes}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Grid cols={cols} gutter=\"xxs\">\n {label ? (\n <StyledLabel\n id={`${instanceUID}_block_label`}\n htmlFor={instanceUID}\n leftLabel={leftLabel}\n hideLabel={hideLabel}\n aria-hidden={isGroup}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {label}\n {(required || optional) && <StyledMark required={required} />}\n </StyledLabel>\n ) : null}\n\n {maxCharCounter !== undefined && currentChar !== undefined ? (\n <StyledCharCount\n hasError={currentChar > maxCharCounter}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >{`${currentChar}/${maxCharCounter}`}</StyledCharCount>\n ) : null}\n </Grid>\n {isGroup && (\n <ScreenReaderOnly as=\"legend\">{`${label}. ${\n (hasError && validationMessage) || (!hasError && feedbackMessage) || ''\n }`}</ScreenReaderOnly>\n )}\n {children}\n {feedbackMessage && !hasError ? (\n <StyledMessage\n leftLabel={leftLabel}\n hideLabel={hideLabel}\n aria-hidden={isGroup}\n id={`${instanceUID}_feedback_message`}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {feedbackMessage}\n </StyledMessage>\n ) : (\n <ScreenReaderOnly id={`${instanceUID}_feedback_message`} />\n )}\n {validationMessage && hasError ? (\n <StyledErrorMessage\n hasError={hasError}\n leftLabel={leftLabel}\n hideLabel={hideLabel}\n role=\"alert\"\n id={`${instanceUID}_error_message`}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <AlertsSmallFill width={8} height={8} color={['danger', '900']} style={{ marginBottom: '2px' }} />\n \n {`${validationMessage}`}\n </StyledErrorMessage>\n ) : (\n <ScreenReaderOnly id={`${instanceUID}_error_message`} />\n )}\n </StyledContainer>\n );\n};\n\nDSFormLayoutBlockItem.displayName = 'DSFormLayoutBlockItem';\nconst DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);\nDSFormLayoutBlockItemWithSchema.propTypes = propTypes;\n\nexport { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
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/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFormLayoutBlockItemName, DSFormLayoutBlockItemSlots } from './DSFormLayoutBlockItemDefinitions.js';\nexport const defaultProps = {\n isGroup: false,\n};\n\nexport declare namespace DSFormLayoutBlockItemT {\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSFormLayoutBlockItemName,\n typeof DSFormLayoutBlockItemSlots\n > {\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 RequiredProps {\n children: React.ReactNode;\n label: string;\n }\n\n export interface Props\n extends OptionalProps,\n RequiredProps,\n Partial<DefaultProps>,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof OptionalProps | keyof RequiredProps | keyof DefaultProps>,\n XstyledProps {}\n export interface InternalProps\n extends OptionalProps,\n RequiredProps,\n DefaultProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof OptionalProps | keyof RequiredProps | keyof DefaultProps>,\n XstyledProps {}\n}\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n ...getPropsPerSlotPropTypes(DSFormLayoutBlockItemName, DSFormLayoutBlockItemSlots),\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 ValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,2BAA2B,kCAAkC;AAC/D,MAAM,eAAe;AAAA,EAC1B,SAAS;AACX;AA8CO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG,yBAAyB,2BAA2B,0BAA0B;AAAA,EACjF,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
|
}
|
|
@@ -93,13 +93,21 @@ const StyledMark = styled("span", {
|
|
|
93
93
|
name: DSFormLayoutBlockItemName,
|
|
94
94
|
slot: DSFormLayoutBlockItemSlots.MARK
|
|
95
95
|
})`
|
|
96
|
-
width: 6px;
|
|
97
|
-
height: 6px;
|
|
98
|
-
border-radius: 50%;
|
|
99
96
|
margin-left: ${({ theme }) => theme.space.xxxs};
|
|
100
97
|
${({ theme, required }) => required ? `
|
|
101
|
-
|
|
98
|
+
display: flex;
|
|
99
|
+
flex-direction: column;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
line-height: 1rem;
|
|
102
|
+
font-size: 1.5rem;
|
|
103
|
+
:after {
|
|
104
|
+
content: '*';
|
|
105
|
+
color: ${theme.colors.danger[900]};
|
|
106
|
+
}
|
|
102
107
|
` : `
|
|
108
|
+
width: 6px;
|
|
109
|
+
height: 6px;
|
|
110
|
+
border-radius: 50%;
|
|
103
111
|
border: 1px solid ${theme.colors.brand[600]};
|
|
104
112
|
`}
|
|
105
113
|
`;
|
|
@@ -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, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSFormLayoutBlockItemSlots, DSFormLayoutBlockItemName } from './DSFormLayoutBlockItemDefinitions.js';\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', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.CONTAINER,\n})<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', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.LABEL,\n})<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`;\n\nconst messageCss = css<DSFormLayoutBlockItemStyledMessageT>`\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n line-height: 1.231rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n line-height: 1rem;\n }\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 StyledMessage = styled('div', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.MESSAGE,\n})<DSFormLayoutBlockItemStyledMessageT>`\n ${messageCss}\n`;\n\nexport const StyledErrorMessage = styled('div', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.ERROR_MESSAGE,\n})<DSFormLayoutBlockItemStyledMessageT>`\n ${messageCss}\n`;\n\nexport const StyledMark = styled('span', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.MARK,\n})<DSFormLayoutBlockItemStyledMarkT>`\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,4BAA4B,iCAAiC;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSFormLayoutBlockItemSlots, DSFormLayoutBlockItemName } from './DSFormLayoutBlockItemDefinitions.js';\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}\n\nexport const StyledContainer = styled('div', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.CONTAINER,\n})<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`;\n\nexport const StyledLabel = styled('label', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.LABEL,\n})<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`;\n\nconst messageCss = css<DSFormLayoutBlockItemStyledMessageT>`\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n line-height: 1.231rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n line-height: 1rem;\n }\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`;\n\nexport const StyledMessage = styled('div', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.MESSAGE,\n})<DSFormLayoutBlockItemStyledMessageT>`\n ${messageCss}\n`;\n\nexport const StyledErrorMessage = styled('div', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.ERROR_MESSAGE,\n})<DSFormLayoutBlockItemStyledMessageT>`\n ${messageCss}\n`;\n\nexport const StyledMark = styled('span', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.MARK,\n})<DSFormLayoutBlockItemStyledMarkT>`\n margin-left: ${({ theme }) => theme.space.xxxs};\n ${({ theme, required }) =>\n required\n ? `\n display: flex;\n flex-direction: column;\n justify-content: center;\n line-height: 1rem;\n font-size: 1.5rem;\n :after {\n content: '*';\n color: ${theme.colors.danger[900]};\n }\n `\n : `\n width: 6px;\n height: 6px;\n border-radius: 50%;\n border: 1px solid ${theme.colors.brand[600]};\n `}\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`;\n\nexport const StyledCharCount = styled('span', {\n name: DSFormLayoutBlockItemName,\n slot: DSFormLayoutBlockItemSlots.COUNTER,\n})<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": "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",
|
|
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-checkbox-group/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\nimport type {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\ntype DirectionsT = 'horizontal' | 'vertical';\n\nexport declare namespace DSFormLayoutCheckboxGroupT {\n export interface RequiredProps {\n children: React.ReactNode;\n }\n\n export interface DefaultProps {\n direction: DirectionsT;\n }\n\n export interface OptionalProps {}\n\n export interface Props\n extends OptionalProps,\n RequiredProps,\n Partial<DefaultProps>,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof OptionalProps | keyof RequiredProps | keyof DefaultProps>,\n XstyledProps {}\n export interface InternalProps\n extends OptionalProps,\n RequiredProps,\n DefaultProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof OptionalProps | keyof RequiredProps | keyof DefaultProps>,\n XstyledProps {}\n}\n\nexport const defaultProps: DSFormLayoutCheckboxGroupT.DefaultProps = {\n direction: 'horizontal',\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n direction: PropTypes.oneOf(['horizontal', 'vertical']).description('Set direction for the checkbox group.'),\n children: PropTypes.node.isRequired.description('The content of the component.'),\n} as ValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AA6BhE,MAAM,eAAwD;AAAA,EACnE,WAAW;AACb;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,UAAU,MAAM,CAAC,cAAc,UAAU,CAAC,EAAE,YAAY,uCAAuC;AAAA,EAC1G,UAAU,UAAU,KAAK,WAAW,YAAY,+BAA+B;AACjF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,7 +2,7 @@ import * as React from "react";
|
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { DSFormLayoutCheckboxGroup } from "../index.js";
|
|
4
4
|
const testRequiredProps = {
|
|
5
|
-
children: /* @__PURE__ */ jsx(
|
|
5
|
+
children: /* @__PURE__ */ jsx("div", {})
|
|
6
6
|
};
|
|
7
7
|
const testOptionalProps = {};
|
|
8
8
|
const testPartialDefaults = {};
|
|
@@ -32,17 +32,17 @@ const testInternalPropsAsSyntax = {
|
|
|
32
32
|
const testExplicitDefinition = {
|
|
33
33
|
direction: "horizontal",
|
|
34
34
|
id: "id-1",
|
|
35
|
-
children: /* @__PURE__ */ jsx(
|
|
35
|
+
children: /* @__PURE__ */ jsx("div", {})
|
|
36
36
|
};
|
|
37
37
|
const testInferedTypeCompatibility = {
|
|
38
38
|
direction: "horizontal",
|
|
39
39
|
id: "id-1",
|
|
40
|
-
children: /* @__PURE__ */ jsx(
|
|
40
|
+
children: /* @__PURE__ */ jsx("div", {})
|
|
41
41
|
};
|
|
42
42
|
const testDefinitionAsConst = {
|
|
43
43
|
direction: "horizontal",
|
|
44
44
|
id: "id-1",
|
|
45
|
-
children: /* @__PURE__ */ jsx(
|
|
45
|
+
children: /* @__PURE__ */ jsx("div", {})
|
|
46
46
|
};
|
|
47
47
|
const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
48
48
|
/* @__PURE__ */ jsx(DSFormLayoutCheckboxGroup, { ...testExplicitDefinition }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-checkbox-group-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSFormLayoutCheckboxGroup } from '../index.js';\nimport type { DSFormLayoutCheckboxGroupT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSFormLayoutCheckboxGroupT.Props;\ntype ComponentPropsInternals = DSFormLayoutCheckboxGroupT.InternalProps;\ntype ComponentPropsDefaultProps = DSFormLayoutCheckboxGroupT.DefaultProps;\ntype ComponentPropsOptionalProps = DSFormLayoutCheckboxGroupT.OptionalProps;\ntype ComponentPropsRequiredProps = DSFormLayoutCheckboxGroupT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n children:
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACYX,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSFormLayoutCheckboxGroup } from '../index.js';\nimport type { DSFormLayoutCheckboxGroupT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSFormLayoutCheckboxGroupT.Props;\ntype ComponentPropsInternals = DSFormLayoutCheckboxGroupT.InternalProps;\ntype ComponentPropsDefaultProps = DSFormLayoutCheckboxGroupT.DefaultProps;\ntype ComponentPropsOptionalProps = DSFormLayoutCheckboxGroupT.OptionalProps;\ntype ComponentPropsRequiredProps = DSFormLayoutCheckboxGroupT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n children: <div></div>,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n direction: 'vertical',\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n direction: 'horizontal',\n id: 'id-1',\n children: <div></div>,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n direction: 'horizontal',\n id: 'id-1',\n children: <div></div>,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n direction: 'horizontal',\n id: 'id-1',\n children: <div></div>,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSFormLayoutCheckboxGroup {...testExplicitDefinition} />\n <DSFormLayoutCheckboxGroup {...testInferedTypeCompatibility} />\n <DSFormLayoutCheckboxGroup {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSFormLayoutCheckboxGroup direction=\"vertical\">\n <div></div>\n <div></div>\n </DSFormLayoutCheckboxGroup>\n </>\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACYX,SAqDV,UArDU,KA2DR,YA3DQ;AAXZ,SAAS,iCAAiC;AAU1C,MAAM,oBAAiD;AAAA,EACrD,UAAU,oBAAC,SAAI;AACjB;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D,CAAC;AAClE,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,WAAW;AACb;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,UAAU,oBAAC,SAAI;AACjB;AAGA,MAAM,+BAA+B;AAAA,EACnC,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,UAAU,oBAAC,SAAI;AACjB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,UAAU,oBAAC,SAAI;AACjB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,6BAA2B,GAAG,wBAAwB;AAAA,EACvD,oBAAC,6BAA2B,GAAG,8BAA8B;AAAA,EAC7D,oBAAC,6BAA2B,GAAG,uBAAuB;AAAA,EAEtD,qBAAC,6BAA0B,WAAU,YACnC;AAAA,wBAAC,SAAI;AAAA,IACL,oBAAC,SAAI;AAAA,KACP;AAAA,GACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import type {
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';
|
|
3
3
|
import type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
|
|
4
4
|
import { DSFormLayoutBlockItemName, DSFormLayoutBlockItemSlots } from './DSFormLayoutBlockItemDefinitions.js';
|
|
5
5
|
export declare const defaultProps: {
|
|
@@ -33,4 +33,4 @@ export declare namespace DSFormLayoutBlockItemT {
|
|
|
33
33
|
interface InternalProps extends OptionalProps, RequiredProps, DefaultProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof OptionalProps | keyof RequiredProps | keyof DefaultProps>, XstyledProps {
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
|
-
export declare const propTypes:
|
|
36
|
+
export declare const propTypes: ValidationMap<unknown>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';
|
|
3
3
|
type DirectionsT = 'horizontal' | 'vertical';
|
|
4
4
|
export declare namespace DSFormLayoutCheckboxGroupT {
|
|
5
5
|
interface RequiredProps {
|
|
@@ -16,5 +16,5 @@ export declare namespace DSFormLayoutCheckboxGroupT {
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
export declare const defaultProps: DSFormLayoutCheckboxGroupT.DefaultProps;
|
|
19
|
-
export declare const propTypes:
|
|
19
|
+
export declare const propTypes: ValidationMap<unknown>;
|
|
20
20
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-layout-blocks",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.46.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Form Layout",
|
|
6
6
|
"files": [
|
|
@@ -77,19 +77,19 @@
|
|
|
77
77
|
},
|
|
78
78
|
"dependencies": {
|
|
79
79
|
"uid": "~2.0.1",
|
|
80
|
-
"@elliemae/ds-grid": "3.
|
|
81
|
-
"@elliemae/ds-
|
|
82
|
-
"@elliemae/ds-
|
|
83
|
-
"@elliemae/ds-
|
|
84
|
-
"@elliemae/ds-
|
|
80
|
+
"@elliemae/ds-grid": "3.46.0-rc.1",
|
|
81
|
+
"@elliemae/ds-props-helpers": "3.46.0-rc.1",
|
|
82
|
+
"@elliemae/ds-system": "3.46.0-rc.1",
|
|
83
|
+
"@elliemae/ds-typescript-helpers": "3.46.0-rc.1",
|
|
84
|
+
"@elliemae/ds-icons": "3.46.0-rc.1"
|
|
85
85
|
},
|
|
86
86
|
"devDependencies": {
|
|
87
87
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
88
88
|
"styled-components": "~5.3.9",
|
|
89
|
-
"@elliemae/ds-form-
|
|
90
|
-
"@elliemae/ds-form-input-text": "3.
|
|
91
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
92
|
-
"@elliemae/ds-form-
|
|
89
|
+
"@elliemae/ds-form-checkbox": "3.46.0-rc.1",
|
|
90
|
+
"@elliemae/ds-form-input-text": "3.46.0-rc.1",
|
|
91
|
+
"@elliemae/ds-monorepo-devops": "3.46.0-rc.1",
|
|
92
|
+
"@elliemae/ds-form-radio": "3.46.0-rc.1"
|
|
93
93
|
},
|
|
94
94
|
"peerDependencies": {
|
|
95
95
|
"react": "~17.0.2",
|
package/dist/cjs/index.d.js
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __copyProps = (to, from, except, desc) => {
|
|
9
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
-
for (let key of __getOwnPropNames(from))
|
|
11
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
12
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
-
}
|
|
14
|
-
return to;
|
|
15
|
-
};
|
|
16
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
17
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
18
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
19
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
20
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
21
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
22
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
23
|
-
mod
|
|
24
|
-
));
|
|
25
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
26
|
-
var index_d_exports = {};
|
|
27
|
-
module.exports = __toCommonJS(index_d_exports);
|
|
28
|
-
var React = __toESM(require("react"));
|
|
29
|
-
__reExport(index_d_exports, require("./form-layout-block-item/index.d"), module.exports);
|
|
30
|
-
__reExport(index_d_exports, require("./form-layout-checkbox-group/index.d"), module.exports);
|
|
31
|
-
//# sourceMappingURL=index.d.js.map
|
package/dist/cjs/index.d.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/index.d.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './form-layout-block-item/index.d'\nexport * from './form-layout-checkbox-group/index.d'", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,4BAAc,6CAAd;AACA,4BAAc,iDADd;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/index.d.js
DELETED
package/dist/esm/index.d.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.d.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './form-layout-block-item/index.d'\nexport * from './form-layout-checkbox-group/index.d'"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|