@elliemae/ds-global-header 3.70.0-next.62 → 3.70.0-next.69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/constants/index.js +4 -1
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/AppPickerRenderer.js +2 -1
- package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/AppPickerRenderer.js.map +2 -2
- package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/TriggerDefaultComponent.js.map +2 -2
- package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/useAppPickerCTX.js +3 -1
- package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/useAppPickerCTX.js.map +2 -2
- package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js +1 -0
- package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js.map +2 -2
- package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/react-desc-prop-types.js.map +2 -2
- package/dist/esm/constants/index.js +4 -1
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/AppPickerRenderer.js +2 -1
- package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/AppPickerRenderer.js.map +2 -2
- package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/TriggerDefaultComponent.js.map +2 -2
- package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/useAppPickerCTX.js +3 -1
- package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/useAppPickerCTX.js.map +2 -2
- package/dist/esm/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/Toolbar/outOfTheBox/PopupMenu/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js +1 -0
- package/dist/esm/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js.map +2 -2
- package/dist/esm/parts/Toolbar/outOfTheBox/SearchToggle/react-desc-prop-types.js.map +2 -2
- package/dist/types/constants/index.d.ts +1 -1
- package/dist/types/parts/Toolbar/outOfTheBox/AppPicker/useAppPickerCTX.d.ts +13 -13
- package/package.json +13 -13
|
@@ -174,6 +174,9 @@ const GLOBAL_HEADER_DATA_TESTID = {
|
|
|
174
174
|
...(0, import_ds_system.slotObjectToDataTestIds)(DSGlobalHeaderName, GLOBAL_HEADER_SLOTS),
|
|
175
175
|
// this are the "hardcoded" data-testid that maps to the slots in the component that we keep as they were for backwards compatibility
|
|
176
176
|
...DSGlobalHeaderDatatestidFlattened,
|
|
177
|
-
SEARCH_TOGGLE_TRIGGER_BUTTON: "gh-toolbar-item"
|
|
177
|
+
SEARCH_TOGGLE_TRIGGER_BUTTON: "gh-toolbar-item",
|
|
178
|
+
MENUBAR_SEARCH_TOGGLE_CONTAINER: "ds-global-header-menubar-item-searchtoggle-container"
|
|
179
|
+
// /\ PUI-19020 was ds-global-header-... changed to ds-globalheader ...
|
|
180
|
+
// unexpected and unwanted change in the data-testid existing testid detected by QA.
|
|
178
181
|
};
|
|
179
182
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSGlobalHeaderName = 'DSGlobalheader';\n\n/* ************************************************************************************************\n * LEGACY VARIABLES\n * ************************************************************************************************\n * WE KEEP THIS AROUND TO AVOID BREAKING CHANGES\n * THE NEW VARIABLES INHERIT FROM THIS TO AVOID BREAKING CHANGES!!!\n ************************************************************************************************ */\n\n/**\n * @deprecated - use GLOBAL_HEADER_SLOTS instead, it containse the full list and is flat.\n */\nexport const DSGlobalHeaderSlots = {\n CONTAINER: 'root',\n LOGO: {\n CONTAINER: 'logo-container',\n },\n BREADCRUMB: {\n CONTAINER: 'breadcrumb-container',\n PIPE: 'breadcrumb-pipe',\n CHEVRON: 'breadcrumb-chevron',\n LIST: 'breadcrumb-list',\n ITEM: 'breadcrumb-item',\n ITEM_LINK: 'breadcrumb-item-link',\n ITEM_LINK_LABEL: 'breadcrumb-item-link-label',\n },\n MENUBAR: {\n CONTAINER: 'menubar-container',\n LIST: 'menubar-list',\n ITEM: 'menubar-item',\n ITEM_BUTTON: 'menubar-item-button',\n POPUP_MENU: {\n LIST: 'menubar-item-popupmenu-list',\n ITEM: 'menubar-item-popupmenu-item',\n ITEM_BUTTON: 'menubar-item-popupmenu-item-button',\n SEPARATOR: 'menubar-item-popupmenu-separator',\n ITEM_BUTTON_LABEL: 'menubar-item-popupmenu-item-label',\n },\n SEARCH_TOGGLE: {\n CONTAINER: 'menubar-item-searchtoggle-container',\n },\n },\n};\n/**\n * @deprecated - use GLOBAL_HEADER_SLOTS instead, it containse the full list.\n */\nexport const DSGlobalHeaderSlotsFlattened = {\n CONTAINER: DSGlobalHeaderSlots.CONTAINER,\n LOGO_CONTAINER: DSGlobalHeaderSlots.LOGO.CONTAINER,\n BREADCRUMB_CONTAINER: DSGlobalHeaderSlots.BREADCRUMB.CONTAINER,\n BREADCRUMB_PIPE: DSGlobalHeaderSlots.BREADCRUMB.PIPE,\n BREADCRUMB_CHEVRON: DSGlobalHeaderSlots.BREADCRUMB.CHEVRON,\n BREADCRUMB_LIST: DSGlobalHeaderSlots.BREADCRUMB.LIST,\n BREADCRUMB_ITEM: DSGlobalHeaderSlots.BREADCRUMB.ITEM,\n BREADCRUMB_ITEM_LINK: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK,\n BREADCRUMB_ITEM_LINK_LABEL: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK_LABEL,\n MENUBAR_CONTAINER: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n MENUBAR_LIST: DSGlobalHeaderSlots.MENUBAR.LIST,\n MENUBAR_ITEM: DSGlobalHeaderSlots.MENUBAR.ITEM,\n MENUBAR_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.ITEM_BUTTON,\n MENUBAR_POPUP_MENU_LIST: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.LIST,\n MENUBAR_POPUP_MENU_ITEM: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM,\n MENUBAR_POPUP_MENU_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON,\n MENUBAR_POPUP_MENU_SEPARATOR: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.SEPARATOR,\n MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL,\n MENUBAR_SEARCH_TOGGLE_CONTAINER: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER,\n};\n// maintain the same order as the original object\n// for slots showcase purpose\n/**\n * @deprecated - use GLOBAL_HEADER_DATA_TESTID instead, it containse the full list and is flat.\n */\nexport const DSGlobalHeaderDatatestid = {\n CONTAINER: 'ds-global-header',\n LOGO: {\n CONTAINER: 'ds-global-header-logo-container',\n },\n BREADCRUMB: {\n CHEVRON: 'ds-globalheader-breadcrumb-chevron',\n CONTAINER: 'ds-global-header-breadcrumb-container',\n PIPE: 'ds-global-header-breadcrumb-pipe',\n LIST: 'ds-global-header-breadcrumb-list',\n ITEM: 'ds-global-header-breadcrumb-item',\n ITEM_LINK: 'gh-breadcrumb-btn',\n ITEM_LINK_LABEL: 'ds-global-header-breadcrumb-item-link-label',\n },\n MENUBAR: {\n CONTAINER: 'ds-global-header-menubar-container',\n LIST: 'ds-global-header-menubar-list',\n ITEM: 'ds-global-header-menubar-item',\n ITEM_BUTTON: 'gh-toolbar-item',\n POPUP_MENU: {\n LIST: 'ds-global-header-menubar-item-popupmenu-list',\n ITEM: 'ds-global-header-menubar-item-popupmenu-item',\n ITEM_BUTTON: 'ds-global-header-menubar-item-popupmenu-item-button',\n ITEM_BUTTON_LABEL: 'ds-global-header-menubar-item-popupmenu-item-label',\n SEPARATOR: 'ds-global-header-menubar-item-popupmenu-separator',\n },\n SEARCH_TOGGLE: {\n ITEM_BUTTON: 'gh-toolbar-item',\n },\n },\n};\n\n// maintain the same order as the original object\n// for slots showcase purpose\n/**\n * @deprecated - use GLOBAL_HEADER_DATA_TESTID instead, it containse the full list\n */\nexport const DSGlobalHeaderDatatestidFlattened = {\n CONTAINER: 'ds-global-header',\n LOGO_CONTAINER: 'ds-global-header-logo-container',\n BREADCRUMB_CONTAINER: 'ds-global-header-breadcrumb-container',\n BREADCRUMB_PIPE: 'ds-global-header-breadcrumb-pipe',\n BREADCRUMB_LIST: 'ds-global-header-breadcrumb-list',\n BREADCRUMB_ITEM: 'ds-global-header-breadcrumb-item',\n BREADCRUMB_ITEM_LINK: 'gh-breadcrumb-btn',\n BREADCRUMB_ITEM_LINK_LABEL: 'ds-global-header-breadcrumb-item-link-label',\n BREADCRUMB_CHEVRON: 'ds-globalheader-breadcrumb-chevron',\n MENUBAR_CONTAINER: 'ds-global-header-menubar-container',\n MENUBAR_LIST: 'ds-global-header-menubar-list',\n MENUBAR_ITEM: 'ds-global-header-menubar-item',\n MENUBAR_ITEM_BUTTON: 'gh-toolbar-item',\n MENUBAR_POPUP_MENU_LIST: 'ds-global-header-menubar-item-popupmenu-list',\n MENUBAR_POPUP_MENU_ITEM: 'ds-global-header-menubar-item-popupmenu-item',\n MENUBAR_POPUP_MENU_ITEM_BUTTON: 'ds-global-header-menubar-item-popupmenu-item-button',\n MENUBAR_POPUP_MENU_ITEM_LABEL: 'ds-global-header-menubar-item-popupmenu-item-label',\n MENUBAR_POPUP_MENU_SEPARATOR: 'ds-global-header-menubar-item-popupmenu-separator',\n MENUBAR_SEARCH_TOGGLE_ITEM_BUTTON: 'gh-toolbar-item',\n};\n\n/* ************************************************************************************************\n * From here on our it's the \"new\" convention, but adapted to inherit from the legacy variables\n ************************************************************************************************ */\nexport const FONT_DETECTOR = {\n SMALL: 1,\n MEDIUM: 2,\n LARGE: 3,\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const GLOBAL_HEADER_SLOTS = {\n ...DSGlobalHeaderSlotsFlattened,\n // the following slots are completely new, added to the component post BREAKING CHANGES\n // https://confluence.ice.com/x/6SqFPQ\n // [Breaking Changes] Global Header - Search Toggle\n // hence, given they are new, we are not adding them to the legacy variables, we are not going to overwrite the auto-generation pattern.\n SEARCH_TOGGLE_SPINBUTTON_WRAPPER: 'searchtoggle-spinbutton-wrapper',\n SEARCH_TOGGLE_SPINBUTTON_TEXT: 'searchtoggle-spinbutton-text',\n SEARCH_TOGGLE_SPINBUTTON_SEPARATOR: 'searchtoggle-spinbutton-separator',\n SEARCH_TOGGLE_SPINBUTTON_PREV: 'searchtoggle-spinbutton-prev',\n SEARCH_TOGGLE_SPINBUTTON_NEXT: 'searchtoggle-spinbutton-next',\n SEARCH_TOGGLE_TEXTINPUT: 'searchtoggle-textinput',\n SEARCH_TOGGLE_TRIGGER_BUTTON: 'searchtoggle-trigger-button',\n SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: 'searchtoggle-expanded-content-wrapper',\n // The popup menu item's own root \u2014 the element consumers target to reach the whole item, and the one\n // that receives its xstyled props. Post-convention slot, so it carries no legacy data-testid override.\n MENUBAR_ITEM_POPUPMENU_CONTAINER: 'menubar-item-popupmenu-container',\n} as const;\n\n// PUI-17973 \u2014 default accessible name for the search input, applied when the consumer does not\n// supply their own aria-label (a consumer aria-label overrides it). Guides screen-reader users to\n// the result navigation (the spinbutton), which announces the result count/position natively.\nexport const SEARCH_TOGGLE_DEFAULT_ARIA_LABEL = 'Search. Press Tab twice to reach the result navigation.';\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const GLOBAL_HEADER_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSGlobalHeaderName, GLOBAL_HEADER_SLOTS),\n // this are the \"hardcoded\" data-testid that maps to the slots in the component that we keep as they were for backwards compatibility\n ...DSGlobalHeaderDatatestidFlattened,\n SEARCH_TOGGLE_TRIGGER_BUTTON: 'gh-toolbar-item',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSGlobalHeaderName = 'DSGlobalheader';\n\n/* ************************************************************************************************\n * LEGACY VARIABLES\n * ************************************************************************************************\n * WE KEEP THIS AROUND TO AVOID BREAKING CHANGES\n * THE NEW VARIABLES INHERIT FROM THIS TO AVOID BREAKING CHANGES!!!\n ************************************************************************************************ */\n\n/**\n * @deprecated - use GLOBAL_HEADER_SLOTS instead, it containse the full list and is flat.\n */\nexport const DSGlobalHeaderSlots = {\n CONTAINER: 'root',\n LOGO: {\n CONTAINER: 'logo-container',\n },\n BREADCRUMB: {\n CONTAINER: 'breadcrumb-container',\n PIPE: 'breadcrumb-pipe',\n CHEVRON: 'breadcrumb-chevron',\n LIST: 'breadcrumb-list',\n ITEM: 'breadcrumb-item',\n ITEM_LINK: 'breadcrumb-item-link',\n ITEM_LINK_LABEL: 'breadcrumb-item-link-label',\n },\n MENUBAR: {\n CONTAINER: 'menubar-container',\n LIST: 'menubar-list',\n ITEM: 'menubar-item',\n ITEM_BUTTON: 'menubar-item-button',\n POPUP_MENU: {\n LIST: 'menubar-item-popupmenu-list',\n ITEM: 'menubar-item-popupmenu-item',\n ITEM_BUTTON: 'menubar-item-popupmenu-item-button',\n SEPARATOR: 'menubar-item-popupmenu-separator',\n ITEM_BUTTON_LABEL: 'menubar-item-popupmenu-item-label',\n },\n SEARCH_TOGGLE: {\n CONTAINER: 'menubar-item-searchtoggle-container',\n },\n },\n};\n/**\n * @deprecated - use GLOBAL_HEADER_SLOTS instead, it containse the full list.\n */\nexport const DSGlobalHeaderSlotsFlattened = {\n CONTAINER: DSGlobalHeaderSlots.CONTAINER,\n LOGO_CONTAINER: DSGlobalHeaderSlots.LOGO.CONTAINER,\n BREADCRUMB_CONTAINER: DSGlobalHeaderSlots.BREADCRUMB.CONTAINER,\n BREADCRUMB_PIPE: DSGlobalHeaderSlots.BREADCRUMB.PIPE,\n BREADCRUMB_CHEVRON: DSGlobalHeaderSlots.BREADCRUMB.CHEVRON,\n BREADCRUMB_LIST: DSGlobalHeaderSlots.BREADCRUMB.LIST,\n BREADCRUMB_ITEM: DSGlobalHeaderSlots.BREADCRUMB.ITEM,\n BREADCRUMB_ITEM_LINK: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK,\n BREADCRUMB_ITEM_LINK_LABEL: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK_LABEL,\n MENUBAR_CONTAINER: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n MENUBAR_LIST: DSGlobalHeaderSlots.MENUBAR.LIST,\n MENUBAR_ITEM: DSGlobalHeaderSlots.MENUBAR.ITEM,\n MENUBAR_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.ITEM_BUTTON,\n MENUBAR_POPUP_MENU_LIST: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.LIST,\n MENUBAR_POPUP_MENU_ITEM: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM,\n MENUBAR_POPUP_MENU_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON,\n MENUBAR_POPUP_MENU_SEPARATOR: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.SEPARATOR,\n MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL,\n MENUBAR_SEARCH_TOGGLE_CONTAINER: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER,\n};\n// maintain the same order as the original object\n// for slots showcase purpose\n/**\n * @deprecated - use GLOBAL_HEADER_DATA_TESTID instead, it containse the full list and is flat.\n */\nexport const DSGlobalHeaderDatatestid = {\n CONTAINER: 'ds-global-header',\n LOGO: {\n CONTAINER: 'ds-global-header-logo-container',\n },\n BREADCRUMB: {\n CHEVRON: 'ds-globalheader-breadcrumb-chevron',\n CONTAINER: 'ds-global-header-breadcrumb-container',\n PIPE: 'ds-global-header-breadcrumb-pipe',\n LIST: 'ds-global-header-breadcrumb-list',\n ITEM: 'ds-global-header-breadcrumb-item',\n ITEM_LINK: 'gh-breadcrumb-btn',\n ITEM_LINK_LABEL: 'ds-global-header-breadcrumb-item-link-label',\n },\n MENUBAR: {\n CONTAINER: 'ds-global-header-menubar-container',\n LIST: 'ds-global-header-menubar-list',\n ITEM: 'ds-global-header-menubar-item',\n ITEM_BUTTON: 'gh-toolbar-item',\n POPUP_MENU: {\n LIST: 'ds-global-header-menubar-item-popupmenu-list',\n ITEM: 'ds-global-header-menubar-item-popupmenu-item',\n ITEM_BUTTON: 'ds-global-header-menubar-item-popupmenu-item-button',\n ITEM_BUTTON_LABEL: 'ds-global-header-menubar-item-popupmenu-item-label',\n SEPARATOR: 'ds-global-header-menubar-item-popupmenu-separator',\n },\n SEARCH_TOGGLE: {\n ITEM_BUTTON: 'gh-toolbar-item',\n },\n },\n};\n\n// maintain the same order as the original object\n// for slots showcase purpose\n/**\n * @deprecated - use GLOBAL_HEADER_DATA_TESTID instead, it containse the full list\n */\nexport const DSGlobalHeaderDatatestidFlattened = {\n CONTAINER: 'ds-global-header',\n LOGO_CONTAINER: 'ds-global-header-logo-container',\n BREADCRUMB_CONTAINER: 'ds-global-header-breadcrumb-container',\n BREADCRUMB_PIPE: 'ds-global-header-breadcrumb-pipe',\n BREADCRUMB_LIST: 'ds-global-header-breadcrumb-list',\n BREADCRUMB_ITEM: 'ds-global-header-breadcrumb-item',\n BREADCRUMB_ITEM_LINK: 'gh-breadcrumb-btn',\n BREADCRUMB_ITEM_LINK_LABEL: 'ds-global-header-breadcrumb-item-link-label',\n BREADCRUMB_CHEVRON: 'ds-globalheader-breadcrumb-chevron',\n MENUBAR_CONTAINER: 'ds-global-header-menubar-container',\n MENUBAR_LIST: 'ds-global-header-menubar-list',\n MENUBAR_ITEM: 'ds-global-header-menubar-item',\n MENUBAR_ITEM_BUTTON: 'gh-toolbar-item',\n MENUBAR_POPUP_MENU_LIST: 'ds-global-header-menubar-item-popupmenu-list',\n MENUBAR_POPUP_MENU_ITEM: 'ds-global-header-menubar-item-popupmenu-item',\n MENUBAR_POPUP_MENU_ITEM_BUTTON: 'ds-global-header-menubar-item-popupmenu-item-button',\n MENUBAR_POPUP_MENU_ITEM_LABEL: 'ds-global-header-menubar-item-popupmenu-item-label',\n MENUBAR_POPUP_MENU_SEPARATOR: 'ds-global-header-menubar-item-popupmenu-separator',\n MENUBAR_SEARCH_TOGGLE_ITEM_BUTTON: 'gh-toolbar-item',\n};\n\n/* ************************************************************************************************\n * From here on our it's the \"new\" convention, but adapted to inherit from the legacy variables\n ************************************************************************************************ */\nexport const FONT_DETECTOR = {\n SMALL: 1,\n MEDIUM: 2,\n LARGE: 3,\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const GLOBAL_HEADER_SLOTS = {\n ...DSGlobalHeaderSlotsFlattened,\n // the following slots are completely new, added to the component post BREAKING CHANGES\n // https://confluence.ice.com/x/6SqFPQ\n // [Breaking Changes] Global Header - Search Toggle\n // hence, given they are new, we are not adding them to the legacy variables, we are not going to overwrite the auto-generation pattern.\n SEARCH_TOGGLE_SPINBUTTON_WRAPPER: 'searchtoggle-spinbutton-wrapper',\n SEARCH_TOGGLE_SPINBUTTON_TEXT: 'searchtoggle-spinbutton-text',\n SEARCH_TOGGLE_SPINBUTTON_SEPARATOR: 'searchtoggle-spinbutton-separator',\n SEARCH_TOGGLE_SPINBUTTON_PREV: 'searchtoggle-spinbutton-prev',\n SEARCH_TOGGLE_SPINBUTTON_NEXT: 'searchtoggle-spinbutton-next',\n SEARCH_TOGGLE_TEXTINPUT: 'searchtoggle-textinput',\n SEARCH_TOGGLE_TRIGGER_BUTTON: 'searchtoggle-trigger-button',\n SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: 'searchtoggle-expanded-content-wrapper',\n // The popup menu item's own root \u2014 the element consumers target to reach the whole item, and the one\n // that receives its xstyled props. Post-convention slot, so it carries no legacy data-testid override.\n MENUBAR_ITEM_POPUPMENU_CONTAINER: 'menubar-item-popupmenu-container',\n} as const;\n\n// PUI-17973 \u2014 default accessible name for the search input, applied when the consumer does not\n// supply their own aria-label (a consumer aria-label overrides it). Guides screen-reader users to\n// the result navigation (the spinbutton), which announces the result count/position natively.\nexport const SEARCH_TOGGLE_DEFAULT_ARIA_LABEL = 'Search. Press Tab twice to reach the result navigation.';\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const GLOBAL_HEADER_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSGlobalHeaderName, GLOBAL_HEADER_SLOTS),\n // this are the \"hardcoded\" data-testid that maps to the slots in the component that we keep as they were for backwards compatibility\n ...DSGlobalHeaderDatatestidFlattened,\n SEARCH_TOGGLE_TRIGGER_BUTTON: 'gh-toolbar-item',\n MENUBAR_SEARCH_TOGGLE_CONTAINER: 'ds-global-header-menubar-item-searchtoggle-container',\n // /\\ PUI-19020 was ds-global-header-... changed to ds-globalheader ...\n // unexpected and unwanted change in the data-testid existing testid detected by QA.\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,qBAAqB;AAY3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,MAAM;AAAA,IACJ,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,WAAW;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,iBAAiB;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,WAAW;AAAA,MACX,mBAAmB;AAAA,IACrB;AAAA,IACA,eAAe;AAAA,MACb,WAAW;AAAA,IACb;AAAA,EACF;AACF;AAIO,MAAM,+BAA+B;AAAA,EAC1C,WAAW,oBAAoB;AAAA,EAC/B,gBAAgB,oBAAoB,KAAK;AAAA,EACzC,sBAAsB,oBAAoB,WAAW;AAAA,EACrD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,oBAAoB,oBAAoB,WAAW;AAAA,EACnD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,sBAAsB,oBAAoB,WAAW;AAAA,EACrD,4BAA4B,oBAAoB,WAAW;AAAA,EAC3D,mBAAmB,oBAAoB,QAAQ;AAAA,EAC/C,cAAc,oBAAoB,QAAQ;AAAA,EAC1C,cAAc,oBAAoB,QAAQ;AAAA,EAC1C,qBAAqB,oBAAoB,QAAQ;AAAA,EACjD,yBAAyB,oBAAoB,QAAQ,WAAW;AAAA,EAChE,yBAAyB,oBAAoB,QAAQ,WAAW;AAAA,EAChE,gCAAgC,oBAAoB,QAAQ,WAAW;AAAA,EACvE,8BAA8B,oBAAoB,QAAQ,WAAW;AAAA,EACrE,sCAAsC,oBAAoB,QAAQ,WAAW;AAAA,EAC7E,iCAAiC,oBAAoB,QAAQ,cAAc;AAC7E;AAMO,MAAM,2BAA2B;AAAA,EACtC,WAAW;AAAA,EACX,MAAM;AAAA,IACJ,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,iBAAiB;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,mBAAmB;AAAA,MACnB,WAAW;AAAA,IACb;AAAA,IACA,eAAe;AAAA,MACb,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAOO,MAAM,oCAAoC;AAAA,EAC/C,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,4BAA4B;AAAA,EAC5B,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,gCAAgC;AAAA,EAChC,+BAA+B;AAAA,EAC/B,8BAA8B;AAAA,EAC9B,mCAAmC;AACrC;AAKO,MAAM,gBAAgB;AAAA,EAC3B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAGO,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKH,kCAAkC;AAAA,EAClC,+BAA+B;AAAA,EAC/B,oCAAoC;AAAA,EACpC,+BAA+B;AAAA,EAC/B,+BAA+B;AAAA,EAC/B,yBAAyB;AAAA,EACzB,8BAA8B;AAAA,EAC9B,wCAAwC;AAAA;AAAA;AAAA,EAGxC,kCAAkC;AACpC;AAKO,MAAM,mCAAmC;AAEzC,MAAM,4BAA4B;AAAA,EACvC,OAAG,0CAAwB,oBAAoB,mBAAmB;AAAA;AAAA,EAElE,GAAG;AAAA,EACH,8BAA8B;AAAA,EAC9B,iCAAiC;AAAA;AAAA;AAGnC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,13 +38,14 @@ var import_react = __toESM(require("react"));
|
|
|
38
38
|
var import_AppPickerCTX = require("./AppPickerCTX.js");
|
|
39
39
|
var import_TriggerDefaultComponent = require("./TriggerDefaultComponent.js");
|
|
40
40
|
const AppPickerRenderer = () => {
|
|
41
|
-
const { contractProps } = import_react.default.useContext(import_AppPickerCTX.AppPickerCtx);
|
|
41
|
+
const { contractProps, id } = import_react.default.useContext(import_AppPickerCTX.AppPickerCtx);
|
|
42
42
|
const consumerOwnsTheTrigger = Boolean(contractProps.renderTrigger || contractProps.TriggerComponent);
|
|
43
43
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
44
44
|
import_ds_app_picker.DSAppPicker,
|
|
45
45
|
{
|
|
46
46
|
openAndFocusOnArrowKeys: true,
|
|
47
47
|
...consumerOwnsTheTrigger ? {} : { TriggerComponent: import_TriggerDefaultComponent.TriggerDefaultComponent },
|
|
48
|
+
...id ? { id } : {},
|
|
48
49
|
...contractProps
|
|
49
50
|
}
|
|
50
51
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPickerRenderer.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { DSAppPicker } from '@elliemae/ds-app-picker';\nimport React from 'react';\nimport { AppPickerCtx } from './AppPickerCTX.js';\nimport { TriggerDefaultComponent } from './TriggerDefaultComponent.js';\n\nexport const AppPickerRenderer = (): JSX.Element => {\n const { contractProps } = React.useContext(AppPickerCtx);\n\n /*\n * Our default trigger applies only when the consumer supplied neither trigger API.\n *\n * This one cannot be expressed by spread order, unlike every other default below. DSAppPicker's\n * Trigger gives `TriggerComponent` precedence over `renderTrigger` (Trigger.tsx: \"TriggerComponent\n * wins when both custom APIs are supplied\"), so passing ours unconditionally would silently discard a\n * consumer's `renderTrigger` no matter where `contractProps` is spread \u2014 the spread would forward\n * their prop faithfully and DSAppPicker would then ignore it. Deciding here instead keeps both custom\n * trigger APIs working through the toolbar config.\n */\n const consumerOwnsTheTrigger = Boolean(contractProps.renderTrigger || contractProps.TriggerComponent);\n\n return (\n <DSAppPicker\n // Dimsum IoC direction: our default renders first and the consumer's contract props are spread over\n // it, so anything they put in `componentProps` wins and becomes theirs to own.\n // `getDSAppPickerContractProps` drops keys explicitly set to undefined, so an unset key in the config\n // never erases a default here.\n //\n // Note what is NOT passed: no `isOpen`, no `onKeyDown`, no `onClickOutside`. Passing `isOpen` makes\n // the picker controlled and passing `onKeyDown` switches off its Escape routing and focus return \u2014\n // either way this part would owe a reimplementation of behaviour DSAppPicker already has. See\n // useAppPickerCTX for the full statement.\n //\n // The toolbar is a menubar, so ArrowDown/ArrowUp on a toolbar item open it \u2014 that is this widget's\n // keyboard contract, not an application-level choice, which is why it is opted in here rather than\n // left to each consumer. The picker owns the whole flow: it records the arrow-key activation and\n // seeds focus on the selected app (first for ArrowDown, last for ArrowUp). Spread order still lets a\n // consumer turn it off through `componentProps`.\n openAndFocusOnArrowKeys\n // `TriggerComponent`, not the deprecated `renderTrigger`: DSAppPicker renders this one as JSX so it\n // gets its own fiber and may use hooks, and it is the only trigger API that receives the id the\n // panel's aria-labelledby points at. See TriggerDefaultComponent for the full reasoning.\n {...(consumerOwnsTheTrigger ? {} : { TriggerComponent: TriggerDefaultComponent })}\n {...contractProps}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBnB;AArBJ,2BAA4B;AAC5B,mBAAkB;AAClB,0BAA6B;AAC7B,qCAAwC;AAEjC,MAAM,oBAAoB,MAAmB;AAClD,QAAM,EAAE,
|
|
4
|
+
"sourcesContent": ["import { DSAppPicker } from '@elliemae/ds-app-picker';\nimport React from 'react';\nimport { AppPickerCtx } from './AppPickerCTX.js';\nimport { TriggerDefaultComponent } from './TriggerDefaultComponent.js';\n\nexport const AppPickerRenderer = (): JSX.Element => {\n const { contractProps, id } = React.useContext(AppPickerCtx);\n\n /*\n * Our default trigger applies only when the consumer supplied neither trigger API.\n *\n * This one cannot be expressed by spread order, unlike every other default below. DSAppPicker's\n * Trigger gives `TriggerComponent` precedence over `renderTrigger` (Trigger.tsx: \"TriggerComponent\n * wins when both custom APIs are supplied\"), so passing ours unconditionally would silently discard a\n * consumer's `renderTrigger` no matter where `contractProps` is spread \u2014 the spread would forward\n * their prop faithfully and DSAppPicker would then ignore it. Deciding here instead keeps both custom\n * trigger APIs working through the toolbar config.\n */\n const consumerOwnsTheTrigger = Boolean(contractProps.renderTrigger || contractProps.TriggerComponent);\n\n return (\n <DSAppPicker\n // Dimsum IoC direction: our default renders first and the consumer's contract props are spread over\n // it, so anything they put in `componentProps` wins and becomes theirs to own.\n // `getDSAppPickerContractProps` drops keys explicitly set to undefined, so an unset key in the config\n // never erases a default here.\n //\n // Note what is NOT passed: no `isOpen`, no `onKeyDown`, no `onClickOutside`. Passing `isOpen` makes\n // the picker controlled and passing `onKeyDown` switches off its Escape routing and focus return \u2014\n // either way this part would owe a reimplementation of behaviour DSAppPicker already has. See\n // useAppPickerCTX for the full statement.\n //\n // The toolbar is a menubar, so ArrowDown/ArrowUp on a toolbar item open it \u2014 that is this widget's\n // keyboard contract, not an application-level choice, which is why it is opted in here rather than\n // left to each consumer. The picker owns the whole flow: it records the arrow-key activation and\n // seeds focus on the selected app (first for ArrowDown, last for ArrowUp). Spread order still lets a\n // consumer turn it off through `componentProps`.\n openAndFocusOnArrowKeys\n // `TriggerComponent`, not the deprecated `renderTrigger`: DSAppPicker renders this one as JSX so it\n // gets its own fiber and may use hooks, and it is the only trigger API that receives the id the\n // panel's aria-labelledby points at. See TriggerDefaultComponent for the full reasoning.\n {...(consumerOwnsTheTrigger ? {} : { TriggerComponent: TriggerDefaultComponent })}\n /*\n * PUI-18985 \u2014 the item-level `id` names the App Picker, and DSAppPicker derives every id in the\n * widget from it: the root takes it unchanged, the trigger becomes `getIdForAppPickerTrigger(id)`, and the\n * dialog's `aria-labelledby` points at that same trigger id. Handing it over here is what makes\n * those three agree.\n *\n * Before this, `id` rode along in `otherProps` and was spread onto the trigger AFTER the id\n * DSAppPicker had supplied, so the trigger carried the bare item id while the dialog still pointed\n * at the generated one \u2014 a pointer to no element, and a dialog with no accessible name (axe\n * `aria-dialog-name`, serious). useAppPickerCTX now reads `id` out of `otherProps` so only this\n * route exists.\n *\n * Consumers who addressed the trigger by the bare item id migrate to `getIdForAppPickerTrigger`, exported by\n * ds-app-picker; the bare id now selects the picker root. Omitted when unset, so DSAppPicker's own\n * generated instance id is untouched.\n */\n {...(id ? { id } : {})}\n {...contractProps}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBnB;AArBJ,2BAA4B;AAC5B,mBAAkB;AAClB,0BAA6B;AAC7B,qCAAwC;AAEjC,MAAM,oBAAoB,MAAmB;AAClD,QAAM,EAAE,eAAe,GAAG,IAAI,aAAAA,QAAM,WAAW,gCAAY;AAY3D,QAAM,yBAAyB,QAAQ,cAAc,iBAAiB,cAAc,gBAAgB;AAEpG,SACE;AAAA,IAAC;AAAA;AAAA,MAgBC,yBAAuB;AAAA,MAItB,GAAI,yBAAyB,CAAC,IAAI,EAAE,kBAAkB,uDAAwB;AAAA,MAiB9E,GAAI,KAAK,EAAE,GAAG,IAAI,CAAC;AAAA,MACnB,GAAG;AAAA;AAAA,EACN;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/TriggerDefaultComponent.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { DSAppPickerT } from '@elliemae/ds-app-picker';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { getGlobalAttributes, getXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React from 'react';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../../../constants/index.js';\nimport { StyledButton } from '../../../styles.js';\nimport { AppPickerCtx } from './AppPickerCTX.js';\n\n/*\n * The toolbar's default App Picker trigger, as a real component with its own module.\n *\n * MUST be handed to DSAppPicker as `TriggerComponent`, never `renderTrigger`. Two reasons, both hard:\n *\n * 1. This component uses `useContext`. DSAppPicker renders `TriggerComponent` as JSX so React creates a\n * fiber for it, which is what makes hooks here legal. `renderTrigger` is invoked as a plain function\n * (`renderTrigger({ ref })`) to honour the legacy DSPopover render-prop contract, so any hook inside\n * it registers against DSAppPicker's Trigger fiber instead \u2014 a rules-of-hooks violation React cannot\n * detect at runtime.\n * 2. Only `TriggerComponent` receives `dialogLabelId`, the id the panel's `aria-labelledby` points at.\n * It arrives as `id` and is applied below; drop it and the dialog has no accessible name.\n */\nexport const TriggerDefaultComponent = ({\n innerRef,\n id,\n onClick: appPickerOnClick,\n onKeyDown: appPickerOnKeyDown,\n 'aria-haspopup': ariaHasPopup,\n}: DSAppPickerT.TriggerComponentProps): JSX.Element => {\n const { triggerOnClick, setRef, triggerRef, label, otherProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader } =\n React.useContext(AppPickerCtx);\n\n /*\n * Three refs on one node: the toolbar's arrow-key roving registration, a consumer-supplied `triggerRef`,\n * and DSAppPicker's own \u2014 the last is what its focus return targets after a scoped Escape, so dropping\n * `innerRef` here silently strands focus when the panel closes.\n *\n * No focus logic beyond that. Returning focus to this trigger is DSAppPicker's job and it does it, which\n * is only true while this part supplies no `onKeyDown` to it \u2014 see useAppPickerCTX.\n */\n const handleTriggerRefs = React.useCallback(\n (buttonRef: HTMLButtonElement) => {\n setRef(buttonRef);\n mergeRefs(triggerRef, innerRef)(buttonRef);\n },\n [setRef, triggerRef, innerRef],\n );\n\n /*\n * DSAppPicker's `onClick` does the opening AND records whether the activation came from the keyboard\n * (`e.detail === 0`), which is what lets it land focus on the selected app rather than the panel. It must\n * always run.\n *\n * `triggerOnClick` is the consumer's own click callback and runs alongside it. It does not suppress the\n * open: a consumer who needs to own the transition supplies `componentProps.isOpen`, which makes the\n * picker controlled and renders its internal flip inert.\n */\n const handleOnClickComposed = React.useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n appPickerOnClick(e);\n triggerOnClick?.(e as React.MouseEvent<HTMLButtonElement>);\n },\n [appPickerOnClick, triggerOnClick],\n );\n\n return (\n <StyledButton\n id={id}\n onClick={handleOnClickComposed}\n onKeyDown={appPickerOnKeyDown}\n innerRef={handleTriggerRefs}\n aria-label={label}\n data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON}\n aria-haspopup={ariaHasPopup}\n // No `aria-expanded`, matching DSAppPicker's own trigger. This one opens a `role=\"dialog\"`, and in\n // the dialog pattern the open state is conveyed by the dialog's presence, not by an attribute on the\n // control. The sibling toolbar items DO carry it correctly \u2014 `ds-popup-menu` opens a `role=\"menu\"`\n // and `ds-search-toggle` expands an inline region, which are the patterns the attribute belongs to.\n // Item-level global attributes land here, AFTER the handlers above, so an `onKeyDown` or `onClick`\n // set directly on the toolbar entry replaces the one this trigger wired. That is the documented\n // item-level override and `WithControlledAppPicker` relies on it \u2014 but note what an `onKeyDown`\n // override costs now: it takes over `openAndFocusOnArrowKeys`, so the arrow keys stop opening the\n // picker unless the consumer opens it themselves.\n {...getGlobalAttributes(otherProps)}\n // The part-level xstyled layer, which the contract advertises \u2014 this is the element that serves it.\n {...getXstyledProps(otherProps)}\n type=\"button\"\n // Exposes the dsGlobalheaderMenubarItemButton slot on this trigger. Drop either prop and the slot\n // goes silently inert \u2014 getPartProps returns {} without the lookup table and generates no\n // data-dimsum-slot.\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n // Explicit and empty: no render-time values worth handing to a function-form slot prop. Stated so\n // \"what arguments does this slot get?\" always has a visible answer at the call site.\n getOwnerPropsArguments={() => ({})}\n >\n <MenuPicker width={20.73} height={20.73} />\n </StyledButton>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { DSAppPickerT } from '@elliemae/ds-app-picker';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { getGlobalAttributes, getXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React from 'react';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../../../constants/index.js';\nimport { StyledButton } from '../../../styles.js';\nimport { AppPickerCtx } from './AppPickerCTX.js';\n\n/*\n * The toolbar's default App Picker trigger, as a real component with its own module.\n *\n * MUST be handed to DSAppPicker as `TriggerComponent`, never `renderTrigger`. Two reasons, both hard:\n *\n * 1. This component uses `useContext`. DSAppPicker renders `TriggerComponent` as JSX so React creates a\n * fiber for it, which is what makes hooks here legal. `renderTrigger` is invoked as a plain function\n * (`renderTrigger({ ref })`) to honour the legacy DSPopover render-prop contract, so any hook inside\n * it registers against DSAppPicker's Trigger fiber instead \u2014 a rules-of-hooks violation React cannot\n * detect at runtime.\n * 2. Only `TriggerComponent` receives `dialogLabelId`, the id the panel's `aria-labelledby` points at.\n * It arrives as `id` and is applied below; drop it and the dialog has no accessible name.\n */\nexport const TriggerDefaultComponent = ({\n innerRef,\n id,\n onClick: appPickerOnClick,\n onKeyDown: appPickerOnKeyDown,\n 'aria-haspopup': ariaHasPopup,\n}: DSAppPickerT.TriggerComponentProps): JSX.Element => {\n const { triggerOnClick, setRef, triggerRef, label, otherProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader } =\n React.useContext(AppPickerCtx);\n\n /*\n * Three refs on one node: the toolbar's arrow-key roving registration, a consumer-supplied `triggerRef`,\n * and DSAppPicker's own \u2014 the last is what its focus return targets after a scoped Escape, so dropping\n * `innerRef` here silently strands focus when the panel closes.\n *\n * No focus logic beyond that. Returning focus to this trigger is DSAppPicker's job and it does it, which\n * is only true while this part supplies no `onKeyDown` to it \u2014 see useAppPickerCTX.\n */\n const handleTriggerRefs = React.useCallback(\n (buttonRef: HTMLButtonElement) => {\n setRef(buttonRef);\n mergeRefs(triggerRef, innerRef)(buttonRef);\n },\n [setRef, triggerRef, innerRef],\n );\n\n /*\n * DSAppPicker's `onClick` does the opening AND records whether the activation came from the keyboard\n * (`e.detail === 0`), which is what lets it land focus on the selected app rather than the panel. It must\n * always run.\n *\n * `triggerOnClick` is the consumer's own click callback and runs alongside it. It does not suppress the\n * open: a consumer who needs to own the transition supplies `componentProps.isOpen`, which makes the\n * picker controlled and renders its internal flip inert.\n */\n const handleOnClickComposed = React.useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n appPickerOnClick(e);\n triggerOnClick?.(e as React.MouseEvent<HTMLButtonElement>);\n },\n [appPickerOnClick, triggerOnClick],\n );\n\n return (\n <StyledButton\n id={id}\n onClick={handleOnClickComposed}\n onKeyDown={appPickerOnKeyDown}\n innerRef={handleTriggerRefs}\n aria-label={label}\n data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON}\n aria-haspopup={ariaHasPopup}\n // No `aria-expanded`, matching DSAppPicker's own trigger. This one opens a `role=\"dialog\"`, and in\n // the dialog pattern the open state is conveyed by the dialog's presence, not by an attribute on the\n // control. The sibling toolbar items DO carry it correctly \u2014 `ds-popup-menu` opens a `role=\"menu\"`\n // and `ds-search-toggle` expands an inline region, which are the patterns the attribute belongs to.\n // Item-level global attributes land here, AFTER the handlers above, so an `onKeyDown` or `onClick`\n // set directly on the toolbar entry replaces the one this trigger wired. That is the documented\n // item-level override and `WithControlledAppPicker` relies on it \u2014 but note what an `onKeyDown`\n // override costs now: it takes over `openAndFocusOnArrowKeys`, so the arrow keys stop opening the\n // picker unless the consumer opens it themselves.\n //\n // `id` is the one global attribute that cannot reach this spread: useAppPickerCTX reads it out by\n // name and AppPickerRenderer hands it to DSAppPicker, which owns every id in this widget and derives\n // the `id` above from it. Left in here it would take that key back and strand the dialog's\n // `aria-labelledby` \u2014 PUI-18985.\n {...getGlobalAttributes(otherProps)}\n // The part-level xstyled layer, which the contract advertises \u2014 this is the element that serves it.\n {...getXstyledProps(otherProps)}\n type=\"button\"\n // Exposes the dsGlobalheaderMenubarItemButton slot on this trigger. Drop either prop and the slot\n // goes silently inert \u2014 getPartProps returns {} without the lookup table and generates no\n // data-dimsum-slot.\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n // Explicit and empty: no render-time values worth handing to a function-form slot prop. Stated so\n // \"what arguments does this slot get?\" always has a visible answer at the call site.\n getOwnerPropsArguments={() => ({})}\n >\n <MenuPicker width={20.73} height={20.73} />\n </StyledButton>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoGjB;AAnGN,sBAA2B;AAC3B,8BAAqD;AACrD,uBAA0B;AAC1B,mBAAkB;AAClB,uBAA0C;AAC1C,oBAA6B;AAC7B,0BAA6B;AAetB,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AACnB,MAAuD;AACrD,QAAM,EAAE,gBAAgB,QAAQ,YAAY,OAAO,YAAY,8CAA8C,IAC3G,aAAAA,QAAM,WAAW,gCAAY;AAU/B,QAAM,oBAAoB,aAAAA,QAAM;AAAA,IAC9B,CAAC,cAAiC;AAChC,aAAO,SAAS;AAChB,sCAAU,YAAY,QAAQ,EAAE,SAAS;AAAA,IAC3C;AAAA,IACA,CAAC,QAAQ,YAAY,QAAQ;AAAA,EAC/B;AAWA,QAAM,wBAAwB,aAAAA,QAAM;AAAA,IAClC,CAAC,MAA8C;AAC7C,uBAAiB,CAAC;AAClB,uBAAiB,CAAwC;AAAA,IAC3D;AAAA,IACA,CAAC,kBAAkB,cAAc;AAAA,EACnC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,cAAY;AAAA,MACZ,eAAa,2CAA0B;AAAA,MACvC,iBAAe;AAAA,MAed,OAAG,6CAAoB,UAAU;AAAA,MAEjC,OAAG,yCAAgB,UAAU;AAAA,MAC9B,MAAK;AAAA,MAIL,eAAe;AAAA,MAGf,wBAAwB,OAAO,CAAC;AAAA,MAEhC,sDAAC,8BAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/react-desc-prop-types.ts", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\n\n/*\n * Relocated here from DSGlobalHeaderT.AppPickerProps, per the convention every other part in the repo\n * follows. Consumed by useAppPickerCTX / AppPickerCTXRenderer.\n *\n * This namespace describes what DSGlobalHeader passes DOWN to its own out-of-the-box App Picker\n * wrapper. It is NOT the shape an application developer authors \u2014 that is\n * DSGlobalHeaderT.ToolbarAppPickerItem (the toolbar config entry) and, inside it,\n * DSGlobalHeaderT.AppPickerComponentProps. The wrapper is an opinionated pre-configuration that\n * offloads work from the app developer onto Dimsum, so it generates props the developer never sees\n * (`setRef`, `getOwnerPropsAwareOfPropsPassedToGlobalHeader`) and is not meant to know about unless they\n * drop to atomic composition and render DSAppPicker themselves.\n *\n * The three IoC layers an out-of-the-box item is meant to expose are all present here:\n * 1. item-level global attributes, forwarded onto the rendered trigger \u2014 except `id`, which\n * useAppPickerCTX reads out by name and AppPickerRenderer hands to DSAppPicker, because that is\n * the component that owns every id this widget renders (PUI-18985)\n * 2. the slot layer, via `getOwnerPropsAwareOfPropsPassedToGlobalHeader` (parent-owned slots \u2014 see the\n * no-slots note below)\n * 3. `componentProps`, the wrapped component's own contract\n *\n * No slots of its own: every styled element this part renders is declared under the PARENT's name and\n * GLOBAL_HEADER_SLOTS, and those slot values are a published data-dimsum-slot / data-testid surface \u2014\n * re-declaring them here would change them, which the QA stability rule forbids. So, as with\n * ds-data-table-filters' FilterPopover, this file carries no PropsForGlobalOnSlots and no\n * getPropsPerSlotPropTypes. Consumers reach these slots through DSGlobalHeader, where they already do.\n *\n * KNOWN GAP (shared by all four out-of-the-box parts, no decision pending on this file) \u2014 `XstyledProps`\n * is declared below and `xstyledPropTypes` is spread into the schema, but no part forwards xstyled props\n * to any element. Global attributes ARE forwarded, via getGlobalAttributes in TriggerDefaultComponent.\n * The declaration comes from the part-generator template and the FilterPopover precedent; making it true\n * needs a styled target per part, which PopupMenu's bare-<div> root does not currently have.\n */\nexport declare namespace AppPickerT {\n export interface RequiredProps {\n /** Accessible name for the trigger, and the toolbar item's label. */\n label: string;\n /** The consumer-authored configuration object. Forwarded to DSAppPicker by its own contract. */\n componentProps: DSGlobalHeaderT.AppPickerComponentProps;\n /*\n * The slot IoC layer, and the ONLY half of it that may be drilled down.\n *\n * `getPartProps` uses this as the lookup table: it indexes the returned object by the styled\n * element's `data-dimsum-slot` (falling back to `data-testid`) to find the consumer's slot prop.\n * That table can therefore only come from DSGlobalHeader, because only DSGlobalHeader holds the\n * props the consumer passed \u2014 hence the deliberately verbose name. It is also what gates slot\n * generation at all: `styledFunction` sets `didDefinedGetOwnerProps: !!getOwnerProps`, and\n * `getPartProps` short-circuits to `{}` without it.\n *\n * Its former companion `getOwnerPropsArguments` is deliberately NOT here. That one is the hydrator\n * for function-form slot props \u2014 `getPartProps` calls `elementProps(getOwnerPropsArguments())` and\n * uses it for nothing else \u2014 so it must be defined by whichever element is rendering the slot,\n * which is the only place that knows the render-time values worth passing. Bundling the two forced\n * every slot in the package to share one hydrator; see ds-chat-bubble's ChatBubbleArrow and\n * ds-fast-list's List for what per-site hydration is actually for.\n */\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: () => Partial<DSGlobalHeaderT.DefaultProps>;\n /** Focus-management registration, supplied by useGlobalHeaderToolbar for arrow-key navigation. */\n setRef: (ref: HTMLElement) => void;\n }\n\n /*\n * Intentionally empty, and intentionally still declared: `never` is a statement, not an oversight \u2014\n * \"this part has no default props, do not expect them\". Keeping the member present preserves\n * at-a-glance parity with every other part's namespace and makes adding a default a one-line change.\n */\n export interface DefaultProps {}\n\n export interface OptionalProps {}\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n keyof RequiredProps | keyof DefaultProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n keyof RequiredProps | keyof DefaultProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const AppPickerPropTypes: DSPropTypesSchema<AppPickerT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Accessible name for the trigger button, and the toolbar label').isRequired,\n componentProps: PropTypes.object.description(\n 'The consumer-authored DSAppPicker configuration; forwarded per DSAppPicker own contract via getDSAppPickerContractProps',\n ).isRequired,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: PropTypes.func\n .description(\n 'Returns the props passed to DSGlobalHeader, so getPartProps can look up this slot consumer-supplied props. Must come from DSGlobalHeader; the function-form hydrator is supplied per slot render site instead',\n )\n .signature('(() => Partial<DSGlobalHeaderT.DefaultProps> )').isRequired,\n setRef: PropTypes.func\n .description('Registers the trigger node with the toolbar focus management for arrow-key navigation')\n .signature('(( ref: HTMLElement ) => void )').isRequired,\n};\n\nexport const AppPickerPropTypesSchema = AppPickerPropTypes as unknown as ValidationMap<AppPickerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AAiGhE,MAAM,qBAA0D;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,OAAO,YAAY,+DAA+D,EAAE;AAAA,EACrG,gBAAgB,kCAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,+CAA+C,kCAAU,KACtD;AAAA,IACC;AAAA,EACF,EACC,UAAU,gDAAgD,EAAE;AAAA,EAC/D,QAAQ,kCAAU,KACf,YAAY,uFAAuF,EACnG,UAAU,iCAAiC,EAAE;AAClD;AAEO,MAAM,2BAA2B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,11 +35,12 @@ var React = __toESM(require("react"));
|
|
|
35
35
|
var import_ds_app_picker = require("@elliemae/ds-app-picker");
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
37
|
const useAppPickerCTX = (config) => {
|
|
38
|
-
const { label, componentProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader, setRef, ...otherProps } = config;
|
|
38
|
+
const { label, componentProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader, setRef, id, ...otherProps } = config;
|
|
39
39
|
const { triggerRef, triggerOnClick } = componentProps;
|
|
40
40
|
const contractProps = import_react.default.useMemo(() => (0, import_ds_app_picker.getDSAppPickerContractProps)(componentProps), [componentProps]);
|
|
41
41
|
return import_react.default.useMemo(
|
|
42
42
|
() => ({
|
|
43
|
+
id,
|
|
43
44
|
label,
|
|
44
45
|
componentProps,
|
|
45
46
|
otherProps,
|
|
@@ -50,6 +51,7 @@ const useAppPickerCTX = (config) => {
|
|
|
50
51
|
triggerOnClick
|
|
51
52
|
}),
|
|
52
53
|
[
|
|
54
|
+
id,
|
|
53
55
|
label,
|
|
54
56
|
componentProps,
|
|
55
57
|
otherProps,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/useAppPickerCTX.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { getDSAppPickerContractProps } from '@elliemae/ds-app-picker';\nimport React from 'react';\nimport type { AppPickerT } from './react-desc-prop-types.js';\n\n/*\n * This part owns NO open/close state, and that is deliberate.\n *\n * DSAppPicker owns the whole flow: its trigger click toggles the panel, `openAndFocusOnArrowKeys` gives\n * it ArrowDown/ArrowUp, a scoped Escape closes it and returns focus to the trigger, and a click outside\n * closes it. Lifting `isOpen` into this part would make the picker CONTROLLED, which switches every one\n * of those off \u2014 they would then have to be reimplemented here, against a component that already has\n * them and is tested for them.\n *\n * Two knock-on effects, worth knowing before adding state back:\n * - there is no `aria-expanded` on this item's trigger, so no open state is needed to feed one. The\n * picker opens a `role=\"dialog\"`, and that pattern conveys open state by the dialog's presence. The\n * sibling items keep the attribute because a menu and a disclosure region are what it is for.\n * - supplying `onKeyDown` to DSAppPicker sets `closeOnEscape: !onKeyDown`, i.e. it switches OFF the\n * picker's Escape routing AND its focus return. That is why this part supplies none, and why it needs\n * no focus tracker of its own.\n *\n * A consumer can still drive it: `componentProps.isOpen` reaches DSAppPicker through the contract\n * passthrough and makes it controlled for them, which is the supported way to own the transition.\n */\nexport const useAppPickerCTX = (config: AppPickerT.Props) => {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAA4C;AAC5C,mBAAkB;AAuBX,MAAM,kBAAkB,CAAC,WAA6B;
|
|
4
|
+
"sourcesContent": ["import { getDSAppPickerContractProps } from '@elliemae/ds-app-picker';\nimport React from 'react';\nimport type { AppPickerT } from './react-desc-prop-types.js';\n\n/*\n * This part owns NO open/close state, and that is deliberate.\n *\n * DSAppPicker owns the whole flow: its trigger click toggles the panel, `openAndFocusOnArrowKeys` gives\n * it ArrowDown/ArrowUp, a scoped Escape closes it and returns focus to the trigger, and a click outside\n * closes it. Lifting `isOpen` into this part would make the picker CONTROLLED, which switches every one\n * of those off \u2014 they would then have to be reimplemented here, against a component that already has\n * them and is tested for them.\n *\n * Two knock-on effects, worth knowing before adding state back:\n * - there is no `aria-expanded` on this item's trigger, so no open state is needed to feed one. The\n * picker opens a `role=\"dialog\"`, and that pattern conveys open state by the dialog's presence. The\n * sibling items keep the attribute because a menu and a disclosure region are what it is for.\n * - supplying `onKeyDown` to DSAppPicker sets `closeOnEscape: !onKeyDown`, i.e. it switches OFF the\n * picker's Escape routing AND its focus return. That is why this part supplies none, and why it needs\n * no focus tracker of its own.\n *\n * A consumer can still drive it: `componentProps.isOpen` reaches DSAppPicker through the contract\n * passthrough and makes it controlled for them, which is the supported way to own the transition.\n */\nexport const useAppPickerCTX = (config: AppPickerT.Props) => {\n /*\n * Read by name: only what this part needs for its own behaviour. `otherProps` is the item-level global\n * attributes, which reach the trigger via getGlobalAttributes. Everything a consumer put in\n * `componentProps` reaches DSAppPicker through `contractProps` instead \u2014 do not cherry-pick from\n * componentProps here, that is what the contract filter is for.\n *\n * `id` is read out by name so it does NOT stay in `otherProps` (PUI-18985). It is a member of\n * GlobalAttributesT, so left in there it would be spread onto the trigger and take the key back from\n * DSAppPicker \u2014 which owns every id this widget puts in the DOM and derives them all from this one\n * value. Naming the App Picker is what the item-level `id` means here; the trigger's own id is\n * `getIdForAppPickerTrigger(id)`, exported by ds-app-picker for exactly this reason.\n */\n const { label, componentProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader, setRef, id, ...otherProps } = config;\n const { triggerRef, triggerOnClick } = componentProps;\n\n // `componentProps` is declared as DSAppPicker's own props plus this part's `triggerOnClick`, so every\n // DSAppPicker prop a consumer puts there is part of the contract \u2014 including all nine slot props.\n // Deriving the forwardable set from DSAppPicker's own contract is what keeps the two from drifting, and\n // it strips the one key in that object that belongs to this part rather than to DSAppPicker:\n // `triggerOnClick`. (`setRef` is a sibling field of `componentProps`, not inside it, so it never\n // reaches the filter.)\n const contractProps = React.useMemo(() => getDSAppPickerContractProps(componentProps), [componentProps]);\n\n return React.useMemo(\n () => ({\n id,\n label,\n componentProps,\n otherProps,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n setRef,\n contractProps,\n triggerRef,\n triggerOnClick,\n }),\n [\n id,\n label,\n componentProps,\n otherProps,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n setRef,\n contractProps,\n triggerRef,\n triggerOnClick,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAA4C;AAC5C,mBAAkB;AAuBX,MAAM,kBAAkB,CAAC,WAA6B;AAa3D,QAAM,EAAE,OAAO,gBAAgB,+CAA+C,QAAQ,IAAI,GAAG,WAAW,IAAI;AAC5G,QAAM,EAAE,YAAY,eAAe,IAAI;AAQvC,QAAM,gBAAgB,aAAAA,QAAM,QAAQ,UAAM,kDAA4B,cAAc,GAAG,CAAC,cAAc,CAAC;AAEvG,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/react-desc-prop-types.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/react-desc-prop-types.ts", "../../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport type { DSGlobalHeaderT } from '../../../../../react-desc-prop-types.js';\n\n/*\n * Relocated here from DSGlobalHeaderT.PopupMenuContentProps, per the convention every other part in the\n * repo follows. Consumed by PopupMenuContent.tsx.\n *\n * This is the innermost of the three Popup* contracts and the one least likely to be a consumer's\n * business: it is what the PopupMenu wrapper hands to its own menu-content renderer. Every prop except\n * `options` is machinery the wrapper generated. `options` is the one consumer-authored value on it,\n * and it arrives already unwrapped from DSGlobalHeaderT.PopupMenuComponentProps \u2014 which is exactly why\n * having both `PopupMenuComponentProps` and `PopupMenuContentProps` visible side by side in the public\n * namespace was misleading: they look like a pair a developer chooses between, and they are not.\n *\n * IoC layers: the slot layer via `getOwnerPropsAwareOfPropsPassedToGlobalHeader` (fully wired \u2014 this part\n * passes it to the list, items, item buttons, labels and separators, each with its own explicit empty\n * hydrator), per-entry global attributes via `options` items, and the part-level global attribute /\n * xstyled layer below.\n *\n * KNOWN GAP \u2014 the part-level global attribute + xstyled layer is the one thing in this file that was an\n * addition rather than a transcription: the old DSGlobalHeaderT.PopupMenuContentProps did not extend\n * GlobalAttributesT at all, which made this the only out-of-the-box part missing that layer and left its\n * PropTypes unable to spread globalAttributesPropTypes coherently. Nothing forwards either to the root\n * list yet, so for this part both remain a statement of the intended contract rather than of behaviour.\n * Per-entry attributes on `options` items DO reach the DOM and are covered by the pillar tests.\n *\n * No slots of its own \u2014 see the AppPicker sibling file for why.\n */\nexport declare namespace PopupMenuContentT {\n export interface RequiredProps {\n /** The consumer-authored menu entries, unwrapped from componentProps by the PopupMenu wrapper. */\n options: DSGlobalHeaderT.PopupMenuContentItem[];\n /** Wrapper callback: applies the item's closeOnClick policy after a menu item is clicked. */\n onItemClick: () => void;\n /** Wrapper callback: closes the menu and returns focus to the trigger. */\n /** Which end of the menu this open lands on \u2014 see usePopupMenuContent. */\n openIntent: 'first' | 'last';\n /** Wrapper callback: the floating context's hide function. */\n setIsOpen: () => void;\n /*\n * The slot lookup table, and the only half of the slot IoC layer that may be drilled down \u2014 the\n * function-form hydrator is supplied per slot render site instead. See the AppPicker sibling for the\n * full reasoning and the getPartProps mechanics behind the name.\n */\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: () => Partial<DSGlobalHeaderT.DefaultProps>;\n }\n\n /*\n * Intentionally empty, and intentionally still declared \u2014 \"this part has no default props, do not\n * expect them\". See the AppPicker sibling for the full reasoning.\n */\n export interface DefaultProps {}\n\n export interface OptionalProps {\n /*\n * Optional, matching the runtime: PopupMenuContent guards it (`if (popupOnKeyPress)`) and consumers\n * routinely omit it. It was declared required, which was simply wrong \u2014 the type claimed a guarantee\n * the code never relied on, and every consumer omitting it was type-lying to satisfy the compiler.\n */\n popupOnKeyPress?: (event: React.KeyboardEvent) => void;\n }\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLUListElement>,\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n keyof RequiredProps | keyof DefaultProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLUListElement>,\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n keyof RequiredProps | keyof DefaultProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const PopupMenuContentPropTypes: DSPropTypesSchema<PopupMenuContentT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n options: PropTypes.array.description(\n 'Consumer-authored menu entries. Format: [{ type?, Icon?, label?, onClick?, Content?, ...globalAttributes }]',\n ).isRequired,\n onItemClick: PropTypes.func\n .description('Invoked after a menu item click so the wrapper can apply its closeOnClick policy')\n .signature('(() => void )').isRequired,\n openIntent: PropTypes.string.description('Which end of the menu this open lands on: \"first\" or \"last\"').isRequired,\n setIsOpen: PropTypes.func.description(\"The floating context's hide function\").signature('(() => void )').isRequired,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: PropTypes.func\n .description(\n 'Returns the props passed to DSGlobalHeader, so getPartProps can look up this slot consumer-supplied props. Must come from DSGlobalHeader; the function-form hydrator is supplied per slot render site instead',\n )\n .signature('(() => Partial<DSGlobalHeaderT.DefaultProps> )').isRequired,\n popupOnKeyPress: PropTypes.func\n .description('Consumer key handler, invoked on menu items alongside the internal keyboard navigation')\n .signature('(( event: React.KeyboardEvent ) => void )'),\n};\n\nexport const PopupMenuContentPropTypesSchema =\n PopupMenuContentPropTypes as unknown as ValidationMap<PopupMenuContentT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AAwFhE,MAAM,4BAAwE;AAAA,EACnF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,MAAM;AAAA,IACvB;AAAA,EACF,EAAE;AAAA,EACF,aAAa,kCAAU,KACpB,YAAY,kFAAkF,EAC9F,UAAU,eAAe,EAAE;AAAA,EAC9B,YAAY,kCAAU,OAAO,YAAY,6DAA6D,EAAE;AAAA,EACxG,WAAW,kCAAU,KAAK,YAAY,sCAAsC,EAAE,UAAU,eAAe,EAAE;AAAA,EACzG,+CAA+C,kCAAU,KACtD;AAAA,IACC;AAAA,EACF,EACC,UAAU,gDAAgD,EAAE;AAAA,EAC/D,iBAAiB,kCAAU,KACxB,YAAY,wFAAwF,EACpG,UAAU,2CAA2C;AAC1D;AAEO,MAAM,kCACX;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/react-desc-prop-types.ts", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport type React from 'react';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\n\n/*\n * Relocated here from DSGlobalHeaderT.PopupProps, per the convention every other part in the repo\n * follows. Consumed by PopupMenu.tsx.\n *\n * This namespace describes what DSGlobalHeader passes DOWN to its own out-of-the-box Popup Menu\n * wrapper. It is NOT the shape an application developer authors \u2014 that is\n * DSGlobalHeaderT.PopupMenuItem (the toolbar config entry) and, inside it,\n * DSGlobalHeaderT.PopupMenuComponentProps. `setRef` and\n * `getOwnerPropsAwareOfPropsPassedToGlobalHeader` are generated by the widget and the developer is not\n * meant to know about them.\n *\n * The old name is worth losing on the way: `PopupProps` sat a word away from `PopupMenuItem`,\n * `PopupMenuComponentProps` and `PopupMenuContentProps` in the same namespace \u2014 the first two of which\n * ARE consumer-authored, while the third was internal and has been relocated to menuContent/ alongside\n * this one. `PopupMenuT.Props`, scoped to this directory, cannot be mistaken for any of them.\n *\n * All three IoC layers present: item-level global attributes onto the trigger, the slot layer via\n * `getOwnerPropsAwareOfPropsPassedToGlobalHeader`, and `componentProps` for the menu's own contract.\n *\n * No slots of its own \u2014 see the AppPicker sibling file for why (published slot surface stays under the\n * parent's name).\n *\n * KNOWN GAP \u2014 xstyled props are declared and not forwarded, as in every sibling part. See the AppPicker\n * file for the full statement; this part is additionally the one with no styled root to forward them to,\n * because PopupMenu.tsx's outermost element is a bare <div>.\n */\nexport declare namespace PopupMenuT {\n export interface RequiredProps {\n /** The consumer-authored configuration object for this toolbar item. */\n componentProps: DSGlobalHeaderT.PopupMenuComponentProps;\n /*\n * The slot lookup table, and the only half of the slot IoC layer that may be drilled down \u2014 the\n * function-form hydrator is supplied per slot render site instead. See the AppPicker sibling for the\n * full reasoning and the getPartProps mechanics behind the name.\n */\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: () => Partial<DSGlobalHeaderT.DefaultProps>;\n /** Focus-management registration, supplied by useGlobalHeaderToolbar for arrow-key navigation. */\n setRef: (ref: HTMLElement) => void;\n }\n\n /*\n * Intentionally empty, and intentionally still declared \u2014 \"this part has no default props, do not\n * expect them\". See the AppPicker sibling for the full reasoning.\n */\n export interface DefaultProps {}\n\n export interface OptionalProps {\n Icon?: React.ComponentType<SvgIconT.Props>;\n onClick?: (event: React.MouseEvent) => void;\n /*\n * Carries the toolbar item's `label`: GlobalHeaderToolbar renders <PopupMenu title={label} .../>.\n * Faithful to the current declaration, including its standing note that landing this in the HTML\n * `title` attribute was probably not intended but is kept to avoid a breaking change.\n */\n title?: string;\n }\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const PopupMenuPropTypes: DSPropTypesSchema<PopupMenuT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n componentProps: PropTypes.object.description(\n 'The consumer-authored popup menu configuration: options, isOpen, closeOnClick and the key handlers',\n ).isRequired,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: PropTypes.func\n .description(\n 'Returns the props passed to DSGlobalHeader, so getPartProps can look up this slot consumer-supplied props. Must come from DSGlobalHeader; the function-form hydrator is supplied per slot render site instead',\n )\n .signature('(() => Partial<DSGlobalHeaderT.DefaultProps> )').isRequired,\n setRef: PropTypes.func\n .description('Registers the trigger node with the toolbar focus management for arrow-key navigation')\n .signature('(( ref: HTMLElement ) => void )').isRequired,\n Icon: PropTypes.func.description('Icon rendered inside the trigger button'),\n onClick: PropTypes.func\n .description('Consumer click handler for the trigger, invoked alongside the internal open/close toggle')\n .signature('(( event: React.MouseEvent ) => void )'),\n title: PropTypes.string.description(\n 'Receives the toolbar item label; printed as the HTML title attribute on the trigger',\n ),\n};\n\nexport const PopupMenuPropTypesSchema = PopupMenuPropTypes as unknown as ValidationMap<PopupMenuT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AAuFhE,MAAM,qBAA0D;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,kCAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,+CAA+C,kCAAU,KACtD;AAAA,IACC;AAAA,EACF,EACC,UAAU,gDAAgD,EAAE;AAAA,EAC/D,QAAQ,kCAAU,KACf,YAAY,uFAAuF,EACnG,UAAU,iCAAiC,EAAE;AAAA,EAChD,MAAM,kCAAU,KAAK,YAAY,yCAAyC;AAAA,EAC1E,SAAS,kCAAU,KAChB,YAAY,0FAA0F,EACtG,UAAU,wCAAwC;AAAA,EACrD,OAAO,kCAAU,OAAO;AAAA,IACtB;AAAA,EACF;AACF;AAEO,MAAM,2BAA2B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -169,6 +169,7 @@ const SearchToggle = (outOfTheBoxDrilledDownProps) => {
|
|
|
169
169
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
170
170
|
StyledNavSearchBoxContainer,
|
|
171
171
|
{
|
|
172
|
+
"data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_SEARCH_TOGGLE_CONTAINER,
|
|
172
173
|
...itemLevelGlobalAttributes,
|
|
173
174
|
...(0, import_ds_props_helpers.getXstyledProps)(restIncludingItemLevelGlobalAttributes),
|
|
174
175
|
getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport { getGlobalAttributes, getXstyledProps } from '@elliemae/ds-props-helpers';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n DSGlobalHeaderName,\n GLOBAL_HEADER_DATA_TESTID,\n GLOBAL_HEADER_SLOTS,\n SEARCH_TOGGLE_DEFAULT_ARIA_LABEL,\n} from '../../../../constants/index.js';\nimport { SearchToggleSpinButton } from './SearchToggleSpinButton.js';\nimport { defaultProps, type SearchToggleT } from './react-desc-prop-types.js';\nimport { useSearchToggle } from './useSearchToggle.js';\n\nconst StyledNavSearchBoxContainer = styled('div', {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.MENUBAR_SEARCH_TOGGLE_CONTAINER,\n})<{ isOpen: boolean }>`\n background: ${({ theme, isOpen }) => (isOpen ? theme.colors.neutral['000'] : 'transparent')};\n position: relative;\n display: flex;\n align-items: center;\n width: ${({ isOpen }) => (isOpen ? '260px' : 'auto')};\n & .em-ds-button {\n margin-right: 2px;\n height: 24px;\n width: 24px;\n }\n`;\n\nconst StyledSearchNavContainer = styled(Grid, {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER,\n})`\n background: ${({ theme }) => theme.colors.neutral['000']};\n position: relative;\n padding: 2px;\n`;\n\nconst StyledSearchInput = styled(DSInputText, {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TEXTINPUT,\n})``;\n\nconst ExpandedToggleBtnStyles = css`\n margin-left: 2px;\n`;\nconst CollapsedToggleBtnStyles = css`\n height: 3.077rem;\n width: 3.077rem;\n border: none;\n background-color: transparent;\n cursor: pointer;\n position: relative;\n\n // we want to avoid the pseudo-border in the nested buttons\n & button:focus .pseudo-border {\n outline: none;\n border: none;\n }\n && span.pseudo-border {\n display: none;\n }\n\n // our \"ad-hoc\" styling of the DSButtonV3 that re-implement changed colors/focus-borders\n & .em-ds-icon svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n\n &&:hover {\n background-color: ${({ theme }) => theme.colors.brand[700]};\n }\n\n &&:focus-visible {\n background-color: transparent;\n }\n\n &&:focus-visible::before {\n content: '';\n position: absolute;\n z-index: 2;\n top: 2px;\n left: 2px;\n width: calc(100% - 4px);\n height: calc(100% - 4px);\n border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n border-radius: 4px;\n pointer-events: none;\n }\n`;\n\nconst StyledToggleBtn = styled(DSButtonV3, {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TRIGGER_BUTTON,\n})<{ isOpen: boolean }>`\n ${({ isOpen }) => (!isOpen ? CollapsedToggleBtnStyles : ExpandedToggleBtnStyles)}\n`;\n\nexport const SearchToggle = (outOfTheBoxDrilledDownProps: SearchToggleT.Props): JSX.Element => {\n const {\n componentProps,\n label,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n // added in https://jira.elliemae.io/browse/PUI-17852\n // keeping the default value as \"Close search\" for backward compatibility\n // we expect authors to provide descriptive aria-labels that fit their specific context, we do so in our example stories.\n // The default now comes from this part's own defaultProps rather than being repeated inline, so the\n // documented contract and the runtime behaviour cannot drift apart.\n ariaLabelExpanded = defaultProps.ariaLabelExpanded,\n // Everything else the toolbar drilled down, which is where item-level global attributes arrive.\n // `setRef` and `instanceUID` ride along in here too and are filtered out by getGlobalAttributes'\n // own whitelist, so they never reach the DOM.\n ...restIncludingItemLevelGlobalAttributes\n } = outOfTheBoxDrilledDownProps;\n\n const {\n isOpenUncontrolled,\n containerRef,\n handleToggleSearch,\n handleContainerKeyDown,\n handleChange,\n handleTriggerRefs,\n inputId,\n panelId,\n } = useSearchToggle(outOfTheBoxDrilledDownProps);\n\n const {\n onNext,\n onPrevious,\n currentResultIndex,\n totalResults,\n placeholder,\n value,\n onBlur,\n onClear,\n isOpen: userIsOpen,\n searchContainerRef,\n } = componentProps;\n\n /*\n * Explicit and empty hydrator, shared by this part's slot render sites: `getOwnerPropsArguments` feeds\n * function-form slot props and nothing else, and none of the elements below carry render-time values\n * worth passing. Stated so \"what arguments does this slot get?\" is always answerable at the call site.\n */\n const noSlotArguments = React.useCallback(() => ({}), []);\n const isOpen = userIsOpen ?? isOpenUncontrolled;\n /*\n * Item-level global attributes, forwarded onto this part's ROOT container \u2014 NOT onto its trigger button,\n * which is where the sibling item types put theirs. Two reasons, and both matter if you move it:\n *\n * - The trigger is a DSButtonV3, whose own prop vocabulary collides with the HTML global set: `shape`\n * is `ButtonShapesT` there and the `<area>` attribute in GlobalAttributesT, and `onClick` takes a\n * wider event union. Spreading the whole set onto it does not type-check, and narrowing it would\n * forward less than the siblings do.\n * - The container is what this item type renders AS; the button is a child of it. Attributes describing\n * the toolbar item belong on the item's root.\n *\n * Consequence for selector authors: `data-public` lands on the element wrapping the whole search area,\n * not on the icon button.\n */\n const itemLevelGlobalAttributes = getGlobalAttributes<typeof restIncludingItemLevelGlobalAttributes, HTMLDivElement>(\n restIncludingItemLevelGlobalAttributes,\n );\n\n return (\n <StyledNavSearchBoxContainer\n // Spread FIRST, so the props below win on the keys they own \u2014 the opposite order from PopupMenu and\n // AppPicker, which spread theirs last. Here the internal keys are live state rather than defaults:\n // `onKeyDown` carries Escape-collapses and `innerRef` carries the consumer's own searchContainerRef.\n // An item-level attribute overwriting either is a regression, not an override. Everything a consumer\n // legitimately sets at this level \u2014 data attributes, id, title \u2014 is unaffected, since nothing below\n // claims those keys.\n {...itemLevelGlobalAttributes}\n // The part-level xstyled layer, which the contract advertises \u2014 this is the element that serves it.\n {...getXstyledProps(restIncludingItemLevelGlobalAttributes)}\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n onKeyDown={handleContainerKeyDown}\n innerRef={mergeRefs(searchContainerRef, containerRef)}\n isOpen={isOpen}\n >\n <StyledToggleBtn\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n buttonType=\"icon\"\n innerRef={handleTriggerRefs}\n aria-label={isOpen ? ariaLabelExpanded : label}\n aria-expanded={isOpen}\n aria-controls={panelId}\n onClick={handleToggleSearch}\n isOpen={isOpen}\n data-testid={GLOBAL_HEADER_DATA_TESTID.SEARCH_TOGGLE_TRIGGER_BUTTON}\n >\n <Search color={isOpen ? ['brand-primary', '800'] : ['neutral', '0']} />\n </StyledToggleBtn>\n\n {isOpen ? (\n <StyledSearchNavContainer\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n id={panelId}\n alignItems=\"center\"\n cols={['1fr', '1fr']}\n >\n <StyledSearchInput\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n id={inputId}\n // PUI-17973 \u2014 default accessible name guiding users to the result navigation; a\n // consumer-supplied aria-label (via the textinput slot) overrides this.\n aria-label={SEARCH_TOGGLE_DEFAULT_ARIA_LABEL}\n placeholder={placeholder || 'Search...'}\n value={value}\n clearable\n // passing onBlur as {undefined} breaks the input text focus ring management\n // if onBlur is not provided, we don't pass the prop at all\n // this is not expected as confirmed in conversation with Gerardo\n // we are not going to implement the fix right now to avoid potential breaking changes,\n // but we will keep an eye on this behavior and consider a fix in the future if needed.\n {...(onBlur && { onBlur })}\n onChange={handleChange}\n onClear={onClear}\n />\n <SearchToggleSpinButton\n onNext={onNext}\n onPrevious={onPrevious}\n currentResultIndex={currentResultIndex}\n totalResults={totalResults}\n getOwnerPropsAwareOfPropsPassedToGlobalHeader={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n />\n </StyledSearchNavContainer>\n ) : null}\n </StyledNavSearchBoxContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport { getGlobalAttributes, getXstyledProps } from '@elliemae/ds-props-helpers';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n DSGlobalHeaderName,\n GLOBAL_HEADER_DATA_TESTID,\n GLOBAL_HEADER_SLOTS,\n SEARCH_TOGGLE_DEFAULT_ARIA_LABEL,\n} from '../../../../constants/index.js';\nimport { SearchToggleSpinButton } from './SearchToggleSpinButton.js';\nimport { defaultProps, type SearchToggleT } from './react-desc-prop-types.js';\nimport { useSearchToggle } from './useSearchToggle.js';\n\nconst StyledNavSearchBoxContainer = styled('div', {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.MENUBAR_SEARCH_TOGGLE_CONTAINER,\n})<{ isOpen: boolean }>`\n background: ${({ theme, isOpen }) => (isOpen ? theme.colors.neutral['000'] : 'transparent')};\n position: relative;\n display: flex;\n align-items: center;\n width: ${({ isOpen }) => (isOpen ? '260px' : 'auto')};\n & .em-ds-button {\n margin-right: 2px;\n height: 24px;\n width: 24px;\n }\n`;\n\nconst StyledSearchNavContainer = styled(Grid, {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER,\n})`\n background: ${({ theme }) => theme.colors.neutral['000']};\n position: relative;\n padding: 2px;\n`;\n\nconst StyledSearchInput = styled(DSInputText, {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TEXTINPUT,\n})``;\n\nconst ExpandedToggleBtnStyles = css`\n margin-left: 2px;\n`;\nconst CollapsedToggleBtnStyles = css`\n height: 3.077rem;\n width: 3.077rem;\n border: none;\n background-color: transparent;\n cursor: pointer;\n position: relative;\n\n // we want to avoid the pseudo-border in the nested buttons\n & button:focus .pseudo-border {\n outline: none;\n border: none;\n }\n && span.pseudo-border {\n display: none;\n }\n\n // our \"ad-hoc\" styling of the DSButtonV3 that re-implement changed colors/focus-borders\n & .em-ds-icon svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n\n &&:hover {\n background-color: ${({ theme }) => theme.colors.brand[700]};\n }\n\n &&:focus-visible {\n background-color: transparent;\n }\n\n &&:focus-visible::before {\n content: '';\n position: absolute;\n z-index: 2;\n top: 2px;\n left: 2px;\n width: calc(100% - 4px);\n height: calc(100% - 4px);\n border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n border-radius: 4px;\n pointer-events: none;\n }\n`;\n\nconst StyledToggleBtn = styled(DSButtonV3, {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TRIGGER_BUTTON,\n})<{ isOpen: boolean }>`\n ${({ isOpen }) => (!isOpen ? CollapsedToggleBtnStyles : ExpandedToggleBtnStyles)}\n`;\n\nexport const SearchToggle = (outOfTheBoxDrilledDownProps: SearchToggleT.Props): JSX.Element => {\n const {\n componentProps,\n label,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n // added in https://jira.elliemae.io/browse/PUI-17852\n // keeping the default value as \"Close search\" for backward compatibility\n // we expect authors to provide descriptive aria-labels that fit their specific context, we do so in our example stories.\n // The default now comes from this part's own defaultProps rather than being repeated inline, so the\n // documented contract and the runtime behaviour cannot drift apart.\n ariaLabelExpanded = defaultProps.ariaLabelExpanded,\n // Everything else the toolbar drilled down, which is where item-level global attributes arrive.\n // `setRef` and `instanceUID` ride along in here too and are filtered out by getGlobalAttributes'\n // own whitelist, so they never reach the DOM.\n ...restIncludingItemLevelGlobalAttributes\n } = outOfTheBoxDrilledDownProps;\n\n const {\n isOpenUncontrolled,\n containerRef,\n handleToggleSearch,\n handleContainerKeyDown,\n handleChange,\n handleTriggerRefs,\n inputId,\n panelId,\n } = useSearchToggle(outOfTheBoxDrilledDownProps);\n\n const {\n onNext,\n onPrevious,\n currentResultIndex,\n totalResults,\n placeholder,\n value,\n onBlur,\n onClear,\n isOpen: userIsOpen,\n searchContainerRef,\n } = componentProps;\n\n /*\n * Explicit and empty hydrator, shared by this part's slot render sites: `getOwnerPropsArguments` feeds\n * function-form slot props and nothing else, and none of the elements below carry render-time values\n * worth passing. Stated so \"what arguments does this slot get?\" is always answerable at the call site.\n */\n const noSlotArguments = React.useCallback(() => ({}), []);\n const isOpen = userIsOpen ?? isOpenUncontrolled;\n /*\n * Item-level global attributes, forwarded onto this part's ROOT container \u2014 NOT onto its trigger button,\n * which is where the sibling item types put theirs. Two reasons, and both matter if you move it:\n *\n * - The trigger is a DSButtonV3, whose own prop vocabulary collides with the HTML global set: `shape`\n * is `ButtonShapesT` there and the `<area>` attribute in GlobalAttributesT, and `onClick` takes a\n * wider event union. Spreading the whole set onto it does not type-check, and narrowing it would\n * forward less than the siblings do.\n * - The container is what this item type renders AS; the button is a child of it. Attributes describing\n * the toolbar item belong on the item's root.\n *\n * Consequence for selector authors: `data-public` lands on the element wrapping the whole search area,\n * not on the icon button.\n */\n const itemLevelGlobalAttributes = getGlobalAttributes<typeof restIncludingItemLevelGlobalAttributes, HTMLDivElement>(\n restIncludingItemLevelGlobalAttributes,\n );\n\n return (\n <StyledNavSearchBoxContainer\n // Legacy data-testid \u2014 breaking change if removed/changed (see project_compatibility.md)\n data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_SEARCH_TOGGLE_CONTAINER}\n // Spread FIRST, so the props below win on the keys they own \u2014 the opposite order from PopupMenu and\n // AppPicker, which spread theirs last. Here the internal keys are live state rather than defaults:\n // `onKeyDown` carries Escape-collapses and `innerRef` carries the consumer's own searchContainerRef.\n // An item-level attribute overwriting either is a regression, not an override. Everything a consumer\n // legitimately sets at this level \u2014 data attributes, id, title \u2014 is unaffected, since nothing below\n // claims those keys.\n {...itemLevelGlobalAttributes}\n // The part-level xstyled layer, which the contract advertises \u2014 this is the element that serves it.\n {...getXstyledProps(restIncludingItemLevelGlobalAttributes)}\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n onKeyDown={handleContainerKeyDown}\n innerRef={mergeRefs(searchContainerRef, containerRef)}\n isOpen={isOpen}\n >\n <StyledToggleBtn\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n buttonType=\"icon\"\n innerRef={handleTriggerRefs}\n aria-label={isOpen ? ariaLabelExpanded : label}\n aria-expanded={isOpen}\n aria-controls={panelId}\n onClick={handleToggleSearch}\n isOpen={isOpen}\n data-testid={GLOBAL_HEADER_DATA_TESTID.SEARCH_TOGGLE_TRIGGER_BUTTON}\n >\n <Search color={isOpen ? ['brand-primary', '800'] : ['neutral', '0']} />\n </StyledToggleBtn>\n\n {isOpen ? (\n <StyledSearchNavContainer\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n id={panelId}\n alignItems=\"center\"\n cols={['1fr', '1fr']}\n >\n <StyledSearchInput\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n id={inputId}\n // PUI-17973 \u2014 default accessible name guiding users to the result navigation; a\n // consumer-supplied aria-label (via the textinput slot) overrides this.\n aria-label={SEARCH_TOGGLE_DEFAULT_ARIA_LABEL}\n placeholder={placeholder || 'Search...'}\n value={value}\n clearable\n // passing onBlur as {undefined} breaks the input text focus ring management\n // if onBlur is not provided, we don't pass the prop at all\n // this is not expected as confirmed in conversation with Gerardo\n // we are not going to implement the fix right now to avoid potential breaking changes,\n // but we will keep an eye on this behavior and consider a fix in the future if needed.\n {...(onBlur && { onBlur })}\n onChange={handleChange}\n onClear={onClear}\n />\n <SearchToggleSpinButton\n onNext={onNext}\n onPrevious={onPrevious}\n currentResultIndex={currentResultIndex}\n totalResults={totalResults}\n getOwnerPropsAwareOfPropsPassedToGlobalHeader={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n />\n </StyledSearchNavContainer>\n ) : null}\n </StyledNavSearchBoxContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/react-desc-prop-types.ts", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\n\n/*\n * Relocated here from DSGlobalHeaderT.SearchToggleProps, per the convention every other part in the repo\n * follows. Consumed by SearchToggle.tsx, useSearchToggle.tsx and SearchToggleSpinButton.tsx.\n *\n * This namespace describes what DSGlobalHeader passes DOWN to its own out-of-the-box Search Toggle.\n * It is NOT the shape an application developer authors \u2014 that is\n * DSGlobalHeaderT.ToolbarSearchToggleItem and, inside it, DSGlobalHeaderT.ToggleSearchComponentProps.\n * The two old names are the sharpest illustration of the problem this relocation solves:\n * `SearchToggleProps` (internal) and `ToggleSearchComponentProps` (consumer-authored) are near-anagrams\n * of each other, adjacent in the same public namespace, with opposite audiences.\n *\n * All three IoC layers present and wired, as on the siblings:\n * 1. item-level global attributes, forwarded onto this part's ROOT container\n * 2. the slot layer, via `getOwnerPropsAwareOfPropsPassedToGlobalHeader`\n * 3. `componentProps`, the search configuration's own contract\n *\n * Two things about layer 1 that differ from the siblings and are worth knowing when writing selectors:\n * the attributes land on the container rather than the trigger button, because the container is what\n * this item type renders as and the trigger is a DSButtonV3 whose own props collide with the HTML global\n * set (`shape` is ButtonShapesT there and the <area> attribute in GlobalAttributesT); and they are spread\n * BEFORE the internal props rather than after, so `onKeyDown` (Escape-collapses) and `innerRef` (the\n * consumer's searchContainerRef) cannot be clobbered. Both are stated at the spread site in\n * SearchToggle.tsx. Until PUI-18647 this layer was declared here and forwarded nowhere, so `data-public`\n * on a 'ds-search-toggle' item never reached the DOM at all; that is fixed and covered by\n * GlobalHeader.SearchToggle.pui-18647.test.js.\n *\n * No slots of its own \u2014 see the AppPicker sibling file for why.\n */\nexport declare namespace SearchToggleT {\n export interface RequiredProps {\n /** Accessible name for the collapsed trigger, and the toolbar item's label. */\n label: string;\n /** The consumer-authored configuration object for this toolbar item. */\n componentProps: DSGlobalHeaderT.ToggleSearchComponentProps;\n /*\n * The slot lookup table, and the only half of the slot IoC layer that may be drilled down \u2014 the\n * function-form hydrator is supplied per slot render site instead. See the AppPicker sibling for the\n * full reasoning and the getPartProps mechanics behind the name.\n */\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: () => Partial<DSGlobalHeaderT.DefaultProps>;\n /** Focus-management registration, supplied by useGlobalHeaderToolbar for arrow-key navigation. */\n setRef: (ref: HTMLButtonElement | null) => void;\n /*\n * Namespaces the input and panel DOM ids so multiple headers on one page cannot collide on the\n * aria-controls relationship. Typed here rather than aliased from the parent's Context: this part\n * only needs \"an id-safe string\", and coupling it to the parent's shape would tie the two together\n * for no benefit.\n */\n instanceUID: string;\n }\n\n export interface DefaultProps {\n /*\n * Accessible name for the trigger once expanded. Defaults to the pre-PUI-17852 hardcoded string for\n * backward compatibility; authors are encouraged to supply context-specific text.\n */\n ariaLabelExpanded: string;\n }\n\n export interface OptionalProps {}\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof RequiredProps | keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof RequiredProps | keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n}\n\n// Part-level defaultProps, per the part generator's shape. Consumed by SearchToggle.tsx so the\n// documented default and the runtime default cannot drift. The name intentionally matches the package's\n// own `defaultProps`; fallow's duplicate-export grouping for that convention is handled once in\n// fallow.internals.jsonc rather than suppressed per file.\nexport const defaultProps: SearchToggleT.DefaultProps = {\n ariaLabelExpanded: 'Close search',\n};\n\nexport const SearchTogglePropTypes: DSPropTypesSchema<SearchToggleT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Accessible name for the collapsed trigger, and the toolbar label').isRequired,\n componentProps: PropTypes.object.description(\n 'The consumer-authored search configuration: value, result counters and the change/clear/navigation handlers',\n ).isRequired,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: PropTypes.func\n .description(\n 'Returns the props passed to DSGlobalHeader, so getPartProps can look up this slot consumer-supplied props. Must come from DSGlobalHeader; the function-form hydrator is supplied per slot render site instead',\n )\n .signature('(() => Partial<DSGlobalHeaderT.DefaultProps> )').isRequired,\n setRef: PropTypes.func\n .description('Registers the trigger node with the toolbar focus management for arrow-key navigation')\n .signature('(( ref: HTMLButtonElement | null ) => void )').isRequired,\n instanceUID: PropTypes.string.description(\n 'Namespaces the input and panel DOM ids so multiple headers on a page do not collide on aria-controls',\n ).isRequired,\n ariaLabelExpanded: PropTypes.string\n .description('Accessible name for the trigger once expanded (PUI-17852)')\n .defaultValue('Close search'),\n};\n\nexport const SearchTogglePropTypesSchema = SearchTogglePropTypes as unknown as ValidationMap<SearchToggleT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AAqFhE,MAAM,eAA2C;AAAA,EACtD,mBAAmB;AACrB;AAEO,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,OAAO,YAAY,kEAAkE,EAAE;AAAA,EACxG,gBAAgB,kCAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,+CAA+C,kCAAU,KACtD;AAAA,IACC;AAAA,EACF,EACC,UAAU,gDAAgD,EAAE;AAAA,EAC/D,QAAQ,kCAAU,KACf,YAAY,uFAAuF,EACnG,UAAU,8CAA8C,EAAE;AAAA,EAC7D,aAAa,kCAAU,OAAO;AAAA,IAC5B;AAAA,EACF,EAAE;AAAA,EACF,mBAAmB,kCAAU,OAC1B,YAAY,2DAA2D,EACvE,aAAa,cAAc;AAChC;AAEO,MAAM,8BAA8B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -133,7 +133,10 @@ const GLOBAL_HEADER_DATA_TESTID = {
|
|
|
133
133
|
...slotObjectToDataTestIds(DSGlobalHeaderName, GLOBAL_HEADER_SLOTS),
|
|
134
134
|
// this are the "hardcoded" data-testid that maps to the slots in the component that we keep as they were for backwards compatibility
|
|
135
135
|
...DSGlobalHeaderDatatestidFlattened,
|
|
136
|
-
SEARCH_TOGGLE_TRIGGER_BUTTON: "gh-toolbar-item"
|
|
136
|
+
SEARCH_TOGGLE_TRIGGER_BUTTON: "gh-toolbar-item",
|
|
137
|
+
MENUBAR_SEARCH_TOGGLE_CONTAINER: "ds-global-header-menubar-item-searchtoggle-container"
|
|
138
|
+
// /\ PUI-19020 was ds-global-header-... changed to ds-globalheader ...
|
|
139
|
+
// unexpected and unwanted change in the data-testid existing testid detected by QA.
|
|
137
140
|
};
|
|
138
141
|
export {
|
|
139
142
|
DSGlobalHeaderDatatestid,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSGlobalHeaderName = 'DSGlobalheader';\n\n/* ************************************************************************************************\n * LEGACY VARIABLES\n * ************************************************************************************************\n * WE KEEP THIS AROUND TO AVOID BREAKING CHANGES\n * THE NEW VARIABLES INHERIT FROM THIS TO AVOID BREAKING CHANGES!!!\n ************************************************************************************************ */\n\n/**\n * @deprecated - use GLOBAL_HEADER_SLOTS instead, it containse the full list and is flat.\n */\nexport const DSGlobalHeaderSlots = {\n CONTAINER: 'root',\n LOGO: {\n CONTAINER: 'logo-container',\n },\n BREADCRUMB: {\n CONTAINER: 'breadcrumb-container',\n PIPE: 'breadcrumb-pipe',\n CHEVRON: 'breadcrumb-chevron',\n LIST: 'breadcrumb-list',\n ITEM: 'breadcrumb-item',\n ITEM_LINK: 'breadcrumb-item-link',\n ITEM_LINK_LABEL: 'breadcrumb-item-link-label',\n },\n MENUBAR: {\n CONTAINER: 'menubar-container',\n LIST: 'menubar-list',\n ITEM: 'menubar-item',\n ITEM_BUTTON: 'menubar-item-button',\n POPUP_MENU: {\n LIST: 'menubar-item-popupmenu-list',\n ITEM: 'menubar-item-popupmenu-item',\n ITEM_BUTTON: 'menubar-item-popupmenu-item-button',\n SEPARATOR: 'menubar-item-popupmenu-separator',\n ITEM_BUTTON_LABEL: 'menubar-item-popupmenu-item-label',\n },\n SEARCH_TOGGLE: {\n CONTAINER: 'menubar-item-searchtoggle-container',\n },\n },\n};\n/**\n * @deprecated - use GLOBAL_HEADER_SLOTS instead, it containse the full list.\n */\nexport const DSGlobalHeaderSlotsFlattened = {\n CONTAINER: DSGlobalHeaderSlots.CONTAINER,\n LOGO_CONTAINER: DSGlobalHeaderSlots.LOGO.CONTAINER,\n BREADCRUMB_CONTAINER: DSGlobalHeaderSlots.BREADCRUMB.CONTAINER,\n BREADCRUMB_PIPE: DSGlobalHeaderSlots.BREADCRUMB.PIPE,\n BREADCRUMB_CHEVRON: DSGlobalHeaderSlots.BREADCRUMB.CHEVRON,\n BREADCRUMB_LIST: DSGlobalHeaderSlots.BREADCRUMB.LIST,\n BREADCRUMB_ITEM: DSGlobalHeaderSlots.BREADCRUMB.ITEM,\n BREADCRUMB_ITEM_LINK: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK,\n BREADCRUMB_ITEM_LINK_LABEL: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK_LABEL,\n MENUBAR_CONTAINER: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n MENUBAR_LIST: DSGlobalHeaderSlots.MENUBAR.LIST,\n MENUBAR_ITEM: DSGlobalHeaderSlots.MENUBAR.ITEM,\n MENUBAR_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.ITEM_BUTTON,\n MENUBAR_POPUP_MENU_LIST: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.LIST,\n MENUBAR_POPUP_MENU_ITEM: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM,\n MENUBAR_POPUP_MENU_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON,\n MENUBAR_POPUP_MENU_SEPARATOR: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.SEPARATOR,\n MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL,\n MENUBAR_SEARCH_TOGGLE_CONTAINER: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER,\n};\n// maintain the same order as the original object\n// for slots showcase purpose\n/**\n * @deprecated - use GLOBAL_HEADER_DATA_TESTID instead, it containse the full list and is flat.\n */\nexport const DSGlobalHeaderDatatestid = {\n CONTAINER: 'ds-global-header',\n LOGO: {\n CONTAINER: 'ds-global-header-logo-container',\n },\n BREADCRUMB: {\n CHEVRON: 'ds-globalheader-breadcrumb-chevron',\n CONTAINER: 'ds-global-header-breadcrumb-container',\n PIPE: 'ds-global-header-breadcrumb-pipe',\n LIST: 'ds-global-header-breadcrumb-list',\n ITEM: 'ds-global-header-breadcrumb-item',\n ITEM_LINK: 'gh-breadcrumb-btn',\n ITEM_LINK_LABEL: 'ds-global-header-breadcrumb-item-link-label',\n },\n MENUBAR: {\n CONTAINER: 'ds-global-header-menubar-container',\n LIST: 'ds-global-header-menubar-list',\n ITEM: 'ds-global-header-menubar-item',\n ITEM_BUTTON: 'gh-toolbar-item',\n POPUP_MENU: {\n LIST: 'ds-global-header-menubar-item-popupmenu-list',\n ITEM: 'ds-global-header-menubar-item-popupmenu-item',\n ITEM_BUTTON: 'ds-global-header-menubar-item-popupmenu-item-button',\n ITEM_BUTTON_LABEL: 'ds-global-header-menubar-item-popupmenu-item-label',\n SEPARATOR: 'ds-global-header-menubar-item-popupmenu-separator',\n },\n SEARCH_TOGGLE: {\n ITEM_BUTTON: 'gh-toolbar-item',\n },\n },\n};\n\n// maintain the same order as the original object\n// for slots showcase purpose\n/**\n * @deprecated - use GLOBAL_HEADER_DATA_TESTID instead, it containse the full list\n */\nexport const DSGlobalHeaderDatatestidFlattened = {\n CONTAINER: 'ds-global-header',\n LOGO_CONTAINER: 'ds-global-header-logo-container',\n BREADCRUMB_CONTAINER: 'ds-global-header-breadcrumb-container',\n BREADCRUMB_PIPE: 'ds-global-header-breadcrumb-pipe',\n BREADCRUMB_LIST: 'ds-global-header-breadcrumb-list',\n BREADCRUMB_ITEM: 'ds-global-header-breadcrumb-item',\n BREADCRUMB_ITEM_LINK: 'gh-breadcrumb-btn',\n BREADCRUMB_ITEM_LINK_LABEL: 'ds-global-header-breadcrumb-item-link-label',\n BREADCRUMB_CHEVRON: 'ds-globalheader-breadcrumb-chevron',\n MENUBAR_CONTAINER: 'ds-global-header-menubar-container',\n MENUBAR_LIST: 'ds-global-header-menubar-list',\n MENUBAR_ITEM: 'ds-global-header-menubar-item',\n MENUBAR_ITEM_BUTTON: 'gh-toolbar-item',\n MENUBAR_POPUP_MENU_LIST: 'ds-global-header-menubar-item-popupmenu-list',\n MENUBAR_POPUP_MENU_ITEM: 'ds-global-header-menubar-item-popupmenu-item',\n MENUBAR_POPUP_MENU_ITEM_BUTTON: 'ds-global-header-menubar-item-popupmenu-item-button',\n MENUBAR_POPUP_MENU_ITEM_LABEL: 'ds-global-header-menubar-item-popupmenu-item-label',\n MENUBAR_POPUP_MENU_SEPARATOR: 'ds-global-header-menubar-item-popupmenu-separator',\n MENUBAR_SEARCH_TOGGLE_ITEM_BUTTON: 'gh-toolbar-item',\n};\n\n/* ************************************************************************************************\n * From here on our it's the \"new\" convention, but adapted to inherit from the legacy variables\n ************************************************************************************************ */\nexport const FONT_DETECTOR = {\n SMALL: 1,\n MEDIUM: 2,\n LARGE: 3,\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const GLOBAL_HEADER_SLOTS = {\n ...DSGlobalHeaderSlotsFlattened,\n // the following slots are completely new, added to the component post BREAKING CHANGES\n // https://confluence.ice.com/x/6SqFPQ\n // [Breaking Changes] Global Header - Search Toggle\n // hence, given they are new, we are not adding them to the legacy variables, we are not going to overwrite the auto-generation pattern.\n SEARCH_TOGGLE_SPINBUTTON_WRAPPER: 'searchtoggle-spinbutton-wrapper',\n SEARCH_TOGGLE_SPINBUTTON_TEXT: 'searchtoggle-spinbutton-text',\n SEARCH_TOGGLE_SPINBUTTON_SEPARATOR: 'searchtoggle-spinbutton-separator',\n SEARCH_TOGGLE_SPINBUTTON_PREV: 'searchtoggle-spinbutton-prev',\n SEARCH_TOGGLE_SPINBUTTON_NEXT: 'searchtoggle-spinbutton-next',\n SEARCH_TOGGLE_TEXTINPUT: 'searchtoggle-textinput',\n SEARCH_TOGGLE_TRIGGER_BUTTON: 'searchtoggle-trigger-button',\n SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: 'searchtoggle-expanded-content-wrapper',\n // The popup menu item's own root \u2014 the element consumers target to reach the whole item, and the one\n // that receives its xstyled props. Post-convention slot, so it carries no legacy data-testid override.\n MENUBAR_ITEM_POPUPMENU_CONTAINER: 'menubar-item-popupmenu-container',\n} as const;\n\n// PUI-17973 \u2014 default accessible name for the search input, applied when the consumer does not\n// supply their own aria-label (a consumer aria-label overrides it). Guides screen-reader users to\n// the result navigation (the spinbutton), which announces the result count/position natively.\nexport const SEARCH_TOGGLE_DEFAULT_ARIA_LABEL = 'Search. Press Tab twice to reach the result navigation.';\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const GLOBAL_HEADER_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSGlobalHeaderName, GLOBAL_HEADER_SLOTS),\n // this are the \"hardcoded\" data-testid that maps to the slots in the component that we keep as they were for backwards compatibility\n ...DSGlobalHeaderDatatestidFlattened,\n SEARCH_TOGGLE_TRIGGER_BUTTON: 'gh-toolbar-item',\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB;AAY3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,MAAM;AAAA,IACJ,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,WAAW;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,iBAAiB;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,WAAW;AAAA,MACX,mBAAmB;AAAA,IACrB;AAAA,IACA,eAAe;AAAA,MACb,WAAW;AAAA,IACb;AAAA,EACF;AACF;AAIO,MAAM,+BAA+B;AAAA,EAC1C,WAAW,oBAAoB;AAAA,EAC/B,gBAAgB,oBAAoB,KAAK;AAAA,EACzC,sBAAsB,oBAAoB,WAAW;AAAA,EACrD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,oBAAoB,oBAAoB,WAAW;AAAA,EACnD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,sBAAsB,oBAAoB,WAAW;AAAA,EACrD,4BAA4B,oBAAoB,WAAW;AAAA,EAC3D,mBAAmB,oBAAoB,QAAQ;AAAA,EAC/C,cAAc,oBAAoB,QAAQ;AAAA,EAC1C,cAAc,oBAAoB,QAAQ;AAAA,EAC1C,qBAAqB,oBAAoB,QAAQ;AAAA,EACjD,yBAAyB,oBAAoB,QAAQ,WAAW;AAAA,EAChE,yBAAyB,oBAAoB,QAAQ,WAAW;AAAA,EAChE,gCAAgC,oBAAoB,QAAQ,WAAW;AAAA,EACvE,8BAA8B,oBAAoB,QAAQ,WAAW;AAAA,EACrE,sCAAsC,oBAAoB,QAAQ,WAAW;AAAA,EAC7E,iCAAiC,oBAAoB,QAAQ,cAAc;AAC7E;AAMO,MAAM,2BAA2B;AAAA,EACtC,WAAW;AAAA,EACX,MAAM;AAAA,IACJ,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,iBAAiB;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,mBAAmB;AAAA,MACnB,WAAW;AAAA,IACb;AAAA,IACA,eAAe;AAAA,MACb,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAOO,MAAM,oCAAoC;AAAA,EAC/C,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,4BAA4B;AAAA,EAC5B,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,gCAAgC;AAAA,EAChC,+BAA+B;AAAA,EAC/B,8BAA8B;AAAA,EAC9B,mCAAmC;AACrC;AAKO,MAAM,gBAAgB;AAAA,EAC3B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAGO,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKH,kCAAkC;AAAA,EAClC,+BAA+B;AAAA,EAC/B,oCAAoC;AAAA,EACpC,+BAA+B;AAAA,EAC/B,+BAA+B;AAAA,EAC/B,yBAAyB;AAAA,EACzB,8BAA8B;AAAA,EAC9B,wCAAwC;AAAA;AAAA;AAAA,EAGxC,kCAAkC;AACpC;AAKO,MAAM,mCAAmC;AAEzC,MAAM,4BAA4B;AAAA,EACvC,GAAG,wBAAwB,oBAAoB,mBAAmB;AAAA;AAAA,EAElE,GAAG;AAAA,EACH,8BAA8B;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSGlobalHeaderName = 'DSGlobalheader';\n\n/* ************************************************************************************************\n * LEGACY VARIABLES\n * ************************************************************************************************\n * WE KEEP THIS AROUND TO AVOID BREAKING CHANGES\n * THE NEW VARIABLES INHERIT FROM THIS TO AVOID BREAKING CHANGES!!!\n ************************************************************************************************ */\n\n/**\n * @deprecated - use GLOBAL_HEADER_SLOTS instead, it containse the full list and is flat.\n */\nexport const DSGlobalHeaderSlots = {\n CONTAINER: 'root',\n LOGO: {\n CONTAINER: 'logo-container',\n },\n BREADCRUMB: {\n CONTAINER: 'breadcrumb-container',\n PIPE: 'breadcrumb-pipe',\n CHEVRON: 'breadcrumb-chevron',\n LIST: 'breadcrumb-list',\n ITEM: 'breadcrumb-item',\n ITEM_LINK: 'breadcrumb-item-link',\n ITEM_LINK_LABEL: 'breadcrumb-item-link-label',\n },\n MENUBAR: {\n CONTAINER: 'menubar-container',\n LIST: 'menubar-list',\n ITEM: 'menubar-item',\n ITEM_BUTTON: 'menubar-item-button',\n POPUP_MENU: {\n LIST: 'menubar-item-popupmenu-list',\n ITEM: 'menubar-item-popupmenu-item',\n ITEM_BUTTON: 'menubar-item-popupmenu-item-button',\n SEPARATOR: 'menubar-item-popupmenu-separator',\n ITEM_BUTTON_LABEL: 'menubar-item-popupmenu-item-label',\n },\n SEARCH_TOGGLE: {\n CONTAINER: 'menubar-item-searchtoggle-container',\n },\n },\n};\n/**\n * @deprecated - use GLOBAL_HEADER_SLOTS instead, it containse the full list.\n */\nexport const DSGlobalHeaderSlotsFlattened = {\n CONTAINER: DSGlobalHeaderSlots.CONTAINER,\n LOGO_CONTAINER: DSGlobalHeaderSlots.LOGO.CONTAINER,\n BREADCRUMB_CONTAINER: DSGlobalHeaderSlots.BREADCRUMB.CONTAINER,\n BREADCRUMB_PIPE: DSGlobalHeaderSlots.BREADCRUMB.PIPE,\n BREADCRUMB_CHEVRON: DSGlobalHeaderSlots.BREADCRUMB.CHEVRON,\n BREADCRUMB_LIST: DSGlobalHeaderSlots.BREADCRUMB.LIST,\n BREADCRUMB_ITEM: DSGlobalHeaderSlots.BREADCRUMB.ITEM,\n BREADCRUMB_ITEM_LINK: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK,\n BREADCRUMB_ITEM_LINK_LABEL: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK_LABEL,\n MENUBAR_CONTAINER: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n MENUBAR_LIST: DSGlobalHeaderSlots.MENUBAR.LIST,\n MENUBAR_ITEM: DSGlobalHeaderSlots.MENUBAR.ITEM,\n MENUBAR_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.ITEM_BUTTON,\n MENUBAR_POPUP_MENU_LIST: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.LIST,\n MENUBAR_POPUP_MENU_ITEM: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM,\n MENUBAR_POPUP_MENU_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON,\n MENUBAR_POPUP_MENU_SEPARATOR: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.SEPARATOR,\n MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL,\n MENUBAR_SEARCH_TOGGLE_CONTAINER: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER,\n};\n// maintain the same order as the original object\n// for slots showcase purpose\n/**\n * @deprecated - use GLOBAL_HEADER_DATA_TESTID instead, it containse the full list and is flat.\n */\nexport const DSGlobalHeaderDatatestid = {\n CONTAINER: 'ds-global-header',\n LOGO: {\n CONTAINER: 'ds-global-header-logo-container',\n },\n BREADCRUMB: {\n CHEVRON: 'ds-globalheader-breadcrumb-chevron',\n CONTAINER: 'ds-global-header-breadcrumb-container',\n PIPE: 'ds-global-header-breadcrumb-pipe',\n LIST: 'ds-global-header-breadcrumb-list',\n ITEM: 'ds-global-header-breadcrumb-item',\n ITEM_LINK: 'gh-breadcrumb-btn',\n ITEM_LINK_LABEL: 'ds-global-header-breadcrumb-item-link-label',\n },\n MENUBAR: {\n CONTAINER: 'ds-global-header-menubar-container',\n LIST: 'ds-global-header-menubar-list',\n ITEM: 'ds-global-header-menubar-item',\n ITEM_BUTTON: 'gh-toolbar-item',\n POPUP_MENU: {\n LIST: 'ds-global-header-menubar-item-popupmenu-list',\n ITEM: 'ds-global-header-menubar-item-popupmenu-item',\n ITEM_BUTTON: 'ds-global-header-menubar-item-popupmenu-item-button',\n ITEM_BUTTON_LABEL: 'ds-global-header-menubar-item-popupmenu-item-label',\n SEPARATOR: 'ds-global-header-menubar-item-popupmenu-separator',\n },\n SEARCH_TOGGLE: {\n ITEM_BUTTON: 'gh-toolbar-item',\n },\n },\n};\n\n// maintain the same order as the original object\n// for slots showcase purpose\n/**\n * @deprecated - use GLOBAL_HEADER_DATA_TESTID instead, it containse the full list\n */\nexport const DSGlobalHeaderDatatestidFlattened = {\n CONTAINER: 'ds-global-header',\n LOGO_CONTAINER: 'ds-global-header-logo-container',\n BREADCRUMB_CONTAINER: 'ds-global-header-breadcrumb-container',\n BREADCRUMB_PIPE: 'ds-global-header-breadcrumb-pipe',\n BREADCRUMB_LIST: 'ds-global-header-breadcrumb-list',\n BREADCRUMB_ITEM: 'ds-global-header-breadcrumb-item',\n BREADCRUMB_ITEM_LINK: 'gh-breadcrumb-btn',\n BREADCRUMB_ITEM_LINK_LABEL: 'ds-global-header-breadcrumb-item-link-label',\n BREADCRUMB_CHEVRON: 'ds-globalheader-breadcrumb-chevron',\n MENUBAR_CONTAINER: 'ds-global-header-menubar-container',\n MENUBAR_LIST: 'ds-global-header-menubar-list',\n MENUBAR_ITEM: 'ds-global-header-menubar-item',\n MENUBAR_ITEM_BUTTON: 'gh-toolbar-item',\n MENUBAR_POPUP_MENU_LIST: 'ds-global-header-menubar-item-popupmenu-list',\n MENUBAR_POPUP_MENU_ITEM: 'ds-global-header-menubar-item-popupmenu-item',\n MENUBAR_POPUP_MENU_ITEM_BUTTON: 'ds-global-header-menubar-item-popupmenu-item-button',\n MENUBAR_POPUP_MENU_ITEM_LABEL: 'ds-global-header-menubar-item-popupmenu-item-label',\n MENUBAR_POPUP_MENU_SEPARATOR: 'ds-global-header-menubar-item-popupmenu-separator',\n MENUBAR_SEARCH_TOGGLE_ITEM_BUTTON: 'gh-toolbar-item',\n};\n\n/* ************************************************************************************************\n * From here on our it's the \"new\" convention, but adapted to inherit from the legacy variables\n ************************************************************************************************ */\nexport const FONT_DETECTOR = {\n SMALL: 1,\n MEDIUM: 2,\n LARGE: 3,\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const GLOBAL_HEADER_SLOTS = {\n ...DSGlobalHeaderSlotsFlattened,\n // the following slots are completely new, added to the component post BREAKING CHANGES\n // https://confluence.ice.com/x/6SqFPQ\n // [Breaking Changes] Global Header - Search Toggle\n // hence, given they are new, we are not adding them to the legacy variables, we are not going to overwrite the auto-generation pattern.\n SEARCH_TOGGLE_SPINBUTTON_WRAPPER: 'searchtoggle-spinbutton-wrapper',\n SEARCH_TOGGLE_SPINBUTTON_TEXT: 'searchtoggle-spinbutton-text',\n SEARCH_TOGGLE_SPINBUTTON_SEPARATOR: 'searchtoggle-spinbutton-separator',\n SEARCH_TOGGLE_SPINBUTTON_PREV: 'searchtoggle-spinbutton-prev',\n SEARCH_TOGGLE_SPINBUTTON_NEXT: 'searchtoggle-spinbutton-next',\n SEARCH_TOGGLE_TEXTINPUT: 'searchtoggle-textinput',\n SEARCH_TOGGLE_TRIGGER_BUTTON: 'searchtoggle-trigger-button',\n SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: 'searchtoggle-expanded-content-wrapper',\n // The popup menu item's own root \u2014 the element consumers target to reach the whole item, and the one\n // that receives its xstyled props. Post-convention slot, so it carries no legacy data-testid override.\n MENUBAR_ITEM_POPUPMENU_CONTAINER: 'menubar-item-popupmenu-container',\n} as const;\n\n// PUI-17973 \u2014 default accessible name for the search input, applied when the consumer does not\n// supply their own aria-label (a consumer aria-label overrides it). Guides screen-reader users to\n// the result navigation (the spinbutton), which announces the result count/position natively.\nexport const SEARCH_TOGGLE_DEFAULT_ARIA_LABEL = 'Search. Press Tab twice to reach the result navigation.';\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const GLOBAL_HEADER_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSGlobalHeaderName, GLOBAL_HEADER_SLOTS),\n // this are the \"hardcoded\" data-testid that maps to the slots in the component that we keep as they were for backwards compatibility\n ...DSGlobalHeaderDatatestidFlattened,\n SEARCH_TOGGLE_TRIGGER_BUTTON: 'gh-toolbar-item',\n MENUBAR_SEARCH_TOGGLE_CONTAINER: 'ds-global-header-menubar-item-searchtoggle-container',\n // /\\ PUI-19020 was ds-global-header-... changed to ds-globalheader ...\n // unexpected and unwanted change in the data-testid existing testid detected by QA.\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,13 +5,14 @@ import React2 from "react";
|
|
|
5
5
|
import { AppPickerCtx } from "./AppPickerCTX.js";
|
|
6
6
|
import { TriggerDefaultComponent } from "./TriggerDefaultComponent.js";
|
|
7
7
|
const AppPickerRenderer = () => {
|
|
8
|
-
const { contractProps } = React2.useContext(AppPickerCtx);
|
|
8
|
+
const { contractProps, id } = React2.useContext(AppPickerCtx);
|
|
9
9
|
const consumerOwnsTheTrigger = Boolean(contractProps.renderTrigger || contractProps.TriggerComponent);
|
|
10
10
|
return /* @__PURE__ */ jsx(
|
|
11
11
|
DSAppPicker,
|
|
12
12
|
{
|
|
13
13
|
openAndFocusOnArrowKeys: true,
|
|
14
14
|
...consumerOwnsTheTrigger ? {} : { TriggerComponent: TriggerDefaultComponent },
|
|
15
|
+
...id ? { id } : {},
|
|
15
16
|
...contractProps
|
|
16
17
|
}
|
|
17
18
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPickerRenderer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSAppPicker } from '@elliemae/ds-app-picker';\nimport React from 'react';\nimport { AppPickerCtx } from './AppPickerCTX.js';\nimport { TriggerDefaultComponent } from './TriggerDefaultComponent.js';\n\nexport const AppPickerRenderer = (): JSX.Element => {\n const { contractProps } = React.useContext(AppPickerCtx);\n\n /*\n * Our default trigger applies only when the consumer supplied neither trigger API.\n *\n * This one cannot be expressed by spread order, unlike every other default below. DSAppPicker's\n * Trigger gives `TriggerComponent` precedence over `renderTrigger` (Trigger.tsx: \"TriggerComponent\n * wins when both custom APIs are supplied\"), so passing ours unconditionally would silently discard a\n * consumer's `renderTrigger` no matter where `contractProps` is spread \u2014 the spread would forward\n * their prop faithfully and DSAppPicker would then ignore it. Deciding here instead keeps both custom\n * trigger APIs working through the toolbar config.\n */\n const consumerOwnsTheTrigger = Boolean(contractProps.renderTrigger || contractProps.TriggerComponent);\n\n return (\n <DSAppPicker\n // Dimsum IoC direction: our default renders first and the consumer's contract props are spread over\n // it, so anything they put in `componentProps` wins and becomes theirs to own.\n // `getDSAppPickerContractProps` drops keys explicitly set to undefined, so an unset key in the config\n // never erases a default here.\n //\n // Note what is NOT passed: no `isOpen`, no `onKeyDown`, no `onClickOutside`. Passing `isOpen` makes\n // the picker controlled and passing `onKeyDown` switches off its Escape routing and focus return \u2014\n // either way this part would owe a reimplementation of behaviour DSAppPicker already has. See\n // useAppPickerCTX for the full statement.\n //\n // The toolbar is a menubar, so ArrowDown/ArrowUp on a toolbar item open it \u2014 that is this widget's\n // keyboard contract, not an application-level choice, which is why it is opted in here rather than\n // left to each consumer. The picker owns the whole flow: it records the arrow-key activation and\n // seeds focus on the selected app (first for ArrowDown, last for ArrowUp). Spread order still lets a\n // consumer turn it off through `componentProps`.\n openAndFocusOnArrowKeys\n // `TriggerComponent`, not the deprecated `renderTrigger`: DSAppPicker renders this one as JSX so it\n // gets its own fiber and may use hooks, and it is the only trigger API that receives the id the\n // panel's aria-labelledby points at. See TriggerDefaultComponent for the full reasoning.\n {...(consumerOwnsTheTrigger ? {} : { TriggerComponent: TriggerDefaultComponent })}\n {...contractProps}\n />\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACqBnB;AArBJ,SAAS,mBAAmB;AAC5B,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AAEjC,MAAM,oBAAoB,MAAmB;AAClD,QAAM,EAAE,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSAppPicker } from '@elliemae/ds-app-picker';\nimport React from 'react';\nimport { AppPickerCtx } from './AppPickerCTX.js';\nimport { TriggerDefaultComponent } from './TriggerDefaultComponent.js';\n\nexport const AppPickerRenderer = (): JSX.Element => {\n const { contractProps, id } = React.useContext(AppPickerCtx);\n\n /*\n * Our default trigger applies only when the consumer supplied neither trigger API.\n *\n * This one cannot be expressed by spread order, unlike every other default below. DSAppPicker's\n * Trigger gives `TriggerComponent` precedence over `renderTrigger` (Trigger.tsx: \"TriggerComponent\n * wins when both custom APIs are supplied\"), so passing ours unconditionally would silently discard a\n * consumer's `renderTrigger` no matter where `contractProps` is spread \u2014 the spread would forward\n * their prop faithfully and DSAppPicker would then ignore it. Deciding here instead keeps both custom\n * trigger APIs working through the toolbar config.\n */\n const consumerOwnsTheTrigger = Boolean(contractProps.renderTrigger || contractProps.TriggerComponent);\n\n return (\n <DSAppPicker\n // Dimsum IoC direction: our default renders first and the consumer's contract props are spread over\n // it, so anything they put in `componentProps` wins and becomes theirs to own.\n // `getDSAppPickerContractProps` drops keys explicitly set to undefined, so an unset key in the config\n // never erases a default here.\n //\n // Note what is NOT passed: no `isOpen`, no `onKeyDown`, no `onClickOutside`. Passing `isOpen` makes\n // the picker controlled and passing `onKeyDown` switches off its Escape routing and focus return \u2014\n // either way this part would owe a reimplementation of behaviour DSAppPicker already has. See\n // useAppPickerCTX for the full statement.\n //\n // The toolbar is a menubar, so ArrowDown/ArrowUp on a toolbar item open it \u2014 that is this widget's\n // keyboard contract, not an application-level choice, which is why it is opted in here rather than\n // left to each consumer. The picker owns the whole flow: it records the arrow-key activation and\n // seeds focus on the selected app (first for ArrowDown, last for ArrowUp). Spread order still lets a\n // consumer turn it off through `componentProps`.\n openAndFocusOnArrowKeys\n // `TriggerComponent`, not the deprecated `renderTrigger`: DSAppPicker renders this one as JSX so it\n // gets its own fiber and may use hooks, and it is the only trigger API that receives the id the\n // panel's aria-labelledby points at. See TriggerDefaultComponent for the full reasoning.\n {...(consumerOwnsTheTrigger ? {} : { TriggerComponent: TriggerDefaultComponent })}\n /*\n * PUI-18985 \u2014 the item-level `id` names the App Picker, and DSAppPicker derives every id in the\n * widget from it: the root takes it unchanged, the trigger becomes `getIdForAppPickerTrigger(id)`, and the\n * dialog's `aria-labelledby` points at that same trigger id. Handing it over here is what makes\n * those three agree.\n *\n * Before this, `id` rode along in `otherProps` and was spread onto the trigger AFTER the id\n * DSAppPicker had supplied, so the trigger carried the bare item id while the dialog still pointed\n * at the generated one \u2014 a pointer to no element, and a dialog with no accessible name (axe\n * `aria-dialog-name`, serious). useAppPickerCTX now reads `id` out of `otherProps` so only this\n * route exists.\n *\n * Consumers who addressed the trigger by the bare item id migrate to `getIdForAppPickerTrigger`, exported by\n * ds-app-picker; the bare id now selects the picker root. Omitted when unset, so DSAppPicker's own\n * generated instance id is untouched.\n */\n {...(id ? { id } : {})}\n {...contractProps}\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACqBnB;AArBJ,SAAS,mBAAmB;AAC5B,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AAEjC,MAAM,oBAAoB,MAAmB;AAClD,QAAM,EAAE,eAAe,GAAG,IAAIA,OAAM,WAAW,YAAY;AAY3D,QAAM,yBAAyB,QAAQ,cAAc,iBAAiB,cAAc,gBAAgB;AAEpG,SACE;AAAA,IAAC;AAAA;AAAA,MAgBC,yBAAuB;AAAA,MAItB,GAAI,yBAAyB,CAAC,IAAI,EAAE,kBAAkB,wBAAwB;AAAA,MAiB9E,GAAI,KAAK,EAAE,GAAG,IAAI,CAAC;AAAA,MACnB,GAAG;AAAA;AAAA,EACN;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/TriggerDefaultComponent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSAppPickerT } from '@elliemae/ds-app-picker';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { getGlobalAttributes, getXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React from 'react';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../../../constants/index.js';\nimport { StyledButton } from '../../../styles.js';\nimport { AppPickerCtx } from './AppPickerCTX.js';\n\n/*\n * The toolbar's default App Picker trigger, as a real component with its own module.\n *\n * MUST be handed to DSAppPicker as `TriggerComponent`, never `renderTrigger`. Two reasons, both hard:\n *\n * 1. This component uses `useContext`. DSAppPicker renders `TriggerComponent` as JSX so React creates a\n * fiber for it, which is what makes hooks here legal. `renderTrigger` is invoked as a plain function\n * (`renderTrigger({ ref })`) to honour the legacy DSPopover render-prop contract, so any hook inside\n * it registers against DSAppPicker's Trigger fiber instead \u2014 a rules-of-hooks violation React cannot\n * detect at runtime.\n * 2. Only `TriggerComponent` receives `dialogLabelId`, the id the panel's `aria-labelledby` points at.\n * It arrives as `id` and is applied below; drop it and the dialog has no accessible name.\n */\nexport const TriggerDefaultComponent = ({\n innerRef,\n id,\n onClick: appPickerOnClick,\n onKeyDown: appPickerOnKeyDown,\n 'aria-haspopup': ariaHasPopup,\n}: DSAppPickerT.TriggerComponentProps): JSX.Element => {\n const { triggerOnClick, setRef, triggerRef, label, otherProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader } =\n React.useContext(AppPickerCtx);\n\n /*\n * Three refs on one node: the toolbar's arrow-key roving registration, a consumer-supplied `triggerRef`,\n * and DSAppPicker's own \u2014 the last is what its focus return targets after a scoped Escape, so dropping\n * `innerRef` here silently strands focus when the panel closes.\n *\n * No focus logic beyond that. Returning focus to this trigger is DSAppPicker's job and it does it, which\n * is only true while this part supplies no `onKeyDown` to it \u2014 see useAppPickerCTX.\n */\n const handleTriggerRefs = React.useCallback(\n (buttonRef: HTMLButtonElement) => {\n setRef(buttonRef);\n mergeRefs(triggerRef, innerRef)(buttonRef);\n },\n [setRef, triggerRef, innerRef],\n );\n\n /*\n * DSAppPicker's `onClick` does the opening AND records whether the activation came from the keyboard\n * (`e.detail === 0`), which is what lets it land focus on the selected app rather than the panel. It must\n * always run.\n *\n * `triggerOnClick` is the consumer's own click callback and runs alongside it. It does not suppress the\n * open: a consumer who needs to own the transition supplies `componentProps.isOpen`, which makes the\n * picker controlled and renders its internal flip inert.\n */\n const handleOnClickComposed = React.useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n appPickerOnClick(e);\n triggerOnClick?.(e as React.MouseEvent<HTMLButtonElement>);\n },\n [appPickerOnClick, triggerOnClick],\n );\n\n return (\n <StyledButton\n id={id}\n onClick={handleOnClickComposed}\n onKeyDown={appPickerOnKeyDown}\n innerRef={handleTriggerRefs}\n aria-label={label}\n data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON}\n aria-haspopup={ariaHasPopup}\n // No `aria-expanded`, matching DSAppPicker's own trigger. This one opens a `role=\"dialog\"`, and in\n // the dialog pattern the open state is conveyed by the dialog's presence, not by an attribute on the\n // control. The sibling toolbar items DO carry it correctly \u2014 `ds-popup-menu` opens a `role=\"menu\"`\n // and `ds-search-toggle` expands an inline region, which are the patterns the attribute belongs to.\n // Item-level global attributes land here, AFTER the handlers above, so an `onKeyDown` or `onClick`\n // set directly on the toolbar entry replaces the one this trigger wired. That is the documented\n // item-level override and `WithControlledAppPicker` relies on it \u2014 but note what an `onKeyDown`\n // override costs now: it takes over `openAndFocusOnArrowKeys`, so the arrow keys stop opening the\n // picker unless the consumer opens it themselves.\n {...getGlobalAttributes(otherProps)}\n // The part-level xstyled layer, which the contract advertises \u2014 this is the element that serves it.\n {...getXstyledProps(otherProps)}\n type=\"button\"\n // Exposes the dsGlobalheaderMenubarItemButton slot on this trigger. Drop either prop and the slot\n // goes silently inert \u2014 getPartProps returns {} without the lookup table and generates no\n // data-dimsum-slot.\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n // Explicit and empty: no render-time values worth handing to a function-form slot prop. Stated so\n // \"what arguments does this slot get?\" always has a visible answer at the call site.\n getOwnerPropsArguments={() => ({})}\n >\n <MenuPicker width={20.73} height={20.73} />\n </StyledButton>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSAppPickerT } from '@elliemae/ds-app-picker';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { getGlobalAttributes, getXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React from 'react';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../../../constants/index.js';\nimport { StyledButton } from '../../../styles.js';\nimport { AppPickerCtx } from './AppPickerCTX.js';\n\n/*\n * The toolbar's default App Picker trigger, as a real component with its own module.\n *\n * MUST be handed to DSAppPicker as `TriggerComponent`, never `renderTrigger`. Two reasons, both hard:\n *\n * 1. This component uses `useContext`. DSAppPicker renders `TriggerComponent` as JSX so React creates a\n * fiber for it, which is what makes hooks here legal. `renderTrigger` is invoked as a plain function\n * (`renderTrigger({ ref })`) to honour the legacy DSPopover render-prop contract, so any hook inside\n * it registers against DSAppPicker's Trigger fiber instead \u2014 a rules-of-hooks violation React cannot\n * detect at runtime.\n * 2. Only `TriggerComponent` receives `dialogLabelId`, the id the panel's `aria-labelledby` points at.\n * It arrives as `id` and is applied below; drop it and the dialog has no accessible name.\n */\nexport const TriggerDefaultComponent = ({\n innerRef,\n id,\n onClick: appPickerOnClick,\n onKeyDown: appPickerOnKeyDown,\n 'aria-haspopup': ariaHasPopup,\n}: DSAppPickerT.TriggerComponentProps): JSX.Element => {\n const { triggerOnClick, setRef, triggerRef, label, otherProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader } =\n React.useContext(AppPickerCtx);\n\n /*\n * Three refs on one node: the toolbar's arrow-key roving registration, a consumer-supplied `triggerRef`,\n * and DSAppPicker's own \u2014 the last is what its focus return targets after a scoped Escape, so dropping\n * `innerRef` here silently strands focus when the panel closes.\n *\n * No focus logic beyond that. Returning focus to this trigger is DSAppPicker's job and it does it, which\n * is only true while this part supplies no `onKeyDown` to it \u2014 see useAppPickerCTX.\n */\n const handleTriggerRefs = React.useCallback(\n (buttonRef: HTMLButtonElement) => {\n setRef(buttonRef);\n mergeRefs(triggerRef, innerRef)(buttonRef);\n },\n [setRef, triggerRef, innerRef],\n );\n\n /*\n * DSAppPicker's `onClick` does the opening AND records whether the activation came from the keyboard\n * (`e.detail === 0`), which is what lets it land focus on the selected app rather than the panel. It must\n * always run.\n *\n * `triggerOnClick` is the consumer's own click callback and runs alongside it. It does not suppress the\n * open: a consumer who needs to own the transition supplies `componentProps.isOpen`, which makes the\n * picker controlled and renders its internal flip inert.\n */\n const handleOnClickComposed = React.useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n appPickerOnClick(e);\n triggerOnClick?.(e as React.MouseEvent<HTMLButtonElement>);\n },\n [appPickerOnClick, triggerOnClick],\n );\n\n return (\n <StyledButton\n id={id}\n onClick={handleOnClickComposed}\n onKeyDown={appPickerOnKeyDown}\n innerRef={handleTriggerRefs}\n aria-label={label}\n data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON}\n aria-haspopup={ariaHasPopup}\n // No `aria-expanded`, matching DSAppPicker's own trigger. This one opens a `role=\"dialog\"`, and in\n // the dialog pattern the open state is conveyed by the dialog's presence, not by an attribute on the\n // control. The sibling toolbar items DO carry it correctly \u2014 `ds-popup-menu` opens a `role=\"menu\"`\n // and `ds-search-toggle` expands an inline region, which are the patterns the attribute belongs to.\n // Item-level global attributes land here, AFTER the handlers above, so an `onKeyDown` or `onClick`\n // set directly on the toolbar entry replaces the one this trigger wired. That is the documented\n // item-level override and `WithControlledAppPicker` relies on it \u2014 but note what an `onKeyDown`\n // override costs now: it takes over `openAndFocusOnArrowKeys`, so the arrow keys stop opening the\n // picker unless the consumer opens it themselves.\n //\n // `id` is the one global attribute that cannot reach this spread: useAppPickerCTX reads it out by\n // name and AppPickerRenderer hands it to DSAppPicker, which owns every id in this widget and derives\n // the `id` above from it. Left in here it would take that key back and strand the dialog's\n // `aria-labelledby` \u2014 PUI-18985.\n {...getGlobalAttributes(otherProps)}\n // The part-level xstyled layer, which the contract advertises \u2014 this is the element that serves it.\n {...getXstyledProps(otherProps)}\n type=\"button\"\n // Exposes the dsGlobalheaderMenubarItemButton slot on this trigger. Drop either prop and the slot\n // goes silently inert \u2014 getPartProps returns {} without the lookup table and generates no\n // data-dimsum-slot.\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n // Explicit and empty: no render-time values worth handing to a function-form slot prop. Stated so\n // \"what arguments does this slot get?\" always has a visible answer at the call site.\n getOwnerPropsArguments={() => ({})}\n >\n <MenuPicker width={20.73} height={20.73} />\n </StyledButton>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACoGjB;AAnGN,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB,uBAAuB;AACrD,SAAS,iBAAiB;AAC1B,OAAOA,YAAW;AAClB,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAetB,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AACnB,MAAuD;AACrD,QAAM,EAAE,gBAAgB,QAAQ,YAAY,OAAO,YAAY,8CAA8C,IAC3GA,OAAM,WAAW,YAAY;AAU/B,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,CAAC,cAAiC;AAChC,aAAO,SAAS;AAChB,gBAAU,YAAY,QAAQ,EAAE,SAAS;AAAA,IAC3C;AAAA,IACA,CAAC,QAAQ,YAAY,QAAQ;AAAA,EAC/B;AAWA,QAAM,wBAAwBA,OAAM;AAAA,IAClC,CAAC,MAA8C;AAC7C,uBAAiB,CAAC;AAClB,uBAAiB,CAAwC;AAAA,IAC3D;AAAA,IACA,CAAC,kBAAkB,cAAc;AAAA,EACnC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,cAAY;AAAA,MACZ,eAAa,0BAA0B;AAAA,MACvC,iBAAe;AAAA,MAed,GAAG,oBAAoB,UAAU;AAAA,MAEjC,GAAG,gBAAgB,UAAU;AAAA,MAC9B,MAAK;AAAA,MAIL,eAAe;AAAA,MAGf,wBAAwB,OAAO,CAAC;AAAA,MAEhC,8BAAC,cAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\n\n/*\n * Relocated here from DSGlobalHeaderT.AppPickerProps, per the convention every other part in the repo\n * follows. Consumed by useAppPickerCTX / AppPickerCTXRenderer.\n *\n * This namespace describes what DSGlobalHeader passes DOWN to its own out-of-the-box App Picker\n * wrapper. It is NOT the shape an application developer authors \u2014 that is\n * DSGlobalHeaderT.ToolbarAppPickerItem (the toolbar config entry) and, inside it,\n * DSGlobalHeaderT.AppPickerComponentProps. The wrapper is an opinionated pre-configuration that\n * offloads work from the app developer onto Dimsum, so it generates props the developer never sees\n * (`setRef`, `getOwnerPropsAwareOfPropsPassedToGlobalHeader`) and is not meant to know about unless they\n * drop to atomic composition and render DSAppPicker themselves.\n *\n * The three IoC layers an out-of-the-box item is meant to expose are all present here:\n * 1. item-level global attributes, forwarded onto the rendered trigger \u2014 except `id`, which\n * useAppPickerCTX reads out by name and AppPickerRenderer hands to DSAppPicker, because that is\n * the component that owns every id this widget renders (PUI-18985)\n * 2. the slot layer, via `getOwnerPropsAwareOfPropsPassedToGlobalHeader` (parent-owned slots \u2014 see the\n * no-slots note below)\n * 3. `componentProps`, the wrapped component's own contract\n *\n * No slots of its own: every styled element this part renders is declared under the PARENT's name and\n * GLOBAL_HEADER_SLOTS, and those slot values are a published data-dimsum-slot / data-testid surface \u2014\n * re-declaring them here would change them, which the QA stability rule forbids. So, as with\n * ds-data-table-filters' FilterPopover, this file carries no PropsForGlobalOnSlots and no\n * getPropsPerSlotPropTypes. Consumers reach these slots through DSGlobalHeader, where they already do.\n *\n * KNOWN GAP (shared by all four out-of-the-box parts, no decision pending on this file) \u2014 `XstyledProps`\n * is declared below and `xstyledPropTypes` is spread into the schema, but no part forwards xstyled props\n * to any element. Global attributes ARE forwarded, via getGlobalAttributes in TriggerDefaultComponent.\n * The declaration comes from the part-generator template and the FilterPopover precedent; making it true\n * needs a styled target per part, which PopupMenu's bare-<div> root does not currently have.\n */\nexport declare namespace AppPickerT {\n export interface RequiredProps {\n /** Accessible name for the trigger, and the toolbar item's label. */\n label: string;\n /** The consumer-authored configuration object. Forwarded to DSAppPicker by its own contract. */\n componentProps: DSGlobalHeaderT.AppPickerComponentProps;\n /*\n * The slot IoC layer, and the ONLY half of it that may be drilled down.\n *\n * `getPartProps` uses this as the lookup table: it indexes the returned object by the styled\n * element's `data-dimsum-slot` (falling back to `data-testid`) to find the consumer's slot prop.\n * That table can therefore only come from DSGlobalHeader, because only DSGlobalHeader holds the\n * props the consumer passed \u2014 hence the deliberately verbose name. It is also what gates slot\n * generation at all: `styledFunction` sets `didDefinedGetOwnerProps: !!getOwnerProps`, and\n * `getPartProps` short-circuits to `{}` without it.\n *\n * Its former companion `getOwnerPropsArguments` is deliberately NOT here. That one is the hydrator\n * for function-form slot props \u2014 `getPartProps` calls `elementProps(getOwnerPropsArguments())` and\n * uses it for nothing else \u2014 so it must be defined by whichever element is rendering the slot,\n * which is the only place that knows the render-time values worth passing. Bundling the two forced\n * every slot in the package to share one hydrator; see ds-chat-bubble's ChatBubbleArrow and\n * ds-fast-list's List for what per-site hydration is actually for.\n */\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: () => Partial<DSGlobalHeaderT.DefaultProps>;\n /** Focus-management registration, supplied by useGlobalHeaderToolbar for arrow-key navigation. */\n setRef: (ref: HTMLElement) => void;\n }\n\n /*\n * Intentionally empty, and intentionally still declared: `never` is a statement, not an oversight \u2014\n * \"this part has no default props, do not expect them\". Keeping the member present preserves\n * at-a-glance parity with every other part's namespace and makes adding a default a one-line change.\n */\n export interface DefaultProps {}\n\n export interface OptionalProps {}\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n keyof RequiredProps | keyof DefaultProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n keyof RequiredProps | keyof DefaultProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const AppPickerPropTypes: DSPropTypesSchema<AppPickerT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Accessible name for the trigger button, and the toolbar label').isRequired,\n componentProps: PropTypes.object.description(\n 'The consumer-authored DSAppPicker configuration; forwarded per DSAppPicker own contract via getDSAppPickerContractProps',\n ).isRequired,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: PropTypes.func\n .description(\n 'Returns the props passed to DSGlobalHeader, so getPartProps can look up this slot consumer-supplied props. Must come from DSGlobalHeader; the function-form hydrator is supplied per slot render site instead',\n )\n .signature('(() => Partial<DSGlobalHeaderT.DefaultProps> )').isRequired,\n setRef: PropTypes.func\n .description('Registers the trigger node with the toolbar focus management for arrow-key navigation')\n .signature('(( ref: HTMLElement ) => void )').isRequired,\n};\n\nexport const AppPickerPropTypesSchema = AppPickerPropTypes as unknown as ValidationMap<AppPickerT.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AAiGhE,MAAM,qBAA0D;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,OAAO,YAAY,+DAA+D,EAAE;AAAA,EACrG,gBAAgB,UAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,+CAA+C,UAAU,KACtD;AAAA,IACC;AAAA,EACF,EACC,UAAU,gDAAgD,EAAE;AAAA,EAC/D,QAAQ,UAAU,KACf,YAAY,uFAAuF,EACnG,UAAU,iCAAiC,EAAE;AAClD;AAEO,MAAM,2BAA2B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,11 +2,12 @@ import * as React from "react";
|
|
|
2
2
|
import { getDSAppPickerContractProps } from "@elliemae/ds-app-picker";
|
|
3
3
|
import React2 from "react";
|
|
4
4
|
const useAppPickerCTX = (config) => {
|
|
5
|
-
const { label, componentProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader, setRef, ...otherProps } = config;
|
|
5
|
+
const { label, componentProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader, setRef, id, ...otherProps } = config;
|
|
6
6
|
const { triggerRef, triggerOnClick } = componentProps;
|
|
7
7
|
const contractProps = React2.useMemo(() => getDSAppPickerContractProps(componentProps), [componentProps]);
|
|
8
8
|
return React2.useMemo(
|
|
9
9
|
() => ({
|
|
10
|
+
id,
|
|
10
11
|
label,
|
|
11
12
|
componentProps,
|
|
12
13
|
otherProps,
|
|
@@ -17,6 +18,7 @@ const useAppPickerCTX = (config) => {
|
|
|
17
18
|
triggerOnClick
|
|
18
19
|
}),
|
|
19
20
|
[
|
|
21
|
+
id,
|
|
20
22
|
label,
|
|
21
23
|
componentProps,
|
|
22
24
|
otherProps,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/useAppPickerCTX.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getDSAppPickerContractProps } from '@elliemae/ds-app-picker';\nimport React from 'react';\nimport type { AppPickerT } from './react-desc-prop-types.js';\n\n/*\n * This part owns NO open/close state, and that is deliberate.\n *\n * DSAppPicker owns the whole flow: its trigger click toggles the panel, `openAndFocusOnArrowKeys` gives\n * it ArrowDown/ArrowUp, a scoped Escape closes it and returns focus to the trigger, and a click outside\n * closes it. Lifting `isOpen` into this part would make the picker CONTROLLED, which switches every one\n * of those off \u2014 they would then have to be reimplemented here, against a component that already has\n * them and is tested for them.\n *\n * Two knock-on effects, worth knowing before adding state back:\n * - there is no `aria-expanded` on this item's trigger, so no open state is needed to feed one. The\n * picker opens a `role=\"dialog\"`, and that pattern conveys open state by the dialog's presence. The\n * sibling items keep the attribute because a menu and a disclosure region are what it is for.\n * - supplying `onKeyDown` to DSAppPicker sets `closeOnEscape: !onKeyDown`, i.e. it switches OFF the\n * picker's Escape routing AND its focus return. That is why this part supplies none, and why it needs\n * no focus tracker of its own.\n *\n * A consumer can still drive it: `componentProps.isOpen` reaches DSAppPicker through the contract\n * passthrough and makes it controlled for them, which is the supported way to own the transition.\n */\nexport const useAppPickerCTX = (config: AppPickerT.Props) => {\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mCAAmC;AAC5C,OAAOA,YAAW;AAuBX,MAAM,kBAAkB,CAAC,WAA6B;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getDSAppPickerContractProps } from '@elliemae/ds-app-picker';\nimport React from 'react';\nimport type { AppPickerT } from './react-desc-prop-types.js';\n\n/*\n * This part owns NO open/close state, and that is deliberate.\n *\n * DSAppPicker owns the whole flow: its trigger click toggles the panel, `openAndFocusOnArrowKeys` gives\n * it ArrowDown/ArrowUp, a scoped Escape closes it and returns focus to the trigger, and a click outside\n * closes it. Lifting `isOpen` into this part would make the picker CONTROLLED, which switches every one\n * of those off \u2014 they would then have to be reimplemented here, against a component that already has\n * them and is tested for them.\n *\n * Two knock-on effects, worth knowing before adding state back:\n * - there is no `aria-expanded` on this item's trigger, so no open state is needed to feed one. The\n * picker opens a `role=\"dialog\"`, and that pattern conveys open state by the dialog's presence. The\n * sibling items keep the attribute because a menu and a disclosure region are what it is for.\n * - supplying `onKeyDown` to DSAppPicker sets `closeOnEscape: !onKeyDown`, i.e. it switches OFF the\n * picker's Escape routing AND its focus return. That is why this part supplies none, and why it needs\n * no focus tracker of its own.\n *\n * A consumer can still drive it: `componentProps.isOpen` reaches DSAppPicker through the contract\n * passthrough and makes it controlled for them, which is the supported way to own the transition.\n */\nexport const useAppPickerCTX = (config: AppPickerT.Props) => {\n /*\n * Read by name: only what this part needs for its own behaviour. `otherProps` is the item-level global\n * attributes, which reach the trigger via getGlobalAttributes. Everything a consumer put in\n * `componentProps` reaches DSAppPicker through `contractProps` instead \u2014 do not cherry-pick from\n * componentProps here, that is what the contract filter is for.\n *\n * `id` is read out by name so it does NOT stay in `otherProps` (PUI-18985). It is a member of\n * GlobalAttributesT, so left in there it would be spread onto the trigger and take the key back from\n * DSAppPicker \u2014 which owns every id this widget puts in the DOM and derives them all from this one\n * value. Naming the App Picker is what the item-level `id` means here; the trigger's own id is\n * `getIdForAppPickerTrigger(id)`, exported by ds-app-picker for exactly this reason.\n */\n const { label, componentProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader, setRef, id, ...otherProps } = config;\n const { triggerRef, triggerOnClick } = componentProps;\n\n // `componentProps` is declared as DSAppPicker's own props plus this part's `triggerOnClick`, so every\n // DSAppPicker prop a consumer puts there is part of the contract \u2014 including all nine slot props.\n // Deriving the forwardable set from DSAppPicker's own contract is what keeps the two from drifting, and\n // it strips the one key in that object that belongs to this part rather than to DSAppPicker:\n // `triggerOnClick`. (`setRef` is a sibling field of `componentProps`, not inside it, so it never\n // reaches the filter.)\n const contractProps = React.useMemo(() => getDSAppPickerContractProps(componentProps), [componentProps]);\n\n return React.useMemo(\n () => ({\n id,\n label,\n componentProps,\n otherProps,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n setRef,\n contractProps,\n triggerRef,\n triggerOnClick,\n }),\n [\n id,\n label,\n componentProps,\n otherProps,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n setRef,\n contractProps,\n triggerRef,\n triggerOnClick,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mCAAmC;AAC5C,OAAOA,YAAW;AAuBX,MAAM,kBAAkB,CAAC,WAA6B;AAa3D,QAAM,EAAE,OAAO,gBAAgB,+CAA+C,QAAQ,IAAI,GAAG,WAAW,IAAI;AAC5G,QAAM,EAAE,YAAY,eAAe,IAAI;AAQvC,QAAM,gBAAgBA,OAAM,QAAQ,MAAM,4BAA4B,cAAc,GAAG,CAAC,cAAc,CAAC;AAEvG,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/react-desc-prop-types.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport type { DSGlobalHeaderT } from '../../../../../react-desc-prop-types.js';\n\n/*\n * Relocated here from DSGlobalHeaderT.PopupMenuContentProps, per the convention every other part in the\n * repo follows. Consumed by PopupMenuContent.tsx.\n *\n * This is the innermost of the three Popup* contracts and the one least likely to be a consumer's\n * business: it is what the PopupMenu wrapper hands to its own menu-content renderer. Every prop except\n * `options` is machinery the wrapper generated. `options` is the one consumer-authored value on it,\n * and it arrives already unwrapped from DSGlobalHeaderT.PopupMenuComponentProps \u2014 which is exactly why\n * having both `PopupMenuComponentProps` and `PopupMenuContentProps` visible side by side in the public\n * namespace was misleading: they look like a pair a developer chooses between, and they are not.\n *\n * IoC layers: the slot layer via `getOwnerPropsAwareOfPropsPassedToGlobalHeader` (fully wired \u2014 this part\n * passes it to the list, items, item buttons, labels and separators, each with its own explicit empty\n * hydrator), per-entry global attributes via `options` items, and the part-level global attribute /\n * xstyled layer below.\n *\n * KNOWN GAP \u2014 the part-level global attribute + xstyled layer is the one thing in this file that was an\n * addition rather than a transcription: the old DSGlobalHeaderT.PopupMenuContentProps did not extend\n * GlobalAttributesT at all, which made this the only out-of-the-box part missing that layer and left its\n * PropTypes unable to spread globalAttributesPropTypes coherently. Nothing forwards either to the root\n * list yet, so for this part both remain a statement of the intended contract rather than of behaviour.\n * Per-entry attributes on `options` items DO reach the DOM and are covered by the pillar tests.\n *\n * No slots of its own \u2014 see the AppPicker sibling file for why.\n */\nexport declare namespace PopupMenuContentT {\n export interface RequiredProps {\n /** The consumer-authored menu entries, unwrapped from componentProps by the PopupMenu wrapper. */\n options: DSGlobalHeaderT.PopupMenuContentItem[];\n /** Wrapper callback: applies the item's closeOnClick policy after a menu item is clicked. */\n onItemClick: () => void;\n /** Wrapper callback: closes the menu and returns focus to the trigger. */\n /** Which end of the menu this open lands on \u2014 see usePopupMenuContent. */\n openIntent: 'first' | 'last';\n /** Wrapper callback: the floating context's hide function. */\n setIsOpen: () => void;\n /*\n * The slot lookup table, and the only half of the slot IoC layer that may be drilled down \u2014 the\n * function-form hydrator is supplied per slot render site instead. See the AppPicker sibling for the\n * full reasoning and the getPartProps mechanics behind the name.\n */\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: () => Partial<DSGlobalHeaderT.DefaultProps>;\n }\n\n /*\n * Intentionally empty, and intentionally still declared \u2014 \"this part has no default props, do not\n * expect them\". See the AppPicker sibling for the full reasoning.\n */\n export interface DefaultProps {}\n\n export interface OptionalProps {\n /*\n * Optional, matching the runtime: PopupMenuContent guards it (`if (popupOnKeyPress)`) and consumers\n * routinely omit it. It was declared required, which was simply wrong \u2014 the type claimed a guarantee\n * the code never relied on, and every consumer omitting it was type-lying to satisfy the compiler.\n */\n popupOnKeyPress?: (event: React.KeyboardEvent) => void;\n }\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLUListElement>,\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n keyof RequiredProps | keyof DefaultProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLUListElement>,\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n keyof RequiredProps | keyof DefaultProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const PopupMenuContentPropTypes: DSPropTypesSchema<PopupMenuContentT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n options: PropTypes.array.description(\n 'Consumer-authored menu entries. Format: [{ type?, Icon?, label?, onClick?, Content?, ...globalAttributes }]',\n ).isRequired,\n onItemClick: PropTypes.func\n .description('Invoked after a menu item click so the wrapper can apply its closeOnClick policy')\n .signature('(() => void )').isRequired,\n openIntent: PropTypes.string.description('Which end of the menu this open lands on: \"first\" or \"last\"').isRequired,\n setIsOpen: PropTypes.func.description(\"The floating context's hide function\").signature('(() => void )').isRequired,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: PropTypes.func\n .description(\n 'Returns the props passed to DSGlobalHeader, so getPartProps can look up this slot consumer-supplied props. Must come from DSGlobalHeader; the function-form hydrator is supplied per slot render site instead',\n )\n .signature('(() => Partial<DSGlobalHeaderT.DefaultProps> )').isRequired,\n popupOnKeyPress: PropTypes.func\n .description('Consumer key handler, invoked on menu items alongside the internal keyboard navigation')\n .signature('(( event: React.KeyboardEvent ) => void )'),\n};\n\nexport const PopupMenuContentPropTypesSchema =\n PopupMenuContentPropTypes as unknown as ValidationMap<PopupMenuContentT.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AAwFhE,MAAM,4BAAwE;AAAA,EACnF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,MAAM;AAAA,IACvB;AAAA,EACF,EAAE;AAAA,EACF,aAAa,UAAU,KACpB,YAAY,kFAAkF,EAC9F,UAAU,eAAe,EAAE;AAAA,EAC9B,YAAY,UAAU,OAAO,YAAY,6DAA6D,EAAE;AAAA,EACxG,WAAW,UAAU,KAAK,YAAY,sCAAsC,EAAE,UAAU,eAAe,EAAE;AAAA,EACzG,+CAA+C,UAAU,KACtD;AAAA,IACC;AAAA,EACF,EACC,UAAU,gDAAgD,EAAE;AAAA,EAC/D,iBAAiB,UAAU,KACxB,YAAY,wFAAwF,EACpG,UAAU,2CAA2C;AAC1D;AAEO,MAAM,kCACX;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport type React from 'react';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\n\n/*\n * Relocated here from DSGlobalHeaderT.PopupProps, per the convention every other part in the repo\n * follows. Consumed by PopupMenu.tsx.\n *\n * This namespace describes what DSGlobalHeader passes DOWN to its own out-of-the-box Popup Menu\n * wrapper. It is NOT the shape an application developer authors \u2014 that is\n * DSGlobalHeaderT.PopupMenuItem (the toolbar config entry) and, inside it,\n * DSGlobalHeaderT.PopupMenuComponentProps. `setRef` and\n * `getOwnerPropsAwareOfPropsPassedToGlobalHeader` are generated by the widget and the developer is not\n * meant to know about them.\n *\n * The old name is worth losing on the way: `PopupProps` sat a word away from `PopupMenuItem`,\n * `PopupMenuComponentProps` and `PopupMenuContentProps` in the same namespace \u2014 the first two of which\n * ARE consumer-authored, while the third was internal and has been relocated to menuContent/ alongside\n * this one. `PopupMenuT.Props`, scoped to this directory, cannot be mistaken for any of them.\n *\n * All three IoC layers present: item-level global attributes onto the trigger, the slot layer via\n * `getOwnerPropsAwareOfPropsPassedToGlobalHeader`, and `componentProps` for the menu's own contract.\n *\n * No slots of its own \u2014 see the AppPicker sibling file for why (published slot surface stays under the\n * parent's name).\n *\n * KNOWN GAP \u2014 xstyled props are declared and not forwarded, as in every sibling part. See the AppPicker\n * file for the full statement; this part is additionally the one with no styled root to forward them to,\n * because PopupMenu.tsx's outermost element is a bare <div>.\n */\nexport declare namespace PopupMenuT {\n export interface RequiredProps {\n /** The consumer-authored configuration object for this toolbar item. */\n componentProps: DSGlobalHeaderT.PopupMenuComponentProps;\n /*\n * The slot lookup table, and the only half of the slot IoC layer that may be drilled down \u2014 the\n * function-form hydrator is supplied per slot render site instead. See the AppPicker sibling for the\n * full reasoning and the getPartProps mechanics behind the name.\n */\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: () => Partial<DSGlobalHeaderT.DefaultProps>;\n /** Focus-management registration, supplied by useGlobalHeaderToolbar for arrow-key navigation. */\n setRef: (ref: HTMLElement) => void;\n }\n\n /*\n * Intentionally empty, and intentionally still declared \u2014 \"this part has no default props, do not\n * expect them\". See the AppPicker sibling for the full reasoning.\n */\n export interface DefaultProps {}\n\n export interface OptionalProps {\n Icon?: React.ComponentType<SvgIconT.Props>;\n onClick?: (event: React.MouseEvent) => void;\n /*\n * Carries the toolbar item's `label`: GlobalHeaderToolbar renders <PopupMenu title={label} .../>.\n * Faithful to the current declaration, including its standing note that landing this in the HTML\n * `title` attribute was probably not intended but is kept to avoid a breaking change.\n */\n title?: string;\n }\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const PopupMenuPropTypes: DSPropTypesSchema<PopupMenuT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n componentProps: PropTypes.object.description(\n 'The consumer-authored popup menu configuration: options, isOpen, closeOnClick and the key handlers',\n ).isRequired,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: PropTypes.func\n .description(\n 'Returns the props passed to DSGlobalHeader, so getPartProps can look up this slot consumer-supplied props. Must come from DSGlobalHeader; the function-form hydrator is supplied per slot render site instead',\n )\n .signature('(() => Partial<DSGlobalHeaderT.DefaultProps> )').isRequired,\n setRef: PropTypes.func\n .description('Registers the trigger node with the toolbar focus management for arrow-key navigation')\n .signature('(( ref: HTMLElement ) => void )').isRequired,\n Icon: PropTypes.func.description('Icon rendered inside the trigger button'),\n onClick: PropTypes.func\n .description('Consumer click handler for the trigger, invoked alongside the internal open/close toggle')\n .signature('(( event: React.MouseEvent ) => void )'),\n title: PropTypes.string.description(\n 'Receives the toolbar item label; printed as the HTML title attribute on the trigger',\n ),\n};\n\nexport const PopupMenuPropTypesSchema = PopupMenuPropTypes as unknown as ValidationMap<PopupMenuT.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AAuFhE,MAAM,qBAA0D;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,UAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,+CAA+C,UAAU,KACtD;AAAA,IACC;AAAA,EACF,EACC,UAAU,gDAAgD,EAAE;AAAA,EAC/D,QAAQ,UAAU,KACf,YAAY,uFAAuF,EACnG,UAAU,iCAAiC,EAAE;AAAA,EAChD,MAAM,UAAU,KAAK,YAAY,yCAAyC;AAAA,EAC1E,SAAS,UAAU,KAChB,YAAY,0FAA0F,EACtG,UAAU,wCAAwC;AAAA,EACrD,OAAO,UAAU,OAAO;AAAA,IACtB;AAAA,EACF;AACF;AAEO,MAAM,2BAA2B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -141,6 +141,7 @@ const SearchToggle = (outOfTheBoxDrilledDownProps) => {
|
|
|
141
141
|
return /* @__PURE__ */ jsxs(
|
|
142
142
|
StyledNavSearchBoxContainer,
|
|
143
143
|
{
|
|
144
|
+
"data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_SEARCH_TOGGLE_CONTAINER,
|
|
144
145
|
...itemLevelGlobalAttributes,
|
|
145
146
|
...getXstyledProps(restIncludingItemLevelGlobalAttributes),
|
|
146
147
|
getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport { getGlobalAttributes, getXstyledProps } from '@elliemae/ds-props-helpers';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n DSGlobalHeaderName,\n GLOBAL_HEADER_DATA_TESTID,\n GLOBAL_HEADER_SLOTS,\n SEARCH_TOGGLE_DEFAULT_ARIA_LABEL,\n} from '../../../../constants/index.js';\nimport { SearchToggleSpinButton } from './SearchToggleSpinButton.js';\nimport { defaultProps, type SearchToggleT } from './react-desc-prop-types.js';\nimport { useSearchToggle } from './useSearchToggle.js';\n\nconst StyledNavSearchBoxContainer = styled('div', {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.MENUBAR_SEARCH_TOGGLE_CONTAINER,\n})<{ isOpen: boolean }>`\n background: ${({ theme, isOpen }) => (isOpen ? theme.colors.neutral['000'] : 'transparent')};\n position: relative;\n display: flex;\n align-items: center;\n width: ${({ isOpen }) => (isOpen ? '260px' : 'auto')};\n & .em-ds-button {\n margin-right: 2px;\n height: 24px;\n width: 24px;\n }\n`;\n\nconst StyledSearchNavContainer = styled(Grid, {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER,\n})`\n background: ${({ theme }) => theme.colors.neutral['000']};\n position: relative;\n padding: 2px;\n`;\n\nconst StyledSearchInput = styled(DSInputText, {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TEXTINPUT,\n})``;\n\nconst ExpandedToggleBtnStyles = css`\n margin-left: 2px;\n`;\nconst CollapsedToggleBtnStyles = css`\n height: 3.077rem;\n width: 3.077rem;\n border: none;\n background-color: transparent;\n cursor: pointer;\n position: relative;\n\n // we want to avoid the pseudo-border in the nested buttons\n & button:focus .pseudo-border {\n outline: none;\n border: none;\n }\n && span.pseudo-border {\n display: none;\n }\n\n // our \"ad-hoc\" styling of the DSButtonV3 that re-implement changed colors/focus-borders\n & .em-ds-icon svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n\n &&:hover {\n background-color: ${({ theme }) => theme.colors.brand[700]};\n }\n\n &&:focus-visible {\n background-color: transparent;\n }\n\n &&:focus-visible::before {\n content: '';\n position: absolute;\n z-index: 2;\n top: 2px;\n left: 2px;\n width: calc(100% - 4px);\n height: calc(100% - 4px);\n border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n border-radius: 4px;\n pointer-events: none;\n }\n`;\n\nconst StyledToggleBtn = styled(DSButtonV3, {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TRIGGER_BUTTON,\n})<{ isOpen: boolean }>`\n ${({ isOpen }) => (!isOpen ? CollapsedToggleBtnStyles : ExpandedToggleBtnStyles)}\n`;\n\nexport const SearchToggle = (outOfTheBoxDrilledDownProps: SearchToggleT.Props): JSX.Element => {\n const {\n componentProps,\n label,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n // added in https://jira.elliemae.io/browse/PUI-17852\n // keeping the default value as \"Close search\" for backward compatibility\n // we expect authors to provide descriptive aria-labels that fit their specific context, we do so in our example stories.\n // The default now comes from this part's own defaultProps rather than being repeated inline, so the\n // documented contract and the runtime behaviour cannot drift apart.\n ariaLabelExpanded = defaultProps.ariaLabelExpanded,\n // Everything else the toolbar drilled down, which is where item-level global attributes arrive.\n // `setRef` and `instanceUID` ride along in here too and are filtered out by getGlobalAttributes'\n // own whitelist, so they never reach the DOM.\n ...restIncludingItemLevelGlobalAttributes\n } = outOfTheBoxDrilledDownProps;\n\n const {\n isOpenUncontrolled,\n containerRef,\n handleToggleSearch,\n handleContainerKeyDown,\n handleChange,\n handleTriggerRefs,\n inputId,\n panelId,\n } = useSearchToggle(outOfTheBoxDrilledDownProps);\n\n const {\n onNext,\n onPrevious,\n currentResultIndex,\n totalResults,\n placeholder,\n value,\n onBlur,\n onClear,\n isOpen: userIsOpen,\n searchContainerRef,\n } = componentProps;\n\n /*\n * Explicit and empty hydrator, shared by this part's slot render sites: `getOwnerPropsArguments` feeds\n * function-form slot props and nothing else, and none of the elements below carry render-time values\n * worth passing. Stated so \"what arguments does this slot get?\" is always answerable at the call site.\n */\n const noSlotArguments = React.useCallback(() => ({}), []);\n const isOpen = userIsOpen ?? isOpenUncontrolled;\n /*\n * Item-level global attributes, forwarded onto this part's ROOT container \u2014 NOT onto its trigger button,\n * which is where the sibling item types put theirs. Two reasons, and both matter if you move it:\n *\n * - The trigger is a DSButtonV3, whose own prop vocabulary collides with the HTML global set: `shape`\n * is `ButtonShapesT` there and the `<area>` attribute in GlobalAttributesT, and `onClick` takes a\n * wider event union. Spreading the whole set onto it does not type-check, and narrowing it would\n * forward less than the siblings do.\n * - The container is what this item type renders AS; the button is a child of it. Attributes describing\n * the toolbar item belong on the item's root.\n *\n * Consequence for selector authors: `data-public` lands on the element wrapping the whole search area,\n * not on the icon button.\n */\n const itemLevelGlobalAttributes = getGlobalAttributes<typeof restIncludingItemLevelGlobalAttributes, HTMLDivElement>(\n restIncludingItemLevelGlobalAttributes,\n );\n\n return (\n <StyledNavSearchBoxContainer\n // Spread FIRST, so the props below win on the keys they own \u2014 the opposite order from PopupMenu and\n // AppPicker, which spread theirs last. Here the internal keys are live state rather than defaults:\n // `onKeyDown` carries Escape-collapses and `innerRef` carries the consumer's own searchContainerRef.\n // An item-level attribute overwriting either is a regression, not an override. Everything a consumer\n // legitimately sets at this level \u2014 data attributes, id, title \u2014 is unaffected, since nothing below\n // claims those keys.\n {...itemLevelGlobalAttributes}\n // The part-level xstyled layer, which the contract advertises \u2014 this is the element that serves it.\n {...getXstyledProps(restIncludingItemLevelGlobalAttributes)}\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n onKeyDown={handleContainerKeyDown}\n innerRef={mergeRefs(searchContainerRef, containerRef)}\n isOpen={isOpen}\n >\n <StyledToggleBtn\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n buttonType=\"icon\"\n innerRef={handleTriggerRefs}\n aria-label={isOpen ? ariaLabelExpanded : label}\n aria-expanded={isOpen}\n aria-controls={panelId}\n onClick={handleToggleSearch}\n isOpen={isOpen}\n data-testid={GLOBAL_HEADER_DATA_TESTID.SEARCH_TOGGLE_TRIGGER_BUTTON}\n >\n <Search color={isOpen ? ['brand-primary', '800'] : ['neutral', '0']} />\n </StyledToggleBtn>\n\n {isOpen ? (\n <StyledSearchNavContainer\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n id={panelId}\n alignItems=\"center\"\n cols={['1fr', '1fr']}\n >\n <StyledSearchInput\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n id={inputId}\n // PUI-17973 \u2014 default accessible name guiding users to the result navigation; a\n // consumer-supplied aria-label (via the textinput slot) overrides this.\n aria-label={SEARCH_TOGGLE_DEFAULT_ARIA_LABEL}\n placeholder={placeholder || 'Search...'}\n value={value}\n clearable\n // passing onBlur as {undefined} breaks the input text focus ring management\n // if onBlur is not provided, we don't pass the prop at all\n // this is not expected as confirmed in conversation with Gerardo\n // we are not going to implement the fix right now to avoid potential breaking changes,\n // but we will keep an eye on this behavior and consider a fix in the future if needed.\n {...(onBlur && { onBlur })}\n onChange={handleChange}\n onClear={onClear}\n />\n <SearchToggleSpinButton\n onNext={onNext}\n onPrevious={onPrevious}\n currentResultIndex={currentResultIndex}\n totalResults={totalResults}\n getOwnerPropsAwareOfPropsPassedToGlobalHeader={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n />\n </StyledSearchNavContainer>\n ) : null}\n </StyledNavSearchBoxContainer>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport { getGlobalAttributes, getXstyledProps } from '@elliemae/ds-props-helpers';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n DSGlobalHeaderName,\n GLOBAL_HEADER_DATA_TESTID,\n GLOBAL_HEADER_SLOTS,\n SEARCH_TOGGLE_DEFAULT_ARIA_LABEL,\n} from '../../../../constants/index.js';\nimport { SearchToggleSpinButton } from './SearchToggleSpinButton.js';\nimport { defaultProps, type SearchToggleT } from './react-desc-prop-types.js';\nimport { useSearchToggle } from './useSearchToggle.js';\n\nconst StyledNavSearchBoxContainer = styled('div', {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.MENUBAR_SEARCH_TOGGLE_CONTAINER,\n})<{ isOpen: boolean }>`\n background: ${({ theme, isOpen }) => (isOpen ? theme.colors.neutral['000'] : 'transparent')};\n position: relative;\n display: flex;\n align-items: center;\n width: ${({ isOpen }) => (isOpen ? '260px' : 'auto')};\n & .em-ds-button {\n margin-right: 2px;\n height: 24px;\n width: 24px;\n }\n`;\n\nconst StyledSearchNavContainer = styled(Grid, {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER,\n})`\n background: ${({ theme }) => theme.colors.neutral['000']};\n position: relative;\n padding: 2px;\n`;\n\nconst StyledSearchInput = styled(DSInputText, {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TEXTINPUT,\n})``;\n\nconst ExpandedToggleBtnStyles = css`\n margin-left: 2px;\n`;\nconst CollapsedToggleBtnStyles = css`\n height: 3.077rem;\n width: 3.077rem;\n border: none;\n background-color: transparent;\n cursor: pointer;\n position: relative;\n\n // we want to avoid the pseudo-border in the nested buttons\n & button:focus .pseudo-border {\n outline: none;\n border: none;\n }\n && span.pseudo-border {\n display: none;\n }\n\n // our \"ad-hoc\" styling of the DSButtonV3 that re-implement changed colors/focus-borders\n & .em-ds-icon svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n\n &&:hover {\n background-color: ${({ theme }) => theme.colors.brand[700]};\n }\n\n &&:focus-visible {\n background-color: transparent;\n }\n\n &&:focus-visible::before {\n content: '';\n position: absolute;\n z-index: 2;\n top: 2px;\n left: 2px;\n width: calc(100% - 4px);\n height: calc(100% - 4px);\n border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n border-radius: 4px;\n pointer-events: none;\n }\n`;\n\nconst StyledToggleBtn = styled(DSButtonV3, {\n name: DSGlobalHeaderName,\n slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TRIGGER_BUTTON,\n})<{ isOpen: boolean }>`\n ${({ isOpen }) => (!isOpen ? CollapsedToggleBtnStyles : ExpandedToggleBtnStyles)}\n`;\n\nexport const SearchToggle = (outOfTheBoxDrilledDownProps: SearchToggleT.Props): JSX.Element => {\n const {\n componentProps,\n label,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n // added in https://jira.elliemae.io/browse/PUI-17852\n // keeping the default value as \"Close search\" for backward compatibility\n // we expect authors to provide descriptive aria-labels that fit their specific context, we do so in our example stories.\n // The default now comes from this part's own defaultProps rather than being repeated inline, so the\n // documented contract and the runtime behaviour cannot drift apart.\n ariaLabelExpanded = defaultProps.ariaLabelExpanded,\n // Everything else the toolbar drilled down, which is where item-level global attributes arrive.\n // `setRef` and `instanceUID` ride along in here too and are filtered out by getGlobalAttributes'\n // own whitelist, so they never reach the DOM.\n ...restIncludingItemLevelGlobalAttributes\n } = outOfTheBoxDrilledDownProps;\n\n const {\n isOpenUncontrolled,\n containerRef,\n handleToggleSearch,\n handleContainerKeyDown,\n handleChange,\n handleTriggerRefs,\n inputId,\n panelId,\n } = useSearchToggle(outOfTheBoxDrilledDownProps);\n\n const {\n onNext,\n onPrevious,\n currentResultIndex,\n totalResults,\n placeholder,\n value,\n onBlur,\n onClear,\n isOpen: userIsOpen,\n searchContainerRef,\n } = componentProps;\n\n /*\n * Explicit and empty hydrator, shared by this part's slot render sites: `getOwnerPropsArguments` feeds\n * function-form slot props and nothing else, and none of the elements below carry render-time values\n * worth passing. Stated so \"what arguments does this slot get?\" is always answerable at the call site.\n */\n const noSlotArguments = React.useCallback(() => ({}), []);\n const isOpen = userIsOpen ?? isOpenUncontrolled;\n /*\n * Item-level global attributes, forwarded onto this part's ROOT container \u2014 NOT onto its trigger button,\n * which is where the sibling item types put theirs. Two reasons, and both matter if you move it:\n *\n * - The trigger is a DSButtonV3, whose own prop vocabulary collides with the HTML global set: `shape`\n * is `ButtonShapesT` there and the `<area>` attribute in GlobalAttributesT, and `onClick` takes a\n * wider event union. Spreading the whole set onto it does not type-check, and narrowing it would\n * forward less than the siblings do.\n * - The container is what this item type renders AS; the button is a child of it. Attributes describing\n * the toolbar item belong on the item's root.\n *\n * Consequence for selector authors: `data-public` lands on the element wrapping the whole search area,\n * not on the icon button.\n */\n const itemLevelGlobalAttributes = getGlobalAttributes<typeof restIncludingItemLevelGlobalAttributes, HTMLDivElement>(\n restIncludingItemLevelGlobalAttributes,\n );\n\n return (\n <StyledNavSearchBoxContainer\n // Legacy data-testid \u2014 breaking change if removed/changed (see project_compatibility.md)\n data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_SEARCH_TOGGLE_CONTAINER}\n // Spread FIRST, so the props below win on the keys they own \u2014 the opposite order from PopupMenu and\n // AppPicker, which spread theirs last. Here the internal keys are live state rather than defaults:\n // `onKeyDown` carries Escape-collapses and `innerRef` carries the consumer's own searchContainerRef.\n // An item-level attribute overwriting either is a regression, not an override. Everything a consumer\n // legitimately sets at this level \u2014 data attributes, id, title \u2014 is unaffected, since nothing below\n // claims those keys.\n {...itemLevelGlobalAttributes}\n // The part-level xstyled layer, which the contract advertises \u2014 this is the element that serves it.\n {...getXstyledProps(restIncludingItemLevelGlobalAttributes)}\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n onKeyDown={handleContainerKeyDown}\n innerRef={mergeRefs(searchContainerRef, containerRef)}\n isOpen={isOpen}\n >\n <StyledToggleBtn\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n buttonType=\"icon\"\n innerRef={handleTriggerRefs}\n aria-label={isOpen ? ariaLabelExpanded : label}\n aria-expanded={isOpen}\n aria-controls={panelId}\n onClick={handleToggleSearch}\n isOpen={isOpen}\n data-testid={GLOBAL_HEADER_DATA_TESTID.SEARCH_TOGGLE_TRIGGER_BUTTON}\n >\n <Search color={isOpen ? ['brand-primary', '800'] : ['neutral', '0']} />\n </StyledToggleBtn>\n\n {isOpen ? (\n <StyledSearchNavContainer\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n id={panelId}\n alignItems=\"center\"\n cols={['1fr', '1fr']}\n >\n <StyledSearchInput\n getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n getOwnerPropsArguments={noSlotArguments}\n id={inputId}\n // PUI-17973 \u2014 default accessible name guiding users to the result navigation; a\n // consumer-supplied aria-label (via the textinput slot) overrides this.\n aria-label={SEARCH_TOGGLE_DEFAULT_ARIA_LABEL}\n placeholder={placeholder || 'Search...'}\n value={value}\n clearable\n // passing onBlur as {undefined} breaks the input text focus ring management\n // if onBlur is not provided, we don't pass the prop at all\n // this is not expected as confirmed in conversation with Gerardo\n // we are not going to implement the fix right now to avoid potential breaking changes,\n // but we will keep an eye on this behavior and consider a fix in the future if needed.\n {...(onBlur && { onBlur })}\n onChange={handleChange}\n onClear={onClear}\n />\n <SearchToggleSpinButton\n onNext={onNext}\n onPrevious={onPrevious}\n currentResultIndex={currentResultIndex}\n totalResults={totalResults}\n getOwnerPropsAwareOfPropsPassedToGlobalHeader={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n />\n </StyledSearchNavContainer>\n ) : null}\n </StyledNavSearchBoxContainer>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\n\n/*\n * Relocated here from DSGlobalHeaderT.SearchToggleProps, per the convention every other part in the repo\n * follows. Consumed by SearchToggle.tsx, useSearchToggle.tsx and SearchToggleSpinButton.tsx.\n *\n * This namespace describes what DSGlobalHeader passes DOWN to its own out-of-the-box Search Toggle.\n * It is NOT the shape an application developer authors \u2014 that is\n * DSGlobalHeaderT.ToolbarSearchToggleItem and, inside it, DSGlobalHeaderT.ToggleSearchComponentProps.\n * The two old names are the sharpest illustration of the problem this relocation solves:\n * `SearchToggleProps` (internal) and `ToggleSearchComponentProps` (consumer-authored) are near-anagrams\n * of each other, adjacent in the same public namespace, with opposite audiences.\n *\n * All three IoC layers present and wired, as on the siblings:\n * 1. item-level global attributes, forwarded onto this part's ROOT container\n * 2. the slot layer, via `getOwnerPropsAwareOfPropsPassedToGlobalHeader`\n * 3. `componentProps`, the search configuration's own contract\n *\n * Two things about layer 1 that differ from the siblings and are worth knowing when writing selectors:\n * the attributes land on the container rather than the trigger button, because the container is what\n * this item type renders as and the trigger is a DSButtonV3 whose own props collide with the HTML global\n * set (`shape` is ButtonShapesT there and the <area> attribute in GlobalAttributesT); and they are spread\n * BEFORE the internal props rather than after, so `onKeyDown` (Escape-collapses) and `innerRef` (the\n * consumer's searchContainerRef) cannot be clobbered. Both are stated at the spread site in\n * SearchToggle.tsx. Until PUI-18647 this layer was declared here and forwarded nowhere, so `data-public`\n * on a 'ds-search-toggle' item never reached the DOM at all; that is fixed and covered by\n * GlobalHeader.SearchToggle.pui-18647.test.js.\n *\n * No slots of its own \u2014 see the AppPicker sibling file for why.\n */\nexport declare namespace SearchToggleT {\n export interface RequiredProps {\n /** Accessible name for the collapsed trigger, and the toolbar item's label. */\n label: string;\n /** The consumer-authored configuration object for this toolbar item. */\n componentProps: DSGlobalHeaderT.ToggleSearchComponentProps;\n /*\n * The slot lookup table, and the only half of the slot IoC layer that may be drilled down \u2014 the\n * function-form hydrator is supplied per slot render site instead. See the AppPicker sibling for the\n * full reasoning and the getPartProps mechanics behind the name.\n */\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: () => Partial<DSGlobalHeaderT.DefaultProps>;\n /** Focus-management registration, supplied by useGlobalHeaderToolbar for arrow-key navigation. */\n setRef: (ref: HTMLButtonElement | null) => void;\n /*\n * Namespaces the input and panel DOM ids so multiple headers on one page cannot collide on the\n * aria-controls relationship. Typed here rather than aliased from the parent's Context: this part\n * only needs \"an id-safe string\", and coupling it to the parent's shape would tie the two together\n * for no benefit.\n */\n instanceUID: string;\n }\n\n export interface DefaultProps {\n /*\n * Accessible name for the trigger once expanded. Defaults to the pre-PUI-17852 hardcoded string for\n * backward compatibility; authors are encouraged to supply context-specific text.\n */\n ariaLabelExpanded: string;\n }\n\n export interface OptionalProps {}\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof RequiredProps | keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof RequiredProps | keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n}\n\n// Part-level defaultProps, per the part generator's shape. Consumed by SearchToggle.tsx so the\n// documented default and the runtime default cannot drift. The name intentionally matches the package's\n// own `defaultProps`; fallow's duplicate-export grouping for that convention is handled once in\n// fallow.internals.jsonc rather than suppressed per file.\nexport const defaultProps: SearchToggleT.DefaultProps = {\n ariaLabelExpanded: 'Close search',\n};\n\nexport const SearchTogglePropTypes: DSPropTypesSchema<SearchToggleT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Accessible name for the collapsed trigger, and the toolbar label').isRequired,\n componentProps: PropTypes.object.description(\n 'The consumer-authored search configuration: value, result counters and the change/clear/navigation handlers',\n ).isRequired,\n getOwnerPropsAwareOfPropsPassedToGlobalHeader: PropTypes.func\n .description(\n 'Returns the props passed to DSGlobalHeader, so getPartProps can look up this slot consumer-supplied props. Must come from DSGlobalHeader; the function-form hydrator is supplied per slot render site instead',\n )\n .signature('(() => Partial<DSGlobalHeaderT.DefaultProps> )').isRequired,\n setRef: PropTypes.func\n .description('Registers the trigger node with the toolbar focus management for arrow-key navigation')\n .signature('(( ref: HTMLButtonElement | null ) => void )').isRequired,\n instanceUID: PropTypes.string.description(\n 'Namespaces the input and panel DOM ids so multiple headers on a page do not collide on aria-controls',\n ).isRequired,\n ariaLabelExpanded: PropTypes.string\n .description('Accessible name for the trigger once expanded (PUI-17852)')\n .defaultValue('Close search'),\n};\n\nexport const SearchTogglePropTypesSchema = SearchTogglePropTypes as unknown as ValidationMap<SearchToggleT.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AAqFhE,MAAM,eAA2C;AAAA,EACtD,mBAAmB;AACrB;AAEO,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,OAAO,YAAY,kEAAkE,EAAE;AAAA,EACxG,gBAAgB,UAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,+CAA+C,UAAU,KACtD;AAAA,IACC;AAAA,EACF,EACC,UAAU,gDAAgD,EAAE;AAAA,EAC/D,QAAQ,UAAU,KACf,YAAY,uFAAuF,EACnG,UAAU,8CAA8C,EAAE;AAAA,EAC7D,aAAa,UAAU,OAAO;AAAA,IAC5B;AAAA,EACF,EAAE;AAAA,EACF,mBAAmB,UAAU,OAC1B,YAAY,2DAA2D,EACvE,aAAa,cAAc;AAChC;AAEO,MAAM,8BAA8B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -153,6 +153,7 @@ export declare const GLOBAL_HEADER_SLOTS: {
|
|
|
153
153
|
export declare const SEARCH_TOGGLE_DEFAULT_ARIA_LABEL = "Search. Press Tab twice to reach the result navigation.";
|
|
154
154
|
export declare const GLOBAL_HEADER_DATA_TESTID: {
|
|
155
155
|
SEARCH_TOGGLE_TRIGGER_BUTTON: string;
|
|
156
|
+
MENUBAR_SEARCH_TOGGLE_CONTAINER: string;
|
|
156
157
|
CONTAINER: string;
|
|
157
158
|
LOGO_CONTAINER: string;
|
|
158
159
|
BREADCRUMB_CONTAINER: string;
|
|
@@ -181,5 +182,4 @@ export declare const GLOBAL_HEADER_DATA_TESTID: {
|
|
|
181
182
|
SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: "ds-globalheader-searchtoggle-expanded-content-wrapper";
|
|
182
183
|
MENUBAR_ITEM_POPUPMENU_CONTAINER: "ds-globalheader-menubar-item-popupmenu-container";
|
|
183
184
|
MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: `ds-globalheader-${string}`;
|
|
184
|
-
MENUBAR_SEARCH_TOGGLE_CONTAINER: `ds-globalheader-${string}`;
|
|
185
185
|
};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { AppPickerT } from './react-desc-prop-types.js';
|
|
3
3
|
export declare const useAppPickerCTX: (config: AppPickerT.Props) => {
|
|
4
|
+
id: string | undefined;
|
|
4
5
|
label: string;
|
|
5
6
|
componentProps: import("../../../../react-desc-prop-types.js").DSGlobalHeaderT.AppPickerComponentProps;
|
|
6
7
|
otherProps: {
|
|
@@ -233,7 +234,6 @@ export declare const useAppPickerCTX: (config: AppPickerT.Props) => {
|
|
|
233
234
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
234
235
|
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
235
236
|
hidden?: boolean | undefined | undefined;
|
|
236
|
-
id?: string | undefined | undefined;
|
|
237
237
|
lang?: string | undefined | undefined;
|
|
238
238
|
nonce?: string | undefined | undefined;
|
|
239
239
|
slot?: string | undefined | undefined;
|
|
@@ -427,24 +427,24 @@ export declare const useAppPickerCTX: (config: AppPickerT.Props) => {
|
|
|
427
427
|
borderBottom?: string;
|
|
428
428
|
borderRight?: string;
|
|
429
429
|
borderLeft?: string;
|
|
430
|
-
borderColor?:
|
|
431
|
-
borderTopColor?:
|
|
432
|
-
borderBottomColor?:
|
|
433
|
-
borderRightColor?:
|
|
434
|
-
borderLeftColor?:
|
|
430
|
+
borderColor?: string;
|
|
431
|
+
borderTopColor?: string;
|
|
432
|
+
borderBottomColor?: string;
|
|
433
|
+
borderRightColor?: string;
|
|
434
|
+
borderLeftColor?: string;
|
|
435
435
|
borderStyle?: string;
|
|
436
436
|
borderTopStyle?: string;
|
|
437
437
|
borderBottomStyle?: string;
|
|
438
438
|
borderRightStyle?: string;
|
|
439
439
|
borderLeftStyle?: string;
|
|
440
|
-
borderWidth?:
|
|
441
|
-
borderTopWidth?:
|
|
442
|
-
borderBottomWidth?:
|
|
443
|
-
borderRightWidth?:
|
|
444
|
-
borderLeftWidth?:
|
|
440
|
+
borderWidth?: import("@elliemae/ds-system").AllMeasures;
|
|
441
|
+
borderTopWidth?: import("@elliemae/ds-system").AllMeasures;
|
|
442
|
+
borderBottomWidth?: import("@elliemae/ds-system").AllMeasures;
|
|
443
|
+
borderRightWidth?: import("@elliemae/ds-system").AllMeasures;
|
|
444
|
+
borderLeftWidth?: import("@elliemae/ds-system").AllMeasures;
|
|
445
445
|
borderRadius?: string;
|
|
446
|
-
backgroundColor?:
|
|
447
|
-
bg?:
|
|
446
|
+
backgroundColor?: string;
|
|
447
|
+
bg?: string;
|
|
448
448
|
fontWeight?: import("@xstyled/styled-components").SystemProp<{} | (string & {}) | "inherit" | (number & {}) | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "bold" | "normal" | "bolder" | "lighter" | "thin" | "light" | "regular" | "semibold", import("@xstyled/styled-components").Theme> | undefined;
|
|
449
449
|
textAlign?: import("@xstyled/styled-components").SystemProp<import("csstype").Property.TextAlign, import("@xstyled/styled-components").Theme> | undefined;
|
|
450
450
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-global-header",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.69",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Global Header",
|
|
6
6
|
"files": [
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
],
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
25
|
-
"url": "https://
|
|
25
|
+
"url": "https://github.com/intcx/PLATFORM-UI.dimsum.git"
|
|
26
26
|
},
|
|
27
27
|
"engines": {
|
|
28
28
|
"pnpm": ">=9",
|
|
@@ -37,22 +37,22 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"uid": "^2.0.2",
|
|
40
|
-
"@elliemae/ds-app-picker": "3.70.0-next.
|
|
41
|
-
"@elliemae/ds-button-v2": "3.70.0-next.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-hooks-fontsize-media": "3.70.0-next.
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-app-picker": "3.70.0-next.69",
|
|
41
|
+
"@elliemae/ds-button-v2": "3.70.0-next.69",
|
|
42
|
+
"@elliemae/ds-grid": "3.70.0-next.69",
|
|
43
|
+
"@elliemae/ds-form-input-text": "3.70.0-next.69",
|
|
44
|
+
"@elliemae/ds-floating-context": "3.70.0-next.69",
|
|
45
|
+
"@elliemae/ds-hooks-fontsize-media": "3.70.0-next.69",
|
|
46
|
+
"@elliemae/ds-icons": "3.70.0-next.69",
|
|
47
|
+
"@elliemae/ds-system": "3.70.0-next.69",
|
|
48
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.69"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"jest": "^30.0.0",
|
|
52
52
|
"jest-axe": "^11.0.0",
|
|
53
53
|
"styled-components": "~5.3.11",
|
|
54
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
55
|
-
"@elliemae/ds-test-utils": "3.70.0-next.
|
|
54
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.69",
|
|
55
|
+
"@elliemae/ds-test-utils": "3.70.0-next.69"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"@testing-library/react": "^16.0.1",
|