@elliemae/ds-form-date-time-picker 3.14.0-rc.7 → 3.14.0-rc.8
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/parts/ControlledDateTimePickerContent.js +1 -4
- package/dist/cjs/parts/ControlledDateTimePickerContent.js.map +2 -2
- package/dist/cjs/parts/Styleds.js +1 -1
- package/dist/cjs/parts/Styleds.js.map +2 -2
- package/dist/esm/parts/ControlledDateTimePickerContent.js +1 -4
- package/dist/esm/parts/ControlledDateTimePickerContent.js.map +2 -2
- package/dist/esm/parts/Styleds.js +1 -1
- package/dist/esm/parts/Styleds.js.map +2 -2
- package/package.json +8 -8
|
@@ -42,10 +42,7 @@ const ControlledDateTimePickerContent = () => {
|
|
|
42
42
|
const {
|
|
43
43
|
props: { hasError, disabled },
|
|
44
44
|
hideDate,
|
|
45
|
-
hideDatePicker,
|
|
46
45
|
hideTime,
|
|
47
|
-
hideTimePicker,
|
|
48
|
-
hideDateTimePicker,
|
|
49
46
|
withAnyPicker,
|
|
50
47
|
withAnyRightController,
|
|
51
48
|
shouldPreserveClearableSpace,
|
|
@@ -78,7 +75,7 @@ const ControlledDateTimePickerContent = () => {
|
|
|
78
75
|
{
|
|
79
76
|
cols: mainCols,
|
|
80
77
|
gutter: "xxs",
|
|
81
|
-
pr:
|
|
78
|
+
pr: !withAnyRightController ? "2px" : "0px",
|
|
82
79
|
onKeyDown: onGlobalKeyDown,
|
|
83
80
|
disabled,
|
|
84
81
|
onBlur: trackFocusResetter,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/ControlledDateTimePickerContent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX';\nimport { StyledInputsWrapperGrid } from './Styleds';\nimport { DateInputs } from './DateInputs/DateInputs';\nimport { TimeInputs } from './TimeInputs/TimeInputs';\nimport { PickersIcons } from './Pickers/PickersIcons';\nimport { ClearButton } from './ClearButton/ClearButton';\nimport { ControlledDateTimePickerDatatestid } from '../ControlledDateTimePickerDatatestid';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n const {\n props: { hasError, disabled },\n hideDate,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX';\nimport { StyledInputsWrapperGrid } from './Styleds';\nimport { DateInputs } from './DateInputs/DateInputs';\nimport { TimeInputs } from './TimeInputs/TimeInputs';\nimport { PickersIcons } from './Pickers/PickersIcons';\nimport { ClearButton } from './ClearButton/ClearButton';\nimport { ControlledDateTimePickerDatatestid } from '../ControlledDateTimePickerDatatestid';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n const {\n props: { hasError, disabled },\n hideDate,\n hideTime,\n withAnyPicker,\n withAnyRightController,\n shouldPreserveClearableSpace,\n isControllerOnly,\n globalAttrs,\n xstyledAttrs,\n onGlobalKeyDown,\n trackFocusResetter,\n } = useContext(ControlledDateTimePickerContext);\n\n const styledsAttrs = {\n justPicker: hideDate && hideTime,\n withAnyPicker,\n hasError,\n isControllerOnly,\n };\n\n const mainCols = [];\n if (!hideDate) mainCols.push('auto');\n if (!hideTime) mainCols.push('auto');\n if (withAnyRightController) mainCols.push('auto');\n\n const rightControlCols = [];\n if (shouldPreserveClearableSpace) rightControlCols.push('28px');\n if (withAnyPicker) rightControlCols.push('auto');\n\n return (\n <>\n {/* The <div> element is catching the component-wise global hotkeys, there is no valid aria role for this */}\n {/* eslint-disable-next-line max-len */}\n {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <StyledInputsWrapperGrid\n cols={mainCols}\n gutter=\"xxs\"\n pr={!withAnyRightController ? '2px' : '0px'}\n onKeyDown={onGlobalKeyDown}\n disabled={disabled}\n onBlur={trackFocusResetter}\n data-testid={ControlledDateTimePickerDatatestid.CONTAINER}\n {...styledsAttrs}\n {...globalAttrs}\n {...xstyledAttrs}\n >\n {hideDate ? null : <DateInputs />}\n {hideTime ? null : <TimeInputs />}\n {withAnyRightController ? (\n <Grid cols={rightControlCols}>\n {shouldPreserveClearableSpace ? <ClearButton /> : null}\n {withAnyPicker ? <PickersIcons /> : null}\n </Grid>\n ) : null}\n </StyledInputsWrapperGrid>\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CnB;AA1CJ,mBAAkC;AAClC,qBAAqB;AACrB,yCAAgD;AAChD,qBAAwC;AACxC,wBAA2B;AAC3B,wBAA2B;AAC3B,0BAA6B;AAC7B,yBAA4B;AAC5B,gDAAmD;AAE5C,MAAM,kCAAkC,MAAmB;AAChE,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAE9C,QAAM,eAAe;AAAA,IACnB,YAAY,YAAY;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,CAAC;AAClB,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI;AAAwB,aAAS,KAAK,MAAM;AAEhD,QAAM,mBAAmB,CAAC;AAC1B,MAAI;AAA8B,qBAAiB,KAAK,MAAM;AAC9D,MAAI;AAAe,qBAAiB,KAAK,MAAM;AAE/C,SACE,2EAKE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP,IAAI,CAAC,yBAAyB,QAAQ;AAAA,MACtC,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR,eAAa,6EAAmC;AAAA,MAC/C,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,mBAAW,OAAO,4CAAC,gCAAW;AAAA,QAC9B,WAAW,OAAO,4CAAC,gCAAW;AAAA,QAC9B,yBACC,6CAAC,uBAAK,MAAM,kBACT;AAAA,yCAA+B,4CAAC,kCAAY,IAAK;AAAA,UACjD,gBAAgB,4CAAC,oCAAa,IAAK;AAAA,WACtC,IACE;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -65,6 +65,7 @@ const ResettedInput = (0, import_ds_system.styled)("input", {
|
|
|
65
65
|
const StyledSeparator = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
66
66
|
padding-top: 2px;
|
|
67
67
|
margin: auto;
|
|
68
|
+
color: neutral-500;
|
|
68
69
|
`;
|
|
69
70
|
const StyledColonSeparator = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
70
71
|
padding-bottom: 1px;
|
|
@@ -103,7 +104,6 @@ const StyledInputsWrapperGrid = (0, import_ds_system.styled)(import_ds_grid.Grid
|
|
|
103
104
|
|
|
104
105
|
border-radius: 2px;
|
|
105
106
|
padding-left: ${({ justPicker }) => justPicker ? "0" : "2px"};
|
|
106
|
-
padding-right: ${({ withAnyPicker }) => withAnyPicker ? "" : "2px"};
|
|
107
107
|
|
|
108
108
|
position: relative;
|
|
109
109
|
${({ theme, disabled }) => disabled ? `background-color: ${theme.colors.neutral[100]};` : ``}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Styleds.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../exported-related/theming';\n\nconst ResettedInput = styled('input', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.INPUT,\n})`\n border: none;\n box-shadow: none;\n background: none;\n text-align: center;\n height: 100%;\n display: flex;\n align-items: center;\n :focus {\n outline: none;\n }\n padding-top: 2px;\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n color: ${th.color('neutral-500')};\n }\n`;\n\nexport const StyledSeparator = styled(Grid)`\n padding-top: 2px;\n margin: auto;\n`;\n\nexport const StyledColonSeparator = styled(Grid)`\n padding-bottom: 1px;\n margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTAINER,\n})`\n width: max-content;\n align-items: center;\n background-color: white;\n ${({ isControllerOnly }) =>\n isControllerOnly\n ? ``\n : `\n height: 28px; \n border-width: 1px;\n border-style: solid;\n `}\n\n border-color: ${({ theme, hasError, disabled }) => {\n if (hasError) return theme.colors.danger[900];\n if (disabled) return theme.colors.neutral[400];\n return theme.colors.neutral[200];\n }};\n\n border-radius: 2px;\n padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA2B;AAC3B,qBAAqB;AACrB,uBAA2B;AAC3B,qBAAgF;AAEhF,MAAM,oBAAgB,yBAAO,SAAS;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAckB,oBAAG,WAAW,SAAS;AAAA,aAC7B,oBAAG,MAAM,aAAa;AAAA;AAAA;AAI5B,MAAM,sBAAkB,yBAAO,mBAAI;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../exported-related/theming';\n\nconst ResettedInput = styled('input', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.INPUT,\n})`\n border: none;\n box-shadow: none;\n background: none;\n text-align: center;\n height: 100%;\n display: flex;\n align-items: center;\n :focus {\n outline: none;\n }\n padding-top: 2px;\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n color: ${th.color('neutral-500')};\n }\n`;\n\nexport const StyledSeparator = styled(Grid)`\n padding-top: 2px;\n margin: auto;\n color: neutral-500;\n`;\n\nexport const StyledColonSeparator = styled(Grid)`\n padding-bottom: 1px;\n margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTAINER,\n})`\n width: max-content;\n align-items: center;\n background-color: white;\n ${({ isControllerOnly }) =>\n isControllerOnly\n ? ``\n : `\n height: 28px; \n border-width: 1px;\n border-style: solid;\n `}\n\n border-color: ${({ theme, hasError, disabled }) => {\n if (hasError) return theme.colors.danger[900];\n if (disabled) return theme.colors.neutral[400];\n return theme.colors.neutral[200];\n }};\n\n border-radius: 2px;\n padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n\n position: relative;\n ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n`;\n\nexport const StyledDateInputsWrapperGrid = styled.div`\n display: grid;\n grid-template-columns: 24px min-content 24px min-content 48px;\n grid-template-rows: min-content;\n padding: 6px 0;\n gap: 0px 0px;\n align-items: center;\n input,\n p {\n margin: 0;\n }\n`;\n\nexport const StyledTimeInputsWrapperGrid = styled.div`\n display: grid;\n grid-template-columns: 24px min-content 24px min-content 24px min-content 24px;\n grid-template-rows: min-content;\n padding: 6px 0;\n gap: 0px 0px;\n align-items: center;\n input,\n p {\n margin: 0;\n }\n`;\n\nexport const StyledPickersIconsWrapperGrid = styled(Grid)<{ isControllerOnly: boolean }>`\n position: relative;\n ${({ isControllerOnly }) => (isControllerOnly ? `` : `height: 26px;`)}\n :before {\n content: '';\n position: absolute;\n top: 0px;\n left: -1px;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n ${({ theme, isControllerOnly, hasError }) =>\n isControllerOnly\n ? ``\n : `\n border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]}\n `}\n }\n`;\n\nexport const StyledFocusWithIn = styled(Grid)`\n position: relative;\n &:focus-within {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: -5px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 10px);\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CLEAR_BUTTON,\n})`\n height: 26px;\n position: relative;\n visibility: ${({ shouldDisplay }) => (shouldDisplay ? 'visible' : 'hidden')};\n &:focus {\n &:after {\n z-index: 1;\n }\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA2B;AAC3B,qBAAqB;AACrB,uBAA2B;AAC3B,qBAAgF;AAEhF,MAAM,oBAAgB,yBAAO,SAAS;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAckB,oBAAG,WAAW,SAAS;AAAA,aAC7B,oBAAG,MAAM,aAAa;AAAA;AAAA;AAI5B,MAAM,sBAAkB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,2BAAuB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,yBAAqB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,4BAAwB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMU,CAAC,EAAE,OAAO,UAAU,SAAS,MAAM;AACjD,MAAI;AAAU,WAAO,MAAM,OAAO,OAAO;AACzC,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ;AAC1C,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAAA;AAAA;AAAA,kBAGgB,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM;AAAA;AAAA;AAAA,IAGtD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,qBAAqB,MAAM,OAAO,QAAQ,UAAU;AAAA;AAGtF,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,oCAAgC,yBAAO,mBAAI;AAAA;AAAA,IAEpD,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASjD,CAAC,EAAE,OAAO,kBAAkB,SAAS,MACrC,mBACI,KACA;AAAA,6BACmB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKjF,MAAM,wBAAoB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWlB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,wBAAoB,yBAAO,6BAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,cAAc,MAAO,gBAAgB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -13,10 +13,7 @@ const ControlledDateTimePickerContent = () => {
|
|
|
13
13
|
const {
|
|
14
14
|
props: { hasError, disabled },
|
|
15
15
|
hideDate,
|
|
16
|
-
hideDatePicker,
|
|
17
16
|
hideTime,
|
|
18
|
-
hideTimePicker,
|
|
19
|
-
hideDateTimePicker,
|
|
20
17
|
withAnyPicker,
|
|
21
18
|
withAnyRightController,
|
|
22
19
|
shouldPreserveClearableSpace,
|
|
@@ -49,7 +46,7 @@ const ControlledDateTimePickerContent = () => {
|
|
|
49
46
|
{
|
|
50
47
|
cols: mainCols,
|
|
51
48
|
gutter: "xxs",
|
|
52
|
-
pr:
|
|
49
|
+
pr: !withAnyRightController ? "2px" : "0px",
|
|
53
50
|
onKeyDown: onGlobalKeyDown,
|
|
54
51
|
disabled,
|
|
55
52
|
onBlur: trackFocusResetter,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ControlledDateTimePickerContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX';\nimport { StyledInputsWrapperGrid } from './Styleds';\nimport { DateInputs } from './DateInputs/DateInputs';\nimport { TimeInputs } from './TimeInputs/TimeInputs';\nimport { PickersIcons } from './Pickers/PickersIcons';\nimport { ClearButton } from './ClearButton/ClearButton';\nimport { ControlledDateTimePickerDatatestid } from '../ControlledDateTimePickerDatatestid';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n const {\n props: { hasError, disabled },\n hideDate,\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX';\nimport { StyledInputsWrapperGrid } from './Styleds';\nimport { DateInputs } from './DateInputs/DateInputs';\nimport { TimeInputs } from './TimeInputs/TimeInputs';\nimport { PickersIcons } from './Pickers/PickersIcons';\nimport { ClearButton } from './ClearButton/ClearButton';\nimport { ControlledDateTimePickerDatatestid } from '../ControlledDateTimePickerDatatestid';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n const {\n props: { hasError, disabled },\n hideDate,\n hideTime,\n withAnyPicker,\n withAnyRightController,\n shouldPreserveClearableSpace,\n isControllerOnly,\n globalAttrs,\n xstyledAttrs,\n onGlobalKeyDown,\n trackFocusResetter,\n } = useContext(ControlledDateTimePickerContext);\n\n const styledsAttrs = {\n justPicker: hideDate && hideTime,\n withAnyPicker,\n hasError,\n isControllerOnly,\n };\n\n const mainCols = [];\n if (!hideDate) mainCols.push('auto');\n if (!hideTime) mainCols.push('auto');\n if (withAnyRightController) mainCols.push('auto');\n\n const rightControlCols = [];\n if (shouldPreserveClearableSpace) rightControlCols.push('28px');\n if (withAnyPicker) rightControlCols.push('auto');\n\n return (\n <>\n {/* The <div> element is catching the component-wise global hotkeys, there is no valid aria role for this */}\n {/* eslint-disable-next-line max-len */}\n {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <StyledInputsWrapperGrid\n cols={mainCols}\n gutter=\"xxs\"\n pr={!withAnyRightController ? '2px' : '0px'}\n onKeyDown={onGlobalKeyDown}\n disabled={disabled}\n onBlur={trackFocusResetter}\n data-testid={ControlledDateTimePickerDatatestid.CONTAINER}\n {...styledsAttrs}\n {...globalAttrs}\n {...xstyledAttrs}\n >\n {hideDate ? null : <DateInputs />}\n {hideTime ? null : <TimeInputs />}\n {withAnyRightController ? (\n <Grid cols={rightControlCols}>\n {shouldPreserveClearableSpace ? <ClearButton /> : null}\n {withAnyPicker ? <PickersIcons /> : null}\n </Grid>\n ) : null}\n </StyledInputsWrapperGrid>\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC2CnB,mBAiBuB,KAGjB,YApBN;AA1CJ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AACxC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,0CAA0C;AAE5C,MAAM,kCAAkC,MAAmB;AAChE,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAE9C,QAAM,eAAe;AAAA,IACnB,YAAY,YAAY;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,CAAC;AAClB,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI;AAAwB,aAAS,KAAK,MAAM;AAEhD,QAAM,mBAAmB,CAAC;AAC1B,MAAI;AAA8B,qBAAiB,KAAK,MAAM;AAC9D,MAAI;AAAe,qBAAiB,KAAK,MAAM;AAE/C,SACE,gCAKE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP,IAAI,CAAC,yBAAyB,QAAQ;AAAA,MACtC,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR,eAAa,mCAAmC;AAAA,MAC/C,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,mBAAW,OAAO,oBAAC,cAAW;AAAA,QAC9B,WAAW,OAAO,oBAAC,cAAW;AAAA,QAC9B,yBACC,qBAAC,QAAK,MAAM,kBACT;AAAA,yCAA+B,oBAAC,eAAY,IAAK;AAAA,UACjD,gBAAgB,oBAAC,gBAAa,IAAK;AAAA,WACtC,IACE;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -27,6 +27,7 @@ const ResettedInput = styled("input", {
|
|
|
27
27
|
const StyledSeparator = styled(Grid)`
|
|
28
28
|
padding-top: 2px;
|
|
29
29
|
margin: auto;
|
|
30
|
+
color: neutral-500;
|
|
30
31
|
`;
|
|
31
32
|
const StyledColonSeparator = styled(Grid)`
|
|
32
33
|
padding-bottom: 1px;
|
|
@@ -65,7 +66,6 @@ const StyledInputsWrapperGrid = styled(Grid, {
|
|
|
65
66
|
|
|
66
67
|
border-radius: 2px;
|
|
67
68
|
padding-left: ${({ justPicker }) => justPicker ? "0" : "2px"};
|
|
68
|
-
padding-right: ${({ withAnyPicker }) => withAnyPicker ? "" : "2px"};
|
|
69
69
|
|
|
70
70
|
position: relative;
|
|
71
71
|
${({ theme, disabled }) => disabled ? `background-color: ${theme.colors.neutral[100]};` : ``}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Styleds.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../exported-related/theming';\n\nconst ResettedInput = styled('input', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.INPUT,\n})`\n border: none;\n box-shadow: none;\n background: none;\n text-align: center;\n height: 100%;\n display: flex;\n align-items: center;\n :focus {\n outline: none;\n }\n padding-top: 2px;\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n color: ${th.color('neutral-500')};\n }\n`;\n\nexport const StyledSeparator = styled(Grid)`\n padding-top: 2px;\n margin: auto;\n`;\n\nexport const StyledColonSeparator = styled(Grid)`\n padding-bottom: 1px;\n margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTAINER,\n})`\n width: max-content;\n align-items: center;\n background-color: white;\n ${({ isControllerOnly }) =>\n isControllerOnly\n ? ``\n : `\n height: 28px; \n border-width: 1px;\n border-style: solid;\n `}\n\n border-color: ${({ theme, hasError, disabled }) => {\n if (hasError) return theme.colors.danger[900];\n if (disabled) return theme.colors.neutral[400];\n return theme.colors.neutral[200];\n }};\n\n border-radius: 2px;\n padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,UAAU;AAC3B,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,gCAAgC,uCAAuC;AAEhF,MAAM,gBAAgB,OAAO,SAAS;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAckB,GAAG,WAAW,SAAS;AAAA,aAC7B,GAAG,MAAM,aAAa;AAAA;AAAA;AAI5B,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../exported-related/theming';\n\nconst ResettedInput = styled('input', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.INPUT,\n})`\n border: none;\n box-shadow: none;\n background: none;\n text-align: center;\n height: 100%;\n display: flex;\n align-items: center;\n :focus {\n outline: none;\n }\n padding-top: 2px;\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n color: ${th.color('neutral-500')};\n }\n`;\n\nexport const StyledSeparator = styled(Grid)`\n padding-top: 2px;\n margin: auto;\n color: neutral-500;\n`;\n\nexport const StyledColonSeparator = styled(Grid)`\n padding-bottom: 1px;\n margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTAINER,\n})`\n width: max-content;\n align-items: center;\n background-color: white;\n ${({ isControllerOnly }) =>\n isControllerOnly\n ? ``\n : `\n height: 28px; \n border-width: 1px;\n border-style: solid;\n `}\n\n border-color: ${({ theme, hasError, disabled }) => {\n if (hasError) return theme.colors.danger[900];\n if (disabled) return theme.colors.neutral[400];\n return theme.colors.neutral[200];\n }};\n\n border-radius: 2px;\n padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n\n position: relative;\n ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n`;\n\nexport const StyledDateInputsWrapperGrid = styled.div`\n display: grid;\n grid-template-columns: 24px min-content 24px min-content 48px;\n grid-template-rows: min-content;\n padding: 6px 0;\n gap: 0px 0px;\n align-items: center;\n input,\n p {\n margin: 0;\n }\n`;\n\nexport const StyledTimeInputsWrapperGrid = styled.div`\n display: grid;\n grid-template-columns: 24px min-content 24px min-content 24px min-content 24px;\n grid-template-rows: min-content;\n padding: 6px 0;\n gap: 0px 0px;\n align-items: center;\n input,\n p {\n margin: 0;\n }\n`;\n\nexport const StyledPickersIconsWrapperGrid = styled(Grid)<{ isControllerOnly: boolean }>`\n position: relative;\n ${({ isControllerOnly }) => (isControllerOnly ? `` : `height: 26px;`)}\n :before {\n content: '';\n position: absolute;\n top: 0px;\n left: -1px;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n ${({ theme, isControllerOnly, hasError }) =>\n isControllerOnly\n ? ``\n : `\n border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]}\n `}\n }\n`;\n\nexport const StyledFocusWithIn = styled(Grid)`\n position: relative;\n &:focus-within {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: -5px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 10px);\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CLEAR_BUTTON,\n})`\n height: 26px;\n position: relative;\n visibility: ${({ shouldDisplay }) => (shouldDisplay ? 'visible' : 'hidden')};\n &:focus {\n &:after {\n z-index: 1;\n }\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,UAAU;AAC3B,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,gCAAgC,uCAAuC;AAEhF,MAAM,gBAAgB,OAAO,SAAS;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAckB,GAAG,WAAW,SAAS;AAAA,aAC7B,GAAG,MAAM,aAAa;AAAA;AAAA;AAI5B,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,uBAAuB,OAAO,IAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,qBAAqB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,wBAAwB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMU,CAAC,EAAE,OAAO,UAAU,SAAS,MAAM;AACjD,MAAI;AAAU,WAAO,MAAM,OAAO,OAAO;AACzC,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ;AAC1C,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAAA;AAAA;AAAA,kBAGgB,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM;AAAA;AAAA;AAAA,IAGtD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,qBAAqB,MAAM,OAAO,QAAQ,UAAU;AAAA;AAGtF,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,gCAAgC,OAAO,IAAI;AAAA;AAAA,IAEpD,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASjD,CAAC,EAAE,OAAO,kBAAkB,SAAS,MACrC,mBACI,KACA;AAAA,6BACmB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKjF,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWlB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,cAAc,MAAO,gBAAgB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-date-time-picker",
|
|
3
|
-
"version": "3.14.0-rc.
|
|
3
|
+
"version": "3.14.0-rc.8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Date Time Picker",
|
|
6
6
|
"files": [
|
|
@@ -35,13 +35,13 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-button": "3.14.0-rc.
|
|
39
|
-
"@elliemae/ds-grid": "3.14.0-rc.
|
|
40
|
-
"@elliemae/ds-icon": "3.14.0-rc.
|
|
41
|
-
"@elliemae/ds-icons": "3.14.0-rc.
|
|
42
|
-
"@elliemae/ds-popperjs": "3.14.0-rc.
|
|
43
|
-
"@elliemae/ds-system": "3.14.0-rc.
|
|
44
|
-
"@elliemae/ds-utilities": "3.14.0-rc.
|
|
38
|
+
"@elliemae/ds-button": "3.14.0-rc.8",
|
|
39
|
+
"@elliemae/ds-grid": "3.14.0-rc.8",
|
|
40
|
+
"@elliemae/ds-icon": "3.14.0-rc.8",
|
|
41
|
+
"@elliemae/ds-icons": "3.14.0-rc.8",
|
|
42
|
+
"@elliemae/ds-popperjs": "3.14.0-rc.8",
|
|
43
|
+
"@elliemae/ds-system": "3.14.0-rc.8",
|
|
44
|
+
"@elliemae/ds-utilities": "3.14.0-rc.8"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@elliemae/pui-theme": "~2.6.0",
|