@elliemae/ds-form-input-text 3.49.0-beta.2 → 3.49.0-beta.3

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.
Files changed (9) hide show
  1. package/dist/cjs/styled/borders.js +11 -12
  2. package/dist/cjs/styled/borders.js.map +2 -2
  3. package/dist/cjs/styled/components.js +7 -2
  4. package/dist/cjs/styled/components.js.map +2 -2
  5. package/dist/esm/styled/borders.js +11 -12
  6. package/dist/esm/styled/borders.js.map +2 -2
  7. package/dist/esm/styled/components.js +7 -2
  8. package/dist/esm/styled/components.js.map +2 -2
  9. package/package.json +12 -10
package/dist/cjs/styled/borders.js CHANGED
@@ -38,8 +38,9 @@ const commonBorderCss = import_ds_system.css`
38
38
  border: 1px solid ${import_ds_system.th.color("neutral-400")};
39
39
  `;
40
40
  const readOnlyBorderCss = import_ds_system.css`
41
- border: 1px solid transparent;
42
- border-top-color: ${import_ds_system.th.color("neutral-400")};
41
+ background-color: ${import_ds_system.th.color("neutral-050")};
42
+ border: 1px solid ${import_ds_system.th.color("neutral-080")};
43
+ border-bottom: 1px solid ${import_ds_system.th.color("neutral-400")};
43
44
  `;
44
45
  const disabledBorderCss = commonBorderCss;
45
46
  const hasErrorBorderCss = import_ds_system.css`
@@ -48,6 +49,9 @@ const hasErrorBorderCss = import_ds_system.css`
48
49
  const hoverBorderCss = import_ds_system.css`
49
50
  border: 1px solid ${import_ds_system.th.color("brand-700")};
50
51
  `;
52
+ const hoverReadOnlyBorderCss = import_ds_system.css`
53
+ border: 1px solid ${import_ds_system.th.color("brand-600")};
54
+ `;
51
55
  const focusBorderCss = import_ds_system.css`
52
56
  border: 1px solid transparent;
53
57
  outline: 2px solid ${import_ds_system.th.color("brand-700")};
@@ -55,24 +59,19 @@ const focusBorderCss = import_ds_system.css`
55
59
  `;
56
60
  const getBorderCss = (props) => {
57
61
  if (props.isDisabled) return disabledBorderCss;
58
- if (props.applyAriaDisabled) {
59
- if (props.hasFocus) return focusBorderCss;
60
- return disabledBorderCss;
61
- }
62
62
  if (props.hasFocus) return focusBorderCss;
63
63
  if (props.hasError) return hasErrorBorderCss;
64
- if (props.isReadOnly) return readOnlyBorderCss;
64
+ if (props.isReadOnly || props.applyAriaDisabled) return readOnlyBorderCss;
65
65
  return commonBorderCss;
66
66
  };
67
67
  const getHoverBorderCss = (props) => {
68
68
  if (props.isDisabled) return disabledBorderCss;
69
- if (props.applyAriaDisabled) {
70
- if (props.hasFocus) return focusBorderCss;
71
- return disabledBorderCss;
72
- }
73
69
  if (props.hasFocus) return focusBorderCss;
74
70
  if (props.hasError) return hasErrorBorderCss;
75
- if (props.isReadOnly) return readOnlyBorderCss;
71
+ if (props.isReadOnly || props.applyAriaDisabled) {
72
+ if (props.hasFocus) return focusBorderCss;
73
+ return hoverReadOnlyBorderCss;
74
+ }
76
75
  return hoverBorderCss;
77
76
  };
78
77
  //# sourceMappingURL=borders.js.map
package/dist/cjs/styled/borders.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/styled/borders.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { th, css } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nconst commonBorderCss = css`\n border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss = css`\n border: 1px solid transparent;\n border-top-color: ${th.color('neutral-400')};\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss = css`\n border: 1px solid ${th.color('danger-900')};\n`;\n\nconst hoverBorderCss = css`\n border: 1px solid ${th.color('brand-700')};\n`;\n\nconst focusBorderCss = css`\n border: 1px solid transparent;\n outline: 2px solid ${th.color('brand-700')};\n outline-offset: -2px;\n`;\n\nexport const getBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.applyAriaDisabled) {\n if (props.hasFocus) return focusBorderCss;\n return disabledBorderCss;\n }\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly) return readOnlyBorderCss;\n return commonBorderCss;\n};\n\nexport const getHoverBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.applyAriaDisabled) {\n if (props.hasFocus) return focusBorderCss;\n return disabledBorderCss;\n }\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly) return readOnlyBorderCss;\n return hoverBorderCss;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwB;AAUxB,MAAM,kBAAkB;AAAA,sBACF,oBAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAAA;AAAA,sBAEJ,oBAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;AAAA,sBACJ,oBAAG,MAAM,YAAY,CAAC;AAAA;AAG5C,MAAM,iBAAiB;AAAA,sBACD,oBAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,iBAAiB;AAAA;AAAA,uBAEA,oBAAG,MAAM,WAAW,CAAC;AAAA;AAAA;AAIrC,MAAM,eAAe,CAAC,UAAwD;AACnF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,mBAAmB;AAC3B,QAAI,MAAM,SAAU,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,WAAY,QAAO;AAC7B,SAAO;AACT;AAEO,MAAM,oBAAoB,CAAC,UAAwD;AACxF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,mBAAmB;AAC3B,QAAI,MAAM,SAAU,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,WAAY,QAAO;AAC7B,SAAO;AACT;",
4
+ "sourcesContent": ["import { th, css } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nconst commonBorderCss = css`\n border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss = css`\n background-color: ${th.color('neutral-050')};\n border: 1px solid ${th.color('neutral-080')};\n border-bottom: 1px solid ${th.color('neutral-400')};\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss = css`\n border: 1px solid ${th.color('danger-900')};\n`;\n\nconst hoverBorderCss = css`\n border: 1px solid ${th.color('brand-700')};\n`;\n\nconst hoverReadOnlyBorderCss = css`\n border: 1px solid ${th.color('brand-600')};\n`;\n\nconst focusBorderCss = css`\n border: 1px solid transparent;\n outline: 2px solid ${th.color('brand-700')};\n outline-offset: -2px;\n`;\n\nexport const getBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly || props.applyAriaDisabled) return readOnlyBorderCss;\n return commonBorderCss;\n};\n\nexport const getHoverBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly || props.applyAriaDisabled) {\n if (props.hasFocus) return focusBorderCss;\n return hoverReadOnlyBorderCss;\n }\n return hoverBorderCss;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwB;AAUxB,MAAM,kBAAkB;AAAA,sBACF,oBAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAAA,sBACJ,oBAAG,MAAM,aAAa,CAAC;AAAA,sBACvB,oBAAG,MAAM,aAAa,CAAC;AAAA,6BAChB,oBAAG,MAAM,aAAa,CAAC;AAAA;AAGpD,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;AAAA,sBACJ,oBAAG,MAAM,YAAY,CAAC;AAAA;AAG5C,MAAM,iBAAiB;AAAA,sBACD,oBAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,yBAAyB;AAAA,sBACT,oBAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,iBAAiB;AAAA;AAAA,uBAEA,oBAAG,MAAM,WAAW,CAAC;AAAA;AAAA;AAIrC,MAAM,eAAe,CAAC,UAAwD;AACnF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,cAAc,MAAM,kBAAmB,QAAO;AACxD,SAAO;AACT;AAEO,MAAM,oBAAoB,CAAC,UAAwD;AACxF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,cAAc,MAAM,mBAAmB;AAC/C,QAAI,MAAM,SAAU,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
6
6
  "names": []
7
7
  }
package/dist/cjs/styled/components.js CHANGED
@@ -70,13 +70,18 @@ const StyledInput = (0, import_ds_system.styled)("input", { name: import_exporte
70
70
  color: ${import_ds_system.th.color("neutral-500")};
71
71
  }
72
72
 
73
- :disabled,
74
- &[aria-disabled='true'] {
73
+ :disabled {
75
74
  background-color: ${import_ds_system.th.color("neutral-080")};
76
75
  color: #616b7f;
77
76
  cursor: not-allowed;
78
77
  caret-color: transparent;
79
78
  }
79
+
80
+ &[aria-disabled='true'],
81
+ &[aria-readonly='true'],
82
+ :read-only {
83
+ background-color: ${import_ds_system.th.color("neutral-050")};
84
+ }
80
85
  `;
81
86
  const StyledClearButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_exported_related.DSInputTextName, slot: import_exported_related.DSInputTextSlots.CLEAR_BUTTON })`
82
87
  height: 100%;
package/dist/cjs/styled/components.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/styled/components.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../exported-related/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n inputSize: string;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n name: DSInputTextName,\n slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n ${getBorderCss}\n border-radius: 2px;\n :hover {\n ${getHoverBorderCss}\n }\n min-height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })<{\n inputSize: string;\n}>`\n padding: ${({ inputSize }) => (inputSize === 'm' ? '4px' : '3px')} ${th.space('xxs')};\n @media (max-width: ${th.breakpoint('small')}) {\n padding: ${({ inputSize }) => (inputSize === 'm' ? '3px' : '1.25px')} ${th.space('xxs')};\n }\n border: none;\n outline: none;\n border-radius: 2px;\n\n width: 100%;\n height: 100%;\n color: ${th.color('neutral-800')};\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n font-style: italic;\n color: ${th.color('neutral-500')};\n }\n\n :disabled,\n &[aria-disabled='true'] {\n background-color: ${th.color('neutral-080')};\n color: #616b7f;\n cursor: not-allowed;\n caret-color: transparent;\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`\n height: 100%;\n\n &:after {\n border-top-left-radius: 0px !important;\n border-bottom-left-radius: 0px !important;\n }\n :focus {\n border-width: 0px;\n }\n\n &:hover:not(:disabled),\n &:hover:not([aria-disabled='true']) {\n background-color: transparent;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AACrB,uBAA+C;AAC/C,8BAAkD;AAClD,qBAAgD;AAWzC,MAAM,yBAAqB,yBAAO,qBAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,yCAAiB;AACzB,CAAC;AAAA,IACG,2BAAY;AAAA;AAAA;AAAA,MAGV,gCAAiB;AAAA;AAAA,gBAEP,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS,MAAO;AAAA,IACpE,mCAAkB;AAAA;AAGf,MAAM,kBAAc,yBAAO,SAAS,EAAE,MAAM,yCAAiB,MAAM,yCAAiB,MAAM,CAAC;AAAA,aAGrF,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,KAAM,IAAI,oBAAG,MAAM,KAAK,CAAC;AAAA,uBAC/D,oBAAG,WAAW,OAAO,CAAC;AAAA,eAC9B,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,QAAS,IAAI,oBAAG,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQhF,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,oBAAG,WAAW,SAAS,CAAC;AAAA;AAAA,aAE9B,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKZ,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,wBAAoB,yBAAO,gCAAY,EAAE,MAAM,yCAAiB,MAAM,yCAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
4
+ "sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../exported-related/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n inputSize: string;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n name: DSInputTextName,\n slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n ${getBorderCss}\n border-radius: 2px;\n :hover {\n ${getHoverBorderCss}\n }\n min-height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })<{\n inputSize: string;\n}>`\n padding: ${({ inputSize }) => (inputSize === 'm' ? '4px' : '3px')} ${th.space('xxs')};\n @media (max-width: ${th.breakpoint('small')}) {\n padding: ${({ inputSize }) => (inputSize === 'm' ? '3px' : '1.25px')} ${th.space('xxs')};\n }\n border: none;\n outline: none;\n border-radius: 2px;\n\n width: 100%;\n height: 100%;\n color: ${th.color('neutral-800')};\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n font-style: italic;\n color: ${th.color('neutral-500')};\n }\n\n :disabled {\n background-color: ${th.color('neutral-080')};\n color: #616b7f;\n cursor: not-allowed;\n caret-color: transparent;\n }\n\n &[aria-disabled='true'],\n &[aria-readonly='true'],\n :read-only {\n background-color: ${th.color('neutral-050')};\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`\n height: 100%;\n\n &:after {\n border-top-left-radius: 0px !important;\n border-bottom-left-radius: 0px !important;\n }\n :focus {\n border-width: 0px;\n }\n\n &:hover:not(:disabled),\n &:hover:not([aria-disabled='true']) {\n background-color: transparent;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AACrB,uBAA+C;AAC/C,8BAAkD;AAClD,qBAAgD;AAWzC,MAAM,yBAAqB,yBAAO,qBAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,yCAAiB;AACzB,CAAC;AAAA,IACG,2BAAY;AAAA;AAAA;AAAA,MAGV,gCAAiB;AAAA;AAAA,gBAEP,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS,MAAO;AAAA,IACpE,mCAAkB;AAAA;AAGf,MAAM,kBAAc,yBAAO,SAAS,EAAE,MAAM,yCAAiB,MAAM,yCAAiB,MAAM,CAAC;AAAA,aAGrF,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,KAAM,IAAI,oBAAG,MAAM,KAAK,CAAC;AAAA,uBAC/D,oBAAG,WAAW,OAAO,CAAC;AAAA,eAC9B,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,QAAS,IAAI,oBAAG,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQhF,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,oBAAG,WAAW,SAAS,CAAC;AAAA;AAAA,aAE9B,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIZ,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASvB,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAIxC,MAAM,wBAAoB,yBAAO,gCAAY,EAAE,MAAM,yCAAiB,MAAM,yCAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/esm/styled/borders.js CHANGED
@@ -4,8 +4,9 @@ const commonBorderCss = css`
4
4
  border: 1px solid ${th.color("neutral-400")};
5
5
  `;
6
6
  const readOnlyBorderCss = css`
7
- border: 1px solid transparent;
8
- border-top-color: ${th.color("neutral-400")};
7
+ background-color: ${th.color("neutral-050")};
8
+ border: 1px solid ${th.color("neutral-080")};
9
+ border-bottom: 1px solid ${th.color("neutral-400")};
9
10
  `;
10
11
  const disabledBorderCss = commonBorderCss;
11
12
  const hasErrorBorderCss = css`
@@ -14,6 +15,9 @@ const hasErrorBorderCss = css`
14
15
  const hoverBorderCss = css`
15
16
  border: 1px solid ${th.color("brand-700")};
16
17
  `;
18
+ const hoverReadOnlyBorderCss = css`
19
+ border: 1px solid ${th.color("brand-600")};
20
+ `;
17
21
  const focusBorderCss = css`
18
22
  border: 1px solid transparent;
19
23
  outline: 2px solid ${th.color("brand-700")};
@@ -21,24 +25,19 @@ const focusBorderCss = css`
21
25
  `;
22
26
  const getBorderCss = (props) => {
23
27
  if (props.isDisabled) return disabledBorderCss;
24
- if (props.applyAriaDisabled) {
25
- if (props.hasFocus) return focusBorderCss;
26
- return disabledBorderCss;
27
- }
28
28
  if (props.hasFocus) return focusBorderCss;
29
29
  if (props.hasError) return hasErrorBorderCss;
30
- if (props.isReadOnly) return readOnlyBorderCss;
30
+ if (props.isReadOnly || props.applyAriaDisabled) return readOnlyBorderCss;
31
31
  return commonBorderCss;
32
32
  };
33
33
  const getHoverBorderCss = (props) => {
34
34
  if (props.isDisabled) return disabledBorderCss;
35
- if (props.applyAriaDisabled) {
36
- if (props.hasFocus) return focusBorderCss;
37
- return disabledBorderCss;
38
- }
39
35
  if (props.hasFocus) return focusBorderCss;
40
36
  if (props.hasError) return hasErrorBorderCss;
41
- if (props.isReadOnly) return readOnlyBorderCss;
37
+ if (props.isReadOnly || props.applyAriaDisabled) {
38
+ if (props.hasFocus) return focusBorderCss;
39
+ return hoverReadOnlyBorderCss;
40
+ }
42
41
  return hoverBorderCss;
43
42
  };
44
43
  export {
package/dist/esm/styled/borders.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/borders.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th, css } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nconst commonBorderCss = css`\n border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss = css`\n border: 1px solid transparent;\n border-top-color: ${th.color('neutral-400')};\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss = css`\n border: 1px solid ${th.color('danger-900')};\n`;\n\nconst hoverBorderCss = css`\n border: 1px solid ${th.color('brand-700')};\n`;\n\nconst focusBorderCss = css`\n border: 1px solid transparent;\n outline: 2px solid ${th.color('brand-700')};\n outline-offset: -2px;\n`;\n\nexport const getBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.applyAriaDisabled) {\n if (props.hasFocus) return focusBorderCss;\n return disabledBorderCss;\n }\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly) return readOnlyBorderCss;\n return commonBorderCss;\n};\n\nexport const getHoverBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.applyAriaDisabled) {\n if (props.hasFocus) return focusBorderCss;\n return disabledBorderCss;\n }\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly) return readOnlyBorderCss;\n return hoverBorderCss;\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,IAAI,WAAW;AAUxB,MAAM,kBAAkB;AAAA,sBACF,GAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAAA;AAAA,sBAEJ,GAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;AAAA,sBACJ,GAAG,MAAM,YAAY,CAAC;AAAA;AAG5C,MAAM,iBAAiB;AAAA,sBACD,GAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,iBAAiB;AAAA;AAAA,uBAEA,GAAG,MAAM,WAAW,CAAC;AAAA;AAAA;AAIrC,MAAM,eAAe,CAAC,UAAwD;AACnF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,mBAAmB;AAC3B,QAAI,MAAM,SAAU,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,WAAY,QAAO;AAC7B,SAAO;AACT;AAEO,MAAM,oBAAoB,CAAC,UAAwD;AACxF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,mBAAmB;AAC3B,QAAI,MAAM,SAAU,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,WAAY,QAAO;AAC7B,SAAO;AACT;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th, css } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nconst commonBorderCss = css`\n border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss = css`\n background-color: ${th.color('neutral-050')};\n border: 1px solid ${th.color('neutral-080')};\n border-bottom: 1px solid ${th.color('neutral-400')};\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss = css`\n border: 1px solid ${th.color('danger-900')};\n`;\n\nconst hoverBorderCss = css`\n border: 1px solid ${th.color('brand-700')};\n`;\n\nconst hoverReadOnlyBorderCss = css`\n border: 1px solid ${th.color('brand-600')};\n`;\n\nconst focusBorderCss = css`\n border: 1px solid transparent;\n outline: 2px solid ${th.color('brand-700')};\n outline-offset: -2px;\n`;\n\nexport const getBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly || props.applyAriaDisabled) return readOnlyBorderCss;\n return commonBorderCss;\n};\n\nexport const getHoverBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly || props.applyAriaDisabled) {\n if (props.hasFocus) return focusBorderCss;\n return hoverReadOnlyBorderCss;\n }\n return hoverBorderCss;\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,IAAI,WAAW;AAUxB,MAAM,kBAAkB;AAAA,sBACF,GAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAAA,sBACJ,GAAG,MAAM,aAAa,CAAC;AAAA,sBACvB,GAAG,MAAM,aAAa,CAAC;AAAA,6BAChB,GAAG,MAAM,aAAa,CAAC;AAAA;AAGpD,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;AAAA,sBACJ,GAAG,MAAM,YAAY,CAAC;AAAA;AAG5C,MAAM,iBAAiB;AAAA,sBACD,GAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,yBAAyB;AAAA,sBACT,GAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,iBAAiB;AAAA;AAAA,uBAEA,GAAG,MAAM,WAAW,CAAC;AAAA;AAAA;AAIrC,MAAM,eAAe,CAAC,UAAwD;AACnF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,cAAc,MAAM,kBAAmB,QAAO;AACxD,SAAO;AACT;AAEO,MAAM,oBAAoB,CAAC,UAAwD;AACxF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,cAAc,MAAM,mBAAmB;AAC/C,QAAI,MAAM,SAAU,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
6
6
  "names": []
7
7
  }
package/dist/esm/styled/components.js CHANGED
@@ -35,13 +35,18 @@ const StyledInput = styled("input", { name: DSInputTextName, slot: DSInputTextSl
35
35
  color: ${th.color("neutral-500")};
36
36
  }
37
37
 
38
- :disabled,
39
- &[aria-disabled='true'] {
38
+ :disabled {
40
39
  background-color: ${th.color("neutral-080")};
41
40
  color: #616b7f;
42
41
  cursor: not-allowed;
43
42
  caret-color: transparent;
44
43
  }
44
+
45
+ &[aria-disabled='true'],
46
+ &[aria-readonly='true'],
47
+ :read-only {
48
+ background-color: ${th.color("neutral-050")};
49
+ }
45
50
  `;
46
51
  const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`
47
52
  height: 100%;
package/dist/esm/styled/components.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/components.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../exported-related/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n inputSize: string;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n name: DSInputTextName,\n slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n ${getBorderCss}\n border-radius: 2px;\n :hover {\n ${getHoverBorderCss}\n }\n min-height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })<{\n inputSize: string;\n}>`\n padding: ${({ inputSize }) => (inputSize === 'm' ? '4px' : '3px')} ${th.space('xxs')};\n @media (max-width: ${th.breakpoint('small')}) {\n padding: ${({ inputSize }) => (inputSize === 'm' ? '3px' : '1.25px')} ${th.space('xxs')};\n }\n border: none;\n outline: none;\n border-radius: 2px;\n\n width: 100%;\n height: 100%;\n color: ${th.color('neutral-800')};\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n font-style: italic;\n color: ${th.color('neutral-500')};\n }\n\n :disabled,\n &[aria-disabled='true'] {\n background-color: ${th.color('neutral-080')};\n color: #616b7f;\n cursor: not-allowed;\n caret-color: transparent;\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`\n height: 100%;\n\n &:after {\n border-top-left-radius: 0px !important;\n border-bottom-left-radius: 0px !important;\n }\n :focus {\n border-width: 0px;\n }\n\n &:hover:not(:disabled),\n &:hover:not([aria-disabled='true']) {\n background-color: transparent;\n }\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,IAAI,QAAQ,0BAA0B;AAC/C,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,cAAc,yBAAyB;AAWzC,MAAM,qBAAqB,OAAO,MAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,IACG,YAAY;AAAA;AAAA;AAAA,MAGV,iBAAiB;AAAA;AAAA,gBAEP,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS,MAAO;AAAA,IACpE,kBAAkB;AAAA;AAGf,MAAM,cAAc,OAAO,SAAS,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,MAAM,CAAC;AAAA,aAGrF,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,KAAM,IAAI,GAAG,MAAM,KAAK,CAAC;AAAA,uBAC/D,GAAG,WAAW,OAAO,CAAC;AAAA,eAC9B,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,QAAS,IAAI,GAAG,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQhF,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,GAAG,WAAW,SAAS,CAAC;AAAA;AAAA,aAE9B,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKZ,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,oBAAoB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../exported-related/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n isDisabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n inputSize: string;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n name: DSInputTextName,\n slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n ${getBorderCss}\n border-radius: 2px;\n :hover {\n ${getHoverBorderCss}\n }\n min-height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })<{\n inputSize: string;\n}>`\n padding: ${({ inputSize }) => (inputSize === 'm' ? '4px' : '3px')} ${th.space('xxs')};\n @media (max-width: ${th.breakpoint('small')}) {\n padding: ${({ inputSize }) => (inputSize === 'm' ? '3px' : '1.25px')} ${th.space('xxs')};\n }\n border: none;\n outline: none;\n border-radius: 2px;\n\n width: 100%;\n height: 100%;\n color: ${th.color('neutral-800')};\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n font-style: italic;\n color: ${th.color('neutral-500')};\n }\n\n :disabled {\n background-color: ${th.color('neutral-080')};\n color: #616b7f;\n cursor: not-allowed;\n caret-color: transparent;\n }\n\n &[aria-disabled='true'],\n &[aria-readonly='true'],\n :read-only {\n background-color: ${th.color('neutral-050')};\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`\n height: 100%;\n\n &:after {\n border-top-left-radius: 0px !important;\n border-bottom-left-radius: 0px !important;\n }\n :focus {\n border-width: 0px;\n }\n\n &:hover:not(:disabled),\n &:hover:not([aria-disabled='true']) {\n background-color: transparent;\n }\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,IAAI,QAAQ,0BAA0B;AAC/C,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,cAAc,yBAAyB;AAWzC,MAAM,qBAAqB,OAAO,MAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,IACG,YAAY;AAAA;AAAA;AAAA,MAGV,iBAAiB;AAAA;AAAA,gBAEP,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS,MAAO;AAAA,IACpE,kBAAkB;AAAA;AAGf,MAAM,cAAc,OAAO,SAAS,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,MAAM,CAAC;AAAA,aAGrF,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,KAAM,IAAI,GAAG,MAAM,KAAK,CAAC;AAAA,uBAC/D,GAAG,WAAW,OAAO,CAAC;AAAA,eAC9B,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,QAAS,IAAI,GAAG,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQhF,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,GAAG,WAAW,SAAS,CAAC;AAAA;AAAA,aAE9B,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIZ,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASvB,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAIxC,MAAM,oBAAoB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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-input-text",
3
- "version": "3.49.0-beta.2",
3
+ "version": "3.49.0-beta.3",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Input Text",
6
6
  "files": [
@@ -25,8 +25,8 @@
25
25
  "url": "https://git.elliemae.io/platform-ui/dimsum.git"
26
26
  },
27
27
  "engines": {
28
- "pnpm": ">=6",
29
- "node": ">=16"
28
+ "pnpm": ">=9",
29
+ "node": ">=22"
30
30
  },
31
31
  "author": "ICE MT",
32
32
  "jestSonar": {
@@ -36,19 +36,21 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-button-v2": "3.49.0-beta.2",
40
- "@elliemae/ds-props-helpers": "3.49.0-beta.2",
41
- "@elliemae/ds-icons": "3.49.0-beta.2",
42
- "@elliemae/ds-grid": "3.49.0-beta.2",
43
- "@elliemae/ds-system": "3.49.0-beta.2",
44
- "@elliemae/ds-icon": "3.49.0-beta.2"
39
+ "@elliemae/ds-button-v2": "3.49.0-beta.3",
40
+ "@elliemae/ds-icons": "3.49.0-beta.3",
41
+ "@elliemae/ds-grid": "3.49.0-beta.3",
42
+ "@elliemae/ds-system": "3.49.0-beta.3",
43
+ "@elliemae/ds-props-helpers": "3.49.0-beta.3",
44
+ "@elliemae/ds-icon": "3.49.0-beta.3"
45
45
  },
46
46
  "devDependencies": {
47
47
  "@elliemae/pui-cli": "9.0.0-next.50",
48
48
  "@elliemae/pui-theme": "~2.10.0",
49
+ "jest": "~29.7.0",
50
+ "jest-cli": "~29.7.0",
49
51
  "styled-components": "~5.3.9",
50
52
  "styled-system": "~5.1.5",
51
- "@elliemae/ds-monorepo-devops": "3.49.0-beta.2"
53
+ "@elliemae/ds-monorepo-devops": "3.49.0-beta.3"
52
54
  },
53
55
  "peerDependencies": {
54
56
  "@elliemae/pui-theme": "~2.10.0",