@elliemae/ds-form 3.16.0-next.4 → 3.16.0-next.6
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/DateInputV2/components/DateInputs.js +2 -0
- package/dist/cjs/DateInputV2/components/DateInputs.js.map +2 -2
- package/dist/cjs/FormItem/DSFormItemLayout.js +1 -0
- package/dist/cjs/FormItem/DSFormItemLayout.js.map +2 -2
- package/dist/cjs/InputGroup/DSInputGroup.js +16 -12
- package/dist/cjs/InputGroup/DSInputGroup.js.map +2 -2
- package/dist/cjs/InputMask/DSInputMask.js +2 -0
- package/dist/cjs/InputMask/DSInputMask.js.map +2 -2
- package/dist/cjs/InputProtected/DSInputProtected.js +2 -0
- package/dist/cjs/InputProtected/DSInputProtected.js.map +2 -2
- package/dist/cjs/LargeInputText/DSLargeInputText.js +2 -0
- package/dist/cjs/LargeInputText/DSLargeInputText.js.map +2 -2
- package/dist/cjs/Radio/DSRadio.js +2 -0
- package/dist/cjs/Radio/DSRadio.js.map +2 -2
- package/dist/cjs/Toggle/DSToggle.js +20 -16
- package/dist/cjs/Toggle/DSToggle.js.map +2 -2
- package/dist/esm/DateInputV2/components/DateInputs.js +2 -0
- package/dist/esm/DateInputV2/components/DateInputs.js.map +2 -2
- package/dist/esm/FormItem/DSFormItemLayout.js +2 -1
- package/dist/esm/FormItem/DSFormItemLayout.js.map +2 -2
- package/dist/esm/InputGroup/DSInputGroup.js +16 -12
- package/dist/esm/InputGroup/DSInputGroup.js.map +2 -2
- package/dist/esm/InputMask/DSInputMask.js +2 -0
- package/dist/esm/InputMask/DSInputMask.js.map +2 -2
- package/dist/esm/InputProtected/DSInputProtected.js +2 -0
- package/dist/esm/InputProtected/DSInputProtected.js.map +2 -2
- package/dist/esm/LargeInputText/DSLargeInputText.js +2 -0
- package/dist/esm/LargeInputText/DSLargeInputText.js.map +2 -2
- package/dist/esm/Radio/DSRadio.js +2 -0
- package/dist/esm/Radio/DSRadio.js.map +2 -2
- package/dist/esm/Toggle/DSToggle.js +20 -16
- package/dist/esm/Toggle/DSToggle.js.map +2 -2
- package/package.json +13 -13
- package/dist/cjs/package.json +0 -7
- package/dist/esm/package.json +0 -7
|
@@ -32,12 +32,14 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
32
32
|
var import_react = require("react");
|
|
33
33
|
var import_react2 = __toESM(require("react"));
|
|
34
34
|
var import_moment = __toESM(require("moment"));
|
|
35
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
35
36
|
var import_utils = require("./utils");
|
|
36
37
|
var import_helpers = require("./helpers");
|
|
37
38
|
var import_styled = require("./styled");
|
|
38
39
|
var import_propsTypes = require("./propsTypes");
|
|
39
40
|
const FORMAT = "MMDDYYYY";
|
|
40
41
|
const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown, time, tabIndex, innerRef }) => {
|
|
42
|
+
(0, import_ds_utilities.useDeprecateComponent)({ componentName: "ds-form/DateInputV2", version: "3.x Date: 2023 Q1" });
|
|
41
43
|
const [month, setMonth] = (0, import_react2.useState)("");
|
|
42
44
|
const [day, setDay] = (0, import_react2.useState)("");
|
|
43
45
|
const [year, setYear] = (0, import_react2.useState)("");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/DateInputV2/components/DateInputs.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useState, useEffect } from 'react';\nimport moment from 'moment';\nimport {\n commonInputProps,\n triggerOnBlur,\n focusNextInput,\n getFormattedDay,\n getShouldShortcircuitDay,\n getFormattedMonth,\n getShouldShortcircuitMonth,\n getFormattedYear,\n} from './utils';\nimport { onKeyDownHelper } from './helpers';\nimport { DateInputDivider, DateInputWrapper, DateInputInput, DateInputFluidContainer } from './styled';\nimport { DateInputsPropTypes } from './propsTypes';\n\nconst FORMAT = 'MMDDYYYY';\n\nexport const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown, time, tabIndex, innerRef }) => {\n const [month, setMonth] = useState('');\n const [day, setDay] = useState('');\n const [year, setYear] = useState('');\n const [onChangeDateTrigger, setOnChangeDateTrigger] = useState({});\n const dayRef = React.useRef<HTMLInputElement>();\n const [haveInputsOnChangeTriggered, setHaveInputsOnChangeTriggered] = useState(false);\n\n let digits = 2;\n let placeholder = '';\n\n const handleFluidClick = React.useCallback(\n (e: React.MouseEvent<Element, MouseEvent>) => {\n if (!(e.target as HTMLInputElement).type && dayRef.current) {\n dayRef.current.focus();\n }\n },\n [dayRef.current],\n );\n\n const triggerOnDateChange = React.useCallback(() => {\n if (month && day && year && haveInputsOnChangeTriggered) {\n const momentValue = moment(`${month}${day}${year}`, 'MMDDYYYY', true);\n if (momentValue.isValid()) {\n onDateChange(momentValue);\n }\n setHaveInputsOnChangeTriggered(false);\n }\n }, [day, month, year, haveInputsOnChangeTriggered]);\n\n // isArrowChange is coming from the onKeyDown handler in helpers\n const onMonthChange = React.useCallback((e, isArrowChange) => {\n const value = getFormattedMonth(e.target.value);\n const shouldAdvance = getShouldShortcircuitMonth(e.target.value);\n setMonth(value);\n setHaveInputsOnChangeTriggered(true);\n if (e.target.value.length > 1 || shouldAdvance) {\n if (!isArrowChange) focusNextInput(e.target);\n setOnChangeDateTrigger({});\n }\n }, []);\n\n // isArrowChange is coming from the onKeyDown handler in helpers\n const onDayChange = React.useCallback((e, isArrowChange) => {\n const value = getFormattedDay(e.target.value);\n const shouldAdvance = getShouldShortcircuitDay(e.target.value);\n setDay(value);\n setHaveInputsOnChangeTriggered(true);\n if (e.target.value.length > 1 || shouldAdvance) {\n if (!isArrowChange) focusNextInput(e.target);\n setOnChangeDateTrigger({});\n }\n }, []);\n\n const onYearChange = React.useCallback((e) => {\n const value = getFormattedYear(e.target.value);\n setYear(value);\n setHaveInputsOnChangeTriggered(true);\n setOnChangeDateTrigger({});\n }, []);\n\n useEffect(() => {\n // When component mounts haveInputsOnChangeTriggered is set to false\n // so this is not triggered on mount but is triggered with all other changes\n if (haveInputsOnChangeTriggered) {\n const momentValue = moment(`${month}${day}${year}`, FORMAT, true);\n onChange(`${month}${day}${year}`, momentValue.isValid() ? momentValue : null);\n }\n }, [day, month, year]);\n\n useEffect(() => {\n triggerOnDateChange();\n }, [onChangeDateTrigger]);\n\n useEffect(() => {\n if (time && time !== `${month}${day}${year}` && moment(time, 'MMDDYYYY').isValid()) {\n const values = String(time || '');\n if (values.slice(0, 2)) setMonth(values.slice(0, 2));\n if (values.slice(2, 4)) setDay(values.slice(2, 4));\n if (values.slice(4, 8)) setYear(values.slice(4, 8));\n } else if (!time && (month || day || year)) {\n setMonth('');\n setDay('');\n setYear('');\n }\n }, [time]);\n\n const onKeyDown = (event) =>\n onKeyDownHelper(event, {\n onDayChange,\n onMonthChange,\n onYearChange,\n });\n\n const renderMonthInput = () => {\n placeholder = 'MM';\n const onMonthInputBlur = (e) => {\n setOnChangeDateTrigger({});\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"month-input\"\n data-testid=\"month\"\n disabled={disabled}\n name=\"month\"\n onBlur={onMonthInputBlur}\n onChange={onMonthChange}\n value={month}\n tabIndex={tabIndex}\n ref={dayRef}\n />\n );\n };\n const renderDayInput = () => {\n placeholder = 'DD';\n const onDayInputBlur = (e) => {\n setOnChangeDateTrigger({});\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"day-input\"\n data-testid=\"day\"\n disabled={disabled}\n name=\"day\"\n onBlur={onDayInputBlur}\n onChange={onDayChange}\n value={day}\n tabIndex={tabIndex}\n />\n );\n };\n const renderYearInput = () => {\n placeholder = 'YY';\n digits = 4;\n const onYearInputBlur = (e) => {\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"year-input\"\n data-testid=\"year\"\n disabled={disabled}\n name=\"year\"\n onBlur={onYearInputBlur}\n onChange={onYearChange}\n value={year}\n size=\"l\"\n tabIndex={tabIndex}\n />\n );\n };\n\n const renderDateInputs = () => {\n const inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];\n const inputsWithDividers = inputs.reduce(\n (acc, input, index) => (input ? acc.concat([index ? <DateInputDivider>/</DateInputDivider> : null, input]) : acc),\n [],\n );\n\n return [\n inputsWithDividers,\n React.createElement('span', { key: 'span' }), // hack for next/prev focus\n ];\n };\n\n return (\n <DateInputFluidContainer onClick={handleFluidClick} data-testid=\"date-input-fluidContainer\">\n <DateInputWrapper\n disabled={disabled}\n ref={innerRef}\n onKeyDown={onCustomKeyDown}\n tabIndex={-1}\n cols={['auto', '6px', 'auto', '6px', 'auto']}\n >\n {renderDateInputs()}\n </DateInputWrapper>\n </DateInputFluidContainer>\n );\n};\n\nDateInputs.propTypes = DateInputsPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useState, useEffect } from 'react';\nimport moment from 'moment';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\n\nimport {\n commonInputProps,\n triggerOnBlur,\n focusNextInput,\n getFormattedDay,\n getShouldShortcircuitDay,\n getFormattedMonth,\n getShouldShortcircuitMonth,\n getFormattedYear,\n} from './utils';\nimport { onKeyDownHelper } from './helpers';\nimport { DateInputDivider, DateInputWrapper, DateInputInput, DateInputFluidContainer } from './styled';\nimport { DateInputsPropTypes } from './propsTypes';\n\nconst FORMAT = 'MMDDYYYY';\n\nexport const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown, time, tabIndex, innerRef }) => {\n useDeprecateComponent({ componentName: 'ds-form/DateInputV2', version: '3.x Date: 2023 Q1' });\n\n const [month, setMonth] = useState('');\n const [day, setDay] = useState('');\n const [year, setYear] = useState('');\n const [onChangeDateTrigger, setOnChangeDateTrigger] = useState({});\n const dayRef = React.useRef<HTMLInputElement>();\n const [haveInputsOnChangeTriggered, setHaveInputsOnChangeTriggered] = useState(false);\n\n let digits = 2;\n let placeholder = '';\n\n const handleFluidClick = React.useCallback(\n (e: React.MouseEvent<Element, MouseEvent>) => {\n if (!(e.target as HTMLInputElement).type && dayRef.current) {\n dayRef.current.focus();\n }\n },\n [dayRef.current],\n );\n\n const triggerOnDateChange = React.useCallback(() => {\n if (month && day && year && haveInputsOnChangeTriggered) {\n const momentValue = moment(`${month}${day}${year}`, 'MMDDYYYY', true);\n if (momentValue.isValid()) {\n onDateChange(momentValue);\n }\n setHaveInputsOnChangeTriggered(false);\n }\n }, [day, month, year, haveInputsOnChangeTriggered]);\n\n // isArrowChange is coming from the onKeyDown handler in helpers\n const onMonthChange = React.useCallback((e, isArrowChange) => {\n const value = getFormattedMonth(e.target.value);\n const shouldAdvance = getShouldShortcircuitMonth(e.target.value);\n setMonth(value);\n setHaveInputsOnChangeTriggered(true);\n if (e.target.value.length > 1 || shouldAdvance) {\n if (!isArrowChange) focusNextInput(e.target);\n setOnChangeDateTrigger({});\n }\n }, []);\n\n // isArrowChange is coming from the onKeyDown handler in helpers\n const onDayChange = React.useCallback((e, isArrowChange) => {\n const value = getFormattedDay(e.target.value);\n const shouldAdvance = getShouldShortcircuitDay(e.target.value);\n setDay(value);\n setHaveInputsOnChangeTriggered(true);\n if (e.target.value.length > 1 || shouldAdvance) {\n if (!isArrowChange) focusNextInput(e.target);\n setOnChangeDateTrigger({});\n }\n }, []);\n\n const onYearChange = React.useCallback((e) => {\n const value = getFormattedYear(e.target.value);\n setYear(value);\n setHaveInputsOnChangeTriggered(true);\n setOnChangeDateTrigger({});\n }, []);\n\n useEffect(() => {\n // When component mounts haveInputsOnChangeTriggered is set to false\n // so this is not triggered on mount but is triggered with all other changes\n if (haveInputsOnChangeTriggered) {\n const momentValue = moment(`${month}${day}${year}`, FORMAT, true);\n onChange(`${month}${day}${year}`, momentValue.isValid() ? momentValue : null);\n }\n }, [day, month, year]);\n\n useEffect(() => {\n triggerOnDateChange();\n }, [onChangeDateTrigger]);\n\n useEffect(() => {\n if (time && time !== `${month}${day}${year}` && moment(time, 'MMDDYYYY').isValid()) {\n const values = String(time || '');\n if (values.slice(0, 2)) setMonth(values.slice(0, 2));\n if (values.slice(2, 4)) setDay(values.slice(2, 4));\n if (values.slice(4, 8)) setYear(values.slice(4, 8));\n } else if (!time && (month || day || year)) {\n setMonth('');\n setDay('');\n setYear('');\n }\n }, [time]);\n\n const onKeyDown = (event) =>\n onKeyDownHelper(event, {\n onDayChange,\n onMonthChange,\n onYearChange,\n });\n\n const renderMonthInput = () => {\n placeholder = 'MM';\n const onMonthInputBlur = (e) => {\n setOnChangeDateTrigger({});\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"month-input\"\n data-testid=\"month\"\n disabled={disabled}\n name=\"month\"\n onBlur={onMonthInputBlur}\n onChange={onMonthChange}\n value={month}\n tabIndex={tabIndex}\n ref={dayRef}\n />\n );\n };\n const renderDayInput = () => {\n placeholder = 'DD';\n const onDayInputBlur = (e) => {\n setOnChangeDateTrigger({});\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"day-input\"\n data-testid=\"day\"\n disabled={disabled}\n name=\"day\"\n onBlur={onDayInputBlur}\n onChange={onDayChange}\n value={day}\n tabIndex={tabIndex}\n />\n );\n };\n const renderYearInput = () => {\n placeholder = 'YY';\n digits = 4;\n const onYearInputBlur = (e) => {\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"year-input\"\n data-testid=\"year\"\n disabled={disabled}\n name=\"year\"\n onBlur={onYearInputBlur}\n onChange={onYearChange}\n value={year}\n size=\"l\"\n tabIndex={tabIndex}\n />\n );\n };\n\n const renderDateInputs = () => {\n const inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];\n const inputsWithDividers = inputs.reduce(\n (acc, input, index) => (input ? acc.concat([index ? <DateInputDivider>/</DateInputDivider> : null, input]) : acc),\n [],\n );\n\n return [\n inputsWithDividers,\n React.createElement('span', { key: 'span' }), // hack for next/prev focus\n ];\n };\n\n return (\n <DateInputFluidContainer onClick={handleFluidClick} data-testid=\"date-input-fluidContainer\">\n <DateInputWrapper\n disabled={disabled}\n ref={innerRef}\n onKeyDown={onCustomKeyDown}\n tabIndex={-1}\n cols={['auto', '6px', 'auto', '6px', 'auto']}\n >\n {renderDateInputs()}\n </DateInputWrapper>\n </DateInputFluidContainer>\n );\n};\n\nDateInputs.propTypes = DateInputsPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_react", "React", "moment"]
|
|
7
7
|
}
|
|
@@ -93,6 +93,7 @@ const DSFormItemLayout = ({
|
|
|
93
93
|
containerProps,
|
|
94
94
|
...rest
|
|
95
95
|
}) => {
|
|
96
|
+
(0, import_ds_utilities.useDeprecateComponent)({ componentName: "ds-form/FormItemLayout", version: "3.x Date: 2023 Q1" });
|
|
96
97
|
const isGroup = InputComponent.type === (/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_shared.Group, {})).type;
|
|
97
98
|
const floatingLabelOverride = floatingLabel === "UNSAFE";
|
|
98
99
|
const WrapperContentComp = !isGroup ? WrapperContent : WrapperContentGroup;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/FormItem/DSFormItemLayout.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getComponentFromProps } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { Group } from '@elliemae/ds-shared';\nimport { DSInputGroup } from '../InputGroup';\nimport { DSFloatingLabelInput } from '../FloatingLabelInput';\nimport { DSError } from './Error/DSError';\nimport { props } from './props';\nimport { defaultProps } from './defaultProps';\nimport { FORMITEM_LAYOUT_VARIANTS } from './variants';\nimport { Suffix, SuffixInputWrapper, SuffixWrapper } from './Suffix/Suffix';\n// import { maskTypes } from '../InputMask/MaskTypes';\n\nexport { DSError, FORMITEM_LAYOUT_VARIANTS };\n\nconst blockName = 'form-item';\n\nconst Wrapper = aggregatedClasses('div')(blockName, null, ({ leftLabel, variant, fitContent, withHighlight }) => ({\n 'with-left-label': leftLabel,\n 'fit-content': fitContent,\n [variant]: variant,\n 'with-highlight': withHighlight,\n}));\n\nconst WrapperContent = aggregatedClasses('div')(`${blockName}-content`);\nconst WrapperContentGroup = aggregatedClasses('fieldset')(`${blockName}-content`);\n\nconst DSFormItemLayout = ({\n leftLabel,\n floatingLabel,\n name,\n id,\n value,\n inputComponent: InputComponent,\n labelComponent: LabelComponent,\n feedbackComponent: FeedbackComponent,\n labelText,\n truncateText,\n hasError,\n // orientation = 'vertical', // one of [ vertical, horizontal ]\n validationState, // one of [ success, error, warning ]\n validationMessage,\n feedbackMessage,\n readOnly,\n focused,\n type,\n autoFocus,\n disabled,\n onChange,\n onBlur,\n onFocus,\n onPaste,\n onKeyUp,\n extraInputProps,\n extraContent,\n leftAddon,\n rightAddon,\n required,\n optional,\n mask,\n useSubfix,\n suffix,\n variant,\n fitContent,\n withHighlight,\n containerProps,\n ...rest\n}) => {\n const isGroup = InputComponent.type === (<Group />).type;\n const floatingLabelOverride = floatingLabel === 'UNSAFE';\n const WrapperContentComp = !isGroup ? WrapperContent : WrapperContentGroup;\n\n // group the input props to not duplicate it inside the specific inputComponent (floating or not)\n const inputProps = {\n ...extraInputProps,\n disabled,\n hasError: hasError || validationState === 'error',\n id,\n name,\n type,\n autoFocus,\n onBlur,\n onChange,\n onFocus,\n onPaste,\n onKeyUp,\n readOnly,\n value,\n mask,\n useSubfix,\n variant,\n required,\n ...rest,\n };\n\n const renderInput = (Input) =>\n leftAddon || rightAddon ? (\n <DSInputGroup leftAddon={leftAddon} rightAddon={rightAddon} variant={variant}>\n {Input}\n </DSInputGroup>\n ) : (\n Input\n );\n\n const renderFloating = (\n <DSFloatingLabelInput\n {...inputProps}\n extraInputProps={extraInputProps}\n focused={focused}\n inputComponent={InputComponent}\n labelComponent={LabelComponent}\n labelText={labelText}\n optional={optional}\n required={required}\n variant={variant}\n />\n );\n\n const InputWithLabel = floatingLabelOverride ? (\n renderInput(renderFloating)\n ) : (\n <>\n <LabelComponent\n htmlFor={id || name}\n label={labelText}\n optional={optional}\n required={required}\n isGroup={isGroup}\n truncateText={truncateText}\n />\n {renderInput(getComponentFromProps(InputComponent, inputProps))}\n </>\n );\n\n if (suffix) {\n return (\n <Wrapper\n classProps={{\n disabled,\n readOnly,\n hasError,\n leftLabel,\n variant,\n fitContent,\n withHighlight,\n }}\n {...containerProps}\n >\n <SuffixWrapper className=\"suffix-wrapper\">\n <SuffixInputWrapper className=\"suffix-input-wrapper\">\n <WrapperContentComp>\n {InputWithLabel}\n {extraContent}\n </WrapperContentComp>\n <FeedbackComponent\n hasError={hasError}\n text={validationState || hasError ? validationMessage : feedbackMessage}\n />\n </SuffixInputWrapper>\n <Suffix\n className=\"suffix-label\"\n label={!!labelText}\n withFeedback={Boolean(validationMessage || feedbackMessage)}\n >\n {suffix}\n </Suffix>\n </SuffixWrapper>\n </Wrapper>\n );\n }\n\n return (\n <Wrapper\n classProps={{\n disabled,\n readOnly,\n hasError,\n leftLabel,\n variant,\n fitContent,\n withHighlight,\n }}\n {...containerProps}\n >\n <WrapperContentComp>\n {InputWithLabel}\n {extraContent}\n </WrapperContentComp>\n <FeedbackComponent hasError={hasError} text={validationState || hasError ? validationMessage : feedbackMessage} />\n </Wrapper>\n );\n};\n\nDSFormItemLayout.propTypes = props;\nDSFormItemLayout.defaultProps = defaultProps;\nDSFormItemLayout.displayName = 'DSFormItemLayout';\nconst DSFormItemLayoutWithSchema = describe(DSFormItemLayout);\nDSFormItemLayoutWithSchema.propTypes = props;\n\nexport default DSFormItemLayout;\nexport { DSFormItemLayoutWithSchema, DSFormItemLayout };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getComponentFromProps, useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { Group } from '@elliemae/ds-shared';\nimport { DSInputGroup } from '../InputGroup';\nimport { DSFloatingLabelInput } from '../FloatingLabelInput';\nimport { DSError } from './Error/DSError';\nimport { props } from './props';\nimport { defaultProps } from './defaultProps';\nimport { FORMITEM_LAYOUT_VARIANTS } from './variants';\nimport { Suffix, SuffixInputWrapper, SuffixWrapper } from './Suffix/Suffix';\n// import { maskTypes } from '../InputMask/MaskTypes';\n\nexport { DSError, FORMITEM_LAYOUT_VARIANTS };\n\nconst blockName = 'form-item';\n\nconst Wrapper = aggregatedClasses('div')(blockName, null, ({ leftLabel, variant, fitContent, withHighlight }) => ({\n 'with-left-label': leftLabel,\n 'fit-content': fitContent,\n [variant]: variant,\n 'with-highlight': withHighlight,\n}));\n\nconst WrapperContent = aggregatedClasses('div')(`${blockName}-content`);\nconst WrapperContentGroup = aggregatedClasses('fieldset')(`${blockName}-content`);\n\nconst DSFormItemLayout = ({\n leftLabel,\n floatingLabel,\n name,\n id,\n value,\n inputComponent: InputComponent,\n labelComponent: LabelComponent,\n feedbackComponent: FeedbackComponent,\n labelText,\n truncateText,\n hasError,\n // orientation = 'vertical', // one of [ vertical, horizontal ]\n validationState, // one of [ success, error, warning ]\n validationMessage,\n feedbackMessage,\n readOnly,\n focused,\n type,\n autoFocus,\n disabled,\n onChange,\n onBlur,\n onFocus,\n onPaste,\n onKeyUp,\n extraInputProps,\n extraContent,\n leftAddon,\n rightAddon,\n required,\n optional,\n mask,\n useSubfix,\n suffix,\n variant,\n fitContent,\n withHighlight,\n containerProps,\n ...rest\n}) => {\n useDeprecateComponent({ componentName: 'ds-form/FormItemLayout', version: '3.x Date: 2023 Q1' });\n\n const isGroup = InputComponent.type === (<Group />).type;\n const floatingLabelOverride = floatingLabel === 'UNSAFE';\n const WrapperContentComp = !isGroup ? WrapperContent : WrapperContentGroup;\n\n // group the input props to not duplicate it inside the specific inputComponent (floating or not)\n const inputProps = {\n ...extraInputProps,\n disabled,\n hasError: hasError || validationState === 'error',\n id,\n name,\n type,\n autoFocus,\n onBlur,\n onChange,\n onFocus,\n onPaste,\n onKeyUp,\n readOnly,\n value,\n mask,\n useSubfix,\n variant,\n required,\n ...rest,\n };\n\n const renderInput = (Input) =>\n leftAddon || rightAddon ? (\n <DSInputGroup leftAddon={leftAddon} rightAddon={rightAddon} variant={variant}>\n {Input}\n </DSInputGroup>\n ) : (\n Input\n );\n\n const renderFloating = (\n <DSFloatingLabelInput\n {...inputProps}\n extraInputProps={extraInputProps}\n focused={focused}\n inputComponent={InputComponent}\n labelComponent={LabelComponent}\n labelText={labelText}\n optional={optional}\n required={required}\n variant={variant}\n />\n );\n\n const InputWithLabel = floatingLabelOverride ? (\n renderInput(renderFloating)\n ) : (\n <>\n <LabelComponent\n htmlFor={id || name}\n label={labelText}\n optional={optional}\n required={required}\n isGroup={isGroup}\n truncateText={truncateText}\n />\n {renderInput(getComponentFromProps(InputComponent, inputProps))}\n </>\n );\n\n if (suffix) {\n return (\n <Wrapper\n classProps={{\n disabled,\n readOnly,\n hasError,\n leftLabel,\n variant,\n fitContent,\n withHighlight,\n }}\n {...containerProps}\n >\n <SuffixWrapper className=\"suffix-wrapper\">\n <SuffixInputWrapper className=\"suffix-input-wrapper\">\n <WrapperContentComp>\n {InputWithLabel}\n {extraContent}\n </WrapperContentComp>\n <FeedbackComponent\n hasError={hasError}\n text={validationState || hasError ? validationMessage : feedbackMessage}\n />\n </SuffixInputWrapper>\n <Suffix\n className=\"suffix-label\"\n label={!!labelText}\n withFeedback={Boolean(validationMessage || feedbackMessage)}\n >\n {suffix}\n </Suffix>\n </SuffixWrapper>\n </Wrapper>\n );\n }\n\n return (\n <Wrapper\n classProps={{\n disabled,\n readOnly,\n hasError,\n leftLabel,\n variant,\n fitContent,\n withHighlight,\n }}\n {...containerProps}\n >\n <WrapperContentComp>\n {InputWithLabel}\n {extraContent}\n </WrapperContentComp>\n <FeedbackComponent hasError={hasError} text={validationState || hasError ? validationMessage : feedbackMessage} />\n </Wrapper>\n );\n};\n\nDSFormItemLayout.propTypes = props;\nDSFormItemLayout.defaultProps = defaultProps;\nDSFormItemLayout.displayName = 'DSFormItemLayout';\nconst DSFormItemLayoutWithSchema = describe(DSFormItemLayout);\nDSFormItemLayoutWithSchema.propTypes = props;\n\nexport default DSFormItemLayout;\nexport { DSFormItemLayoutWithSchema, DSFormItemLayout };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -31,6 +31,7 @@ __export(DSInputGroup_exports, {
|
|
|
31
31
|
module.exports = __toCommonJS(DSInputGroup_exports);
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
33
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
34
35
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
35
36
|
var import_AddonWrapper = require("./AddonWrapper");
|
|
36
37
|
var import_props = require("./props");
|
|
@@ -43,18 +44,21 @@ const DSInputGroup = ({
|
|
|
43
44
|
leftAddon,
|
|
44
45
|
rightAddon,
|
|
45
46
|
children: InputComponents
|
|
46
|
-
}) =>
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
47
|
+
}) => {
|
|
48
|
+
(0, import_ds_utilities.useDeprecateComponent)({ componentName: "ds-form/InputGroup", version: "3.x Date: 2023 Q1" });
|
|
49
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
50
|
+
import_AddonWrapper.AddonWrapper,
|
|
51
|
+
{
|
|
52
|
+
ref: innerRef,
|
|
53
|
+
className,
|
|
54
|
+
containerProps,
|
|
55
|
+
leftAddon,
|
|
56
|
+
rightAddon,
|
|
57
|
+
style,
|
|
58
|
+
children: InputComponents
|
|
59
|
+
}
|
|
60
|
+
);
|
|
61
|
+
};
|
|
58
62
|
DSInputGroup.propTypes = import_props.props;
|
|
59
63
|
DSInputGroup.defaultProps = import_defaultProps.defaultProps;
|
|
60
64
|
DSInputGroup.displayName = "DSInputGroup";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/InputGroup/DSInputGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { AddonWrapper } from './AddonWrapper';\nimport { props } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst DSInputGroup = ({\n containerProps,\n innerRef,\n className,\n style,\n leftAddon,\n rightAddon,\n children: InputComponents, // as InputComponents,\n}) => (\n <AddonWrapper\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { AddonWrapper } from './AddonWrapper';\nimport { props } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst DSInputGroup = ({\n containerProps,\n innerRef,\n className,\n style,\n leftAddon,\n rightAddon,\n children: InputComponents, // as InputComponents,\n}) => {\n useDeprecateComponent({ componentName: 'ds-form/InputGroup', version: '3.x Date: 2023 Q1' });\n\n return (\n <AddonWrapper\n ref={innerRef}\n className={className}\n containerProps={containerProps}\n leftAddon={leftAddon}\n rightAddon={rightAddon}\n style={style}\n >\n {InputComponents}\n </AddonWrapper>\n );\n};\n\nDSInputGroup.propTypes = props;\nDSInputGroup.defaultProps = defaultProps;\nDSInputGroup.displayName = 'DSInputGroup';\nconst DSInputGroupWithSchema = describe(DSInputGroup);\n\nDSInputGroupWithSchema.propTypes = props;\n\nexport default DSInputGroup;\nexport { DSInputGroupWithSchema, DSInputGroup };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBnB;AAlBJ,0BAAsC;AACtC,8BAAyB;AACzB,0BAA6B;AAC7B,mBAAsB;AACtB,0BAA6B;AAE7B,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,iDAAsB,EAAE,eAAe,sBAAsB,SAAS,oBAAoB,CAAC;AAE3F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,aAAa,YAAY;AACzB,aAAa,eAAe;AAC5B,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AAEpD,uBAAuB,YAAY;AAEnC,IAAO,uBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,6 +34,7 @@ module.exports = __toCommonJS(DSInputMask_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
37
38
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
38
39
|
var import_MaskTypes = require("./MaskTypes");
|
|
39
40
|
var import_MaskPipes = require("./MaskPipes");
|
|
@@ -63,6 +64,7 @@ const DSInputMask = ({
|
|
|
63
64
|
value: valueOrEvent,
|
|
64
65
|
...rest
|
|
65
66
|
}) => {
|
|
67
|
+
(0, import_ds_utilities.useDeprecateComponent)({ componentName: "ds-form/InputMask", version: "3.x Date: 2023 Q1" });
|
|
66
68
|
const [rawValue, setRawValue] = (0, import_react.useState)(getValueFromEventOrString(valueOrEvent));
|
|
67
69
|
(0, import_react.useEffect)(() => {
|
|
68
70
|
setRawValue(getValueFromEventOrString(valueOrEvent));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/InputMask/DSInputMask.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { MASK_TYPES } from './MaskTypes';\nimport { MASK_PIPES } from './MaskPipes';\nimport { DSInputMaskDeprecated } from './DSInputMaskDeprecated';\nimport { inputProps } from './props';\nimport { defaultProps } from './defaultProps';\nimport { OutOfTheBoxMaskTypes } from './mask_types';\n\nconst isStringMask = (mask: any) => typeof mask === 'string';\n\nconst isObjectMask = (mask: any) => typeof mask === 'object' && mask.type;\n\nconst getRawMask = (mask: any, rawValue: string) => (typeof mask === 'function' ? mask(rawValue) : mask);\n\nconst getValueFromEventOrString = (e: any): string => {\n let value = e;\n if (e && e.target) {\n const {\n target: { value: eValue },\n } = e;\n value = eValue;\n }\n return value;\n};\n\nconst DSInputMask = ({\n 'aria-label': ariaLabel = 'Input Mask',\n autoFocus,\n innerRef,\n mask,\n pipe,\n value: valueOrEvent,\n ...rest\n}) => {\n const [rawValue, setRawValue] = useState(getValueFromEventOrString(valueOrEvent));\n\n useEffect(() => {\n setRawValue(getValueFromEventOrString(valueOrEvent));\n }, [valueOrEvent]);\n\n const [rawMask, setRawMask] = useState<any>(getRawMask(mask, rawValue));\n\n const [focus, setFocus] = useState(autoFocus);\n\n const [lastkey, setLastkey] = useState<{ code: number; key: string }>({\n code: null,\n key: null,\n });\n\n const [cursorPosition, setCursorPosition] = useState({ current: 0 });\n\n const handleSetMask = useCallback(\n (newValue) => {\n setRawMask(getRawMask(mask, newValue));\n },\n [mask],\n );\n\n if (!pipe && isStringMask(rawMask)) {\n return OutOfTheBoxMaskTypes[rawMask]({\n ...rest,\n 'aria-label': ariaLabel,\n innerRef,\n value: rawValue,\n focus,\n setFocus,\n setRawMask: handleSetMask,\n cursorPosition,\n setCursorPosition,\n lastkey,\n setLastkey,\n setRawValue,\n });\n }\n\n if (!pipe && isObjectMask(rawMask)) {\n // we should change rawMask.type to rawMask.maskType\n // to avoid override standard props\n return OutOfTheBoxMaskTypes[rawMask.type]({\n ...rawMask,\n ...rest,\n 'aria-label': ariaLabel,\n innerRef,\n value: rawValue,\n focus,\n setFocus,\n setRawMask: handleSetMask,\n cursorPosition,\n setCursorPosition,\n lastkey,\n setLastkey,\n setRawValue,\n });\n }\n\n const getDeprecatedMask = () => {\n if (mask === MASK_TYPES.DATE) return MASK_TYPES.DATE_DEPRECATED;\n if (mask === MASK_TYPES.DATE_TIME) return MASK_TYPES.DATE_TIME_DEPRECATED;\n return mask;\n };\n return (\n <DSInputMaskDeprecated\n {...rest}\n aria-label={ariaLabel}\n autoFocus={autoFocus}\n innerRef={innerRef}\n mask={getDeprecatedMask()}\n pipe={pipe}\n value={rawValue}\n />\n );\n};\n\nDSInputMask.propTypes = inputProps;\nDSInputMask.defaultProps = defaultProps;\nDSInputMask.displayName = 'DSInputMask';\nconst DSInputMaskWithSchema = describe(DSInputMask).description('Masking input for custom formats');\nDSInputMaskWithSchema.propTypes = inputProps;\n\nexport { MASK_TYPES, MASK_PIPES, DSInputMaskWithSchema, DSInputMask };\nexport default DSInputMask;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { MASK_TYPES } from './MaskTypes';\nimport { MASK_PIPES } from './MaskPipes';\nimport { DSInputMaskDeprecated } from './DSInputMaskDeprecated';\nimport { inputProps } from './props';\nimport { defaultProps } from './defaultProps';\nimport { OutOfTheBoxMaskTypes } from './mask_types';\n\nconst isStringMask = (mask: any) => typeof mask === 'string';\n\nconst isObjectMask = (mask: any) => typeof mask === 'object' && mask.type;\n\nconst getRawMask = (mask: any, rawValue: string) => (typeof mask === 'function' ? mask(rawValue) : mask);\n\nconst getValueFromEventOrString = (e: any): string => {\n let value = e;\n if (e && e.target) {\n const {\n target: { value: eValue },\n } = e;\n value = eValue;\n }\n return value;\n};\n\nconst DSInputMask = ({\n 'aria-label': ariaLabel = 'Input Mask',\n autoFocus,\n innerRef,\n mask,\n pipe,\n value: valueOrEvent,\n ...rest\n}) => {\n useDeprecateComponent({ componentName: 'ds-form/InputMask', version: '3.x Date: 2023 Q1' });\n\n const [rawValue, setRawValue] = useState(getValueFromEventOrString(valueOrEvent));\n\n useEffect(() => {\n setRawValue(getValueFromEventOrString(valueOrEvent));\n }, [valueOrEvent]);\n\n const [rawMask, setRawMask] = useState<any>(getRawMask(mask, rawValue));\n\n const [focus, setFocus] = useState(autoFocus);\n\n const [lastkey, setLastkey] = useState<{ code: number; key: string }>({\n code: null,\n key: null,\n });\n\n const [cursorPosition, setCursorPosition] = useState({ current: 0 });\n\n const handleSetMask = useCallback(\n (newValue) => {\n setRawMask(getRawMask(mask, newValue));\n },\n [mask],\n );\n\n if (!pipe && isStringMask(rawMask)) {\n return OutOfTheBoxMaskTypes[rawMask]({\n ...rest,\n 'aria-label': ariaLabel,\n innerRef,\n value: rawValue,\n focus,\n setFocus,\n setRawMask: handleSetMask,\n cursorPosition,\n setCursorPosition,\n lastkey,\n setLastkey,\n setRawValue,\n });\n }\n\n if (!pipe && isObjectMask(rawMask)) {\n // we should change rawMask.type to rawMask.maskType\n // to avoid override standard props\n return OutOfTheBoxMaskTypes[rawMask.type]({\n ...rawMask,\n ...rest,\n 'aria-label': ariaLabel,\n innerRef,\n value: rawValue,\n focus,\n setFocus,\n setRawMask: handleSetMask,\n cursorPosition,\n setCursorPosition,\n lastkey,\n setLastkey,\n setRawValue,\n });\n }\n\n const getDeprecatedMask = () => {\n if (mask === MASK_TYPES.DATE) return MASK_TYPES.DATE_DEPRECATED;\n if (mask === MASK_TYPES.DATE_TIME) return MASK_TYPES.DATE_TIME_DEPRECATED;\n return mask;\n };\n return (\n <DSInputMaskDeprecated\n {...rest}\n aria-label={ariaLabel}\n autoFocus={autoFocus}\n innerRef={innerRef}\n mask={getDeprecatedMask()}\n pipe={pipe}\n value={rawValue}\n />\n );\n};\n\nDSInputMask.propTypes = inputProps;\nDSInputMask.defaultProps = defaultProps;\nDSInputMask.displayName = 'DSInputMask';\nconst DSInputMaskWithSchema = describe(DSInputMask).description('Masking input for custom formats');\nDSInputMaskWithSchema.propTypes = inputProps;\n\nexport { MASK_TYPES, MASK_PIPES, DSInputMaskWithSchema, DSInputMask };\nexport default DSInputMask;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0GnB;AAzGJ,mBAAwD;AACxD,0BAAsC;AACtC,8BAAyB;AACzB,uBAA2B;AAC3B,uBAA2B;AAC3B,mCAAsC;AACtC,mBAA2B;AAC3B,0BAA6B;AAC7B,wBAAqC;AAErC,MAAM,eAAe,CAAC,SAAc,OAAO,SAAS;AAEpD,MAAM,eAAe,CAAC,SAAc,OAAO,SAAS,YAAY,KAAK;AAErE,MAAM,aAAa,CAAC,MAAW,aAAsB,OAAO,SAAS,aAAa,KAAK,QAAQ,IAAI;AAEnG,MAAM,4BAA4B,CAAC,MAAmB;AACpD,MAAI,QAAQ;AACZ,MAAI,KAAK,EAAE,QAAQ;AACjB,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO,OAAO;AAAA,IAC1B,IAAI;AACJ,YAAQ;AAAA,EACV;AACA,SAAO;AACT;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB,cAAc,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,KACJ;AACL,MAAM;AACJ,iDAAsB,EAAE,eAAe,qBAAqB,SAAS,oBAAoB,CAAC;AAE1F,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,0BAA0B,YAAY,CAAC;AAEhF,8BAAU,MAAM;AACd,gBAAY,0BAA0B,YAAY,CAAC;AAAA,EACrD,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAc,WAAW,MAAM,QAAQ,CAAC;AAEtE,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,SAAS;AAE5C,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAwC;AAAA,IACpE,MAAM;AAAA,IACN,KAAK;AAAA,EACP,CAAC;AAED,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,EAAE,SAAS,EAAE,CAAC;AAEnE,QAAM,oBAAgB;AAAA,IACpB,CAAC,aAAa;AACZ,iBAAW,WAAW,MAAM,QAAQ,CAAC;AAAA,IACvC;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,MAAI,CAAC,QAAQ,aAAa,OAAO,GAAG;AAClC,WAAO,uCAAqB,SAAS;AAAA,MACnC,GAAG;AAAA,MACH,cAAc;AAAA,MACd;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,MAAI,CAAC,QAAQ,aAAa,OAAO,GAAG;AAGlC,WAAO,uCAAqB,QAAQ,MAAM;AAAA,MACxC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,cAAc;AAAA,MACd;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,oBAAoB,MAAM;AAC9B,QAAI,SAAS,4BAAW;AAAM,aAAO,4BAAW;AAChD,QAAI,SAAS,4BAAW;AAAW,aAAO,4BAAW;AACrD,WAAO;AAAA,EACT;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,MAAM,kBAAkB;AAAA,MACxB;AAAA,MACA,OAAO;AAAA;AAAA,EACT;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,eAAe;AAC3B,YAAY,cAAc;AAC1B,MAAM,4BAAwB,kCAAS,WAAW,EAAE,YAAY,kCAAkC;AAClG,sBAAsB,YAAY;AAGlC,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,6 +32,7 @@ module.exports = __toCommonJS(DSInputProtected_exports);
|
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
33
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
34
|
var import_react = require("react");
|
|
35
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
35
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
36
37
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
37
38
|
var import_ds_button = require("@elliemae/ds-button");
|
|
@@ -57,6 +58,7 @@ const DSInputProtected = ({
|
|
|
57
58
|
placeholderChar = void 0,
|
|
58
59
|
...rest
|
|
59
60
|
}) => {
|
|
61
|
+
(0, import_ds_utilities.useDeprecateComponent)({ componentName: "ds-form/InputProtected", version: "TBD Date: 2023 Q3" });
|
|
60
62
|
const left = leftAddon && ADDON_ICON_OPTIONS[leftAddon];
|
|
61
63
|
const right = rightAddon && ADDON_ICON_OPTIONS[rightAddon];
|
|
62
64
|
const [inputLocked, setLocked] = (0, import_react.useState)(leftAddon === import_options.LEFT_ADDON_OPTIONS.LockLocked);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/InputProtected/DSInputProtected.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useState, useCallback, useEffect } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { LockUnlocked, LockLocked, VisibleView, InvisibleHide } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSInputGroup } from '../InputGroup';\nimport { DSInputMask } from '../InputMask';\nimport { inputProtectedProps } from './props';\nimport { defaultProps } from './defaultProps';\nimport { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS } from './options';\n\nconst ADDON_ICON_OPTIONS = {\n LockUnlocked: <LockUnlocked />,\n LockLocked: <LockLocked />,\n VisibleView: <VisibleView />,\n InvisibleHide: <InvisibleHide />,\n};\n\nconst DSInputProtected = ({\n leftAddon,\n rightAddon,\n onChange,\n value,\n readOnly,\n mask,\n type,\n placeholderChar = undefined,\n ...rest\n}) => {\n const left = leftAddon && ADDON_ICON_OPTIONS[leftAddon];\n const right = rightAddon && ADDON_ICON_OPTIONS[rightAddon];\n const [inputLocked, setLocked] = useState(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);\n const [inputHidden, setHidden] = useState(rightAddon === RIGHT_ADDON_OPTIONS.InvisibleHide);\n\n useEffect(() => {\n setLocked(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);\n setHidden(rightAddon === RIGHT_ADDON_OPTIONS.InvisibleHide);\n }, [leftAddon, rightAddon]);\n\n const handleLeft = useCallback(() => {\n setLocked(!inputLocked);\n }, [inputLocked]);\n const handleRight = useCallback(() => {\n setHidden(!inputHidden);\n }, [inputHidden]);\n\n return (\n <div>\n <DSInputGroup\n leftAddon={\n left ? (\n <DSButton\n aria-label={`${inputLocked ? 'Allow' : 'Disallow'} Edition`}\n buttonType=\"secondary\"\n icon={ADDON_ICON_OPTIONS[inputLocked ? LEFT_ADDON_OPTIONS.LockLocked : LEFT_ADDON_OPTIONS.LockUnlocked]}\n onClick={handleLeft}\n />\n ) : undefined\n }\n rightAddon={\n right ? (\n <DSButton\n aria-label={`${inputHidden ? 'Show' : 'Hide'} Characters`}\n buttonType=\"secondary\"\n icon={\n ADDON_ICON_OPTIONS[inputHidden ? RIGHT_ADDON_OPTIONS.InvisibleHide : RIGHT_ADDON_OPTIONS.VisibleView]\n }\n onClick={handleRight}\n containerProps={{\n 'data-testid': 'inputprotected-show-hide-button',\n }}\n />\n ) : undefined\n }\n >\n <DSInputMask\n {...rest}\n mask={mask}\n placeholderChar={placeholderChar}\n onChange={onChange}\n disabled={left ? inputLocked : readOnly}\n type={right && inputHidden ? 'password' : type}\n value={value}\n />\n </DSInputGroup>\n </div>\n );\n};\n\nDSInputProtected.propTypes = inputProtectedProps;\nDSInputProtected.defaultProps = defaultProps;\nDSInputProtected.displayName = 'DSInputProtected';\nconst DSInputProtectedWithSchema = describe(DSInputProtected);\nDSInputProtectedWithSchema.propTypes = inputProtectedProps;\n\nexport { DSInputProtectedWithSchema, DSInputProtected };\nexport default DSInputProtected;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useState, useCallback, useEffect } from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { LockUnlocked, LockLocked, VisibleView, InvisibleHide } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSInputGroup } from '../InputGroup';\nimport { DSInputMask } from '../InputMask';\nimport { inputProtectedProps } from './props';\nimport { defaultProps } from './defaultProps';\nimport { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS } from './options';\n\nconst ADDON_ICON_OPTIONS = {\n LockUnlocked: <LockUnlocked />,\n LockLocked: <LockLocked />,\n VisibleView: <VisibleView />,\n InvisibleHide: <InvisibleHide />,\n};\n\nconst DSInputProtected = ({\n leftAddon,\n rightAddon,\n onChange,\n value,\n readOnly,\n mask,\n type,\n placeholderChar = undefined,\n ...rest\n}) => {\n useDeprecateComponent({ componentName: 'ds-form/InputProtected', version: 'TBD Date: 2023 Q3' });\n\n const left = leftAddon && ADDON_ICON_OPTIONS[leftAddon];\n const right = rightAddon && ADDON_ICON_OPTIONS[rightAddon];\n const [inputLocked, setLocked] = useState(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);\n const [inputHidden, setHidden] = useState(rightAddon === RIGHT_ADDON_OPTIONS.InvisibleHide);\n\n useEffect(() => {\n setLocked(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);\n setHidden(rightAddon === RIGHT_ADDON_OPTIONS.InvisibleHide);\n }, [leftAddon, rightAddon]);\n\n const handleLeft = useCallback(() => {\n setLocked(!inputLocked);\n }, [inputLocked]);\n const handleRight = useCallback(() => {\n setHidden(!inputHidden);\n }, [inputHidden]);\n\n return (\n <div>\n <DSInputGroup\n leftAddon={\n left ? (\n <DSButton\n aria-label={`${inputLocked ? 'Allow' : 'Disallow'} Edition`}\n buttonType=\"secondary\"\n icon={ADDON_ICON_OPTIONS[inputLocked ? LEFT_ADDON_OPTIONS.LockLocked : LEFT_ADDON_OPTIONS.LockUnlocked]}\n onClick={handleLeft}\n />\n ) : undefined\n }\n rightAddon={\n right ? (\n <DSButton\n aria-label={`${inputHidden ? 'Show' : 'Hide'} Characters`}\n buttonType=\"secondary\"\n icon={\n ADDON_ICON_OPTIONS[inputHidden ? RIGHT_ADDON_OPTIONS.InvisibleHide : RIGHT_ADDON_OPTIONS.VisibleView]\n }\n onClick={handleRight}\n containerProps={{\n 'data-testid': 'inputprotected-show-hide-button',\n }}\n />\n ) : undefined\n }\n >\n <DSInputMask\n {...rest}\n mask={mask}\n placeholderChar={placeholderChar}\n onChange={onChange}\n disabled={left ? inputLocked : readOnly}\n type={right && inputHidden ? 'password' : type}\n value={value}\n />\n </DSInputGroup>\n </div>\n );\n};\n\nDSInputProtected.propTypes = inputProtectedProps;\nDSInputProtected.defaultProps = defaultProps;\nDSInputProtected.displayName = 'DSInputProtected';\nconst DSInputProtectedWithSchema = describe(DSInputProtected);\nDSInputProtectedWithSchema.propTypes = inputProtectedProps;\n\nexport { DSInputProtectedWithSchema, DSInputProtected };\nexport default DSInputProtected;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADeP;AAZhB,mBAAwD;AACxD,0BAAsC;AACtC,8BAAyB;AACzB,sBAAqE;AACrE,uBAAyB;AACzB,wBAA6B;AAC7B,uBAA4B;AAC5B,mBAAoC;AACpC,0BAA6B;AAC7B,qBAAwD;AAExD,MAAM,qBAAqB;AAAA,EACzB,cAAc,4CAAC,gCAAa;AAAA,EAC5B,YAAY,4CAAC,8BAAW;AAAA,EACxB,aAAa,4CAAC,+BAAY;AAAA,EAC1B,eAAe,4CAAC,iCAAc;AAChC;AAEA,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,KACf;AACL,MAAM;AACJ,iDAAsB,EAAE,eAAe,0BAA0B,SAAS,oBAAoB,CAAC;AAE/F,QAAM,OAAO,aAAa,mBAAmB;AAC7C,QAAM,QAAQ,cAAc,mBAAmB;AAC/C,QAAM,CAAC,aAAa,SAAS,QAAI,uBAAS,cAAc,kCAAmB,UAAU;AACrF,QAAM,CAAC,aAAa,SAAS,QAAI,uBAAS,eAAe,mCAAoB,aAAa;AAE1F,8BAAU,MAAM;AACd,cAAU,cAAc,kCAAmB,UAAU;AACrD,cAAU,eAAe,mCAAoB,aAAa;AAAA,EAC5D,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,QAAM,iBAAa,0BAAY,MAAM;AACnC,cAAU,CAAC,WAAW;AAAA,EACxB,GAAG,CAAC,WAAW,CAAC;AAChB,QAAM,kBAAc,0BAAY,MAAM;AACpC,cAAU,CAAC,WAAW;AAAA,EACxB,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,4CAAC,SACC;AAAA,IAAC;AAAA;AAAA,MACC,WACE,OACE;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,GAAG,cAAc,UAAU;AAAA,UACvC,YAAW;AAAA,UACX,MAAM,mBAAmB,cAAc,kCAAmB,aAAa,kCAAmB;AAAA,UAC1F,SAAS;AAAA;AAAA,MACX,IACE;AAAA,MAEN,YACE,QACE;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,GAAG,cAAc,SAAS;AAAA,UACtC,YAAW;AAAA,UACX,MACE,mBAAmB,cAAc,mCAAoB,gBAAgB,mCAAoB;AAAA,UAE3F,SAAS;AAAA,UACT,gBAAgB;AAAA,YACd,eAAe;AAAA,UACjB;AAAA;AAAA,MACF,IACE;AAAA,MAGN;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU,OAAO,cAAc;AAAA,UAC/B,MAAM,SAAS,cAAc,aAAa;AAAA,UAC1C;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,eAAe;AAChC,iBAAiB,cAAc;AAC/B,MAAM,iCAA6B,kCAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,6 +32,7 @@ module.exports = __toCommonJS(DSLargeInputText_exports);
|
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
33
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
34
|
var import_react = require("react");
|
|
35
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
35
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
36
37
|
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
37
38
|
var import_props = require("./props");
|
|
@@ -70,6 +71,7 @@ const DSLargeInputText = ({
|
|
|
70
71
|
errorLimit,
|
|
71
72
|
tabIndex
|
|
72
73
|
}) => {
|
|
74
|
+
(0, import_ds_utilities.useDeprecateComponent)({ componentName: "ds-form/LargeInputText", version: "TBD Date: 2023 Q3" });
|
|
73
75
|
const limitError = (0, import_react.useMemo)(
|
|
74
76
|
() => characterLimitCounter < String(value).length && characterLimitCounter > 0,
|
|
75
77
|
[characterLimitCounter, value]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/LargeInputText/DSLargeInputText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable jsx-a11y/no-autofocus, react/prop-types */\nimport React, { useMemo } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { convertPropToCssClassName, aggregatedClasses } from '@elliemae/ds-classnames';\nimport { props } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst CounterArea = aggregatedClasses('div')('counter', 'textarea', ({ limitError }) => ({\n 'limit-error': limitError,\n}));\n\nconst DSLargeInputText = ({\n containerProps,\n autoFocus,\n className,\n disabled,\n name,\n id,\n maxLength,\n minLength,\n placeholder,\n onClick,\n onChange,\n onFocus,\n onBlur,\n onKeyUp,\n onKeyDown,\n onPaste,\n value,\n hasError,\n required,\n readOnly,\n resize,\n innerRef,\n ariaLabel,\n ariaAutocomplete,\n role,\n characterLimitCounter,\n rows,\n errorLimit,\n tabIndex,\n}) => {\n const limitError = useMemo(\n () => characterLimitCounter < String(value).length && characterLimitCounter > 0,\n [characterLimitCounter, value],\n );\n const { cssClassName, classNameElement, classNameBlock } = convertPropToCssClassName(\n 'form-element-textarea',\n 'text',\n {\n hasError: limitError || hasError,\n readOnly,\n disabled,\n },\n );\n // auto size when user types\n const handleKeyUp = (e) => {\n // const { target } = e\n onKeyUp(e);\n // if (e.key !== 'Enter') return\n // target.style.cssText = 'height:auto; padding:0'\n // target.style.cssText = `height: ${target.scrollHeight}px`\n };\n return (\n <>\n <div {...containerProps} className={`${cssClassName} ${className}`}>\n <div className={classNameBlock('wrapper')}>\n <textarea\n ref={innerRef}\n aria-autocomplete={ariaAutocomplete}\n aria-label={ariaLabel}\n aria-multiline\n aria-placeholder={placeholder}\n aria-required={required}\n autoFocus={autoFocus}\n className={classNameElement('textarea')}\n data-testid=\"ds-large-input_main-component\"\n disabled={disabled}\n id={id}\n maxLength={maxLength}\n minLength={minLength}\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n onClick={onClick}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onKeyUp={handleKeyUp}\n onPaste={onPaste}\n placeholder={placeholder}\n role={role}\n rows={String(rows)}\n style={{\n resize,\n }}\n value={value}\n tabIndex={tabIndex}\n />\n </div>\n </div>\n {characterLimitCounter > 0 && (\n <CounterArea classProps={{ limitError }} data-testid=\"counter-area\">\n {`${limitError ? `${errorLimit} ${characterLimitCounter} characters. ` : ''}${\n String(value).length\n } / ${characterLimitCounter}`}\n </CounterArea>\n )}\n </>\n );\n};\n\nDSLargeInputText.propTypes = props;\nDSLargeInputText.defaultProps = defaultProps;\nDSLargeInputText.displayName = 'DSLargeInputText';\nconst DSLargeInputTextWithSchema = describe(DSLargeInputText).description('A large input');\nDSLargeInputTextWithSchema.propTypes = props;\n\nexport { DSLargeInputTextWithSchema, DSLargeInputText };\n\nexport default DSLargeInputText;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable jsx-a11y/no-autofocus, react/prop-types */\nimport React, { useMemo } from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { convertPropToCssClassName, aggregatedClasses } from '@elliemae/ds-classnames';\nimport { props } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst CounterArea = aggregatedClasses('div')('counter', 'textarea', ({ limitError }) => ({\n 'limit-error': limitError,\n}));\n\nconst DSLargeInputText = ({\n containerProps,\n autoFocus,\n className,\n disabled,\n name,\n id,\n maxLength,\n minLength,\n placeholder,\n onClick,\n onChange,\n onFocus,\n onBlur,\n onKeyUp,\n onKeyDown,\n onPaste,\n value,\n hasError,\n required,\n readOnly,\n resize,\n innerRef,\n ariaLabel,\n ariaAutocomplete,\n role,\n characterLimitCounter,\n rows,\n errorLimit,\n tabIndex,\n}) => {\n useDeprecateComponent({ componentName: 'ds-form/LargeInputText', version: 'TBD Date: 2023 Q3' });\n\n const limitError = useMemo(\n () => characterLimitCounter < String(value).length && characterLimitCounter > 0,\n [characterLimitCounter, value],\n );\n const { cssClassName, classNameElement, classNameBlock } = convertPropToCssClassName(\n 'form-element-textarea',\n 'text',\n {\n hasError: limitError || hasError,\n readOnly,\n disabled,\n },\n );\n // auto size when user types\n const handleKeyUp = (e) => {\n // const { target } = e\n onKeyUp(e);\n // if (e.key !== 'Enter') return\n // target.style.cssText = 'height:auto; padding:0'\n // target.style.cssText = `height: ${target.scrollHeight}px`\n };\n return (\n <>\n <div {...containerProps} className={`${cssClassName} ${className}`}>\n <div className={classNameBlock('wrapper')}>\n <textarea\n ref={innerRef}\n aria-autocomplete={ariaAutocomplete}\n aria-label={ariaLabel}\n aria-multiline\n aria-placeholder={placeholder}\n aria-required={required}\n autoFocus={autoFocus}\n className={classNameElement('textarea')}\n data-testid=\"ds-large-input_main-component\"\n disabled={disabled}\n id={id}\n maxLength={maxLength}\n minLength={minLength}\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n onClick={onClick}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onKeyUp={handleKeyUp}\n onPaste={onPaste}\n placeholder={placeholder}\n role={role}\n rows={String(rows)}\n style={{\n resize,\n }}\n value={value}\n tabIndex={tabIndex}\n />\n </div>\n </div>\n {characterLimitCounter > 0 && (\n <CounterArea classProps={{ limitError }} data-testid=\"counter-area\">\n {`${limitError ? `${errorLimit} ${characterLimitCounter} characters. ` : ''}${\n String(value).length\n } / ${characterLimitCounter}`}\n </CounterArea>\n )}\n </>\n );\n};\n\nDSLargeInputText.propTypes = props;\nDSLargeInputText.defaultProps = defaultProps;\nDSLargeInputText.displayName = 'DSLargeInputText';\nconst DSLargeInputTextWithSchema = describe(DSLargeInputText).description('A large input');\nDSLargeInputTextWithSchema.propTypes = props;\n\nexport { DSLargeInputTextWithSchema, DSLargeInputText };\n\nexport default DSLargeInputText;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoEnB;AAlEJ,mBAA+B;AAC/B,0BAAsC;AACtC,8BAAyB;AACzB,2BAA6D;AAC7D,mBAAsB;AACtB,0BAA6B;AAE7B,MAAM,kBAAc,wCAAkB,KAAK,EAAE,WAAW,YAAY,CAAC,EAAE,WAAW,OAAO;AAAA,EACvF,eAAe;AACjB,EAAE;AAEF,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,iDAAsB,EAAE,eAAe,0BAA0B,SAAS,oBAAoB,CAAC;AAE/F,QAAM,iBAAa;AAAA,IACjB,MAAM,wBAAwB,OAAO,KAAK,EAAE,UAAU,wBAAwB;AAAA,IAC9E,CAAC,uBAAuB,KAAK;AAAA,EAC/B;AACA,QAAM,EAAE,cAAc,kBAAkB,eAAe,QAAI;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,MACE,UAAU,cAAc;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,MAAM;AAEzB,YAAQ,CAAC;AAAA,EAIX;AACA,SACE,4EACE;AAAA,gDAAC,SAAK,GAAG,gBAAgB,WAAW,GAAG,gBAAgB,aACrD,sDAAC,SAAI,WAAW,eAAe,SAAS,GACtC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,qBAAmB;AAAA,QACnB,cAAY;AAAA,QACZ,kBAAc;AAAA,QACd,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf;AAAA,QACA,WAAW,iBAAiB,UAAU;AAAA,QACtC,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,OAAO,IAAI;AAAA,QACjB,OAAO;AAAA,UACL;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF,GACF;AAAA,IACC,wBAAwB,KACvB,4CAAC,eAAY,YAAY,EAAE,WAAW,GAAG,eAAY,gBAClD,aAAG,aAAa,GAAG,cAAc,yCAAyC,KACzE,OAAO,KAAK,EAAE,YACV,yBACR;AAAA,KAEJ;AAEJ;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,eAAe;AAChC,iBAAiB,cAAc;AAC/B,MAAM,iCAA6B,kCAAS,gBAAgB,EAAE,YAAY,eAAe;AACzF,2BAA2B,YAAY;AAIvC,IAAO,2BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,6 +32,7 @@ module.exports = __toCommonJS(DSRadio_exports);
|
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
33
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
34
|
var import_react = require("react");
|
|
35
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
35
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
36
37
|
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
37
38
|
var import_Circle = require("./Circle");
|
|
@@ -53,6 +54,7 @@ const DSRadio = ({
|
|
|
53
54
|
innerRef,
|
|
54
55
|
...otherProps
|
|
55
56
|
}) => {
|
|
57
|
+
(0, import_ds_utilities.useDeprecateComponent)({ componentName: "ds-form/DSRadio", version: "3.x Date: 2023 Q1" });
|
|
56
58
|
const { cssClassName, classNameElement } = (0, import_ds_classnames.convertPropToCssClassName)("form-element-radio", className, {
|
|
57
59
|
hasError,
|
|
58
60
|
readOnly,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Radio/DSRadio.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable react/no-unknown-property */\nimport React, { useRef } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { Circle } from './Circle';\n\ninterface DSRadioT {\n [x: string]: unknown;\n innerRef?: React.MutableRefObject<HTMLInputElement>;\n containerProps?: { [x: string]: unknown };\n className?: string;\n style?: React.CSSProperties;\n labelText?: string;\n htmlFor?: string;\n hasError?: boolean;\n readOnly?: boolean;\n disabled?: boolean;\n checked?: boolean;\n value?: string;\n name?: string;\n onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement>;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n children?: React.ReactNode | React.ReactNode[];\n tabIndex?: number;\n}\n\nconst DSRadio = ({\n containerProps,\n className,\n style,\n labelText,\n htmlFor,\n hasError,\n readOnly,\n disabled,\n checked,\n value,\n name,\n onChange,\n children,\n tabIndex,\n innerRef,\n ...otherProps\n}: DSRadioT) => {\n // this will be solved when we move to styled components...\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const { cssClassName, classNameElement } = convertPropToCssClassName('form-element-radio', className, {\n hasError,\n readOnly,\n disabled,\n });\n const checkRef = useRef<HTMLInputElement | null>(null);\n return (\n <div {...containerProps} className={cssClassName}>\n <label className={classNameElement('label')} htmlFor={htmlFor}>\n <input\n {...otherProps}\n ref={checkRef}\n aria-disabled={disabled}\n checked={disabled ? false : checked}\n className={classNameElement('input')}\n disabled={disabled}\n name={name}\n onChange={(e) => {\n if (!readOnly && !disabled) {\n onChange(e);\n }\n }}\n readOnly={readOnly}\n tabIndex={-1}\n type=\"radio\"\n value={value}\n />\n <span\n ref={innerRef}\n aria-checked={checked}\n aria-disabled={disabled}\n className={classNameElement('input-button')}\n onKeyDown={(e) => {\n // really really bad pattern...\n // overwriting the target to point to the hidden input because the focus is on the span and not on the input...\n // we will solve this with a v2 of this when we move to controlled + styled components...\n e.target = checkRef.current;\n if (disabled) return;\n if (e.key === 'Enter' || e.keyCode === 32) {\n onChange(e);\n } else if (otherProps.onKeyDown) {\n otherProps.onKeyDown(e);\n }\n }}\n role=\"radio\"\n style={style}\n tabIndex={disabled ? -1 : tabIndex}\n // value={value} // should be unused?\n >\n <Circle checked={checked} />\n </span>\n <span className={classNameElement('label-text')}>{labelText}</span>\n </label>\n {children && <div className={classNameElement('radio-children')}>{children}</div>}\n </div>\n );\n};\n\nDSRadio.defaultProps = {\n containerProps: {},\n className: '',\n hasError: false,\n readOnly: false,\n disabled: false,\n checked: false,\n name: '',\n onChange: () => null,\n children: null,\n tabIndex: 0,\n};\n\nconst radioProps = {\n /** Injected props to wrapper element of component */\n containerProps: PropTypes.object.description('Injected props to wrapper element of component'),\n /** css class prop */\n className: PropTypes.string.description('css class prop'),\n /** name property to manage form */\n name: PropTypes.string.description('name property to manage form'),\n /**\n * Displayable label for the radio\n */\n labelText: PropTypes.string.description('Displayable label for the radio'),\n /** HTMLFOR property to manage form */\n htmlFor: PropTypes.element.description('HTMLFOR property to manage form'),\n /**\n * Whether the radio has error or not\n */\n hasError: PropTypes.bool.description('Whether the radio has error or not'),\n /**\n * Whether the radio is read only or not\n */\n readOnly: PropTypes.bool.description('Whether the radio is read only or not'),\n /**\n * Whether the radio is disabled or not\n */\n disabled: PropTypes.bool.description('Whether the radio is disabled or not'),\n /**\n * Whether the radio is checked or not\n */\n checked: PropTypes.bool.description('Whether the radio is checked or not'),\n /**\n * Value that takes the checkbox if it is checked\n */\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description(\n 'Value that takes the checkbox if it is checked',\n ).isRequired,\n /**\n * Allows a function that is triggered once the radio changes\n */\n onChange: PropTypes.func.description('Allows a function that is triggered once the radio changes'),\n /**\n * Optional, if you want a checkbox customized\n */\n children: PropTypes.node.description('Optional, if you want a checkbox customized'),\n /** HTML tabindex to manage focus */\n tabIndex: PropTypes.number.description('HTML tabindex to manage focus'),\n /** style override object */\n style: PropTypes.object.description('style override object'),\n};\n\nDSRadio.propTypes = radioProps;\nDSRadio.displayName = 'DSRadio';\nconst DSRadioWithSchema = describe(DSRadio);\nDSRadioWithSchema.propTypes = radioProps;\n\nexport { DSRadio, DSRadioWithSchema };\n\nexport default DSRadio;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable react/no-unknown-property */\nimport React, { useRef } from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { Circle } from './Circle';\n\ninterface DSRadioT {\n [x: string]: unknown;\n innerRef?: React.MutableRefObject<HTMLInputElement>;\n containerProps?: { [x: string]: unknown };\n className?: string;\n style?: React.CSSProperties;\n labelText?: string;\n htmlFor?: string;\n hasError?: boolean;\n readOnly?: boolean;\n disabled?: boolean;\n checked?: boolean;\n value?: string;\n name?: string;\n onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement>;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n children?: React.ReactNode | React.ReactNode[];\n tabIndex?: number;\n}\n\nconst DSRadio = ({\n containerProps,\n className,\n style,\n labelText,\n htmlFor,\n hasError,\n readOnly,\n disabled,\n checked,\n value,\n name,\n onChange,\n children,\n tabIndex,\n innerRef,\n ...otherProps\n}: DSRadioT) => {\n useDeprecateComponent({ componentName: 'ds-form/DSRadio', version: '3.x Date: 2023 Q1' });\n\n // this will be solved when we move to styled components...\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const { cssClassName, classNameElement } = convertPropToCssClassName('form-element-radio', className, {\n hasError,\n readOnly,\n disabled,\n });\n const checkRef = useRef<HTMLInputElement | null>(null);\n return (\n <div {...containerProps} className={cssClassName}>\n <label className={classNameElement('label')} htmlFor={htmlFor}>\n <input\n {...otherProps}\n ref={checkRef}\n aria-disabled={disabled}\n checked={disabled ? false : checked}\n className={classNameElement('input')}\n disabled={disabled}\n name={name}\n onChange={(e) => {\n if (!readOnly && !disabled) {\n onChange(e);\n }\n }}\n readOnly={readOnly}\n tabIndex={-1}\n type=\"radio\"\n value={value}\n />\n <span\n ref={innerRef}\n aria-checked={checked}\n aria-disabled={disabled}\n className={classNameElement('input-button')}\n onKeyDown={(e) => {\n // really really bad pattern...\n // overwriting the target to point to the hidden input because the focus is on the span and not on the input...\n // we will solve this with a v2 of this when we move to controlled + styled components...\n e.target = checkRef.current;\n if (disabled) return;\n if (e.key === 'Enter' || e.keyCode === 32) {\n onChange(e);\n } else if (otherProps.onKeyDown) {\n otherProps.onKeyDown(e);\n }\n }}\n role=\"radio\"\n style={style}\n tabIndex={disabled ? -1 : tabIndex}\n // value={value} // should be unused?\n >\n <Circle checked={checked} />\n </span>\n <span className={classNameElement('label-text')}>{labelText}</span>\n </label>\n {children && <div className={classNameElement('radio-children')}>{children}</div>}\n </div>\n );\n};\n\nDSRadio.defaultProps = {\n containerProps: {},\n className: '',\n hasError: false,\n readOnly: false,\n disabled: false,\n checked: false,\n name: '',\n onChange: () => null,\n children: null,\n tabIndex: 0,\n};\n\nconst radioProps = {\n /** Injected props to wrapper element of component */\n containerProps: PropTypes.object.description('Injected props to wrapper element of component'),\n /** css class prop */\n className: PropTypes.string.description('css class prop'),\n /** name property to manage form */\n name: PropTypes.string.description('name property to manage form'),\n /**\n * Displayable label for the radio\n */\n labelText: PropTypes.string.description('Displayable label for the radio'),\n /** HTMLFOR property to manage form */\n htmlFor: PropTypes.element.description('HTMLFOR property to manage form'),\n /**\n * Whether the radio has error or not\n */\n hasError: PropTypes.bool.description('Whether the radio has error or not'),\n /**\n * Whether the radio is read only or not\n */\n readOnly: PropTypes.bool.description('Whether the radio is read only or not'),\n /**\n * Whether the radio is disabled or not\n */\n disabled: PropTypes.bool.description('Whether the radio is disabled or not'),\n /**\n * Whether the radio is checked or not\n */\n checked: PropTypes.bool.description('Whether the radio is checked or not'),\n /**\n * Value that takes the checkbox if it is checked\n */\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description(\n 'Value that takes the checkbox if it is checked',\n ).isRequired,\n /**\n * Allows a function that is triggered once the radio changes\n */\n onChange: PropTypes.func.description('Allows a function that is triggered once the radio changes'),\n /**\n * Optional, if you want a checkbox customized\n */\n children: PropTypes.node.description('Optional, if you want a checkbox customized'),\n /** HTML tabindex to manage focus */\n tabIndex: PropTypes.number.description('HTML tabindex to manage focus'),\n /** style override object */\n style: PropTypes.object.description('style override object'),\n};\n\nDSRadio.propTypes = radioProps;\nDSRadio.displayName = 'DSRadio';\nconst DSRadioWithSchema = describe(DSRadio);\nDSRadioWithSchema.propTypes = radioProps;\n\nexport { DSRadio, DSRadioWithSchema };\n\nexport default DSRadio;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -31,6 +31,7 @@ __export(DSToggle_exports, {
|
|
|
31
31
|
module.exports = __toCommonJS(DSToggle_exports);
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
33
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
34
35
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
35
36
|
var import_DSToggleImpl = require("./DSToggleImpl");
|
|
36
37
|
var import_ds_shared = require("@elliemae/ds-shared");
|
|
@@ -46,22 +47,25 @@ const DSToggle = ({
|
|
|
46
47
|
value,
|
|
47
48
|
size,
|
|
48
49
|
...otherProps
|
|
49
|
-
}) =>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
50
|
+
}) => {
|
|
51
|
+
(0, import_ds_utilities.useDeprecateComponent)({ componentName: "ds-form/Toggle", version: "TBD Date: 2023 Q3" });
|
|
52
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
53
|
+
import_DSToggleImpl.DSToggleImpl,
|
|
54
|
+
{
|
|
55
|
+
...otherProps,
|
|
56
|
+
checked,
|
|
57
|
+
containerProps,
|
|
58
|
+
disabled,
|
|
59
|
+
hasError,
|
|
60
|
+
labelOff,
|
|
61
|
+
labelOn,
|
|
62
|
+
name,
|
|
63
|
+
readOnly,
|
|
64
|
+
size,
|
|
65
|
+
value
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
};
|
|
65
69
|
DSToggle.defaultProps = {
|
|
66
70
|
labelOn: "ON",
|
|
67
71
|
labelOff: "OFF",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Toggle/DSToggle.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { DSToggleImpl } from './DSToggleImpl';\nimport { dsBasicSizes } from '@elliemae/ds-shared';\n\nconst DSToggle = ({\n containerProps,\n hasError,\n readOnly,\n disabled,\n checked,\n labelOn,\n labelOff,\n name,\n value,\n size,\n ...otherProps\n}) => (\n <DSToggleImpl\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { DSToggleImpl } from './DSToggleImpl';\nimport { dsBasicSizes } from '@elliemae/ds-shared';\n\nconst DSToggle = ({\n containerProps,\n hasError,\n readOnly,\n disabled,\n checked,\n labelOn,\n labelOff,\n name,\n value,\n size,\n ...otherProps\n}) => {\n useDeprecateComponent({ componentName: 'ds-form/Toggle', version: 'TBD Date: 2023 Q3' });\n\n return (\n <DSToggleImpl\n {...otherProps}\n checked={checked}\n containerProps={containerProps}\n disabled={disabled}\n hasError={hasError}\n labelOff={labelOff}\n labelOn={labelOn}\n name={name}\n readOnly={readOnly}\n size={size}\n value={value}\n />\n );\n};\n\nDSToggle.defaultProps = {\n labelOn: 'ON',\n labelOff: 'OFF',\n size: 's',\n hasError: false,\n readOnly: false,\n disabled: false,\n checked: undefined,\n};\n\nconst props = {\n /**\n * Set of Properties attached to the main container\n */\n containerProps: PropTypes.shape({}).description('Set of Properties attached to the main container'),\n /**\n * Whether the toggle has error or not\n */\n hasError: PropTypes.bool.description('Whether the toggle has error or not'),\n /**\n * Whether the toggle is read only or not\n */\n readOnly: PropTypes.bool.description('Whether the toggle is read only or not'),\n /**\n * Whether the toggle is disabled or not\n */\n disabled: PropTypes.bool.description('Whether the toggle is disabled or not'),\n /**\n * Whether the toggle is checked or not\n */\n checked: PropTypes.bool.description('Whether the toggle is checked or not'),\n /**\n * Allows a function that is triggered once the toggle changes\n */\n onChange: PropTypes.func.description('Allows a function that is triggered once the toggle changes'),\n /**\n * Label to show when the toggle is ON\n */\n labelOn: PropTypes.string.description('Label to show when the toggle is ON'),\n /**\n * Label to show when the toggle is OFF\n */\n labelOff: PropTypes.string.description('Label to show when the toggle is OFF'),\n /**\n * Default value once the component is initialized\n */\n value: PropTypes.string.description('Default value once the component is initialized'),\n /**\n * ['s', 'm', 'l']\n */\n size: PropTypes.oneOf(dsBasicSizes).description(\"['s', 'm', 'l']\"),\n /**\n * Input name\n */\n name: PropTypes.string.description('Input name'),\n};\n\nDSToggle.propTypes = props;\nDSToggle.displayName = 'DSToggle';\nconst DSToggleWithSchema = describe(DSToggle);\n\nDSToggleWithSchema.propTypes = props;\n\nexport default DSToggle;\n\nexport { DSToggleWithSchema, DSToggle };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBnB;AArBJ,0BAAsC;AACtC,8BAAoC;AACpC,0BAA6B;AAC7B,uBAA6B;AAE7B,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,iDAAsB,EAAE,eAAe,kBAAkB,SAAS,oBAAoB,CAAC;AAEvF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,QAAQ;AAAA,EAIZ,gBAAgB,kCAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAIlG,UAAU,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EAI1E,UAAU,kCAAU,KAAK,YAAY,wCAAwC;AAAA,EAI7E,UAAU,kCAAU,KAAK,YAAY,uCAAuC;AAAA,EAI5E,SAAS,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAI1E,UAAU,kCAAU,KAAK,YAAY,6DAA6D;AAAA,EAIlG,SAAS,kCAAU,OAAO,YAAY,qCAAqC;AAAA,EAI3E,UAAU,kCAAU,OAAO,YAAY,sCAAsC;AAAA,EAI7E,OAAO,kCAAU,OAAO,YAAY,iDAAiD;AAAA,EAIrF,MAAM,kCAAU,MAAM,6BAAY,EAAE,YAAY,iBAAiB;AAAA,EAIjE,MAAM,kCAAU,OAAO,YAAY,YAAY;AACjD;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAE5C,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { createElement } from "react";
|
|
4
4
|
import React2, { useState, useEffect } from "react";
|
|
5
5
|
import moment from "moment";
|
|
6
|
+
import { useDeprecateComponent } from "@elliemae/ds-utilities";
|
|
6
7
|
import {
|
|
7
8
|
commonInputProps,
|
|
8
9
|
triggerOnBlur,
|
|
@@ -18,6 +19,7 @@ import { DateInputDivider, DateInputWrapper, DateInputInput, DateInputFluidConta
|
|
|
18
19
|
import { DateInputsPropTypes } from "./propsTypes";
|
|
19
20
|
const FORMAT = "MMDDYYYY";
|
|
20
21
|
const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown, time, tabIndex, innerRef }) => {
|
|
22
|
+
useDeprecateComponent({ componentName: "ds-form/DateInputV2", version: "3.x Date: 2023 Q1" });
|
|
21
23
|
const [month, setMonth] = useState("");
|
|
22
24
|
const [day, setDay] = useState("");
|
|
23
25
|
const [year, setYear] = useState("");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/DateInputV2/components/DateInputs.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useState, useEffect } from 'react';\nimport moment from 'moment';\nimport {\n commonInputProps,\n triggerOnBlur,\n focusNextInput,\n getFormattedDay,\n getShouldShortcircuitDay,\n getFormattedMonth,\n getShouldShortcircuitMonth,\n getFormattedYear,\n} from './utils';\nimport { onKeyDownHelper } from './helpers';\nimport { DateInputDivider, DateInputWrapper, DateInputInput, DateInputFluidContainer } from './styled';\nimport { DateInputsPropTypes } from './propsTypes';\n\nconst FORMAT = 'MMDDYYYY';\n\nexport const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown, time, tabIndex, innerRef }) => {\n const [month, setMonth] = useState('');\n const [day, setDay] = useState('');\n const [year, setYear] = useState('');\n const [onChangeDateTrigger, setOnChangeDateTrigger] = useState({});\n const dayRef = React.useRef<HTMLInputElement>();\n const [haveInputsOnChangeTriggered, setHaveInputsOnChangeTriggered] = useState(false);\n\n let digits = 2;\n let placeholder = '';\n\n const handleFluidClick = React.useCallback(\n (e: React.MouseEvent<Element, MouseEvent>) => {\n if (!(e.target as HTMLInputElement).type && dayRef.current) {\n dayRef.current.focus();\n }\n },\n [dayRef.current],\n );\n\n const triggerOnDateChange = React.useCallback(() => {\n if (month && day && year && haveInputsOnChangeTriggered) {\n const momentValue = moment(`${month}${day}${year}`, 'MMDDYYYY', true);\n if (momentValue.isValid()) {\n onDateChange(momentValue);\n }\n setHaveInputsOnChangeTriggered(false);\n }\n }, [day, month, year, haveInputsOnChangeTriggered]);\n\n // isArrowChange is coming from the onKeyDown handler in helpers\n const onMonthChange = React.useCallback((e, isArrowChange) => {\n const value = getFormattedMonth(e.target.value);\n const shouldAdvance = getShouldShortcircuitMonth(e.target.value);\n setMonth(value);\n setHaveInputsOnChangeTriggered(true);\n if (e.target.value.length > 1 || shouldAdvance) {\n if (!isArrowChange) focusNextInput(e.target);\n setOnChangeDateTrigger({});\n }\n }, []);\n\n // isArrowChange is coming from the onKeyDown handler in helpers\n const onDayChange = React.useCallback((e, isArrowChange) => {\n const value = getFormattedDay(e.target.value);\n const shouldAdvance = getShouldShortcircuitDay(e.target.value);\n setDay(value);\n setHaveInputsOnChangeTriggered(true);\n if (e.target.value.length > 1 || shouldAdvance) {\n if (!isArrowChange) focusNextInput(e.target);\n setOnChangeDateTrigger({});\n }\n }, []);\n\n const onYearChange = React.useCallback((e) => {\n const value = getFormattedYear(e.target.value);\n setYear(value);\n setHaveInputsOnChangeTriggered(true);\n setOnChangeDateTrigger({});\n }, []);\n\n useEffect(() => {\n // When component mounts haveInputsOnChangeTriggered is set to false\n // so this is not triggered on mount but is triggered with all other changes\n if (haveInputsOnChangeTriggered) {\n const momentValue = moment(`${month}${day}${year}`, FORMAT, true);\n onChange(`${month}${day}${year}`, momentValue.isValid() ? momentValue : null);\n }\n }, [day, month, year]);\n\n useEffect(() => {\n triggerOnDateChange();\n }, [onChangeDateTrigger]);\n\n useEffect(() => {\n if (time && time !== `${month}${day}${year}` && moment(time, 'MMDDYYYY').isValid()) {\n const values = String(time || '');\n if (values.slice(0, 2)) setMonth(values.slice(0, 2));\n if (values.slice(2, 4)) setDay(values.slice(2, 4));\n if (values.slice(4, 8)) setYear(values.slice(4, 8));\n } else if (!time && (month || day || year)) {\n setMonth('');\n setDay('');\n setYear('');\n }\n }, [time]);\n\n const onKeyDown = (event) =>\n onKeyDownHelper(event, {\n onDayChange,\n onMonthChange,\n onYearChange,\n });\n\n const renderMonthInput = () => {\n placeholder = 'MM';\n const onMonthInputBlur = (e) => {\n setOnChangeDateTrigger({});\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"month-input\"\n data-testid=\"month\"\n disabled={disabled}\n name=\"month\"\n onBlur={onMonthInputBlur}\n onChange={onMonthChange}\n value={month}\n tabIndex={tabIndex}\n ref={dayRef}\n />\n );\n };\n const renderDayInput = () => {\n placeholder = 'DD';\n const onDayInputBlur = (e) => {\n setOnChangeDateTrigger({});\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"day-input\"\n data-testid=\"day\"\n disabled={disabled}\n name=\"day\"\n onBlur={onDayInputBlur}\n onChange={onDayChange}\n value={day}\n tabIndex={tabIndex}\n />\n );\n };\n const renderYearInput = () => {\n placeholder = 'YY';\n digits = 4;\n const onYearInputBlur = (e) => {\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"year-input\"\n data-testid=\"year\"\n disabled={disabled}\n name=\"year\"\n onBlur={onYearInputBlur}\n onChange={onYearChange}\n value={year}\n size=\"l\"\n tabIndex={tabIndex}\n />\n );\n };\n\n const renderDateInputs = () => {\n const inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];\n const inputsWithDividers = inputs.reduce(\n (acc, input, index) => (input ? acc.concat([index ? <DateInputDivider>/</DateInputDivider> : null, input]) : acc),\n [],\n );\n\n return [\n inputsWithDividers,\n React.createElement('span', { key: 'span' }), // hack for next/prev focus\n ];\n };\n\n return (\n <DateInputFluidContainer onClick={handleFluidClick} data-testid=\"date-input-fluidContainer\">\n <DateInputWrapper\n disabled={disabled}\n ref={innerRef}\n onKeyDown={onCustomKeyDown}\n tabIndex={-1}\n cols={['auto', '6px', 'auto', '6px', 'auto']}\n >\n {renderDateInputs()}\n </DateInputWrapper>\n </DateInputFluidContainer>\n );\n};\n\nDateInputs.propTypes = DateInputsPropTypes;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useState, useEffect } from 'react';\nimport moment from 'moment';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\n\nimport {\n commonInputProps,\n triggerOnBlur,\n focusNextInput,\n getFormattedDay,\n getShouldShortcircuitDay,\n getFormattedMonth,\n getShouldShortcircuitMonth,\n getFormattedYear,\n} from './utils';\nimport { onKeyDownHelper } from './helpers';\nimport { DateInputDivider, DateInputWrapper, DateInputInput, DateInputFluidContainer } from './styled';\nimport { DateInputsPropTypes } from './propsTypes';\n\nconst FORMAT = 'MMDDYYYY';\n\nexport const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown, time, tabIndex, innerRef }) => {\n useDeprecateComponent({ componentName: 'ds-form/DateInputV2', version: '3.x Date: 2023 Q1' });\n\n const [month, setMonth] = useState('');\n const [day, setDay] = useState('');\n const [year, setYear] = useState('');\n const [onChangeDateTrigger, setOnChangeDateTrigger] = useState({});\n const dayRef = React.useRef<HTMLInputElement>();\n const [haveInputsOnChangeTriggered, setHaveInputsOnChangeTriggered] = useState(false);\n\n let digits = 2;\n let placeholder = '';\n\n const handleFluidClick = React.useCallback(\n (e: React.MouseEvent<Element, MouseEvent>) => {\n if (!(e.target as HTMLInputElement).type && dayRef.current) {\n dayRef.current.focus();\n }\n },\n [dayRef.current],\n );\n\n const triggerOnDateChange = React.useCallback(() => {\n if (month && day && year && haveInputsOnChangeTriggered) {\n const momentValue = moment(`${month}${day}${year}`, 'MMDDYYYY', true);\n if (momentValue.isValid()) {\n onDateChange(momentValue);\n }\n setHaveInputsOnChangeTriggered(false);\n }\n }, [day, month, year, haveInputsOnChangeTriggered]);\n\n // isArrowChange is coming from the onKeyDown handler in helpers\n const onMonthChange = React.useCallback((e, isArrowChange) => {\n const value = getFormattedMonth(e.target.value);\n const shouldAdvance = getShouldShortcircuitMonth(e.target.value);\n setMonth(value);\n setHaveInputsOnChangeTriggered(true);\n if (e.target.value.length > 1 || shouldAdvance) {\n if (!isArrowChange) focusNextInput(e.target);\n setOnChangeDateTrigger({});\n }\n }, []);\n\n // isArrowChange is coming from the onKeyDown handler in helpers\n const onDayChange = React.useCallback((e, isArrowChange) => {\n const value = getFormattedDay(e.target.value);\n const shouldAdvance = getShouldShortcircuitDay(e.target.value);\n setDay(value);\n setHaveInputsOnChangeTriggered(true);\n if (e.target.value.length > 1 || shouldAdvance) {\n if (!isArrowChange) focusNextInput(e.target);\n setOnChangeDateTrigger({});\n }\n }, []);\n\n const onYearChange = React.useCallback((e) => {\n const value = getFormattedYear(e.target.value);\n setYear(value);\n setHaveInputsOnChangeTriggered(true);\n setOnChangeDateTrigger({});\n }, []);\n\n useEffect(() => {\n // When component mounts haveInputsOnChangeTriggered is set to false\n // so this is not triggered on mount but is triggered with all other changes\n if (haveInputsOnChangeTriggered) {\n const momentValue = moment(`${month}${day}${year}`, FORMAT, true);\n onChange(`${month}${day}${year}`, momentValue.isValid() ? momentValue : null);\n }\n }, [day, month, year]);\n\n useEffect(() => {\n triggerOnDateChange();\n }, [onChangeDateTrigger]);\n\n useEffect(() => {\n if (time && time !== `${month}${day}${year}` && moment(time, 'MMDDYYYY').isValid()) {\n const values = String(time || '');\n if (values.slice(0, 2)) setMonth(values.slice(0, 2));\n if (values.slice(2, 4)) setDay(values.slice(2, 4));\n if (values.slice(4, 8)) setYear(values.slice(4, 8));\n } else if (!time && (month || day || year)) {\n setMonth('');\n setDay('');\n setYear('');\n }\n }, [time]);\n\n const onKeyDown = (event) =>\n onKeyDownHelper(event, {\n onDayChange,\n onMonthChange,\n onYearChange,\n });\n\n const renderMonthInput = () => {\n placeholder = 'MM';\n const onMonthInputBlur = (e) => {\n setOnChangeDateTrigger({});\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"month-input\"\n data-testid=\"month\"\n disabled={disabled}\n name=\"month\"\n onBlur={onMonthInputBlur}\n onChange={onMonthChange}\n value={month}\n tabIndex={tabIndex}\n ref={dayRef}\n />\n );\n };\n const renderDayInput = () => {\n placeholder = 'DD';\n const onDayInputBlur = (e) => {\n setOnChangeDateTrigger({});\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"day-input\"\n data-testid=\"day\"\n disabled={disabled}\n name=\"day\"\n onBlur={onDayInputBlur}\n onChange={onDayChange}\n value={day}\n tabIndex={tabIndex}\n />\n );\n };\n const renderYearInput = () => {\n placeholder = 'YY';\n digits = 4;\n const onYearInputBlur = (e) => {\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"year-input\"\n data-testid=\"year\"\n disabled={disabled}\n name=\"year\"\n onBlur={onYearInputBlur}\n onChange={onYearChange}\n value={year}\n size=\"l\"\n tabIndex={tabIndex}\n />\n );\n };\n\n const renderDateInputs = () => {\n const inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];\n const inputsWithDividers = inputs.reduce(\n (acc, input, index) => (input ? acc.concat([index ? <DateInputDivider>/</DateInputDivider> : null, input]) : acc),\n [],\n );\n\n return [\n inputsWithDividers,\n React.createElement('span', { key: 'span' }), // hack for next/prev focus\n ];\n };\n\n return (\n <DateInputFluidContainer onClick={handleFluidClick} data-testid=\"date-input-fluidContainer\">\n <DateInputWrapper\n disabled={disabled}\n ref={innerRef}\n onKeyDown={onCustomKeyDown}\n tabIndex={-1}\n cols={['auto', '6px', 'auto', '6px', 'auto']}\n >\n {renderDateInputs()}\n </DateInputWrapper>\n </DateInputFluidContainer>\n );\n};\n\nDateInputs.propTypes = DateInputsPropTypes;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
4
|
-
import { getComponentFromProps } from "@elliemae/ds-utilities";
|
|
4
|
+
import { getComponentFromProps, useDeprecateComponent } from "@elliemae/ds-utilities";
|
|
5
5
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
6
6
|
import { Group } from "@elliemae/ds-shared";
|
|
7
7
|
import { DSInputGroup } from "../InputGroup";
|
|
@@ -60,6 +60,7 @@ const DSFormItemLayout = ({
|
|
|
60
60
|
containerProps,
|
|
61
61
|
...rest
|
|
62
62
|
}) => {
|
|
63
|
+
useDeprecateComponent({ componentName: "ds-form/FormItemLayout", version: "3.x Date: 2023 Q1" });
|
|
63
64
|
const isGroup = InputComponent.type === (/* @__PURE__ */ jsx(Group, {})).type;
|
|
64
65
|
const floatingLabelOverride = floatingLabel === "UNSAFE";
|
|
65
66
|
const WrapperContentComp = !isGroup ? WrapperContent : WrapperContentGroup;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FormItem/DSFormItemLayout.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getComponentFromProps } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { Group } from '@elliemae/ds-shared';\nimport { DSInputGroup } from '../InputGroup';\nimport { DSFloatingLabelInput } from '../FloatingLabelInput';\nimport { DSError } from './Error/DSError';\nimport { props } from './props';\nimport { defaultProps } from './defaultProps';\nimport { FORMITEM_LAYOUT_VARIANTS } from './variants';\nimport { Suffix, SuffixInputWrapper, SuffixWrapper } from './Suffix/Suffix';\n// import { maskTypes } from '../InputMask/MaskTypes';\n\nexport { DSError, FORMITEM_LAYOUT_VARIANTS };\n\nconst blockName = 'form-item';\n\nconst Wrapper = aggregatedClasses('div')(blockName, null, ({ leftLabel, variant, fitContent, withHighlight }) => ({\n 'with-left-label': leftLabel,\n 'fit-content': fitContent,\n [variant]: variant,\n 'with-highlight': withHighlight,\n}));\n\nconst WrapperContent = aggregatedClasses('div')(`${blockName}-content`);\nconst WrapperContentGroup = aggregatedClasses('fieldset')(`${blockName}-content`);\n\nconst DSFormItemLayout = ({\n leftLabel,\n floatingLabel,\n name,\n id,\n value,\n inputComponent: InputComponent,\n labelComponent: LabelComponent,\n feedbackComponent: FeedbackComponent,\n labelText,\n truncateText,\n hasError,\n // orientation = 'vertical', // one of [ vertical, horizontal ]\n validationState, // one of [ success, error, warning ]\n validationMessage,\n feedbackMessage,\n readOnly,\n focused,\n type,\n autoFocus,\n disabled,\n onChange,\n onBlur,\n onFocus,\n onPaste,\n onKeyUp,\n extraInputProps,\n extraContent,\n leftAddon,\n rightAddon,\n required,\n optional,\n mask,\n useSubfix,\n suffix,\n variant,\n fitContent,\n withHighlight,\n containerProps,\n ...rest\n}) => {\n const isGroup = InputComponent.type === (<Group />).type;\n const floatingLabelOverride = floatingLabel === 'UNSAFE';\n const WrapperContentComp = !isGroup ? WrapperContent : WrapperContentGroup;\n\n // group the input props to not duplicate it inside the specific inputComponent (floating or not)\n const inputProps = {\n ...extraInputProps,\n disabled,\n hasError: hasError || validationState === 'error',\n id,\n name,\n type,\n autoFocus,\n onBlur,\n onChange,\n onFocus,\n onPaste,\n onKeyUp,\n readOnly,\n value,\n mask,\n useSubfix,\n variant,\n required,\n ...rest,\n };\n\n const renderInput = (Input) =>\n leftAddon || rightAddon ? (\n <DSInputGroup leftAddon={leftAddon} rightAddon={rightAddon} variant={variant}>\n {Input}\n </DSInputGroup>\n ) : (\n Input\n );\n\n const renderFloating = (\n <DSFloatingLabelInput\n {...inputProps}\n extraInputProps={extraInputProps}\n focused={focused}\n inputComponent={InputComponent}\n labelComponent={LabelComponent}\n labelText={labelText}\n optional={optional}\n required={required}\n variant={variant}\n />\n );\n\n const InputWithLabel = floatingLabelOverride ? (\n renderInput(renderFloating)\n ) : (\n <>\n <LabelComponent\n htmlFor={id || name}\n label={labelText}\n optional={optional}\n required={required}\n isGroup={isGroup}\n truncateText={truncateText}\n />\n {renderInput(getComponentFromProps(InputComponent, inputProps))}\n </>\n );\n\n if (suffix) {\n return (\n <Wrapper\n classProps={{\n disabled,\n readOnly,\n hasError,\n leftLabel,\n variant,\n fitContent,\n withHighlight,\n }}\n {...containerProps}\n >\n <SuffixWrapper className=\"suffix-wrapper\">\n <SuffixInputWrapper className=\"suffix-input-wrapper\">\n <WrapperContentComp>\n {InputWithLabel}\n {extraContent}\n </WrapperContentComp>\n <FeedbackComponent\n hasError={hasError}\n text={validationState || hasError ? validationMessage : feedbackMessage}\n />\n </SuffixInputWrapper>\n <Suffix\n className=\"suffix-label\"\n label={!!labelText}\n withFeedback={Boolean(validationMessage || feedbackMessage)}\n >\n {suffix}\n </Suffix>\n </SuffixWrapper>\n </Wrapper>\n );\n }\n\n return (\n <Wrapper\n classProps={{\n disabled,\n readOnly,\n hasError,\n leftLabel,\n variant,\n fitContent,\n withHighlight,\n }}\n {...containerProps}\n >\n <WrapperContentComp>\n {InputWithLabel}\n {extraContent}\n </WrapperContentComp>\n <FeedbackComponent hasError={hasError} text={validationState || hasError ? validationMessage : feedbackMessage} />\n </Wrapper>\n );\n};\n\nDSFormItemLayout.propTypes = props;\nDSFormItemLayout.defaultProps = defaultProps;\nDSFormItemLayout.displayName = 'DSFormItemLayout';\nconst DSFormItemLayoutWithSchema = describe(DSFormItemLayout);\nDSFormItemLayoutWithSchema.propTypes = props;\n\nexport default DSFormItemLayout;\nexport { DSFormItemLayoutWithSchema, DSFormItemLayout };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getComponentFromProps, useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { Group } from '@elliemae/ds-shared';\nimport { DSInputGroup } from '../InputGroup';\nimport { DSFloatingLabelInput } from '../FloatingLabelInput';\nimport { DSError } from './Error/DSError';\nimport { props } from './props';\nimport { defaultProps } from './defaultProps';\nimport { FORMITEM_LAYOUT_VARIANTS } from './variants';\nimport { Suffix, SuffixInputWrapper, SuffixWrapper } from './Suffix/Suffix';\n// import { maskTypes } from '../InputMask/MaskTypes';\n\nexport { DSError, FORMITEM_LAYOUT_VARIANTS };\n\nconst blockName = 'form-item';\n\nconst Wrapper = aggregatedClasses('div')(blockName, null, ({ leftLabel, variant, fitContent, withHighlight }) => ({\n 'with-left-label': leftLabel,\n 'fit-content': fitContent,\n [variant]: variant,\n 'with-highlight': withHighlight,\n}));\n\nconst WrapperContent = aggregatedClasses('div')(`${blockName}-content`);\nconst WrapperContentGroup = aggregatedClasses('fieldset')(`${blockName}-content`);\n\nconst DSFormItemLayout = ({\n leftLabel,\n floatingLabel,\n name,\n id,\n value,\n inputComponent: InputComponent,\n labelComponent: LabelComponent,\n feedbackComponent: FeedbackComponent,\n labelText,\n truncateText,\n hasError,\n // orientation = 'vertical', // one of [ vertical, horizontal ]\n validationState, // one of [ success, error, warning ]\n validationMessage,\n feedbackMessage,\n readOnly,\n focused,\n type,\n autoFocus,\n disabled,\n onChange,\n onBlur,\n onFocus,\n onPaste,\n onKeyUp,\n extraInputProps,\n extraContent,\n leftAddon,\n rightAddon,\n required,\n optional,\n mask,\n useSubfix,\n suffix,\n variant,\n fitContent,\n withHighlight,\n containerProps,\n ...rest\n}) => {\n useDeprecateComponent({ componentName: 'ds-form/FormItemLayout', version: '3.x Date: 2023 Q1' });\n\n const isGroup = InputComponent.type === (<Group />).type;\n const floatingLabelOverride = floatingLabel === 'UNSAFE';\n const WrapperContentComp = !isGroup ? WrapperContent : WrapperContentGroup;\n\n // group the input props to not duplicate it inside the specific inputComponent (floating or not)\n const inputProps = {\n ...extraInputProps,\n disabled,\n hasError: hasError || validationState === 'error',\n id,\n name,\n type,\n autoFocus,\n onBlur,\n onChange,\n onFocus,\n onPaste,\n onKeyUp,\n readOnly,\n value,\n mask,\n useSubfix,\n variant,\n required,\n ...rest,\n };\n\n const renderInput = (Input) =>\n leftAddon || rightAddon ? (\n <DSInputGroup leftAddon={leftAddon} rightAddon={rightAddon} variant={variant}>\n {Input}\n </DSInputGroup>\n ) : (\n Input\n );\n\n const renderFloating = (\n <DSFloatingLabelInput\n {...inputProps}\n extraInputProps={extraInputProps}\n focused={focused}\n inputComponent={InputComponent}\n labelComponent={LabelComponent}\n labelText={labelText}\n optional={optional}\n required={required}\n variant={variant}\n />\n );\n\n const InputWithLabel = floatingLabelOverride ? (\n renderInput(renderFloating)\n ) : (\n <>\n <LabelComponent\n htmlFor={id || name}\n label={labelText}\n optional={optional}\n required={required}\n isGroup={isGroup}\n truncateText={truncateText}\n />\n {renderInput(getComponentFromProps(InputComponent, inputProps))}\n </>\n );\n\n if (suffix) {\n return (\n <Wrapper\n classProps={{\n disabled,\n readOnly,\n hasError,\n leftLabel,\n variant,\n fitContent,\n withHighlight,\n }}\n {...containerProps}\n >\n <SuffixWrapper className=\"suffix-wrapper\">\n <SuffixInputWrapper className=\"suffix-input-wrapper\">\n <WrapperContentComp>\n {InputWithLabel}\n {extraContent}\n </WrapperContentComp>\n <FeedbackComponent\n hasError={hasError}\n text={validationState || hasError ? validationMessage : feedbackMessage}\n />\n </SuffixInputWrapper>\n <Suffix\n className=\"suffix-label\"\n label={!!labelText}\n withFeedback={Boolean(validationMessage || feedbackMessage)}\n >\n {suffix}\n </Suffix>\n </SuffixWrapper>\n </Wrapper>\n );\n }\n\n return (\n <Wrapper\n classProps={{\n disabled,\n readOnly,\n hasError,\n leftLabel,\n variant,\n fitContent,\n withHighlight,\n }}\n {...containerProps}\n >\n <WrapperContentComp>\n {InputWithLabel}\n {extraContent}\n </WrapperContentComp>\n <FeedbackComponent hasError={hasError} text={validationState || hasError ? validationMessage : feedbackMessage} />\n </Wrapper>\n );\n};\n\nDSFormItemLayout.propTypes = props;\nDSFormItemLayout.defaultProps = defaultProps;\nDSFormItemLayout.displayName = 'DSFormItemLayout';\nconst DSFormItemLayoutWithSchema = describe(DSFormItemLayout);\nDSFormItemLayoutWithSchema.propTypes = props;\n\nexport default DSFormItemLayout;\nexport { DSFormItemLayoutWithSchema, DSFormItemLayout };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useDeprecateComponent } from "@elliemae/ds-utilities";
|
|
3
4
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
4
5
|
import { AddonWrapper } from "./AddonWrapper";
|
|
5
6
|
import { props } from "./props";
|
|
@@ -12,18 +13,21 @@ const DSInputGroup = ({
|
|
|
12
13
|
leftAddon,
|
|
13
14
|
rightAddon,
|
|
14
15
|
children: InputComponents
|
|
15
|
-
}) =>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
16
|
+
}) => {
|
|
17
|
+
useDeprecateComponent({ componentName: "ds-form/InputGroup", version: "3.x Date: 2023 Q1" });
|
|
18
|
+
return /* @__PURE__ */ jsx(
|
|
19
|
+
AddonWrapper,
|
|
20
|
+
{
|
|
21
|
+
ref: innerRef,
|
|
22
|
+
className,
|
|
23
|
+
containerProps,
|
|
24
|
+
leftAddon,
|
|
25
|
+
rightAddon,
|
|
26
|
+
style,
|
|
27
|
+
children: InputComponents
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
};
|
|
27
31
|
DSInputGroup.propTypes = props;
|
|
28
32
|
DSInputGroup.defaultProps = defaultProps;
|
|
29
33
|
DSInputGroup.displayName = "DSInputGroup";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InputGroup/DSInputGroup.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { AddonWrapper } from './AddonWrapper';\nimport { props } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst DSInputGroup = ({\n containerProps,\n innerRef,\n className,\n style,\n leftAddon,\n rightAddon,\n children: InputComponents, // as InputComponents,\n}) => (\n <AddonWrapper\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { AddonWrapper } from './AddonWrapper';\nimport { props } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst DSInputGroup = ({\n containerProps,\n innerRef,\n className,\n style,\n leftAddon,\n rightAddon,\n children: InputComponents, // as InputComponents,\n}) => {\n useDeprecateComponent({ componentName: 'ds-form/InputGroup', version: '3.x Date: 2023 Q1' });\n\n return (\n <AddonWrapper\n ref={innerRef}\n className={className}\n containerProps={containerProps}\n leftAddon={leftAddon}\n rightAddon={rightAddon}\n style={style}\n >\n {InputComponents}\n </AddonWrapper>\n );\n};\n\nDSInputGroup.propTypes = props;\nDSInputGroup.defaultProps = defaultProps;\nDSInputGroup.displayName = 'DSInputGroup';\nconst DSInputGroupWithSchema = describe(DSInputGroup);\n\nDSInputGroupWithSchema.propTypes = props;\n\nexport default DSInputGroup;\nexport { DSInputGroupWithSchema, DSInputGroup };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmBnB;AAlBJ,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAE7B,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,wBAAsB,EAAE,eAAe,sBAAsB,SAAS,oBAAoB,CAAC;AAE3F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,aAAa,YAAY;AACzB,aAAa,eAAe;AAC5B,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AAEpD,uBAAuB,YAAY;AAEnC,IAAO,uBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback, useEffect, useState } from "react";
|
|
4
|
+
import { useDeprecateComponent } from "@elliemae/ds-utilities";
|
|
4
5
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
5
6
|
import { MASK_TYPES } from "./MaskTypes";
|
|
6
7
|
import { MASK_PIPES } from "./MaskPipes";
|
|
@@ -30,6 +31,7 @@ const DSInputMask = ({
|
|
|
30
31
|
value: valueOrEvent,
|
|
31
32
|
...rest
|
|
32
33
|
}) => {
|
|
34
|
+
useDeprecateComponent({ componentName: "ds-form/InputMask", version: "3.x Date: 2023 Q1" });
|
|
33
35
|
const [rawValue, setRawValue] = useState(getValueFromEventOrString(valueOrEvent));
|
|
34
36
|
useEffect(() => {
|
|
35
37
|
setRawValue(getValueFromEventOrString(valueOrEvent));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InputMask/DSInputMask.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { MASK_TYPES } from './MaskTypes';\nimport { MASK_PIPES } from './MaskPipes';\nimport { DSInputMaskDeprecated } from './DSInputMaskDeprecated';\nimport { inputProps } from './props';\nimport { defaultProps } from './defaultProps';\nimport { OutOfTheBoxMaskTypes } from './mask_types';\n\nconst isStringMask = (mask: any) => typeof mask === 'string';\n\nconst isObjectMask = (mask: any) => typeof mask === 'object' && mask.type;\n\nconst getRawMask = (mask: any, rawValue: string) => (typeof mask === 'function' ? mask(rawValue) : mask);\n\nconst getValueFromEventOrString = (e: any): string => {\n let value = e;\n if (e && e.target) {\n const {\n target: { value: eValue },\n } = e;\n value = eValue;\n }\n return value;\n};\n\nconst DSInputMask = ({\n 'aria-label': ariaLabel = 'Input Mask',\n autoFocus,\n innerRef,\n mask,\n pipe,\n value: valueOrEvent,\n ...rest\n}) => {\n const [rawValue, setRawValue] = useState(getValueFromEventOrString(valueOrEvent));\n\n useEffect(() => {\n setRawValue(getValueFromEventOrString(valueOrEvent));\n }, [valueOrEvent]);\n\n const [rawMask, setRawMask] = useState<any>(getRawMask(mask, rawValue));\n\n const [focus, setFocus] = useState(autoFocus);\n\n const [lastkey, setLastkey] = useState<{ code: number; key: string }>({\n code: null,\n key: null,\n });\n\n const [cursorPosition, setCursorPosition] = useState({ current: 0 });\n\n const handleSetMask = useCallback(\n (newValue) => {\n setRawMask(getRawMask(mask, newValue));\n },\n [mask],\n );\n\n if (!pipe && isStringMask(rawMask)) {\n return OutOfTheBoxMaskTypes[rawMask]({\n ...rest,\n 'aria-label': ariaLabel,\n innerRef,\n value: rawValue,\n focus,\n setFocus,\n setRawMask: handleSetMask,\n cursorPosition,\n setCursorPosition,\n lastkey,\n setLastkey,\n setRawValue,\n });\n }\n\n if (!pipe && isObjectMask(rawMask)) {\n // we should change rawMask.type to rawMask.maskType\n // to avoid override standard props\n return OutOfTheBoxMaskTypes[rawMask.type]({\n ...rawMask,\n ...rest,\n 'aria-label': ariaLabel,\n innerRef,\n value: rawValue,\n focus,\n setFocus,\n setRawMask: handleSetMask,\n cursorPosition,\n setCursorPosition,\n lastkey,\n setLastkey,\n setRawValue,\n });\n }\n\n const getDeprecatedMask = () => {\n if (mask === MASK_TYPES.DATE) return MASK_TYPES.DATE_DEPRECATED;\n if (mask === MASK_TYPES.DATE_TIME) return MASK_TYPES.DATE_TIME_DEPRECATED;\n return mask;\n };\n return (\n <DSInputMaskDeprecated\n {...rest}\n aria-label={ariaLabel}\n autoFocus={autoFocus}\n innerRef={innerRef}\n mask={getDeprecatedMask()}\n pipe={pipe}\n value={rawValue}\n />\n );\n};\n\nDSInputMask.propTypes = inputProps;\nDSInputMask.defaultProps = defaultProps;\nDSInputMask.displayName = 'DSInputMask';\nconst DSInputMaskWithSchema = describe(DSInputMask).description('Masking input for custom formats');\nDSInputMaskWithSchema.propTypes = inputProps;\n\nexport { MASK_TYPES, MASK_PIPES, DSInputMaskWithSchema, DSInputMask };\nexport default DSInputMask;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { MASK_TYPES } from './MaskTypes';\nimport { MASK_PIPES } from './MaskPipes';\nimport { DSInputMaskDeprecated } from './DSInputMaskDeprecated';\nimport { inputProps } from './props';\nimport { defaultProps } from './defaultProps';\nimport { OutOfTheBoxMaskTypes } from './mask_types';\n\nconst isStringMask = (mask: any) => typeof mask === 'string';\n\nconst isObjectMask = (mask: any) => typeof mask === 'object' && mask.type;\n\nconst getRawMask = (mask: any, rawValue: string) => (typeof mask === 'function' ? mask(rawValue) : mask);\n\nconst getValueFromEventOrString = (e: any): string => {\n let value = e;\n if (e && e.target) {\n const {\n target: { value: eValue },\n } = e;\n value = eValue;\n }\n return value;\n};\n\nconst DSInputMask = ({\n 'aria-label': ariaLabel = 'Input Mask',\n autoFocus,\n innerRef,\n mask,\n pipe,\n value: valueOrEvent,\n ...rest\n}) => {\n useDeprecateComponent({ componentName: 'ds-form/InputMask', version: '3.x Date: 2023 Q1' });\n\n const [rawValue, setRawValue] = useState(getValueFromEventOrString(valueOrEvent));\n\n useEffect(() => {\n setRawValue(getValueFromEventOrString(valueOrEvent));\n }, [valueOrEvent]);\n\n const [rawMask, setRawMask] = useState<any>(getRawMask(mask, rawValue));\n\n const [focus, setFocus] = useState(autoFocus);\n\n const [lastkey, setLastkey] = useState<{ code: number; key: string }>({\n code: null,\n key: null,\n });\n\n const [cursorPosition, setCursorPosition] = useState({ current: 0 });\n\n const handleSetMask = useCallback(\n (newValue) => {\n setRawMask(getRawMask(mask, newValue));\n },\n [mask],\n );\n\n if (!pipe && isStringMask(rawMask)) {\n return OutOfTheBoxMaskTypes[rawMask]({\n ...rest,\n 'aria-label': ariaLabel,\n innerRef,\n value: rawValue,\n focus,\n setFocus,\n setRawMask: handleSetMask,\n cursorPosition,\n setCursorPosition,\n lastkey,\n setLastkey,\n setRawValue,\n });\n }\n\n if (!pipe && isObjectMask(rawMask)) {\n // we should change rawMask.type to rawMask.maskType\n // to avoid override standard props\n return OutOfTheBoxMaskTypes[rawMask.type]({\n ...rawMask,\n ...rest,\n 'aria-label': ariaLabel,\n innerRef,\n value: rawValue,\n focus,\n setFocus,\n setRawMask: handleSetMask,\n cursorPosition,\n setCursorPosition,\n lastkey,\n setLastkey,\n setRawValue,\n });\n }\n\n const getDeprecatedMask = () => {\n if (mask === MASK_TYPES.DATE) return MASK_TYPES.DATE_DEPRECATED;\n if (mask === MASK_TYPES.DATE_TIME) return MASK_TYPES.DATE_TIME_DEPRECATED;\n return mask;\n };\n return (\n <DSInputMaskDeprecated\n {...rest}\n aria-label={ariaLabel}\n autoFocus={autoFocus}\n innerRef={innerRef}\n mask={getDeprecatedMask()}\n pipe={pipe}\n value={rawValue}\n />\n );\n};\n\nDSInputMask.propTypes = inputProps;\nDSInputMask.defaultProps = defaultProps;\nDSInputMask.displayName = 'DSInputMask';\nconst DSInputMaskWithSchema = describe(DSInputMask).description('Masking input for custom formats');\nDSInputMaskWithSchema.propTypes = inputProps;\n\nexport { MASK_TYPES, MASK_PIPES, DSInputMaskWithSchema, DSInputMask };\nexport default DSInputMask;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC0GnB;AAzGJ,SAAgB,aAAa,WAAW,gBAAgB;AACxD,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAErC,MAAM,eAAe,CAAC,SAAc,OAAO,SAAS;AAEpD,MAAM,eAAe,CAAC,SAAc,OAAO,SAAS,YAAY,KAAK;AAErE,MAAM,aAAa,CAAC,MAAW,aAAsB,OAAO,SAAS,aAAa,KAAK,QAAQ,IAAI;AAEnG,MAAM,4BAA4B,CAAC,MAAmB;AACpD,MAAI,QAAQ;AACZ,MAAI,KAAK,EAAE,QAAQ;AACjB,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO,OAAO;AAAA,IAC1B,IAAI;AACJ,YAAQ;AAAA,EACV;AACA,SAAO;AACT;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB,cAAc,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,KACJ;AACL,MAAM;AACJ,wBAAsB,EAAE,eAAe,qBAAqB,SAAS,oBAAoB,CAAC;AAE1F,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,0BAA0B,YAAY,CAAC;AAEhF,YAAU,MAAM;AACd,gBAAY,0BAA0B,YAAY,CAAC;AAAA,EACrD,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAc,WAAW,MAAM,QAAQ,CAAC;AAEtE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,SAAS;AAE5C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwC;AAAA,IACpE,MAAM;AAAA,IACN,KAAK;AAAA,EACP,CAAC;AAED,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE,SAAS,EAAE,CAAC;AAEnE,QAAM,gBAAgB;AAAA,IACpB,CAAC,aAAa;AACZ,iBAAW,WAAW,MAAM,QAAQ,CAAC;AAAA,IACvC;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,MAAI,CAAC,QAAQ,aAAa,OAAO,GAAG;AAClC,WAAO,qBAAqB,SAAS;AAAA,MACnC,GAAG;AAAA,MACH,cAAc;AAAA,MACd;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,MAAI,CAAC,QAAQ,aAAa,OAAO,GAAG;AAGlC,WAAO,qBAAqB,QAAQ,MAAM;AAAA,MACxC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,cAAc;AAAA,MACd;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,oBAAoB,MAAM;AAC9B,QAAI,SAAS,WAAW;AAAM,aAAO,WAAW;AAChD,QAAI,SAAS,WAAW;AAAW,aAAO,WAAW;AACrD,WAAO;AAAA,EACT;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,MAAM,kBAAkB;AAAA,MACxB;AAAA,MACA,OAAO;AAAA;AAAA,EACT;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,eAAe;AAC3B,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW,EAAE,YAAY,kCAAkC;AAClG,sBAAsB,YAAY;AAGlC,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useCallback, useEffect } from "react";
|
|
4
|
+
import { useDeprecateComponent } from "@elliemae/ds-utilities";
|
|
4
5
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
5
6
|
import { LockUnlocked, LockLocked, VisibleView, InvisibleHide } from "@elliemae/ds-icons";
|
|
6
7
|
import { DSButton } from "@elliemae/ds-button";
|
|
@@ -26,6 +27,7 @@ const DSInputProtected = ({
|
|
|
26
27
|
placeholderChar = void 0,
|
|
27
28
|
...rest
|
|
28
29
|
}) => {
|
|
30
|
+
useDeprecateComponent({ componentName: "ds-form/InputProtected", version: "TBD Date: 2023 Q3" });
|
|
29
31
|
const left = leftAddon && ADDON_ICON_OPTIONS[leftAddon];
|
|
30
32
|
const right = rightAddon && ADDON_ICON_OPTIONS[rightAddon];
|
|
31
33
|
const [inputLocked, setLocked] = useState(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InputProtected/DSInputProtected.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useState, useCallback, useEffect } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { LockUnlocked, LockLocked, VisibleView, InvisibleHide } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSInputGroup } from '../InputGroup';\nimport { DSInputMask } from '../InputMask';\nimport { inputProtectedProps } from './props';\nimport { defaultProps } from './defaultProps';\nimport { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS } from './options';\n\nconst ADDON_ICON_OPTIONS = {\n LockUnlocked: <LockUnlocked />,\n LockLocked: <LockLocked />,\n VisibleView: <VisibleView />,\n InvisibleHide: <InvisibleHide />,\n};\n\nconst DSInputProtected = ({\n leftAddon,\n rightAddon,\n onChange,\n value,\n readOnly,\n mask,\n type,\n placeholderChar = undefined,\n ...rest\n}) => {\n const left = leftAddon && ADDON_ICON_OPTIONS[leftAddon];\n const right = rightAddon && ADDON_ICON_OPTIONS[rightAddon];\n const [inputLocked, setLocked] = useState(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);\n const [inputHidden, setHidden] = useState(rightAddon === RIGHT_ADDON_OPTIONS.InvisibleHide);\n\n useEffect(() => {\n setLocked(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);\n setHidden(rightAddon === RIGHT_ADDON_OPTIONS.InvisibleHide);\n }, [leftAddon, rightAddon]);\n\n const handleLeft = useCallback(() => {\n setLocked(!inputLocked);\n }, [inputLocked]);\n const handleRight = useCallback(() => {\n setHidden(!inputHidden);\n }, [inputHidden]);\n\n return (\n <div>\n <DSInputGroup\n leftAddon={\n left ? (\n <DSButton\n aria-label={`${inputLocked ? 'Allow' : 'Disallow'} Edition`}\n buttonType=\"secondary\"\n icon={ADDON_ICON_OPTIONS[inputLocked ? LEFT_ADDON_OPTIONS.LockLocked : LEFT_ADDON_OPTIONS.LockUnlocked]}\n onClick={handleLeft}\n />\n ) : undefined\n }\n rightAddon={\n right ? (\n <DSButton\n aria-label={`${inputHidden ? 'Show' : 'Hide'} Characters`}\n buttonType=\"secondary\"\n icon={\n ADDON_ICON_OPTIONS[inputHidden ? RIGHT_ADDON_OPTIONS.InvisibleHide : RIGHT_ADDON_OPTIONS.VisibleView]\n }\n onClick={handleRight}\n containerProps={{\n 'data-testid': 'inputprotected-show-hide-button',\n }}\n />\n ) : undefined\n }\n >\n <DSInputMask\n {...rest}\n mask={mask}\n placeholderChar={placeholderChar}\n onChange={onChange}\n disabled={left ? inputLocked : readOnly}\n type={right && inputHidden ? 'password' : type}\n value={value}\n />\n </DSInputGroup>\n </div>\n );\n};\n\nDSInputProtected.propTypes = inputProtectedProps;\nDSInputProtected.defaultProps = defaultProps;\nDSInputProtected.displayName = 'DSInputProtected';\nconst DSInputProtectedWithSchema = describe(DSInputProtected);\nDSInputProtectedWithSchema.propTypes = inputProtectedProps;\n\nexport { DSInputProtectedWithSchema, DSInputProtected };\nexport default DSInputProtected;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useState, useCallback, useEffect } from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { LockUnlocked, LockLocked, VisibleView, InvisibleHide } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSInputGroup } from '../InputGroup';\nimport { DSInputMask } from '../InputMask';\nimport { inputProtectedProps } from './props';\nimport { defaultProps } from './defaultProps';\nimport { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS } from './options';\n\nconst ADDON_ICON_OPTIONS = {\n LockUnlocked: <LockUnlocked />,\n LockLocked: <LockLocked />,\n VisibleView: <VisibleView />,\n InvisibleHide: <InvisibleHide />,\n};\n\nconst DSInputProtected = ({\n leftAddon,\n rightAddon,\n onChange,\n value,\n readOnly,\n mask,\n type,\n placeholderChar = undefined,\n ...rest\n}) => {\n useDeprecateComponent({ componentName: 'ds-form/InputProtected', version: 'TBD Date: 2023 Q3' });\n\n const left = leftAddon && ADDON_ICON_OPTIONS[leftAddon];\n const right = rightAddon && ADDON_ICON_OPTIONS[rightAddon];\n const [inputLocked, setLocked] = useState(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);\n const [inputHidden, setHidden] = useState(rightAddon === RIGHT_ADDON_OPTIONS.InvisibleHide);\n\n useEffect(() => {\n setLocked(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);\n setHidden(rightAddon === RIGHT_ADDON_OPTIONS.InvisibleHide);\n }, [leftAddon, rightAddon]);\n\n const handleLeft = useCallback(() => {\n setLocked(!inputLocked);\n }, [inputLocked]);\n const handleRight = useCallback(() => {\n setHidden(!inputHidden);\n }, [inputHidden]);\n\n return (\n <div>\n <DSInputGroup\n leftAddon={\n left ? (\n <DSButton\n aria-label={`${inputLocked ? 'Allow' : 'Disallow'} Edition`}\n buttonType=\"secondary\"\n icon={ADDON_ICON_OPTIONS[inputLocked ? LEFT_ADDON_OPTIONS.LockLocked : LEFT_ADDON_OPTIONS.LockUnlocked]}\n onClick={handleLeft}\n />\n ) : undefined\n }\n rightAddon={\n right ? (\n <DSButton\n aria-label={`${inputHidden ? 'Show' : 'Hide'} Characters`}\n buttonType=\"secondary\"\n icon={\n ADDON_ICON_OPTIONS[inputHidden ? RIGHT_ADDON_OPTIONS.InvisibleHide : RIGHT_ADDON_OPTIONS.VisibleView]\n }\n onClick={handleRight}\n containerProps={{\n 'data-testid': 'inputprotected-show-hide-button',\n }}\n />\n ) : undefined\n }\n >\n <DSInputMask\n {...rest}\n mask={mask}\n placeholderChar={placeholderChar}\n onChange={onChange}\n disabled={left ? inputLocked : readOnly}\n type={right && inputHidden ? 'password' : type}\n value={value}\n />\n </DSInputGroup>\n </div>\n );\n};\n\nDSInputProtected.propTypes = inputProtectedProps;\nDSInputProtected.defaultProps = defaultProps;\nDSInputProtected.displayName = 'DSInputProtected';\nconst DSInputProtectedWithSchema = describe(DSInputProtected);\nDSInputProtectedWithSchema.propTypes = inputProtectedProps;\n\nexport { DSInputProtectedWithSchema, DSInputProtected };\nexport default DSInputProtected;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACeP;AAZhB,SAAgB,UAAU,aAAa,iBAAiB;AACxD,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AACzB,SAAS,cAAc,YAAY,aAAa,qBAAqB;AACrE,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,qBAAqB;AAAA,EACzB,cAAc,oBAAC,gBAAa;AAAA,EAC5B,YAAY,oBAAC,cAAW;AAAA,EACxB,aAAa,oBAAC,eAAY;AAAA,EAC1B,eAAe,oBAAC,iBAAc;AAChC;AAEA,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,KACf;AACL,MAAM;AACJ,wBAAsB,EAAE,eAAe,0BAA0B,SAAS,oBAAoB,CAAC;AAE/F,QAAM,OAAO,aAAa,mBAAmB;AAC7C,QAAM,QAAQ,cAAc,mBAAmB;AAC/C,QAAM,CAAC,aAAa,SAAS,IAAI,SAAS,cAAc,mBAAmB,UAAU;AACrF,QAAM,CAAC,aAAa,SAAS,IAAI,SAAS,eAAe,oBAAoB,aAAa;AAE1F,YAAU,MAAM;AACd,cAAU,cAAc,mBAAmB,UAAU;AACrD,cAAU,eAAe,oBAAoB,aAAa;AAAA,EAC5D,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,QAAM,aAAa,YAAY,MAAM;AACnC,cAAU,CAAC,WAAW;AAAA,EACxB,GAAG,CAAC,WAAW,CAAC;AAChB,QAAM,cAAc,YAAY,MAAM;AACpC,cAAU,CAAC,WAAW;AAAA,EACxB,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,oBAAC,SACC;AAAA,IAAC;AAAA;AAAA,MACC,WACE,OACE;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,GAAG,cAAc,UAAU;AAAA,UACvC,YAAW;AAAA,UACX,MAAM,mBAAmB,cAAc,mBAAmB,aAAa,mBAAmB;AAAA,UAC1F,SAAS;AAAA;AAAA,MACX,IACE;AAAA,MAEN,YACE,QACE;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,GAAG,cAAc,SAAS;AAAA,UACtC,YAAW;AAAA,UACX,MACE,mBAAmB,cAAc,oBAAoB,gBAAgB,oBAAoB;AAAA,UAE3F,SAAS;AAAA,UACT,gBAAgB;AAAA,YACd,eAAe;AAAA,UACjB;AAAA;AAAA,MACF,IACE;AAAA,MAGN;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU,OAAO,cAAc;AAAA,UAC/B,MAAM,SAAS,cAAc,aAAa;AAAA,UAC1C;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,eAAe;AAChC,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo } from "react";
|
|
4
|
+
import { useDeprecateComponent } from "@elliemae/ds-utilities";
|
|
4
5
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
5
6
|
import { convertPropToCssClassName, aggregatedClasses } from "@elliemae/ds-classnames";
|
|
6
7
|
import { props } from "./props";
|
|
@@ -39,6 +40,7 @@ const DSLargeInputText = ({
|
|
|
39
40
|
errorLimit,
|
|
40
41
|
tabIndex
|
|
41
42
|
}) => {
|
|
43
|
+
useDeprecateComponent({ componentName: "ds-form/LargeInputText", version: "TBD Date: 2023 Q3" });
|
|
42
44
|
const limitError = useMemo(
|
|
43
45
|
() => characterLimitCounter < String(value).length && characterLimitCounter > 0,
|
|
44
46
|
[characterLimitCounter, value]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/LargeInputText/DSLargeInputText.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable jsx-a11y/no-autofocus, react/prop-types */\nimport React, { useMemo } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { convertPropToCssClassName, aggregatedClasses } from '@elliemae/ds-classnames';\nimport { props } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst CounterArea = aggregatedClasses('div')('counter', 'textarea', ({ limitError }) => ({\n 'limit-error': limitError,\n}));\n\nconst DSLargeInputText = ({\n containerProps,\n autoFocus,\n className,\n disabled,\n name,\n id,\n maxLength,\n minLength,\n placeholder,\n onClick,\n onChange,\n onFocus,\n onBlur,\n onKeyUp,\n onKeyDown,\n onPaste,\n value,\n hasError,\n required,\n readOnly,\n resize,\n innerRef,\n ariaLabel,\n ariaAutocomplete,\n role,\n characterLimitCounter,\n rows,\n errorLimit,\n tabIndex,\n}) => {\n const limitError = useMemo(\n () => characterLimitCounter < String(value).length && characterLimitCounter > 0,\n [characterLimitCounter, value],\n );\n const { cssClassName, classNameElement, classNameBlock } = convertPropToCssClassName(\n 'form-element-textarea',\n 'text',\n {\n hasError: limitError || hasError,\n readOnly,\n disabled,\n },\n );\n // auto size when user types\n const handleKeyUp = (e) => {\n // const { target } = e\n onKeyUp(e);\n // if (e.key !== 'Enter') return\n // target.style.cssText = 'height:auto; padding:0'\n // target.style.cssText = `height: ${target.scrollHeight}px`\n };\n return (\n <>\n <div {...containerProps} className={`${cssClassName} ${className}`}>\n <div className={classNameBlock('wrapper')}>\n <textarea\n ref={innerRef}\n aria-autocomplete={ariaAutocomplete}\n aria-label={ariaLabel}\n aria-multiline\n aria-placeholder={placeholder}\n aria-required={required}\n autoFocus={autoFocus}\n className={classNameElement('textarea')}\n data-testid=\"ds-large-input_main-component\"\n disabled={disabled}\n id={id}\n maxLength={maxLength}\n minLength={minLength}\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n onClick={onClick}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onKeyUp={handleKeyUp}\n onPaste={onPaste}\n placeholder={placeholder}\n role={role}\n rows={String(rows)}\n style={{\n resize,\n }}\n value={value}\n tabIndex={tabIndex}\n />\n </div>\n </div>\n {characterLimitCounter > 0 && (\n <CounterArea classProps={{ limitError }} data-testid=\"counter-area\">\n {`${limitError ? `${errorLimit} ${characterLimitCounter} characters. ` : ''}${\n String(value).length\n } / ${characterLimitCounter}`}\n </CounterArea>\n )}\n </>\n );\n};\n\nDSLargeInputText.propTypes = props;\nDSLargeInputText.defaultProps = defaultProps;\nDSLargeInputText.displayName = 'DSLargeInputText';\nconst DSLargeInputTextWithSchema = describe(DSLargeInputText).description('A large input');\nDSLargeInputTextWithSchema.propTypes = props;\n\nexport { DSLargeInputTextWithSchema, DSLargeInputText };\n\nexport default DSLargeInputText;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable jsx-a11y/no-autofocus, react/prop-types */\nimport React, { useMemo } from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { convertPropToCssClassName, aggregatedClasses } from '@elliemae/ds-classnames';\nimport { props } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst CounterArea = aggregatedClasses('div')('counter', 'textarea', ({ limitError }) => ({\n 'limit-error': limitError,\n}));\n\nconst DSLargeInputText = ({\n containerProps,\n autoFocus,\n className,\n disabled,\n name,\n id,\n maxLength,\n minLength,\n placeholder,\n onClick,\n onChange,\n onFocus,\n onBlur,\n onKeyUp,\n onKeyDown,\n onPaste,\n value,\n hasError,\n required,\n readOnly,\n resize,\n innerRef,\n ariaLabel,\n ariaAutocomplete,\n role,\n characterLimitCounter,\n rows,\n errorLimit,\n tabIndex,\n}) => {\n useDeprecateComponent({ componentName: 'ds-form/LargeInputText', version: 'TBD Date: 2023 Q3' });\n\n const limitError = useMemo(\n () => characterLimitCounter < String(value).length && characterLimitCounter > 0,\n [characterLimitCounter, value],\n );\n const { cssClassName, classNameElement, classNameBlock } = convertPropToCssClassName(\n 'form-element-textarea',\n 'text',\n {\n hasError: limitError || hasError,\n readOnly,\n disabled,\n },\n );\n // auto size when user types\n const handleKeyUp = (e) => {\n // const { target } = e\n onKeyUp(e);\n // if (e.key !== 'Enter') return\n // target.style.cssText = 'height:auto; padding:0'\n // target.style.cssText = `height: ${target.scrollHeight}px`\n };\n return (\n <>\n <div {...containerProps} className={`${cssClassName} ${className}`}>\n <div className={classNameBlock('wrapper')}>\n <textarea\n ref={innerRef}\n aria-autocomplete={ariaAutocomplete}\n aria-label={ariaLabel}\n aria-multiline\n aria-placeholder={placeholder}\n aria-required={required}\n autoFocus={autoFocus}\n className={classNameElement('textarea')}\n data-testid=\"ds-large-input_main-component\"\n disabled={disabled}\n id={id}\n maxLength={maxLength}\n minLength={minLength}\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n onClick={onClick}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onKeyUp={handleKeyUp}\n onPaste={onPaste}\n placeholder={placeholder}\n role={role}\n rows={String(rows)}\n style={{\n resize,\n }}\n value={value}\n tabIndex={tabIndex}\n />\n </div>\n </div>\n {characterLimitCounter > 0 && (\n <CounterArea classProps={{ limitError }} data-testid=\"counter-area\">\n {`${limitError ? `${errorLimit} ${characterLimitCounter} characters. ` : ''}${\n String(value).length\n } / ${characterLimitCounter}`}\n </CounterArea>\n )}\n </>\n );\n};\n\nDSLargeInputText.propTypes = props;\nDSLargeInputText.defaultProps = defaultProps;\nDSLargeInputText.displayName = 'DSLargeInputText';\nconst DSLargeInputTextWithSchema = describe(DSLargeInputText).description('A large input');\nDSLargeInputTextWithSchema.propTypes = props;\n\nexport { DSLargeInputTextWithSchema, DSLargeInputText };\n\nexport default DSLargeInputText;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACoEnB,mBAGM,KAHN;AAlEJ,SAAgB,eAAe;AAC/B,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AACzB,SAAS,2BAA2B,yBAAyB;AAC7D,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAE7B,MAAM,cAAc,kBAAkB,KAAK,EAAE,WAAW,YAAY,CAAC,EAAE,WAAW,OAAO;AAAA,EACvF,eAAe;AACjB,EAAE;AAEF,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,wBAAsB,EAAE,eAAe,0BAA0B,SAAS,oBAAoB,CAAC;AAE/F,QAAM,aAAa;AAAA,IACjB,MAAM,wBAAwB,OAAO,KAAK,EAAE,UAAU,wBAAwB;AAAA,IAC9E,CAAC,uBAAuB,KAAK;AAAA,EAC/B;AACA,QAAM,EAAE,cAAc,kBAAkB,eAAe,IAAI;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,MACE,UAAU,cAAc;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,MAAM;AAEzB,YAAQ,CAAC;AAAA,EAIX;AACA,SACE,iCACE;AAAA,wBAAC,SAAK,GAAG,gBAAgB,WAAW,GAAG,gBAAgB,aACrD,8BAAC,SAAI,WAAW,eAAe,SAAS,GACtC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,qBAAmB;AAAA,QACnB,cAAY;AAAA,QACZ,kBAAc;AAAA,QACd,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf;AAAA,QACA,WAAW,iBAAiB,UAAU;AAAA,QACtC,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,OAAO,IAAI;AAAA,QACjB,OAAO;AAAA,UACL;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF,GACF;AAAA,IACC,wBAAwB,KACvB,oBAAC,eAAY,YAAY,EAAE,WAAW,GAAG,eAAY,gBAClD,aAAG,aAAa,GAAG,cAAc,yCAAyC,KACzE,OAAO,KAAK,EAAE,YACV,yBACR;AAAA,KAEJ;AAEJ;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,eAAe;AAChC,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB,EAAE,YAAY,eAAe;AACzF,2BAA2B,YAAY;AAIvC,IAAO,2BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useRef } from "react";
|
|
4
|
+
import { useDeprecateComponent } from "@elliemae/ds-utilities";
|
|
4
5
|
import { PropTypes, describe } from "@elliemae/ds-props-helpers";
|
|
5
6
|
import { convertPropToCssClassName } from "@elliemae/ds-classnames";
|
|
6
7
|
import { Circle } from "./Circle";
|
|
@@ -22,6 +23,7 @@ const DSRadio = ({
|
|
|
22
23
|
innerRef,
|
|
23
24
|
...otherProps
|
|
24
25
|
}) => {
|
|
26
|
+
useDeprecateComponent({ componentName: "ds-form/DSRadio", version: "3.x Date: 2023 Q1" });
|
|
25
27
|
const { cssClassName, classNameElement } = convertPropToCssClassName("form-element-radio", className, {
|
|
26
28
|
hasError,
|
|
27
29
|
readOnly,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Radio/DSRadio.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable react/no-unknown-property */\nimport React, { useRef } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { Circle } from './Circle';\n\ninterface DSRadioT {\n [x: string]: unknown;\n innerRef?: React.MutableRefObject<HTMLInputElement>;\n containerProps?: { [x: string]: unknown };\n className?: string;\n style?: React.CSSProperties;\n labelText?: string;\n htmlFor?: string;\n hasError?: boolean;\n readOnly?: boolean;\n disabled?: boolean;\n checked?: boolean;\n value?: string;\n name?: string;\n onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement>;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n children?: React.ReactNode | React.ReactNode[];\n tabIndex?: number;\n}\n\nconst DSRadio = ({\n containerProps,\n className,\n style,\n labelText,\n htmlFor,\n hasError,\n readOnly,\n disabled,\n checked,\n value,\n name,\n onChange,\n children,\n tabIndex,\n innerRef,\n ...otherProps\n}: DSRadioT) => {\n // this will be solved when we move to styled components...\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const { cssClassName, classNameElement } = convertPropToCssClassName('form-element-radio', className, {\n hasError,\n readOnly,\n disabled,\n });\n const checkRef = useRef<HTMLInputElement | null>(null);\n return (\n <div {...containerProps} className={cssClassName}>\n <label className={classNameElement('label')} htmlFor={htmlFor}>\n <input\n {...otherProps}\n ref={checkRef}\n aria-disabled={disabled}\n checked={disabled ? false : checked}\n className={classNameElement('input')}\n disabled={disabled}\n name={name}\n onChange={(e) => {\n if (!readOnly && !disabled) {\n onChange(e);\n }\n }}\n readOnly={readOnly}\n tabIndex={-1}\n type=\"radio\"\n value={value}\n />\n <span\n ref={innerRef}\n aria-checked={checked}\n aria-disabled={disabled}\n className={classNameElement('input-button')}\n onKeyDown={(e) => {\n // really really bad pattern...\n // overwriting the target to point to the hidden input because the focus is on the span and not on the input...\n // we will solve this with a v2 of this when we move to controlled + styled components...\n e.target = checkRef.current;\n if (disabled) return;\n if (e.key === 'Enter' || e.keyCode === 32) {\n onChange(e);\n } else if (otherProps.onKeyDown) {\n otherProps.onKeyDown(e);\n }\n }}\n role=\"radio\"\n style={style}\n tabIndex={disabled ? -1 : tabIndex}\n // value={value} // should be unused?\n >\n <Circle checked={checked} />\n </span>\n <span className={classNameElement('label-text')}>{labelText}</span>\n </label>\n {children && <div className={classNameElement('radio-children')}>{children}</div>}\n </div>\n );\n};\n\nDSRadio.defaultProps = {\n containerProps: {},\n className: '',\n hasError: false,\n readOnly: false,\n disabled: false,\n checked: false,\n name: '',\n onChange: () => null,\n children: null,\n tabIndex: 0,\n};\n\nconst radioProps = {\n /** Injected props to wrapper element of component */\n containerProps: PropTypes.object.description('Injected props to wrapper element of component'),\n /** css class prop */\n className: PropTypes.string.description('css class prop'),\n /** name property to manage form */\n name: PropTypes.string.description('name property to manage form'),\n /**\n * Displayable label for the radio\n */\n labelText: PropTypes.string.description('Displayable label for the radio'),\n /** HTMLFOR property to manage form */\n htmlFor: PropTypes.element.description('HTMLFOR property to manage form'),\n /**\n * Whether the radio has error or not\n */\n hasError: PropTypes.bool.description('Whether the radio has error or not'),\n /**\n * Whether the radio is read only or not\n */\n readOnly: PropTypes.bool.description('Whether the radio is read only or not'),\n /**\n * Whether the radio is disabled or not\n */\n disabled: PropTypes.bool.description('Whether the radio is disabled or not'),\n /**\n * Whether the radio is checked or not\n */\n checked: PropTypes.bool.description('Whether the radio is checked or not'),\n /**\n * Value that takes the checkbox if it is checked\n */\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description(\n 'Value that takes the checkbox if it is checked',\n ).isRequired,\n /**\n * Allows a function that is triggered once the radio changes\n */\n onChange: PropTypes.func.description('Allows a function that is triggered once the radio changes'),\n /**\n * Optional, if you want a checkbox customized\n */\n children: PropTypes.node.description('Optional, if you want a checkbox customized'),\n /** HTML tabindex to manage focus */\n tabIndex: PropTypes.number.description('HTML tabindex to manage focus'),\n /** style override object */\n style: PropTypes.object.description('style override object'),\n};\n\nDSRadio.propTypes = radioProps;\nDSRadio.displayName = 'DSRadio';\nconst DSRadioWithSchema = describe(DSRadio);\nDSRadioWithSchema.propTypes = radioProps;\n\nexport { DSRadio, DSRadioWithSchema };\n\nexport default DSRadio;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable react/no-unknown-property */\nimport React, { useRef } from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { Circle } from './Circle';\n\ninterface DSRadioT {\n [x: string]: unknown;\n innerRef?: React.MutableRefObject<HTMLInputElement>;\n containerProps?: { [x: string]: unknown };\n className?: string;\n style?: React.CSSProperties;\n labelText?: string;\n htmlFor?: string;\n hasError?: boolean;\n readOnly?: boolean;\n disabled?: boolean;\n checked?: boolean;\n value?: string;\n name?: string;\n onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement>;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n children?: React.ReactNode | React.ReactNode[];\n tabIndex?: number;\n}\n\nconst DSRadio = ({\n containerProps,\n className,\n style,\n labelText,\n htmlFor,\n hasError,\n readOnly,\n disabled,\n checked,\n value,\n name,\n onChange,\n children,\n tabIndex,\n innerRef,\n ...otherProps\n}: DSRadioT) => {\n useDeprecateComponent({ componentName: 'ds-form/DSRadio', version: '3.x Date: 2023 Q1' });\n\n // this will be solved when we move to styled components...\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const { cssClassName, classNameElement } = convertPropToCssClassName('form-element-radio', className, {\n hasError,\n readOnly,\n disabled,\n });\n const checkRef = useRef<HTMLInputElement | null>(null);\n return (\n <div {...containerProps} className={cssClassName}>\n <label className={classNameElement('label')} htmlFor={htmlFor}>\n <input\n {...otherProps}\n ref={checkRef}\n aria-disabled={disabled}\n checked={disabled ? false : checked}\n className={classNameElement('input')}\n disabled={disabled}\n name={name}\n onChange={(e) => {\n if (!readOnly && !disabled) {\n onChange(e);\n }\n }}\n readOnly={readOnly}\n tabIndex={-1}\n type=\"radio\"\n value={value}\n />\n <span\n ref={innerRef}\n aria-checked={checked}\n aria-disabled={disabled}\n className={classNameElement('input-button')}\n onKeyDown={(e) => {\n // really really bad pattern...\n // overwriting the target to point to the hidden input because the focus is on the span and not on the input...\n // we will solve this with a v2 of this when we move to controlled + styled components...\n e.target = checkRef.current;\n if (disabled) return;\n if (e.key === 'Enter' || e.keyCode === 32) {\n onChange(e);\n } else if (otherProps.onKeyDown) {\n otherProps.onKeyDown(e);\n }\n }}\n role=\"radio\"\n style={style}\n tabIndex={disabled ? -1 : tabIndex}\n // value={value} // should be unused?\n >\n <Circle checked={checked} />\n </span>\n <span className={classNameElement('label-text')}>{labelText}</span>\n </label>\n {children && <div className={classNameElement('radio-children')}>{children}</div>}\n </div>\n );\n};\n\nDSRadio.defaultProps = {\n containerProps: {},\n className: '',\n hasError: false,\n readOnly: false,\n disabled: false,\n checked: false,\n name: '',\n onChange: () => null,\n children: null,\n tabIndex: 0,\n};\n\nconst radioProps = {\n /** Injected props to wrapper element of component */\n containerProps: PropTypes.object.description('Injected props to wrapper element of component'),\n /** css class prop */\n className: PropTypes.string.description('css class prop'),\n /** name property to manage form */\n name: PropTypes.string.description('name property to manage form'),\n /**\n * Displayable label for the radio\n */\n labelText: PropTypes.string.description('Displayable label for the radio'),\n /** HTMLFOR property to manage form */\n htmlFor: PropTypes.element.description('HTMLFOR property to manage form'),\n /**\n * Whether the radio has error or not\n */\n hasError: PropTypes.bool.description('Whether the radio has error or not'),\n /**\n * Whether the radio is read only or not\n */\n readOnly: PropTypes.bool.description('Whether the radio is read only or not'),\n /**\n * Whether the radio is disabled or not\n */\n disabled: PropTypes.bool.description('Whether the radio is disabled or not'),\n /**\n * Whether the radio is checked or not\n */\n checked: PropTypes.bool.description('Whether the radio is checked or not'),\n /**\n * Value that takes the checkbox if it is checked\n */\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description(\n 'Value that takes the checkbox if it is checked',\n ).isRequired,\n /**\n * Allows a function that is triggered once the radio changes\n */\n onChange: PropTypes.func.description('Allows a function that is triggered once the radio changes'),\n /**\n * Optional, if you want a checkbox customized\n */\n children: PropTypes.node.description('Optional, if you want a checkbox customized'),\n /** HTML tabindex to manage focus */\n tabIndex: PropTypes.number.description('HTML tabindex to manage focus'),\n /** style override object */\n style: PropTypes.object.description('style override object'),\n};\n\nDSRadio.propTypes = radioProps;\nDSRadio.displayName = 'DSRadio';\nconst DSRadioWithSchema = describe(DSRadio);\nDSRadioWithSchema.propTypes = radioProps;\n\nexport { DSRadio, DSRadioWithSchema };\n\nexport default DSRadio;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useDeprecateComponent } from "@elliemae/ds-utilities";
|
|
3
4
|
import { PropTypes, describe } from "@elliemae/ds-props-helpers";
|
|
4
5
|
import { DSToggleImpl } from "./DSToggleImpl";
|
|
5
6
|
import { dsBasicSizes } from "@elliemae/ds-shared";
|
|
@@ -15,22 +16,25 @@ const DSToggle = ({
|
|
|
15
16
|
value,
|
|
16
17
|
size,
|
|
17
18
|
...otherProps
|
|
18
|
-
}) =>
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
19
|
+
}) => {
|
|
20
|
+
useDeprecateComponent({ componentName: "ds-form/Toggle", version: "TBD Date: 2023 Q3" });
|
|
21
|
+
return /* @__PURE__ */ jsx(
|
|
22
|
+
DSToggleImpl,
|
|
23
|
+
{
|
|
24
|
+
...otherProps,
|
|
25
|
+
checked,
|
|
26
|
+
containerProps,
|
|
27
|
+
disabled,
|
|
28
|
+
hasError,
|
|
29
|
+
labelOff,
|
|
30
|
+
labelOn,
|
|
31
|
+
name,
|
|
32
|
+
readOnly,
|
|
33
|
+
size,
|
|
34
|
+
value
|
|
35
|
+
}
|
|
36
|
+
);
|
|
37
|
+
};
|
|
34
38
|
DSToggle.defaultProps = {
|
|
35
39
|
labelOn: "ON",
|
|
36
40
|
labelOff: "OFF",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Toggle/DSToggle.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { DSToggleImpl } from './DSToggleImpl';\nimport { dsBasicSizes } from '@elliemae/ds-shared';\n\nconst DSToggle = ({\n containerProps,\n hasError,\n readOnly,\n disabled,\n checked,\n labelOn,\n labelOff,\n name,\n value,\n size,\n ...otherProps\n}) => (\n <DSToggleImpl\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { DSToggleImpl } from './DSToggleImpl';\nimport { dsBasicSizes } from '@elliemae/ds-shared';\n\nconst DSToggle = ({\n containerProps,\n hasError,\n readOnly,\n disabled,\n checked,\n labelOn,\n labelOff,\n name,\n value,\n size,\n ...otherProps\n}) => {\n useDeprecateComponent({ componentName: 'ds-form/Toggle', version: 'TBD Date: 2023 Q3' });\n\n return (\n <DSToggleImpl\n {...otherProps}\n checked={checked}\n containerProps={containerProps}\n disabled={disabled}\n hasError={hasError}\n labelOff={labelOff}\n labelOn={labelOn}\n name={name}\n readOnly={readOnly}\n size={size}\n value={value}\n />\n );\n};\n\nDSToggle.defaultProps = {\n labelOn: 'ON',\n labelOff: 'OFF',\n size: 's',\n hasError: false,\n readOnly: false,\n disabled: false,\n checked: undefined,\n};\n\nconst props = {\n /**\n * Set of Properties attached to the main container\n */\n containerProps: PropTypes.shape({}).description('Set of Properties attached to the main container'),\n /**\n * Whether the toggle has error or not\n */\n hasError: PropTypes.bool.description('Whether the toggle has error or not'),\n /**\n * Whether the toggle is read only or not\n */\n readOnly: PropTypes.bool.description('Whether the toggle is read only or not'),\n /**\n * Whether the toggle is disabled or not\n */\n disabled: PropTypes.bool.description('Whether the toggle is disabled or not'),\n /**\n * Whether the toggle is checked or not\n */\n checked: PropTypes.bool.description('Whether the toggle is checked or not'),\n /**\n * Allows a function that is triggered once the toggle changes\n */\n onChange: PropTypes.func.description('Allows a function that is triggered once the toggle changes'),\n /**\n * Label to show when the toggle is ON\n */\n labelOn: PropTypes.string.description('Label to show when the toggle is ON'),\n /**\n * Label to show when the toggle is OFF\n */\n labelOff: PropTypes.string.description('Label to show when the toggle is OFF'),\n /**\n * Default value once the component is initialized\n */\n value: PropTypes.string.description('Default value once the component is initialized'),\n /**\n * ['s', 'm', 'l']\n */\n size: PropTypes.oneOf(dsBasicSizes).description(\"['s', 'm', 'l']\"),\n /**\n * Input name\n */\n name: PropTypes.string.description('Input name'),\n};\n\nDSToggle.propTypes = props;\nDSToggle.displayName = 'DSToggle';\nconst DSToggleWithSchema = describe(DSToggle);\n\nDSToggleWithSchema.propTypes = props;\n\nexport default DSToggle;\n\nexport { DSToggleWithSchema, DSToggle };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsBnB;AArBJ,SAAS,6BAA6B;AACtC,SAAS,WAAW,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAE7B,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,wBAAsB,EAAE,eAAe,kBAAkB,SAAS,oBAAoB,CAAC;AAEvF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,QAAQ;AAAA,EAIZ,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAIlG,UAAU,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAI1E,UAAU,UAAU,KAAK,YAAY,wCAAwC;AAAA,EAI7E,UAAU,UAAU,KAAK,YAAY,uCAAuC;AAAA,EAI5E,SAAS,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAI1E,UAAU,UAAU,KAAK,YAAY,6DAA6D;AAAA,EAIlG,SAAS,UAAU,OAAO,YAAY,qCAAqC;AAAA,EAI3E,UAAU,UAAU,OAAO,YAAY,sCAAsC;AAAA,EAI7E,OAAO,UAAU,OAAO,YAAY,iDAAiD;AAAA,EAIrF,MAAM,UAAU,MAAM,YAAY,EAAE,YAAY,iBAAiB;AAAA,EAIjE,MAAM,UAAU,OAAO,YAAY,YAAY;AACjD;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAE5C,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form",
|
|
3
|
-
"version": "3.16.0-next.
|
|
3
|
+
"version": "3.16.0-next.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Form",
|
|
6
6
|
"files": [
|
|
@@ -481,18 +481,18 @@
|
|
|
481
481
|
"react-select": "~4.3.1",
|
|
482
482
|
"resize-observer": "~1.0.4",
|
|
483
483
|
"text-mask-core": "5.1.2",
|
|
484
|
-
"@elliemae/ds-
|
|
485
|
-
"@elliemae/ds-
|
|
486
|
-
"@elliemae/ds-
|
|
487
|
-
"@elliemae/ds-
|
|
488
|
-
"@elliemae/ds-
|
|
489
|
-
"@elliemae/ds-
|
|
490
|
-
"@elliemae/ds-shared": "3.16.0-next.
|
|
491
|
-
"@elliemae/ds-system": "3.16.0-next.
|
|
492
|
-
"@elliemae/ds-text-wrapper": "3.16.0-next.
|
|
493
|
-
"@elliemae/ds-tooltip": "3.16.0-next.
|
|
494
|
-
"@elliemae/ds-truncated-tooltip-text": "3.16.0-next.
|
|
495
|
-
"@elliemae/ds-utilities": "3.16.0-next.
|
|
484
|
+
"@elliemae/ds-button": "3.16.0-next.6",
|
|
485
|
+
"@elliemae/ds-classnames": "3.16.0-next.6",
|
|
486
|
+
"@elliemae/ds-common": "3.16.0-next.6",
|
|
487
|
+
"@elliemae/ds-grid": "3.16.0-next.6",
|
|
488
|
+
"@elliemae/ds-icons": "3.16.0-next.6",
|
|
489
|
+
"@elliemae/ds-props-helpers": "3.16.0-next.6",
|
|
490
|
+
"@elliemae/ds-shared": "3.16.0-next.6",
|
|
491
|
+
"@elliemae/ds-system": "3.16.0-next.6",
|
|
492
|
+
"@elliemae/ds-text-wrapper": "3.16.0-next.6",
|
|
493
|
+
"@elliemae/ds-tooltip": "3.16.0-next.6",
|
|
494
|
+
"@elliemae/ds-truncated-tooltip-text": "3.16.0-next.6",
|
|
495
|
+
"@elliemae/ds-utilities": "3.16.0-next.6"
|
|
496
496
|
},
|
|
497
497
|
"devDependencies": {
|
|
498
498
|
"@testing-library/dom": "~8.19.0",
|
package/dist/cjs/package.json
DELETED