npm - @elliemae/ds-menu-items - Versions diffs - 3.22.0-next.3 → 3.22.0-next.30 - Mend

@elliemae/ds-menu-items 3.22.0-next.3 → 3.22.0-next.30

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.

Files changed (60) hide show

package/dist/cjs/react-desc-prop-types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "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"],
-  "mappings": "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",
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "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 SkeletonProps extends CommonProps<ActionProps> {\n    secondaryLabel?: string;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\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"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/components/ActionMenuItem/index.js CHANGED Viewed

@@ -59,7 +59,6 @@ const ActionMenuItem = (props) => {
     }
   );
 };
-ActionMenuItem.propTypes = ActionMenuItemPropTypes;
 ActionMenuItem.displayName = "DSActionMenuItem";
 const ActionMenuItemWithSchema = describe(ActionMenuItem);
 ActionMenuItemWithSchema.propTypes = ActionMenuItemPropTypes;

package/dist/esm/components/ActionMenuItem/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/ActionMenuItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultActionProps, ActionMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport {\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n} from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nconst ActionMenuItem: React.ComponentType<DSMenuItemT.ActionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultActionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, ActionMenuItemPropTypes, `${DSMenuItemName}Action`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    onClick,\n    isActive,\n    disabled,\n    innerRef,\n    wrapperStyles,\n    optionsShouldHavePadding,\n    render: Render,\n  } = propsWithDefault;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(\n    propsWithDefault,\n    props.original\n      ? {\n          onClick: onClick,\n        }\n      : undefined,\n  );\n  const gridLayout = useMemo(() => {\n    const cols = ['auto'];\n    if (secondaryLabel) cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\n      role=\"option\"\n      isActive={isActive}\n      disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      ref={innerRef}\n      pl={optionsShouldHavePadding ? 40 : 16}\n      style={wrapperStyles}\n      data-type=\"action\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...propsWithDefault} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <>\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n          </>\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nActionMenuItem.propTypes = ActionMenuItemPropTypes;\nActionMenuItem.displayName = 'DSActionMenuItem';\nconst ActionMenuItemWithSchema = describe(ActionMenuItem);\nActionMenuItemWithSchema.propTypes = ActionMenuItemPropTypes;\n\nexport { ActionMenuItem, ActionMenuItem as DSActionMenuItem, ActionMenuItemWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2Df,SAGE,UAHF,KAGE,YAHF;AA3DR,SAAgB,eAAe;AAC/B,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,oBAAoB,+BAA+B;AAC5D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,oCAAoC;AAC7C,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,mBAAmB,6BAA6B,OAAO,kBAAkB;AAE/E,iCAA+B,kBAAkB,yBAAyB,GAAG,sBAAsB;AAEnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAEJ,QAAM,EAAE,kBAAkB,aAAa,IAAI;AAAA,IACzC;AAAA,IACA,MAAM,WACF;AAAA,MACE;AAAA,IACF,IACA;AAAA,EACN;AACA,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,MAAM;AACpB,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,CAAC,WAAW,UAAU;AAAA,MAC/B,KAAK;AAAA,MACL,IAAI,2BAA2B,KAAK;AAAA,MACpC,OAAO;AAAA,MACP,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,oBAAC,UAAQ,GAAG,kBAAkB,IAE9B,oBAAC,wBAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E,2CACE;AAAA,4BAAC,sBAAoB,iBAAM;AAAA,QAC1B,mBAAmB,UAClB,oBAAC,+BAA6B,0BAAe;AAAA,SAEjD,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/ActionMenuItem/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultActionProps, ActionMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport {\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n} from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nconst ActionMenuItem: React.ComponentType<DSMenuItemT.ActionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultActionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, ActionMenuItemPropTypes, `${DSMenuItemName}Action`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    onClick,\n    isActive,\n    disabled,\n    innerRef,\n    wrapperStyles,\n    optionsShouldHavePadding,\n    render: Render,\n  } = propsWithDefault;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(\n    propsWithDefault,\n    props.original\n      ? {\n          onClick: onClick,\n        }\n      : undefined,\n  );\n  const gridLayout = useMemo(() => {\n    const cols = ['auto'];\n    if (secondaryLabel) cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\n      role=\"option\"\n      isActive={isActive}\n      disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      ref={innerRef}\n      pl={optionsShouldHavePadding ? 40 : 16}\n      style={wrapperStyles}\n      data-type=\"action\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...propsWithDefault} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <>\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n          </>\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nActionMenuItem.displayName = 'DSActionMenuItem';\nconst ActionMenuItemWithSchema = describe(ActionMenuItem);\nActionMenuItemWithSchema.propTypes = ActionMenuItemPropTypes;\n\nexport { ActionMenuItem, ActionMenuItem as DSActionMenuItem, ActionMenuItemWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2Df,SAGE,UAHF,KAGE,YAHF;AA3DR,SAAgB,eAAe;AAC/B,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,oBAAoB,+BAA+B;AAC5D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,oCAAoC;AAC7C,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,mBAAmB,6BAA6B,OAAO,kBAAkB;AAE/E,iCAA+B,kBAAkB,yBAAyB,GAAG,sBAAsB;AAEnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAEJ,QAAM,EAAE,kBAAkB,aAAa,IAAI;AAAA,IACzC;AAAA,IACA,MAAM,WACF;AAAA,MACE;AAAA,IACF,IACA;AAAA,EACN;AACA,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,MAAM;AACpB,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,CAAC,WAAW,UAAU;AAAA,MAC/B,KAAK;AAAA,MACL,IAAI,2BAA2B,KAAK;AAAA,MACpC,OAAO;AAAA,MACP,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,oBAAC,UAAQ,GAAG,kBAAkB,IAE9B,oBAAC,wBAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E,2CACE;AAAA,4BAAC,sBAAoB,iBAAM;AAAA,QAC1B,mBAAmB,UAClB,oBAAC,+BAA6B,0BAAe;AAAA,SAEjD,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/components/MultiMenuItem/index.js CHANGED Viewed

@@ -72,7 +72,6 @@ const MultiMenuItem = (props) => {
     }
   );
 };
-MultiMenuItem.propTypes = MultiMenuItemPropTypes;
 MultiMenuItem.displayName = "DSMultiMenuItem";
 const MultiMenuItemWithSchema = describe(MultiMenuItem);
 MultiMenuItemWithSchema.propTypes = MultiMenuItemPropTypes;

package/dist/esm/components/MultiMenuItem/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/MultiMenuItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { PresentationalCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultMultiProps, MultiMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport { StyledGlobalMenuItemWrapper, StyledItemContent } from '../styled.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst noop = () => null;\n\nconst MultiMenuItem: React.ComponentType<DSMenuItemT.MultiProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultMultiProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, MultiMenuItemPropTypes, `${DSMenuItemName}Multi`);\n\n  const {\n    dsId,\n    label,\n    disabled,\n    isSelected,\n    isActive,\n    onClick,\n    dataTestid,\n    innerRef,\n    onMouseEnter,\n    onMouseLeave,\n    onMouseDown,\n    wrapperStyles,\n    tabIndex,\n    render: Render,\n  } = propsWithDefault;\n\n  // menuitems use original prop from dsdropdownmenu or dscombobox\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(\n    propsWithDefault,\n    props.original\n      ? {\n          onClick: onClick,\n          onMouseDown: onMouseDown,\n          onMouseEnter: onMouseEnter,\n          onMouseLeave: onMouseLeave,\n        }\n      : undefined,\n  );\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\n      disabled={disabled}\n      isActive={isActive}\n      isSelected={isSelected}\n      ref={innerRef}\n      onMouseDown={onMouseDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      role=\"option\"\n      className={isActive ? 'ds-list-item-active' : ''}\n      aria-selected={isSelected}\n      style={wrapperStyles}\n      onClick={onClick}\n      data-testid={dataTestid}\n      data-type=\"multi\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledItemContent>\n          <PresentationalCheckbox\n            disabled={disabled}\n            checked={isSelected}\n            onMouseDown={onMouseDown}\n            name={label}\n            label={label}\n            onChange={noop}\n            tabIndex={tabIndex}\n            wrapLabel\n            device=\"desktop\"\n          />\n        </StyledItemContent>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nMultiMenuItem.propTypes = MultiMenuItemPropTypes;\nMultiMenuItem.displayName = 'DSMultiMenuItem';\nconst MultiMenuItemWithSchema = describe(MultiMenuItem);\nMultiMenuItemWithSchema.propTypes = MultiMenuItemPropTypes;\n\nexport { MultiMenuItem, MultiMenuItem as DSMultiMenuItem, MultiMenuItemWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmEf;AAlER,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,8BAA8B;AAEvC,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,6BAA6B,yBAAyB;AAC/D,SAAS,oCAAoC;AAC7C,SAAS,sBAAsB;AAE/B,MAAM,OAAO,MAAM;AAEnB,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAA6B,OAAO,iBAAiB;AAE9E,iCAA+B,kBAAkB,wBAAwB,GAAG,qBAAqB;AAEjG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAGJ,QAAM,EAAE,kBAAkB,aAAa,IAAI;AAAA,IACzC;AAAA,IACA,MAAM,WACF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IACA;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,WAAW,WAAW,wBAAwB;AAAA,MAC9C,iBAAe;AAAA,MACf,OAAO;AAAA,MACP;AAAA,MACA,eAAa;AAAA,MACb,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,oBAAC,UAAQ,GAAG,OAAO,IAEnB,oBAAC,qBACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,WAAS;AAAA,UACT,QAAO;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/MultiMenuItem/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { PresentationalCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultMultiProps, MultiMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport { StyledGlobalMenuItemWrapper, StyledItemContent } from '../styled.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst noop = () => null;\n\nconst MultiMenuItem: React.ComponentType<DSMenuItemT.MultiProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultMultiProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, MultiMenuItemPropTypes, `${DSMenuItemName}Multi`);\n\n  const {\n    dsId,\n    label,\n    disabled,\n    isSelected,\n    isActive,\n    onClick,\n    dataTestid,\n    innerRef,\n    onMouseEnter,\n    onMouseLeave,\n    onMouseDown,\n    wrapperStyles,\n    tabIndex,\n    render: Render,\n  } = propsWithDefault;\n\n  // menuitems use original prop from dsdropdownmenu or dscombobox\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(\n    propsWithDefault,\n    props.original\n      ? {\n          onClick: onClick,\n          onMouseDown: onMouseDown,\n          onMouseEnter: onMouseEnter,\n          onMouseLeave: onMouseLeave,\n        }\n      : undefined,\n  );\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\n      disabled={disabled}\n      isActive={isActive}\n      isSelected={isSelected}\n      ref={innerRef}\n      onMouseDown={onMouseDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      role=\"option\"\n      className={isActive ? 'ds-list-item-active' : ''}\n      aria-selected={isSelected}\n      style={wrapperStyles}\n      onClick={onClick}\n      data-testid={dataTestid}\n      data-type=\"multi\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledItemContent>\n          <PresentationalCheckbox\n            disabled={disabled}\n            checked={isSelected}\n            onMouseDown={onMouseDown}\n            name={label}\n            label={label}\n            onChange={noop}\n            tabIndex={tabIndex}\n            wrapLabel\n            device=\"desktop\"\n          />\n        </StyledItemContent>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nMultiMenuItem.displayName = 'DSMultiMenuItem';\nconst MultiMenuItemWithSchema = describe(MultiMenuItem);\nMultiMenuItemWithSchema.propTypes = MultiMenuItemPropTypes;\n\nexport { MultiMenuItem, MultiMenuItem as DSMultiMenuItem, MultiMenuItemWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmEf;AAlER,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,8BAA8B;AAEvC,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,6BAA6B,yBAAyB;AAC/D,SAAS,oCAAoC;AAC7C,SAAS,sBAAsB;AAE/B,MAAM,OAAO,MAAM;AAEnB,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAA6B,OAAO,iBAAiB;AAE9E,iCAA+B,kBAAkB,wBAAwB,GAAG,qBAAqB;AAEjG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAGJ,QAAM,EAAE,kBAAkB,aAAa,IAAI;AAAA,IACzC;AAAA,IACA,MAAM,WACF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IACA;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,WAAW,WAAW,wBAAwB;AAAA,MAC9C,iBAAe;AAAA,MACf,OAAO;AAAA,MACP;AAAA,MACA,eAAa;AAAA,MACb,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,oBAAC,UAAQ,GAAG,OAAO,IAEnB,oBAAC,qBACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,WAAS;AAAA,UACT,QAAO;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

package/dist/esm/components/Section/index.js CHANGED Viewed

@@ -22,7 +22,6 @@ const Section = (props) => {
     }
   );
 };
-Section.propTypes = SectionMenuItemPropTypes;
 Section.displayName = "DSSectionMenuItem";
 const SectionWithSchema = describe(Section);
 SectionWithSchema.propTypes = SectionMenuItemPropTypes;

package/dist/esm/components/Section/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Section/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSectionProps, SectionMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport { StyledSectionWrapper, StyledGroupLabel } from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\n\nconst Section: React.ComponentType<DSMenuItemT.SectionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSectionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, SectionMenuItemPropTypes, `${DSMenuItemName}Section`);\n\n  const { label, wrapperStyles, innerRef, render: Render } = props;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);\n\n  return (\n    <StyledSectionWrapper\n      style={wrapperStyles}\n      ref={innerRef}\n      role=\"presentation\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? <Render {...props} /> : <StyledGroupLabel>{label}</StyledGroupLabel>}\n    </StyledSectionWrapper>\n  );\n};\n\nSection.propTypes = SectionMenuItemPropTypes;\nSection.displayName = 'DSSectionMenuItem';\nconst SectionWithSchema = describe(Section);\nSectionWithSchema.propTypes = SectionMenuItemPropTypes;\n\nexport { Section, Section as DSSectionMenuItem, SectionWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyBO;AAxB9B,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,qBAAqB,gCAAgC;AAC9D,SAAS,sBAAsB,wBAAwB;AACvD,SAAS,sBAAsB;AAC/B,SAAS,oCAAoC;AAE7C,MAAM,UAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,6BAA6B,OAAO,mBAAmB;AAEhF,iCAA+B,kBAAkB,0BAA0B,GAAG,uBAAuB;AAErG,QAAM,EAAE,OAAO,eAAe,UAAU,QAAQ,OAAO,IAAI;AAE3D,QAAM,EAAE,kBAAkB,aAAa,IAAI,6BAA6B,gBAAgB;AAExF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SAAY,oBAAC,UAAQ,GAAG,OAAO,IAAK,oBAAC,oBAAkB,iBAAM;AAAA;AAAA,EAC3E;AAEJ;AAEA,QAAQ,YAAY;AACpB,QAAQ,cAAc;AACtB,MAAM,oBAAoB,SAAS,OAAO;AAC1C,kBAAkB,YAAY;",
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Section/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSectionProps, SectionMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport { StyledSectionWrapper, StyledGroupLabel } from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\n\nconst Section: React.ComponentType<DSMenuItemT.SectionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSectionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, SectionMenuItemPropTypes, `${DSMenuItemName}Section`);\n\n  const { label, wrapperStyles, innerRef, render: Render } = props;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);\n\n  return (\n    <StyledSectionWrapper\n      style={wrapperStyles}\n      ref={innerRef}\n      role=\"presentation\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? <Render {...props} /> : <StyledGroupLabel>{label}</StyledGroupLabel>}\n    </StyledSectionWrapper>\n  );\n};\n\nSection.displayName = 'DSSectionMenuItem';\nconst SectionWithSchema = describe(Section);\nSectionWithSchema.propTypes = SectionMenuItemPropTypes;\n\nexport { Section, Section as DSSectionMenuItem, SectionWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyBO;AAxB9B,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,qBAAqB,gCAAgC;AAC9D,SAAS,sBAAsB,wBAAwB;AACvD,SAAS,sBAAsB;AAC/B,SAAS,oCAAoC;AAE7C,MAAM,UAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,6BAA6B,OAAO,mBAAmB;AAEhF,iCAA+B,kBAAkB,0BAA0B,GAAG,uBAAuB;AAErG,QAAM,EAAE,OAAO,eAAe,UAAU,QAAQ,OAAO,IAAI;AAE3D,QAAM,EAAE,kBAAkB,aAAa,IAAI,6BAA6B,gBAAgB;AAExF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SAAY,oBAAC,UAAQ,GAAG,OAAO,IAAK,oBAAC,oBAAkB,iBAAM;AAAA;AAAA,EAC3E;AAEJ;AAEA,QAAQ,cAAc;AACtB,MAAM,oBAAoB,SAAS,OAAO;AAC1C,kBAAkB,YAAY;",
   "names": []
 }

package/dist/esm/components/Separator/index.js CHANGED Viewed

@@ -29,7 +29,6 @@ const Separator = (props) => {
     }
   );
 };
-Separator.propTypes = MenuItemPropTypes;
 Separator.displayName = `${DSMenuItemName}Separator`;
 const SeparatorWithSchema = describe(Separator);
 SeparatorWithSchema.propTypes = MenuItemPropTypes;

package/dist/esm/components/Separator/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Separator/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { MenuItemPropTypes, defaultSeparatorProps } from '../../react-desc-prop-types.js';\nimport { StyledSeparatorWrapper, StyledSeparator } from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst Separator: React.ComponentType<DSMenuItemT.SeparatorProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSeparatorProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, MenuItemPropTypes, `${DSMenuItemName}Separator`);\n  const { wrapperStyles, innerRef, render: Render } = propsWithDefault;\n\n  // menuitems use original prop from dsdropdownmenu or dscombobox\n  const sourceGlobalProps = propsWithDefault.original ?? propsWithDefault;\n\n  const globalAttributes = useGetGlobalAttributes(sourceGlobalProps);\n\n  const xStyledProps = useGetXstyledProps(sourceGlobalProps);\n  return (\n    <StyledSeparatorWrapper\n      style={wrapperStyles}\n      ref={innerRef}\n      role=\"presentation\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render ? <Render {...props} /> : <StyledSeparator role=\"presentation\" />}\n    </StyledSeparatorWrapper>\n  );\n};\n\nSeparator.propTypes = MenuItemPropTypes;\nSeparator.displayName = `${DSMenuItemName}Separator`;\nconst SeparatorWithSchema = describe(Separator);\nSeparatorWithSchema.propTypes = MenuItemPropTypes;\n\nexport { Separator, Separator as DSSeparatorMenuItem, SeparatorWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiCP;AAhChB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,mBAAmB,6BAA6B;AACzD,SAAS,wBAAwB,uBAAuB;AACxD,SAAS,sBAAsB;AAE/B,MAAM,YAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAA6B,OAAO,qBAAqB;AAElF,iCAA+B,kBAAkB,mBAAmB,GAAG,yBAAyB;AAChG,QAAM,EAAE,eAAe,UAAU,QAAQ,OAAO,IAAI;AAGpD,QAAM,oBAAoB,iBAAiB,YAAY;AAEvD,QAAM,mBAAmB,uBAAuB,iBAAiB;AAEjE,QAAM,eAAe,mBAAmB,iBAAiB;AACzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,mBAAS,oBAAC,UAAQ,GAAG,OAAO,IAAK,oBAAC,mBAAgB,MAAK,gBAAe;AAAA;AAAA,EACzE;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc,GAAG;AAC3B,MAAM,sBAAsB,SAAS,SAAS;AAC9C,oBAAoB,YAAY;",
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Separator/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { MenuItemPropTypes, defaultSeparatorProps } from '../../react-desc-prop-types.js';\nimport { StyledSeparatorWrapper, StyledSeparator } from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst Separator: React.ComponentType<DSMenuItemT.SeparatorProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSeparatorProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, MenuItemPropTypes, `${DSMenuItemName}Separator`);\n  const { wrapperStyles, innerRef, render: Render } = propsWithDefault;\n\n  // menuitems use original prop from dsdropdownmenu or dscombobox\n  const sourceGlobalProps = propsWithDefault.original ?? propsWithDefault;\n\n  const globalAttributes = useGetGlobalAttributes(sourceGlobalProps);\n\n  const xStyledProps = useGetXstyledProps(sourceGlobalProps);\n  return (\n    <StyledSeparatorWrapper\n      style={wrapperStyles}\n      ref={innerRef}\n      role=\"presentation\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render ? <Render {...props} /> : <StyledSeparator role=\"presentation\" />}\n    </StyledSeparatorWrapper>\n  );\n};\n\nSeparator.displayName = `${DSMenuItemName}Separator`;\nconst SeparatorWithSchema = describe(Separator);\nSeparatorWithSchema.propTypes = MenuItemPropTypes;\n\nexport { Separator, Separator as DSSeparatorMenuItem, SeparatorWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiCP;AAhChB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,mBAAmB,6BAA6B;AACzD,SAAS,wBAAwB,uBAAuB;AACxD,SAAS,sBAAsB;AAE/B,MAAM,YAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAA6B,OAAO,qBAAqB;AAElF,iCAA+B,kBAAkB,mBAAmB,GAAG,yBAAyB;AAChG,QAAM,EAAE,eAAe,UAAU,QAAQ,OAAO,IAAI;AAGpD,QAAM,oBAAoB,iBAAiB,YAAY;AAEvD,QAAM,mBAAmB,uBAAuB,iBAAiB;AAEjE,QAAM,eAAe,mBAAmB,iBAAiB;AACzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,mBAAS,oBAAC,UAAQ,GAAG,OAAO,IAAK,oBAAC,mBAAgB,MAAK,gBAAe;AAAA;AAAA,EACzE;AAEJ;AAEA,UAAU,cAAc,GAAG;AAC3B,MAAM,sBAAsB,SAAS,SAAS;AAC9C,oBAAoB,YAAY;",
   "names": []
 }

package/dist/esm/components/SingleMenuItem/index.js CHANGED Viewed

@@ -74,7 +74,6 @@ const SingleMenuItem = (props) => {
     }
   );
 };
-SingleMenuItem.propTypes = SingleMenuItemPropTypes;
 SingleMenuItem.displayName = "DSSingleMenuItem";
 const SingleMenuItemWithSchema = describe(SingleMenuItem);
 SingleMenuItemWithSchema.propTypes = SingleMenuItemPropTypes;

package/dist/esm/components/SingleMenuItem/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SingleMenuItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleProps, SingleMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport {\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n} from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst SingleMenuItem: React.ComponentType<DSMenuItemT.SingleProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSingleProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, SingleMenuItemPropTypes, `${DSMenuItemName}Single`);\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isSelected,\n    onClick,\n    isActive,\n    innerRef,\n    onMouseDown,\n    onMouseEnter,\n    onMouseLeave,\n    wrapperStyles,\n    render: Render,\n    dataTestid,\n    disabled,\n  } = propsWithDefault;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(\n    propsWithDefault,\n    props.original\n      ? {\n          onClick: onClick,\n          onMouseDown: onMouseDown,\n          onMouseEnter: onMouseEnter,\n          onMouseLeave: onMouseLeave,\n        }\n      : undefined,\n  );\n\n  const gridLayout = useMemo(() => {\n    const cols = ['16px', 'auto'];\n    if (secondaryLabel) cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      aria-selected={isSelected}\n      id={dsId}\n      role=\"option\"\n      isActive={isActive}\n      isSelected={isSelected}\n      onClick={onClick}\n      ref={innerRef}\n      onMouseDown={onMouseDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      className={isActive ? 'ds-list-item-active' : ''}\n      style={wrapperStyles}\n      data-testid={dataTestid}\n      disabled={disabled}\n      data-type=\"single\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <div>{isSelected && <Checkmark size=\"s\" color={['brand-primary', '600']} />}</div>\n          <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n          {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nSingleMenuItem.propTypes = SingleMenuItemPropTypes;\nSingleMenuItem.displayName = 'DSSingleMenuItem';\nconst SingleMenuItemWithSchema = describe(SingleMenuItem);\nSingleMenuItemWithSchema.propTypes = SingleMenuItemPropTypes;\n\nexport { SingleMenuItem, SingleMenuItem as DSSingleMenuItem, SingleMenuItemWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0Ef,cAEA,YAFA;AA1ER,SAAgB,eAAe;AAC/B,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,iBAAiB;AAC1B,SAAS,oCAAoC;AAE7C,SAAS,oBAAoB,+BAA+B;AAC5D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAE/B,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,mBAAmB,6BAA6B,OAAO,kBAAkB;AAE/E,iCAA+B,kBAAkB,yBAAyB,GAAG,sBAAsB;AACnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,kBAAkB,aAAa,IAAI;AAAA,IACzC;AAAA,IACA,MAAM,WACF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IACA;AAAA,EACN;AAEA,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,QAAQ,MAAM;AAC5B,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,WAAW,wBAAwB;AAAA,MAC9C,OAAO;AAAA,MACP,eAAa;AAAA,MACb;AAAA,MACA,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,oBAAC,UAAQ,GAAG,OAAO,IAEnB,qBAAC,wBAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,4BAAC,SAAK,wBAAc,oBAAC,aAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,GAAG;AAAA,QAC5E,oBAAC,sBAAoB,iBAAM;AAAA,QAC1B,mBAAmB,UAAa,oBAAC,+BAA6B,0BAAe;AAAA,SAChF;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SingleMenuItem/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleProps, SingleMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport {\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n} from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst SingleMenuItem: React.ComponentType<DSMenuItemT.SingleProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSingleProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, SingleMenuItemPropTypes, `${DSMenuItemName}Single`);\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isSelected,\n    onClick,\n    isActive,\n    innerRef,\n    onMouseDown,\n    onMouseEnter,\n    onMouseLeave,\n    wrapperStyles,\n    render: Render,\n    dataTestid,\n    disabled,\n  } = propsWithDefault;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(\n    propsWithDefault,\n    props.original\n      ? {\n          onClick: onClick,\n          onMouseDown: onMouseDown,\n          onMouseEnter: onMouseEnter,\n          onMouseLeave: onMouseLeave,\n        }\n      : undefined,\n  );\n\n  const gridLayout = useMemo(() => {\n    const cols = ['16px', 'auto'];\n    if (secondaryLabel) cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      aria-selected={isSelected}\n      id={dsId}\n      role=\"option\"\n      isActive={isActive}\n      isSelected={isSelected}\n      onClick={onClick}\n      ref={innerRef}\n      onMouseDown={onMouseDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      className={isActive ? 'ds-list-item-active' : ''}\n      style={wrapperStyles}\n      data-testid={dataTestid}\n      disabled={disabled}\n      data-type=\"single\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <div>{isSelected && <Checkmark size=\"s\" color={['brand-primary', '600']} />}</div>\n          <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n          {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nSingleMenuItem.displayName = 'DSSingleMenuItem';\nconst SingleMenuItemWithSchema = describe(SingleMenuItem);\nSingleMenuItemWithSchema.propTypes = SingleMenuItemPropTypes;\n\nexport { SingleMenuItem, SingleMenuItem as DSSingleMenuItem, SingleMenuItemWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0Ef,cAEA,YAFA;AA1ER,SAAgB,eAAe;AAC/B,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,iBAAiB;AAC1B,SAAS,oCAAoC;AAE7C,SAAS,oBAAoB,+BAA+B;AAC5D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAE/B,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,mBAAmB,6BAA6B,OAAO,kBAAkB;AAE/E,iCAA+B,kBAAkB,yBAAyB,GAAG,sBAAsB;AACnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,kBAAkB,aAAa,IAAI;AAAA,IACzC;AAAA,IACA,MAAM,WACF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IACA;AAAA,EACN;AAEA,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,QAAQ,MAAM;AAC5B,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,WAAW,wBAAwB;AAAA,MAC9C,OAAO;AAAA,MACP,eAAa;AAAA,MACb;AAAA,MACA,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,oBAAC,UAAQ,GAAG,OAAO,IAEnB,qBAAC,wBAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,4BAAC,SAAK,wBAAc,oBAAC,aAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,GAAG;AAAA,QAC5E,oBAAC,sBAAoB,iBAAM;AAAA,QAC1B,mBAAmB,UAAa,oBAAC,+BAA6B,0BAAe;AAAA,SAChF;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/components/SingleWithSubmenuItem/index.js CHANGED Viewed

@@ -15,6 +15,7 @@ import {
 } from "../styled.js";
 import { useGetSubmenuHandlers } from "./useGetSubmenuHandlers.js";
 import { DSMenuItemName } from "../../exported-related/index.js";
+import { useGetGlobalsAndXStyledProps } from "../useGetGlobalsAndXStyledProps.js";
 const SingleWithSubmenuItem = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(
     props,
@@ -48,6 +49,8 @@ const SingleWithSubmenuItem = (props) => {
     }
   } = propsWithDefault;
   const [delayedIsOpened, setDelayedIsOpened] = useState(false);
+  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);
+  const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;
   useEffect(() => {
     setTimeout(() => setDelayedIsOpened(isSubmenuOpened));
   }, [isSubmenuOpened]);
@@ -96,6 +99,8 @@ const SingleWithSubmenuItem = (props) => {
           as: "div",
           ref: innerRef,
           "data-type": "single-with-submenu",
+          ...globalAttributes,
+          ...restXStyled,
           children: [
             Render !== void 0 ? /* @__PURE__ */ jsx(Render, { ...propsWithDefault }) : /* @__PURE__ */ jsxs(StyledContentWrapper, { cols: gridLayout, gutter: "xxs", alignItems: "center", children: [
               isSelected ? /* @__PURE__ */ jsx(Checkmark, { size: "s", color: disabled ? ["neutral", "500"] : ["brand-primary", "600"] }) : /* @__PURE__ */ jsx("div", {}),
@@ -120,7 +125,6 @@ const SingleWithSubmenuItem = (props) => {
     }
   );
 };
-SingleWithSubmenuItem.propTypes = itemProps;
 SingleWithSubmenuItem.displayName = `${DSMenuItemName}SingleWithSubmenu`;
 const SingleWithSubmenuItemWithSchema = describe(SingleWithSubmenuItem);
 SingleWithSubmenuItemWithSchema.propTypes = itemProps;

package/dist/esm/components/SingleWithSubmenuItem/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SingleWithSubmenuItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useEffect, useState, useMemo } from 'react';\nimport { MoreOptionsVert, ChevronRight, Checkmark } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleWithSubmenuProps, itemProps } from '../../react-desc-prop-types.js';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledIconContainer,\n  StyledEllipsisButton,\n  StyledGlobalMenuItemWrapper,\n  StyledVerticalSeparator,\n  StyledContentWrapper,\n} from '../styled.js';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst SingleWithSubmenuItem: React.ComponentType<DSMenuItemT.SingleWithSubmenuProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SingleWithSubmenuProps>>(\n    props,\n    defaultSingleWithSubmenuProps,\n  );\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}SingleWithSubmenu`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isActive,\n    disabled,\n    onClick,\n    isSelected,\n    isSubmenuOpened,\n    rightAddon,\n    innerRef,\n    wrapperStyles,\n    render: Render,\n    Dropdown,\n    dropdownProps: {\n      options,\n      openedSubmenus,\n      onSubmenuToggle,\n      selectedOptions,\n      onKeyDown,\n      onOptionClick,\n      onClickOutside,\n      minWidth,\n      maxHeight,\n    },\n  } = propsWithDefault;\n\n  // If we don't delay the opening of the poppers, the position will not be placed correctly\n  // That why we delay it for the next render using the useEffect hook\n  // TODO -- @carusox move this to utilities as a hook\n  const [delayedIsOpened, setDelayedIsOpened] = useState(false);\n\n  useEffect(() => {\n    setTimeout(() => setDelayedIsOpened(isSubmenuOpened));\n  }, [isSubmenuOpened]);\n\n  const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = useGetSubmenuHandlers(propsWithDefault);\n\n  const gridLayout = useMemo(() => {\n    const cols = ['16px', 'auto'];\n    if (secondaryLabel) cols.push('min-content');\n    cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <Dropdown\n      isOpened={delayedIsOpened}\n      options={options ?? []}\n      onOptionClick={onOptionClick}\n      startPlacementPreference=\"right-start\"\n      placementOrderPreference={['right-start', 'right-end', 'left-start', 'left-end']}\n      selectedOptions={selectedOptions}\n      openedSubmenus={openedSubmenus}\n      onSubmenuToggle={onSubmenuToggle}\n      onKeyDown={onKeyDown}\n      onClickOutside={onClickOutside}\n      customOffset={[-4, 1]}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      as=\"li\"\n      role=\"option\"\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      id={dsId}\n    >\n      <StyledGlobalMenuItemWrapper\n        pr={0}\n        onClick={!disabled ? onClick : undefined}\n        isSelected={isSubmenuOpened}\n        disabled={disabled}\n        isActive={isActive}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        as={'div' as keyof JSX.IntrinsicElements}\n        ref={innerRef}\n        data-type=\"single-with-submenu\"\n      >\n        {Render !== undefined ? (\n          <Render {...propsWithDefault} />\n        ) : (\n          <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n            {isSelected ? (\n              <Checkmark size=\"s\" color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} />\n            ) : (\n              <div />\n            )}\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n            <StyledIconContainer>\n              <StyledVerticalSeparator />\n              {rightAddon === 'ellipsis' ? (\n                <StyledEllipsisButton tabIndex={-1} onClick={onEllipsisClick} disabled={disabled}>\n                  <MoreOptionsVert\n                    className=\"ds-dropdown-menu-v2-more-options\"\n                    color={disabled ? ['neutral', '500'] : ['brand-primary', '600']}\n                    size=\"s\"\n                  />\n                </StyledEllipsisButton>\n              ) : (\n                <ChevronRight color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} size=\"s\" />\n              )}\n            </StyledIconContainer>\n          </StyledContentWrapper>\n        )}\n        <span id={`dropdownmenu-submenu-${dsId}`} style={{ display: 'none' }}>\n          submenu, to open this submenu press the Right Arrow key\n        </span>\n      </StyledGlobalMenuItemWrapper>\n    </Dropdown>\n  );\n};\n\nSingleWithSubmenuItem.propTypes = itemProps;\nSingleWithSubmenuItem.displayName = `${DSMenuItemName}SingleWithSubmenu`;\nconst SingleWithSubmenuItemWithSchema = describe(SingleWithSubmenuItem);\nSingleWithSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleWithSubmenuItem, SingleWithSubmenuItemWithSchema };\n"],
-  "mappings": "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",
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SingleWithSubmenuItem/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable max-lines */\nimport React, { useEffect, useState, useMemo } from 'react';\nimport { MoreOptionsVert, ChevronRight, Checkmark } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleWithSubmenuProps, itemProps } from '../../react-desc-prop-types.js';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledIconContainer,\n  StyledEllipsisButton,\n  StyledGlobalMenuItemWrapper,\n  StyledVerticalSeparator,\n  StyledContentWrapper,\n} from '../styled.js';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\n\nconst SingleWithSubmenuItem: React.ComponentType<DSMenuItemT.SingleWithSubmenuProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SingleWithSubmenuProps>>(\n    props,\n    defaultSingleWithSubmenuProps,\n  );\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}SingleWithSubmenu`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isActive,\n    disabled,\n    onClick,\n    isSelected,\n    isSubmenuOpened,\n    rightAddon,\n    innerRef,\n    wrapperStyles,\n    render: Render,\n    Dropdown,\n    dropdownProps: {\n      options,\n      openedSubmenus,\n      onSubmenuToggle,\n      selectedOptions,\n      onKeyDown,\n      onOptionClick,\n      onClickOutside,\n      minWidth,\n      maxHeight,\n    },\n  } = propsWithDefault;\n\n  // If we don't delay the opening of the poppers, the position will not be placed correctly\n  // That why we delay it for the next render using the useEffect hook\n  // TODO -- @carusox move this to utilities as a hook\n  const [delayedIsOpened, setDelayedIsOpened] = useState(false);\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);\n  const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;\n\n  useEffect(() => {\n    setTimeout(() => setDelayedIsOpened(isSubmenuOpened));\n  }, [isSubmenuOpened]);\n\n  const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = useGetSubmenuHandlers(propsWithDefault);\n\n  const gridLayout = useMemo(() => {\n    const cols = ['16px', 'auto'];\n    if (secondaryLabel) cols.push('min-content');\n    cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <Dropdown\n      isOpened={delayedIsOpened}\n      options={options ?? []}\n      onOptionClick={onOptionClick}\n      startPlacementPreference=\"right-start\"\n      placementOrderPreference={['right-start', 'right-end', 'left-start', 'left-end']}\n      selectedOptions={selectedOptions}\n      openedSubmenus={openedSubmenus}\n      onSubmenuToggle={onSubmenuToggle}\n      onKeyDown={onKeyDown}\n      onClickOutside={onClickOutside}\n      customOffset={[-4, 1]}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      as=\"li\"\n      role=\"option\"\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      id={dsId}\n    >\n      <StyledGlobalMenuItemWrapper\n        pr={0}\n        onClick={!disabled ? onClick : undefined}\n        isSelected={isSubmenuOpened}\n        disabled={disabled}\n        isActive={isActive}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        as={'div' as keyof JSX.IntrinsicElements}\n        ref={innerRef}\n        data-type=\"single-with-submenu\"\n        {...globalAttributes}\n        {...restXStyled}\n      >\n        {Render !== undefined ? (\n          <Render {...propsWithDefault} />\n        ) : (\n          <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n            {isSelected ? (\n              <Checkmark size=\"s\" color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} />\n            ) : (\n              <div />\n            )}\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n            <StyledIconContainer>\n              <StyledVerticalSeparator />\n              {rightAddon === 'ellipsis' ? (\n                <StyledEllipsisButton tabIndex={-1} onClick={onEllipsisClick} disabled={disabled}>\n                  <MoreOptionsVert\n                    className=\"ds-dropdown-menu-v2-more-options\"\n                    color={disabled ? ['neutral', '500'] : ['brand-primary', '600']}\n                    size=\"s\"\n                  />\n                </StyledEllipsisButton>\n              ) : (\n                <ChevronRight color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} size=\"s\" />\n              )}\n            </StyledIconContainer>\n          </StyledContentWrapper>\n        )}\n        <span id={`dropdownmenu-submenu-${dsId}`} style={{ display: 'none' }}>\n          submenu, to open this submenu press the Right Arrow key\n        </span>\n      </StyledGlobalMenuItemWrapper>\n    </Dropdown>\n  );\n};\n\nSingleWithSubmenuItem.displayName = `${DSMenuItemName}SingleWithSubmenu`;\nconst SingleWithSubmenuItemWithSchema = describe(SingleWithSubmenuItem);\nSingleWithSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleWithSubmenuItem, SingleWithSubmenuItemWithSchema };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/components/SingleWithSubmenuItem/useGetSubmenuHandlers.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SingleWithSubmenuItem/useGetSubmenuHandlers.tsx"],
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SingleWithSubmenuItem/useGetSubmenuHandlers.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useCallback } from 'react';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\nexport const useGetSubmenuHandlers = ({\n  disabled,\n  rightAddon,\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n}: Required<DSMenuItemT.SingleWithSubmenuProps>) => {\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  const onMouseEnterHandler = useCallback(\n    (e: React.MouseEvent) => {\n      if (rightAddon !== 'ellipsis') {\n        if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n        else if (!isSubmenuOpened) onSubmenuOpen(e);\n        timeoutRef.current = null;\n      }\n      onMouseEnter(e);\n    },\n    [isSubmenuOpened, onMouseEnter, onSubmenuOpen, rightAddon],\n  );\n\n  const onMouseLeaveHandler = useCallback(\n    (e: React.MouseEvent) => {\n      if (rightAddon !== 'ellipsis') {\n        if (timeoutRef.current === null) {\n          timeoutRef.current = setTimeout(() => {\n            timeoutRef.current = null;\n            onSubmenuClose(e);\n          }, 300);\n        }\n      }\n      onMouseLeave(e);\n    },\n    [onMouseLeave, onSubmenuClose, rightAddon],\n  );\n\n  const onEllipsisClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (disabled) return;\n      e.stopPropagation();\n      if (isSubmenuOpened) onSubmenuClose(e);\n      else onSubmenuOpen(e);\n    },\n    [disabled, isSubmenuOpened, onSubmenuClose, onSubmenuOpen],\n  );\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,mBAAmB;AAG7B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAoD;AAClD,QAAM,aAAa,OAA8B,IAAI;AAErD,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,eAAe,YAAY;AAC7B,YAAI,WAAW,YAAY;AAAM,uBAAa,WAAW,OAAO;AAAA,iBACvD,CAAC;AAAiB,wBAAc,CAAC;AAC1C,mBAAW,UAAU;AAAA,MACvB;AACA,mBAAa,CAAC;AAAA,IAChB;AAAA,IACA,CAAC,iBAAiB,cAAc,eAAe,UAAU;AAAA,EAC3D;AAEA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,eAAe,YAAY;AAC7B,YAAI,WAAW,YAAY,MAAM;AAC/B,qBAAW,UAAU,WAAW,MAAM;AACpC,uBAAW,UAAU;AACrB,2BAAe,CAAC;AAAA,UAClB,GAAG,GAAG;AAAA,QACR;AAAA,MACF;AACA,mBAAa,CAAC;AAAA,IAChB;AAAA,IACA,CAAC,cAAc,gBAAgB,UAAU;AAAA,EAC3C;AAEA,QAAM,kBAA2C;AAAA,IAC/C,CAAC,MAAM;AACL,UAAI;AAAU;AACd,QAAE,gBAAgB;AAClB,UAAI;AAAiB,uBAAe,CAAC;AAAA;AAChC,sBAAc,CAAC;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,iBAAiB,gBAAgB,aAAa;AAAA,EAC3D;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
   "names": []

package/dist/esm/components/SkeletonMenuItem/index.js CHANGED Viewed

@@ -2,13 +2,26 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { DSSkeleton } from "@elliemae/ds-skeleton";
-import { StyledContentWrapper, StyledSkeletonWrapper } from "../styled.js";
-const SkeletonMenuItem = () => {
+import { StyledContentWrapper, StyledGlobalMenuItemWrapper } from "../styled.js";
+const SkeletonMenuItem = (props) => {
+  const { wrapperStyles, isActive, dsId } = props;
   const gridLayout = useMemo(() => ["16px", "auto"], []);
-  return /* @__PURE__ */ jsx(StyledSkeletonWrapper, { "data-type": "skeleton", "data-testid": "ds-skeleton-menu-item", role: "option", "aria-label": "skeleton", children: /* @__PURE__ */ jsxs(StyledContentWrapper, { cols: gridLayout, minHeight: "16px", gutter: "xxs", alignItems: "center", children: [
-    /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: "100%" }),
-    /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: "100%" })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    StyledGlobalMenuItemWrapper,
+    {
+      id: dsId,
+      "data-type": "skeleton",
+      "data-testid": "ds-skeleton-menu-item",
+      role: "option",
+      "aria-label": "skeleton",
+      style: wrapperStyles,
+      isActive,
+      children: /* @__PURE__ */ jsxs(StyledContentWrapper, { cols: gridLayout, minHeight: "16px", gutter: "xxs", alignItems: "center", children: [
+        /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: "100%" }),
+        /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: "100%" })
+      ] })
+    }
+  );
 };
 export {
   SkeletonMenuItem as DSSkeletonMenuItem,

package/dist/esm/components/SkeletonMenuItem/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SkeletonMenuItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { StyledContentWrapper, StyledSkeletonWrapper } from '../styled.js';\nconst SkeletonMenuItem = () => {\n  const gridLayout = useMemo(() => ['16px', 'auto'], []);\n\n  return (\n    <StyledSkeletonWrapper data-type=\"skeleton\" data-testid=\"ds-skeleton-menu-item\" role=\"option\" aria-label=\"skeleton\">\n      <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n        <DSSkeleton variant=\"rectangular\" width={'100%'} />\n        <DSSkeleton variant=\"rectangular\" width={'100%'} />\n      </StyledContentWrapper>\n    </StyledSkeletonWrapper>\n  );\n};\n\nexport { SkeletonMenuItem, SkeletonMenuItem as DSSkeletonMenuItem };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACQjB,SACE,KADF;AARN,SAAgB,eAAe;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB,6BAA6B;AAC5D,MAAM,mBAAmB,MAAM;AAC7B,QAAM,aAAa,QAAQ,MAAM,CAAC,QAAQ,MAAM,GAAG,CAAC,CAAC;AAErD,SACE,oBAAC,yBAAsB,aAAU,YAAW,eAAY,yBAAwB,MAAK,UAAS,cAAW,YACvG,+BAAC,wBAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,wBAAC,cAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,IACjD,oBAAC,cAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,KACnD,GACF;AAEJ;",
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SkeletonMenuItem/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { type DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '../styled.js';\nconst SkeletonMenuItem: React.ComponentType<DSMenuItemT.SkeletonProps> = (props) => {\n  const { wrapperStyles, isActive, dsId } = props;\n  const gridLayout = useMemo(() => ['16px', 'auto'], []);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\n      data-type=\"skeleton\"\n      data-testid=\"ds-skeleton-menu-item\"\n      role=\"option\"\n      aria-label=\"skeleton\"\n      style={wrapperStyles}\n      isActive={isActive}\n    >\n      <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n        <DSSkeleton variant=\"rectangular\" width={'100%'} />\n        <DSSkeleton variant=\"rectangular\" width={'100%'} />\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nexport { SkeletonMenuItem, SkeletonMenuItem as DSSkeletonMenuItem };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkBjB,SACE,KADF;AAlBN,SAAgB,eAAe;AAC/B,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB,mCAAmC;AAClE,MAAM,mBAAmE,CAAC,UAAU;AAClF,QAAM,EAAE,eAAe,UAAU,KAAK,IAAI;AAC1C,QAAM,aAAa,QAAQ,MAAM,CAAC,QAAQ,MAAM,GAAG,CAAC,CAAC;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAO;AAAA,MACP;AAAA,MAEA,+BAAC,wBAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,4BAAC,cAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,QACjD,oBAAC,cAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,SACnD;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/components/SubmenuItem/getChevronHandlers.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/getChevronHandlers.tsx"],
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/getChevronHandlers.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\n// what we are trying to do:\n//   onMouseEnter -> open submenu\n//   onMouseLeave -> close submenu\n//   onEllipsisClick -> we should not even invoke this handler, as the \"ellipsis\" should not even exist?\n\n// what are the \"challenges\" of the task:\n//  - the submenu close has an animation and we ideally want to be sure state changes after the animation is done\n//      (we do it via an hardcoded 300ms delay, this is know to cause issues in some cases)\n//  - \"what is open and what is closed\" state lives under ds-dropdownmenu,\n//      we manipulate it via \"onSubmenuOpen\" and \"onSubmenuClose\" callbacks\n//  - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n//      this requires extra care when handling the logic and designing the solution\n\n// important and relevant info:\n//  when this comment has been written,\n//    onSubmenuOpen coming from SingleWithSubmenuProps is forcing only one submenu to be open at a time internally\n//      the logic for this is implemented in ds-dropdownmenu,\n//         we had a bug in which we were invoking a stale callback,\n//            we monkeypatching it by ensuring the callback never changes\n//            in the future we should create code with \"hydraters\" to avoid this as per shuttle-v2\n\nexport const getChevronHandlers = ({\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n}: Required<DSMenuItemT.SubmenuProps>) => {\n  const timeoutRef: { current: NodeJS.Timeout | null } = { current: null };\n\n  const onMouseEnterHandler = (e: React.MouseEvent) => {\n    if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n    else if (!isSubmenuOpened) onSubmenuOpen?.(e);\n    timeoutRef.current = null;\n    onMouseEnter?.(e);\n  };\n\n  const onMouseLeaveHandler = (e: React.MouseEvent) => {\n    if (timeoutRef.current === null) {\n      timeoutRef.current = setTimeout(() => {\n        timeoutRef.current = null;\n        onSubmenuClose?.(e);\n      }, 300);\n    }\n    onMouseLeave?.(e);\n  };\n  const onEllipsisClick = () => {\n    throw new Error('Invoking onEllipsisClick from chevron handlers... this should never happen');\n  };\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACuBhB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0C;AACxC,QAAM,aAAiD,EAAE,SAAS,KAAK;AAEvE,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,WAAW,YAAY;AAAM,mBAAa,WAAW,OAAO;AAAA,aACvD,CAAC;AAAiB,sBAAgB,CAAC;AAC5C,eAAW,UAAU;AACrB,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,WAAW,YAAY,MAAM;AAC/B,iBAAW,UAAU,WAAW,MAAM;AACpC,mBAAW,UAAU;AACrB,yBAAiB,CAAC;AAAA,MACpB,GAAG,GAAG;AAAA,IACR;AACA,mBAAe,CAAC;AAAA,EAClB;AACA,QAAM,kBAAkB,MAAM;AAC5B,UAAM,IAAI,MAAM,4EAA4E;AAAA,EAC9F;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
   "names": []

package/dist/esm/components/SubmenuItem/getEllipsisHandlers.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/getEllipsisHandlers.tsx"],
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/getEllipsisHandlers.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\n// what we are trying to do:\n//   onMouseEnter -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//   onMouseLeave -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//   onEllipsisClick -> toggle the submenu open/close as per design\n\n// what are the \"challenges\" of the task:\n//  - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n//      this requires extra care when handling the logic and designing the solution\n\nexport const getEllipsisHandlers = ({\n  disabled,\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n}: Required<DSMenuItemT.SubmenuProps>) => {\n  // why not just onMouseEnterHandler = onMouseEnter?\n  //  we expect onMouseEnterHandler/onMouseLeaveHandler\n  //    to always exist even if onMouseEnter/onMouseLeave are undefined\n  //  also, if in the future we need custom logic for these handlers, we can add it here\n  const onMouseEnterHandler: React.MouseEventHandler = (e) => onMouseEnter?.(e);\n  const onMouseLeaveHandler: React.MouseEventHandler = (e) => onMouseLeave?.(e);\n\n  const onEllipsisClick: React.MouseEventHandler = (e) => {\n    if (disabled) return;\n    e.stopPropagation();\n    if (isSubmenuOpened) onSubmenuClose(e);\n    else onSubmenuOpen(e);\n  };\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACWhB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0C;AAKxC,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAC5E,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAE5E,QAAM,kBAA2C,CAAC,MAAM;AACtD,QAAI;AAAU;AACd,MAAE,gBAAgB;AAClB,QAAI;AAAiB,qBAAe,CAAC;AAAA;AAChC,oBAAc,CAAC;AAAA,EACtB;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
   "names": []

package/dist/esm/components/SubmenuItem/index.js CHANGED Viewed

@@ -15,6 +15,7 @@ import {
 } from "../styled.js";
 import { useGetSubmenuHandlers } from "./useGetSubmenuHandlers.js";
 import { DSMenuItemName } from "../../exported-related/index.js";
+import { useGetGlobalsAndXStyledProps } from "../useGetGlobalsAndXStyledProps.js";
 const SubmenuItem = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSubmenuProps);
   useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}Submenu`);
@@ -55,6 +56,8 @@ const SubmenuItem = (props) => {
     cols.push("min-content");
     return cols;
   }, [secondaryLabel]);
+  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);
+  const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;
   return /* @__PURE__ */ jsx(
     Dropdown,
     {
@@ -92,6 +95,8 @@ const SubmenuItem = (props) => {
           pl: optionsShouldHavePadding ? 40 : 16,
           as: "div",
           "data-type": "submenu",
+          ...globalAttributes,
+          ...restXStyled,
           children: [
             Render !== void 0 ? /* @__PURE__ */ jsx(Render, { ...propsWithDefault }) : /* @__PURE__ */ jsxs(StyledContentWrapper, { cols: gridLayout, gutter: "xxs", alignItems: "center", children: [
               /* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
@@ -115,7 +120,6 @@ const SubmenuItem = (props) => {
     }
   );
 };
-SubmenuItem.propTypes = itemProps;
 SubmenuItem.displayName = `${DSMenuItemName}Submenu`;
 const SubmenuItemWithSchema = describe(SubmenuItem);
 SubmenuItemWithSchema.propTypes = itemProps;

package/dist/esm/components/SubmenuItem/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { MoreOptionsVert, ChevronRight } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSubmenuProps, itemProps } from '../../react-desc-prop-types.js';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledIconContainer,\n  StyledEllipsisButton,\n  StyledGlobalMenuItemWrapper,\n  StyledVerticalSeparator,\n  StyledContentWrapper,\n} from '../styled.js';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst SubmenuItem: React.ComponentType<DSMenuItemT.SubmenuProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SubmenuProps>>(props, defaultSubmenuProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}Submenu`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isActive,\n    disabled,\n    isSubmenuOpened,\n    rightAddon,\n    innerRef,\n    wrapperStyles,\n    optionsShouldHavePadding,\n    render: Render,\n    Dropdown,\n    dropdownProps: {\n      options,\n      openedSubmenus,\n      onSubmenuToggle,\n      selectedOptions,\n      onKeyDown,\n      onOptionClick,\n      onClickOutside,\n      minWidth,\n      maxHeight,\n    },\n  } = propsWithDefault;\n\n  // If we don't delay the opening of the poppers, the position will not be placed correctly\n  // That why we delay it for the next render using the useEffect hook\n  // TODO -- @carusox move this to utilities as a hook\n  const [delayedIsOpened, setDelayedIsOpened] = useState(false);\n\n  useEffect(() => {\n    setTimeout(() => setDelayedIsOpened(isSubmenuOpened));\n  }, [isSubmenuOpened]);\n\n  const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = useGetSubmenuHandlers(propsWithDefault);\n\n  const gridLayout = useMemo(() => {\n    const cols = ['auto'];\n    if (secondaryLabel !== undefined) cols.push('min-content');\n    cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <Dropdown\n      isOpened={delayedIsOpened}\n      options={options ?? []}\n      onOptionClick={onOptionClick}\n      startPlacementPreference=\"right-start\"\n      placementOrderPreference={['right-start', 'right-end', 'left-start', 'left-end']}\n      selectedOptions={selectedOptions}\n      openedSubmenus={openedSubmenus}\n      onSubmenuToggle={onSubmenuToggle}\n      onKeyDown={onKeyDown}\n      onClickOutside={onClickOutside}\n      customOffset={[-4, 1]}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      as=\"li\"\n      role=\"option\"\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      id={dsId}\n    >\n      <StyledGlobalMenuItemWrapper\n        pr={0}\n        isSelected={isSubmenuOpened}\n        isActive={isActive}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        ref={innerRef}\n        disabled={disabled}\n        pl={optionsShouldHavePadding ? 40 : 16}\n        as={'div' as keyof JSX.IntrinsicElements}\n        data-type=\"submenu\"\n      >\n        {Render !== undefined ? (\n          <Render {...propsWithDefault} />\n        ) : (\n          <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n            <StyledIconContainer>\n              <StyledVerticalSeparator />\n              {rightAddon === 'ellipsis' ? (\n                <StyledEllipsisButton tabIndex={-1} onClick={onEllipsisClick} disabled={disabled}>\n                  <MoreOptionsVert\n                    className=\"ds-dropdown-menu-v2-more-options\"\n                    color={disabled ? ['neutral', '500'] : ['brand-primary', '600']}\n                    size=\"s\"\n                  />\n                </StyledEllipsisButton>\n              ) : (\n                <ChevronRight color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} size=\"s\" />\n              )}\n            </StyledIconContainer>\n          </StyledContentWrapper>\n        )}\n        <span id={`dropdownmenu-submenu-${dsId}`} style={{ display: 'none' }}>\n          submenu, to open this submenu press the Right Arrow key\n        </span>\n      </StyledGlobalMenuItemWrapper>\n    </Dropdown>\n  );\n};\n\nSubmenuItem.propTypes = itemProps;\nSubmenuItem.displayName = `${DSMenuItemName}Submenu`;\nconst SubmenuItemWithSchema = describe(SubmenuItem);\nSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SubmenuItem, SubmenuItemWithSchema };\n"],
-  "mappings": "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",
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable max-lines */\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { MoreOptionsVert, ChevronRight } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSubmenuProps, itemProps } from '../../react-desc-prop-types.js';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledIconContainer,\n  StyledEllipsisButton,\n  StyledGlobalMenuItemWrapper,\n  StyledVerticalSeparator,\n  StyledContentWrapper,\n} from '../styled.js';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\n\nconst SubmenuItem: React.ComponentType<DSMenuItemT.SubmenuProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SubmenuProps>>(props, defaultSubmenuProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}Submenu`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isActive,\n    disabled,\n    isSubmenuOpened,\n    rightAddon,\n    innerRef,\n    wrapperStyles,\n    optionsShouldHavePadding,\n    render: Render,\n    Dropdown,\n    dropdownProps: {\n      options,\n      openedSubmenus,\n      onSubmenuToggle,\n      selectedOptions,\n      onKeyDown,\n      onOptionClick,\n      onClickOutside,\n      minWidth,\n      maxHeight,\n    },\n  } = propsWithDefault;\n\n  // If we don't delay the opening of the poppers, the position will not be placed correctly\n  // That why we delay it for the next render using the useEffect hook\n  // TODO -- @carusox move this to utilities as a hook\n  const [delayedIsOpened, setDelayedIsOpened] = useState(false);\n\n  useEffect(() => {\n    setTimeout(() => setDelayedIsOpened(isSubmenuOpened));\n  }, [isSubmenuOpened]);\n\n  const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = useGetSubmenuHandlers(propsWithDefault);\n\n  const gridLayout = useMemo(() => {\n    const cols = ['auto'];\n    if (secondaryLabel !== undefined) cols.push('min-content');\n    cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);\n  // We need to exclude minWidth because we have already used it as a key value for the dropdown menu options.\n  // i dont think there is a workaround for this at the moment\n  // we need a complete refactor in how we build the submenus\n  const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;\n\n  return (\n    <Dropdown\n      isOpened={delayedIsOpened}\n      options={options ?? []}\n      onOptionClick={onOptionClick}\n      startPlacementPreference=\"right-start\"\n      placementOrderPreference={['right-start', 'right-end', 'left-start', 'left-end']}\n      selectedOptions={selectedOptions}\n      openedSubmenus={openedSubmenus}\n      onSubmenuToggle={onSubmenuToggle}\n      onKeyDown={onKeyDown}\n      onClickOutside={onClickOutside}\n      customOffset={[-4, 1]}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      as=\"li\"\n      role=\"option\"\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      id={dsId}\n    >\n      <StyledGlobalMenuItemWrapper\n        pr={0}\n        isSelected={isSubmenuOpened}\n        isActive={isActive}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        ref={innerRef}\n        disabled={disabled}\n        pl={optionsShouldHavePadding ? 40 : 16}\n        as={'div' as keyof JSX.IntrinsicElements}\n        data-type=\"submenu\"\n        {...globalAttributes}\n        {...restXStyled}\n      >\n        {Render !== undefined ? (\n          <Render {...propsWithDefault} />\n        ) : (\n          <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n            <StyledIconContainer>\n              <StyledVerticalSeparator />\n              {rightAddon === 'ellipsis' ? (\n                <StyledEllipsisButton tabIndex={-1} onClick={onEllipsisClick} disabled={disabled}>\n                  <MoreOptionsVert\n                    className=\"ds-dropdown-menu-v2-more-options\"\n                    color={disabled ? ['neutral', '500'] : ['brand-primary', '600']}\n                    size=\"s\"\n                  />\n                </StyledEllipsisButton>\n              ) : (\n                <ChevronRight color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} size=\"s\" />\n              )}\n            </StyledIconContainer>\n          </StyledContentWrapper>\n        )}\n        <span id={`dropdownmenu-submenu-${dsId}`} style={{ display: 'none' }}>\n          submenu, to open this submenu press the Right Arrow key\n        </span>\n      </StyledGlobalMenuItemWrapper>\n    </Dropdown>\n  );\n};\n\nSubmenuItem.displayName = `${DSMenuItemName}Submenu`;\nconst SubmenuItemWithSchema = describe(SubmenuItem);\nSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SubmenuItem, SubmenuItemWithSchema };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/components/SubmenuItem/useGetSubmenuHandlers.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/useGetSubmenuHandlers.tsx"],
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/useGetSubmenuHandlers.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { getEllipsisHandlers } from './getEllipsisHandlers.js';\nimport { getChevronHandlers } from './getChevronHandlers.js';\n\n// what we are trying to do:\n//   Ellipsis case:\n//     onMouseEnter -> open submenu\n//     onMouseLeave -> close submenu\n//     onEllipsisClick -> we should not even invoke this handler, as the \"ellipsis\" should not even exist?\n//   Chevron case:\n//     onMouseEnter -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//     onMouseLeave -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//     onEllipsisClick -> toggle the submenu open/close as per design\n\n// what are the \"challenges\" of the task:\n//  - we have chosen to abstract multiple possible logical \"flows\" into the same layer for some reason\n//      specifically speaking this is trying to solve the\n//         \"rightAddons\" is \"ellipsis\" case\n//            at the same time as the\n//         \"rightAddons\" is \"chevron\" case\n//    they have more differences than similarities, so this is messy\n\n// @yuri since I'm both lazy and stupid, I want my code to be as stupid simple as me\n//   I am removing one layer of abstraction,\n//       ellipsis gets it's own logical flow\n//       as does chevron\n//   if you are a DRY advocate, you will probably hate me for this, I'm all for AHA (Avoid Hasty Abstractions).\nexport const useGetSubmenuHandlers = (submenuProps: Required<DSMenuItemT.SubmenuProps>) => {\n  const { rightAddon } = submenuProps;\n  return useMemo(() => {\n    if (rightAddon === 'ellipsis') return getEllipsisHandlers(submenuProps);\n    return getChevronHandlers(submenuProps);\n  }, [submenuProps, rightAddon]);\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAExB,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AAyB5B,MAAM,wBAAwB,CAAC,iBAAqD;AACzF,QAAM,EAAE,WAAW,IAAI;AACvB,SAAO,QAAQ,MAAM;AACnB,QAAI,eAAe;AAAY,aAAO,oBAAoB,YAAY;AACtE,WAAO,mBAAmB,YAAY;AAAA,EACxC,GAAG,CAAC,cAAc,UAAU,CAAC;AAC/B;",
   "names": []

package/dist/esm/components/index.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/index.tsx"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ActionMenuItem/index.js';\nexport * from './MultiMenuItem/index.js';\nexport * from './Section/index.js';\nexport * from './Separator/index.js';\nexport * from './SingleMenuItem/index.js';\nexport * from './SingleWithSubmenuItem/index.js';\nexport * from './SubmenuItem/index.js';\nexport * from './SkeletonMenuItem/index.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []

package/dist/esm/components/styled.js CHANGED Viewed

@@ -24,21 +24,6 @@ const disabledOption = () => css`
     cursor: not-allowed;
   }
 `;
-const StyledSkeletonWrapper = styled("li", {
-  name: DSMenuItemName,
-  slot: DSMenuItemSlots.MENU_ITEM_WRAPPER
-})`
-  min-height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
-  display: grid;
-  align-items: center;
-  list-style: none;
-  position: relative;
-  background-color: 'white';
-  ${xStyledCommonProps}
-`;
 const StyledGlobalMenuItemWrapper = styled("li", {
   name: DSMenuItemName,
   slot: DSMenuItemSlots.MENU_ITEM_WRAPPER
@@ -168,7 +153,6 @@ export {
   StyledSectionWrapper,
   StyledSeparator,
   StyledSeparatorWrapper,
-  StyledSkeletonWrapper,
   StyledVerticalSeparator
 };
 //# sourceMappingURL=styled.js.map