@elliemae/ds-date-range-selector 3.0.0-next.43 → 3.0.0-next.46
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.
|
@@ -108,6 +108,8 @@ class DateTimeRecurenceSelectorImpl extends import_react.Component {
|
|
|
108
108
|
focusedInput: START_DATE,
|
|
109
109
|
customRange
|
|
110
110
|
};
|
|
111
|
+
this.onDatesChange = this.onDatesChange.bind(this);
|
|
112
|
+
this.onFocusChange = this.onFocusChange.bind(this);
|
|
111
113
|
const { customOptionRender: CustomOptionRender } = props;
|
|
112
114
|
advanceOption.label = /* @__PURE__ */ import_react.default.createElement(CustomOptionRender, {
|
|
113
115
|
customRange
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/DateRangeSelectorImpl.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport moment from 'moment';\nimport { components } from 'react-select';\nimport 'react-dates/initialize';\nimport { DayPickerRangeController } from 'react-dates';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSComboBox } from '@elliemae/ds-form';\nimport DSPopper from '@elliemae/ds-popper';\nimport { DatePickerDay, DatePickerNavigation } from '@elliemae/ds-date-picker';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { CUSTOM_OPTION_VALUE } from '../options/dropdownPreselectedOptions';\n\nconst START_DATE = 'startDate';\nconst END_DATE = 'endDate';\n\nconst advanceOption = {\n label: 'Custom',\n value: CUSTOM_OPTION_VALUE,\n isAdvance: true,\n};\nconst { cssClassName, classNameElement, classNameBlock } = convertPropToCssClassName('date-range-selector');\n\nconst { classNameElement: pickerNameElement } = convertPropToCssClassName('datepicker');\n\nclass DateTimeRecurenceSelectorImpl extends Component {\n constructor(props) {\n super(props);\n\n const customRange = {\n startDate: props.startDate ? moment(props.startDate) : moment(),\n endDate: props.endDate ? moment(props.endDate) : moment(),\n };\n this.state = {\n openModal: false,\n selected: props.value,\n focusedInput: START_DATE,\n customRange,\n };\n const { customOptionRender: CustomOptionRender } = props;\n advanceOption.label = <CustomOptionRender customRange={customRange} />;\n }\n\n onChange = () => {\n const { onChange } = this.props;\n const { customRange, selected } = this.state;\n onChange(selected, customRange);\n };\n\n onChangeDropdown = (value) => {\n const { dropdownPreselectedOptions } = this.props;\n const selected = dropdownPreselectedOptions.find((op) => op.value === value);\n const { onChange } = this.props;\n if (!selected) {\n this.setState({ selected: value });\n this.handleOpenModal();\n } else if (selected) {\n onChange(value);\n this.setState({ selected: value, openModal: false });\n }\n };\n\n onDatesChange({ startDate, endDate }) {\n this.setState(\n {\n customRange: {\n startDate,\n endDate,\n },\n },\n () => {\n this.onChange();\n },\n );\n }\n\n onFocusChange() {\n this.setState(({ focusedInput }) => ({\n focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE,\n }));\n }\n\n handleConfirm = () => {\n const { customOptionRender: CustomOptionRender } = this.props;\n const { customRange } = this.state;\n advanceOption.label = <CustomOptionRender customRange={customRange} />;\n this.onChange();\n this.handleCloseModal();\n };\n\n handleOpenModal = () => this.setState({ openModal: true });\n\n handleCloseModal = () => this.setState({ openModal: false });\n\n render() {\n const {\n placeholder,\n dropdownPreselectedOptions,\n displayFormatDay,\n className,\n disableCustomOption,\n containerProps,\n } = this.props;\n const {\n selected,\n openModal,\n focusedInput,\n customRange: { startDate, endDate },\n } = this.state;\n\n let options = [...dropdownPreselectedOptions];\n if (!disableCustomOption) {\n options = [...options, advanceOption];\n // eslint-disable-next-line max-lines\n }\n\n return (\n <div {...containerProps} className={`${cssClassName} ${className}`}>\n <div className={`${classNameBlock('container-selector')}`}>\n <DSComboBox\n className={`${classNameElement('dropdown-field-selector')}`}\n components={{\n Option: (props) => <components.Option {...props} />,\n IndicatorSeparator: () => null,\n }}\n onChange={this.onChangeDropdown}\n onKeyDown={this.onKeyDown}\n options={options}\n placeholder={placeholder}\n value={selected}\n keepTypedValue={false} // TEMPORARY FIX\n />\n </div>\n <DSPopper\n contentComponent={\n <div className={classNameBlock('wrap-day-picker')}>\n <DayPickerRangeController\n endDate={endDate}\n focusedInput={focusedInput}\n hideKeyboardShortcutsPanel\n navNext={<DatePickerNavigation className={pickerNameElement('navigation-next')} />}\n navPrev={<DatePickerNavigation className={pickerNameElement('navigation-prev')} icon={ChevronLeft} />}\n onDatesChange={this.onDatesChange}\n onFocusChange={this.onFocusChange}\n onOutsideClick={this.handleConfirm}\n renderDayContents={(date) => (\n <DatePickerDay className={pickerNameElement('day-contents')} date={date.format(displayFormatDay)} />\n )}\n startDate={startDate}\n />\n </div>\n }\n isOpen={openModal}\n showArrow={false}\n triggerComponent={<div />}\n />\n </div>\n );\n }\n}\n\nexport default DateTimeRecurenceSelectorImpl;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiC;AACjC,oBAAmB;AACnB,0BAA2B;AAC3B,wBAAO;AACP,yBAAyC;AACzC,2BAA0C;AAC1C,qBAA2B;AAC3B,uBAAqB;AACrB,4BAAoD;AACpD,sBAA4B;AAC5B,wCAAoC;AAEpC,MAAM,aAAa;AACnB,MAAM,WAAW;AAEjB,MAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AACb;AACA,MAAM,EAAE,cAAc,kBAAkB,mBAAmB,oDAA0B,qBAAqB;AAE1G,MAAM,EAAE,kBAAkB,sBAAsB,oDAA0B,YAAY;AAEtF,MAAM,sCAAsC,uBAAU;AAAA,EACpD,YAAY,OAAO;AACjB,UAAM,KAAK;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport moment from 'moment';\nimport { components } from 'react-select';\nimport 'react-dates/initialize';\nimport { DayPickerRangeController } from 'react-dates';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSComboBox } from '@elliemae/ds-form';\nimport DSPopper from '@elliemae/ds-popper';\nimport { DatePickerDay, DatePickerNavigation } from '@elliemae/ds-date-picker';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { CUSTOM_OPTION_VALUE } from '../options/dropdownPreselectedOptions';\n\nconst START_DATE = 'startDate';\nconst END_DATE = 'endDate';\n\nconst advanceOption = {\n label: 'Custom',\n value: CUSTOM_OPTION_VALUE,\n isAdvance: true,\n};\nconst { cssClassName, classNameElement, classNameBlock } = convertPropToCssClassName('date-range-selector');\n\nconst { classNameElement: pickerNameElement } = convertPropToCssClassName('datepicker');\n\nclass DateTimeRecurenceSelectorImpl extends Component {\n constructor(props) {\n super(props);\n\n const customRange = {\n startDate: props.startDate ? moment(props.startDate) : moment(),\n endDate: props.endDate ? moment(props.endDate) : moment(),\n };\n this.state = {\n openModal: false,\n selected: props.value,\n focusedInput: START_DATE,\n customRange,\n };\n\n this.onDatesChange = this.onDatesChange.bind(this);\n this.onFocusChange = this.onFocusChange.bind(this);\n\n const { customOptionRender: CustomOptionRender } = props;\n advanceOption.label = <CustomOptionRender customRange={customRange} />;\n }\n\n onChange = () => {\n const { onChange } = this.props;\n const { customRange, selected } = this.state;\n onChange(selected, customRange);\n };\n\n onChangeDropdown = (value) => {\n const { dropdownPreselectedOptions } = this.props;\n const selected = dropdownPreselectedOptions.find((op) => op.value === value);\n const { onChange } = this.props;\n if (!selected) {\n this.setState({ selected: value });\n this.handleOpenModal();\n } else if (selected) {\n onChange(value);\n this.setState({ selected: value, openModal: false });\n }\n };\n\n onDatesChange({ startDate, endDate }) {\n this.setState(\n {\n customRange: {\n startDate,\n endDate,\n },\n },\n () => {\n this.onChange();\n },\n );\n }\n\n onFocusChange() {\n this.setState(({ focusedInput }) => ({\n focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE,\n }));\n }\n\n handleConfirm = () => {\n const { customOptionRender: CustomOptionRender } = this.props;\n const { customRange } = this.state;\n advanceOption.label = <CustomOptionRender customRange={customRange} />;\n this.onChange();\n this.handleCloseModal();\n };\n\n handleOpenModal = () => this.setState({ openModal: true });\n\n handleCloseModal = () => this.setState({ openModal: false });\n\n render() {\n const {\n placeholder,\n dropdownPreselectedOptions,\n displayFormatDay,\n className,\n disableCustomOption,\n containerProps,\n } = this.props;\n const {\n selected,\n openModal,\n focusedInput,\n customRange: { startDate, endDate },\n } = this.state;\n\n let options = [...dropdownPreselectedOptions];\n if (!disableCustomOption) {\n options = [...options, advanceOption];\n // eslint-disable-next-line max-lines\n }\n\n return (\n <div {...containerProps} className={`${cssClassName} ${className}`}>\n <div className={`${classNameBlock('container-selector')}`}>\n <DSComboBox\n className={`${classNameElement('dropdown-field-selector')}`}\n components={{\n Option: (props) => <components.Option {...props} />,\n IndicatorSeparator: () => null,\n }}\n onChange={this.onChangeDropdown}\n onKeyDown={this.onKeyDown}\n options={options}\n placeholder={placeholder}\n value={selected}\n keepTypedValue={false} // TEMPORARY FIX\n />\n </div>\n <DSPopper\n contentComponent={\n <div className={classNameBlock('wrap-day-picker')}>\n <DayPickerRangeController\n endDate={endDate}\n focusedInput={focusedInput}\n hideKeyboardShortcutsPanel\n navNext={<DatePickerNavigation className={pickerNameElement('navigation-next')} />}\n navPrev={<DatePickerNavigation className={pickerNameElement('navigation-prev')} icon={ChevronLeft} />}\n onDatesChange={this.onDatesChange}\n onFocusChange={this.onFocusChange}\n onOutsideClick={this.handleConfirm}\n renderDayContents={(date) => (\n <DatePickerDay className={pickerNameElement('day-contents')} date={date.format(displayFormatDay)} />\n )}\n startDate={startDate}\n />\n </div>\n }\n isOpen={openModal}\n showArrow={false}\n triggerComponent={<div />}\n />\n </div>\n );\n }\n}\n\nexport default DateTimeRecurenceSelectorImpl;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -79,6 +79,8 @@ class DateTimeRecurenceSelectorImpl extends Component {
|
|
|
79
79
|
focusedInput: START_DATE,
|
|
80
80
|
customRange
|
|
81
81
|
};
|
|
82
|
+
this.onDatesChange = this.onDatesChange.bind(this);
|
|
83
|
+
this.onFocusChange = this.onFocusChange.bind(this);
|
|
82
84
|
const { customOptionRender: CustomOptionRender } = props;
|
|
83
85
|
advanceOption.label = /* @__PURE__ */ React2.createElement(CustomOptionRender, {
|
|
84
86
|
customRange
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/DateRangeSelectorImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport moment from 'moment';\nimport { components } from 'react-select';\nimport 'react-dates/initialize';\nimport { DayPickerRangeController } from 'react-dates';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSComboBox } from '@elliemae/ds-form';\nimport DSPopper from '@elliemae/ds-popper';\nimport { DatePickerDay, DatePickerNavigation } from '@elliemae/ds-date-picker';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { CUSTOM_OPTION_VALUE } from '../options/dropdownPreselectedOptions';\n\nconst START_DATE = 'startDate';\nconst END_DATE = 'endDate';\n\nconst advanceOption = {\n label: 'Custom',\n value: CUSTOM_OPTION_VALUE,\n isAdvance: true,\n};\nconst { cssClassName, classNameElement, classNameBlock } = convertPropToCssClassName('date-range-selector');\n\nconst { classNameElement: pickerNameElement } = convertPropToCssClassName('datepicker');\n\nclass DateTimeRecurenceSelectorImpl extends Component {\n constructor(props) {\n super(props);\n\n const customRange = {\n startDate: props.startDate ? moment(props.startDate) : moment(),\n endDate: props.endDate ? moment(props.endDate) : moment(),\n };\n this.state = {\n openModal: false,\n selected: props.value,\n focusedInput: START_DATE,\n customRange,\n };\n const { customOptionRender: CustomOptionRender } = props;\n advanceOption.label = <CustomOptionRender customRange={customRange} />;\n }\n\n onChange = () => {\n const { onChange } = this.props;\n const { customRange, selected } = this.state;\n onChange(selected, customRange);\n };\n\n onChangeDropdown = (value) => {\n const { dropdownPreselectedOptions } = this.props;\n const selected = dropdownPreselectedOptions.find((op) => op.value === value);\n const { onChange } = this.props;\n if (!selected) {\n this.setState({ selected: value });\n this.handleOpenModal();\n } else if (selected) {\n onChange(value);\n this.setState({ selected: value, openModal: false });\n }\n };\n\n onDatesChange({ startDate, endDate }) {\n this.setState(\n {\n customRange: {\n startDate,\n endDate,\n },\n },\n () => {\n this.onChange();\n },\n );\n }\n\n onFocusChange() {\n this.setState(({ focusedInput }) => ({\n focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE,\n }));\n }\n\n handleConfirm = () => {\n const { customOptionRender: CustomOptionRender } = this.props;\n const { customRange } = this.state;\n advanceOption.label = <CustomOptionRender customRange={customRange} />;\n this.onChange();\n this.handleCloseModal();\n };\n\n handleOpenModal = () => this.setState({ openModal: true });\n\n handleCloseModal = () => this.setState({ openModal: false });\n\n render() {\n const {\n placeholder,\n dropdownPreselectedOptions,\n displayFormatDay,\n className,\n disableCustomOption,\n containerProps,\n } = this.props;\n const {\n selected,\n openModal,\n focusedInput,\n customRange: { startDate, endDate },\n } = this.state;\n\n let options = [...dropdownPreselectedOptions];\n if (!disableCustomOption) {\n options = [...options, advanceOption];\n // eslint-disable-next-line max-lines\n }\n\n return (\n <div {...containerProps} className={`${cssClassName} ${className}`}>\n <div className={`${classNameBlock('container-selector')}`}>\n <DSComboBox\n className={`${classNameElement('dropdown-field-selector')}`}\n components={{\n Option: (props) => <components.Option {...props} />,\n IndicatorSeparator: () => null,\n }}\n onChange={this.onChangeDropdown}\n onKeyDown={this.onKeyDown}\n options={options}\n placeholder={placeholder}\n value={selected}\n keepTypedValue={false} // TEMPORARY FIX\n />\n </div>\n <DSPopper\n contentComponent={\n <div className={classNameBlock('wrap-day-picker')}>\n <DayPickerRangeController\n endDate={endDate}\n focusedInput={focusedInput}\n hideKeyboardShortcutsPanel\n navNext={<DatePickerNavigation className={pickerNameElement('navigation-next')} />}\n navPrev={<DatePickerNavigation className={pickerNameElement('navigation-prev')} icon={ChevronLeft} />}\n onDatesChange={this.onDatesChange}\n onFocusChange={this.onFocusChange}\n onOutsideClick={this.handleConfirm}\n renderDayContents={(date) => (\n <DatePickerDay className={pickerNameElement('day-contents')} date={date.format(displayFormatDay)} />\n )}\n startDate={startDate}\n />\n </div>\n }\n isOpen={openModal}\n showArrow={false}\n triggerComponent={<div />}\n />\n </div>\n );\n }\n}\n\nexport default DateTimeRecurenceSelectorImpl;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,aAAa;AACnB,MAAM,WAAW;AAEjB,MAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AACb;AACA,MAAM,EAAE,cAAc,kBAAkB,mBAAmB,0BAA0B,qBAAqB;AAE1G,MAAM,EAAE,kBAAkB,sBAAsB,0BAA0B,YAAY;AAEtF,MAAM,sCAAsC,UAAU;AAAA,EACpD,YAAY,OAAO;AACjB,UAAM,KAAK;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport moment from 'moment';\nimport { components } from 'react-select';\nimport 'react-dates/initialize';\nimport { DayPickerRangeController } from 'react-dates';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSComboBox } from '@elliemae/ds-form';\nimport DSPopper from '@elliemae/ds-popper';\nimport { DatePickerDay, DatePickerNavigation } from '@elliemae/ds-date-picker';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { CUSTOM_OPTION_VALUE } from '../options/dropdownPreselectedOptions';\n\nconst START_DATE = 'startDate';\nconst END_DATE = 'endDate';\n\nconst advanceOption = {\n label: 'Custom',\n value: CUSTOM_OPTION_VALUE,\n isAdvance: true,\n};\nconst { cssClassName, classNameElement, classNameBlock } = convertPropToCssClassName('date-range-selector');\n\nconst { classNameElement: pickerNameElement } = convertPropToCssClassName('datepicker');\n\nclass DateTimeRecurenceSelectorImpl extends Component {\n constructor(props) {\n super(props);\n\n const customRange = {\n startDate: props.startDate ? moment(props.startDate) : moment(),\n endDate: props.endDate ? moment(props.endDate) : moment(),\n };\n this.state = {\n openModal: false,\n selected: props.value,\n focusedInput: START_DATE,\n customRange,\n };\n\n this.onDatesChange = this.onDatesChange.bind(this);\n this.onFocusChange = this.onFocusChange.bind(this);\n\n const { customOptionRender: CustomOptionRender } = props;\n advanceOption.label = <CustomOptionRender customRange={customRange} />;\n }\n\n onChange = () => {\n const { onChange } = this.props;\n const { customRange, selected } = this.state;\n onChange(selected, customRange);\n };\n\n onChangeDropdown = (value) => {\n const { dropdownPreselectedOptions } = this.props;\n const selected = dropdownPreselectedOptions.find((op) => op.value === value);\n const { onChange } = this.props;\n if (!selected) {\n this.setState({ selected: value });\n this.handleOpenModal();\n } else if (selected) {\n onChange(value);\n this.setState({ selected: value, openModal: false });\n }\n };\n\n onDatesChange({ startDate, endDate }) {\n this.setState(\n {\n customRange: {\n startDate,\n endDate,\n },\n },\n () => {\n this.onChange();\n },\n );\n }\n\n onFocusChange() {\n this.setState(({ focusedInput }) => ({\n focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE,\n }));\n }\n\n handleConfirm = () => {\n const { customOptionRender: CustomOptionRender } = this.props;\n const { customRange } = this.state;\n advanceOption.label = <CustomOptionRender customRange={customRange} />;\n this.onChange();\n this.handleCloseModal();\n };\n\n handleOpenModal = () => this.setState({ openModal: true });\n\n handleCloseModal = () => this.setState({ openModal: false });\n\n render() {\n const {\n placeholder,\n dropdownPreselectedOptions,\n displayFormatDay,\n className,\n disableCustomOption,\n containerProps,\n } = this.props;\n const {\n selected,\n openModal,\n focusedInput,\n customRange: { startDate, endDate },\n } = this.state;\n\n let options = [...dropdownPreselectedOptions];\n if (!disableCustomOption) {\n options = [...options, advanceOption];\n // eslint-disable-next-line max-lines\n }\n\n return (\n <div {...containerProps} className={`${cssClassName} ${className}`}>\n <div className={`${classNameBlock('container-selector')}`}>\n <DSComboBox\n className={`${classNameElement('dropdown-field-selector')}`}\n components={{\n Option: (props) => <components.Option {...props} />,\n IndicatorSeparator: () => null,\n }}\n onChange={this.onChangeDropdown}\n onKeyDown={this.onKeyDown}\n options={options}\n placeholder={placeholder}\n value={selected}\n keepTypedValue={false} // TEMPORARY FIX\n />\n </div>\n <DSPopper\n contentComponent={\n <div className={classNameBlock('wrap-day-picker')}>\n <DayPickerRangeController\n endDate={endDate}\n focusedInput={focusedInput}\n hideKeyboardShortcutsPanel\n navNext={<DatePickerNavigation className={pickerNameElement('navigation-next')} />}\n navPrev={<DatePickerNavigation className={pickerNameElement('navigation-prev')} icon={ChevronLeft} />}\n onDatesChange={this.onDatesChange}\n onFocusChange={this.onFocusChange}\n onOutsideClick={this.handleConfirm}\n renderDayContents={(date) => (\n <DatePickerDay className={pickerNameElement('day-contents')} date={date.format(displayFormatDay)} />\n )}\n startDate={startDate}\n />\n </div>\n }\n isOpen={openModal}\n showArrow={false}\n triggerComponent={<div />}\n />\n </div>\n );\n }\n}\n\nexport default DateTimeRecurenceSelectorImpl;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-date-range-selector",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.46",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Date Range Selector",
|
|
6
6
|
"files": [
|
|
@@ -51,11 +51,11 @@
|
|
|
51
51
|
"indent": 4
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@elliemae/ds-classnames": "3.0.0-next.
|
|
55
|
-
"@elliemae/ds-date-picker": "3.0.0-next.
|
|
56
|
-
"@elliemae/ds-form": "3.0.0-next.
|
|
57
|
-
"@elliemae/ds-icons": "3.0.0-next.
|
|
58
|
-
"@elliemae/ds-popper": "3.0.0-next.
|
|
54
|
+
"@elliemae/ds-classnames": "3.0.0-next.46",
|
|
55
|
+
"@elliemae/ds-date-picker": "3.0.0-next.46",
|
|
56
|
+
"@elliemae/ds-form": "3.0.0-next.46",
|
|
57
|
+
"@elliemae/ds-icons": "3.0.0-next.46",
|
|
58
|
+
"@elliemae/ds-popper": "3.0.0-next.46",
|
|
59
59
|
"moment": "~2.29.1",
|
|
60
60
|
"react-dates": "~21.8.0",
|
|
61
61
|
"react-desc": "~4.1.3",
|