@elliemae/ds-menu-items 3.21.2-rc.9 → 3.22.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/styled.js +6 -0
- package/dist/cjs/components/styled.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/components/styled.js +6 -0
- package/dist/esm/components/styled.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +2 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/react-desc-prop-types.d.ts +1 -0
- package/package.json +7 -7
|
@@ -108,6 +108,12 @@ const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
|
|
|
108
108
|
|
|
109
109
|
background-color: ${(props) => props.isActive ? props.theme.colors.brand[200] : "white"};
|
|
110
110
|
|
|
111
|
+
// focus style for standalone version
|
|
112
|
+
&:focus {
|
|
113
|
+
${borderOutside()}
|
|
114
|
+
outline: none;
|
|
115
|
+
background-color: ${(props) => props.theme.colors.brand[200]};
|
|
116
|
+
}
|
|
111
117
|
&:hover {
|
|
112
118
|
background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};
|
|
113
119
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuItemName, DSMenuItemSlots } from '../exported-related/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\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n isSelected?: boolean;\n isActive?: boolean;\n disabled?: boolean;\n}\n\nexport const StyledSkeletonWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n min-height: 32px;\n padding-left: 16px;\n padding-right: 16px;\n display: grid;\n align-items: center;\n list-style: none;\n position: relative;\n background-color: 'white';\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledGlobalMenuItemWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n cursor: pointer;\n min-height: 32px;\n\n padding-left: 16px;\n padding-right: 16px;\n display: grid;\n align-items: center;\n list-style: none;\n position: relative;\n\n ${(props) => {\n if (props.disabled) return disabledOption();\n if (props.isActive) return borderOutside();\n return '';\n }};\n\n background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n &:hover {\n background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n }\n ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n padding: 8px 0;\n font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})`\n padding: 8px 0;\n font-size: 11px;\n font-style: italic;\n color: brand-800;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`\n width: 25px;\n height: 24px;\n display: grid;\n grid-template-columns: min-content auto;\n place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled('div', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON,\n})<{ disabled: boolean }>`\n position: relative;\n width: 100%;\n height: 100%;\n display: grid;\n place-items: center;\n background: transparent;\n :active {\n ${(props) => (props.disabled ? '' : borderOutside())}\n }\n`;\n\nexport const StyledItemContent = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`\n display: flex;\n width: 100%;\n margin: 8px 0px;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`\n border: 0;\n border-top: 1px solid #697489;\n margin: 4px 0px;\n padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER,\n})`\n list-style: none;\n padding: 0px 16px;\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledGroupLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n font-size: 13px;\n color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER,\n})`\n list-style: none;\n padding: 0px 16px;\n height: 24px;\n display: flex;\n align-items: center;\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR,\n})`\n width: 1px;\n height: 18px;\n background-color: neutral-300;\n`;\n\nexport const StyledContentWrapper = styled(Grid, {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAChD,qBAAqB;AACrB,8BAAgD;AAEhD,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAM7D,MAAM,iBAAiB,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc3C,MAAM,4BAAwB,yBAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUG;AAAA;AAGG,MAAM,kCAA8B,yBAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,UAAU;AACX,MAAI,MAAM;AAAU,WAAO,eAAe;AAC1C,MAAI,MAAM;AAAU,WAAO,cAAc;AACzC,SAAO;AACT;AAAA;AAAA,sBAEoB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuItemName, DSMenuItemSlots } from '../exported-related/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\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n isSelected?: boolean;\n isActive?: boolean;\n disabled?: boolean;\n}\n\nexport const StyledSkeletonWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n min-height: 32px;\n padding-left: 16px;\n padding-right: 16px;\n display: grid;\n align-items: center;\n list-style: none;\n position: relative;\n background-color: 'white';\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledGlobalMenuItemWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n cursor: pointer;\n min-height: 32px;\n\n padding-left: 16px;\n padding-right: 16px;\n display: grid;\n align-items: center;\n list-style: none;\n position: relative;\n\n ${(props) => {\n if (props.disabled) return disabledOption();\n if (props.isActive) return borderOutside();\n return '';\n }};\n\n background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n // focus style for standalone version\n &:focus {\n ${borderOutside()}\n outline: none;\n background-color: ${(props) => props.theme.colors.brand[200]};\n }\n &:hover {\n background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n }\n ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n padding: 8px 0;\n font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})`\n padding: 8px 0;\n font-size: 11px;\n font-style: italic;\n color: brand-800;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`\n width: 25px;\n height: 24px;\n display: grid;\n grid-template-columns: min-content auto;\n place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled('div', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON,\n})<{ disabled: boolean }>`\n position: relative;\n width: 100%;\n height: 100%;\n display: grid;\n place-items: center;\n background: transparent;\n :active {\n ${(props) => (props.disabled ? '' : borderOutside())}\n }\n`;\n\nexport const StyledItemContent = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`\n display: flex;\n width: 100%;\n margin: 8px 0px;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`\n border: 0;\n border-top: 1px solid #697489;\n margin: 4px 0px;\n padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER,\n})`\n list-style: none;\n padding: 0px 16px;\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledGroupLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n font-size: 13px;\n color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER,\n})`\n list-style: none;\n padding: 0px 16px;\n height: 24px;\n display: flex;\n align-items: center;\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR,\n})`\n width: 1px;\n height: 18px;\n background-color: neutral-300;\n`;\n\nexport const StyledContentWrapper = styled(Grid, {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n export interface CommonProps<T = Record<string, unknown>> {\n dsId: string;\n innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n wrapperStyles?: Record<string, unknown>;\n render?: React.ComponentType<T>;\n original?: Record<string, unknown>;\n }\n\n export interface ActionProps extends CommonProps<ActionProps> {\n label?: string;\n secondaryLabel?: string;\n value?: unknown;\n disabled?: boolean;\n isActive?: boolean;\n onClick?: React.MouseEventHandler;\n optionsShouldHavePadding?: boolean;\n }\n\n export interface MultiProps extends CommonProps<MultiProps> {\n label?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSelected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseDown?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n dataTestid?: string;\n tabIndex?: WCAGTabIndex;\n }\n\n export interface SingleProps extends CommonProps<SingleProps> {\n label?: string;\n secondaryLabel?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSelected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseDown?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n dataTestid?: string;\n tabIndex?: number;\n }\n\n export interface SubmenuProps extends CommonProps<SubmenuProps> {\n label?: string;\n secondaryLabel?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSubmenuOpened?: boolean;\n onSubmenuOpen?: React.MouseEventHandler;\n onSubmenuClose?: React.MouseEventHandler;\n rightAddon?: 'ellipsis' | 'chevron';\n optionsShouldHavePadding?: boolean;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;\n dropdownProps?: {\n options: any[];\n onSubmenuToggle?: (\n nextOpenedSubmenus: Record<string, boolean>,\n submenu: any,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n openedSubmenus?: Record<string, boolean>;\n selectedOptions?: Record<string, boolean>;\n onKeyDown?: React.KeyboardEventHandler;\n onOptionClick?: (\n nextSelectedOptions: Record<string, boolean>,\n clickedOption: any,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n onClickOutside?: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n minWidth?: SizingProps['minWidth'];\n maxHeight?: SizingProps['maxHeight'];\n [key: string]: unknown;\n };\n }\n\n export interface SectionProps extends CommonProps<SectionProps> {\n label?: string;\n }\n\n export type SeparatorProps = CommonProps<SeparatorProps>;\n\n export interface SingleWithSubmenuProps extends Omit<SingleProps, 'render'>, Omit<SubmenuProps, 'render'> {\n render?: React.ComponentType<SingleWithSubmenuProps>;\n }\n export type AllTypeItems = ActionProps | MultiProps | SingleProps | SubmenuProps | SectionProps | SeparatorProps;\n}\n\nconst noop = () => null;\n\nexport const defaultCommonProps: Partial<Omit<DSMenuItemT.CommonProps, 'render'>> = {\n innerRef: noop,\n wrapperStyles: {},\n};\n\nexport const defaultActionProps: Partial<DSMenuItemT.ActionProps> = {\n ...defaultCommonProps,\n label: '',\n value: undefined,\n disabled: false,\n isActive: false,\n onClick: noop,\n optionsShouldHavePadding: false,\n};\n\nexport const defaultMultiProps: Partial<DSMenuItemT.MultiProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSelected: false,\n onClick: noop,\n onMouseDown: noop,\n onMouseEnter: noop,\n onMouseLeave: noop,\n tabIndex: 0,\n};\n\nexport const defaultSingleProps: Partial<DSMenuItemT.SingleProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSelected: false,\n onClick: noop,\n onMouseDown: noop,\n onMouseEnter: noop,\n onMouseLeave: noop,\n dataTestid: 'ds-menu-item',\n tabIndex: 0,\n};\n\nexport const defaultSubmenuProps: Partial<DSMenuItemT.SubmenuProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSubmenuOpened: false,\n onSubmenuOpen: noop,\n rightAddon: 'chevron',\n optionsShouldHavePadding: false,\n Dropdown: noop,\n dropdownProps: {\n options: [],\n onSubmenuToggle: noop,\n openedSubmenus: {},\n selectedOptions: {},\n onKeyDown: noop,\n onOptionClick: noop,\n onClickOutside: noop,\n minWidth: 'auto',\n maxHeight: 'auto',\n },\n};\n\nexport const defaultSectionProps: Partial<DSMenuItemT.SectionProps> = {\n ...defaultCommonProps,\n label: '',\n};\n\nexport const defaultSeparatorProps: Partial<DSMenuItemT.SeparatorProps> = {\n ...defaultCommonProps,\n};\n\nexport const defaultSingleWithSubmenuProps: Partial<Omit<DSMenuItemT.SingleWithSubmenuProps, 'render'>> = {\n ...defaultSingleProps,\n ...defaultSubmenuProps,\n};\n\nexport const itemProps = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n dsId: PropTypes.string,\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n wrapperStyles: PropTypes.object,\n render: PropTypes.func,\n} as WeakValidationMap<unknown>;\n\nexport const MenuItemPropTypes = {\n dsId: PropTypes.string.description('The unique ID for the menu item.').isRequired,\n innerRef: PropTypes.oneOfType([\n PropTypes.shape({\n current: PropTypes.instanceOf(HTMLLIElement),\n }),\n PropTypes.func.description(\n ' A ref object or callback function to access the underlying DOM element (HTMLLIElement) of the menu item.',\n ),\n ]),\n render: PropTypes.func.description('A custom render function to render the content of the menu item.'),\n} as WeakValidationMap<unknown>;\n\nexport const SingleMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const MultiMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const ActionMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n value: PropTypes.any.description('The value of the menu item.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n} as WeakValidationMap<unknown>;\n\nexport const SectionMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n} as WeakValidationMap<unknown>;\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;AAAA;AAAA;ACAA,YAAuB;ADKvB,8BAAuE;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n export interface CommonProps<T = Record<string, unknown>> {\n dsId: string;\n innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n wrapperStyles?: Record<string, unknown>;\n render?: React.ComponentType<T>;\n original?: Record<string, unknown>;\n }\n\n export interface ActionProps extends CommonProps<ActionProps> {\n label?: string;\n secondaryLabel?: string;\n value?: unknown;\n disabled?: boolean;\n isActive?: boolean;\n onClick?: React.MouseEventHandler;\n optionsShouldHavePadding?: boolean;\n tabIndex: WCAGTabIndex;\n }\n\n export interface MultiProps extends CommonProps<MultiProps> {\n label?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSelected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseDown?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n dataTestid?: string;\n tabIndex?: WCAGTabIndex;\n }\n\n export interface SingleProps extends CommonProps<SingleProps> {\n label?: string;\n secondaryLabel?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSelected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseDown?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n dataTestid?: string;\n tabIndex?: number;\n }\n\n export interface SubmenuProps extends CommonProps<SubmenuProps> {\n label?: string;\n secondaryLabel?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSubmenuOpened?: boolean;\n onSubmenuOpen?: React.MouseEventHandler;\n onSubmenuClose?: React.MouseEventHandler;\n rightAddon?: 'ellipsis' | 'chevron';\n optionsShouldHavePadding?: boolean;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;\n dropdownProps?: {\n options: any[];\n onSubmenuToggle?: (\n nextOpenedSubmenus: Record<string, boolean>,\n submenu: any,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n openedSubmenus?: Record<string, boolean>;\n selectedOptions?: Record<string, boolean>;\n onKeyDown?: React.KeyboardEventHandler;\n onOptionClick?: (\n nextSelectedOptions: Record<string, boolean>,\n clickedOption: any,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n onClickOutside?: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n minWidth?: SizingProps['minWidth'];\n maxHeight?: SizingProps['maxHeight'];\n [key: string]: unknown;\n };\n }\n\n export interface SectionProps extends CommonProps<SectionProps> {\n label?: string;\n }\n\n export type SeparatorProps = CommonProps<SeparatorProps>;\n\n export interface SingleWithSubmenuProps extends Omit<SingleProps, 'render'>, Omit<SubmenuProps, 'render'> {\n render?: React.ComponentType<SingleWithSubmenuProps>;\n }\n export type AllTypeItems = ActionProps | MultiProps | SingleProps | SubmenuProps | SectionProps | SeparatorProps;\n}\n\nconst noop = () => null;\n\nexport const defaultCommonProps: Partial<Omit<DSMenuItemT.CommonProps, 'render'>> = {\n innerRef: noop,\n wrapperStyles: {},\n};\n\nexport const defaultActionProps: Partial<DSMenuItemT.ActionProps> = {\n ...defaultCommonProps,\n label: '',\n value: undefined,\n disabled: false,\n isActive: false,\n onClick: noop,\n optionsShouldHavePadding: false,\n tabIndex: 0,\n};\n\nexport const defaultMultiProps: Partial<DSMenuItemT.MultiProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSelected: false,\n onClick: noop,\n onMouseDown: noop,\n onMouseEnter: noop,\n onMouseLeave: noop,\n tabIndex: 0,\n};\n\nexport const defaultSingleProps: Partial<DSMenuItemT.SingleProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSelected: false,\n onClick: noop,\n onMouseDown: noop,\n onMouseEnter: noop,\n onMouseLeave: noop,\n dataTestid: 'ds-menu-item',\n tabIndex: 0,\n};\n\nexport const defaultSubmenuProps: Partial<DSMenuItemT.SubmenuProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSubmenuOpened: false,\n onSubmenuOpen: noop,\n rightAddon: 'chevron',\n optionsShouldHavePadding: false,\n Dropdown: noop,\n dropdownProps: {\n options: [],\n onSubmenuToggle: noop,\n openedSubmenus: {},\n selectedOptions: {},\n onKeyDown: noop,\n onOptionClick: noop,\n onClickOutside: noop,\n minWidth: 'auto',\n maxHeight: 'auto',\n },\n};\n\nexport const defaultSectionProps: Partial<DSMenuItemT.SectionProps> = {\n ...defaultCommonProps,\n label: '',\n};\n\nexport const defaultSeparatorProps: Partial<DSMenuItemT.SeparatorProps> = {\n ...defaultCommonProps,\n};\n\nexport const defaultSingleWithSubmenuProps: Partial<Omit<DSMenuItemT.SingleWithSubmenuProps, 'render'>> = {\n ...defaultSingleProps,\n ...defaultSubmenuProps,\n};\n\nexport const itemProps = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n dsId: PropTypes.string,\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n wrapperStyles: PropTypes.object,\n render: PropTypes.func,\n} as WeakValidationMap<unknown>;\n\nexport const MenuItemPropTypes = {\n dsId: PropTypes.string.description('The unique ID for the menu item.').isRequired,\n innerRef: PropTypes.oneOfType([\n PropTypes.shape({\n current: PropTypes.instanceOf(HTMLLIElement),\n }),\n PropTypes.func.description(\n ' A ref object or callback function to access the underlying DOM element (HTMLLIElement) of the menu item.',\n ),\n ]),\n render: PropTypes.func.description('A custom render function to render the content of the menu item.'),\n} as WeakValidationMap<unknown>;\n\nexport const SingleMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const MultiMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const ActionMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n value: PropTypes.any.description('The value of the menu item.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n} as WeakValidationMap<unknown>;\n\nexport const SectionMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -63,6 +63,12 @@ const StyledGlobalMenuItemWrapper = styled("li", {
|
|
|
63
63
|
|
|
64
64
|
background-color: ${(props) => props.isActive ? props.theme.colors.brand[200] : "white"};
|
|
65
65
|
|
|
66
|
+
// focus style for standalone version
|
|
67
|
+
&:focus {
|
|
68
|
+
${borderOutside()}
|
|
69
|
+
outline: none;
|
|
70
|
+
background-color: ${(props) => props.theme.colors.brand[200]};
|
|
71
|
+
}
|
|
66
72
|
&:hover {
|
|
67
73
|
background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};
|
|
68
74
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuItemName, DSMenuItemSlots } from '../exported-related/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\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n isSelected?: boolean;\n isActive?: boolean;\n disabled?: boolean;\n}\n\nexport const StyledSkeletonWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n min-height: 32px;\n padding-left: 16px;\n padding-right: 16px;\n display: grid;\n align-items: center;\n list-style: none;\n position: relative;\n background-color: 'white';\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledGlobalMenuItemWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n cursor: pointer;\n min-height: 32px;\n\n padding-left: 16px;\n padding-right: 16px;\n display: grid;\n align-items: center;\n list-style: none;\n position: relative;\n\n ${(props) => {\n if (props.disabled) return disabledOption();\n if (props.isActive) return borderOutside();\n return '';\n }};\n\n background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n &:hover {\n background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n }\n ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n padding: 8px 0;\n font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})`\n padding: 8px 0;\n font-size: 11px;\n font-style: italic;\n color: brand-800;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`\n width: 25px;\n height: 24px;\n display: grid;\n grid-template-columns: min-content auto;\n place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled('div', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON,\n})<{ disabled: boolean }>`\n position: relative;\n width: 100%;\n height: 100%;\n display: grid;\n place-items: center;\n background: transparent;\n :active {\n ${(props) => (props.disabled ? '' : borderOutside())}\n }\n`;\n\nexport const StyledItemContent = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`\n display: flex;\n width: 100%;\n margin: 8px 0px;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`\n border: 0;\n border-top: 1px solid #697489;\n margin: 4px 0px;\n padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER,\n})`\n list-style: none;\n padding: 0px 16px;\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledGroupLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n font-size: 13px;\n color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER,\n})`\n list-style: none;\n padding: 0px 16px;\n height: 24px;\n display: flex;\n align-items: center;\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR,\n})`\n width: 1px;\n height: 18px;\n background-color: neutral-300;\n`;\n\nexport const StyledContentWrapper = styled(Grid, {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER,\n})``;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,YAAY;AACrB,SAAS,gBAAgB,uBAAuB;AAEhD,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAM7D,MAAM,iBAAiB,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc3C,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUG;AAAA;AAGG,MAAM,8BAA8B,OAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,UAAU;AACX,MAAI,MAAM;AAAU,WAAO,eAAe;AAC1C,MAAI,MAAM;AAAU,WAAO,cAAc;AACzC,SAAO;AACT;AAAA;AAAA,sBAEoB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuItemName, DSMenuItemSlots } from '../exported-related/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\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n isSelected?: boolean;\n isActive?: boolean;\n disabled?: boolean;\n}\n\nexport const StyledSkeletonWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n min-height: 32px;\n padding-left: 16px;\n padding-right: 16px;\n display: grid;\n align-items: center;\n list-style: none;\n position: relative;\n background-color: 'white';\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledGlobalMenuItemWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n cursor: pointer;\n min-height: 32px;\n\n padding-left: 16px;\n padding-right: 16px;\n display: grid;\n align-items: center;\n list-style: none;\n position: relative;\n\n ${(props) => {\n if (props.disabled) return disabledOption();\n if (props.isActive) return borderOutside();\n return '';\n }};\n\n background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n // focus style for standalone version\n &:focus {\n ${borderOutside()}\n outline: none;\n background-color: ${(props) => props.theme.colors.brand[200]};\n }\n &:hover {\n background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n }\n ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n padding: 8px 0;\n font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})`\n padding: 8px 0;\n font-size: 11px;\n font-style: italic;\n color: brand-800;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`\n width: 25px;\n height: 24px;\n display: grid;\n grid-template-columns: min-content auto;\n place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled('div', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON,\n})<{ disabled: boolean }>`\n position: relative;\n width: 100%;\n height: 100%;\n display: grid;\n place-items: center;\n background: transparent;\n :active {\n ${(props) => (props.disabled ? '' : borderOutside())}\n }\n`;\n\nexport const StyledItemContent = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`\n display: flex;\n width: 100%;\n margin: 8px 0px;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`\n border: 0;\n border-top: 1px solid #697489;\n margin: 4px 0px;\n padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER,\n})`\n list-style: none;\n padding: 0px 16px;\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledGroupLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n font-size: 13px;\n color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled('li', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER,\n})`\n list-style: none;\n padding: 0px 16px;\n height: 24px;\n display: flex;\n align-items: center;\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR,\n})`\n width: 1px;\n height: 18px;\n background-color: neutral-300;\n`;\n\nexport const StyledContentWrapper = styled(Grid, {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER,\n})``;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n export interface CommonProps<T = Record<string, unknown>> {\n dsId: string;\n innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n wrapperStyles?: Record<string, unknown>;\n render?: React.ComponentType<T>;\n original?: Record<string, unknown>;\n }\n\n export interface ActionProps extends CommonProps<ActionProps> {\n label?: string;\n secondaryLabel?: string;\n value?: unknown;\n disabled?: boolean;\n isActive?: boolean;\n onClick?: React.MouseEventHandler;\n optionsShouldHavePadding?: boolean;\n }\n\n export interface MultiProps extends CommonProps<MultiProps> {\n label?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSelected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseDown?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n dataTestid?: string;\n tabIndex?: WCAGTabIndex;\n }\n\n export interface SingleProps extends CommonProps<SingleProps> {\n label?: string;\n secondaryLabel?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSelected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseDown?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n dataTestid?: string;\n tabIndex?: number;\n }\n\n export interface SubmenuProps extends CommonProps<SubmenuProps> {\n label?: string;\n secondaryLabel?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSubmenuOpened?: boolean;\n onSubmenuOpen?: React.MouseEventHandler;\n onSubmenuClose?: React.MouseEventHandler;\n rightAddon?: 'ellipsis' | 'chevron';\n optionsShouldHavePadding?: boolean;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;\n dropdownProps?: {\n options: any[];\n onSubmenuToggle?: (\n nextOpenedSubmenus: Record<string, boolean>,\n submenu: any,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n openedSubmenus?: Record<string, boolean>;\n selectedOptions?: Record<string, boolean>;\n onKeyDown?: React.KeyboardEventHandler;\n onOptionClick?: (\n nextSelectedOptions: Record<string, boolean>,\n clickedOption: any,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n onClickOutside?: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n minWidth?: SizingProps['minWidth'];\n maxHeight?: SizingProps['maxHeight'];\n [key: string]: unknown;\n };\n }\n\n export interface SectionProps extends CommonProps<SectionProps> {\n label?: string;\n }\n\n export type SeparatorProps = CommonProps<SeparatorProps>;\n\n export interface SingleWithSubmenuProps extends Omit<SingleProps, 'render'>, Omit<SubmenuProps, 'render'> {\n render?: React.ComponentType<SingleWithSubmenuProps>;\n }\n export type AllTypeItems = ActionProps | MultiProps | SingleProps | SubmenuProps | SectionProps | SeparatorProps;\n}\n\nconst noop = () => null;\n\nexport const defaultCommonProps: Partial<Omit<DSMenuItemT.CommonProps, 'render'>> = {\n innerRef: noop,\n wrapperStyles: {},\n};\n\nexport const defaultActionProps: Partial<DSMenuItemT.ActionProps> = {\n ...defaultCommonProps,\n label: '',\n value: undefined,\n disabled: false,\n isActive: false,\n onClick: noop,\n optionsShouldHavePadding: false,\n};\n\nexport const defaultMultiProps: Partial<DSMenuItemT.MultiProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSelected: false,\n onClick: noop,\n onMouseDown: noop,\n onMouseEnter: noop,\n onMouseLeave: noop,\n tabIndex: 0,\n};\n\nexport const defaultSingleProps: Partial<DSMenuItemT.SingleProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSelected: false,\n onClick: noop,\n onMouseDown: noop,\n onMouseEnter: noop,\n onMouseLeave: noop,\n dataTestid: 'ds-menu-item',\n tabIndex: 0,\n};\n\nexport const defaultSubmenuProps: Partial<DSMenuItemT.SubmenuProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSubmenuOpened: false,\n onSubmenuOpen: noop,\n rightAddon: 'chevron',\n optionsShouldHavePadding: false,\n Dropdown: noop,\n dropdownProps: {\n options: [],\n onSubmenuToggle: noop,\n openedSubmenus: {},\n selectedOptions: {},\n onKeyDown: noop,\n onOptionClick: noop,\n onClickOutside: noop,\n minWidth: 'auto',\n maxHeight: 'auto',\n },\n};\n\nexport const defaultSectionProps: Partial<DSMenuItemT.SectionProps> = {\n ...defaultCommonProps,\n label: '',\n};\n\nexport const defaultSeparatorProps: Partial<DSMenuItemT.SeparatorProps> = {\n ...defaultCommonProps,\n};\n\nexport const defaultSingleWithSubmenuProps: Partial<Omit<DSMenuItemT.SingleWithSubmenuProps, 'render'>> = {\n ...defaultSingleProps,\n ...defaultSubmenuProps,\n};\n\nexport const itemProps = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n dsId: PropTypes.string,\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n wrapperStyles: PropTypes.object,\n render: PropTypes.func,\n} as WeakValidationMap<unknown>;\n\nexport const MenuItemPropTypes = {\n dsId: PropTypes.string.description('The unique ID for the menu item.').isRequired,\n innerRef: PropTypes.oneOfType([\n PropTypes.shape({\n current: PropTypes.instanceOf(HTMLLIElement),\n }),\n PropTypes.func.description(\n ' A ref object or callback function to access the underlying DOM element (HTMLLIElement) of the menu item.',\n ),\n ]),\n render: PropTypes.func.description('A custom render function to render the content of the menu item.'),\n} as WeakValidationMap<unknown>;\n\nexport const SingleMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const MultiMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const ActionMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n value: PropTypes.any.description('The value of the menu item.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n} as WeakValidationMap<unknown>;\n\nexport const SectionMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,WAAW,2BAA2B,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n export interface CommonProps<T = Record<string, unknown>> {\n dsId: string;\n innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n wrapperStyles?: Record<string, unknown>;\n render?: React.ComponentType<T>;\n original?: Record<string, unknown>;\n }\n\n export interface ActionProps extends CommonProps<ActionProps> {\n label?: string;\n secondaryLabel?: string;\n value?: unknown;\n disabled?: boolean;\n isActive?: boolean;\n onClick?: React.MouseEventHandler;\n optionsShouldHavePadding?: boolean;\n tabIndex: WCAGTabIndex;\n }\n\n export interface MultiProps extends CommonProps<MultiProps> {\n label?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSelected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseDown?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n dataTestid?: string;\n tabIndex?: WCAGTabIndex;\n }\n\n export interface SingleProps extends CommonProps<SingleProps> {\n label?: string;\n secondaryLabel?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSelected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseDown?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n dataTestid?: string;\n tabIndex?: number;\n }\n\n export interface SubmenuProps extends CommonProps<SubmenuProps> {\n label?: string;\n secondaryLabel?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSubmenuOpened?: boolean;\n onSubmenuOpen?: React.MouseEventHandler;\n onSubmenuClose?: React.MouseEventHandler;\n rightAddon?: 'ellipsis' | 'chevron';\n optionsShouldHavePadding?: boolean;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;\n dropdownProps?: {\n options: any[];\n onSubmenuToggle?: (\n nextOpenedSubmenus: Record<string, boolean>,\n submenu: any,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n openedSubmenus?: Record<string, boolean>;\n selectedOptions?: Record<string, boolean>;\n onKeyDown?: React.KeyboardEventHandler;\n onOptionClick?: (\n nextSelectedOptions: Record<string, boolean>,\n clickedOption: any,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n onClickOutside?: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n minWidth?: SizingProps['minWidth'];\n maxHeight?: SizingProps['maxHeight'];\n [key: string]: unknown;\n };\n }\n\n export interface SectionProps extends CommonProps<SectionProps> {\n label?: string;\n }\n\n export type SeparatorProps = CommonProps<SeparatorProps>;\n\n export interface SingleWithSubmenuProps extends Omit<SingleProps, 'render'>, Omit<SubmenuProps, 'render'> {\n render?: React.ComponentType<SingleWithSubmenuProps>;\n }\n export type AllTypeItems = ActionProps | MultiProps | SingleProps | SubmenuProps | SectionProps | SeparatorProps;\n}\n\nconst noop = () => null;\n\nexport const defaultCommonProps: Partial<Omit<DSMenuItemT.CommonProps, 'render'>> = {\n innerRef: noop,\n wrapperStyles: {},\n};\n\nexport const defaultActionProps: Partial<DSMenuItemT.ActionProps> = {\n ...defaultCommonProps,\n label: '',\n value: undefined,\n disabled: false,\n isActive: false,\n onClick: noop,\n optionsShouldHavePadding: false,\n tabIndex: 0,\n};\n\nexport const defaultMultiProps: Partial<DSMenuItemT.MultiProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSelected: false,\n onClick: noop,\n onMouseDown: noop,\n onMouseEnter: noop,\n onMouseLeave: noop,\n tabIndex: 0,\n};\n\nexport const defaultSingleProps: Partial<DSMenuItemT.SingleProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSelected: false,\n onClick: noop,\n onMouseDown: noop,\n onMouseEnter: noop,\n onMouseLeave: noop,\n dataTestid: 'ds-menu-item',\n tabIndex: 0,\n};\n\nexport const defaultSubmenuProps: Partial<DSMenuItemT.SubmenuProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSubmenuOpened: false,\n onSubmenuOpen: noop,\n rightAddon: 'chevron',\n optionsShouldHavePadding: false,\n Dropdown: noop,\n dropdownProps: {\n options: [],\n onSubmenuToggle: noop,\n openedSubmenus: {},\n selectedOptions: {},\n onKeyDown: noop,\n onOptionClick: noop,\n onClickOutside: noop,\n minWidth: 'auto',\n maxHeight: 'auto',\n },\n};\n\nexport const defaultSectionProps: Partial<DSMenuItemT.SectionProps> = {\n ...defaultCommonProps,\n label: '',\n};\n\nexport const defaultSeparatorProps: Partial<DSMenuItemT.SeparatorProps> = {\n ...defaultCommonProps,\n};\n\nexport const defaultSingleWithSubmenuProps: Partial<Omit<DSMenuItemT.SingleWithSubmenuProps, 'render'>> = {\n ...defaultSingleProps,\n ...defaultSubmenuProps,\n};\n\nexport const itemProps = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n dsId: PropTypes.string,\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n wrapperStyles: PropTypes.object,\n render: PropTypes.func,\n} as WeakValidationMap<unknown>;\n\nexport const MenuItemPropTypes = {\n dsId: PropTypes.string.description('The unique ID for the menu item.').isRequired,\n innerRef: PropTypes.oneOfType([\n PropTypes.shape({\n current: PropTypes.instanceOf(HTMLLIElement),\n }),\n PropTypes.func.description(\n ' A ref object or callback function to access the underlying DOM element (HTMLLIElement) of the menu item.',\n ),\n ]),\n render: PropTypes.func.description('A custom render function to render the content of the menu item.'),\n} as WeakValidationMap<unknown>;\n\nexport const SingleMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const MultiMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const ActionMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n value: PropTypes.any.description('The value of the menu item.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n} as WeakValidationMap<unknown>;\n\nexport const SectionMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-items",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.22.0-next.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Items",
|
|
6
6
|
"files": [
|
|
@@ -37,12 +37,12 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@xstyled/system": "~3.7.3",
|
|
39
39
|
"@xstyled/util": "3.7.0",
|
|
40
|
-
"@elliemae/ds-form-checkbox": "3.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-system": "3.
|
|
40
|
+
"@elliemae/ds-form-checkbox": "3.22.0-next.0",
|
|
41
|
+
"@elliemae/ds-icons": "3.22.0-next.0",
|
|
42
|
+
"@elliemae/ds-grid": "3.22.0-next.0",
|
|
43
|
+
"@elliemae/ds-skeleton": "3.22.0-next.0",
|
|
44
|
+
"@elliemae/ds-props-helpers": "3.22.0-next.0",
|
|
45
|
+
"@elliemae/ds-system": "3.22.0-next.0"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"lodash": "^4.17.21",
|