@elliemae/ds-menu-items 3.12.0-next.1 → 3.12.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.
- package/dist/cjs/components/MultiMenuItem/index.js.map +2 -2
- package/dist/cjs/components/styled.js +5 -10
- package/dist/cjs/components/styled.js.map +2 -2
- package/dist/esm/components/MultiMenuItem/index.js.map +2 -2
- package/dist/esm/components/styled.js +6 -11
- package/dist/esm/components/styled.js.map +2 -2
- package/package.json +7 -7
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/MultiMenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSMenuItemT } from '../../react-desc-prop-types';\nimport { defaultMultiProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledGlobalMenuItemWrapper, StyledItemContent } from '../styled';\n\nconst noop = () => null;\n\nconst MultiMenuItem: React.ComponentType<DSMenuItemT.MultiProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultMultiProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n\n const {\n dsId,\n label,\n disabled,\n isSelected,\n isActive,\n onClick,\n dataTestid,\n innerRef,\n onMouseEnter,\n onMouseLeave,\n onMouseDown,\n wrapperStyles,\n tabIndex,\n render: Render,\n } = propsWithDefault;\n\n return (\n <StyledGlobalMenuItemWrapper\n id={dsId}\n disabled={disabled}\n isActive={isActive}\n isSelected={isSelected}\n ref={innerRef}\n onMouseDown={onMouseDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n role=\"option\"\n className={isActive ? 'ds-list-item-active' : ''}\n aria-selected={isSelected}\n style={wrapperStyles}\n onClick={onClick}\n data-testid={dataTestid}\n data-type=\"multi\"\n >\n {Render !== undefined ? (\n <Render {...props} />\n ) : (\n <StyledItemContent>\n <DSControlledCheckbox\n disabled={disabled}\n checked={isSelected}\n onMouseDown={onMouseDown}\n name={label}\n label={label}\n onChange={noop}\n tabIndex={tabIndex}\n wrapLabel\n device=\"desktop\"\n />\n </StyledItemContent>\n )}\n </StyledGlobalMenuItemWrapper>\n );\n};\n\nMultiMenuItem.propTypes = itemProps;\nMultiMenuItem.displayName = 'MultiMenuItem';\nconst MultiMenuItemWithSchema = describe(MultiMenuItem);\nMultiMenuItemWithSchema.propTypes = itemProps;\n\nexport { MultiMenuItem, MultiMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSMenuItemT } from '../../react-desc-prop-types';\nimport { defaultMultiProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledGlobalMenuItemWrapper, StyledItemContent } from '../styled';\nimport { width } from 'styled-system';\n\nconst noop = () => null;\n\nconst MultiMenuItem: React.ComponentType<DSMenuItemT.MultiProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultMultiProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n\n const {\n dsId,\n label,\n disabled,\n isSelected,\n isActive,\n onClick,\n dataTestid,\n innerRef,\n onMouseEnter,\n onMouseLeave,\n onMouseDown,\n wrapperStyles,\n tabIndex,\n render: Render,\n } = propsWithDefault;\n\n return (\n <StyledGlobalMenuItemWrapper\n id={dsId}\n disabled={disabled}\n isActive={isActive}\n isSelected={isSelected}\n ref={innerRef}\n onMouseDown={onMouseDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n role=\"option\"\n className={isActive ? 'ds-list-item-active' : ''}\n aria-selected={isSelected}\n style={wrapperStyles}\n onClick={onClick}\n data-testid={dataTestid}\n data-type=\"multi\"\n >\n {Render !== undefined ? (\n <Render {...props} />\n ) : (\n <StyledItemContent>\n <DSControlledCheckbox\n disabled={disabled}\n checked={isSelected}\n onMouseDown={onMouseDown}\n name={label}\n label={label}\n onChange={noop}\n tabIndex={tabIndex}\n wrapLabel\n device=\"desktop\"\n />\n </StyledItemContent>\n )}\n </StyledGlobalMenuItemWrapper>\n );\n};\n\nMultiMenuItem.propTypes = itemProps;\nMultiMenuItem.displayName = 'MultiMenuItem';\nconst MultiMenuItemWithSchema = describe(MultiMenuItem);\nMultiMenuItemWithSchema.propTypes = itemProps;\n\nexport { MultiMenuItem, MultiMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDf;AAlDR,0BAAuF;AACvF,8BAAqC;AAErC,mCAA6C;AAC7C,oBAA+D;AAG/D,MAAM,OAAO,MAAM;AAEnB,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,kDAA6B,OAAO,8CAAiB;AAE9E,0DAA+B,kBAAkB,sCAAS;AAE1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAEJ,SACE,4CAAC;AAAA,IACC,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAK;AAAA,IACL,WAAW,WAAW,wBAAwB;AAAA,IAC9C,iBAAe;AAAA,IACf,OAAO;AAAA,IACP;AAAA,IACA,eAAa;AAAA,IACb,aAAU;AAAA,IAET,qBAAW,SACV,4CAAC;AAAA,MAAQ,GAAG;AAAA,KAAO,IAEnB,4CAAC;AAAA,MACC,sDAAC;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA,WAAS;AAAA,QACT,QAAO;AAAA,OACT;AAAA,KACF;AAAA,GAEJ;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,8BAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -77,10 +77,6 @@ const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
|
|
|
77
77
|
align-items: center;
|
|
78
78
|
list-style: none;
|
|
79
79
|
position: relative;
|
|
80
|
-
${import_ds_system.position}
|
|
81
|
-
${import_ds_system.layout}
|
|
82
|
-
${import_ds_system.sizing}
|
|
83
|
-
${import_ds_system.space}
|
|
84
80
|
|
|
85
81
|
${(props) => {
|
|
86
82
|
if (props.disabled)
|
|
@@ -95,6 +91,7 @@ const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
|
|
|
95
91
|
&:hover {
|
|
96
92
|
background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};
|
|
97
93
|
}
|
|
94
|
+
${import_ds_system.xStyledCommonProps}
|
|
98
95
|
`;
|
|
99
96
|
const StyleMenuItemLabel = (0, import_ds_system.styled)("span", { name: import_exported_related.DSMenuItemName, slot: import_exported_related.DSMenuItemSlots.MENU_ITEM_LABEL })`
|
|
100
97
|
padding: 8px 0;
|
|
@@ -147,9 +144,8 @@ const StyledSeparatorWrapper = (0, import_ds_system.styled)("li", {
|
|
|
147
144
|
})`
|
|
148
145
|
list-style: none;
|
|
149
146
|
padding: 0px 16px;
|
|
150
|
-
|
|
151
|
-
${import_ds_system.
|
|
152
|
-
${import_ds_system.sizing}
|
|
147
|
+
|
|
148
|
+
${import_ds_system.xStyledCommonProps}
|
|
153
149
|
`;
|
|
154
150
|
const StyledGroupLabel = (0, import_ds_system.styled)("span", { name: import_exported_related.DSMenuItemName, slot: import_exported_related.DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`
|
|
155
151
|
font-size: 13px;
|
|
@@ -159,14 +155,13 @@ const StyledSectionWrapper = (0, import_ds_system.styled)("li", {
|
|
|
159
155
|
name: import_exported_related.DSMenuItemName,
|
|
160
156
|
slot: import_exported_related.DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER
|
|
161
157
|
})`
|
|
162
|
-
${import_ds_system.position}
|
|
163
|
-
${import_ds_system.layout}
|
|
164
|
-
${import_ds_system.sizing}
|
|
165
158
|
list-style: none;
|
|
166
159
|
padding: 0px 16px;
|
|
167
160
|
height: 24px;
|
|
168
161
|
display: flex;
|
|
169
162
|
align-items: center;
|
|
163
|
+
|
|
164
|
+
${import_ds_system.xStyledCommonProps}
|
|
170
165
|
`;
|
|
171
166
|
const StyledVerticalSeparator = (0, import_ds_system.styled)("div", {
|
|
172
167
|
name: import_exported_related.DSMenuItemName,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, css,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuItemName, DSMenuItemSlots } from '../exported-related';\n\nconst borderOutside = () => css`\n :after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n pointer-events: none;\n z-index: 7;\n }\n`;\n\nconst disabledOption = () => css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n isSelected?: boolean;\n isActive?: boolean;\n disabled?: boolean;\n}\n\nexport const StyledGlobalMenuItemWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n cursor: pointer;\n min-height: 32px;\n\n padding-left: 16px;\n padding-right: 16px;\n display: grid;\n align-items: center;\n list-style: none;\n position: relative;\n\n ${(props) => {\n if (props.disabled) return disabledOption();\n if (props.isActive) return borderOutside();\n return '';\n }};\n\n background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n &:hover {\n background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n }\n ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n padding: 8px 0;\n font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})`\n padding: 8px 0;\n font-size: 11px;\n font-style: italic;\n color: brand-800;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`\n width: 25px;\n height: 24px;\n display: grid;\n grid-template-columns: min-content auto;\n place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled('div', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON,\n})<{ disabled: boolean }>`\n position: relative;\n width: 100%;\n height: 100%;\n display: grid;\n place-items: center;\n background: transparent;\n :active {\n ${(props) => (props.disabled ? '' : borderOutside())}\n }\n`;\n\nexport const StyledItemContent = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`\n display: flex;\n width: 100%;\n margin: 8px 0px;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`\n border: 0;\n border-top: 1px solid #697489;\n margin: 4px 0px;\n padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER,\n})`\n list-style: none;\n padding: 0px 16px;\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledGroupLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n font-size: 13px;\n color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER,\n})`\n list-style: none;\n padding: 0px 16px;\n height: 24px;\n display: flex;\n align-items: center;\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR,\n})`\n width: 1px;\n height: 18px;\n background-color: neutral-300;\n`;\n\nexport const StyledContentWrapper = styled(Grid, {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAChD,qBAAqB;AACrB,8BAAgD;AAEhD,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAM1D,MAAM,iBAAiB,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcxC,MAAM,kCAA8B,yBAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,UAAU;AACX,MAAI,MAAM;AAAU,WAAO,eAAe;AAC1C,MAAI,MAAM;AAAU,WAAO,cAAc;AACzC,SAAO;AACT;AAAA;AAAA,sBAEoB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,wBAG3D,CAAC,UAAU,CAAC,MAAM,YAAY,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA,IAE3E;AAAA;AAGG,MAAM,yBAAqB,yBAAO,QAAQ,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAKzG,MAAM,kCAA8B,yBAAO,QAAQ;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxG,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQK,CAAC,UAAW,MAAM,WAAW,KAAK,cAAc;AAAA;AAAA;AAI/C,MAAM,wBAAoB,yBAAO,OAAO,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMzG,MAAM,sBAAkB,yBAAO,MAAM,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxG,MAAM,6BAAyB,yBAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG;AAAA;AAGG,MAAM,uBAAmB,yBAAO,QAAQ,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAK7G,MAAM,2BAAuB,yBAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOG;AAAA;AAGG,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/MultiMenuItem/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSMenuItemT } from '../../react-desc-prop-types';\nimport { defaultMultiProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledGlobalMenuItemWrapper, StyledItemContent } from '../styled';\n\nconst noop = () => null;\n\nconst MultiMenuItem: React.ComponentType<DSMenuItemT.MultiProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultMultiProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n\n const {\n dsId,\n label,\n disabled,\n isSelected,\n isActive,\n onClick,\n dataTestid,\n innerRef,\n onMouseEnter,\n onMouseLeave,\n onMouseDown,\n wrapperStyles,\n tabIndex,\n render: Render,\n } = propsWithDefault;\n\n return (\n <StyledGlobalMenuItemWrapper\n id={dsId}\n disabled={disabled}\n isActive={isActive}\n isSelected={isSelected}\n ref={innerRef}\n onMouseDown={onMouseDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n role=\"option\"\n className={isActive ? 'ds-list-item-active' : ''}\n aria-selected={isSelected}\n style={wrapperStyles}\n onClick={onClick}\n data-testid={dataTestid}\n data-type=\"multi\"\n >\n {Render !== undefined ? (\n <Render {...props} />\n ) : (\n <StyledItemContent>\n <DSControlledCheckbox\n disabled={disabled}\n checked={isSelected}\n onMouseDown={onMouseDown}\n name={label}\n label={label}\n onChange={noop}\n tabIndex={tabIndex}\n wrapLabel\n device=\"desktop\"\n />\n </StyledItemContent>\n )}\n </StyledGlobalMenuItemWrapper>\n );\n};\n\nMultiMenuItem.propTypes = itemProps;\nMultiMenuItem.displayName = 'MultiMenuItem';\nconst MultiMenuItemWithSchema = describe(MultiMenuItem);\nMultiMenuItemWithSchema.propTypes = itemProps;\n\nexport { MultiMenuItem, MultiMenuItemWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSMenuItemT } from '../../react-desc-prop-types';\nimport { defaultMultiProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledGlobalMenuItemWrapper, StyledItemContent } from '../styled';\nimport { width } from 'styled-system';\n\nconst noop = () => null;\n\nconst MultiMenuItem: React.ComponentType<DSMenuItemT.MultiProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultMultiProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n\n const {\n dsId,\n label,\n disabled,\n isSelected,\n isActive,\n onClick,\n dataTestid,\n innerRef,\n onMouseEnter,\n onMouseLeave,\n onMouseDown,\n wrapperStyles,\n tabIndex,\n render: Render,\n } = propsWithDefault;\n\n return (\n <StyledGlobalMenuItemWrapper\n id={dsId}\n disabled={disabled}\n isActive={isActive}\n isSelected={isSelected}\n ref={innerRef}\n onMouseDown={onMouseDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n role=\"option\"\n className={isActive ? 'ds-list-item-active' : ''}\n aria-selected={isSelected}\n style={wrapperStyles}\n onClick={onClick}\n data-testid={dataTestid}\n data-type=\"multi\"\n >\n {Render !== undefined ? (\n <Render {...props} />\n ) : (\n <StyledItemContent>\n <DSControlledCheckbox\n disabled={disabled}\n checked={isSelected}\n onMouseDown={onMouseDown}\n name={label}\n label={label}\n onChange={noop}\n tabIndex={tabIndex}\n wrapLabel\n device=\"desktop\"\n />\n </StyledItemContent>\n )}\n </StyledGlobalMenuItemWrapper>\n );\n};\n\nMultiMenuItem.propTypes = itemProps;\nMultiMenuItem.displayName = 'MultiMenuItem';\nconst MultiMenuItemWithSchema = describe(MultiMenuItem);\nMultiMenuItemWithSchema.propTypes = itemProps;\n\nexport { MultiMenuItem, MultiMenuItemWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmDf;AAlDR,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,4BAA4B;AAErC,SAAS,mBAAmB,iBAAiB;AAC7C,SAAS,6BAA6B,yBAAyB;AAG/D,MAAM,OAAO,MAAM;AAEnB,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAA6B,OAAO,iBAAiB;AAE9E,iCAA+B,kBAAkB,SAAS;AAE1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAEJ,SACE,oBAAC;AAAA,IACC,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAK;AAAA,IACL,WAAW,WAAW,wBAAwB;AAAA,IAC9C,iBAAe;AAAA,IACf,OAAO;AAAA,IACP;AAAA,IACA,eAAa;AAAA,IACb,aAAU;AAAA,IAET,qBAAW,SACV,oBAAC;AAAA,MAAQ,GAAG;AAAA,KAAO,IAEnB,oBAAC;AAAA,MACC,8BAAC;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA,WAAS;AAAA,QACT,QAAO;AAAA,OACT;AAAA,KACF;AAAA,GAEJ;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled, css,
|
|
2
|
+
import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
4
|
import { DSMenuItemName, DSMenuItemSlots } from "../exported-related";
|
|
5
5
|
const borderOutside = () => css`
|
|
@@ -37,10 +37,6 @@ const StyledGlobalMenuItemWrapper = styled("li", {
|
|
|
37
37
|
align-items: center;
|
|
38
38
|
list-style: none;
|
|
39
39
|
position: relative;
|
|
40
|
-
${position}
|
|
41
|
-
${layout}
|
|
42
|
-
${sizing}
|
|
43
|
-
${space}
|
|
44
40
|
|
|
45
41
|
${(props) => {
|
|
46
42
|
if (props.disabled)
|
|
@@ -55,6 +51,7 @@ const StyledGlobalMenuItemWrapper = styled("li", {
|
|
|
55
51
|
&:hover {
|
|
56
52
|
background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};
|
|
57
53
|
}
|
|
54
|
+
${xStyledCommonProps}
|
|
58
55
|
`;
|
|
59
56
|
const StyleMenuItemLabel = styled("span", { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`
|
|
60
57
|
padding: 8px 0;
|
|
@@ -107,9 +104,8 @@ const StyledSeparatorWrapper = styled("li", {
|
|
|
107
104
|
})`
|
|
108
105
|
list-style: none;
|
|
109
106
|
padding: 0px 16px;
|
|
110
|
-
|
|
111
|
-
${
|
|
112
|
-
${sizing}
|
|
107
|
+
|
|
108
|
+
${xStyledCommonProps}
|
|
113
109
|
`;
|
|
114
110
|
const StyledGroupLabel = styled("span", { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`
|
|
115
111
|
font-size: 13px;
|
|
@@ -119,14 +115,13 @@ const StyledSectionWrapper = styled("li", {
|
|
|
119
115
|
name: DSMenuItemName,
|
|
120
116
|
slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER
|
|
121
117
|
})`
|
|
122
|
-
${position}
|
|
123
|
-
${layout}
|
|
124
|
-
${sizing}
|
|
125
118
|
list-style: none;
|
|
126
119
|
padding: 0px 16px;
|
|
127
120
|
height: 24px;
|
|
128
121
|
display: flex;
|
|
129
122
|
align-items: center;
|
|
123
|
+
|
|
124
|
+
${xStyledCommonProps}
|
|
130
125
|
`;
|
|
131
126
|
const StyledVerticalSeparator = styled("div", {
|
|
132
127
|
name: DSMenuItemName,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, css,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuItemName, DSMenuItemSlots } from '../exported-related';\n\nconst borderOutside = () => css`\n :after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n pointer-events: none;\n z-index: 7;\n }\n`;\n\nconst disabledOption = () => css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n isSelected?: boolean;\n isActive?: boolean;\n disabled?: boolean;\n}\n\nexport const StyledGlobalMenuItemWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n cursor: pointer;\n min-height: 32px;\n\n padding-left: 16px;\n padding-right: 16px;\n display: grid;\n align-items: center;\n list-style: none;\n position: relative;\n\n ${(props) => {\n if (props.disabled) return disabledOption();\n if (props.isActive) return borderOutside();\n return '';\n }};\n\n background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n &:hover {\n background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n }\n ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n padding: 8px 0;\n font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})`\n padding: 8px 0;\n font-size: 11px;\n font-style: italic;\n color: brand-800;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`\n width: 25px;\n height: 24px;\n display: grid;\n grid-template-columns: min-content auto;\n place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled('div', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON,\n})<{ disabled: boolean }>`\n position: relative;\n width: 100%;\n height: 100%;\n display: grid;\n place-items: center;\n background: transparent;\n :active {\n ${(props) => (props.disabled ? '' : borderOutside())}\n }\n`;\n\nexport const StyledItemContent = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`\n display: flex;\n width: 100%;\n margin: 8px 0px;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`\n border: 0;\n border-top: 1px solid #697489;\n margin: 4px 0px;\n padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER,\n})`\n list-style: none;\n padding: 0px 16px;\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledGroupLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n font-size: 13px;\n color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER,\n})`\n list-style: none;\n padding: 0px 16px;\n height: 24px;\n display: flex;\n align-items: center;\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR,\n})`\n width: 1px;\n height: 18px;\n background-color: neutral-300;\n`;\n\nexport const StyledContentWrapper = styled(Grid, {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER,\n})``;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,YAAY;AACrB,SAAS,gBAAgB,uBAAuB;AAEhD,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAM1D,MAAM,iBAAiB,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcxC,MAAM,8BAA8B,OAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,UAAU;AACX,MAAI,MAAM;AAAU,WAAO,eAAe;AAC1C,MAAI,MAAM;AAAU,WAAO,cAAc;AACzC,SAAO;AACT;AAAA;AAAA,sBAEoB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,wBAG3D,CAAC,UAAU,CAAC,MAAM,YAAY,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA,IAE3E;AAAA;AAGG,MAAM,qBAAqB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAKzG,MAAM,8BAA8B,OAAO,QAAQ;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxG,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQK,CAAC,UAAW,MAAM,WAAW,KAAK,cAAc;AAAA;AAAA;AAI/C,MAAM,oBAAoB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMzG,MAAM,kBAAkB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxG,MAAM,yBAAyB,OAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG;AAAA;AAGG,MAAM,mBAAmB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAK7G,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOG;AAAA;AAGG,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-items",
|
|
3
|
-
"version": "3.12.0-
|
|
3
|
+
"version": "3.12.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Items",
|
|
6
6
|
"files": [
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-form-checkbox": "3.12.0-
|
|
39
|
-
"@elliemae/ds-grid": "3.12.0-
|
|
40
|
-
"@elliemae/ds-icons": "3.12.0-
|
|
41
|
-
"@elliemae/ds-system": "3.12.0-
|
|
42
|
-
"@elliemae/ds-utilities": "3.12.0-
|
|
38
|
+
"@elliemae/ds-form-checkbox": "3.12.0-rc.1",
|
|
39
|
+
"@elliemae/ds-grid": "3.12.0-rc.1",
|
|
40
|
+
"@elliemae/ds-icons": "3.12.0-rc.1",
|
|
41
|
+
"@elliemae/ds-system": "3.12.0-rc.1",
|
|
42
|
+
"@elliemae/ds-utilities": "3.12.0-rc.1",
|
|
43
43
|
"@xstyled/system": "~3.7.0",
|
|
44
44
|
"@xstyled/util": "3.7.0"
|
|
45
45
|
},
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"lodash": "^4.17.21",
|
|
48
48
|
"react": "^17.0.2",
|
|
49
49
|
"react-dom": "^17.0.2",
|
|
50
|
-
"styled-components": "
|
|
50
|
+
"styled-components": "~5.3.6"
|
|
51
51
|
},
|
|
52
52
|
"publishConfig": {
|
|
53
53
|
"access": "public",
|