@elliemae/ds-form-combobox 3.30.0-rc.0 → 3.30.0-rc.1

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.
@@ -88,7 +88,10 @@ const Controls = () => {
88
88
  [internalRef, inline]
89
89
  );
90
90
  const { onKeyDownPills } = (0, import_useOnPillsNavigation.useOnPillsNavigation)();
91
- const cols = (0, import_react.useMemo)(() => !inline ? ["minmax(0px,max-content)", "1fr", "auto"] : ["minmax(0px, auto)"], [inline]);
91
+ const cols = (0, import_react.useMemo)(
92
+ () => !inline ? ["minmax(0px,max-content)", "minmax(20px, auto)", "2.231rem"] : ["minmax(0px, auto)"],
93
+ [inline]
94
+ );
92
95
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
93
96
  import_styled.StyledControlsWrapper,
94
97
  {
@@ -105,10 +108,18 @@ const Controls = () => {
105
108
  children: [
106
109
  !inline && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSelection, { innerRef: selectedOptionsRef, onClick: handleOnPillsClick, children: Array.isArray(selectedValues) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_multi_selected_values_container.MultiSelectedValuesContainer, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSingleSelectWraper, { "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES, disabled, children: selectedValues && inputValue === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: selectedValues.label }) : null }) }),
107
110
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlsInput.ControlsInput, {}),
108
- !inline && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledHeaderActionsWrapper, { justifyItems: "center", cols: ["min-content", "minmax(28px,max-content)"], children: [
109
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleHeaderActionsSeparator, { disabled }),
110
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownIndicator.DropdownIndicator, {})
111
- ] })
111
+ !inline && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
112
+ import_styled.StyledHeaderActionsWrapper,
113
+ {
114
+ justifyItems: "center",
115
+ cols: ["min-content", "minmax(28px,max-content)"],
116
+ justifyContent: "flex-end",
117
+ children: [
118
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleHeaderActionsSeparator, { disabled }),
119
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownIndicator.DropdownIndicator, {})
120
+ ]
121
+ }
122
+ )
112
123
  ]
113
124
  }
114
125
  );
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/controls/Controls.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n inputValue,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false, 'click');\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true, 'click');\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, setMenuState, focusOptionIdx]);\n\n // this callback prevent to toggle the menu when clicking or removing pills\n const handleOnPillsClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (menuState || disabled) {\n e.stopPropagation();\n } else {\n internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [menuState, internalRef, disabled, setMenuState],\n );\n\n // callback to prevent onBlur on the input when clicking in all the wrapper\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (document.activeElement === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(() => (!inline ? ['minmax(0px,max-content)', '1fr', 'auto'] : ['minmax(0px, auto)']), [inline]);\n return (\n <StyledControlsWrapper\n innerRef={controlsWrapperRef}\n cols={cols}\n disabled={disabled}\n minWidth={inputMinWidth}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection innerRef={selectedOptionsRef} onClick={handleOnPillsClick}>\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <StyledSingleSelectWraper data-testid={ComboboxDataTestid.SELECTED_VALUES} disabled={disabled}>\n {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText value={selectedValues.label} /> : null}\n </StyledSingleSelectWraper>\n )}\n </StyledSelection>\n )}\n\n <ControlsInput />\n {!inline && (\n <StyledHeaderActionsWrapper justifyItems=\"center\" cols={['min-content', 'minmax(28px,max-content)']}>\n <StyleHeaderActionsSeparator disabled={disabled} />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyFX;AAvFZ,mBAAwD;AACxD,uCAA2C;AAC3C,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAE5B,oBAMO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AAC9B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,eAAe;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,OAAO,OAAO;AAC3B,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,MAAM,OAAO;AAAA,EAG5B,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,yBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,MAAM,YAAY;AAAA,MACjC;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,YAAY;AAAA,EACjD;AAGA,QAAM,wBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,YAAY,WAAW,QAAQ;AAC5D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,eAAe,QAAI,kDAAqB;AAEhD,QAAM,WAAO,sBAAQ,MAAO,CAAC,SAAS,CAAC,2BAA2B,OAAO,MAAM,IAAI,CAAC,mBAAmB,GAAI,CAAC,MAAM,CAAC;AACnH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,eAAa,8CAAmB;AAAA,MAE/B;AAAA,SAAC,UACA,4CAAC,iCAAgB,UAAU,oBAAoB,SAAS,oBACrD,gBAAM,QAAQ,cAAc,IAC3B,4CAAC,uEAA6B,IAE9B,4CAAC,0CAAyB,eAAa,8CAAmB,iBAAiB,UACxE,4BAAkB,eAAe,KAAK,4CAAC,+DAA2B,OAAO,eAAe,OAAO,IAAK,MACvG,GAEJ;AAAA,QAGF,4CAAC,sCAAc;AAAA,QACd,CAAC,UACA,6CAAC,4CAA2B,cAAa,UAAS,MAAM,CAAC,eAAe,0BAA0B,GAChG;AAAA,sDAAC,6CAA4B,UAAoB;AAAA,UACjD,4CAAC,8CAAkB;AAAA,WACrB;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
4
+ "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n inputValue,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false, 'click');\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true, 'click');\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, setMenuState, focusOptionIdx]);\n\n // this callback prevent to toggle the menu when clicking or removing pills\n const handleOnPillsClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (menuState || disabled) {\n e.stopPropagation();\n } else {\n internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [menuState, internalRef, disabled, setMenuState],\n );\n\n // callback to prevent onBlur on the input when clicking in all the wrapper\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (document.activeElement === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(\n () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '2.231rem'] : ['minmax(0px, auto)']),\n [inline],\n );\n return (\n <StyledControlsWrapper\n innerRef={controlsWrapperRef}\n cols={cols}\n disabled={disabled}\n minWidth={inputMinWidth}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection innerRef={selectedOptionsRef} onClick={handleOnPillsClick}>\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <StyledSingleSelectWraper data-testid={ComboboxDataTestid.SELECTED_VALUES} disabled={disabled}>\n {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText value={selectedValues.label} /> : null}\n </StyledSingleSelectWraper>\n )}\n </StyledSelection>\n )}\n\n <ControlsInput />\n {!inline && (\n <StyledHeaderActionsWrapper\n justifyItems=\"center\"\n cols={['min-content', 'minmax(28px,max-content)']}\n justifyContent=\"flex-end\"\n >\n <StyleHeaderActionsSeparator disabled={disabled} />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4FX;AA1FZ,mBAAwD;AACxD,uCAA2C;AAC3C,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAE5B,oBAMO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AAC9B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,eAAe;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,OAAO,OAAO;AAC3B,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,MAAM,OAAO;AAAA,EAG5B,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,yBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,MAAM,YAAY;AAAA,MACjC;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,YAAY;AAAA,EACjD;AAGA,QAAM,wBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,YAAY,WAAW,QAAQ;AAC5D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,eAAe,QAAI,kDAAqB;AAEhD,QAAM,WAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,UAAU,IAAI,CAAC,mBAAmB;AAAA,IACrG,CAAC,MAAM;AAAA,EACT;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,eAAa,8CAAmB;AAAA,MAE/B;AAAA,SAAC,UACA,4CAAC,iCAAgB,UAAU,oBAAoB,SAAS,oBACrD,gBAAM,QAAQ,cAAc,IAC3B,4CAAC,uEAA6B,IAE9B,4CAAC,0CAAyB,eAAa,8CAAmB,iBAAiB,UACxE,4BAAkB,eAAe,KAAK,4CAAC,+DAA2B,OAAO,eAAe,OAAO,IAAK,MACvG,GAEJ;AAAA,QAGF,4CAAC,sCAAc;AAAA,QACd,CAAC,UACA;AAAA,UAAC;AAAA;AAAA,YACC,cAAa;AAAA,YACb,MAAM,CAAC,eAAe,0BAA0B;AAAA,YAChD,gBAAe;AAAA,YAEf;AAAA,0DAAC,6CAA4B,UAAoB;AAAA,cACjD,4CAAC,8CAAkB;AAAA;AAAA;AAAA,QACrB;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
6
6
  "names": ["ComboBoxContext"]
7
7
  }
@@ -60,6 +60,7 @@ const StyledControlsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid,
60
60
  min-width: ${({ minWidth, inline }) => inline || !minWidth ? "" : `${minWidth}px`};
61
61
  align-items: center;
62
62
  align-content: center;
63
+ min-height: 28px;
63
64
  padding: 3px 0px 3px 8px;
64
65
  @media (max-width: ${import_ds_system.th.breakpoint("small")}) {
65
66
  padding: 1.25px 0px 1.25px 8px;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/controls/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled, css, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\ninterface StyledControlsWrapperT {\n hasError: boolean;\n inline: boolean;\n minWidth?: number;\n disabled: boolean;\n}\nconst normalBorder = css<{ hasError: boolean }>`\n border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n`;\nconst focusBorder = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n border: 1px solid ${({ theme }) => theme.colors.brand[700]};\n`;\nexport const StyledControlsWrapper = styled(Grid, {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n position: relative;\n border-radius: 2px;\n min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n align-items: center;\n align-content: center;\n padding: 3px 0px 3px 8px;\n @media (max-width: ${th.breakpoint('small')}) {\n padding: 1.25px 0px 1.25px 8px;\n }\n margin: ${({ inline }) => (inline ? '10px 16px' : '')};\n ${normalBorder}\n &:hover {\n ${({ disabled }) => (!disabled ? hoverBorder : '')}\n }\n &:focus-within {\n ${focusBorder}\n }\n`;\n\nexport const StyledSingleSelectWraper = styled.div<{ disabled: boolean }>`\n display: flex;\n width: 100%;\n align-items: center;\n color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['400'] : '')};\n user-select: ${({ disabled }) => (disabled ? 'none' : '')};\n`;\n\nexport const StyledSelection = styled.div`\n font-size: 1rem;\n margin-right: 3px;\n display: flex;\n`;\n\nexport const StyledHeaderActionsWrapper = styled(Grid)`\n height: 100%;\n .em-ds-button--text:focus::after {\n border: none;\n }\n`;\n\nexport const StyleDropdownIndicator = styled.div``;\n\nexport const StyleHeaderActionsSeparator = styled.span<Partial<StyledControlsWrapperT>>`\n height: 100%;\n width: 1px;\n background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'])};\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,uBAAgC;AAChC,qBAAqB;AACrB,qBAAgD;AAQhD,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAE9G,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAI5D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAEpD,MAAM,4BAAwB,yBAAO,qBAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA,gBACe,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,eAGpE,CAAC,EAAE,UAAU,OAAO,MAAO,UAAU,CAAC,WAAW,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA,uBAIjD,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA,YAGhC,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc;AAAA,IAChD;AAAA;AAAA,MAEE,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc;AAAA;AAAA;AAAA,MAG7C;AAAA;AAAA;AAIC,MAAM,2BAA2B,wBAAO;AAAA;AAAA;AAAA;AAAA,WAIpC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA,iBAC7D,CAAC,EAAE,SAAS,MAAO,WAAW,SAAS;AAAA;AAGjD,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,iCAA6B,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,yBAAyB,wBAAO;AAEtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA,sBAG5B,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK;AAAA;",
4
+ "sourcesContent": ["import { styled, css, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\ninterface StyledControlsWrapperT {\n hasError: boolean;\n inline: boolean;\n minWidth?: number;\n disabled: boolean;\n}\nconst normalBorder = css<{ hasError: boolean }>`\n border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n`;\nconst focusBorder = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n border: 1px solid ${({ theme }) => theme.colors.brand[700]};\n`;\nexport const StyledControlsWrapper = styled(Grid, {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n position: relative;\n border-radius: 2px;\n min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n align-items: center;\n align-content: center;\n min-height: 28px;\n padding: 3px 0px 3px 8px;\n @media (max-width: ${th.breakpoint('small')}) {\n padding: 1.25px 0px 1.25px 8px;\n }\n margin: ${({ inline }) => (inline ? '10px 16px' : '')};\n ${normalBorder}\n &:hover {\n ${({ disabled }) => (!disabled ? hoverBorder : '')}\n }\n &:focus-within {\n ${focusBorder}\n }\n`;\n\nexport const StyledSingleSelectWraper = styled.div<{ disabled: boolean }>`\n display: flex;\n width: 100%;\n align-items: center;\n color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['400'] : '')};\n user-select: ${({ disabled }) => (disabled ? 'none' : '')};\n`;\n\nexport const StyledSelection = styled.div`\n font-size: 1rem;\n margin-right: 3px;\n display: flex;\n`;\n\nexport const StyledHeaderActionsWrapper = styled(Grid)`\n height: 100%;\n .em-ds-button--text:focus::after {\n border: none;\n }\n`;\n\nexport const StyleDropdownIndicator = styled.div``;\n\nexport const StyleHeaderActionsSeparator = styled.span<Partial<StyledControlsWrapperT>>`\n height: 100%;\n width: 1px;\n background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'])};\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,uBAAgC;AAChC,qBAAqB;AACrB,qBAAgD;AAQhD,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAE9G,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAI5D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAEpD,MAAM,4BAAwB,yBAAO,qBAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA,gBACe,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,eAGpE,CAAC,EAAE,UAAU,OAAO,MAAO,UAAU,CAAC,WAAW,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKjD,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA,YAGhC,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc;AAAA,IAChD;AAAA;AAAA,MAEE,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc;AAAA;AAAA;AAAA,MAG7C;AAAA;AAAA;AAIC,MAAM,2BAA2B,wBAAO;AAAA;AAAA;AAAA;AAAA,WAIpC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA,iBAC7D,CAAC,EAAE,SAAS,MAAO,WAAW,SAAS;AAAA;AAGjD,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,iCAA6B,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,yBAAyB,wBAAO;AAEtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA,sBAG5B,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK;AAAA;",
6
6
  "names": []
7
7
  }
@@ -61,7 +61,10 @@ const Controls = () => {
61
61
  [internalRef, inline]
62
62
  );
63
63
  const { onKeyDownPills } = useOnPillsNavigation();
64
- const cols = useMemo(() => !inline ? ["minmax(0px,max-content)", "1fr", "auto"] : ["minmax(0px, auto)"], [inline]);
64
+ const cols = useMemo(
65
+ () => !inline ? ["minmax(0px,max-content)", "minmax(20px, auto)", "2.231rem"] : ["minmax(0px, auto)"],
66
+ [inline]
67
+ );
65
68
  return /* @__PURE__ */ jsxs(
66
69
  StyledControlsWrapper,
67
70
  {
@@ -78,10 +81,18 @@ const Controls = () => {
78
81
  children: [
79
82
  !inline && /* @__PURE__ */ jsx(StyledSelection, { innerRef: selectedOptionsRef, onClick: handleOnPillsClick, children: Array.isArray(selectedValues) ? /* @__PURE__ */ jsx(MultiSelectedValuesContainer, {}) : /* @__PURE__ */ jsx(StyledSingleSelectWraper, { "data-testid": ComboboxDataTestid.SELECTED_VALUES, disabled, children: selectedValues && inputValue === "" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: selectedValues.label }) : null }) }),
80
83
  /* @__PURE__ */ jsx(ControlsInput, {}),
81
- !inline && /* @__PURE__ */ jsxs(StyledHeaderActionsWrapper, { justifyItems: "center", cols: ["min-content", "minmax(28px,max-content)"], children: [
82
- /* @__PURE__ */ jsx(StyleHeaderActionsSeparator, { disabled }),
83
- /* @__PURE__ */ jsx(DropdownIndicator, {})
84
- ] })
84
+ !inline && /* @__PURE__ */ jsxs(
85
+ StyledHeaderActionsWrapper,
86
+ {
87
+ justifyItems: "center",
88
+ cols: ["min-content", "minmax(28px,max-content)"],
89
+ justifyContent: "flex-end",
90
+ children: [
91
+ /* @__PURE__ */ jsx(StyleHeaderActionsSeparator, { disabled }),
92
+ /* @__PURE__ */ jsx(DropdownIndicator, {})
93
+ ]
94
+ }
95
+ )
85
96
  ]
86
97
  }
87
98
  );
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/Controls.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n inputValue,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false, 'click');\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true, 'click');\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, setMenuState, focusOptionIdx]);\n\n // this callback prevent to toggle the menu when clicking or removing pills\n const handleOnPillsClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (menuState || disabled) {\n e.stopPropagation();\n } else {\n internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [menuState, internalRef, disabled, setMenuState],\n );\n\n // callback to prevent onBlur on the input when clicking in all the wrapper\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (document.activeElement === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(() => (!inline ? ['minmax(0px,max-content)', '1fr', 'auto'] : ['minmax(0px, auto)']), [inline]);\n return (\n <StyledControlsWrapper\n innerRef={controlsWrapperRef}\n cols={cols}\n disabled={disabled}\n minWidth={inputMinWidth}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection innerRef={selectedOptionsRef} onClick={handleOnPillsClick}>\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <StyledSingleSelectWraper data-testid={ComboboxDataTestid.SELECTED_VALUES} disabled={disabled}>\n {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText value={selectedValues.label} /> : null}\n </StyledSingleSelectWraper>\n )}\n </StyledSelection>\n )}\n\n <ControlsInput />\n {!inline && (\n <StyledHeaderActionsWrapper justifyItems=\"center\" cols={['min-content', 'minmax(28px,max-content)']}>\n <StyleHeaderActionsSeparator disabled={disabled} />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACyFX,cAWJ,YAXI;AAvFZ,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,kCAAkC;AAC3C,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAE5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AAC9B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,eAAe;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,OAAO,OAAO;AAC3B,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,MAAM,OAAO;AAAA,EAG5B,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,qBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,MAAM,YAAY;AAAA,MACjC;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,YAAY;AAAA,EACjD;AAGA,QAAM,oBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,YAAY,WAAW,QAAQ;AAC5D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,eAAe,IAAI,qBAAqB;AAEhD,QAAM,OAAO,QAAQ,MAAO,CAAC,SAAS,CAAC,2BAA2B,OAAO,MAAM,IAAI,CAAC,mBAAmB,GAAI,CAAC,MAAM,CAAC;AACnH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,eAAa,mBAAmB;AAAA,MAE/B;AAAA,SAAC,UACA,oBAAC,mBAAgB,UAAU,oBAAoB,SAAS,oBACrD,gBAAM,QAAQ,cAAc,IAC3B,oBAAC,gCAA6B,IAE9B,oBAAC,4BAAyB,eAAa,mBAAmB,iBAAiB,UACxE,4BAAkB,eAAe,KAAK,oBAAC,8BAA2B,OAAO,eAAe,OAAO,IAAK,MACvG,GAEJ;AAAA,QAGF,oBAAC,iBAAc;AAAA,QACd,CAAC,UACA,qBAAC,8BAA2B,cAAa,UAAS,MAAM,CAAC,eAAe,0BAA0B,GAChG;AAAA,8BAAC,+BAA4B,UAAoB;AAAA,UACjD,oBAAC,qBAAkB;AAAA,WACrB;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n inputValue,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false, 'click');\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true, 'click');\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, setMenuState, focusOptionIdx]);\n\n // this callback prevent to toggle the menu when clicking or removing pills\n const handleOnPillsClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (menuState || disabled) {\n e.stopPropagation();\n } else {\n internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [menuState, internalRef, disabled, setMenuState],\n );\n\n // callback to prevent onBlur on the input when clicking in all the wrapper\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (document.activeElement === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(\n () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '2.231rem'] : ['minmax(0px, auto)']),\n [inline],\n );\n return (\n <StyledControlsWrapper\n innerRef={controlsWrapperRef}\n cols={cols}\n disabled={disabled}\n minWidth={inputMinWidth}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection innerRef={selectedOptionsRef} onClick={handleOnPillsClick}>\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <StyledSingleSelectWraper data-testid={ComboboxDataTestid.SELECTED_VALUES} disabled={disabled}>\n {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText value={selectedValues.label} /> : null}\n </StyledSingleSelectWraper>\n )}\n </StyledSelection>\n )}\n\n <ControlsInput />\n {!inline && (\n <StyledHeaderActionsWrapper\n justifyItems=\"center\"\n cols={['min-content', 'minmax(28px,max-content)']}\n justifyContent=\"flex-end\"\n >\n <StyleHeaderActionsSeparator disabled={disabled} />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC4FX,cAWJ,YAXI;AA1FZ,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,kCAAkC;AAC3C,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAE5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AAC9B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,eAAe;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,OAAO,OAAO;AAC3B,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,MAAM,OAAO;AAAA,EAG5B,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,qBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,MAAM,YAAY;AAAA,MACjC;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,YAAY;AAAA,EACjD;AAGA,QAAM,oBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,YAAY,WAAW,QAAQ;AAC5D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,eAAe,IAAI,qBAAqB;AAEhD,QAAM,OAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,UAAU,IAAI,CAAC,mBAAmB;AAAA,IACrG,CAAC,MAAM;AAAA,EACT;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,eAAa,mBAAmB;AAAA,MAE/B;AAAA,SAAC,UACA,oBAAC,mBAAgB,UAAU,oBAAoB,SAAS,oBACrD,gBAAM,QAAQ,cAAc,IAC3B,oBAAC,gCAA6B,IAE9B,oBAAC,4BAAyB,eAAa,mBAAmB,iBAAiB,UACxE,4BAAkB,eAAe,KAAK,oBAAC,8BAA2B,OAAO,eAAe,OAAO,IAAK,MACvG,GAEJ;AAAA,QAGF,oBAAC,iBAAc;AAAA,QACd,CAAC,UACA;AAAA,UAAC;AAAA;AAAA,YACC,cAAa;AAAA,YACb,MAAM,CAAC,eAAe,0BAA0B;AAAA,YAChD,gBAAe;AAAA,YAEf;AAAA,kCAAC,+BAA4B,UAAoB;AAAA,cACjD,oBAAC,qBAAkB;AAAA;AAAA;AAAA,QACrB;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -22,6 +22,7 @@ const StyledControlsWrapper = styled(Grid, {
22
22
  min-width: ${({ minWidth, inline }) => inline || !minWidth ? "" : `${minWidth}px`};
23
23
  align-items: center;
24
24
  align-content: center;
25
+ min-height: 28px;
25
26
  padding: 3px 0px 3px 8px;
26
27
  @media (max-width: ${th.breakpoint("small")}) {
27
28
  padding: 1.25px 0px 1.25px 8px;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/styled.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\ninterface StyledControlsWrapperT {\n hasError: boolean;\n inline: boolean;\n minWidth?: number;\n disabled: boolean;\n}\nconst normalBorder = css<{ hasError: boolean }>`\n border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n`;\nconst focusBorder = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n border: 1px solid ${({ theme }) => theme.colors.brand[700]};\n`;\nexport const StyledControlsWrapper = styled(Grid, {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n position: relative;\n border-radius: 2px;\n min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n align-items: center;\n align-content: center;\n padding: 3px 0px 3px 8px;\n @media (max-width: ${th.breakpoint('small')}) {\n padding: 1.25px 0px 1.25px 8px;\n }\n margin: ${({ inline }) => (inline ? '10px 16px' : '')};\n ${normalBorder}\n &:hover {\n ${({ disabled }) => (!disabled ? hoverBorder : '')}\n }\n &:focus-within {\n ${focusBorder}\n }\n`;\n\nexport const StyledSingleSelectWraper = styled.div<{ disabled: boolean }>`\n display: flex;\n width: 100%;\n align-items: center;\n color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['400'] : '')};\n user-select: ${({ disabled }) => (disabled ? 'none' : '')};\n`;\n\nexport const StyledSelection = styled.div`\n font-size: 1rem;\n margin-right: 3px;\n display: flex;\n`;\n\nexport const StyledHeaderActionsWrapper = styled(Grid)`\n height: 100%;\n .em-ds-button--text:focus::after {\n border: none;\n }\n`;\n\nexport const StyleDropdownIndicator = styled.div``;\n\nexport const StyleHeaderActionsSeparator = styled.span<Partial<StyledControlsWrapperT>>`\n height: 100%;\n width: 1px;\n background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'])};\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,UAAU;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB,uBAAuB;AAQhD,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAE9G,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAI5D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAEpD,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,gBACe,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,eAGpE,CAAC,EAAE,UAAU,OAAO,MAAO,UAAU,CAAC,WAAW,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA,uBAIjD,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA,YAGhC,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc;AAAA,IAChD;AAAA;AAAA,MAEE,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc;AAAA;AAAA;AAAA,MAG7C;AAAA;AAAA;AAIC,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA,WAIpC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA,iBAC7D,CAAC,EAAE,SAAS,MAAO,WAAW,SAAS;AAAA;AAGjD,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,6BAA6B,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,yBAAyB,OAAO;AAEtC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA,sBAG5B,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\ninterface StyledControlsWrapperT {\n hasError: boolean;\n inline: boolean;\n minWidth?: number;\n disabled: boolean;\n}\nconst normalBorder = css<{ hasError: boolean }>`\n border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n`;\nconst focusBorder = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n border: 1px solid ${({ theme }) => theme.colors.brand[700]};\n`;\nexport const StyledControlsWrapper = styled(Grid, {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n position: relative;\n border-radius: 2px;\n min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n align-items: center;\n align-content: center;\n min-height: 28px;\n padding: 3px 0px 3px 8px;\n @media (max-width: ${th.breakpoint('small')}) {\n padding: 1.25px 0px 1.25px 8px;\n }\n margin: ${({ inline }) => (inline ? '10px 16px' : '')};\n ${normalBorder}\n &:hover {\n ${({ disabled }) => (!disabled ? hoverBorder : '')}\n }\n &:focus-within {\n ${focusBorder}\n }\n`;\n\nexport const StyledSingleSelectWraper = styled.div<{ disabled: boolean }>`\n display: flex;\n width: 100%;\n align-items: center;\n color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['400'] : '')};\n user-select: ${({ disabled }) => (disabled ? 'none' : '')};\n`;\n\nexport const StyledSelection = styled.div`\n font-size: 1rem;\n margin-right: 3px;\n display: flex;\n`;\n\nexport const StyledHeaderActionsWrapper = styled(Grid)`\n height: 100%;\n .em-ds-button--text:focus::after {\n border: none;\n }\n`;\n\nexport const StyleDropdownIndicator = styled.div``;\n\nexport const StyleHeaderActionsSeparator = styled.span<Partial<StyledControlsWrapperT>>`\n height: 100%;\n width: 1px;\n background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'])};\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,UAAU;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB,uBAAuB;AAQhD,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAE9G,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAI5D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAEpD,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,gBACe,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,eAGpE,CAAC,EAAE,UAAU,OAAO,MAAO,UAAU,CAAC,WAAW,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKjD,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA,YAGhC,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc;AAAA,IAChD;AAAA;AAAA,MAEE,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc;AAAA;AAAA;AAAA,MAG7C;AAAA;AAAA;AAIC,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA,WAIpC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA,iBAC7D,CAAC,EAAE,SAAS,MAAO,WAAW,SAAS;AAAA;AAGjD,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,6BAA6B,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,yBAAyB,OAAO;AAEtC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA,sBAG5B,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK;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.30.0-rc.0",
3
+ "version": "3.30.0-rc.1",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Combobox",
6
6
  "files": [
@@ -37,26 +37,26 @@
37
37
  "dependencies": {
38
38
  "react-virtual": "~2.10.4",
39
39
  "uid": "~2.0.1",
40
- "@elliemae/ds-circular-progress-indicator": "3.30.0-rc.0",
41
- "@elliemae/ds-button-v2": "3.30.0-rc.0",
42
- "@elliemae/ds-grid": "3.30.0-rc.0",
43
- "@elliemae/ds-form-checkbox": "3.30.0-rc.0",
44
- "@elliemae/ds-icons": "3.30.0-rc.0",
45
- "@elliemae/ds-popperjs": "3.30.0-rc.0",
46
- "@elliemae/ds-props-helpers": "3.30.0-rc.0",
47
- "@elliemae/ds-pills-v2": "3.30.0-rc.0",
48
- "@elliemae/ds-truncated-tooltip-text": "3.30.0-rc.0",
49
- "@elliemae/ds-system": "3.30.0-rc.0",
50
- "@elliemae/ds-utilities": "3.30.0-rc.0",
51
- "@elliemae/ds-menu-items": "3.30.0-rc.0"
40
+ "@elliemae/ds-button-v2": "3.30.0-rc.1",
41
+ "@elliemae/ds-form-checkbox": "3.30.0-rc.1",
42
+ "@elliemae/ds-circular-progress-indicator": "3.30.0-rc.1",
43
+ "@elliemae/ds-grid": "3.30.0-rc.1",
44
+ "@elliemae/ds-icons": "3.30.0-rc.1",
45
+ "@elliemae/ds-menu-items": "3.30.0-rc.1",
46
+ "@elliemae/ds-popperjs": "3.30.0-rc.1",
47
+ "@elliemae/ds-pills-v2": "3.30.0-rc.1",
48
+ "@elliemae/ds-props-helpers": "3.30.0-rc.1",
49
+ "@elliemae/ds-system": "3.30.0-rc.1",
50
+ "@elliemae/ds-truncated-tooltip-text": "3.30.0-rc.1",
51
+ "@elliemae/ds-utilities": "3.30.0-rc.1"
52
52
  },
53
53
  "devDependencies": {
54
54
  "@elliemae/pui-cli": "~9.0.0-next.31",
55
55
  "@elliemae/pui-theme": "~2.7.0",
56
56
  "styled-components": "~5.3.9",
57
57
  "styled-system": "~5.1.5",
58
- "@elliemae/ds-form-helpers-mask-hooks": "3.30.0-rc.0",
59
- "@elliemae/ds-monorepo-devops": "3.30.0-rc.0"
58
+ "@elliemae/ds-form-helpers-mask-hooks": "3.30.0-rc.1",
59
+ "@elliemae/ds-monorepo-devops": "3.30.0-rc.1"
60
60
  },
61
61
  "peerDependencies": {
62
62
  "@elliemae/pui-theme": "~2.7.0",