@pega/cosmos-react-core 3.0.0-dev.6.0 → 3.0.0-dev.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (153) hide show
  1. package/lib/components/AppShell/AppShell.d.ts.map +1 -1
  2. package/lib/components/AppShell/AppShell.js +3 -3
  3. package/lib/components/AppShell/AppShell.js.map +1 -1
  4. package/lib/components/Badges/Keyboard.d.ts +9 -0
  5. package/lib/components/Badges/Keyboard.d.ts.map +1 -0
  6. package/lib/components/Badges/Keyboard.js +51 -0
  7. package/lib/components/Badges/Keyboard.js.map +1 -0
  8. package/lib/components/Badges/index.d.ts +2 -0
  9. package/lib/components/Badges/index.d.ts.map +1 -1
  10. package/lib/components/Badges/index.js +1 -0
  11. package/lib/components/Badges/index.js.map +1 -1
  12. package/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
  13. package/lib/components/ComboBox/ComboBox.js +1 -2
  14. package/lib/components/ComboBox/ComboBox.js.map +1 -1
  15. package/lib/components/Configuration/Configuration.d.ts.map +1 -1
  16. package/lib/components/Configuration/Configuration.js +1 -1
  17. package/lib/components/Configuration/Configuration.js.map +1 -1
  18. package/lib/components/CreditCard/CreditCard.types.d.ts +43 -0
  19. package/lib/components/CreditCard/CreditCard.types.d.ts.map +1 -1
  20. package/lib/components/CreditCard/CreditCard.types.js.map +1 -1
  21. package/lib/components/CreditCard/CreditCardInput.d.ts +6 -0
  22. package/lib/components/CreditCard/CreditCardInput.d.ts.map +1 -0
  23. package/lib/components/CreditCard/CreditCardInput.js +39 -0
  24. package/lib/components/CreditCard/CreditCardInput.js.map +1 -0
  25. package/lib/components/CreditCard/index.d.ts +3 -1
  26. package/lib/components/CreditCard/index.d.ts.map +1 -1
  27. package/lib/components/CreditCard/index.js +2 -0
  28. package/lib/components/CreditCard/index.js.map +1 -1
  29. package/lib/components/CreditCard/utils.d.ts +11 -0
  30. package/lib/components/CreditCard/utils.d.ts.map +1 -1
  31. package/lib/components/CreditCard/utils.js +20 -2
  32. package/lib/components/CreditCard/utils.js.map +1 -1
  33. package/lib/components/Currency/CurrencyInput.d.ts.map +1 -1
  34. package/lib/components/Currency/CurrencyInput.js +13 -12
  35. package/lib/components/Currency/CurrencyInput.js.map +1 -1
  36. package/lib/components/DateTime/Input/DateTime.styles.js +1 -1
  37. package/lib/components/DateTime/Input/DateTime.styles.js.map +1 -1
  38. package/lib/components/DateTime/Input/Duration/NumberUnit.js +1 -1
  39. package/lib/components/DateTime/Input/Duration/NumberUnit.js.map +1 -1
  40. package/lib/components/DateTime/Picker/Calendar.d.ts.map +1 -1
  41. package/lib/components/DateTime/Picker/Calendar.js +6 -6
  42. package/lib/components/DateTime/Picker/Calendar.js.map +1 -1
  43. package/lib/components/DateTime/Picker/Calendar.styles.d.ts +3 -2
  44. package/lib/components/DateTime/Picker/Calendar.styles.d.ts.map +1 -1
  45. package/lib/components/DateTime/Picker/Calendar.styles.js +10 -8
  46. package/lib/components/DateTime/Picker/Calendar.styles.js.map +1 -1
  47. package/lib/components/DateTime/Picker/DatePicker.d.ts.map +1 -1
  48. package/lib/components/DateTime/Picker/DatePicker.js +3 -3
  49. package/lib/components/DateTime/Picker/DatePicker.js.map +1 -1
  50. package/lib/components/DateTime/Picker/DateRangePicker.d.ts.map +1 -1
  51. package/lib/components/DateTime/Picker/DateRangePicker.js +2 -2
  52. package/lib/components/DateTime/Picker/DateRangePicker.js.map +1 -1
  53. package/lib/components/DateTime/Picker/TimePicker.d.ts.map +1 -1
  54. package/lib/components/DateTime/Picker/TimePicker.js +27 -4
  55. package/lib/components/DateTime/Picker/TimePicker.js.map +1 -1
  56. package/lib/components/FieldValueList/FieldValueList.d.ts.map +1 -1
  57. package/lib/components/FieldValueList/FieldValueList.js +2 -1
  58. package/lib/components/FieldValueList/FieldValueList.js.map +1 -1
  59. package/lib/components/HTML/HTML.d.ts +1 -0
  60. package/lib/components/HTML/HTML.d.ts.map +1 -1
  61. package/lib/components/HTML/HTML.js +16 -4
  62. package/lib/components/HTML/HTML.js.map +1 -1
  63. package/lib/components/Link/Link.d.ts.map +1 -1
  64. package/lib/components/Link/Link.js +1 -2
  65. package/lib/components/Link/Link.js.map +1 -1
  66. package/lib/components/Menu/Menu.d.ts.map +1 -1
  67. package/lib/components/Menu/Menu.js +1 -2
  68. package/lib/components/Menu/Menu.js.map +1 -1
  69. package/lib/components/Modal/DockedModals.d.ts.map +1 -1
  70. package/lib/components/Modal/DockedModals.js +1 -2
  71. package/lib/components/Modal/DockedModals.js.map +1 -1
  72. package/lib/components/Modal/MinimizedModal.d.ts.map +1 -1
  73. package/lib/components/Modal/MinimizedModal.js +1 -0
  74. package/lib/components/Modal/MinimizedModal.js.map +1 -1
  75. package/lib/components/Modal/Modal.d.ts.map +1 -1
  76. package/lib/components/Modal/Modal.js +23 -11
  77. package/lib/components/Modal/Modal.js.map +1 -1
  78. package/lib/components/Modal/Modal.styles.d.ts.map +1 -1
  79. package/lib/components/Modal/Modal.styles.js +1 -0
  80. package/lib/components/Modal/Modal.styles.js.map +1 -1
  81. package/lib/components/Number/NumberInput.d.ts.map +1 -1
  82. package/lib/components/Number/NumberInput.js +40 -35
  83. package/lib/components/Number/NumberInput.js.map +1 -1
  84. package/lib/components/Number/NumberInput.types.d.ts +3 -1
  85. package/lib/components/Number/NumberInput.types.d.ts.map +1 -1
  86. package/lib/components/Number/NumberInput.types.js.map +1 -1
  87. package/lib/components/Number/utils.d.ts +1 -1
  88. package/lib/components/Number/utils.d.ts.map +1 -1
  89. package/lib/components/Number/utils.js +18 -32
  90. package/lib/components/Number/utils.js.map +1 -1
  91. package/lib/components/PageTemplates/DashboardPage.d.ts +2 -6
  92. package/lib/components/PageTemplates/DashboardPage.d.ts.map +1 -1
  93. package/lib/components/PageTemplates/PageTemplates.d.ts +11 -7
  94. package/lib/components/PageTemplates/PageTemplates.d.ts.map +1 -1
  95. package/lib/components/PageTemplates/PageTemplates.js +9 -17
  96. package/lib/components/PageTemplates/PageTemplates.js.map +1 -1
  97. package/lib/components/Phone/PhoneInput.d.ts +1 -1
  98. package/lib/components/Phone/PhoneInput.d.ts.map +1 -1
  99. package/lib/components/Phone/PhoneInput.js +19 -36
  100. package/lib/components/Phone/PhoneInput.js.map +1 -1
  101. package/lib/components/Phone/utils.d.ts +1 -2
  102. package/lib/components/Phone/utils.d.ts.map +1 -1
  103. package/lib/components/Phone/utils.js +3 -26
  104. package/lib/components/Phone/utils.js.map +1 -1
  105. package/lib/components/Tabs/TabPanel.d.ts.map +1 -1
  106. package/lib/components/Tabs/TabPanel.js +0 -1
  107. package/lib/components/Tabs/TabPanel.js.map +1 -1
  108. package/lib/components/Tabs/Tabs.d.ts.map +1 -1
  109. package/lib/components/Tabs/Tabs.js +1 -1
  110. package/lib/components/Tabs/Tabs.js.map +1 -1
  111. package/lib/components/VisuallyHiddenText/VisuallyHiddenText.d.ts.map +1 -1
  112. package/lib/components/VisuallyHiddenText/VisuallyHiddenText.js +2 -0
  113. package/lib/components/VisuallyHiddenText/VisuallyHiddenText.js.map +1 -1
  114. package/lib/hooks/index.d.ts +2 -0
  115. package/lib/hooks/index.d.ts.map +1 -1
  116. package/lib/hooks/index.js +2 -0
  117. package/lib/hooks/index.js.map +1 -1
  118. package/lib/hooks/useActiveDescendant.d.ts.map +1 -1
  119. package/lib/hooks/useActiveDescendant.js +6 -1
  120. package/lib/hooks/useActiveDescendant.js.map +1 -1
  121. package/lib/hooks/useAutoResize.d.ts +2 -2
  122. package/lib/hooks/useAutoResize.d.ts.map +1 -1
  123. package/lib/hooks/useAutoResize.js +7 -3
  124. package/lib/hooks/useAutoResize.js.map +1 -1
  125. package/lib/hooks/useI18n.d.ts +3 -1
  126. package/lib/hooks/useI18n.d.ts.map +1 -1
  127. package/lib/hooks/useInputFormatter.d.ts +12 -0
  128. package/lib/hooks/useInputFormatter.d.ts.map +1 -0
  129. package/lib/hooks/useInputFormatter.js +84 -0
  130. package/lib/hooks/useInputFormatter.js.map +1 -0
  131. package/lib/hooks/useOS.d.ts +7 -0
  132. package/lib/hooks/useOS.d.ts.map +1 -0
  133. package/lib/hooks/useOS.js +28 -0
  134. package/lib/hooks/useOS.js.map +1 -0
  135. package/lib/i18n/default.d.ts +3 -1
  136. package/lib/i18n/default.d.ts.map +1 -1
  137. package/lib/i18n/default.js +3 -1
  138. package/lib/i18n/default.js.map +1 -1
  139. package/lib/i18n/i18n.d.ts +6 -2
  140. package/lib/i18n/i18n.d.ts.map +1 -1
  141. package/lib/styles/GlobalStyle.d.ts +5 -1
  142. package/lib/styles/GlobalStyle.d.ts.map +1 -1
  143. package/lib/styles/GlobalStyle.js +84 -70
  144. package/lib/styles/GlobalStyle.js.map +1 -1
  145. package/lib/styles/gradients.d.ts +4 -1
  146. package/lib/styles/gradients.d.ts.map +1 -1
  147. package/lib/styles/gradients.js +46 -3
  148. package/lib/styles/gradients.js.map +1 -1
  149. package/lib/theme/theme.d.ts +18 -0
  150. package/lib/theme/theme.d.ts.map +1 -1
  151. package/lib/theme/themeDefinition.json +10 -0
  152. package/lib/theme/themes/darkTheme.json +6 -0
  153. package/package.json +12 -3
@@ -1 +1 @@
1
- {"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState,\n useRef,\n useMemo\n} from 'react';\n\nimport {\n useConsolidatedRef,\n useUID,\n useActiveDescendant,\n useLazyDescendant,\n useI18n,\n usePrevious,\n useDirection\n} from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { cap } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport FlyoutMenuList from './FlyoutMenuList';\nimport MenuContext from './Menu.context';\nimport { StyledMenu, StyledMenuListWrapper } from './Menu.styles';\nimport { MenuContextProps, MenuProps } from './Menu.types';\nimport MenuList from './MenuList';\n\nconst Menu: FunctionComponent<MenuProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MenuProps>, ref: MenuProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n items = [],\n mode = 'action',\n accent,\n scrollAt = 7,\n emptyText,\n onItemClick,\n onItemActive,\n onItemExpand,\n loadMore,\n onItemCollapse,\n loading = false,\n currentItemId,\n header,\n footer,\n variant = 'drill-down',\n focusControlEl,\n focusElOnClose = true,\n arrowNavigationUnsupported,\n 'aria-describedby': ariaDescribedBy,\n ...restProps\n } = props;\n\n const t = useI18n();\n\n const { end: endDirection, start: startDirection } = useDirection();\n const radioName = useUID();\n const menuRef = useConsolidatedRef(ref);\n const previousItemCount = useRef(0);\n const [activeDescendantUpdateId, setActiveDescendantUpdateId] = useState(0);\n const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n const [flyOutActiveIdStack, setFlyoutActiveIdStack] = useState([id]);\n const [focusReturnEl, setFocusReturnEl] = useState<HTMLElement | null>();\n const [preventInitialScroll, setPreventInitialScroll] = useState(false);\n const activeFlyoutSelector = useMemo(\n () =>\n `fieldset[data-flyout-menu-id=\"${flyOutActiveIdStack[flyOutActiveIdStack.length - 1]}\"]`,\n [flyOutActiveIdStack]\n );\n const focusControl = useMemo(() => {\n return focusControlEl || menuRef.current;\n }, [focusControlEl, menuRef.current]);\n\n const pushFlyoutId = useCallback(\n (flyoutId: string) => {\n setFlyoutActiveIdStack([...flyOutActiveIdStack, flyoutId]);\n },\n [flyOutActiveIdStack]\n );\n\n const getScopedItemId = useCallback(\n (itemId: string) => {\n return `${id}-item-${itemId}`;\n },\n [id]\n );\n\n const getUnscopedItemId = useCallback(\n (itemId: string) => {\n return itemId.split(`${id}-item-`)[1];\n },\n [id]\n );\n\n const updateActiveDescendants: MenuContextProps['updateActiveDescendants'] = useCallback(\n ({ preventScroll = false } = {}) => {\n setPreventInitialScroll(preventScroll);\n setActiveDescendantUpdateId(Math.random());\n },\n []\n );\n\n const uadConfig = useMemo(\n () => ({\n focusEl: focusControl,\n scope: menuRef.current,\n scopeSelector:\n variant === 'drill-down'\n ? ('fieldset[aria-hidden=\"false\"]' as keyof HTMLElementTagNameMap)\n : activeFlyoutSelector,\n selector: '[role=\"menuitem\"], legend button' as keyof HTMLElementTagNameMap,\n focusDescendantEl: focusDescendant,\n clearFocusDescendant: () => {\n setFocusDescendant(null);\n if (focusElOnClose) focusControl?.focus();\n },\n focusReturnEl,\n clearFocusReturn: () => {\n setFocusReturnEl(null);\n },\n currentDescendantId: currentItemId ? getScopedItemId(currentItemId) : undefined,\n preventInitialScroll,\n clearPreventScroll: () => {\n setPreventInitialScroll(false);\n }\n }),\n [\n focusControl,\n menuRef.current,\n activeFlyoutSelector,\n focusReturnEl,\n focusDescendant,\n currentItemId,\n preventInitialScroll\n ]\n );\n\n const { activeDescendant, descendants } = useActiveDescendant(uadConfig, [\n activeDescendantUpdateId\n ]);\n\n const previousActiveDescendant = usePrevious(activeDescendant);\n\n useLazyDescendant({\n loading,\n descendants,\n previousActiveDescendant,\n activeDescendant,\n focusReturnEl,\n setFocusReturnEl,\n scrollEl: uadConfig.scope?.querySelector(uadConfig.scopeSelector)?.querySelector('ul')\n });\n\n // ## Bind Menu-specific navigation keyDown.\n useEffect(() => {\n const expandOrCollapse: (action?: 'collapse' | 'expand' | null) => void = (action = null) => {\n if (activeDescendant) {\n // expand\n if (activeDescendant.dataset.expand === 'true' && action !== 'collapse') {\n (activeDescendant!.querySelector('button') as HTMLElement)?.click();\n\n return;\n }\n\n // collapse\n if (activeDescendant.dataset.collapse === 'true' && action !== 'expand') {\n activeDescendant.click();\n }\n }\n };\n\n const additionalKeydown = (e: KeyboardEvent) => {\n switch (e.key) {\n case `Arrow${cap(endDirection)}`: {\n if (arrowNavigationUnsupported) break;\n expandOrCollapse('expand');\n break;\n }\n case `Arrow${cap(startDirection)}`: {\n if (arrowNavigationUnsupported) break;\n expandOrCollapse('collapse');\n break;\n }\n case 'Escape': {\n if (variant === 'flyout' && flyOutActiveIdStack.length > 1) {\n e.preventDefault();\n e.stopPropagation();\n\n const newStack = [...flyOutActiveIdStack];\n newStack.pop();\n setFlyoutActiveIdStack(newStack);\n }\n break;\n }\n default:\n break;\n }\n\n if (arrowNavigationUnsupported && (e.key === ' ' || e.key === 'Spacebar') && e.shiftKey) {\n e.preventDefault();\n expandOrCollapse();\n }\n };\n\n if (activeDescendant) onItemActive?.(getUnscopedItemId(activeDescendant.id));\n\n focusControl?.addEventListener('keydown', additionalKeydown);\n\n return () => focusControl?.removeEventListener('keydown', additionalKeydown);\n }, [focusControl, activeDescendant]);\n\n // ## Update useActiveDescendant on change of items, not selection of items.\n useEffect(() => {\n // Next tick for DOM updates.\n setTimeout(() => {\n if (items.length === previousItemCount.current) {\n const previousDescendantIds = descendants?.map(node => node.id);\n const newDescendants = uadConfig.scope\n ?.querySelector(uadConfig.scopeSelector)\n ?.querySelectorAll(uadConfig.selector);\n\n if (!newDescendants) {\n updateActiveDescendants();\n return;\n }\n\n const scopedDescendants = Array.from(newDescendants);\n\n if (scopedDescendants?.length !== previousDescendantIds?.length) {\n updateActiveDescendants();\n return;\n }\n\n const itemsUnchanged = scopedDescendants.every(\n (node, index) => node.id === previousDescendantIds[index]\n );\n\n if (!itemsUnchanged) {\n updateActiveDescendants();\n }\n\n return;\n }\n\n previousItemCount.current = items.length;\n updateActiveDescendants();\n }, 0);\n }, [items]);\n\n const contextValue = useMemo(() => {\n return {\n componentId: id,\n mode,\n arrowNavigationUnsupported,\n onItemClick,\n onItemActive,\n onItemExpand,\n onItemCollapse,\n accent,\n scrollAt,\n emptyText,\n radioName,\n loadMore,\n loading,\n variant,\n focusControl,\n updateActiveDescendants,\n setFocusReturnEl,\n setFocusDescendant,\n getScopedItemId,\n pushFlyoutId,\n flyOutActiveIdStack\n };\n }, [\n id,\n mode,\n arrowNavigationUnsupported,\n onItemClick,\n onItemActive,\n onItemExpand,\n onItemCollapse,\n accent,\n scrollAt,\n emptyText,\n radioName,\n loadMore,\n loading,\n variant,\n focusControl,\n updateActiveDescendants,\n setFocusReturnEl,\n setFocusDescendant,\n getScopedItemId,\n pushFlyoutId,\n flyOutActiveIdStack\n ]);\n\n return (\n <StyledMenu\n id={id}\n role='menu'\n aria-describedby={!focusControlEl ? `${id}-menuDescription` : undefined}\n {...restProps}\n ref={menuRef}\n >\n {!focusControlEl && (\n <VisuallyHiddenText id={`${id}-menuDescription`}>\n {(`${t('menu_selection_instructions')} ` && ariaDescribedBy) || ''}\n </VisuallyHiddenText>\n )}\n\n {header && <header>{header}</header>}\n\n <StyledMenuListWrapper>\n <MenuContext.Provider value={contextValue}>\n {variant === 'drill-down' ? (\n <MenuList items={items} />\n ) : (\n <FlyoutMenuList items={items} />\n )}\n </MenuContext.Provider>\n </StyledMenuListWrapper>\n {footer && <footer>{footer}</footer>}\n </StyledMenu>\n );\n }\n);\n\nexport default Menu;\n"]}
1
+ {"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState,\n useRef,\n useMemo\n} from 'react';\n\nimport {\n useConsolidatedRef,\n useUID,\n useActiveDescendant,\n useLazyDescendant,\n useI18n,\n usePrevious,\n useDirection\n} from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { cap } from '../../utils';\n\nimport FlyoutMenuList from './FlyoutMenuList';\nimport MenuContext from './Menu.context';\nimport { StyledMenu, StyledMenuListWrapper } from './Menu.styles';\nimport { MenuContextProps, MenuProps } from './Menu.types';\nimport MenuList from './MenuList';\n\nconst Menu: FunctionComponent<MenuProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MenuProps>, ref: MenuProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n items = [],\n mode = 'action',\n accent,\n scrollAt = 7,\n emptyText,\n onItemClick,\n onItemActive,\n onItemExpand,\n loadMore,\n onItemCollapse,\n loading = false,\n currentItemId,\n header,\n footer,\n variant = 'drill-down',\n focusControlEl,\n focusElOnClose = true,\n arrowNavigationUnsupported,\n 'aria-describedby': ariaDescribedBy,\n ...restProps\n } = props;\n\n const t = useI18n();\n\n const { end: endDirection, start: startDirection } = useDirection();\n const radioName = useUID();\n const menuRef = useConsolidatedRef(ref);\n const previousItemCount = useRef(0);\n const [activeDescendantUpdateId, setActiveDescendantUpdateId] = useState(0);\n const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n const [flyOutActiveIdStack, setFlyoutActiveIdStack] = useState([id]);\n const [focusReturnEl, setFocusReturnEl] = useState<HTMLElement | null>();\n const [preventInitialScroll, setPreventInitialScroll] = useState(false);\n const activeFlyoutSelector = useMemo(\n () =>\n `fieldset[data-flyout-menu-id=\"${flyOutActiveIdStack[flyOutActiveIdStack.length - 1]}\"]`,\n [flyOutActiveIdStack]\n );\n const focusControl = useMemo(() => {\n return focusControlEl || menuRef.current;\n }, [focusControlEl, menuRef.current]);\n\n const pushFlyoutId = useCallback(\n (flyoutId: string) => {\n setFlyoutActiveIdStack([...flyOutActiveIdStack, flyoutId]);\n },\n [flyOutActiveIdStack]\n );\n\n const getScopedItemId = useCallback(\n (itemId: string) => {\n return `${id}-item-${itemId}`;\n },\n [id]\n );\n\n const getUnscopedItemId = useCallback(\n (itemId: string) => {\n return itemId.split(`${id}-item-`)[1];\n },\n [id]\n );\n\n const updateActiveDescendants: MenuContextProps['updateActiveDescendants'] = useCallback(\n ({ preventScroll = false } = {}) => {\n setPreventInitialScroll(preventScroll);\n setActiveDescendantUpdateId(Math.random());\n },\n []\n );\n\n const uadConfig = useMemo(\n () => ({\n focusEl: focusControl,\n scope: menuRef.current,\n scopeSelector:\n variant === 'drill-down'\n ? ('fieldset[aria-hidden=\"false\"]' as keyof HTMLElementTagNameMap)\n : activeFlyoutSelector,\n selector: '[role=\"menuitem\"], legend button' as keyof HTMLElementTagNameMap,\n focusDescendantEl: focusDescendant,\n clearFocusDescendant: () => {\n setFocusDescendant(null);\n if (focusElOnClose) focusControl?.focus();\n },\n focusReturnEl,\n clearFocusReturn: () => {\n setFocusReturnEl(null);\n },\n currentDescendantId: currentItemId ? getScopedItemId(currentItemId) : undefined,\n preventInitialScroll,\n clearPreventScroll: () => {\n setPreventInitialScroll(false);\n }\n }),\n [\n focusControl,\n menuRef.current,\n activeFlyoutSelector,\n focusReturnEl,\n focusDescendant,\n currentItemId,\n preventInitialScroll\n ]\n );\n\n const { activeDescendant, descendants } = useActiveDescendant(uadConfig, [\n activeDescendantUpdateId\n ]);\n\n const previousActiveDescendant = usePrevious(activeDescendant);\n\n useLazyDescendant({\n loading,\n descendants,\n previousActiveDescendant,\n activeDescendant,\n focusReturnEl,\n setFocusReturnEl,\n scrollEl: uadConfig.scope?.querySelector(uadConfig.scopeSelector)?.querySelector('ul')\n });\n\n // ## Bind Menu-specific navigation keyDown.\n useEffect(() => {\n const expandOrCollapse: (action?: 'collapse' | 'expand' | null) => void = (action = null) => {\n if (activeDescendant) {\n // expand\n if (activeDescendant.dataset.expand === 'true' && action !== 'collapse') {\n (activeDescendant!.querySelector('button') as HTMLElement)?.click();\n\n return;\n }\n\n // collapse\n if (activeDescendant.dataset.collapse === 'true' && action !== 'expand') {\n activeDescendant.click();\n }\n }\n };\n\n const additionalKeydown = (e: KeyboardEvent) => {\n switch (e.key) {\n case `Arrow${cap(endDirection)}`: {\n if (arrowNavigationUnsupported) break;\n expandOrCollapse('expand');\n break;\n }\n case `Arrow${cap(startDirection)}`: {\n if (arrowNavigationUnsupported) break;\n expandOrCollapse('collapse');\n break;\n }\n case 'Escape': {\n if (variant === 'flyout' && flyOutActiveIdStack.length > 1) {\n e.preventDefault();\n e.stopPropagation();\n\n const newStack = [...flyOutActiveIdStack];\n newStack.pop();\n setFlyoutActiveIdStack(newStack);\n }\n break;\n }\n default:\n break;\n }\n\n if (arrowNavigationUnsupported && (e.key === ' ' || e.key === 'Spacebar') && e.shiftKey) {\n e.preventDefault();\n expandOrCollapse();\n }\n };\n\n if (activeDescendant) onItemActive?.(getUnscopedItemId(activeDescendant.id));\n\n focusControl?.addEventListener('keydown', additionalKeydown);\n\n return () => focusControl?.removeEventListener('keydown', additionalKeydown);\n }, [focusControl, activeDescendant]);\n\n // ## Update useActiveDescendant on change of items, not selection of items.\n useEffect(() => {\n // Next tick for DOM updates.\n setTimeout(() => {\n if (items.length === previousItemCount.current) {\n const previousDescendantIds = descendants?.map(node => node.id);\n const newDescendants = uadConfig.scope\n ?.querySelector(uadConfig.scopeSelector)\n ?.querySelectorAll(uadConfig.selector);\n\n if (!newDescendants) {\n updateActiveDescendants();\n return;\n }\n\n const scopedDescendants = Array.from(newDescendants);\n\n if (scopedDescendants?.length !== previousDescendantIds?.length) {\n updateActiveDescendants();\n return;\n }\n\n const itemsUnchanged = scopedDescendants.every(\n (node, index) => node.id === previousDescendantIds[index]\n );\n\n if (!itemsUnchanged) {\n updateActiveDescendants();\n }\n\n return;\n }\n\n previousItemCount.current = items.length;\n updateActiveDescendants();\n }, 0);\n }, [items]);\n\n const contextValue = useMemo(() => {\n return {\n componentId: id,\n mode,\n arrowNavigationUnsupported,\n onItemClick,\n onItemActive,\n onItemExpand,\n onItemCollapse,\n accent,\n scrollAt,\n emptyText,\n radioName,\n loadMore,\n loading,\n variant,\n focusControl,\n updateActiveDescendants,\n setFocusReturnEl,\n setFocusDescendant,\n getScopedItemId,\n pushFlyoutId,\n flyOutActiveIdStack\n };\n }, [\n id,\n mode,\n arrowNavigationUnsupported,\n onItemClick,\n onItemActive,\n onItemExpand,\n onItemCollapse,\n accent,\n scrollAt,\n emptyText,\n radioName,\n loadMore,\n loading,\n variant,\n focusControl,\n updateActiveDescendants,\n setFocusReturnEl,\n setFocusDescendant,\n getScopedItemId,\n pushFlyoutId,\n flyOutActiveIdStack\n ]);\n\n return (\n <StyledMenu\n id={id}\n role='menu'\n aria-describedby={!focusControlEl ? `${id}-menuDescription` : undefined}\n {...restProps}\n ref={menuRef}\n >\n {!focusControlEl && (\n <span id={`${id}-menuDescription`} hidden>\n {(`${t('menu_selection_instructions')} ` && ariaDescribedBy) || ''}\n </span>\n )}\n\n {header && <header>{header}</header>}\n\n <StyledMenuListWrapper>\n <MenuContext.Provider value={contextValue}>\n {variant === 'drill-down' ? (\n <MenuList items={items} />\n ) : (\n <FlyoutMenuList items={items} />\n )}\n </MenuContext.Provider>\n </StyledMenuListWrapper>\n {footer && <footer>{footer}</footer>}\n </StyledMenu>\n );\n }\n);\n\nexport default Menu;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"DockedModals.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAO,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAkB3C,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,GAAG,GAAG,YAAY,CAWvD,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"DockedModals.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAO,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAiB3C,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,GAAG,GAAG,YAAY,CAWvD,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -9,8 +9,7 @@ const StyledDockedModals = styled.div(({ theme }) => {
9
9
  z-index: ${theme.base['z-index'].modal};
10
10
  bottom: 0;
11
11
  right: 0;
12
-
13
- /* Allows docked modals to have consistent width, but they should probably be refactored. */
12
+ pointer-events: none;
14
13
  width: 100%;
15
14
  `;
16
15
  });
@@ -1 +1 @@
1
- {"version":3,"file":"DockedModals.js","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,OAAO,CAAC;AAC3D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK;;;;;;GAMvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAA0C,UAAU,CACpE,CAAC,KAAK,EAAE,GAAwB,EAAE,EAAE;IAClC,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EACrE,EAAE,EAAE,kBAAkB,KAClB,KAAK,EACT,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\n\nconst StyledDockedModals = styled.div(({ theme }) => {\n return css`\n position: fixed;\n z-index: ${theme.base['z-index'].modal};\n bottom: 0;\n right: 0;\n\n /* Allows docked modals to have consistent width, but they should probably be refactored. */\n width: 100%;\n `;\n});\n\nStyledDockedModals.defaultProps = defaultThemeProp;\n\nconst DockedModals: FunctionComponent<any & ForwardProps> = forwardRef(\n (props, ref: Ref<HTMLDivElement>) => {\n return (\n <Flex\n container={{ justify: 'end', alignItems: 'end', gap: 2, pad: [0, 2] }}\n as={StyledDockedModals}\n {...props}\n ref={ref}\n />\n );\n }\n);\n\nexport default DockedModals;\n"]}
1
+ {"version":3,"file":"DockedModals.js","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,OAAO,CAAC;AAC3D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK;;;;;GAKvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAA0C,UAAU,CACpE,CAAC,KAAK,EAAE,GAAwB,EAAE,EAAE;IAClC,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EACrE,EAAE,EAAE,kBAAkB,KAClB,KAAK,EACT,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\n\nconst StyledDockedModals = styled.div(({ theme }) => {\n return css`\n position: fixed;\n z-index: ${theme.base['z-index'].modal};\n bottom: 0;\n right: 0;\n pointer-events: none;\n width: 100%;\n `;\n});\n\nStyledDockedModals.defaultProps = defaultThemeProp;\n\nconst DockedModals: FunctionComponent<any & ForwardProps> = forwardRef(\n (props, ref: Ref<HTMLDivElement>) => {\n return (\n <Flex\n container={{ justify: 'end', alignItems: 'end', gap: 2, pad: [0, 2] }}\n as={StyledDockedModals}\n {...props}\n ref={ref}\n />\n );\n }\n);\n\nexport default DockedModals;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"MinimizedModal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAUrE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAqC3C,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAwFhE,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"MinimizedModal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAUrE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAsC3C,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAwFhE,CAAC;AAEF,eAAe,cAAc,CAAC"}
@@ -22,6 +22,7 @@ const StyledMinimizedModal = styled(BareRoleButton)(({ theme: { base } }) => {
22
22
  box-shadow: ${base.shadow.low};
23
23
  cursor: pointer;
24
24
  user-select: none;
25
+ pointer-events: auto;
25
26
  transition: box-shadow ${base.animation.speed} ${base.animation.timing.ease};
26
27
 
27
28
  &:hover {
@@ -1 +1 @@
1
- {"version":3,"file":"MinimizedModal.js","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useContext, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport BareRoleButton from '../Button/BareRoleButton';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as undockIcon from '../Icon/icons/undock.icon';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport { useI18n } from '../../hooks';\n\nimport { ModalProps } from './Modal.types';\nimport { ModalManagerContext } from './Contexts';\n\nregisterIcon(timesIcon, minusIcon, undockIcon);\n\nconst StyledMinimizedModal = styled(BareRoleButton)(({ theme: { base } }) => {\n return css`\n height: 3rem;\n width: 30ch;\n border-radius: calc(0.5 * ${base['border-radius']}) calc(0.5 * ${base['border-radius']}) 0 0;\n color: ${base.palette['foreground-color']};\n background-color: ${base.palette['primary-background']};\n box-shadow: ${base.shadow.low};\n cursor: pointer;\n user-select: none;\n transition: box-shadow ${base.animation.speed} ${base.animation.timing.ease};\n\n &:hover {\n box-shadow: ${base.shadow.high};\n }\n\n &:focus {\n outline: none;\n box-shadow: ${base.shadow.focus};\n }\n\n > div:first-child {\n margin-inline-end: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n `;\n});\n\nStyledMinimizedModal.defaultProps = defaultThemeProp;\n\nconst MinimizedModal: FunctionComponent<ModalProps & ForwardProps> = ({\n heading,\n onBeforeClose,\n onAfterClose,\n onRequestDismiss,\n onRequestActivate,\n onRequestMinimize,\n onRequestMaximize,\n onRequestDock,\n ...restProps\n}) => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismissible, dockable, maximizable, dock, maximize, activate, unmount } =\n useContext(ModalContext);\n\n const t = useI18n();\n\n return (\n <Flex\n {...restProps}\n container={{ alignItems: 'center', justify: 'between', pad: [0, 2], gap: 2 }}\n item={{ shrink: 0 }}\n as={StyledMinimizedModal}\n aria-label={`${t('activate')} ${heading}`}\n onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n // Prevent issues when auto focusing on close button.\n if ((e.key === 'Space' || e.key === 'Enter') && e.target === e.currentTarget)\n e.preventDefault();\n }}\n onClick={() => {\n if (onRequestActivate?.() !== false && !dockable) activate();\n if (onRequestDock?.() !== false && dockable) dock();\n }}\n >\n <div>{heading}</div>\n\n {(maximizable || dockable || dismissible) && (\n <Flex container>\n {maximizable && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_maximize')}\n onClick={() => {\n if (onRequestMaximize?.() !== false) {\n maximize();\n }\n }}\n >\n <Icon name='undock' />\n </Button>\n )}\n\n {dockable && (\n <Button\n aria-label={t('modal_dock')}\n variant='simple'\n onClick={() => {\n if (onRequestDock?.() !== false) {\n dock();\n }\n }}\n icon\n >\n <Icon name='minus' />\n </Button>\n )}\n\n {dismissible && (\n <Button\n aria-label={`${t('close')} ${heading}`}\n variant='simple'\n onClick={() => {\n if (onRequestDismiss?.() !== false) {\n onBeforeClose?.();\n unmount();\n onAfterClose?.();\n }\n }}\n icon\n >\n <Icon name='times' />\n </Button>\n )}\n </Flex>\n )}\n </Flex>\n );\n};\n\nexport default MinimizedModal;\n"]}
1
+ {"version":3,"file":"MinimizedModal.js","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useContext, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport BareRoleButton from '../Button/BareRoleButton';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as undockIcon from '../Icon/icons/undock.icon';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport { useI18n } from '../../hooks';\n\nimport { ModalProps } from './Modal.types';\nimport { ModalManagerContext } from './Contexts';\n\nregisterIcon(timesIcon, minusIcon, undockIcon);\n\nconst StyledMinimizedModal = styled(BareRoleButton)(({ theme: { base } }) => {\n return css`\n height: 3rem;\n width: 30ch;\n border-radius: calc(0.5 * ${base['border-radius']}) calc(0.5 * ${base['border-radius']}) 0 0;\n color: ${base.palette['foreground-color']};\n background-color: ${base.palette['primary-background']};\n box-shadow: ${base.shadow.low};\n cursor: pointer;\n user-select: none;\n pointer-events: auto;\n transition: box-shadow ${base.animation.speed} ${base.animation.timing.ease};\n\n &:hover {\n box-shadow: ${base.shadow.high};\n }\n\n &:focus {\n outline: none;\n box-shadow: ${base.shadow.focus};\n }\n\n > div:first-child {\n margin-inline-end: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n `;\n});\n\nStyledMinimizedModal.defaultProps = defaultThemeProp;\n\nconst MinimizedModal: FunctionComponent<ModalProps & ForwardProps> = ({\n heading,\n onBeforeClose,\n onAfterClose,\n onRequestDismiss,\n onRequestActivate,\n onRequestMinimize,\n onRequestMaximize,\n onRequestDock,\n ...restProps\n}) => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismissible, dockable, maximizable, dock, maximize, activate, unmount } =\n useContext(ModalContext);\n\n const t = useI18n();\n\n return (\n <Flex\n {...restProps}\n container={{ alignItems: 'center', justify: 'between', pad: [0, 2], gap: 2 }}\n item={{ shrink: 0 }}\n as={StyledMinimizedModal}\n aria-label={`${t('activate')} ${heading}`}\n onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n // Prevent issues when auto focusing on close button.\n if ((e.key === 'Space' || e.key === 'Enter') && e.target === e.currentTarget)\n e.preventDefault();\n }}\n onClick={() => {\n if (onRequestActivate?.() !== false && !dockable) activate();\n if (onRequestDock?.() !== false && dockable) dock();\n }}\n >\n <div>{heading}</div>\n\n {(maximizable || dockable || dismissible) && (\n <Flex container>\n {maximizable && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_maximize')}\n onClick={() => {\n if (onRequestMaximize?.() !== false) {\n maximize();\n }\n }}\n >\n <Icon name='undock' />\n </Button>\n )}\n\n {dockable && (\n <Button\n aria-label={t('modal_dock')}\n variant='simple'\n onClick={() => {\n if (onRequestDock?.() !== false) {\n dock();\n }\n }}\n icon\n >\n <Icon name='minus' />\n </Button>\n )}\n\n {dismissible && (\n <Button\n aria-label={`${t('close')} ${heading}`}\n variant='simple'\n onClick={() => {\n if (onRequestDismiss?.() !== false) {\n onBeforeClose?.();\n unmount();\n onAfterClose?.();\n }\n }}\n icon\n >\n <Icon name='times' />\n </Button>\n )}\n </Flex>\n )}\n </Flex>\n );\n};\n\nexport default MinimizedModal;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAmB3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAWhD,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CA2QvD,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAoB3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAWhD,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAyRvD,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -5,7 +5,7 @@ import { getFocusables } from '../../utils';
5
5
  import Backdrop from '../Backdrop';
6
6
  import Flex from '../Flex';
7
7
  import Button from '../Button';
8
- import { useAfterInitialEffect, useConsolidatedRef, useI18n, useOuterEvent, useUID, useFocusTrap } from '../../hooks';
8
+ import { useAfterInitialEffect, useConsolidatedRef, useI18n, useOuterEvent, useUID, useFocusTrap, usePrevious } from '../../hooks';
9
9
  import Icon, { registerIcon } from '../Icon';
10
10
  import * as timesIcon from '../Icon/icons/times.icon';
11
11
  import * as minusIcon from '../Icon/icons/minus.icon';
@@ -17,14 +17,15 @@ import { ModalManagerContext } from './Contexts';
17
17
  import MinimizedModal from './MinimizedModal';
18
18
  import { StyledModal, StyledModalHeader, StyledModalContent, StyledModalActions, StyledModalChildrenWrap } from './Modal.styles';
19
19
  registerIcon(timesIcon, minusIcon, dockIcon, undockIcon);
20
- const Modal = forwardRef((props, refArg) => {
20
+ const Modal = forwardRef((props, ref) => {
21
21
  const { as, progress = false, heading, count, children, actions, stretch = false, center = false, defaultFocus, onBeforeOpen, onAfterOpen, onBeforeClose, onAfterClose, onRequestDismiss, onRequestMinimize, onRequestMaximize, onRequestDock, onRequestActivate, ...restProps } = props;
22
22
  const { ModalContext } = useContext(ModalManagerContext);
23
23
  const { alert, dismissible, minimizable, maximizable, dockable, state, dismiss, minimize, maximize, dock, unmount, top } = useContext(ModalContext);
24
- const modalRef = useConsolidatedRef(refArg);
24
+ const modalRef = useConsolidatedRef(ref);
25
25
  const modalContentRef = useRef(null);
26
26
  const backdropRef = useRef(null);
27
27
  const closeButtonRef = useRef(null);
28
+ const previousState = usePrevious(state);
28
29
  const id = useUID();
29
30
  const t = useI18n();
30
31
  const tryDismiss = () => {
@@ -64,7 +65,25 @@ const Modal = forwardRef((props, refArg) => {
64
65
  return;
65
66
  if (state === 'open' || state === 'maximized' || state === 'docked')
66
67
  setFocus();
68
+ // This won't actually run until potential changes to docked modal handling.
69
+ if (state === 'closed' && previousState === 'docked') {
70
+ onBeforeClose?.();
71
+ unmount();
72
+ onAfterClose?.();
73
+ }
67
74
  }, [state]);
75
+ useEffect(() => {
76
+ /*
77
+ * If a modal is already in a closed state on initial mount, unmount it.
78
+ * This only happens when a docked modal closes since the ModalManager
79
+ * remounts it outside of the DockedModals container if state !== 'docked'.
80
+ */
81
+ if (state === 'closed') {
82
+ onBeforeClose?.();
83
+ unmount();
84
+ onAfterClose?.();
85
+ }
86
+ }, []);
68
87
  // Dismiss on Escape needs to be handled using React event handling to be cancelable using SyntheticEvent.stopPropagation.
69
88
  const onModalKeyDown = useCallback((e) => {
70
89
  if (dismissible &&
@@ -100,14 +119,7 @@ const Modal = forwardRef((props, refArg) => {
100
119
  if (onRequestMinimize?.() !== false) {
101
120
  minimize();
102
121
  }
103
- }, children: _jsx(Icon, { name: 'minus' }) })), dismissible && !alert && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_close'), onKeyDown: onHeaderActionKeyDown, onClick: () => {
104
- tryDismiss();
105
- if (dockable) {
106
- onBeforeClose?.();
107
- unmount();
108
- onAfterClose?.();
109
- }
110
- }, ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }) }))] })] }), _jsxs(Flex, { item: { grow: 1 }, as: StyledModalContent, ref: modalContentRef, children: [children && _jsx(StyledModalChildrenWrap, { children: children }), _jsx(Progress, { visible: !!progress, placement: 'local', message: typeof progress === 'object' ? progress.message : t('loading') })] }), actions && (_jsx(Flex, { container: { justify: 'between' }, item: { shrink: 0 }, as: StyledModalActions, children: actions }))] }));
122
+ }, children: _jsx(Icon, { name: 'minus' }) })), dismissible && !alert && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_close'), onKeyDown: onHeaderActionKeyDown, onClick: tryDismiss, ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }) }))] })] }), _jsxs(Flex, { item: { grow: 1 }, as: StyledModalContent, ref: modalContentRef, children: [children && _jsx(StyledModalChildrenWrap, { children: children }), _jsx(Progress, { visible: !!progress, placement: 'local', message: typeof progress === 'object' ? progress.message : t('loading') })] }), actions && (_jsx(Flex, { container: { justify: 'between' }, item: { shrink: 0 }, as: StyledModalActions, children: actions }))] }));
111
123
  const renderModal = state === 'docked' ? (modal) : (_jsx(Backdrop, { ref: backdropRef, container: {
112
124
  alignItems: center || maximized ? 'center' : 'start'
113
125
  }, transitionSpeed: 'slow', open: state === 'open' || state === 'maximized', onBeforeTransitionIn: onBeforeOpen, onAfterTransitionIn: onAfterOpen, onBeforeTransitionOut: onBeforeClose, onAfterTransitionOut: () => {
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useContext,\n useEffect,\n MouseEvent,\n useRef,\n useCallback,\n KeyboardEvent as ReactKeyboardEvent\n} from 'react';\n\nimport Progress from '../Progress';\nimport { getFocusables } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport { ForwardProps } from '../../types';\nimport {\n useAfterInitialEffect,\n useConsolidatedRef,\n useI18n,\n useOuterEvent,\n useUID,\n useFocusTrap\n} from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as dockIcon from '../Icon/icons/dock.icon';\nimport * as undockIcon from '../Icon/icons/undock.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\n\nimport { ModalManagerContext } from './Contexts';\nimport MinimizedModal from './MinimizedModal';\nimport type { ModalProps } from './Modal.types';\nimport {\n StyledModal,\n StyledModalHeader,\n StyledModalContent,\n StyledModalActions,\n StyledModalChildrenWrap\n} from './Modal.styles';\n\nregisterIcon(timesIcon, minusIcon, dockIcon, undockIcon);\n\nconst Modal: FunctionComponent<ModalProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ModalProps>, refArg: Ref<HTMLElement>) => {\n const {\n as,\n progress = false,\n heading,\n count,\n children,\n actions,\n stretch = false,\n center = false,\n defaultFocus,\n onBeforeOpen,\n onAfterOpen,\n onBeforeClose,\n onAfterClose,\n onRequestDismiss,\n onRequestMinimize,\n onRequestMaximize,\n onRequestDock,\n onRequestActivate,\n ...restProps\n } = props;\n\n const { ModalContext } = useContext(ModalManagerContext);\n const {\n alert,\n dismissible,\n minimizable,\n maximizable,\n dockable,\n state,\n dismiss,\n minimize,\n maximize,\n dock,\n unmount,\n top\n } = useContext(ModalContext);\n\n const modalRef = useConsolidatedRef(refArg);\n const modalContentRef = useRef<HTMLDivElement>(null);\n const backdropRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n const id = useUID();\n const t = useI18n();\n\n const tryDismiss = () => {\n if (onRequestDismiss?.() !== false) {\n dismiss();\n }\n };\n\n const setFocus = () => {\n const focusables = getFocusables(modalRef);\n\n if (defaultFocus?.current) {\n defaultFocus.current.focus();\n } else {\n const focusable =\n focusables.find(el => {\n return modalContentRef.current?.contains(el);\n }) ??\n closeButtonRef.current ??\n focusables[0];\n\n focusable?.focus();\n }\n };\n\n useFocusTrap(modalRef);\n\n useOuterEvent('mousedown', [modalRef], e => {\n if (['minimized', 'docked', 'closed'].includes(state)) return;\n\n if (dismissible) {\n if (e.target === backdropRef.current) {\n tryDismiss();\n }\n } else {\n modalRef.current?.focus();\n }\n });\n\n useEffect(() => {\n if (state === 'minimized') return;\n if (state === 'open' || state === 'maximized' || state === 'docked') setFocus();\n }, [state]);\n\n // Dismiss on Escape needs to be handled using React event handling to be cancelable using SyntheticEvent.stopPropagation.\n const onModalKeyDown = useCallback(\n (e: ReactKeyboardEvent) => {\n if (\n dismissible &&\n (state === 'open' || state === 'maximized') &&\n e.key === 'Escape' &&\n top\n ) {\n tryDismiss();\n }\n },\n [dismissible, state, top, tryDismiss]\n );\n\n const onHeaderActionKeyDown = useCallback((e: ReactKeyboardEvent<HTMLButtonElement>) => {\n if (e.repeat && (e.key === 'Enter' || e.key === ' ')) e.preventDefault();\n }, []);\n\n // Set a ref based on the initial progress state to be used later to check for setting focus.\n const focusOnProgressChange = useRef(!!progress);\n useAfterInitialEffect(() => {\n // If the progress prop changed and we have already set focus we are done.\n if (!progress && focusOnProgressChange.current) {\n setFocus();\n focusOnProgressChange.current = false;\n }\n }, [progress]);\n\n const maximized = stretch || state === 'maximized';\n\n const modal = (\n <Flex\n {...restProps}\n container={{ direction: 'column' }}\n ref={modalRef}\n as={StyledModal}\n forwardedAs={as}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n onKeyDown={onModalKeyDown}\n alert={alert}\n role={alert ? 'alertdialog' : 'dialog'}\n stretch={maximized}\n center={center}\n aria-labelledby={`${id}-heading`}\n aria-modal={state === 'docked' ? 'false' : 'true'}\n state={state}\n // FOR PR REVIEW: This may be too much, this may be fine...\n aria-live='polite'\n aria-busy={progress ? 'true' : 'false'}\n >\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n item={{ shrink: 0 }}\n as={StyledModalHeader}\n hasAction={minimizable || dismissible}\n >\n <Flex\n container={{ alignItems: 'center', gap: 1 }}\n as={Text}\n variant='h2'\n id={`${id}-heading`}\n >\n <span>{heading}</span>\n {typeof count === 'number' && <Count>{count}</Count>}\n </Flex>\n\n <Flex container>\n {maximizable && !alert && state !== 'maximized' && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_maximize')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={() => {\n if (onRequestMaximize?.() !== false) {\n maximize();\n }\n }}\n >\n <Icon name='undock' />\n </Button>\n )}\n {dockable && !alert && state !== 'docked' && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_dock')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={() => {\n if (onRequestDock?.() !== false) {\n dock();\n }\n }}\n >\n <Icon name='dock' />\n </Button>\n )}\n {minimizable && !alert && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_minimize')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={() => {\n if (onRequestMinimize?.() !== false) {\n minimize();\n }\n }}\n >\n <Icon name='minus' />\n </Button>\n )}\n {dismissible && !alert && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_close')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={() => {\n tryDismiss();\n if (dockable) {\n onBeforeClose?.();\n unmount();\n onAfterClose?.();\n }\n }}\n ref={closeButtonRef}\n >\n <Icon name='times' />\n </Button>\n )}\n </Flex>\n </Flex>\n\n <Flex item={{ grow: 1 }} as={StyledModalContent} ref={modalContentRef}>\n {children && <StyledModalChildrenWrap>{children}</StyledModalChildrenWrap>}\n\n <Progress\n visible={!!progress}\n placement='local'\n message={typeof progress === 'object' ? progress.message : t('loading')}\n />\n </Flex>\n\n {actions && (\n <Flex container={{ justify: 'between' }} item={{ shrink: 0 }} as={StyledModalActions}>\n {actions}\n </Flex>\n )}\n </Flex>\n );\n\n const renderModal =\n state === 'docked' ? (\n modal\n ) : (\n <Backdrop\n ref={backdropRef}\n container={{\n alignItems: center || maximized ? 'center' : 'start'\n }}\n transitionSpeed='slow'\n open={state === 'open' || state === 'maximized'}\n onBeforeTransitionIn={onBeforeOpen}\n onAfterTransitionIn={onAfterOpen}\n onBeforeTransitionOut={onBeforeClose}\n onAfterTransitionOut={() => {\n unmount();\n onAfterClose?.();\n }}\n >\n {modal}\n </Backdrop>\n );\n\n return state === 'minimized' ? <MinimizedModal {...props} {...restProps} /> : renderModal;\n }\n);\n\nexport default Modal;\n"]}
1
+ {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useContext,\n useEffect,\n MouseEvent,\n useRef,\n useCallback,\n KeyboardEvent as ReactKeyboardEvent\n} from 'react';\n\nimport Progress from '../Progress';\nimport { getFocusables } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport { ForwardProps } from '../../types';\nimport {\n useAfterInitialEffect,\n useConsolidatedRef,\n useI18n,\n useOuterEvent,\n useUID,\n useFocusTrap,\n usePrevious\n} from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as dockIcon from '../Icon/icons/dock.icon';\nimport * as undockIcon from '../Icon/icons/undock.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\n\nimport { ModalManagerContext } from './Contexts';\nimport MinimizedModal from './MinimizedModal';\nimport type { ModalProps } from './Modal.types';\nimport {\n StyledModal,\n StyledModalHeader,\n StyledModalContent,\n StyledModalActions,\n StyledModalChildrenWrap\n} from './Modal.styles';\n\nregisterIcon(timesIcon, minusIcon, dockIcon, undockIcon);\n\nconst Modal: FunctionComponent<ModalProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ModalProps>, ref: Ref<HTMLElement>) => {\n const {\n as,\n progress = false,\n heading,\n count,\n children,\n actions,\n stretch = false,\n center = false,\n defaultFocus,\n onBeforeOpen,\n onAfterOpen,\n onBeforeClose,\n onAfterClose,\n onRequestDismiss,\n onRequestMinimize,\n onRequestMaximize,\n onRequestDock,\n onRequestActivate,\n ...restProps\n } = props;\n\n const { ModalContext } = useContext(ModalManagerContext);\n const {\n alert,\n dismissible,\n minimizable,\n maximizable,\n dockable,\n state,\n dismiss,\n minimize,\n maximize,\n dock,\n unmount,\n top\n } = useContext(ModalContext);\n\n const modalRef = useConsolidatedRef(ref);\n const modalContentRef = useRef<HTMLDivElement>(null);\n const backdropRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n const previousState = usePrevious(state);\n const id = useUID();\n const t = useI18n();\n\n const tryDismiss = () => {\n if (onRequestDismiss?.() !== false) {\n dismiss();\n }\n };\n\n const setFocus = () => {\n const focusables = getFocusables(modalRef);\n\n if (defaultFocus?.current) {\n defaultFocus.current.focus();\n } else {\n const focusable =\n focusables.find(el => {\n return modalContentRef.current?.contains(el);\n }) ??\n closeButtonRef.current ??\n focusables[0];\n\n focusable?.focus();\n }\n };\n\n useFocusTrap(modalRef);\n\n useOuterEvent('mousedown', [modalRef], e => {\n if (['minimized', 'docked', 'closed'].includes(state)) return;\n\n if (dismissible) {\n if (e.target === backdropRef.current) {\n tryDismiss();\n }\n } else {\n modalRef.current?.focus();\n }\n });\n\n useEffect(() => {\n if (state === 'minimized') return;\n if (state === 'open' || state === 'maximized' || state === 'docked') setFocus();\n\n // This won't actually run until potential changes to docked modal handling.\n if (state === 'closed' && previousState === 'docked') {\n onBeforeClose?.();\n unmount();\n onAfterClose?.();\n }\n }, [state]);\n\n useEffect(() => {\n /*\n * If a modal is already in a closed state on initial mount, unmount it.\n * This only happens when a docked modal closes since the ModalManager\n * remounts it outside of the DockedModals container if state !== 'docked'.\n */\n if (state === 'closed') {\n onBeforeClose?.();\n unmount();\n onAfterClose?.();\n }\n }, []);\n\n // Dismiss on Escape needs to be handled using React event handling to be cancelable using SyntheticEvent.stopPropagation.\n const onModalKeyDown = useCallback(\n (e: ReactKeyboardEvent) => {\n if (\n dismissible &&\n (state === 'open' || state === 'maximized') &&\n e.key === 'Escape' &&\n top\n ) {\n tryDismiss();\n }\n },\n [dismissible, state, top, tryDismiss]\n );\n\n const onHeaderActionKeyDown = useCallback((e: ReactKeyboardEvent<HTMLButtonElement>) => {\n if (e.repeat && (e.key === 'Enter' || e.key === ' ')) e.preventDefault();\n }, []);\n\n // Set a ref based on the initial progress state to be used later to check for setting focus.\n const focusOnProgressChange = useRef(!!progress);\n useAfterInitialEffect(() => {\n // If the progress prop changed and we have already set focus we are done.\n if (!progress && focusOnProgressChange.current) {\n setFocus();\n focusOnProgressChange.current = false;\n }\n }, [progress]);\n\n const maximized = stretch || state === 'maximized';\n\n const modal = (\n <Flex\n {...restProps}\n container={{ direction: 'column' }}\n ref={modalRef}\n as={StyledModal}\n forwardedAs={as}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n onKeyDown={onModalKeyDown}\n alert={alert}\n role={alert ? 'alertdialog' : 'dialog'}\n stretch={maximized}\n center={center}\n aria-labelledby={`${id}-heading`}\n aria-modal={state === 'docked' ? 'false' : 'true'}\n state={state}\n // FOR PR REVIEW: This may be too much, this may be fine...\n aria-live='polite'\n aria-busy={progress ? 'true' : 'false'}\n >\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n item={{ shrink: 0 }}\n as={StyledModalHeader}\n hasAction={minimizable || dismissible}\n >\n <Flex\n container={{ alignItems: 'center', gap: 1 }}\n as={Text}\n variant='h2'\n id={`${id}-heading`}\n >\n <span>{heading}</span>\n {typeof count === 'number' && <Count>{count}</Count>}\n </Flex>\n\n <Flex container>\n {maximizable && !alert && state !== 'maximized' && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_maximize')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={() => {\n if (onRequestMaximize?.() !== false) {\n maximize();\n }\n }}\n >\n <Icon name='undock' />\n </Button>\n )}\n {dockable && !alert && state !== 'docked' && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_dock')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={() => {\n if (onRequestDock?.() !== false) {\n dock();\n }\n }}\n >\n <Icon name='dock' />\n </Button>\n )}\n {minimizable && !alert && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_minimize')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={() => {\n if (onRequestMinimize?.() !== false) {\n minimize();\n }\n }}\n >\n <Icon name='minus' />\n </Button>\n )}\n {dismissible && !alert && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_close')}\n onKeyDown={onHeaderActionKeyDown}\n onClick={tryDismiss}\n ref={closeButtonRef}\n >\n <Icon name='times' />\n </Button>\n )}\n </Flex>\n </Flex>\n\n <Flex item={{ grow: 1 }} as={StyledModalContent} ref={modalContentRef}>\n {children && <StyledModalChildrenWrap>{children}</StyledModalChildrenWrap>}\n\n <Progress\n visible={!!progress}\n placement='local'\n message={typeof progress === 'object' ? progress.message : t('loading')}\n />\n </Flex>\n\n {actions && (\n <Flex container={{ justify: 'between' }} item={{ shrink: 0 }} as={StyledModalActions}>\n {actions}\n </Flex>\n )}\n </Flex>\n );\n\n const renderModal =\n state === 'docked' ? (\n modal\n ) : (\n <Backdrop\n ref={backdropRef}\n container={{\n alignItems: center || maximized ? 'center' : 'start'\n }}\n transitionSpeed='slow'\n open={state === 'open' || state === 'maximized'}\n onBeforeTransitionIn={onBeforeOpen}\n onAfterTransitionIn={onAfterOpen}\n onBeforeTransitionOut={onBeforeClose}\n onAfterTransitionOut={() => {\n unmount();\n onAfterClose?.();\n }}\n >\n {modal}\n </Backdrop>\n );\n\n return state === 'minimized' ? <MinimizedModal {...props} {...restProps} /> : renderModal;\n }\n);\n\nexport default Modal;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAI9D,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,eAAO,MAAM,iBAAiB;;SAyB7B,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAU7B,CAAC;AAIH,eAAO,MAAM,kBAAkB,4GAI7B,CAAC;AAIH,eAAO,MAAM,WAAW,gVAsFtB,CAAC"}
1
+ {"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAI9D,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,eAAO,MAAM,iBAAiB;;SAyB7B,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAU7B,CAAC;AAIH,eAAO,MAAM,kBAAkB,4GAI7B,CAAC;AAIH,eAAO,MAAM,WAAW,gVAuFtB,CAAC"}
@@ -115,6 +115,7 @@ export const StyledModal = styled(StyledCard)(({ theme: { base }, alert, autoWid
115
115
  /* Using non logical properties due to Safari 14.x support and since the inline bottom values are the same. */
116
116
  border-bottom-left-radius: 0;
117
117
  border-bottom-right-radius: 0;
118
+ pointer-events: auto;
118
119
  }
119
120
  `}
120
121
 
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport { PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledIcon } from '../Icon';\nimport { StyledCard } from '../Card';\n\nimport { ModalContextValue, ModalProps } from './Modal.types';\n\ntype ModalPropsWithDefaults = PropsWithDefaults<ModalProps, 'stretch' | 'center' | 'autoWidth'>;\n\nexport const StyledModalChildrenWrap = styled.div``;\n\nexport const StyledModalHeader = styled.header<{ hasAction?: boolean }>(\n ({ theme: { base }, hasAction }) => {\n const padAdjust = hasAction ? 0.75 : 0;\n\n return css`\n padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${3 - padAdjust} * ${base.spacing})\n calc(${2.5 - padAdjust} * ${base.spacing}) calc(3 * ${base.spacing});\n h2 > ${StyledIcon} {\n margin-inline-end: ${base.spacing};\n }\n\n > h2 {\n overflow-x: hidden;\n > :first-child {\n overflow-x: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n }\n\n ${StyledButton} {\n color: ${base.palette['foreground-color']};\n }\n `;\n }\n);\n\nStyledModalHeader.defaultProps = defaultThemeProp;\n\nexport const StyledModalContent = styled.div(({ theme: { base } }) => {\n return css`\n position: relative;\n padding: calc(0.5 * ${base.spacing}) calc(3 * ${base.spacing});\n overflow-y: auto;\n\n &:last-child {\n padding-bottom: calc(3 * ${base.spacing});\n }\n `;\n});\n\nStyledModalContent.defaultProps = defaultThemeProp;\n\nexport const StyledModalActions = styled.footer(({ theme: { base } }) => {\n return css`\n padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});\n `;\n});\n\nStyledModalActions.defaultProps = defaultThemeProp;\n\nexport const StyledModal = styled(StyledCard)<\n ModalPropsWithDefaults & Pick<ModalContextValue, 'alert' | 'state'>\n>(({ theme: { base }, alert, autoWidth, center, stretch, state }) => {\n let defaultMinWidth = '80ch';\n let defaultMaxWidth = '80ch';\n\n if (alert) {\n defaultMinWidth = '60ch';\n defaultMaxWidth = '60ch';\n } else if (autoWidth) {\n defaultMaxWidth = '100%';\n }\n\n return css`\n position: relative;\n\n ${!alert && stretch\n ? css`\n width: calc(100% - 1rem);\n height: calc(100% - 1rem);\n\n @media screen and (min-width: ${base.breakpoints.sm}) {\n width: calc(100% - 2rem);\n height: calc(100% - 2rem);\n }\n\n @media screen and (min-width: ${base.breakpoints.md}) {\n width: calc(100% - 4rem);\n height: calc(100% - 4rem);\n }\n `\n : css`\n min-width: min(calc(100% - 1rem), ${defaultMinWidth});\n max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n max-height: calc(100% - 1rem);\n ${!center &&\n css`\n margin-block-start: 0.5rem;\n `}\n\n @media screen and (min-width: ${base.breakpoints.sm}) {\n min-width: min(calc(100% - 2rem), ${defaultMinWidth});\n max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n max-height: calc(100% - 2rem);\n ${!center &&\n css`\n margin-block-start: 1rem;\n `}\n }\n\n @media screen and (min-width: ${base.breakpoints.md}) {\n min-width: min(calc(100% - 4rem), ${defaultMinWidth});\n max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n max-height: calc(100% - 4rem);\n ${!center &&\n css`\n margin-block-start: 2rem;\n `}\n }\n `}\n box-shadow: ${base.shadow.high};\n\n ${state === 'docked' &&\n css`\n /*\n * This seems like the most optimal of the suboptimal solutions.\n * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n */\n &&& {\n /* Using non logical properties due to Safari 14.x support and since the inline bottom values are the same. */\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n `}\n\n &[aria-busy='true'] {\n ${StyledModalContent} {\n min-height: 8rem;\n overflow: hidden;\n }\n\n ${StyledModalChildrenWrap} {\n visibility: hidden;\n }\n }\n `;\n});\n\nStyledModal.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport { PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledIcon } from '../Icon';\nimport { StyledCard } from '../Card';\n\nimport { ModalContextValue, ModalProps } from './Modal.types';\n\ntype ModalPropsWithDefaults = PropsWithDefaults<ModalProps, 'stretch' | 'center' | 'autoWidth'>;\n\nexport const StyledModalChildrenWrap = styled.div``;\n\nexport const StyledModalHeader = styled.header<{ hasAction?: boolean }>(\n ({ theme: { base }, hasAction }) => {\n const padAdjust = hasAction ? 0.75 : 0;\n\n return css`\n padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${3 - padAdjust} * ${base.spacing})\n calc(${2.5 - padAdjust} * ${base.spacing}) calc(3 * ${base.spacing});\n h2 > ${StyledIcon} {\n margin-inline-end: ${base.spacing};\n }\n\n > h2 {\n overflow-x: hidden;\n > :first-child {\n overflow-x: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n }\n\n ${StyledButton} {\n color: ${base.palette['foreground-color']};\n }\n `;\n }\n);\n\nStyledModalHeader.defaultProps = defaultThemeProp;\n\nexport const StyledModalContent = styled.div(({ theme: { base } }) => {\n return css`\n position: relative;\n padding: calc(0.5 * ${base.spacing}) calc(3 * ${base.spacing});\n overflow-y: auto;\n\n &:last-child {\n padding-bottom: calc(3 * ${base.spacing});\n }\n `;\n});\n\nStyledModalContent.defaultProps = defaultThemeProp;\n\nexport const StyledModalActions = styled.footer(({ theme: { base } }) => {\n return css`\n padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});\n `;\n});\n\nStyledModalActions.defaultProps = defaultThemeProp;\n\nexport const StyledModal = styled(StyledCard)<\n ModalPropsWithDefaults & Pick<ModalContextValue, 'alert' | 'state'>\n>(({ theme: { base }, alert, autoWidth, center, stretch, state }) => {\n let defaultMinWidth = '80ch';\n let defaultMaxWidth = '80ch';\n\n if (alert) {\n defaultMinWidth = '60ch';\n defaultMaxWidth = '60ch';\n } else if (autoWidth) {\n defaultMaxWidth = '100%';\n }\n\n return css`\n position: relative;\n\n ${!alert && stretch\n ? css`\n width: calc(100% - 1rem);\n height: calc(100% - 1rem);\n\n @media screen and (min-width: ${base.breakpoints.sm}) {\n width: calc(100% - 2rem);\n height: calc(100% - 2rem);\n }\n\n @media screen and (min-width: ${base.breakpoints.md}) {\n width: calc(100% - 4rem);\n height: calc(100% - 4rem);\n }\n `\n : css`\n min-width: min(calc(100% - 1rem), ${defaultMinWidth});\n max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n max-height: calc(100% - 1rem);\n ${!center &&\n css`\n margin-block-start: 0.5rem;\n `}\n\n @media screen and (min-width: ${base.breakpoints.sm}) {\n min-width: min(calc(100% - 2rem), ${defaultMinWidth});\n max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n max-height: calc(100% - 2rem);\n ${!center &&\n css`\n margin-block-start: 1rem;\n `}\n }\n\n @media screen and (min-width: ${base.breakpoints.md}) {\n min-width: min(calc(100% - 4rem), ${defaultMinWidth});\n max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n max-height: calc(100% - 4rem);\n ${!center &&\n css`\n margin-block-start: 2rem;\n `}\n }\n `}\n box-shadow: ${base.shadow.high};\n\n ${state === 'docked' &&\n css`\n /*\n * This seems like the most optimal of the suboptimal solutions.\n * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n */\n &&& {\n /* Using non logical properties due to Safari 14.x support and since the inline bottom values are the same. */\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n pointer-events: auto;\n }\n `}\n\n &[aria-busy='true'] {\n ${StyledModalContent} {\n min-height: 8rem;\n overflow: hidden;\n }\n\n ${StyledModalChildrenWrap} {\n visibility: hidden;\n }\n }\n `;\n});\n\nStyledModal.defaultProps = defaultThemeProp;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AASf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAK3C,OAAO,gBAA+C,MAAM,qBAAqB,CAAC;AAYlF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAoMnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AASf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,gBAA+C,MAAM,qBAAqB,CAAC;AAYlF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAiMnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
2
+ import { forwardRef, useCallback, useMemo, useRef } from 'react';
3
3
  import Button from '../Button';
4
4
  import Icon, { registerIcon } from '../Icon';
5
5
  import * as plusIcon from '../Icon/icons/plus.icon';
@@ -8,64 +8,69 @@ import Text from '../Text';
8
8
  import Flex from '../Flex';
9
9
  import FormField from '../FormField';
10
10
  import Input from '../Input';
11
- import { useConfiguration, useConsolidatedRef, useI18n, useUID } from '../../hooks';
11
+ import { useConfiguration, useConsolidatedRef, useI18n, useInputFormatter, useUID } from '../../hooks';
12
12
  import StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';
13
13
  import { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';
14
14
  import { getCleanedValue, getDecimal, getDecrementedValue, getFormattedValue, getIncrementedValue, getInteger } from './utils';
15
15
  registerIcon(minusIcon, plusIcon);
16
16
  const NumberInput = forwardRef((props, ref) => {
17
17
  const uid = useUID();
18
- const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, value = '', onChange, onBlur, unit, unitPlacement = 'after', showDecimal = true, numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, variant, 'aria-label': ariaLabel, ...restProps } = props;
18
+ const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, value = '', onChange, onFocus, onBlur, unit, unitPlacement = 'after', showDecimal = true, numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, variant, 'aria-label': ariaLabel, ...restProps } = props;
19
19
  const { locale } = useConfiguration();
20
- const [cursor, setCursor] = useState(0);
21
20
  const inputRef = useConsolidatedRef(ref);
22
21
  const containerRef = useRef(null);
23
- const numberOfDecimals = useMemo(() => (showDecimal ? numberOfDecimalsProp : 0), [showDecimal, numberOfDecimalsProp]);
24
- useEffect(() => {
25
- inputRef.current?.setSelectionRange(cursor, cursor);
26
- }, [cursor]);
27
- const formattedValue = useMemo(() => getFormattedValue(!showDecimal ? getInteger(value) : value, locale, showGroupSeparators, numberOfDecimals), [showDecimal, value, numberOfDecimals, showGroupSeparators, locale]);
22
+ const numberOfDecimals = showDecimal ? numberOfDecimalsProp : 0;
23
+ const decimalSign = useMemo(() => getDecimal(locale), [locale]);
24
+ const formatValue = useCallback(number => {
25
+ return getFormattedValue(!showDecimal ? getInteger(number) : number, locale, showGroupSeparators, numberOfDecimals);
26
+ }, [showDecimal, numberOfDecimals, showGroupSeparators, locale]);
28
27
  const onInputChange = useCallback((e) => {
29
28
  const inputValue = e.target.value;
30
- const selectionStart = e.target.selectionStart;
31
- const decimal = getDecimal(locale);
32
- const cleanedInputValue = getCleanedValue(inputValue, decimal, numberOfDecimals);
29
+ const cleanedInputValue = getCleanedValue(inputValue, decimalSign, numberOfDecimals);
33
30
  if (cleanedInputValue === value)
34
31
  return;
35
- onChange?.(cleanedInputValue);
36
- if (selectionStart !== undefined && selectionStart !== null) {
37
- const formattedVal = getFormattedValue(cleanedInputValue, locale, showGroupSeparators, numberOfDecimals);
38
- const cursorPosition = selectionStart + (formattedVal.length - e.target.value.length) || 1;
39
- setCursor(cursorPosition);
40
- }
41
- }, [onChange, locale, value, numberOfDecimals, showDecimal, cursor, showGroupSeparators]);
42
- const onKeyDown = useCallback((ev) => {
32
+ onChange(cleanedInputValue);
33
+ }, [onChange, decimalSign, value, numberOfDecimals]);
34
+ const onKeyDown = useCallback((e) => {
43
35
  if (readOnly)
44
36
  return;
45
- switch (ev.key) {
37
+ switch (e.key) {
46
38
  case 'ArrowUp':
47
- ev.preventDefault();
48
- onChange?.(getIncrementedValue(value, min, max, step));
39
+ e.preventDefault();
40
+ onChange(getIncrementedValue(value, min, max, step));
49
41
  break;
50
42
  case 'ArrowDown':
51
- ev.preventDefault();
52
- onChange?.(getDecrementedValue(value, min, max, step));
43
+ e.preventDefault();
44
+ onChange(getDecrementedValue(value, min, max, step));
45
+ break;
46
+ case decimalSign:
47
+ if (e.target.value.includes(decimalSign))
48
+ e.preventDefault();
49
+ break;
50
+ case '-':
51
+ if (e.target.value.includes('-'))
52
+ e.preventDefault();
53
53
  break;
54
54
  default:
55
55
  }
56
56
  }, [value, min, max, step, onChange]);
57
- const onInputBlur = useCallback(() => {
58
- let parsableValue = value;
59
- if (Number.isNaN(parseFloat(value))) {
60
- parsableValue = '';
61
- }
62
- else if (value?.endsWith('.')) {
63
- parsableValue = value.slice(0, -1);
64
- }
65
- onBlur?.(parsableValue);
57
+ const onInputFocusEvent = useCallback((callbackFn) => {
58
+ if (!callbackFn)
59
+ return;
60
+ return () => {
61
+ let parsableValue = value;
62
+ if (Number.isNaN(parseFloat(value))) {
63
+ parsableValue = '';
64
+ }
65
+ else if (value?.endsWith('.')) {
66
+ parsableValue = value.slice(0, -1);
67
+ }
68
+ callbackFn(parsableValue);
69
+ };
66
70
  }, [value]);
71
+ const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\p{N}${decimalSign}-`);
67
72
  const t = useI18n();
68
- const NumberInputComp = (_jsxs(_Fragment, { children: [unit && unitPlacement === 'before' && _jsx(Text, { children: unit }), _jsx(Input, { inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onBlur: onInputBlur, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps } }), unit && unitPlacement === 'after' && _jsx(Text, { children: unit })] }));
73
+ const NumberInputComp = (_jsxs(_Fragment, { children: [unit && unitPlacement === 'before' && _jsx(Text, { children: unit }), _jsx(Input, { inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent(onFocus), onBlur: onInputFocusEvent(onBlur), "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps } }), unit && unitPlacement === 'after' && _jsx(Text, { children: unit })] }));
69
74
  const onMinusClick = () => {
70
75
  onChange?.(getDecrementedValue(value, min, max, step));
71
76
  };
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n KeyboardEvent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport { useConfiguration, useConsolidatedRef, useI18n, useUID } from '../../hooks';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport NumberInputProps, { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n getCleanedValue,\n getDecimal,\n getDecrementedValue,\n getFormattedValue,\n getIncrementedValue,\n getInteger\n} from './utils';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n status,\n label,\n labelHidden,\n info,\n required,\n disabled,\n readOnly,\n value = '',\n onChange,\n onBlur,\n unit,\n unitPlacement = 'after',\n showDecimal = true,\n numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n showGroupSeparators = true,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n variant,\n 'aria-label': ariaLabel,\n ...restProps\n } = props;\n\n const { locale } = useConfiguration();\n const [cursor, setCursor] = useState(0);\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLElement>(null);\n const numberOfDecimals = useMemo(\n () => (showDecimal ? numberOfDecimalsProp : 0),\n [showDecimal, numberOfDecimalsProp]\n );\n\n useEffect(() => {\n inputRef.current?.setSelectionRange(cursor, cursor);\n }, [cursor]);\n\n const formattedValue = useMemo(\n () =>\n getFormattedValue(\n !showDecimal ? getInteger(value) : value,\n locale,\n showGroupSeparators,\n numberOfDecimals\n ),\n [showDecimal, value, numberOfDecimals, showGroupSeparators, locale]\n );\n\n const onInputChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n const selectionStart = e.target.selectionStart;\n const decimal = getDecimal(locale);\n const cleanedInputValue = getCleanedValue(inputValue, decimal, numberOfDecimals);\n if (cleanedInputValue === value) return;\n onChange?.(cleanedInputValue);\n if (selectionStart !== undefined && selectionStart !== null) {\n const formattedVal = getFormattedValue(\n cleanedInputValue,\n locale,\n showGroupSeparators,\n numberOfDecimals\n );\n const cursorPosition =\n selectionStart + (formattedVal.length - e.target.value.length) || 1;\n setCursor(cursorPosition);\n }\n },\n [onChange, locale, value, numberOfDecimals, showDecimal, cursor, showGroupSeparators]\n );\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (readOnly) return;\n switch (ev.key) {\n case 'ArrowUp':\n ev.preventDefault();\n onChange?.(getIncrementedValue(value, min, max, step));\n break;\n case 'ArrowDown':\n ev.preventDefault();\n onChange?.(getDecrementedValue(value, min, max, step));\n break;\n default:\n }\n },\n [value, min, max, step, onChange]\n );\n\n const onInputBlur = useCallback(() => {\n let parsableValue = value;\n if (Number.isNaN(parseFloat(value))) {\n parsableValue = '';\n } else if (value?.endsWith('.')) {\n parsableValue = value.slice(0, -1);\n }\n onBlur?.(parsableValue);\n }, [value]);\n\n const t = useI18n();\n\n const NumberInputComp = (\n <>\n {unit && unitPlacement === 'before' && <Text>{unit}</Text>}\n <Input\n inputMode='numeric'\n ref={inputRef}\n value={formattedValue}\n onKeyDown={onKeyDown}\n onBlur={onInputBlur}\n aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n />\n {unit && unitPlacement === 'after' && <Text>{unit}</Text>}\n </>\n );\n\n const onMinusClick = () => {\n onChange?.(getDecrementedValue(value, min, max, step));\n };\n\n const onPlusClick = () => {\n onChange?.(getIncrementedValue(value, min, max, step));\n };\n\n const StepperComp = (\n <Flex\n as={StyledStepperInput}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n size={formattedValue?.length}\n unitPlacement={unitPlacement}\n >\n <Button\n variant='simple'\n icon\n onClick={onMinusClick}\n aria-label={t('number_decrement_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='minus' />\n </Button>\n <Flex\n container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n item={{ grow: 1 }}\n ref={containerRef}\n onClick={(e: MouseEvent) => {\n if (e.target === containerRef.current) inputRef?.current?.focus();\n }}\n >\n {NumberInputComp}\n </Flex>\n <Button\n variant='simple'\n icon\n onClick={onPlusClick}\n aria-label={t('number_increment_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='plus' />\n </Button>\n </Flex>\n );\n\n const NumberComp = (\n <Flex\n as={StyledNumberInput}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n {NumberInputComp}\n </Flex>\n );\n\n const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default NumberInput;\n"]}
1
+ {"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n KeyboardEvent,\n PropsWithoutRef,\n useCallback,\n useMemo,\n useRef\n} from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useI18n,\n useInputFormatter,\n useUID\n} from '../../hooks';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport NumberInputProps, { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n getCleanedValue,\n getDecimal,\n getDecrementedValue,\n getFormattedValue,\n getIncrementedValue,\n getInteger\n} from './utils';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n status,\n label,\n labelHidden,\n info,\n required,\n disabled,\n readOnly,\n value = '',\n onChange,\n onFocus,\n onBlur,\n unit,\n unitPlacement = 'after',\n showDecimal = true,\n numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n showGroupSeparators = true,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n variant,\n 'aria-label': ariaLabel,\n ...restProps\n } = props;\n\n const { locale } = useConfiguration();\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLElement>(null);\n const numberOfDecimals = showDecimal ? numberOfDecimalsProp : 0;\n const decimalSign = useMemo(() => getDecimal(locale), [locale]);\n\n const formatValue = useCallback(\n number => {\n return getFormattedValue(\n !showDecimal ? getInteger(number) : number,\n locale,\n showGroupSeparators,\n numberOfDecimals\n );\n },\n [showDecimal, numberOfDecimals, showGroupSeparators, locale]\n );\n\n const onInputChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n const cleanedInputValue = getCleanedValue(inputValue, decimalSign, numberOfDecimals);\n if (cleanedInputValue === value) return;\n onChange(cleanedInputValue);\n },\n [onChange, decimalSign, value, numberOfDecimals]\n );\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (readOnly) return;\n switch (e.key) {\n case 'ArrowUp':\n e.preventDefault();\n onChange(getIncrementedValue(value, min, max, step));\n break;\n case 'ArrowDown':\n e.preventDefault();\n onChange(getDecrementedValue(value, min, max, step));\n break;\n case decimalSign:\n if ((e.target as HTMLInputElement).value.includes(decimalSign)) e.preventDefault();\n break;\n case '-':\n if ((e.target as HTMLInputElement).value.includes('-')) e.preventDefault();\n break;\n default:\n }\n },\n [value, min, max, step, onChange]\n );\n\n const onInputFocusEvent = useCallback(\n (callbackFn: NumberInputProps['onBlur' | 'onFocus']) => {\n if (!callbackFn) return;\n return () => {\n let parsableValue = value;\n if (Number.isNaN(parseFloat(value))) {\n parsableValue = '';\n } else if (value?.endsWith('.')) {\n parsableValue = value.slice(0, -1);\n }\n callbackFn(parsableValue);\n };\n },\n [value]\n );\n\n const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\\\p{N}${decimalSign}-`);\n\n const t = useI18n();\n\n const NumberInputComp = (\n <>\n {unit && unitPlacement === 'before' && <Text>{unit}</Text>}\n <Input\n inputMode='numeric'\n ref={inputRef}\n value={formattedValue}\n onKeyDown={onKeyDown}\n onFocus={onInputFocusEvent(onFocus)}\n onBlur={onInputFocusEvent(onBlur)}\n aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n />\n {unit && unitPlacement === 'after' && <Text>{unit}</Text>}\n </>\n );\n\n const onMinusClick = () => {\n onChange?.(getDecrementedValue(value, min, max, step));\n };\n\n const onPlusClick = () => {\n onChange?.(getIncrementedValue(value, min, max, step));\n };\n\n const StepperComp = (\n <Flex\n as={StyledStepperInput}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n size={formattedValue?.length}\n unitPlacement={unitPlacement}\n >\n <Button\n variant='simple'\n icon\n onClick={onMinusClick}\n aria-label={t('number_decrement_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='minus' />\n </Button>\n <Flex\n container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n item={{ grow: 1 }}\n ref={containerRef}\n onClick={(e: MouseEvent) => {\n if (e.target === containerRef.current) inputRef?.current?.focus();\n }}\n >\n {NumberInputComp}\n </Flex>\n <Button\n variant='simple'\n icon\n onClick={onPlusClick}\n aria-label={t('number_increment_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='plus' />\n </Button>\n </Flex>\n );\n\n const NumberComp = (\n <Flex\n as={StyledNumberInput}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n {NumberInputComp}\n </Flex>\n );\n\n const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default NumberInput;\n"]}
@@ -34,7 +34,9 @@ export default interface NumberInputProps extends BaseProps, NoChildrenProp {
34
34
  */
35
35
  value?: string;
36
36
  /** Callback fired when input value changes. */
37
- onChange?: (value: string) => void;
37
+ onChange: (value: string) => void;
38
+ /** Callback fired when the component gets focus. */
39
+ onFocus?: (value: string) => void;
38
40
  /** Callback fired when the component loses focus. */
39
41
  onBlur?: (value: string) => void;
40
42
  /** Defines unit of the number, like 'kg', 'miles' or '%'. */
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,CAAC,OAAO,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACzE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,qCAAqC;AACrC,eAAO,MAAM,yBAAyB,KAAK,CAAC"}
1
+ {"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,CAAC,OAAO,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACzE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,qCAAqC;AACrC,eAAO,MAAM,yBAAyB,KAAK,CAAC"}