@elliemae/ds-menu-button 3.60.0-next.13 → 3.60.0-next.15
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/DSMenuButton.js +8 -5
- package/dist/cjs/DSMenuButton.js.map +2 -2
- package/dist/cjs/MenuButtonContextProviderCTX.js +40 -0
- package/dist/cjs/MenuButtonContextProviderCTX.js.map +7 -0
- package/dist/cjs/config/useMenuButton.js +3 -1
- package/dist/cjs/config/useMenuButton.js.map +2 -2
- package/dist/cjs/constants/index.js +12 -0
- package/dist/cjs/constants/index.js.map +3 -3
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/parts/DSFlyoutMenu/DSFlyoutMenu.js +14 -2
- package/dist/cjs/parts/DSFlyoutMenu/DSFlyoutMenu.js.map +2 -2
- package/dist/cjs/parts/DSFlyoutMenu/constants/index.js +1 -0
- package/dist/cjs/parts/DSFlyoutMenu/constants/index.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/ActivableMenuItem.js +19 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/ActivableMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js +19 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/MultipleSelectMenuItem.js +19 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/MultipleSelectMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js +19 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/SingleSelectMenuItem.js +19 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/SingleSelectMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.js +19 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/SkeletonMenuItem.js +9 -0
- package/dist/cjs/parts/DSMenuItemRendererFactory/SkeletonMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.js +19 -2
- package/dist/cjs/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.js.map +2 -2
- package/dist/cjs/parts/DSOpinionatedButton/DSOpinionatedButton.js +5 -0
- package/dist/cjs/parts/DSOpinionatedButton/DSOpinionatedButton.js.map +2 -2
- package/dist/esm/DSMenuButton.js +8 -5
- package/dist/esm/DSMenuButton.js.map +2 -2
- package/dist/esm/MenuButtonContextProviderCTX.js +10 -0
- package/dist/esm/MenuButtonContextProviderCTX.js.map +7 -0
- package/dist/esm/config/useMenuButton.js +4 -2
- package/dist/esm/config/useMenuButton.js.map +2 -2
- package/dist/esm/constants/index.js +12 -0
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/index.js +9 -1
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/parts/DSFlyoutMenu/DSFlyoutMenu.js +14 -2
- package/dist/esm/parts/DSFlyoutMenu/DSFlyoutMenu.js.map +2 -2
- package/dist/esm/parts/DSFlyoutMenu/constants/index.js +1 -0
- package/dist/esm/parts/DSFlyoutMenu/constants/index.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/ActivableMenuItem.js +20 -3
- package/dist/esm/parts/DSMenuItemRendererFactory/ActivableMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js +19 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectMenuItem.js +19 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js +19 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/SingleSelectMenuItem.js +19 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/SingleSelectMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.js +19 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/SkeletonMenuItem.js +9 -0
- package/dist/esm/parts/DSMenuItemRendererFactory/SkeletonMenuItem.js.map +2 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.js +19 -2
- package/dist/esm/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.js.map +2 -2
- package/dist/esm/parts/DSOpinionatedButton/DSOpinionatedButton.js +5 -0
- package/dist/esm/parts/DSOpinionatedButton/DSOpinionatedButton.js.map +2 -2
- package/dist/types/MenuButtonContextProviderCTX.d.ts +4 -0
- package/dist/types/config/useMenuButton.d.ts +2 -1
- package/dist/types/config/useSplitInherithedProps.d.ts +29 -29
- package/dist/types/constants/index.d.ts +9 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/parts/DSFlyoutMenu/constants/index.d.ts +2 -0
- package/dist/types/tests/config/ControlledTestRender.d.ts +3 -0
- package/dist/types/tests/menu-button.exports.test.d.ts +1 -0
- package/dist/types/tests/menu-button.get-owner-props.test.d.ts +1 -0
- package/dist/types/tests/menu-button.keyboard.test.d.ts +1 -0
- package/package.json +15 -16
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/SkeletonMenuItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '@elliemae/ds-menu-items-commons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '@elliemae/ds-menu-items-commons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst firstBoxWidth = '16px';\nconst gridLayout = [firstBoxWidth, '1fr'];\nexport const SkeletonMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeSkeletonItem }> = ({\n itemNode,\n}) => {\n const { dsId, plainItem } = itemNode;\n const { minWidth } = plainItem;\n\n const {\n focusRegion,\n menuItemEventsHandlers: {\n handleFocusableMenuItemKeyDown,\n handleFocusableMenuItemOnMouseEnter,\n handleFocusableMenuItemNativeFocusEvent,\n },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n const {\n ownerProps: { getOwnerProps },\n } = React.useContext(MenuButtonContextProvider);\n\n const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n const handleFocusOnRender = React.useCallback(\n (node: HTMLDivElement) => {\n if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n focusNodeRacingConditionSolved(node);\n }\n },\n // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n [dsId, focusRegion],\n // we are using the \"as='div'\", typescript is not able to infer the correct type\n // the logic here actually receives a ref to a HTMLDivElement,\n // but the component must think this is a HTMLLIElement ref callback\n ) as unknown as React.RefCallback<HTMLLIElement>;\n const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n handleFocusableMenuItemOnMouseEnter(itemNode);\n }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n (e) => {\n handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n },\n [handleFocusableMenuItemNativeFocusEvent, itemNode],\n );\n\n const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n\n const firstBoxAndGutterWidth = 16 + 8;\n const secondBoxWidth = minWidth\n ? `calc(${minWidth} - ${firstBoxAndGutterWidth})`\n : `${150 - firstBoxAndGutterWidth}px`;\n return (\n <StyledGlobalMenuItemWrapper\n innerRef={handleFocusOnRender}\n onKeyDown={handleFocusableMenuItemKeyDown}\n onMouseEnter={handleOnMouseEnter}\n onFocus={handleOnFocus}\n as=\"div\"\n id={`${spacelessDsIdForDom}`}\n role=\"menuitem\"\n tabIndex={isFocused ? 0 : -1}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? '150px'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSSkeleton variant=\"rectangular\" width={firstBoxWidth} />\n <DSSkeleton variant=\"rectangular\" width={secondBoxWidth} />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8EjB,SASE,KATF;AA7EN,SAAS,sBAAsB,mCAAmC;AAClE,SAAS,kBAAkB;AAC3B,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,iCAAiC;AAC1C,MAAM,gBAAgB;AACtB,MAAM,aAAa,CAAC,eAAe,KAAK;AACjC,MAAM,mBAA0F,CAAC;AAAA,EACtG;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM;AAAA,IACJ;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAIA,OAAM,WAAW,qCAAqC;AAE1D,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,mBAAmB,aAAa,IAAI;AAEtE,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,EAC9B,IAAIA,OAAM,WAAW,yBAAyB;AAE9C,QAAM,yBAAyBA,OAAM,YAAY,MAAM,WAAW,CAAC,SAAS,CAAC;AAE7E,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,UAAI,QAAQ,gBAAgB,mBAAmB,aAAa,IAAI,GAAG;AACjE,uCAA+B,IAAI;AAAA,MACrC;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AACA,QAAM,qBAAqBA,OAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AAExE,QAAM,yBAAyB,KAAK;AACpC,QAAM,iBAAiB,WACnB,QAAQ,QAAQ,MAAM,sBAAsB,MAC5C,GAAG,MAAM,sBAAsB;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,MACT,IAAG;AAAA,MACH,IAAI,GAAG,mBAAmB;AAAA,MAC1B,MAAK;AAAA,MACL,UAAU,YAAY,IAAI;AAAA,MAC1B;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UACtB;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,cAAW,SAAQ,eAAc,OAAO,eAAe;AAAA,YACxD,oBAAC,cAAW,SAAQ,eAAc,OAAO,gBAAgB;AAAA;AAAA;AAAA,MAC3D;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -12,6 +12,7 @@ import React2 from "react";
|
|
|
12
12
|
import { MenuBehaviouralContextProviderContext } from "../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js";
|
|
13
13
|
import { MENU_FOCUS_REGIONS } from "../DSMenuBehaviouralContextProvider/constants/index.js";
|
|
14
14
|
import { focusNodeRacingConditionSolved } from "./focusNodeRacingConditionSolved.js";
|
|
15
|
+
import { MenuButtonContextProvider } from "../../MenuButtonContextProviderCTX.js";
|
|
15
16
|
const placementOrderPreference = [
|
|
16
17
|
"right-start",
|
|
17
18
|
"right-start",
|
|
@@ -23,6 +24,10 @@ const placementOrderPreference = [
|
|
|
23
24
|
const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
|
|
24
25
|
const { dsId, plainItem } = itemNode;
|
|
25
26
|
const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
|
|
27
|
+
const {
|
|
28
|
+
ownerProps: { getOwnerProps }
|
|
29
|
+
} = React2.useContext(MenuButtonContextProvider);
|
|
30
|
+
const getOwnerPropsArguments = React2.useCallback(() => plainItem, [plainItem]);
|
|
26
31
|
const {
|
|
27
32
|
focusRegion,
|
|
28
33
|
openedSubItems,
|
|
@@ -103,6 +108,8 @@ const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
|
|
|
103
108
|
),
|
|
104
109
|
"aria-disabled": disabled,
|
|
105
110
|
applyAriaDisabled: disabled,
|
|
111
|
+
getOwnerProps,
|
|
112
|
+
getOwnerPropsArguments,
|
|
106
113
|
children: /* @__PURE__ */ jsxs(
|
|
107
114
|
StyledContentWrapper,
|
|
108
115
|
{
|
|
@@ -111,10 +118,20 @@ const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
|
|
|
111
118
|
gutter: "xxs",
|
|
112
119
|
alignItems: "center",
|
|
113
120
|
minWidth: minWidth ?? void 0,
|
|
121
|
+
getOwnerProps,
|
|
122
|
+
getOwnerPropsArguments,
|
|
114
123
|
children: [
|
|
115
124
|
LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
|
|
116
|
-
/* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
|
|
117
|
-
secondaryLabel !== void 0 && /* @__PURE__ */ jsx(
|
|
125
|
+
/* @__PURE__ */ jsx(StyleMenuItemLabel, { getOwnerProps, getOwnerPropsArguments, children: label }),
|
|
126
|
+
secondaryLabel !== void 0 && /* @__PURE__ */ jsx(
|
|
127
|
+
StyleMenuItemSecondaryLabel,
|
|
128
|
+
{
|
|
129
|
+
getOwnerProps,
|
|
130
|
+
getOwnerPropsArguments,
|
|
131
|
+
disabled,
|
|
132
|
+
children: secondaryLabel
|
|
133
|
+
}
|
|
134
|
+
),
|
|
118
135
|
/* @__PURE__ */ jsx(ChevronSmallRight, {})
|
|
119
136
|
]
|
|
120
137
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { ChevronSmallRight } from '@elliemae/ds-icons';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { ChevronSmallRight } from '@elliemae/ds-icons';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledContentWrapper,\n StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n 'right-start',\n 'right-start',\n 'right',\n 'left-start',\n 'left-end',\n 'left',\n];\nexport const WithSubmenuMenuItem: React.ComponentType<{\n itemNode: DSMenuButtonT.MenuNodeWithSubmenuItem;\n FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n const { dsId, plainItem } = itemNode;\n const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n const {\n ownerProps: { getOwnerProps },\n } = React.useContext(MenuButtonContextProvider);\n const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n const {\n focusRegion,\n openedSubItems,\n menuItemEventsHandlers: {\n handleFocusableMenuItemKeyDown,\n handleFocusableMenuItemClick,\n handleFocusableMenuItemOnMouseEnter,\n handleFocusableMenuItemNativeFocusEvent,\n },\n } = React.useContext(MenuBehaviouralContextProviderContext);\n\n const gridLayout = React.useMemo(() => {\n const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n if (secondaryLabel) cols.push('auto');\n cols.push('min-content');\n return cols;\n }, [LeftDecComponent, secondaryLabel]);\n\n const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n focusedRegionPerformanceHelper.current = focusRegion;\n\n const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n\n const floatingContext = useFloatingContext({\n placement: placementOrderPreference[0],\n placementOrderPreference,\n animationDuration: 100,\n customOffset: [0, 0],\n externallyControlledIsOpen: isExpanded,\n });\n const {\n refs: { setReference },\n } = floatingContext;\n\n const handleFocusOnRender = React.useCallback(\n (node: HTMLDivElement) => {\n setReference(node);\n if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n focusNodeRacingConditionSolved(node);\n }\n },\n // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n [dsId, focusRegion, setReference],\n // we are using the \"as='div'\", typescript is not able to infer the correct type\n // the logic here actually receives a ref to a HTMLDivElement,\n // but the component must think this is a HTMLLIElement ref callback\n ) as unknown as React.RefCallback<HTMLLIElement>;\n\n const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n handleFocusableMenuItemOnMouseEnter(itemNode);\n }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n (e) => {\n handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n },\n [handleFocusableMenuItemNativeFocusEvent, itemNode],\n );\n\n const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n return (\n <>\n <StyledGlobalMenuItemWrapper\n innerRef={handleFocusOnRender}\n onKeyDown={handleFocusableMenuItemKeyDown}\n onClick={handleFocusableMenuItemClick}\n onMouseEnter={handleOnMouseEnter}\n onFocus={handleOnFocus}\n as=\"div\"\n id={`${spacelessDsIdForDom}`}\n tabIndex={isFocused ? 0 : -1}\n role=\"menuitem\"\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isExpanded\n ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n aria-disabled={disabled}\n applyAriaDisabled={disabled}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledContentWrapper\n cols={gridLayout}\n minHeight=\"16px\"\n gutter=\"xxs\"\n alignItems=\"center\"\n minWidth={minWidth ?? undefined}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {LeftDecComponent ? <LeftDecComponent /> : null}\n <StyleMenuItemLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {label}\n </StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n disabled={disabled}\n >\n {secondaryLabel}\n </StyleMenuItemSecondaryLabel>\n )}\n <ChevronSmallRight />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n <FlyoutMenuCircularDepInject\n isMenuOpen={isExpanded}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n itemNode={itemNode}\n />\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgGnB,mBAuC0B,KATtB,YA9BJ;AAhGJ,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAAuD;AAChE,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AAEnC,SAAS,sCAAsC;AAC/C,SAAS,iCAAiC;AAC1C,MAAM,2BAA+F;AAAA,EACnG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACO,MAAM,sBAGR,CAAC,EAAE,UAAU,4BAA4B,MAAM;AAClD,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;AAExF,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,EAC9B,IAAIA,OAAM,WAAW,yBAAyB;AAC9C,QAAM,yBAAyBA,OAAM,YAAY,MAAM,WAAW,CAAC,SAAS,CAAC;AAE7E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAIA,OAAM,WAAW,qCAAqC;AAE1D,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,UAAM,OAAO,mBAAmB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AACjE,QAAI,eAAgB,MAAK,KAAK,MAAM;AACpC,SAAK,KAAK,aAAa;AACvB,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,mBAAmB,aAAa,IAAI;AACtE,QAAM,aAAa,eAAe,KAAK,CAAC,wBAAwB,oBAAoB,SAAS,IAAI;AAEjG,QAAM,kBAAkB,mBAAmB;AAAA,IACzC,WAAW,yBAAyB,CAAC;AAAA,IACrC;AAAA,IACA,mBAAmB;AAAA,IACnB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,4BAA4B;AAAA,EAC9B,CAAC;AACD,QAAM;AAAA,IACJ,MAAM,EAAE,aAAa;AAAA,EACvB,IAAI;AAEJ,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,mBAAa,IAAI;AACjB,UAAI,QAAQ,gBAAgB,mBAAmB,aAAa,IAAI,GAAG;AACjE,uCAA+B,IAAI;AAAA,MACrC;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,aAAa,YAAY;AAAA;AAAA;AAAA;AAAA,EAIlC;AAEA,QAAM,qBAAqBA,OAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AACxE,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,cAAc;AAAA,QACd,SAAS;AAAA,QACT,IAAG;AAAA,QACH,IAAI,GAAG,mBAAmB;AAAA,QAC1B,UAAU,YAAY,IAAI;AAAA,QAC1B,MAAK;AAAA,QACL,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQE,aACI,SAAS,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACpG;AAAA;AAAA,QAEN,iBAAe;AAAA,QACf,mBAAmB;AAAA,QACnB;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YACV,QAAO;AAAA,YACP,YAAW;AAAA,YACX,UAAU,YAAY;AAAA,YACtB;AAAA,YACA;AAAA,YAEC;AAAA,iCAAmB,oBAAC,oBAAiB,IAAK;AAAA,cAC3C,oBAAC,sBAAmB,eAA8B,wBAC/C,iBACH;AAAA,cACC,mBAAmB,UAClB;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA;AAAA,kBAEC;AAAA;AAAA,cACH;AAAA,cAEF,oBAAC,qBAAkB;AAAA;AAAA;AAAA,QACrB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ,iBAAiB,gBAAgB;AAAA,QACjC,gBAAgB,gBAAgB;AAAA,QAChC,gBAAgB,gBAAgB,KAAK;AAAA,QACrC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -9,6 +9,7 @@ import { useOpinionatedButton } from "./config/useOpinionatedButton.js";
|
|
|
9
9
|
import { OPINIONATED_BUTTON_SLOTS, DSOpinionatedButtonName } from "./constants/index.js";
|
|
10
10
|
import { DSFlyoutMenu } from "../DSFlyoutMenu/index.js";
|
|
11
11
|
import { MenuBehaviouralContextProviderContext } from "../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js";
|
|
12
|
+
import { MenuButtonContextProvider } from "../../MenuButtonContextProviderCTX.js";
|
|
12
13
|
const StyledButton = styled(DSButtonV3, { name: DSOpinionatedButtonName, slot: OPINIONATED_BUTTON_SLOTS.ROOT })``;
|
|
13
14
|
const DSOpinionatedButton = (props) => {
|
|
14
15
|
const globalMenuContext = React2.useContext(MenuBehaviouralContextProviderContext);
|
|
@@ -16,6 +17,9 @@ const DSOpinionatedButton = (props) => {
|
|
|
16
17
|
isMenuOpen,
|
|
17
18
|
propsWithDefault: { optionsTree }
|
|
18
19
|
} = globalMenuContext;
|
|
20
|
+
const {
|
|
21
|
+
ownerProps: { getOwnerProps }
|
|
22
|
+
} = React2.useContext(MenuButtonContextProvider);
|
|
19
23
|
const {
|
|
20
24
|
propsWithDefault: { children, menuSpecificProps, ...restOfTheProps },
|
|
21
25
|
eventsHandlers: { handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion, handleTriggerKeyDown },
|
|
@@ -45,6 +49,7 @@ const DSOpinionatedButton = (props) => {
|
|
|
45
49
|
isMenuOpen ? optionsTree.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\s/g, "")}`).join(" ") : void 0
|
|
46
50
|
),
|
|
47
51
|
"aria-expanded": isMenuOpen,
|
|
52
|
+
getOwnerProps,
|
|
48
53
|
children
|
|
49
54
|
}
|
|
50
55
|
),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSOpinionatedButton/DSOpinionatedButton.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { type DSOpinionatedButtonT, DSOpinionatedButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useOpinionatedButton } from './config/useOpinionatedButton.js';\nimport { OPINIONATED_BUTTON_SLOTS, DSOpinionatedButtonName } from './constants/index.js';\nimport { DSFlyoutMenu } from '../DSFlyoutMenu/index.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { type DSOpinionatedButtonT, DSOpinionatedButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useOpinionatedButton } from './config/useOpinionatedButton.js';\nimport { OPINIONATED_BUTTON_SLOTS, DSOpinionatedButtonName } from './constants/index.js';\nimport { DSFlyoutMenu } from '../DSFlyoutMenu/index.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst StyledButton = styled(DSButtonV3, { name: DSOpinionatedButtonName, slot: OPINIONATED_BUTTON_SLOTS.ROOT })``;\n\nconst DSOpinionatedButton: React.ComponentType<DSOpinionatedButtonT.Props> = (props) => {\n // this is the state of the global menu, hosted in the global context\n // each flyout menu instance will have its own state, only this instances is mandated by the global context\n // that's why flyout menu is reading the info from props and not from the context\n const globalMenuContext = React.useContext(MenuBehaviouralContextProviderContext);\n const {\n isMenuOpen,\n propsWithDefault: { optionsTree },\n } = globalMenuContext;\n\n const {\n ownerProps: { getOwnerProps },\n } = React.useContext(MenuButtonContextProvider);\n const {\n propsWithDefault: { children, menuSpecificProps, ...restOfTheProps },\n eventsHandlers: { handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion, handleTriggerKeyDown },\n floatingContext,\n } = useOpinionatedButton(props, globalMenuContext);\n\n return (\n // onClick/onFocus/innerRef/onKeyDown ARE BEING OVERRIDEN ON PURPOSE\n // all the functions are being wrapped in a custom logic, they also invoke the original ones\n <>\n <StyledButton\n {...restOfTheProps}\n onClick={handleOnClick}\n onFocus={handleOnFocus}\n onKeyDown={handleTriggerKeyDown}\n innerRef={handleFocusIfTriggerIsFocusRegion}\n aria-haspopup=\"menu\"\n aria-controls={\n /* ********************************************************************************************************************\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n * The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n * ********************************************************************************************************************\n * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n * so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n * ******************************************************************************************************************** */\n isMenuOpen\n ? optionsTree.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n : undefined\n }\n aria-expanded={isMenuOpen}\n getOwnerProps={getOwnerProps}\n >\n {children}\n </StyledButton>\n <DSFlyoutMenu\n {...menuSpecificProps}\n isMenuOpen={isMenuOpen}\n floatingContext={floatingContext.context}\n floatingStyles={floatingContext.floatingStyles}\n setFloatingRef={floatingContext.refs.setFloating}\n // DSTree doesn't support the root node having a different type than the children, so we need to cast it manually\n itemNode={optionsTree as unknown as DSMenuButtonT.MenuNodeRootItem}\n />\n </>\n );\n};\n\nDSOpinionatedButton.displayName = DSOpinionatedButtonName;\nconst DSOpinionatedButtonWithSchema = describe(DSOpinionatedButton);\nDSOpinionatedButtonWithSchema.propTypes = DSOpinionatedButtonPropTypesSchema;\n\nexport { DSOpinionatedButton, DSOpinionatedButtonWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmCnB,mBACE,KADF;AAnCJ,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAoC,0CAA0C;AAC9E,SAAS,4BAA4B;AACrC,SAAS,0BAA0B,+BAA+B;AAClE,SAAS,oBAAoB;AAC7B,SAAS,6CAA6C;AAEtD,SAAS,iCAAiC;AAC1C,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,yBAAyB,MAAM,yBAAyB,KAAK,CAAC;AAE9G,MAAM,sBAAuE,CAAC,UAAU;AAItF,QAAM,oBAAoBA,OAAM,WAAW,qCAAqC;AAChF,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,YAAY;AAAA,EAClC,IAAI;AAEJ,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,EAC9B,IAAIA,OAAM,WAAW,yBAAyB;AAC9C,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,GAAG,eAAe;AAAA,IACnE,gBAAgB,EAAE,eAAe,eAAe,mCAAmC,qBAAqB;AAAA,IACxG;AAAA,EACF,IAAI,qBAAqB,OAAO,iBAAiB;AAEjD;AAAA;AAAA;AAAA,IAGE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,SAAS;AAAA,UACT,WAAW;AAAA,UACX,UAAU;AAAA,UACV,iBAAc;AAAA,UACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQE,aACI,YAAY,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACvG;AAAA;AAAA,UAEN,iBAAe;AAAA,UACf;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,iBAAiB,gBAAgB;AAAA,UACjC,gBAAgB,gBAAgB;AAAA,UAChC,gBAAgB,gBAAgB,KAAK;AAAA,UAErC,UAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA;AAEJ;AAEA,oBAAoB,cAAc;AAClC,MAAM,gCAAgC,SAAS,mBAAmB;AAClE,8BAA8B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { useGetXstyledProps } from '@elliemae/ds-props-helpers';
|
|
1
|
+
import { useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';
|
|
2
2
|
import { type DSMenuButtonT } from '../react-desc-prop-types.js';
|
|
3
3
|
import { useSplitInherithedProps } from './useSplitInherithedProps.js';
|
|
4
4
|
export interface MenuButtonCTX extends ReturnType<typeof useSplitInherithedProps> {
|
|
5
5
|
propsWithDefault: DSMenuButtonT.InternalProps;
|
|
6
6
|
xstyledProps: ReturnType<typeof useGetXstyledProps>;
|
|
7
|
+
ownerProps: ReturnType<typeof useOwnerProps<DSMenuButtonT.Props>>;
|
|
7
8
|
instanceUid: string;
|
|
8
9
|
}
|
|
9
10
|
export declare const useMenuButton: (propsFromUser: DSMenuButtonT.Props) => MenuButtonCTX;
|
|
@@ -407,30 +407,30 @@ export declare const useSplitInherithedProps: ({ propsWithDefault, focusableNode
|
|
|
407
407
|
width?: number | string | undefined | undefined;
|
|
408
408
|
wmode?: string | undefined | undefined;
|
|
409
409
|
wrap?: string | undefined | undefined;
|
|
410
|
-
margin?: ((
|
|
411
|
-
m?: ((
|
|
412
|
-
marginTop?: ((
|
|
413
|
-
mt?: ((
|
|
414
|
-
marginRight?: ((
|
|
415
|
-
mr?: ((
|
|
416
|
-
marginBottom?: ((
|
|
417
|
-
mb?: ((
|
|
418
|
-
marginLeft?: ((
|
|
419
|
-
ml?: ((
|
|
420
|
-
mx?: (import("@xstyled/system").SystemProp<
|
|
421
|
-
my?: (import("@xstyled/system").SystemProp<
|
|
422
|
-
padding?: ((
|
|
423
|
-
p?: ((
|
|
424
|
-
paddingTop?: ((
|
|
425
|
-
pt?: ((
|
|
426
|
-
paddingRight?: ((
|
|
427
|
-
pr?: ((
|
|
428
|
-
paddingBottom?: ((
|
|
429
|
-
pb?: ((
|
|
430
|
-
paddingLeft?: ((
|
|
431
|
-
pl?: ((
|
|
432
|
-
px?: (import("@xstyled/system").SystemProp<
|
|
433
|
-
py?: (import("@xstyled/system").SystemProp<
|
|
410
|
+
margin?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>)) | undefined;
|
|
411
|
+
m?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>)) | undefined;
|
|
412
|
+
marginTop?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>)) | undefined;
|
|
413
|
+
mt?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>)) | undefined;
|
|
414
|
+
marginRight?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>)) | undefined;
|
|
415
|
+
mr?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>)) | undefined;
|
|
416
|
+
marginBottom?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>)) | undefined;
|
|
417
|
+
mb?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>)) | undefined;
|
|
418
|
+
marginLeft?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>)) | undefined;
|
|
419
|
+
ml?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto", import("@xstyled/system").Theme>)) | undefined;
|
|
420
|
+
mx?: (import("@xstyled/system").SystemProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/system").Theme> & (string | {} | 0 | (string & {}) | (number & {}) | import("@xstyled/system").ThemeProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/system").Theme>)) | undefined;
|
|
421
|
+
my?: (import("@xstyled/system").SystemProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/system").Theme> & (string | {} | 0 | (string & {}) | (number & {}) | import("@xstyled/system").ThemeProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/system").Theme>)) | undefined;
|
|
422
|
+
padding?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>)) | undefined;
|
|
423
|
+
p?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>)) | undefined;
|
|
424
|
+
paddingTop?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>)) | undefined;
|
|
425
|
+
pt?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>)) | undefined;
|
|
426
|
+
paddingRight?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>)) | undefined;
|
|
427
|
+
pr?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>)) | undefined;
|
|
428
|
+
paddingBottom?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>)) | undefined;
|
|
429
|
+
pb?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>)) | undefined;
|
|
430
|
+
paddingLeft?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>)) | undefined;
|
|
431
|
+
pl?: (({} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>) & ({} | 0 | (string & {}) | "inherit" | "m" | "xxxs" | "xxs" | "xxs2" | "xs" | "s" | "l" | "xl" | "xxl" | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax` | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | import("@xstyled/system").ThemeProp<{} | 0 | (string & {}) | "inherit" | keyof import("@elliemae/pui-theme/dist/types/lib/theme-type.js").Space | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset", import("@xstyled/system").Theme>)) | undefined;
|
|
432
|
+
px?: (import("@xstyled/system").SystemProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/system").Theme> & (string | {} | 0 | (string & {}) | (number & {}) | import("@xstyled/system").ThemeProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/system").Theme>)) | undefined;
|
|
433
|
+
py?: (import("@xstyled/system").SystemProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/system").Theme> & (string | {} | 0 | (string & {}) | (number & {}) | import("@xstyled/system").ThemeProp<string | {} | 0 | (string & {}) | (number & {}), import("@xstyled/system").Theme>)) | undefined;
|
|
434
434
|
spaceX?: import("@xstyled/system").SystemProp<import("@xstyled/system").Space<import("@xstyled/system").Theme>, import("@xstyled/system").Theme> | undefined;
|
|
435
435
|
spaceY?: import("@xstyled/system").SystemProp<import("@xstyled/system").Space<import("@xstyled/system").Theme>, import("@xstyled/system").Theme> | undefined;
|
|
436
436
|
spaceXReverse?: import("@xstyled/system").SystemProp<true, import("@xstyled/system").Theme> | undefined;
|
|
@@ -452,10 +452,10 @@ export declare const useSplitInherithedProps: ({ propsWithDefault, focusableNode
|
|
|
452
452
|
overflowY?: import("@xstyled/system").SystemProp<import("csstype").Property.OverflowY, import("@xstyled/system").Theme> | undefined;
|
|
453
453
|
position?: import("@xstyled/system").SystemProp<import("csstype").Property.Position, import("@xstyled/system").Theme> | undefined;
|
|
454
454
|
zIndex?: import("@xstyled/system").SystemProp<string | number | true | symbol | {} | (string & {}) | (number & {}), import("@xstyled/system").Theme> | undefined;
|
|
455
|
-
top?: import("@xstyled/system").SystemProp<string | number | true | symbol | {} | (string & {}), import("@xstyled/system").Theme> | undefined;
|
|
456
|
-
right?: import("@xstyled/system").SystemProp<string | number | true | symbol | {} | (string & {}), import("@xstyled/system").Theme> | undefined;
|
|
457
|
-
bottom?: import("@xstyled/system").SystemProp<string | number | true | symbol | {} | (string & {}), import("@xstyled/system").Theme> | undefined;
|
|
458
|
-
left?: import("@xstyled/system").SystemProp<string | number | true | symbol | {} | (string & {}), import("@xstyled/system").Theme> | undefined;
|
|
455
|
+
top?: import("@xstyled/system").SystemProp<string | number | true | symbol | {} | (string & {}) | (number & {}), import("@xstyled/system").Theme> | undefined;
|
|
456
|
+
right?: import("@xstyled/system").SystemProp<string | number | true | symbol | {} | (string & {}) | (number & {}), import("@xstyled/system").Theme> | undefined;
|
|
457
|
+
bottom?: import("@xstyled/system").SystemProp<string | number | true | symbol | {} | (string & {}) | (number & {}), import("@xstyled/system").Theme> | undefined;
|
|
458
|
+
left?: import("@xstyled/system").SystemProp<string | number | true | symbol | {} | (string & {}) | (number & {}), import("@xstyled/system").Theme> | undefined;
|
|
459
459
|
visibility?: import("@xstyled/system").SystemProp<import("csstype").Property.Visibility, import("@xstyled/system").Theme> | undefined;
|
|
460
460
|
overscrollBehavior?: import("@xstyled/system").SystemProp<import("csstype").Property.OverscrollBehavior, import("@xstyled/system").Theme> | undefined;
|
|
461
461
|
objectFit?: import("@xstyled/system").SystemProp<import("csstype").Property.ObjectFit, import("@xstyled/system").Theme> | undefined;
|
|
@@ -483,7 +483,7 @@ export declare const useSplitInherithedProps: ({ propsWithDefault, focusableNode
|
|
|
483
483
|
borderRadius?: string | undefined;
|
|
484
484
|
backgroundColor?: (keyof import("@elliemae/ds-system").DummyColorTheme | `neutral-100-${string}` | `neutral-200-${string}` | `neutral-300-${string}` | `neutral-400-${string}` | `neutral-500-${string}` | `neutral-600-${string}` | `neutral-700-${string}` | `neutral-800-${string}` | `neutral-000-${string}` | `neutral-050-${string}` | `neutral-080-${string}` | `brand-100-${string}` | `brand-200-${string}` | `brand-300-${string}` | `brand-400-${string}` | `brand-500-${string}` | `brand-600-${string}` | `brand-700-${string}` | `brand-800-${string}` | `success-300-${string}` | `success-900-${string}` | `warning-400-${string}` | `warning-600-${string}` | `warning-900-${string}` | `danger-200-${string}` | `danger-900-${string}` | `#${string}` | `rgba(${string})` | `rgb(${string})`) | undefined;
|
|
485
485
|
bg?: (keyof import("@elliemae/ds-system").DummyColorTheme | `neutral-100-${string}` | `neutral-200-${string}` | `neutral-300-${string}` | `neutral-400-${string}` | `neutral-500-${string}` | `neutral-600-${string}` | `neutral-700-${string}` | `neutral-800-${string}` | `neutral-000-${string}` | `neutral-050-${string}` | `neutral-080-${string}` | `brand-100-${string}` | `brand-200-${string}` | `brand-300-${string}` | `brand-400-${string}` | `brand-500-${string}` | `brand-600-${string}` | `brand-700-${string}` | `brand-800-${string}` | `success-300-${string}` | `success-900-${string}` | `warning-400-${string}` | `warning-600-${string}` | `warning-900-${string}` | `danger-200-${string}` | `danger-900-${string}` | `#${string}` | `rgba(${string})` | `rgb(${string})`) | undefined;
|
|
486
|
-
fontWeight?: import("@xstyled/system").SystemProp<{} | (string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" |
|
|
486
|
+
fontWeight?: import("@xstyled/system").SystemProp<{} | (string & {}) | "inherit" | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "bold" | "normal" | "bolder" | "lighter" | "thin" | "light" | "regular" | "semibold", import("@xstyled/system").Theme> | undefined;
|
|
487
487
|
textAlign?: import("@xstyled/system").SystemProp<import("csstype").Property.TextAlign, import("@xstyled/system").Theme> | undefined;
|
|
488
488
|
};
|
|
489
489
|
};
|
|
@@ -17,3 +17,12 @@ export declare const MENU_BUTTON_SLOTS: {
|
|
|
17
17
|
export declare const MENU_BUTTON_DATA_TESTID: {
|
|
18
18
|
readonly ROOT: "ds-menubutton-root";
|
|
19
19
|
};
|
|
20
|
+
export declare const MENU_BUTTON_WITH_PARTS_SLOTS: {
|
|
21
|
+
GROUP_LABEL_WRAPPER: "group-label-wrapper";
|
|
22
|
+
LABEL_WITH_LEFT_DEC_WRAPPER: "group-label-wrapper";
|
|
23
|
+
FLOATING_WRAPPER: "floating-wrapper";
|
|
24
|
+
LIST_WRAPPER: "list-wrapper";
|
|
25
|
+
FLYOUT_MENU_ROOT: "root";
|
|
26
|
+
MENU_ITEM_RENDERER_FACTORY_ROOT: "root";
|
|
27
|
+
ROOT: "root";
|
|
28
|
+
};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { DSMenuButton, DSMenuButtonWithSchema } from './DSMenuButton.js';
|
|
2
2
|
export { type DSMenuButtonT, DSMenuButtonPropTypes } from './react-desc-prop-types.js';
|
|
3
|
-
export { MENU_BUTTON_SLOTS, MENU_BUTTON_DATA_TESTID, MENU_ITEMS_TYPES } from './constants/index.js';
|
|
3
|
+
export { MENU_BUTTON_SLOTS, DSMenuButtonName, MENU_BUTTON_DATA_TESTID, MENU_ITEMS_TYPES, MENU_BUTTON_WITH_PARTS_SLOTS, } from './constants/index.js';
|
|
4
4
|
export { isFocusableNode } from './utils/nodesTypeguardsAndGetters.js';
|
|
5
5
|
export { useOptionsArrayToDsTree } from './utils/useOptionsArrayToDsTree.js';
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
export declare const DSFlyoutMenuName = "DSFlyoutmenu";
|
|
2
2
|
export declare const EXAMPLE_CONSTANTS: {};
|
|
3
3
|
export declare const FLYOUT_MENU_SLOTS: {
|
|
4
|
+
readonly FLOATING_WRAPPER: "floating-wrapper";
|
|
4
5
|
readonly ROOT: "root";
|
|
5
6
|
readonly LIST_WRAPPER: "list-wrapper";
|
|
6
7
|
};
|
|
7
8
|
export declare const FLYOUT_MENU_DATA_TESTID: {
|
|
9
|
+
readonly FLOATING_WRAPPER: "ds-flyoutmenu-floating-wrapper";
|
|
8
10
|
readonly ROOT: "ds-flyoutmenu-root";
|
|
9
11
|
readonly LIST_WRAPPER: "ds-flyoutmenu-list-wrapper";
|
|
10
12
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-button",
|
|
3
|
-
"version": "3.60.0-next.
|
|
3
|
+
"version": "3.60.0-next.15",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Button",
|
|
6
6
|
"files": [
|
|
@@ -36,28 +36,27 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-button-v2": "3.60.0-next.15",
|
|
40
|
+
"@elliemae/ds-grid": "3.60.0-next.15",
|
|
41
|
+
"@elliemae/ds-floating-context": "3.60.0-next.15",
|
|
42
|
+
"@elliemae/ds-hooks-on-blur-out": "3.60.0-next.15",
|
|
43
|
+
"@elliemae/ds-icons": "3.60.0-next.15",
|
|
44
|
+
"@elliemae/ds-system": "3.60.0-next.15",
|
|
45
|
+
"@elliemae/ds-props-helpers": "3.60.0-next.15",
|
|
46
|
+
"@elliemae/ds-menu-items-commons": "3.60.0-next.15",
|
|
47
|
+
"@elliemae/ds-tree-model": "3.60.0-next.15"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@elliemae/pui-cli": "9.0.0-next.65",
|
|
51
50
|
"@elliemae/pui-theme": "~2.13.0",
|
|
52
|
-
"jest": "
|
|
51
|
+
"jest": "^30.0.0",
|
|
53
52
|
"styled-components": "~5.3.9",
|
|
54
|
-
"@elliemae/ds-monorepo-devops": "3.60.0-next.
|
|
55
|
-
"@elliemae/ds-typescript-helpers": "3.60.0-next.
|
|
53
|
+
"@elliemae/ds-monorepo-devops": "3.60.0-next.15",
|
|
54
|
+
"@elliemae/ds-typescript-helpers": "3.60.0-next.15"
|
|
56
55
|
},
|
|
57
56
|
"peerDependencies": {
|
|
58
57
|
"@testing-library/jest-dom": "^6.6.3",
|
|
59
58
|
"@testing-library/react": "^16.0.1",
|
|
60
|
-
"@testing-library/user-event": "~14.
|
|
59
|
+
"@testing-library/user-event": "~14.6.1",
|
|
61
60
|
"react": "^18.3.1",
|
|
62
61
|
"react-dom": "^18.3.1",
|
|
63
62
|
"styled-components": "~5.3.9"
|
|
@@ -68,7 +67,7 @@
|
|
|
68
67
|
},
|
|
69
68
|
"scripts": {
|
|
70
69
|
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|
|
71
|
-
"test": "
|
|
70
|
+
"test": "ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
|
|
72
71
|
"lint": "node ../../../scripts/lint.mjs --fix",
|
|
73
72
|
"lint:strict": "node ../../../scripts/lint-strict.mjs",
|
|
74
73
|
"dts": "node ../../../scripts/dts.mjs",
|