@elliemae/ds-form-combobox 3.70.0-next.69 → 3.70.0-next.70

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 (5) hide show
  1. package/dist/cjs/parts/controls-input/styled.js +1 -0
  2. package/dist/cjs/parts/controls-input/styled.js.map +2 -2
  3. package/dist/esm/parts/controls-input/styled.js +2 -1
  4. package/dist/esm/parts/controls-input/styled.js.map +2 -2
  5. package/package.json +15 -15
package/dist/cjs/parts/controls-input/styled.js CHANGED
@@ -41,6 +41,7 @@ var import_ds_system = require("@elliemae/ds-system");
41
41
  var import_ds_typography = require("@elliemae/ds-typography");
42
42
  var import_constants = require("../../constants/index.js");
43
43
  const b2InputTypography = import_ds_system.css`
44
+ ${import_ds_typography.typographyFontFamily}
44
45
  font-size: 0.8125rem;
45
46
  line-height: 1rem;
46
47
  font-weight: 400;
package/dist/cjs/parts/controls-input/styled.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/controls-input/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\n/**\n * b2 typography mirrored as raw CSS for the native `<input>` and its hidden\n * width-measuring twin (`StyledInputWidthReference`). Neither can be a `DSTypography`\n * component \u2014 an `<input>` takes no children, and the reference must match the input's\n * exact font metrics or the autosizing (measured off the reference) drifts. ds-typography\n * does not export its VARIANTS_CSS_MAP, so the b2 values are duplicated here \u2014 keep in\n * sync with `ds-typography` b2 (`parts/variants/body.ts`). Text containers that CAN hold\n * children (placeholder, selection) use `styled(DSTypography)` with `variant=\"b2\"` instead.\n */\nconst b2InputTypography = css`\n font-size: 0.8125rem;\n line-height: 1rem;\n font-weight: 400;\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 1rem;\n line-height: 1.2307692308rem;\n }\n`;\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n color: transparent;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n border: none;\n outline: none;\n background: transparent;\n width: 100%;\n &:focus {\n outline: none;\n }\n ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n ${b2InputTypography}\n background: transparent;\n border: none;\n overflow: hidden;\n padding: 0;\n z-index: 2;\n outline: none;\n color: ${(props) => (props.disabled ? props.theme.colors.neutral[600] : props.theme.colors.neutral[700])};\n &:focus {\n outline: none;\n }\n ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n &::placeholder {\n color: transparent;\n }\n transition: none;\n ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled(DSTypography, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.INPUT_PLACEHOLDER,\n})<{ $nonInteractive?: boolean }>`\n font-style: italic;\n color: ${(props) => (props.$nonInteractive ? props.theme.colors.neutral[600] : props.theme.colors.neutral[500])};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n user-select: none;\n\n & span::after {\n content: '';\n padding: 1px;\n // solve italic font style clipping issue with overflow hidden.\n }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n ${b2InputTypography}\n visibility: hidden;\n position: absolute;\n top: -9999px;\n z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div', {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.INPUT_FIELD_WRAPPER,\n})`\n position: relative;\n align-items: center;\n display: flex;\n /** PUI-15490 \u2014 the spec's 5px vertical padding lives on the text line (this wrapper, always\n * rendered) so the control height is constant and breathing room survives text resize.\n * Mobile keeps the legacy 1.25px \u2014 no mobile spec exists (KNOWN_INTENTIONAL_DEVIATIONS \u00A75).\n * The 1px right padding is pre-existing (caret clipping). */\n padding: 5px 1px 5px 0px;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n padding: 1.25px 1px 1.25px 0px;\n }\n overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,2BAA6B;AAC7B,uBAAwD;AAWxD,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA,uBAIH,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,uBAAmB,yBAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA,IACG,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOV,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA,IAItG,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,6BAAyB,yBAAO,mCAAc;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAW,MAAM,kBAAkB,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc1G,MAAM,4BAA4B,wBAAO;AAAA,IAC5C,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOd,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBASsB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;",
4
+ "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { DSTypography, typographyFontFamily } from '@elliemae/ds-typography';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\n/**\n * b2 typography mirrored as raw CSS for the native `<input>` and its hidden\n * width-measuring twin (`StyledInputWidthReference`). Neither can be a `DSTypography`\n * component \u2014 an `<input>` takes no children, and the reference must match the input's\n * exact font metrics or the autosizing (measured off the reference) drifts. ds-typography\n * does not export its VARIANTS_CSS_MAP, so the b2 values are duplicated here \u2014 keep in\n * sync with `ds-typography` b2 (`parts/variants/body.ts`). Text containers that CAN hold\n * children (placeholder, selection) use `styled(DSTypography)` with `variant=\"b2\"` instead.\n *\n * PUI-18977 \u2014 `typographyFontFamily` leads the block, as it does in b2 itself; without it\n * the input never resolves `theme.fonts.default`. It belongs in this shared block rather\n * than on `StyledInput` alone because font-family changes measured text width \u2014 the\n * reference twin must carry the identical family or the autosizing drifts. Precedent:\n * ds-form-input-text (PUI-18721).\n */\nconst b2InputTypography = css`\n ${typographyFontFamily}\n font-size: 0.8125rem;\n line-height: 1rem;\n font-weight: 400;\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 1rem;\n line-height: 1.2307692308rem;\n }\n`;\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n color: transparent;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n border: none;\n outline: none;\n background: transparent;\n width: 100%;\n &:focus {\n outline: none;\n }\n ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n ${b2InputTypography}\n background: transparent;\n border: none;\n overflow: hidden;\n padding: 0;\n z-index: 2;\n outline: none;\n color: ${(props) => (props.disabled ? props.theme.colors.neutral[600] : props.theme.colors.neutral[700])};\n &:focus {\n outline: none;\n }\n ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n &::placeholder {\n color: transparent;\n }\n transition: none;\n ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled(DSTypography, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.INPUT_PLACEHOLDER,\n})<{ $nonInteractive?: boolean }>`\n font-style: italic;\n color: ${(props) => (props.$nonInteractive ? props.theme.colors.neutral[600] : props.theme.colors.neutral[500])};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n user-select: none;\n\n & span::after {\n content: '';\n padding: 1px;\n // solve italic font style clipping issue with overflow hidden.\n }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n ${b2InputTypography}\n visibility: hidden;\n position: absolute;\n top: -9999px;\n z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div', {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.INPUT_FIELD_WRAPPER,\n})`\n position: relative;\n align-items: center;\n display: flex;\n /** PUI-15490 \u2014 the spec's 5px vertical padding lives on the text line (this wrapper, always\n * rendered) so the control height is constant and breathing room survives text resize.\n * Mobile keeps the legacy 1.25px \u2014 no mobile spec exists (KNOWN_INTENTIONAL_DEVIATIONS \u00A75).\n * The 1px right padding is pre-existing (caret clipping). */\n padding: 5px 1px 5px 0px;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n padding: 1.25px 1px 1.25px 0px;\n }\n overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,2BAAmD;AACnD,uBAAwD;AAiBxD,MAAM,oBAAoB;AAAA,IACtB,yCAAoB;AAAA;AAAA;AAAA;AAAA,uBAID,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,uBAAmB,yBAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA,IACG,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOV,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA,IAItG,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,6BAAyB,yBAAO,mCAAc;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAW,MAAM,kBAAkB,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc1G,MAAM,4BAA4B,wBAAO;AAAA,IAC5C,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOd,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBASsB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/controls-input/styled.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from "react";
2
2
  import { styled, css } from "@elliemae/ds-system";
3
- import { DSTypography } from "@elliemae/ds-typography";
3
+ import { DSTypography, typographyFontFamily } from "@elliemae/ds-typography";
4
4
  import { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from "../../constants/index.js";
5
5
  const b2InputTypography = css`
6
+ ${typographyFontFamily}
6
7
  font-size: 0.8125rem;
7
8
  line-height: 1rem;
8
9
  font-weight: 400;
package/dist/esm/parts/controls-input/styled.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/styled.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\n/**\n * b2 typography mirrored as raw CSS for the native `<input>` and its hidden\n * width-measuring twin (`StyledInputWidthReference`). Neither can be a `DSTypography`\n * component \u2014 an `<input>` takes no children, and the reference must match the input's\n * exact font metrics or the autosizing (measured off the reference) drifts. ds-typography\n * does not export its VARIANTS_CSS_MAP, so the b2 values are duplicated here \u2014 keep in\n * sync with `ds-typography` b2 (`parts/variants/body.ts`). Text containers that CAN hold\n * children (placeholder, selection) use `styled(DSTypography)` with `variant=\"b2\"` instead.\n */\nconst b2InputTypography = css`\n font-size: 0.8125rem;\n line-height: 1rem;\n font-weight: 400;\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 1rem;\n line-height: 1.2307692308rem;\n }\n`;\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n color: transparent;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n border: none;\n outline: none;\n background: transparent;\n width: 100%;\n &:focus {\n outline: none;\n }\n ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n ${b2InputTypography}\n background: transparent;\n border: none;\n overflow: hidden;\n padding: 0;\n z-index: 2;\n outline: none;\n color: ${(props) => (props.disabled ? props.theme.colors.neutral[600] : props.theme.colors.neutral[700])};\n &:focus {\n outline: none;\n }\n ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n &::placeholder {\n color: transparent;\n }\n transition: none;\n ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled(DSTypography, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.INPUT_PLACEHOLDER,\n})<{ $nonInteractive?: boolean }>`\n font-style: italic;\n color: ${(props) => (props.$nonInteractive ? props.theme.colors.neutral[600] : props.theme.colors.neutral[500])};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n user-select: none;\n\n & span::after {\n content: '';\n padding: 1px;\n // solve italic font style clipping issue with overflow hidden.\n }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n ${b2InputTypography}\n visibility: hidden;\n position: absolute;\n top: -9999px;\n z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div', {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.INPUT_FIELD_WRAPPER,\n})`\n position: relative;\n align-items: center;\n display: flex;\n /** PUI-15490 \u2014 the spec's 5px vertical padding lives on the text line (this wrapper, always\n * rendered) so the control height is constant and breathing room survives text resize.\n * Mobile keeps the legacy 1.25px \u2014 no mobile spec exists (KNOWN_INTENTIONAL_DEVIATIONS \u00A75).\n * The 1px right padding is pre-existing (caret clipping). */\n padding: 5px 1px 5px 0px;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n padding: 1.25px 1px 1.25px 0px;\n }\n overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n display: none;\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB,2BAA2B;AAWxD,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA,uBAIH,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,mBAAmB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,IACG,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOV,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA,IAItG,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,yBAAyB,OAAO,cAAc;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAW,MAAM,kBAAkB,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc1G,MAAM,4BAA4B,OAAO;AAAA,IAC5C,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOd,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBASsB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { DSTypography, typographyFontFamily } from '@elliemae/ds-typography';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\n/**\n * b2 typography mirrored as raw CSS for the native `<input>` and its hidden\n * width-measuring twin (`StyledInputWidthReference`). Neither can be a `DSTypography`\n * component \u2014 an `<input>` takes no children, and the reference must match the input's\n * exact font metrics or the autosizing (measured off the reference) drifts. ds-typography\n * does not export its VARIANTS_CSS_MAP, so the b2 values are duplicated here \u2014 keep in\n * sync with `ds-typography` b2 (`parts/variants/body.ts`). Text containers that CAN hold\n * children (placeholder, selection) use `styled(DSTypography)` with `variant=\"b2\"` instead.\n *\n * PUI-18977 \u2014 `typographyFontFamily` leads the block, as it does in b2 itself; without it\n * the input never resolves `theme.fonts.default`. It belongs in this shared block rather\n * than on `StyledInput` alone because font-family changes measured text width \u2014 the\n * reference twin must carry the identical family or the autosizing drifts. Precedent:\n * ds-form-input-text (PUI-18721).\n */\nconst b2InputTypography = css`\n ${typographyFontFamily}\n font-size: 0.8125rem;\n line-height: 1rem;\n font-weight: 400;\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 1rem;\n line-height: 1.2307692308rem;\n }\n`;\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n color: transparent;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n border: none;\n outline: none;\n background: transparent;\n width: 100%;\n &:focus {\n outline: none;\n }\n ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n ${b2InputTypography}\n background: transparent;\n border: none;\n overflow: hidden;\n padding: 0;\n z-index: 2;\n outline: none;\n color: ${(props) => (props.disabled ? props.theme.colors.neutral[600] : props.theme.colors.neutral[700])};\n &:focus {\n outline: none;\n }\n ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n &::placeholder {\n color: transparent;\n }\n transition: none;\n ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled(DSTypography, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.INPUT_PLACEHOLDER,\n})<{ $nonInteractive?: boolean }>`\n font-style: italic;\n color: ${(props) => (props.$nonInteractive ? props.theme.colors.neutral[600] : props.theme.colors.neutral[500])};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n user-select: none;\n\n & span::after {\n content: '';\n padding: 1px;\n // solve italic font style clipping issue with overflow hidden.\n }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n ${b2InputTypography}\n visibility: hidden;\n position: absolute;\n top: -9999px;\n z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div', {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.INPUT_FIELD_WRAPPER,\n})`\n position: relative;\n align-items: center;\n display: flex;\n /** PUI-15490 \u2014 the spec's 5px vertical padding lives on the text line (this wrapper, always\n * rendered) so the control height is constant and breathing room survives text resize.\n * Mobile keeps the legacy 1.25px \u2014 no mobile spec exists (KNOWN_INTENTIONAL_DEVIATIONS \u00A75).\n * The 1px right padding is pre-existing (caret clipping). */\n padding: 5px 1px 5px 0px;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n padding: 1.25px 1px 1.25px 0px;\n }\n overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n display: none;\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,cAAc,4BAA4B;AACnD,SAAS,oBAAoB,2BAA2B;AAiBxD,MAAM,oBAAoB;AAAA,IACtB,oBAAoB;AAAA;AAAA;AAAA;AAAA,uBAID,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,mBAAmB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,IACG,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOV,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA,IAItG,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,yBAAyB,OAAO,cAAc;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAW,MAAM,kBAAkB,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc1G,MAAM,4BAA4B,OAAO;AAAA,IAC5C,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOd,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBASsB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-combobox",
3
- "version": "3.70.0-next.69",
3
+ "version": "3.70.0-next.70",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Combobox",
6
6
  "files": [
@@ -37,26 +37,26 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "uid": "^2.0.2",
40
- "@elliemae/ds-button-v2": "3.70.0-next.69",
41
- "@elliemae/ds-circular-progress-indicator": "3.70.0-next.69",
42
- "@elliemae/ds-fast-list": "3.70.0-next.69",
43
- "@elliemae/ds-floating-context": "3.70.0-next.69",
44
- "@elliemae/ds-grid": "3.70.0-next.69",
45
- "@elliemae/ds-icons": "3.70.0-next.69",
46
- "@elliemae/ds-menu-items": "3.70.0-next.69",
47
- "@elliemae/ds-props-helpers": "3.70.0-next.69",
48
- "@elliemae/ds-pills-v2": "3.70.0-next.69",
49
- "@elliemae/ds-system": "3.70.0-next.69",
50
- "@elliemae/ds-typography": "3.70.0-next.69"
40
+ "@elliemae/ds-button-v2": "3.70.0-next.70",
41
+ "@elliemae/ds-circular-progress-indicator": "3.70.0-next.70",
42
+ "@elliemae/ds-fast-list": "3.70.0-next.70",
43
+ "@elliemae/ds-floating-context": "3.70.0-next.70",
44
+ "@elliemae/ds-grid": "3.70.0-next.70",
45
+ "@elliemae/ds-menu-items": "3.70.0-next.70",
46
+ "@elliemae/ds-icons": "3.70.0-next.70",
47
+ "@elliemae/ds-pills-v2": "3.70.0-next.70",
48
+ "@elliemae/ds-typography": "3.70.0-next.70",
49
+ "@elliemae/ds-props-helpers": "3.70.0-next.70",
50
+ "@elliemae/ds-system": "3.70.0-next.70"
51
51
  },
52
52
  "devDependencies": {
53
53
  "@elliemae/pui-theme": "~2.13.0",
54
54
  "jest": "^30.0.0",
55
55
  "styled-components": "~5.3.11",
56
56
  "styled-system": "^5.1.5",
57
- "@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.69",
58
- "@elliemae/ds-monorepo-devops": "3.70.0-next.69",
59
- "@elliemae/ds-test-utils": "3.70.0-next.69"
57
+ "@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.70",
58
+ "@elliemae/ds-test-utils": "3.70.0-next.70",
59
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.70"
60
60
  },
61
61
  "peerDependencies": {
62
62
  "@elliemae/pui-theme": "~2.13.0",