@elliemae/ds-pills-v2 3.35.0 → 3.36.0-next.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.
- package/dist/cjs/components/PillButton.js.map +1 -1
- package/dist/cjs/components/PillGroup.js +0 -1
- package/dist/cjs/components/PillGroup.js.map +2 -2
- package/dist/cjs/components/styled.js +1 -2
- package/dist/cjs/components/styled.js.map +1 -1
- package/dist/cjs/components/types/DropdownPill.js +2 -4
- package/dist/cjs/components/types/DropdownPill.js.map +1 -1
- package/dist/cjs/components/types/InputPill.js.map +1 -1
- package/dist/cjs/components/types/RemovablePill.js +3 -6
- package/dist/cjs/components/types/RemovablePill.js.map +1 -1
- package/dist/esm/components/PillButton.js.map +1 -1
- package/dist/esm/components/PillGroup.js +0 -1
- package/dist/esm/components/PillGroup.js.map +2 -2
- package/dist/esm/components/styled.js +1 -2
- package/dist/esm/components/styled.js.map +1 -1
- package/dist/esm/components/types/DropdownPill.js +2 -4
- package/dist/esm/components/types/DropdownPill.js.map +1 -1
- package/dist/esm/components/types/InputPill.js.map +1 -1
- package/dist/esm/components/types/RemovablePill.js +3 -6
- package/dist/esm/components/types/RemovablePill.js.map +1 -1
- package/package.json +13 -13
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/PillButton.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { StyledPillButton } from './styled.js';\nimport { DSPillButtonName } from '../DSPillDefinitions.js';\nimport { type DSPillT, DSPillButtonDefaultProps, DSPillButtonPropTypesSchema } from '../react-desc-prop-types.js';\n\nconst typeToClassName = {\n only: 'ds-pill-button-only',\n left: 'ds-pill-button-left',\n right: 'ds-pill-button-right',\n};\n\nconst DSPillButton: React.ComponentType<DSPillT.ButtonProps> = (props) => {\n const { children, ...restProps } = props;\n const propsWithDefaults = useMemoMergePropsWithDefault<DSPillT.InternalButtonProps>(\n restProps,\n DSPillButtonDefaultProps,\n );\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypesSchema, DSPillButtonName);\n const { type, ...rest } = propsWithDefaults;\n\n return (\n <StyledPillButton\n {...rest}\n buttonType=\"raw\"\n className={`${typeToClassName[type]} ${rest.className ?? ''}`}\n type=\"button\"\n >\n {children}\n </StyledPillButton>\n );\n};\n\nDSPillButton.displayName = DSPillButtonName;\nconst DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypesSchema;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBnB;AArBJ,8BAAuF;AACvF,oBAAiC;AACjC,+BAAiC;AACjC,mCAAoF;AAEpF,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AACnC,QAAM,wBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AACA,8DAA+B,mBAAmB,0DAA6B,yCAAgB;AAC/F,QAAM,EAAE,MAAM,GAAG,KAAK,IAAI;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,YAAW;AAAA,MACX,WAAW,GAAG,gBAAgB,IAAI,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBnB;AArBJ,8BAAuF;AACvF,oBAAiC;AACjC,+BAAiC;AACjC,mCAAoF;AAEpF,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AACnC,QAAM,wBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AACA,8DAA+B,mBAAmB,0DAA6B,yCAAgB;AAC/F,QAAM,EAAE,MAAM,GAAG,KAAK,IAAI;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,YAAW;AAAA,MACX,WAAW,GAAG,gBAAgB,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;AAAA,MAC3D,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY,EAAE,YAAY,aAAa;AAC/E,uBAAuB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -91,7 +91,6 @@ const DSPillGroupV2 = (props) => {
|
|
|
91
91
|
}
|
|
92
92
|
) });
|
|
93
93
|
};
|
|
94
|
-
DSPillGroupV2.propTypes = import_react_desc_prop_types.DSPillGroupPropTypes;
|
|
95
94
|
DSPillGroupV2.displayName = import_DSPillDefinitions.DSPillGroupName;
|
|
96
95
|
const DSPillGroupV2WithSchema = (0, import_ds_props_helpers.describe)(DSPillGroupV2);
|
|
97
96
|
DSPillGroupV2WithSchema.propTypes = import_react_desc_prop_types.DSPillGroupPropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/PillGroup.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport { StyledPillGroup } from './styled.js';\nimport { DSPillGroupName } from '../DSPillDefinitions.js';\nimport { DSPillGroupDefaultProps, type DSPillT, DSPillGroupPropTypes } from '../react-desc-prop-types.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nexport const DSPillGroupV2Context = createContext<{\n onKeyboardRemove: (pillUid: string) => void;\n onKeyboardNavigation: (pillUid: string, step: number, e: React.KeyboardEvent) => void;\n}>({\n onKeyboardRemove: () => null,\n onKeyboardNavigation: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillT.GroupProps> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSPillT.InternalGroupProps>(props, DSPillGroupDefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes, DSPillGroupName);\n\n const globalAttrs = useGetGlobalAttributes<DSPillT.InternalGroupProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefaults,\n );\n const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);\n const { children, width, innerRef } = propsWithDefaults;\n const onKeyboardRemove = useCallback(\n (pillUid: string) => {\n const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n if (pillIndex > 0) {\n elems[pillIndex - 1].focus();\n } else if (pillIndex + 1 < elems.length) {\n elems[pillIndex + 1].focus();\n }\n },\n [pillGroupUid],\n );\n const onKeyboardNavigation = useCallback(\n (pillUid: string, step: number, e: React.KeyboardEvent) => {\n const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n if (pillIndex >= 0) {\n if (elems[pillIndex + step]) {\n e.stopPropagation();\n elems[pillIndex + step].focus();\n }\n }\n },\n [pillGroupUid],\n );\n\n return (\n <DSPillGroupV2Context.Provider value={{ onKeyboardRemove, onKeyboardNavigation }}>\n <StyledPillGroup\n {...globalAttrs}\n width={width}\n id={pillGroupUid}\n cols={React.Children.map(children, () => 'auto') as string[]}\n gutter=\"2px\"\n innerRef={innerRef}\n >\n {children}\n </StyledPillGroup>\n </DSPillGroupV2Context.Provider>\n );\n};\n\nDSPillGroupV2.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DjB;AA9DN,mBAA2D;AAC3D,iBAAoB;AACpB,8BAKO;AACP,oBAAgC;AAChC,+BAAgC;AAChC,mCAA4E;AAGrE,MAAM,2BAAuB,4BAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAC9B,CAAC;AAED,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,wBAAoB,sDAAyD,OAAO,oDAAuB;AACjH,8DAA+B,mBAAmB,mDAAsB,wCAAe;AAEvF,QAAM,kBAAc;AAAA,IAClB;AAAA,EACF;AACA,QAAM,mBAAe,sBAAQ,MAAM,qBAAiB,gBAAI,
|
|
4
|
+
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport { StyledPillGroup } from './styled.js';\nimport { DSPillGroupName } from '../DSPillDefinitions.js';\nimport { DSPillGroupDefaultProps, type DSPillT, DSPillGroupPropTypes } from '../react-desc-prop-types.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nexport const DSPillGroupV2Context = createContext<{\n onKeyboardRemove: (pillUid: string) => void;\n onKeyboardNavigation: (pillUid: string, step: number, e: React.KeyboardEvent) => void;\n}>({\n onKeyboardRemove: () => null,\n onKeyboardNavigation: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillT.GroupProps> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSPillT.InternalGroupProps>(props, DSPillGroupDefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes, DSPillGroupName);\n\n const globalAttrs = useGetGlobalAttributes<DSPillT.InternalGroupProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefaults,\n );\n const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);\n const { children, width, innerRef } = propsWithDefaults;\n const onKeyboardRemove = useCallback(\n (pillUid: string) => {\n const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n if (pillIndex > 0) {\n elems[pillIndex - 1].focus();\n } else if (pillIndex + 1 < elems.length) {\n elems[pillIndex + 1].focus();\n }\n },\n [pillGroupUid],\n );\n const onKeyboardNavigation = useCallback(\n (pillUid: string, step: number, e: React.KeyboardEvent) => {\n const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n if (pillIndex >= 0) {\n if (elems[pillIndex + step]) {\n e.stopPropagation();\n elems[pillIndex + step].focus();\n }\n }\n },\n [pillGroupUid],\n );\n\n return (\n <DSPillGroupV2Context.Provider value={{ onKeyboardRemove, onKeyboardNavigation }}>\n <StyledPillGroup\n {...globalAttrs}\n width={width}\n id={pillGroupUid}\n cols={React.Children.map(children, () => 'auto') as string[]}\n gutter=\"2px\"\n innerRef={innerRef}\n >\n {children}\n </StyledPillGroup>\n </DSPillGroupV2Context.Provider>\n );\n};\n\nDSPillGroupV2.displayName = DSPillGroupName;\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes as WeakValidationMap<unknown>;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DjB;AA9DN,mBAA2D;AAC3D,iBAAoB;AACpB,8BAKO;AACP,oBAAgC;AAChC,+BAAgC;AAChC,mCAA4E;AAGrE,MAAM,2BAAuB,4BAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAC9B,CAAC;AAED,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,wBAAoB,sDAAyD,OAAO,oDAAuB;AACjH,8DAA+B,mBAAmB,mDAAsB,wCAAe;AAEvF,QAAM,kBAAc;AAAA,IAClB;AAAA,EACF;AACA,QAAM,mBAAe,sBAAQ,MAAM,qBAAiB,gBAAI,CAAC,IAAI,CAAC,CAAC;AAC/D,QAAM,EAAE,UAAU,OAAO,SAAS,IAAI;AACtC,QAAM,uBAAmB;AAAA,IACvB,CAAC,YAAoB;AACnB,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,YAAY,uBAAuB,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,YAAY,GAAG;AACjB,cAAM,YAAY,CAAC,EAAE,MAAM;AAAA,MAC7B,WAAW,YAAY,IAAI,MAAM,QAAQ;AACvC,cAAM,YAAY,CAAC,EAAE,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AACA,QAAM,2BAAuB;AAAA,IAC3B,CAAC,SAAiB,MAAc,MAA2B;AACzD,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,YAAY,uBAAuB,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,aAAa,GAAG;AAClB,YAAI,MAAM,YAAY,IAAI,GAAG;AAC3B,YAAE,gBAAgB;AAClB,gBAAM,YAAY,IAAI,EAAE,MAAM;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,SACE,4CAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,kBAAkB,qBAAqB,GAC7E;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,IAAI;AAAA,MACJ,MAAM,aAAAA,QAAM,SAAS,IAAI,UAAU,MAAM,MAAM;AAAA,MAC/C,QAAO;AAAA,MACP;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -109,8 +109,7 @@ const StyledInputPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)
|
|
|
109
109
|
padding: 0;
|
|
110
110
|
|
|
111
111
|
${({ theme, hasError }) => {
|
|
112
|
-
if (hasError)
|
|
113
|
-
return borderOutside({ color: theme.colors.danger[900] });
|
|
112
|
+
if (hasError) return borderOutside({ color: theme.colors.danger[900] });
|
|
114
113
|
return borderOutside({ color: theme.colors.brand[500] });
|
|
115
114
|
}}
|
|
116
115
|
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\ninterface InputPillWrapperProps {\n value: string;\n inputWidth: number;\n inputHasFocus: boolean;\n hasError: boolean;\n pillSize: 'm' | 's';\n disabled?: boolean;\n}\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = ({\n color,\n size = 1,\n zIndex = 0,\n borderRadius = '12px',\n}: {\n color: string;\n size?: number;\n zIndex?: number;\n borderRadius?: string;\n}) => css<{ disabled?: boolean }>`\n :after {\n content: ' ';\n position: absolute;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n border: ${size}px solid ${({ disabled, theme }) => (disabled ? theme.colors.neutral[400] : color)};\n border-top-left-radius: ${borderRadius};\n border-top-right-radius: ${borderRadius};\n border-bottom-left-radius: ${borderRadius};\n border-bottom-right-radius: ${borderRadius};\n pointer-events: none;\n z-index: ${zIndex ? zIndex : ''};\n }\n`;\n\nconst commonPillWrapperCss = css<{ pillSize: 'm' | 's'; disabled?: boolean }>`\n height: ${(props) => (props?.pillSize === 'm' ? '1.846rem' : '1.3846rem')};\n @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n height: ${(props) => (props?.pillSize === 'm' ? '1.5rem' : '1.125rem')};\n }\n position: relative;\n\n width: fit-content;\n\n background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['080'] : theme.colors.brand[200])};\n\n outline: none;\n\n white-space: nowrap;\n\n padding: 0px 12px 0 12px;\n border-radius: 12px;\n\n font-size: 1rem;\n line-height: 1;\n user-select: ${({ disabled }) => (disabled ? 'none' : 'auto')};\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'])};\n ${(props) => borderOutside({ color: props.theme.colors.brand[300] })};\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)<{ pillSize: 'm' | 's'; hasIcon: boolean }>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)<{ pillSize: 'm' | 's'; hasIcon: boolean }>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<InputPillWrapperProps>`\n ${commonPillWrapperCss}\n\n background: ${(props) => props.theme.colors.neutral['000']};\n padding: 0;\n\n ${({ theme, hasError }) => {\n if (hasError) return borderOutside({ color: theme.colors.danger[900] });\n return borderOutside({ color: theme.colors.brand[500] });\n }}\n\n :focus-within {\n ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[700], size: 2 }) : '')}\n }\n\n :active {\n ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : '')}\n }\n\n & .em-ds-input {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n border-radius: 0 !important;\n height: 100%;\n background: transparent;\n width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n padding: 0;\n margin: 0 0 0 8px;\n }\n\n & .em-ds-input__tooltip-ref {\n height: 100%;\n }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)<{ pillSize: 'm' | 's' }>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n padding: 0 0 0 12px;\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<{\n pillSize: 'm' | 's';\n hasIconRight: boolean;\n hasIconLeft: boolean;\n disabled?: boolean;\n}>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)<{ pillSize: 'm' | 's' }>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding: 0 0 0 12px;\n line-height: 1.2307rem;\n @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n line-height: 1rem;\n }\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n width: ${({ width }) => width};\n\n // Pill edges\n & .ds-pill-wrapper {\n &:not(:first-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n &:not(:last-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n\n // Pill paddings to the left / right\n & .ds-pill-wrapper-label,\n & .ds-pill-wrapper-value,\n & .ds-pill-wrapper-readonly {\n &:not(:first-of-type) {\n padding-left: 8px;\n }\n &:not(:last-of-type) {\n padding-right: 8px;\n }\n }\n\n & .ds-pill-wrapper-removable:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper {\n :not(:first-of-type) {\n .ds-pill-button-left {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n :not(:last-of-type) {\n .ds-pill-button-right {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n outline: none;\n :focus {\n ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}\n }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string | number; height: string | number }>`\n display: grid;\n place-items: center;\n\n position: relative;\n\n padding: 0;\n ${({ width, height, theme }) => {\n if (String(width).includes('px') && String(height).includes('px'))\n return `\n width: ${parseInt(width as string, 10) / 13}rem;\n height: ${parseInt(height as string, 10) / 13}rem;\n\n @media (max-width: ${theme.breakpoints?.small}) {\n width: ${parseInt(width as string, 10) / 16}rem;\n height: ${parseInt(height as string, 10) / 16}rem;\n }`;\n\n return `\n width: ${width};\n height: ${height};\n `;\n }}\n\n border-radius: 12px;\n\n :focus {\n ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n }\n\n cursor: pointer;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA4B;AAC5B,qBAAqB;AACrB,0BAA2B;AAe3B,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB,MAKM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQQ,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -73,10 +73,8 @@ const DropdownPill = import_react.default.memo(
|
|
|
73
73
|
],
|
|
74
74
|
...dropdownProps,
|
|
75
75
|
onClickOutside: (e) => {
|
|
76
|
-
if ("code" in e && e.code === "Escape")
|
|
77
|
-
|
|
78
|
-
if (dropdownProps.onClickOutside)
|
|
79
|
-
dropdownProps.onClickOutside(e);
|
|
76
|
+
if ("code" in e && e.code === "Escape") chevronRef.current?.focus();
|
|
77
|
+
if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);
|
|
80
78
|
},
|
|
81
79
|
wrapperStyles: { w: "100%", h: "100%" },
|
|
82
80
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/DropdownPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled.js';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const DropdownPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n const chevronRef = useRef<HTMLButtonElement | null>(null);\n\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }: { children: string }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n return (\n <StyledDropdownPillWrapper\n pillSize={size}\n id={pillUid}\n className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n data-testid=\"ds-pill-wrapper\"\n cols={['auto', 'minmax(24px, auto)']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n >\n <TextComponent>{label}</TextComponent>\n <DSDropdownMenuV2\n placementOrderPreference={[\n 'bottom-start',\n 'bottom',\n 'bottom-end',\n 'right-end',\n 'top-start',\n 'top',\n 'top-end',\n ]}\n {...dropdownProps}\n onClickOutside={(e) => {\n if ('code' in e && e.code === 'Escape') chevronRef.current?.focus();\n if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n }}\n wrapperStyles={{ w: '100%', h: '100%' }}\n >\n <DSPillButton\n className=\"ds-pill-focus-point\"\n data-testid=\"ds-pill-dropdown-chevron\"\n innerRef={mergeRefs(chevronRef, innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>)}\n aria-label={ariaLabel || label}\n type=\"right\"\n onClick={onDropdownClick}\n >\n <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n </DSPillButton>\n </DSDropdownMenuV2>\n </StyledDropdownPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmByB;AAlBhD,mBAAuC;AAEvC,gCAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAC1C,0BAA0B;AAC1B,wBAA6B;AAGtB,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,iBAAa,qBAAiC,IAAI;AAExD,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmByB;AAlBhD,mBAAuC;AAEvC,gCAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAC1C,0BAA0B;AAC1B,wBAA6B;AAGtB,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,iBAAa,qBAAiC,IAAI;AAExD,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAA4B,4CAAC,+DAA2B,OAAO,UAAU,IACrF,aAAAA,QAAM;AAEV,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM,CAAC,QAAQ,oBAAoB;AAAA,QACnC,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,sDAAC,iBAAe,iBAAM;AAAA,UACtB;AAAA,YAAC;AAAA;AAAA,cACC,0BAA0B;AAAA,gBACxB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACC,GAAG;AAAA,cACJ,gBAAgB,CAAC,MAAM;AACrB,oBAAI,UAAU,KAAK,EAAE,SAAS,SAAU,YAAW,SAAS,MAAM;AAClE,oBAAI,cAAc,eAAgB,eAAc,eAAe,CAAC;AAAA,cAClE;AAAA,cACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,cAEtC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA,kBACZ,cAAU,+BAAU,YAAY,QAAwD;AAAA,kBACxF,cAAY,aAAa;AAAA,kBACzB,MAAK;AAAA,kBACL,SAAS;AAAA,kBAET,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,cAC5E;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/InputPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const InputPill = React.memo<DSPillT.InternalProps>(\n ({\n label,\n size,\n inputPlaceholder,\n inputWidth,\n inputRender,\n onInputChange,\n onInputClear,\n innerRef,\n hasError,\n inputId,\n }) => {\n const ref = useRef<HTMLInputElement | null>(null);\n\n const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);\n\n const onCloseIconClick = useCallback(\n (e: React.KeyboardEvent | React.MouseEvent) => {\n if (('code' in e && ['Enter', 'Space'].includes(e.code)) || !('code' in e)) {\n e.preventDefault();\n onInputClear?.(e);\n ref.current?.focus();\n }\n },\n [onInputClear],\n );\n\n const [inputHasFocus, setInputHasFocus] = useState(false);\n\n return (\n <StyledInputPillWrapper\n pillSize={size}\n className=\"ds-pill-wrapper\"\n data-testid=\"ds-pill-wrapper\"\n cols={label === '' ? ['auto'] : ['auto', '24px']}\n inputWidth={inputWidth}\n value={label}\n inputHasFocus={inputHasFocus}\n hasError={hasError}\n >\n <InputComponent\n id={pillUid}\n className=\"ds-pill-focus-point\"\n data-testid=\"ds-pill-input\"\n innerRef={(_ref: HTMLInputElement | null) => {\n ref.current = _ref;\n }}\n value={label}\n onChange={onInputChange}\n placeholder={inputPlaceholder}\n onFocus={() => setInputHasFocus(true)}\n onBlur={() => setInputHasFocus(false)}\n disableTooltip={false}\n />\n {label !== '' && (\n <DSPillButton\n id={pillUid}\n data-testid=\"ds-pill-clear-icon\"\n innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n onClick={onCloseIconClick}\n // onKeyDown={onCloseIconClick} // button v2 now triggers click on key down already\n aria-label=\"Clear input\"\n type=\"right\"\n >\n <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n </DSPillButton>\n )}\n </StyledInputPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CjB;AAzCN,mBAA8D;AAE9D,iBAAoB;AACpB,sBAA4B;AAC5B,oBAAuC;AACvC,wBAA6B;AAGtB,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,UAAM,qBAAgC,IAAI;AAEhD,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CjB;AAzCN,mBAA8D;AAE9D,iBAAoB;AACpB,sBAA4B;AAC5B,oBAAuC;AACvC,wBAA6B;AAGtB,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,UAAM,qBAAgC,IAAI;AAEhD,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAEtE,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA8C;AAC7C,YAAK,UAAU,KAAK,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAM,EAAE,UAAU,IAAI;AAC1E,YAAE,eAAe;AACjB,yBAAe,CAAC;AAChB,cAAI,SAAS,MAAM;AAAA,QACrB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,QAC/C;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,UAAU,CAAC,SAAkC;AAC3C,oBAAI,UAAU;AAAA,cAChB;AAAA,cACA,OAAO;AAAA,cACP,UAAU;AAAA,cACV,aAAa;AAAA,cACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,cACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,cACpC,gBAAgB;AAAA;AAAA,UAClB;AAAA,UACC,UAAU,MACT;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAY;AAAA,cACZ;AAAA,cACA,SAAS;AAAA,cAET,cAAW;AAAA,cACX,MAAK;AAAA,cAEL,sDAAC,+BAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACzD;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -49,18 +49,15 @@ const RemovablePill = import_react.default.memo(
|
|
|
49
49
|
(e) => {
|
|
50
50
|
if (["Enter", "Space"].includes(e.code)) {
|
|
51
51
|
e.preventDefault();
|
|
52
|
-
if (onKeyboardRemove)
|
|
53
|
-
onKeyboardRemove(pillUid);
|
|
52
|
+
if (onKeyboardRemove) onKeyboardRemove(pillUid);
|
|
54
53
|
}
|
|
55
54
|
if (e.code === "ArrowLeft") {
|
|
56
55
|
e.preventDefault();
|
|
57
|
-
if (onKeyboardNavigation)
|
|
58
|
-
onKeyboardNavigation(pillUid, -1, e);
|
|
56
|
+
if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);
|
|
59
57
|
}
|
|
60
58
|
if (e.code === "ArrowRight") {
|
|
61
59
|
e.preventDefault();
|
|
62
|
-
if (onKeyboardNavigation)
|
|
63
|
-
onKeyboardNavigation(pillUid, 1, e);
|
|
60
|
+
if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);
|
|
64
61
|
}
|
|
65
62
|
},
|
|
66
63
|
[onKeyboardRemove, onKeyboardNavigation, pillUid]
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/RemovablePill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useCallback, useContext, useMemo } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledRemovablePillWrapper } from '../styled.js';\nimport { DSPillGroupV2Context } from '../PillGroup.js';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const RemovablePill = React.memo<DSPillT.InternalProps>(\n ({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {\n const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }: { children: string }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n const onKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n if (onKeyboardRemove) onKeyboardRemove(pillUid);\n }\n if (e.code === 'ArrowLeft') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);\n }\n if (e.code === 'ArrowRight') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);\n }\n },\n [onKeyboardRemove, onKeyboardNavigation, pillUid],\n );\n\n return (\n <StyledRemovablePillWrapper\n pillSize={size}\n cols={['auto', 'minmax(24px, auto)']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n data-testid=\"ds-pill-wrapper\"\n data-label={ariaLabel || label}\n >\n <TextComponent>{label}</TextComponent>\n <>\n {!disabled ? (\n <DSPillButton\n className=\"ds-pill-focus-point\"\n id={pillUid}\n data-testid=\"ds-pill-close-icon\"\n innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n onClick={onRemove}\n onKeyDown={onKeyDown}\n aria-label={`Remove ${label}`}\n type=\"right\"\n tabIndex={tabIndex}\n >\n <CloseXsmall\n width={size === 's' ? 18 : 22.65}\n height={size === 's' ? 18 : 22.65}\n color={['brand-primary', '700']}\n />\n </DSPillButton>\n ) : null}\n </>\n </StyledRemovablePillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgByB;AAhBhD,mBAAwD;AAExD,iBAAoB;AACpB,sBAA4B;AAC5B,uCAA2C;AAC3C,oBAA2C;AAC3C,uBAAqC;AACrC,wBAA6B;AAGtB,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,SAAS,MAAM;AACtF,UAAM,EAAE,kBAAkB,qBAAqB,QAAI,yBAAW,qCAAoB;AAClF,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgByB;AAhBhD,mBAAwD;AAExD,iBAAoB;AACpB,sBAA4B;AAC5B,uCAA2C;AAC3C,oBAA2C;AAC3C,uBAAqC;AACrC,wBAA6B;AAGtB,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,SAAS,MAAM;AACtF,UAAM,EAAE,kBAAkB,qBAAqB,QAAI,yBAAW,qCAAoB;AAClF,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAA4B,4CAAC,+DAA2B,OAAO,UAAU,IACrF,aAAAA,QAAM;AAEV,UAAM,gBAAY;AAAA,MAChB,CAAC,MAA2B;AAC1B,YAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,YAAE,eAAe;AACjB,cAAI,iBAAkB,kBAAiB,OAAO;AAAA,QAChD;AACA,YAAI,EAAE,SAAS,aAAa;AAC1B,YAAE,eAAe;AACjB,cAAI,qBAAsB,sBAAqB,SAAS,IAAI,CAAC;AAAA,QAC/D;AACA,YAAI,EAAE,SAAS,cAAc;AAC3B,YAAE,eAAe;AACjB,cAAI,qBAAsB,sBAAqB,SAAS,GAAG,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,MACA,CAAC,kBAAkB,sBAAsB,OAAO;AAAA,IAClD;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,MAAM,CAAC,QAAQ,oBAAoB;AAAA,QACnC,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QACb,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,cAAY,aAAa;AAAA,QAEzB;AAAA,sDAAC,iBAAe,iBAAM;AAAA,UACtB,2EACG,WAAC,WACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,IAAI;AAAA,cACJ,eAAY;AAAA,cACZ;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA,cAAY,UAAU,KAAK;AAAA,cAC3B,MAAK;AAAA,cACL;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO,SAAS,MAAM,KAAK;AAAA,kBAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,kBAC5B,OAAO,CAAC,iBAAiB,KAAK;AAAA;AAAA,cAChC;AAAA;AAAA,UACF,IACE,MACN;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/PillButton.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { StyledPillButton } from './styled.js';\nimport { DSPillButtonName } from '../DSPillDefinitions.js';\nimport { type DSPillT, DSPillButtonDefaultProps, DSPillButtonPropTypesSchema } from '../react-desc-prop-types.js';\n\nconst typeToClassName = {\n only: 'ds-pill-button-only',\n left: 'ds-pill-button-left',\n right: 'ds-pill-button-right',\n};\n\nconst DSPillButton: React.ComponentType<DSPillT.ButtonProps> = (props) => {\n const { children, ...restProps } = props;\n const propsWithDefaults = useMemoMergePropsWithDefault<DSPillT.InternalButtonProps>(\n restProps,\n DSPillButtonDefaultProps,\n );\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypesSchema, DSPillButtonName);\n const { type, ...rest } = propsWithDefaults;\n\n return (\n <StyledPillButton\n {...rest}\n buttonType=\"raw\"\n className={`${typeToClassName[type]} ${rest.className ?? ''}`}\n type=\"button\"\n >\n {children}\n </StyledPillButton>\n );\n};\n\nDSPillButton.displayName = DSPillButtonName;\nconst DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypesSchema;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACuBnB;AArBJ,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAuB,0BAA0B,mCAAmC;AAEpF,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AACnC,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AACA,iCAA+B,mBAAmB,6BAA6B,gBAAgB;AAC/F,QAAM,EAAE,MAAM,GAAG,KAAK,IAAI;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,YAAW;AAAA,MACX,WAAW,GAAG,gBAAgB,IAAI,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACuBnB;AArBJ,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAuB,0BAA0B,mCAAmC;AAEpF,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AACnC,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AACA,iCAA+B,mBAAmB,6BAA6B,gBAAgB;AAC/F,QAAM,EAAE,MAAM,GAAG,KAAK,IAAI;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,YAAW;AAAA,MACX,WAAW,GAAG,gBAAgB,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;AAAA,MAC3D,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY,EAAE,YAAY,aAAa;AAC/E,uBAAuB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -61,7 +61,6 @@ const DSPillGroupV2 = (props) => {
|
|
|
61
61
|
}
|
|
62
62
|
) });
|
|
63
63
|
};
|
|
64
|
-
DSPillGroupV2.propTypes = DSPillGroupPropTypes;
|
|
65
64
|
DSPillGroupV2.displayName = DSPillGroupName;
|
|
66
65
|
const DSPillGroupV2WithSchema = describe(DSPillGroupV2);
|
|
67
66
|
DSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/PillGroup.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport { StyledPillGroup } from './styled.js';\nimport { DSPillGroupName } from '../DSPillDefinitions.js';\nimport { DSPillGroupDefaultProps, type DSPillT, DSPillGroupPropTypes } from '../react-desc-prop-types.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nexport const DSPillGroupV2Context = createContext<{\n onKeyboardRemove: (pillUid: string) => void;\n onKeyboardNavigation: (pillUid: string, step: number, e: React.KeyboardEvent) => void;\n}>({\n onKeyboardRemove: () => null,\n onKeyboardNavigation: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillT.GroupProps> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSPillT.InternalGroupProps>(props, DSPillGroupDefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes, DSPillGroupName);\n\n const globalAttrs = useGetGlobalAttributes<DSPillT.InternalGroupProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefaults,\n );\n const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);\n const { children, width, innerRef } = propsWithDefaults;\n const onKeyboardRemove = useCallback(\n (pillUid: string) => {\n const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n if (pillIndex > 0) {\n elems[pillIndex - 1].focus();\n } else if (pillIndex + 1 < elems.length) {\n elems[pillIndex + 1].focus();\n }\n },\n [pillGroupUid],\n );\n const onKeyboardNavigation = useCallback(\n (pillUid: string, step: number, e: React.KeyboardEvent) => {\n const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n if (pillIndex >= 0) {\n if (elems[pillIndex + step]) {\n e.stopPropagation();\n elems[pillIndex + step].focus();\n }\n }\n },\n [pillGroupUid],\n );\n\n return (\n <DSPillGroupV2Context.Provider value={{ onKeyboardRemove, onKeyboardNavigation }}>\n <StyledPillGroup\n {...globalAttrs}\n width={width}\n id={pillGroupUid}\n cols={React.Children.map(children, () => 'auto') as string[]}\n gutter=\"2px\"\n innerRef={innerRef}\n >\n {children}\n </StyledPillGroup>\n </DSPillGroupV2Context.Provider>\n );\n};\n\nDSPillGroupV2.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC+DjB;AA9DN,OAAOA,UAAS,eAAe,aAAa,eAAe;AAC3D,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,yBAAuC,4BAA4B;AAGrE,MAAM,uBAAuB,cAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAC9B,CAAC;AAED,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,oBAAoB,6BAAyD,OAAO,uBAAuB;AACjH,iCAA+B,mBAAmB,sBAAsB,eAAe;AAEvF,QAAM,cAAc;AAAA,IAClB;AAAA,EACF;AACA,QAAM,eAAe,QAAQ,MAAM,iBAAiB,IAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport { StyledPillGroup } from './styled.js';\nimport { DSPillGroupName } from '../DSPillDefinitions.js';\nimport { DSPillGroupDefaultProps, type DSPillT, DSPillGroupPropTypes } from '../react-desc-prop-types.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nexport const DSPillGroupV2Context = createContext<{\n onKeyboardRemove: (pillUid: string) => void;\n onKeyboardNavigation: (pillUid: string, step: number, e: React.KeyboardEvent) => void;\n}>({\n onKeyboardRemove: () => null,\n onKeyboardNavigation: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillT.GroupProps> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSPillT.InternalGroupProps>(props, DSPillGroupDefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes, DSPillGroupName);\n\n const globalAttrs = useGetGlobalAttributes<DSPillT.InternalGroupProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefaults,\n );\n const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);\n const { children, width, innerRef } = propsWithDefaults;\n const onKeyboardRemove = useCallback(\n (pillUid: string) => {\n const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n if (pillIndex > 0) {\n elems[pillIndex - 1].focus();\n } else if (pillIndex + 1 < elems.length) {\n elems[pillIndex + 1].focus();\n }\n },\n [pillGroupUid],\n );\n const onKeyboardNavigation = useCallback(\n (pillUid: string, step: number, e: React.KeyboardEvent) => {\n const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n if (pillIndex >= 0) {\n if (elems[pillIndex + step]) {\n e.stopPropagation();\n elems[pillIndex + step].focus();\n }\n }\n },\n [pillGroupUid],\n );\n\n return (\n <DSPillGroupV2Context.Provider value={{ onKeyboardRemove, onKeyboardNavigation }}>\n <StyledPillGroup\n {...globalAttrs}\n width={width}\n id={pillGroupUid}\n cols={React.Children.map(children, () => 'auto') as string[]}\n gutter=\"2px\"\n innerRef={innerRef}\n >\n {children}\n </StyledPillGroup>\n </DSPillGroupV2Context.Provider>\n );\n};\n\nDSPillGroupV2.displayName = DSPillGroupName;\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes as WeakValidationMap<unknown>;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+DjB;AA9DN,OAAOA,UAAS,eAAe,aAAa,eAAe;AAC3D,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,yBAAuC,4BAA4B;AAGrE,MAAM,uBAAuB,cAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAC9B,CAAC;AAED,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,oBAAoB,6BAAyD,OAAO,uBAAuB;AACjH,iCAA+B,mBAAmB,sBAAsB,eAAe;AAEvF,QAAM,cAAc;AAAA,IAClB;AAAA,EACF;AACA,QAAM,eAAe,QAAQ,MAAM,iBAAiB,IAAI,CAAC,IAAI,CAAC,CAAC;AAC/D,QAAM,EAAE,UAAU,OAAO,SAAS,IAAI;AACtC,QAAM,mBAAmB;AAAA,IACvB,CAAC,YAAoB;AACnB,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,YAAY,uBAAuB,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,YAAY,GAAG;AACjB,cAAM,YAAY,CAAC,EAAE,MAAM;AAAA,MAC7B,WAAW,YAAY,IAAI,MAAM,QAAQ;AACvC,cAAM,YAAY,CAAC,EAAE,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AACA,QAAM,uBAAuB;AAAA,IAC3B,CAAC,SAAiB,MAAc,MAA2B;AACzD,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,YAAY,uBAAuB,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,aAAa,GAAG;AAClB,YAAI,MAAM,YAAY,IAAI,GAAG;AAC3B,YAAE,gBAAgB;AAClB,gBAAM,YAAY,IAAI,EAAE,MAAM;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,kBAAkB,qBAAqB,GAC7E;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,IAAI;AAAA,MACJ,MAAMA,OAAM,SAAS,IAAI,UAAU,MAAM,MAAM;AAAA,MAC/C,QAAO;AAAA,MACP;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -68,8 +68,7 @@ const StyledInputPillWrapper = styled(Grid)`
|
|
|
68
68
|
padding: 0;
|
|
69
69
|
|
|
70
70
|
${({ theme, hasError }) => {
|
|
71
|
-
if (hasError)
|
|
72
|
-
return borderOutside({ color: theme.colors.danger[900] });
|
|
71
|
+
if (hasError) return borderOutside({ color: theme.colors.danger[900] });
|
|
73
72
|
return borderOutside({ color: theme.colors.brand[500] });
|
|
74
73
|
}}
|
|
75
74
|
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\ninterface InputPillWrapperProps {\n value: string;\n inputWidth: number;\n inputHasFocus: boolean;\n hasError: boolean;\n pillSize: 'm' | 's';\n disabled?: boolean;\n}\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = ({\n color,\n size = 1,\n zIndex = 0,\n borderRadius = '12px',\n}: {\n color: string;\n size?: number;\n zIndex?: number;\n borderRadius?: string;\n}) => css<{ disabled?: boolean }>`\n :after {\n content: ' ';\n position: absolute;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n border: ${size}px solid ${({ disabled, theme }) => (disabled ? theme.colors.neutral[400] : color)};\n border-top-left-radius: ${borderRadius};\n border-top-right-radius: ${borderRadius};\n border-bottom-left-radius: ${borderRadius};\n border-bottom-right-radius: ${borderRadius};\n pointer-events: none;\n z-index: ${zIndex ? zIndex : ''};\n }\n`;\n\nconst commonPillWrapperCss = css<{ pillSize: 'm' | 's'; disabled?: boolean }>`\n height: ${(props) => (props?.pillSize === 'm' ? '1.846rem' : '1.3846rem')};\n @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n height: ${(props) => (props?.pillSize === 'm' ? '1.5rem' : '1.125rem')};\n }\n position: relative;\n\n width: fit-content;\n\n background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['080'] : theme.colors.brand[200])};\n\n outline: none;\n\n white-space: nowrap;\n\n padding: 0px 12px 0 12px;\n border-radius: 12px;\n\n font-size: 1rem;\n line-height: 1;\n user-select: ${({ disabled }) => (disabled ? 'none' : 'auto')};\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'])};\n ${(props) => borderOutside({ color: props.theme.colors.brand[300] })};\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)<{ pillSize: 'm' | 's'; hasIcon: boolean }>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)<{ pillSize: 'm' | 's'; hasIcon: boolean }>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<InputPillWrapperProps>`\n ${commonPillWrapperCss}\n\n background: ${(props) => props.theme.colors.neutral['000']};\n padding: 0;\n\n ${({ theme, hasError }) => {\n if (hasError) return borderOutside({ color: theme.colors.danger[900] });\n return borderOutside({ color: theme.colors.brand[500] });\n }}\n\n :focus-within {\n ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[700], size: 2 }) : '')}\n }\n\n :active {\n ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : '')}\n }\n\n & .em-ds-input {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n border-radius: 0 !important;\n height: 100%;\n background: transparent;\n width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n padding: 0;\n margin: 0 0 0 8px;\n }\n\n & .em-ds-input__tooltip-ref {\n height: 100%;\n }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)<{ pillSize: 'm' | 's' }>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n padding: 0 0 0 12px;\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<{\n pillSize: 'm' | 's';\n hasIconRight: boolean;\n hasIconLeft: boolean;\n disabled?: boolean;\n}>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)<{ pillSize: 'm' | 's' }>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding: 0 0 0 12px;\n line-height: 1.2307rem;\n @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n line-height: 1rem;\n }\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n width: ${({ width }) => width};\n\n // Pill edges\n & .ds-pill-wrapper {\n &:not(:first-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n &:not(:last-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n\n // Pill paddings to the left / right\n & .ds-pill-wrapper-label,\n & .ds-pill-wrapper-value,\n & .ds-pill-wrapper-readonly {\n &:not(:first-of-type) {\n padding-left: 8px;\n }\n &:not(:last-of-type) {\n padding-right: 8px;\n }\n }\n\n & .ds-pill-wrapper-removable:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper {\n :not(:first-of-type) {\n .ds-pill-button-left {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n :not(:last-of-type) {\n .ds-pill-button-right {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n outline: none;\n :focus {\n ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}\n }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string | number; height: string | number }>`\n display: grid;\n place-items: center;\n\n position: relative;\n\n padding: 0;\n ${({ width, height, theme }) => {\n if (String(width).includes('px') && String(height).includes('px'))\n return `\n width: ${parseInt(width as string, 10) / 13}rem;\n height: ${parseInt(height as string, 10) / 13}rem;\n\n @media (max-width: ${theme.breakpoints?.small}) {\n width: ${parseInt(width as string, 10) / 16}rem;\n height: ${parseInt(height as string, 10) / 16}rem;\n }`;\n\n return `\n width: ${width};\n height: ${height};\n `;\n }}\n\n border-radius: 12px;\n\n :focus {\n ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n }\n\n cursor: pointer;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,KAAK,cAAc;AAC5B,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAe3B,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB,MAKM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQQ,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -40,10 +40,8 @@ const DropdownPill = React2.memo(
|
|
|
40
40
|
],
|
|
41
41
|
...dropdownProps,
|
|
42
42
|
onClickOutside: (e) => {
|
|
43
|
-
if ("code" in e && e.code === "Escape")
|
|
44
|
-
|
|
45
|
-
if (dropdownProps.onClickOutside)
|
|
46
|
-
dropdownProps.onClickOutside(e);
|
|
43
|
+
if ("code" in e && e.code === "Escape") chevronRef.current?.focus();
|
|
44
|
+
if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);
|
|
47
45
|
},
|
|
48
46
|
wrapperStyles: { w: "100%", h: "100%" },
|
|
49
47
|
children: /* @__PURE__ */ jsx(
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/DropdownPill.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled.js';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const DropdownPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n const chevronRef = useRef<HTMLButtonElement | null>(null);\n\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }: { children: string }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n return (\n <StyledDropdownPillWrapper\n pillSize={size}\n id={pillUid}\n className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n data-testid=\"ds-pill-wrapper\"\n cols={['auto', 'minmax(24px, auto)']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n >\n <TextComponent>{label}</TextComponent>\n <DSDropdownMenuV2\n placementOrderPreference={[\n 'bottom-start',\n 'bottom',\n 'bottom-end',\n 'right-end',\n 'top-start',\n 'top',\n 'top-end',\n ]}\n {...dropdownProps}\n onClickOutside={(e) => {\n if ('code' in e && e.code === 'Escape') chevronRef.current?.focus();\n if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n }}\n wrapperStyles={{ w: '100%', h: '100%' }}\n >\n <DSPillButton\n className=\"ds-pill-focus-point\"\n data-testid=\"ds-pill-dropdown-chevron\"\n innerRef={mergeRefs(chevronRef, innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>)}\n aria-label={ariaLabel || label}\n type=\"right\"\n onClick={onDropdownClick}\n >\n <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n </DSPillButton>\n </DSDropdownMenuV2>\n </StyledDropdownPillWrapper>\n );\n },\n);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACmByB,cAI1C,YAJ0C;AAlBhD,OAAOA,UAAS,SAAS,cAAc;AAEvC,SAAS,wBAAwB;AACjC,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,kCAAkC;AAC3C,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAGtB,MAAM,eAAeA,OAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,aAAa,OAAiC,IAAI;AAExD,UAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmByB,cAI1C,YAJ0C;AAlBhD,OAAOA,UAAS,SAAS,cAAc;AAEvC,SAAS,wBAAwB;AACjC,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,kCAAkC;AAC3C,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAGtB,MAAM,eAAeA,OAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,aAAa,OAAiC,IAAI;AAExD,UAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,CAAC,IAAI,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAA4B,oBAAC,8BAA2B,OAAO,UAAU,IACrFA,OAAM;AAEV,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM,CAAC,QAAQ,oBAAoB;AAAA,QACnC,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,8BAAC,iBAAe,iBAAM;AAAA,UACtB;AAAA,YAAC;AAAA;AAAA,cACC,0BAA0B;AAAA,gBACxB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACC,GAAG;AAAA,cACJ,gBAAgB,CAAC,MAAM;AACrB,oBAAI,UAAU,KAAK,EAAE,SAAS,SAAU,YAAW,SAAS,MAAM;AAClE,oBAAI,cAAc,eAAgB,eAAc,eAAe,CAAC;AAAA,cAClE;AAAA,cACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,cAEtC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA,kBACZ,UAAU,UAAU,YAAY,QAAwD;AAAA,kBACxF,cAAY,aAAa;AAAA,kBACzB,MAAK;AAAA,kBACL,SAAS;AAAA,kBAET,8BAAC,oBAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,cAC5E;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/InputPill.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const InputPill = React.memo<DSPillT.InternalProps>(\n ({\n label,\n size,\n inputPlaceholder,\n inputWidth,\n inputRender,\n onInputChange,\n onInputClear,\n innerRef,\n hasError,\n inputId,\n }) => {\n const ref = useRef<HTMLInputElement | null>(null);\n\n const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);\n\n const onCloseIconClick = useCallback(\n (e: React.KeyboardEvent | React.MouseEvent) => {\n if (('code' in e && ['Enter', 'Space'].includes(e.code)) || !('code' in e)) {\n e.preventDefault();\n onInputClear?.(e);\n ref.current?.focus();\n }\n },\n [onInputClear],\n );\n\n const [inputHasFocus, setInputHasFocus] = useState(false);\n\n return (\n <StyledInputPillWrapper\n pillSize={size}\n className=\"ds-pill-wrapper\"\n data-testid=\"ds-pill-wrapper\"\n cols={label === '' ? ['auto'] : ['auto', '24px']}\n inputWidth={inputWidth}\n value={label}\n inputHasFocus={inputHasFocus}\n hasError={hasError}\n >\n <InputComponent\n id={pillUid}\n className=\"ds-pill-focus-point\"\n data-testid=\"ds-pill-input\"\n innerRef={(_ref: HTMLInputElement | null) => {\n ref.current = _ref;\n }}\n value={label}\n onChange={onInputChange}\n placeholder={inputPlaceholder}\n onFocus={() => setInputHasFocus(true)}\n onBlur={() => setInputHasFocus(false)}\n disableTooltip={false}\n />\n {label !== '' && (\n <DSPillButton\n id={pillUid}\n data-testid=\"ds-pill-clear-icon\"\n innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n onClick={onCloseIconClick}\n // onKeyDown={onCloseIconClick} // button v2 now triggers click on key down already\n aria-label=\"Clear input\"\n type=\"right\"\n >\n <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n </DSPillButton>\n )}\n </StyledInputPillWrapper>\n );\n },\n);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC0CjB,SAUE,KAVF;AAzCN,OAAOA,UAAS,aAAa,SAAS,QAAQ,gBAAgB;AAE9D,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAGtB,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,MAAM,OAAgC,IAAI;AAEhD,UAAM,iBAAiB,QAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,UAAU,QAAQ,MAAM,WAAW,WAAW,IAAI,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC0CjB,SAUE,KAVF;AAzCN,OAAOA,UAAS,aAAa,SAAS,QAAQ,gBAAgB;AAE9D,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAGtB,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,MAAM,OAAgC,IAAI;AAEhD,UAAM,iBAAiB,QAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,UAAU,QAAQ,MAAM,WAAW,WAAW,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAEtE,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA8C;AAC7C,YAAK,UAAU,KAAK,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAM,EAAE,UAAU,IAAI;AAC1E,YAAE,eAAe;AACjB,yBAAe,CAAC;AAChB,cAAI,SAAS,MAAM;AAAA,QACrB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,QAC/C;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,UAAU,CAAC,SAAkC;AAC3C,oBAAI,UAAU;AAAA,cAChB;AAAA,cACA,OAAO;AAAA,cACP,UAAU;AAAA,cACV,aAAa;AAAA,cACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,cACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,cACpC,gBAAgB;AAAA;AAAA,UAClB;AAAA,UACC,UAAU,MACT;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAY;AAAA,cACZ;AAAA,cACA,SAAS;AAAA,cAET,cAAW;AAAA,cACX,MAAK;AAAA,cAEL,8BAAC,eAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACzD;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -16,18 +16,15 @@ const RemovablePill = React2.memo(
|
|
|
16
16
|
(e) => {
|
|
17
17
|
if (["Enter", "Space"].includes(e.code)) {
|
|
18
18
|
e.preventDefault();
|
|
19
|
-
if (onKeyboardRemove)
|
|
20
|
-
onKeyboardRemove(pillUid);
|
|
19
|
+
if (onKeyboardRemove) onKeyboardRemove(pillUid);
|
|
21
20
|
}
|
|
22
21
|
if (e.code === "ArrowLeft") {
|
|
23
22
|
e.preventDefault();
|
|
24
|
-
if (onKeyboardNavigation)
|
|
25
|
-
onKeyboardNavigation(pillUid, -1, e);
|
|
23
|
+
if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);
|
|
26
24
|
}
|
|
27
25
|
if (e.code === "ArrowRight") {
|
|
28
26
|
e.preventDefault();
|
|
29
|
-
if (onKeyboardNavigation)
|
|
30
|
-
onKeyboardNavigation(pillUid, 1, e);
|
|
27
|
+
if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);
|
|
31
28
|
}
|
|
32
29
|
},
|
|
33
30
|
[onKeyboardRemove, onKeyboardNavigation, pillUid]
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/RemovablePill.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useMemo } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledRemovablePillWrapper } from '../styled.js';\nimport { DSPillGroupV2Context } from '../PillGroup.js';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const RemovablePill = React.memo<DSPillT.InternalProps>(\n ({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {\n const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }: { children: string }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n const onKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n if (onKeyboardRemove) onKeyboardRemove(pillUid);\n }\n if (e.code === 'ArrowLeft') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);\n }\n if (e.code === 'ArrowRight') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);\n }\n },\n [onKeyboardRemove, onKeyboardNavigation, pillUid],\n );\n\n return (\n <StyledRemovablePillWrapper\n pillSize={size}\n cols={['auto', 'minmax(24px, auto)']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n data-testid=\"ds-pill-wrapper\"\n data-label={ariaLabel || label}\n >\n <TextComponent>{label}</TextComponent>\n <>\n {!disabled ? (\n <DSPillButton\n className=\"ds-pill-focus-point\"\n id={pillUid}\n data-testid=\"ds-pill-close-icon\"\n innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n onClick={onRemove}\n onKeyDown={onKeyDown}\n aria-label={`Remove ${label}`}\n type=\"right\"\n tabIndex={tabIndex}\n >\n <CloseXsmall\n width={size === 's' ? 18 : 22.65}\n height={size === 's' ? 18 : 22.65}\n color={['brand-primary', '700']}\n />\n </DSPillButton>\n ) : null}\n </>\n </StyledRemovablePillWrapper>\n );\n },\n);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACgByB,SAiCxC,UAjCwC,KAsB1C,YAtB0C;AAhBhD,OAAOA,UAAS,aAAa,YAAY,eAAe;AAExD,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAC5B,SAAS,kCAAkC;AAC3C,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAGtB,MAAM,gBAAgBA,OAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,SAAS,MAAM;AACtF,UAAM,EAAE,kBAAkB,qBAAqB,IAAI,WAAW,oBAAoB;AAClF,UAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgByB,SAiCxC,UAjCwC,KAsB1C,YAtB0C;AAhBhD,OAAOA,UAAS,aAAa,YAAY,eAAe;AAExD,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAC5B,SAAS,kCAAkC;AAC3C,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAGtB,MAAM,gBAAgBA,OAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,SAAS,MAAM;AACtF,UAAM,EAAE,kBAAkB,qBAAqB,IAAI,WAAW,oBAAoB;AAClF,UAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,CAAC,IAAI,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAA4B,oBAAC,8BAA2B,OAAO,UAAU,IACrFA,OAAM;AAEV,UAAM,YAAY;AAAA,MAChB,CAAC,MAA2B;AAC1B,YAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,YAAE,eAAe;AACjB,cAAI,iBAAkB,kBAAiB,OAAO;AAAA,QAChD;AACA,YAAI,EAAE,SAAS,aAAa;AAC1B,YAAE,eAAe;AACjB,cAAI,qBAAsB,sBAAqB,SAAS,IAAI,CAAC;AAAA,QAC/D;AACA,YAAI,EAAE,SAAS,cAAc;AAC3B,YAAE,eAAe;AACjB,cAAI,qBAAsB,sBAAqB,SAAS,GAAG,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,MACA,CAAC,kBAAkB,sBAAsB,OAAO;AAAA,IAClD;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,MAAM,CAAC,QAAQ,oBAAoB;AAAA,QACnC,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QACb,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,cAAY,aAAa;AAAA,QAEzB;AAAA,8BAAC,iBAAe,iBAAM;AAAA,UACtB,gCACG,WAAC,WACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,IAAI;AAAA,cACJ,eAAY;AAAA,cACZ;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA,cAAY,UAAU,KAAK;AAAA,cAC3B,MAAK;AAAA,cACL;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO,SAAS,MAAM,KAAK;AAAA,kBAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,kBAC5B,OAAO,CAAC,iBAAiB,KAAK;AAAA;AAAA,cAChC;AAAA;AAAA,UACF,IACE,MACN;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-pills-v2",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.36.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Pills V2",
|
|
6
6
|
"files": [
|
|
@@ -89,22 +89,22 @@
|
|
|
89
89
|
},
|
|
90
90
|
"dependencies": {
|
|
91
91
|
"uid": "~2.0.1",
|
|
92
|
-
"@elliemae/ds-button-v2": "3.
|
|
93
|
-
"@elliemae/ds-
|
|
94
|
-
"@elliemae/ds-
|
|
95
|
-
"@elliemae/ds-grid": "3.
|
|
96
|
-
"@elliemae/ds-props-helpers": "3.
|
|
97
|
-
"@elliemae/ds-
|
|
98
|
-
"@elliemae/ds-
|
|
99
|
-
"@elliemae/ds-truncated-tooltip-text": "3.
|
|
100
|
-
"@elliemae/ds-
|
|
101
|
-
"@elliemae/ds-
|
|
102
|
-
"@elliemae/ds-utilities": "3.
|
|
92
|
+
"@elliemae/ds-button-v2": "3.36.0-next.1",
|
|
93
|
+
"@elliemae/ds-dropdownmenu-v2": "3.36.0-next.1",
|
|
94
|
+
"@elliemae/ds-form": "3.36.0-next.1",
|
|
95
|
+
"@elliemae/ds-grid": "3.36.0-next.1",
|
|
96
|
+
"@elliemae/ds-props-helpers": "3.36.0-next.1",
|
|
97
|
+
"@elliemae/ds-system": "3.36.0-next.1",
|
|
98
|
+
"@elliemae/ds-icons": "3.36.0-next.1",
|
|
99
|
+
"@elliemae/ds-truncated-tooltip-text": "3.36.0-next.1",
|
|
100
|
+
"@elliemae/ds-tooltip": "3.36.0-next.1",
|
|
101
|
+
"@elliemae/ds-typescript-helpers": "3.36.0-next.1",
|
|
102
|
+
"@elliemae/ds-utilities": "3.36.0-next.1"
|
|
103
103
|
},
|
|
104
104
|
"devDependencies": {
|
|
105
105
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
106
106
|
"styled-components": "~5.3.9",
|
|
107
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
107
|
+
"@elliemae/ds-monorepo-devops": "3.36.0-next.1"
|
|
108
108
|
},
|
|
109
109
|
"peerDependencies": {
|
|
110
110
|
"lodash": "^4.17.21",
|