@elliemae/ds-menu-items-commons 3.70.0-next.32 → 3.70.0-next.34
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/styled.js +3 -2
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/styled.js +3 -2
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/styled.d.ts +9 -0
- package/package.json +6 -6
package/dist/cjs/styled.js
CHANGED
|
@@ -47,6 +47,7 @@ var import_ds_system = require("@elliemae/ds-system");
|
|
|
47
47
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
48
48
|
var import_ds_typography = require("@elliemae/ds-typography");
|
|
49
49
|
var import_constants = require("./constants/index.js");
|
|
50
|
+
const MENU_ITEM_ROW_HEIGHT = "32px";
|
|
50
51
|
const borderOutside = () => import_ds_system.css`
|
|
51
52
|
:after {
|
|
52
53
|
display: block;
|
|
@@ -92,7 +93,7 @@ const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
|
|
|
92
93
|
slot: import_constants.DSMenuItemSlots.MENU_ITEM_WRAPPER
|
|
93
94
|
})`
|
|
94
95
|
cursor: pointer;
|
|
95
|
-
min-height:
|
|
96
|
+
min-height: ${MENU_ITEM_ROW_HEIGHT};
|
|
96
97
|
|
|
97
98
|
padding-left: 16px;
|
|
98
99
|
padding-right: 16px;
|
|
@@ -197,7 +198,7 @@ const StyledSectionWrapper = (0, import_ds_system.styled)("li", {
|
|
|
197
198
|
})`
|
|
198
199
|
list-style: none;
|
|
199
200
|
padding: 0px 16px;
|
|
200
|
-
min-height:
|
|
201
|
+
min-height: ${MENU_ITEM_ROW_HEIGHT};
|
|
201
202
|
display: flex;
|
|
202
203
|
align-items: center;
|
|
203
204
|
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
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 { DSTypography } from '@elliemae/ds-typography';\nimport { DSMenuItemName, DSMenuItemSlots } from './constants/index.js';\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 /** Checkbox label has its own color rule (n700 per checkbox spec) so the wrapper's color does not cascade through it\n * The multi-select menu item needs explicit label overrides in both non-hover and hover states. \n */\n label {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n :hover {\n color: ${({ theme }) => theme.colors.neutral[600]};\n label {\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n /** single menu item spec: \n * aria-disabled-selected + hover \u2192 checkmark icon goes from neutral-400 to neutral-500\n * ds-icons sets svg fill via !important internally \u2014 override with same flag at higher specificity\n */\n svg {\n fill: ${({ theme }) => theme.colors.neutral[500]} !important;\n }\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 applyAriaDisabled?: boolean;\n readOnly?: 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:
|
|
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,2BAA6B;AAC7B,uBAAgD;
|
|
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 { DSTypography } from '@elliemae/ds-typography';\nimport { DSMenuItemName, DSMenuItemSlots } from './constants/index.js';\n\n/**\n * Single source for the menu list row height. The option row and the group-label/section row\n * are peers and must stay the same height \u2014 consuming one value keeps them aligned and prevents\n * the kind of drift fixed in PUI-18609 (group label was 24 while options were 32).\n */\nconst MENU_ITEM_ROW_HEIGHT = '32px';\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 /** Checkbox label has its own color rule (n700 per checkbox spec) so the wrapper's color does not cascade through it\n * The multi-select menu item needs explicit label overrides in both non-hover and hover states. \n */\n label {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n :hover {\n color: ${({ theme }) => theme.colors.neutral[600]};\n label {\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n /** single menu item spec: \n * aria-disabled-selected + hover \u2192 checkmark icon goes from neutral-400 to neutral-500\n * ds-icons sets svg fill via !important internally \u2014 override with same flag at higher specificity\n */\n svg {\n fill: ${({ theme }) => theme.colors.neutral[500]} !important;\n }\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 applyAriaDisabled?: boolean;\n readOnly?: 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: ${MENU_ITEM_ROW_HEIGHT};\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.isActive) return borderOutside();\n return '';\n }};\n\n ${(props) => {\n if (props.disabled || props.applyAriaDisabled || props.readOnly) return disabledOption();\n return '';\n }};\n\n background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : props.theme.colors.neutral['000'])};\n\n // focus style for standalone version\n &:focus {\n ${(props) => {\n if (props.disabled) return disabledOption();\n if (!props.disabled) return borderOutside();\n return '';\n }};\n outline: none;\n background-color: ${(props) =>\n !props.disabled ? props.theme.colors.brand[200] : props.theme.colors.neutral['000']};\n }\n &:hover {\n background-color: ${(props) =>\n (!props.disabled || !props.applyAriaDisabled || !props.readOnly) && props.theme.colors.brand[200]};\n }\n\n &[aria-disabled='true'] {\n ${disabledOption()}\n }\n\n ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled(DSTypography, { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n padding: 8px 0;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})<{ disabled?: boolean }>`\n padding: 8px 0;\n font-size: 0.8462rem;\n font-style: italic;\n color: ${(props) => (props.disabled ? props.theme.colors.neutral['500'] : props.theme.colors.brand['800'])};\n text-align: right;\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; applyAriaDisabled: 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 || props.applyAriaDisabled ? '' : 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(DSTypography, {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL,\n})``;\n\n/**\n * The \"section / group label\" row is reimplemented independently in three sibling surfaces, each\n * reaching the same 32px row by a different mechanism \u2014 keep all four in sync (PUI-18609):\n * - ds-form-combobox \u2192 src/parts/Section.tsx (height via label padding + b3-strong line-height)\n * - ds-form-layout-autocomplete \u2192 src/parts/Section.tsx (own StyledSectionWrapper min-height)\n * - ds-menu-button \u2192 parts/DSMenuItemRendererFactory (StyledGroupLabelWrapper min-height)\n * The duplication is intentional (different semantics + slot namespaces) and tracked in each\n * package's KNOWN_INTENTIONAL_DEVIATIONS.md.\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 min-height: ${MENU_ITEM_ROW_HEIGHT};\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,2BAA6B;AAC7B,uBAAgD;AAOhD,MAAM,uBAAuB;AAE7B,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAM9D,MAAM,iBAAiB,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAKtC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,aAGxC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,eAEtC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOzC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB/C,MAAM,kCAA8B,yBAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA,gBAEe,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAShC,CAAC,UAAU;AACX,MAAI,MAAM,SAAU,QAAO,cAAc;AACzC,SAAO;AACT,CAAC;AAAA;AAAA,IAEC,CAAC,UAAU;AACX,MAAI,MAAM,YAAY,MAAM,qBAAqB,MAAM,SAAU,QAAO,eAAe;AACvF,SAAO;AACT,CAAC;AAAA;AAAA,sBAEmB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAE;AAAA;AAAA;AAAA;AAAA,MAI/G,CAAC,UAAU;AACX,MAAI,MAAM,SAAU,QAAO,eAAe;AAC1C,MAAI,CAAC,MAAM,SAAU,QAAO,cAAc;AAC1C,SAAO;AACT,CAAC;AAAA;AAAA,wBAEmB,CAAC,UACnB,CAAC,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,wBAGjE,CAAC,WAClB,CAAC,MAAM,YAAY,CAAC,MAAM,qBAAqB,CAAC,MAAM,aAAa,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAIjG,eAAe,CAAC;AAAA;AAAA;AAAA,IAGlB,mCAAkB;AAAA;AAGf,MAAM,yBAAqB,yBAAO,mCAAc,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,gBAAgB,CAAC;AAAA;AAAA;AAI/G,MAAM,kCAA8B,yBAAO,QAAQ;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA,WAIU,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,MAAM,OAAO,MAAM,KAAK,CAAE;AAAA;AAAA;AAIrG,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxG,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQK,CAAC,UAAW,MAAM,YAAY,MAAM,oBAAoB,KAAK,cAAc,CAAE;AAAA;AAAA;AAI5E,MAAM,wBAAoB,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMzG,MAAM,sBAAkB,yBAAO,MAAM,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxG,MAAM,6BAAyB,yBAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,mCAAkB;AAAA;AAGf,MAAM,uBAAmB,yBAAO,mCAAc;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAWM,MAAM,2BAAuB,yBAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,gBAGe,oBAAoB;AAAA;AAAA;AAAA;AAAA,IAIhC,mCAAkB;AAAA;AAGf,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -3,6 +3,7 @@ import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
|
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
4
|
import { DSTypography } from "@elliemae/ds-typography";
|
|
5
5
|
import { DSMenuItemName, DSMenuItemSlots } from "./constants/index.js";
|
|
6
|
+
const MENU_ITEM_ROW_HEIGHT = "32px";
|
|
6
7
|
const borderOutside = () => css`
|
|
7
8
|
:after {
|
|
8
9
|
display: block;
|
|
@@ -48,7 +49,7 @@ const StyledGlobalMenuItemWrapper = styled("li", {
|
|
|
48
49
|
slot: DSMenuItemSlots.MENU_ITEM_WRAPPER
|
|
49
50
|
})`
|
|
50
51
|
cursor: pointer;
|
|
51
|
-
min-height:
|
|
52
|
+
min-height: ${MENU_ITEM_ROW_HEIGHT};
|
|
52
53
|
|
|
53
54
|
padding-left: 16px;
|
|
54
55
|
padding-right: 16px;
|
|
@@ -153,7 +154,7 @@ const StyledSectionWrapper = styled("li", {
|
|
|
153
154
|
})`
|
|
154
155
|
list-style: none;
|
|
155
156
|
padding: 0px 16px;
|
|
156
|
-
min-height:
|
|
157
|
+
min-height: ${MENU_ITEM_ROW_HEIGHT};
|
|
157
158
|
display: flex;
|
|
158
159
|
align-items: center;
|
|
159
160
|
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/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, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSMenuItemName, DSMenuItemSlots } from './constants/index.js';\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 /** Checkbox label has its own color rule (n700 per checkbox spec) so the wrapper's color does not cascade through it\n * The multi-select menu item needs explicit label overrides in both non-hover and hover states. \n */\n label {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n :hover {\n color: ${({ theme }) => theme.colors.neutral[600]};\n label {\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n /** single menu item spec: \n * aria-disabled-selected + hover \u2192 checkmark icon goes from neutral-400 to neutral-500\n * ds-icons sets svg fill via !important internally \u2014 override with same flag at higher specificity\n */\n svg {\n fill: ${({ theme }) => theme.colors.neutral[500]} !important;\n }\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 applyAriaDisabled?: boolean;\n readOnly?: 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:
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;
|
|
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 { DSTypography } from '@elliemae/ds-typography';\nimport { DSMenuItemName, DSMenuItemSlots } from './constants/index.js';\n\n/**\n * Single source for the menu list row height. The option row and the group-label/section row\n * are peers and must stay the same height \u2014 consuming one value keeps them aligned and prevents\n * the kind of drift fixed in PUI-18609 (group label was 24 while options were 32).\n */\nconst MENU_ITEM_ROW_HEIGHT = '32px';\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 /** Checkbox label has its own color rule (n700 per checkbox spec) so the wrapper's color does not cascade through it\n * The multi-select menu item needs explicit label overrides in both non-hover and hover states. \n */\n label {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n :hover {\n color: ${({ theme }) => theme.colors.neutral[600]};\n label {\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n /** single menu item spec: \n * aria-disabled-selected + hover \u2192 checkmark icon goes from neutral-400 to neutral-500\n * ds-icons sets svg fill via !important internally \u2014 override with same flag at higher specificity\n */\n svg {\n fill: ${({ theme }) => theme.colors.neutral[500]} !important;\n }\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 applyAriaDisabled?: boolean;\n readOnly?: 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: ${MENU_ITEM_ROW_HEIGHT};\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.isActive) return borderOutside();\n return '';\n }};\n\n ${(props) => {\n if (props.disabled || props.applyAriaDisabled || props.readOnly) return disabledOption();\n return '';\n }};\n\n background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : props.theme.colors.neutral['000'])};\n\n // focus style for standalone version\n &:focus {\n ${(props) => {\n if (props.disabled) return disabledOption();\n if (!props.disabled) return borderOutside();\n return '';\n }};\n outline: none;\n background-color: ${(props) =>\n !props.disabled ? props.theme.colors.brand[200] : props.theme.colors.neutral['000']};\n }\n &:hover {\n background-color: ${(props) =>\n (!props.disabled || !props.applyAriaDisabled || !props.readOnly) && props.theme.colors.brand[200]};\n }\n\n &[aria-disabled='true'] {\n ${disabledOption()}\n }\n\n ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled(DSTypography, { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n padding: 8px 0;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})<{ disabled?: boolean }>`\n padding: 8px 0;\n font-size: 0.8462rem;\n font-style: italic;\n color: ${(props) => (props.disabled ? props.theme.colors.neutral['500'] : props.theme.colors.brand['800'])};\n text-align: right;\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; applyAriaDisabled: 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 || props.applyAriaDisabled ? '' : 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(DSTypography, {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL,\n})``;\n\n/**\n * The \"section / group label\" row is reimplemented independently in three sibling surfaces, each\n * reaching the same 32px row by a different mechanism \u2014 keep all four in sync (PUI-18609):\n * - ds-form-combobox \u2192 src/parts/Section.tsx (height via label padding + b3-strong line-height)\n * - ds-form-layout-autocomplete \u2192 src/parts/Section.tsx (own StyledSectionWrapper min-height)\n * - ds-menu-button \u2192 parts/DSMenuItemRendererFactory (StyledGroupLabelWrapper min-height)\n * The duplication is intentional (different semantics + slot namespaces) and tracked in each\n * package's KNOWN_INTENTIONAL_DEVIATIONS.md.\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 min-height: ${MENU_ITEM_ROW_HEIGHT};\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/styled.d.ts
CHANGED
|
@@ -20,6 +20,15 @@ export declare const StyledItemContent: import("styled-components").StyledCompon
|
|
|
20
20
|
export declare const StyledSeparator: import("styled-components").StyledComponent<"hr", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"hr">, never>;
|
|
21
21
|
export declare const StyledSeparatorWrapper: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"li">, never>;
|
|
22
22
|
export declare const StyledGroupLabel: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
|
|
23
|
+
/**
|
|
24
|
+
* The "section / group label" row is reimplemented independently in three sibling surfaces, each
|
|
25
|
+
* reaching the same 32px row by a different mechanism — keep all four in sync (PUI-18609):
|
|
26
|
+
* - ds-form-combobox → src/parts/Section.tsx (height via label padding + b3-strong line-height)
|
|
27
|
+
* - ds-form-layout-autocomplete → src/parts/Section.tsx (own StyledSectionWrapper min-height)
|
|
28
|
+
* - ds-menu-button → parts/DSMenuItemRendererFactory (StyledGroupLabelWrapper min-height)
|
|
29
|
+
* The duplication is intentional (different semantics + slot namespaces) and tracked in each
|
|
30
|
+
* package's KNOWN_INTENTIONAL_DEVIATIONS.md.
|
|
31
|
+
*/
|
|
23
32
|
export declare const StyledSectionWrapper: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"li">, never>;
|
|
24
33
|
export declare const StyledVerticalSeparator: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
25
34
|
export declare const StyledContentWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-items-commons",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.34",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Items Commons",
|
|
6
6
|
"files": [
|
|
@@ -36,16 +36,16 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-grid": "3.70.0-next.
|
|
40
|
-
"@elliemae/ds-props-helpers": "3.70.0-next.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-grid": "3.70.0-next.34",
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.34",
|
|
41
|
+
"@elliemae/ds-typography": "3.70.0-next.34",
|
|
42
|
+
"@elliemae/ds-system": "3.70.0-next.34"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"jest": "^30.0.0",
|
|
46
46
|
"lodash-es": "^4.18.1",
|
|
47
47
|
"styled-components": "~5.3.9",
|
|
48
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
48
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.34"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"@testing-library/jest-dom": "^6.6.3",
|