@pega/cosmos-react-core 3.0.0-dev.17.0 → 3.0.0-dev.18.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 (114) hide show
  1. package/lib/components/Badges/Keyboard.d.ts.map +1 -1
  2. package/lib/components/Badges/Keyboard.js +2 -0
  3. package/lib/components/Badges/Keyboard.js.map +1 -1
  4. package/lib/components/Badges/Selection.d.ts +1 -1
  5. package/lib/components/Badges/Selection.d.ts.map +1 -1
  6. package/lib/components/Badges/Selection.js +4 -2
  7. package/lib/components/Badges/Selection.js.map +1 -1
  8. package/lib/components/Breadcrumbs/Breadcrumbs.d.ts +2 -1
  9. package/lib/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
  10. package/lib/components/Breadcrumbs/Breadcrumbs.js +27 -7
  11. package/lib/components/Breadcrumbs/Breadcrumbs.js.map +1 -1
  12. package/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
  13. package/lib/components/ComboBox/ComboBox.js +55 -23
  14. package/lib/components/ComboBox/ComboBox.js.map +1 -1
  15. package/lib/components/ComboBox/ComboBox.types.d.ts +3 -1
  16. package/lib/components/ComboBox/ComboBox.types.d.ts.map +1 -1
  17. package/lib/components/ComboBox/ComboBox.types.js.map +1 -1
  18. package/lib/components/ComboBox/ComboBoxInput.d.ts +7 -0
  19. package/lib/components/ComboBox/ComboBoxInput.d.ts.map +1 -1
  20. package/lib/components/ComboBox/ComboBoxInput.js +5 -2
  21. package/lib/components/ComboBox/ComboBoxInput.js.map +1 -1
  22. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map +1 -1
  23. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js +112 -36
  24. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map +1 -1
  25. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types.d.ts +8 -0
  26. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types.d.ts.map +1 -1
  27. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types.js.map +1 -1
  28. package/lib/components/CompositeInput/CompositeInput.d.ts.map +1 -1
  29. package/lib/components/CompositeInput/CompositeInput.js +2 -2
  30. package/lib/components/CompositeInput/CompositeInput.js.map +1 -1
  31. package/lib/components/CompositeInput/CompositeInput.styles.d.ts.map +1 -1
  32. package/lib/components/CompositeInput/CompositeInput.styles.js +19 -17
  33. package/lib/components/CompositeInput/CompositeInput.styles.js.map +1 -1
  34. package/lib/components/Currency/utils.d.ts.map +1 -1
  35. package/lib/components/Currency/utils.js +3 -2
  36. package/lib/components/Currency/utils.js.map +1 -1
  37. package/lib/components/DateTime/Picker/Calendar.d.ts.map +1 -1
  38. package/lib/components/DateTime/Picker/Calendar.js +6 -12
  39. package/lib/components/DateTime/Picker/Calendar.js.map +1 -1
  40. package/lib/components/DateTime/Picker/Calendar.styles.d.ts +2 -4
  41. package/lib/components/DateTime/Picker/Calendar.styles.d.ts.map +1 -1
  42. package/lib/components/DateTime/Picker/Calendar.styles.js +12 -54
  43. package/lib/components/DateTime/Picker/Calendar.styles.js.map +1 -1
  44. package/lib/components/DateTime/Picker/DatePicker.d.ts.map +1 -1
  45. package/lib/components/DateTime/Picker/DatePicker.js +2 -1
  46. package/lib/components/DateTime/Picker/DatePicker.js.map +1 -1
  47. package/lib/components/DateTime/Picker/DatePicker.styles.d.ts +3 -0
  48. package/lib/components/DateTime/Picker/DatePicker.styles.d.ts.map +1 -0
  49. package/lib/components/DateTime/Picker/DatePicker.styles.js +39 -0
  50. package/lib/components/DateTime/Picker/DatePicker.styles.js.map +1 -0
  51. package/lib/components/DateTime/Picker/DateRangePicker.js +1 -1
  52. package/lib/components/DateTime/Picker/DateRangePicker.js.map +1 -1
  53. package/lib/components/DateTime/index.d.ts +2 -0
  54. package/lib/components/DateTime/index.d.ts.map +1 -1
  55. package/lib/components/DateTime/index.js +2 -0
  56. package/lib/components/DateTime/index.js.map +1 -1
  57. package/lib/components/Dialog/Dialog.d.ts.map +1 -1
  58. package/lib/components/Dialog/Dialog.js +3 -2
  59. package/lib/components/Dialog/Dialog.js.map +1 -1
  60. package/lib/components/ListToolbar/ListToolbar.d.ts.map +1 -1
  61. package/lib/components/ListToolbar/ListToolbar.js +64 -9
  62. package/lib/components/ListToolbar/ListToolbar.js.map +1 -1
  63. package/lib/components/ListToolbar/ListToolbar.types.d.ts +2 -0
  64. package/lib/components/ListToolbar/ListToolbar.types.d.ts.map +1 -1
  65. package/lib/components/ListToolbar/ListToolbar.types.js.map +1 -1
  66. package/lib/components/ListToolbar/PresetMenuPopover.d.ts +12 -0
  67. package/lib/components/ListToolbar/PresetMenuPopover.d.ts.map +1 -0
  68. package/lib/components/ListToolbar/PresetMenuPopover.js +36 -0
  69. package/lib/components/ListToolbar/PresetMenuPopover.js.map +1 -0
  70. package/lib/components/ListToolbar/QueryOptionPopover.d.ts.map +1 -1
  71. package/lib/components/ListToolbar/QueryOptionPopover.js +14 -44
  72. package/lib/components/ListToolbar/QueryOptionPopover.js.map +1 -1
  73. package/lib/components/Menu/Menu.d.ts.map +1 -1
  74. package/lib/components/Menu/Menu.js +8 -5
  75. package/lib/components/Menu/Menu.js.map +1 -1
  76. package/lib/components/Menu/Menu.styles.js +1 -1
  77. package/lib/components/Menu/Menu.styles.js.map +1 -1
  78. package/lib/components/Menu/Menu.types.d.ts +13 -0
  79. package/lib/components/Menu/Menu.types.d.ts.map +1 -1
  80. package/lib/components/Menu/Menu.types.js.map +1 -1
  81. package/lib/components/Menu/MenuGroup.d.ts.map +1 -1
  82. package/lib/components/Menu/MenuGroup.js +3 -3
  83. package/lib/components/Menu/MenuGroup.js.map +1 -1
  84. package/lib/components/Menu/MenuItem.d.ts.map +1 -1
  85. package/lib/components/Menu/MenuItem.js +3 -5
  86. package/lib/components/Menu/MenuItem.js.map +1 -1
  87. package/lib/components/Menu/MenuList.d.ts.map +1 -1
  88. package/lib/components/Menu/MenuList.js +14 -14
  89. package/lib/components/Menu/MenuList.js.map +1 -1
  90. package/lib/components/PageTemplates/DashboardPage.d.ts.map +1 -1
  91. package/lib/components/PageTemplates/DashboardPage.js +1 -4
  92. package/lib/components/PageTemplates/DashboardPage.js.map +1 -1
  93. package/lib/components/Skeleton/ParagraphSkeleton.d.ts.map +1 -1
  94. package/lib/components/Skeleton/ParagraphSkeleton.js +2 -2
  95. package/lib/components/Skeleton/ParagraphSkeleton.js.map +1 -1
  96. package/lib/hooks/useActiveDescendant.d.ts +5 -1
  97. package/lib/hooks/useActiveDescendant.d.ts.map +1 -1
  98. package/lib/hooks/useActiveDescendant.js +162 -94
  99. package/lib/hooks/useActiveDescendant.js.map +1 -1
  100. package/lib/hooks/useI18n.d.ts +26 -0
  101. package/lib/hooks/useI18n.d.ts.map +1 -1
  102. package/lib/hooks/useI18n.js +2 -1
  103. package/lib/hooks/useI18n.js.map +1 -1
  104. package/lib/i18n/default.d.ts +26 -0
  105. package/lib/i18n/default.d.ts.map +1 -1
  106. package/lib/i18n/default.js +39 -13
  107. package/lib/i18n/default.js.map +1 -1
  108. package/lib/i18n/i18n.d.ts +52 -0
  109. package/lib/i18n/i18n.d.ts.map +1 -1
  110. package/lib/i18n/translate.d.ts +3 -0
  111. package/lib/i18n/translate.d.ts.map +1 -1
  112. package/lib/i18n/translate.js.map +1 -1
  113. package/lib/theme/themes/darkTheme.json +3 -1
  114. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MutableRefObject,\n PropsWithoutRef,\n useContext,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n useMemo,\n Fragment,\n useCallback,\n MouseEvent\n} from 'react';\n\nimport { ForwardProps } from '../../types';\nimport Drawer from '../Drawer';\nimport {\n useAfterInitialEffect,\n useConsolidatedRef,\n useItemIntersection,\n useDirection\n} from '../../hooks';\nimport Progress from '../Progress';\nimport EmptyState from '../EmptyState';\n\nimport type {\n AcceptedMouseEventElement,\n MenuListProps,\n ParentMenuItemProps,\n MenuItemProps\n} from './Menu.types';\nimport MenuContext from './Menu.context';\nimport MenuListHeader from './MenuListHeader';\nimport MenuItem from './MenuItem';\nimport helpers from './helpers';\nimport {\n StyledLoadingItem,\n StyledMenuList,\n StyledMenuListContainer,\n StyledSeparator\n} from './Menu.styles';\nimport { resizeRootEl } from './NavItemsList';\nimport MenuGroup from './MenuGroup';\n\nconst setParentDisabled = (fieldset: HTMLFieldSetElement, bool: boolean) => {\n fieldset.disabled = bool;\n const legendButton = fieldset.querySelector<HTMLButtonElement>('legend button');\n if (legendButton) {\n legendButton.disabled = bool;\n }\n};\n\nconst MenuList: FunctionComponent<MenuListProps & ForwardProps> = forwardRef(\n ({ items, parent }: PropsWithoutRef<MenuListProps>, ref: MenuListProps['ref']) => {\n const menuListWrapperRef: MutableRefObject<HTMLElement | null> = useRef(null);\n const selfRef = useConsolidatedRef(ref);\n const ulRef = useRef<HTMLUListElement>(null);\n const returnFocusRef: MutableRefObject<HTMLButtonElement | null> = useRef(null);\n const [open, setOpen] = useState(!parent);\n const [expandedItem, setExpandedItem] = useState<ParentMenuItemProps>();\n const {\n scrollAt,\n loadMore,\n loading,\n emptyText,\n currentItemId,\n onItemExpand,\n focusControl,\n updateActiveDescendants,\n setFocusReturnEl,\n onItemCollapse\n } = useContext(MenuContext);\n const { end } = useDirection();\n\n useItemIntersection(\n ulRef,\n items.length - 1,\n () => {\n if (!loading) loadMore?.(parent?.item?.id);\n },\n ':scope > li'\n );\n\n useLayoutEffect(() => {\n if (!selfRef.current || expandedItem) return;\n menuListWrapperRef.current = selfRef.current.parentElement;\n resizeRootEl(\n selfRef.current,\n menuListWrapperRef.current as HTMLElement,\n items.length,\n scrollAt\n );\n });\n\n useEffect(() => {\n if (parent) setOpen(true);\n }, []);\n\n useAfterInitialEffect(() => {\n if (expandedItem) {\n setExpandedItem(items.find(item => item.id === expandedItem.id) as ParentMenuItemProps); // FIXME\n }\n }, [expandedItem, items]);\n\n useAfterInitialEffect(() => {\n if (currentItemId) {\n // if there is ancestor item of the controlled item, set it to expanded.\n const ancestor = items.find(\n item => item.items?.length && helpers.getItem(item.items, currentItemId) !== undefined\n );\n\n if (ancestor) {\n setExpandedItem(ancestor as ParentMenuItemProps);\n updateActiveDescendants({ preventScroll: true });\n }\n }\n }, [currentItemId, items, parent]);\n\n const onExpandCallback = useCallback(\n (id: MenuItemProps['id'], e: MouseEvent<AcceptedMouseEventElement>) => {\n const item = helpers.getItem(items, id);\n returnFocusRef.current = e.currentTarget as HTMLButtonElement;\n setExpandedItem(item as ParentMenuItemProps); // FIXME\n item?.onExpand?.(id, e);\n onItemExpand?.(id, e);\n updateActiveDescendants({ preventScroll: true });\n },\n [items]\n );\n\n const listContent = useMemo(() => {\n if (items.length) {\n return items.map((item, index) => {\n return helpers.isItem(item) ? (\n <MenuItem\n {...item}\n key={item.id}\n onExpand={item.items ? onExpandCallback : undefined}\n />\n ) : (\n <Fragment key={item.id}>\n <MenuGroup {...item} />\n {items[index + 1] && helpers.isItem(items[index + 1]) && (\n <StyledSeparator role='separator' />\n )}\n </Fragment>\n );\n });\n }\n\n if (!loading) {\n return <EmptyState message={emptyText} forwardedAs='li' />;\n }\n\n return null;\n }, [items, loading, emptyText]);\n\n const list = (\n <StyledMenuList ref={ulRef} role='menu'>\n {listContent}\n {loading && !expandedItem && (\n <StyledLoadingItem>\n <Progress placement='local' />\n </StyledLoadingItem>\n )}\n </StyledMenuList>\n );\n\n return (\n <>\n <Drawer\n aria-hidden={!!expandedItem}\n as={StyledMenuListContainer}\n ref={selfRef}\n open={open}\n style={{ opacity: expandedItem ? 0 : 1 }}\n disabled={!!expandedItem}\n placement={end}\n onBeforeOpen={() => {\n if (parent) {\n parent.el.style.opacity = '0';\n }\n\n if (selfRef.current) {\n selfRef.current.style.opacity = '1';\n }\n }}\n onAfterOpen={() => {\n if (parent) {\n setParentDisabled(parent.el, true);\n }\n }}\n onBeforeClose={() => {\n if (parent && menuListWrapperRef.current) {\n setParentDisabled(parent.el, false);\n parent.el.style.opacity = '1';\n resizeRootEl(\n parent.el,\n menuListWrapperRef.current,\n parent.siblingItems.length,\n scrollAt\n );\n }\n\n if (selfRef.current) {\n selfRef.current.style.opacity = '0';\n }\n }}\n onAfterClose={() => {\n if (parent) {\n focusControl?.focus();\n\n const expandBtn = parent.returnFocusRef.current;\n parent.setExpandedItem(undefined);\n\n if (expandBtn) {\n setFocusReturnEl(expandBtn?.closest('li'));\n }\n\n onItemCollapse?.(parent.item.id);\n updateActiveDescendants();\n }\n }}\n >\n {parent && (\n <MenuListHeader\n text={parent.item.primary}\n onClick={() => {\n setOpen(false);\n }}\n />\n )}\n\n {list}\n </Drawer>\n\n {expandedItem && selfRef.current && (\n <MenuList\n items={expandedItem.items}\n parent={{\n el: selfRef.current,\n item: expandedItem,\n siblingItems: items,\n setExpandedItem,\n returnFocusRef\n }}\n />\n )}\n </>\n );\n }\n);\n\nexport default MenuList;\n"]}
1
+ {"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MutableRefObject,\n PropsWithoutRef,\n useContext,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n useMemo,\n Fragment,\n useCallback,\n MouseEvent\n} from 'react';\n\nimport { ForwardProps } from '../../types';\nimport Drawer from '../Drawer';\nimport {\n useAfterInitialEffect,\n useConsolidatedRef,\n useItemIntersection,\n useDirection\n} from '../../hooks';\nimport Progress from '../Progress';\nimport EmptyState from '../EmptyState';\n\nimport type {\n AcceptedMouseEventElement,\n MenuListProps,\n ParentMenuItemProps,\n MenuItemProps\n} from './Menu.types';\nimport MenuContext from './Menu.context';\nimport MenuListHeader from './MenuListHeader';\nimport MenuItem from './MenuItem';\nimport helpers from './helpers';\nimport {\n StyledLoadingItem,\n StyledMenuList,\n StyledMenuListContainer,\n StyledSeparator\n} from './Menu.styles';\nimport { resizeRootEl } from './NavItemsList';\nimport MenuGroup from './MenuGroup';\n\nconst setParentDisabled = (fieldset: HTMLFieldSetElement, bool: boolean) => {\n fieldset.disabled = bool;\n const legendButton = fieldset.querySelector<HTMLButtonElement>('legend button');\n if (legendButton) {\n legendButton.disabled = bool;\n }\n};\n\nconst MenuList: FunctionComponent<MenuListProps & ForwardProps> = forwardRef(\n (\n { items, parent, id, menuRole, ...restProps }: PropsWithoutRef<MenuListProps>,\n ref: MenuListProps['ref']\n ) => {\n const menuListWrapperRef: MutableRefObject<HTMLElement | null> = useRef(null);\n const selfRef = useConsolidatedRef(ref);\n const ulRef = useRef<HTMLUListElement>(null);\n const returnFocusRef: MutableRefObject<HTMLButtonElement | null> = useRef(null);\n const [open, setOpen] = useState(!parent);\n const [expandedItem, setExpandedItem] = useState<ParentMenuItemProps>();\n const {\n scrollAt,\n loadMore,\n loading,\n emptyText,\n currentItemId,\n onItemExpand,\n focusControl,\n updateActiveDescendants,\n setFocusReturnEl,\n onItemCollapse\n } = useContext(MenuContext);\n const { end } = useDirection();\n\n useItemIntersection(\n ulRef,\n items.length - 1,\n () => {\n if (!loading) loadMore?.(parent?.item?.id);\n },\n ':scope > li'\n );\n\n useLayoutEffect(() => {\n if (!selfRef.current || expandedItem) return;\n menuListWrapperRef.current = selfRef.current.parentElement;\n resizeRootEl(\n selfRef.current,\n menuListWrapperRef.current as HTMLElement,\n items.length + 1,\n scrollAt\n );\n });\n\n useEffect(() => {\n if (parent) setOpen(true);\n }, []);\n\n useAfterInitialEffect(() => {\n if (expandedItem) {\n setExpandedItem(items.find(item => item.id === expandedItem.id) as ParentMenuItemProps); // FIXME\n }\n }, [expandedItem, items]);\n\n useAfterInitialEffect(() => {\n if (currentItemId) {\n // if there is ancestor item of the controlled item, set it to expanded.\n const ancestor = items.find(\n item => item.items?.length && helpers.getItem(item.items, currentItemId) !== undefined\n );\n\n if (ancestor) {\n setExpandedItem(ancestor as ParentMenuItemProps);\n updateActiveDescendants({ preventScroll: true });\n }\n }\n }, [currentItemId, items, parent]);\n\n const onExpandCallback = useCallback(\n (itemId: MenuItemProps['id'], e: MouseEvent<AcceptedMouseEventElement>) => {\n const item = helpers.getItem(items, itemId);\n returnFocusRef.current = e.currentTarget as HTMLButtonElement;\n setExpandedItem(item as ParentMenuItemProps); // FIXME\n item?.onExpand?.(itemId, e);\n onItemExpand?.(itemId, e);\n updateActiveDescendants({ preventScroll: true });\n },\n [items]\n );\n\n const listContent = useMemo(() => {\n if (items.length) {\n return items.map((item, index) => {\n return helpers.isItem(item) ? (\n <MenuItem\n {...item}\n key={item.id}\n role={menuRole === 'listbox' ? 'option' : 'menuitem'}\n onExpand={item.items ? onExpandCallback : undefined}\n />\n ) : (\n <Fragment key={item.id}>\n <MenuGroup {...item} itemRole={menuRole === 'listbox' ? 'option' : 'menuitem'} />\n {items[index + 1] && helpers.isItem(items[index + 1]) && (\n <StyledSeparator role='separator' />\n )}\n </Fragment>\n );\n });\n }\n\n if (!loading) {\n return <EmptyState message={emptyText} forwardedAs='li' />;\n }\n\n return null;\n }, [items, loading, emptyText]);\n\n const list = (\n <StyledMenuList id={expandedItem ? undefined : id} ref={ulRef} role={menuRole} {...restProps}>\n {parent && (\n <li role='presentation'>\n <MenuListHeader\n text={parent.item.primary}\n onClick={() => {\n setOpen(false);\n }}\n />\n </li>\n )}\n {listContent}\n {loading && !expandedItem && (\n <StyledLoadingItem>\n <Progress placement='local' />\n </StyledLoadingItem>\n )}\n </StyledMenuList>\n );\n\n return (\n <>\n <Drawer\n aria-hidden={!!expandedItem}\n as={StyledMenuListContainer}\n ref={selfRef}\n open={open}\n style={{ opacity: expandedItem ? 0 : 1 }}\n disabled={!!expandedItem}\n placement={end}\n onBeforeOpen={() => {\n if (parent) {\n parent.el.style.opacity = '0';\n }\n\n if (selfRef.current) {\n selfRef.current.style.opacity = '1';\n }\n }}\n onAfterOpen={() => {\n if (parent) {\n setParentDisabled(parent.el, true);\n }\n }}\n onBeforeClose={() => {\n if (parent && menuListWrapperRef.current) {\n setParentDisabled(parent.el, false);\n parent.el.style.opacity = '1';\n resizeRootEl(\n parent.el,\n menuListWrapperRef.current,\n parent.siblingItems.length + 1,\n scrollAt\n );\n }\n\n if (selfRef.current) {\n selfRef.current.style.opacity = '0';\n }\n }}\n onAfterClose={() => {\n if (parent) {\n focusControl?.focus();\n\n const expandBtn = parent.returnFocusRef.current;\n parent.setExpandedItem(undefined);\n\n if (expandBtn) {\n setFocusReturnEl(expandBtn?.closest('li'));\n }\n\n onItemCollapse?.(parent.item.id);\n updateActiveDescendants();\n }\n }}\n >\n {list}\n </Drawer>\n\n {expandedItem && selfRef.current && (\n <MenuList\n id={id}\n items={expandedItem.items}\n parent={{\n el: selfRef.current,\n item: expandedItem,\n siblingItems: items,\n setExpandedItem,\n returnFocusRef\n }}\n menuRole={menuRole}\n />\n )}\n </>\n );\n }\n);\n\nexport default MenuList;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"DashboardPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQ3C,OAAO,EACL,iBAAiB,EACjB,eAAe,EAKhB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,eAAe;IAC/D,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,yGAAyB,CAAC;AAIzD,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAIF,eAAO,MAAM,yBAAyB;;;qDAYpC,CAAC;AA+LH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAiBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"DashboardPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQ3C,OAAO,EACL,iBAAiB,EACjB,eAAe,EAKhB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,eAAe;IAC/D,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,yGAAyB,CAAC;AAIzD,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAIF,eAAO,MAAM,yBAAyB;;;qDAYpC,CAAC;AA4LH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAiBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -74,10 +74,7 @@ const DashboardPageLayout = forwardRef(({ regions, regionFullWidth, cols = `repe
74
74
  }
75
75
  return banners ? 'auto auto 1fr 1fr' : 'auto 1fr 1fr';
76
76
  }
77
- if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {
78
- return banners ? 'auto auto auto auto auto' : 'auto auto auto auto';
79
- }
80
- return banners ? 'auto auto auto auto' : 'auto auto auto';
77
+ return 'fit-content(100%)';
81
78
  }, [filterPosition, banners]);
82
79
  if (filterPosition === 'inline-start' && filters && Object.keys(filters).length !== 0) {
83
80
  cols = '1fr 2fr 2fr';
@@ -1 +1 @@
1
- {"version":3,"file":"DashboardPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport Breadcrumbs from '../Breadcrumbs';\n\nimport {\n PageTemplateProps,\n PageLayoutProps,\n StyledPageHeader,\n StyledPageLayout,\n StyledPageIcon,\n StyledRegion\n} from './PageTemplates';\n\nexport interface DashboardPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n filters?: ReactNode[];\n fitToViewport?: boolean;\n}\n\nexport interface DashboardPageLayoutProps extends PageLayoutProps {\n filters?: ReactNode[];\n filterPosition?: 'block-start' | 'inline-start' | 'inline-end';\n fitToViewport?: boolean;\n regionFullWidth: ReactNode[];\n}\n\nexport const StyledFilterRegion = styled(StyledRegion)``;\n\nStyledFilterRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardRegion = styled(StyledRegion)`\n overflow: auto;\n`;\n\nStyledDashboardRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardPageLayout = styled(StyledPageLayout)<\n Pick<DashboardPageProps, 'fitToViewport'>\n>(({ fitToViewport }) => {\n const height = 'calc(100vh - var(--appshell-offset, 0))';\n\n return css`\n min-height: ${height};\n ${fitToViewport &&\n css`\n height: ${height};\n `}\n `;\n});\n\nStyledDashboardPageLayout.defaultProps = defaultThemeProp;\n\nconst DashboardPageLayout: FunctionComponent<DashboardPageLayoutProps & ForwardProps> = forwardRef(\n (\n {\n regions,\n regionFullWidth,\n cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n filters,\n filterPosition = 'block-start',\n fitToViewport = false,\n title,\n icon,\n actions,\n banners,\n path,\n as,\n ...restProps\n }: PropsWithoutRef<DashboardPageLayoutProps>,\n ref: PageLayoutProps['ref']\n ) => {\n const headerArea = useMemo(() => {\n if (filterPosition === 'block-start' || !filters || Object.keys(filters).length === 0) {\n return `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;\n }\n return `'${Array.from({ length: regions.length + 1 }, () => 'header').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;\n const filterArea = `'${Array.from({ length: regions.length }, () => 'filter').join(' ')}'`;\n\n const regionArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const regionFullWidthArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const gridAreas = useMemo(() => {\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners\n ? `${headerArea}\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`\n : `${headerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n return banners\n ? `${headerArea}\\n${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`\n : `${headerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }, [filterPosition, filters, banners]);\n\n const pageRows = useMemo(() => {\n if (fitToViewport) {\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners ? 'auto auto auto 1fr 1fr' : 'auto auto 1fr 1fr';\n }\n return banners ? 'auto auto 1fr 1fr' : 'auto 1fr 1fr';\n }\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners ? 'auto auto auto auto auto' : 'auto auto auto auto';\n }\n return banners ? 'auto auto auto auto' : 'auto auto auto';\n }, [filterPosition, banners]);\n\n if (filterPosition === 'inline-start' && filters && Object.keys(filters).length !== 0) {\n cols = '1fr 2fr 2fr';\n }\n\n if (filterPosition === 'inline-end' && filters && Object.keys(filters).length !== 0) {\n cols = '2fr 2fr 1fr';\n }\n\n return (\n <Grid\n {...restProps}\n as={StyledDashboardPageLayout}\n forwardedAs={as}\n fitToViewport={fitToViewport}\n container={{\n autoRows: 'max-content',\n cols: '1fr',\n gap: 2,\n pad: 2\n }}\n md={{\n container: {\n areas: gridAreas,\n rows: pageRows,\n cols\n }\n }}\n ref={ref}\n >\n <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n {path && path.length > 0 && <Breadcrumbs path={...path} />}\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n </Grid>\n {banners && <Grid md={{ item: { area: 'banner' } }}>{banners}</Grid>}\n {filters && Object.keys(filters).length !== 0 && (\n <Grid\n as={StyledFilterRegion}\n container={{\n autoRows: 'max-content',\n gap: 2\n }}\n md={{\n container: {\n cols:\n filterPosition === 'block-start'\n ? 'repeat(4, minmax(min(20ch, 100%), 1fr))'\n : 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'\n },\n item: { area: 'filter' }\n }}\n >\n {filters}\n </Grid>\n )}\n {regions.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Flex\n container={{\n direction: 'column',\n justify: 'start',\n gap: 2\n }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Flex>\n );\n })}\n {regionFullWidth.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Grid\n container={{\n cols: 'minmax(0, 1fr)',\n alignItems: 'start',\n gap: 2\n }}\n md={{ item: { area: 'col-full-width' } }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Grid>\n );\n })}\n </Grid>\n );\n }\n);\n\nconst DashboardPage: FunctionComponent<DashboardPageProps & ForwardProps> = forwardRef(\n (\n { a, b, c, filters, fitToViewport, ...restProps }: PropsWithoutRef<DashboardPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <DashboardPageLayout\n {...restProps}\n cols='1fr 1fr'\n filters={filters}\n fitToViewport={fitToViewport}\n regions={[a, b]}\n regionFullWidth={[c]}\n ref={ref}\n />\n );\n }\n);\n\nexport default DashboardPage;\n"]}
1
+ {"version":3,"file":"DashboardPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport Breadcrumbs from '../Breadcrumbs';\n\nimport {\n PageTemplateProps,\n PageLayoutProps,\n StyledPageHeader,\n StyledPageLayout,\n StyledPageIcon,\n StyledRegion\n} from './PageTemplates';\n\nexport interface DashboardPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n filters?: ReactNode[];\n fitToViewport?: boolean;\n}\n\nexport interface DashboardPageLayoutProps extends PageLayoutProps {\n filters?: ReactNode[];\n filterPosition?: 'block-start' | 'inline-start' | 'inline-end';\n fitToViewport?: boolean;\n regionFullWidth: ReactNode[];\n}\n\nexport const StyledFilterRegion = styled(StyledRegion)``;\n\nStyledFilterRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardRegion = styled(StyledRegion)`\n overflow: auto;\n`;\n\nStyledDashboardRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardPageLayout = styled(StyledPageLayout)<\n Pick<DashboardPageProps, 'fitToViewport'>\n>(({ fitToViewport }) => {\n const height = 'calc(100vh - var(--appshell-offset, 0))';\n\n return css`\n min-height: ${height};\n ${fitToViewport &&\n css`\n height: ${height};\n `}\n `;\n});\n\nStyledDashboardPageLayout.defaultProps = defaultThemeProp;\n\nconst DashboardPageLayout: FunctionComponent<DashboardPageLayoutProps & ForwardProps> = forwardRef(\n (\n {\n regions,\n regionFullWidth,\n cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n filters,\n filterPosition = 'block-start',\n fitToViewport = false,\n title,\n icon,\n actions,\n banners,\n path,\n as,\n ...restProps\n }: PropsWithoutRef<DashboardPageLayoutProps>,\n ref: PageLayoutProps['ref']\n ) => {\n const headerArea = useMemo(() => {\n if (filterPosition === 'block-start' || !filters || Object.keys(filters).length === 0) {\n return `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;\n }\n return `'${Array.from({ length: regions.length + 1 }, () => 'header').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;\n const filterArea = `'${Array.from({ length: regions.length }, () => 'filter').join(' ')}'`;\n\n const regionArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const regionFullWidthArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const gridAreas = useMemo(() => {\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners\n ? `${headerArea}\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`\n : `${headerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n return banners\n ? `${headerArea}\\n${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`\n : `${headerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }, [filterPosition, filters, banners]);\n\n const pageRows = useMemo(() => {\n if (fitToViewport) {\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners ? 'auto auto auto 1fr 1fr' : 'auto auto 1fr 1fr';\n }\n return banners ? 'auto auto 1fr 1fr' : 'auto 1fr 1fr';\n }\n return 'fit-content(100%)';\n }, [filterPosition, banners]);\n\n if (filterPosition === 'inline-start' && filters && Object.keys(filters).length !== 0) {\n cols = '1fr 2fr 2fr';\n }\n\n if (filterPosition === 'inline-end' && filters && Object.keys(filters).length !== 0) {\n cols = '2fr 2fr 1fr';\n }\n\n return (\n <Grid\n {...restProps}\n as={StyledDashboardPageLayout}\n forwardedAs={as}\n fitToViewport={fitToViewport}\n container={{\n autoRows: 'max-content',\n cols: '1fr',\n gap: 2,\n pad: 2\n }}\n md={{\n container: {\n areas: gridAreas,\n rows: pageRows,\n cols\n }\n }}\n ref={ref}\n >\n <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n {path && path.length > 0 && <Breadcrumbs path={...path} />}\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n </Grid>\n {banners && <Grid md={{ item: { area: 'banner' } }}>{banners}</Grid>}\n {filters && Object.keys(filters).length !== 0 && (\n <Grid\n as={StyledFilterRegion}\n container={{\n autoRows: 'max-content',\n gap: 2\n }}\n md={{\n container: {\n cols:\n filterPosition === 'block-start'\n ? 'repeat(4, minmax(min(20ch, 100%), 1fr))'\n : 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'\n },\n item: { area: 'filter' }\n }}\n >\n {filters}\n </Grid>\n )}\n {regions.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Flex\n container={{\n direction: 'column',\n justify: 'start',\n gap: 2\n }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Flex>\n );\n })}\n {regionFullWidth.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Grid\n container={{\n cols: 'minmax(0, 1fr)',\n alignItems: 'start',\n gap: 2\n }}\n md={{ item: { area: 'col-full-width' } }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Grid>\n );\n })}\n </Grid>\n );\n }\n);\n\nconst DashboardPage: FunctionComponent<DashboardPageProps & ForwardProps> = forwardRef(\n (\n { a, b, c, filters, fitToViewport, ...restProps }: PropsWithoutRef<DashboardPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <DashboardPageLayout\n {...restProps}\n cols='1fr 1fr'\n filters={filters}\n fitToViewport={fitToViewport}\n regions={[a, b]}\n regionFullWidth={[c]}\n ref={ref}\n />\n );\n }\n);\n\nexport default DashboardPage;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"ParagraphSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/ParagraphSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,+EAA+E;IAC/E,QAAQ,EAAE,SAAS,CAAC;CACrB;AAUD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAQ/E,CAAC;AAIF,eAAe,iBAAiB,CAAC"}
1
+ {"version":3,"file":"ParagraphSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/ParagraphSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,+EAA+E;IAC/E,QAAQ,EAAE,SAAS,CAAC;CACrB;AAUD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAS/E,CAAC;AAIF,eAAe,iBAAiB,CAAC"}
@@ -6,8 +6,8 @@ const StyledParagraphSkeleton = styled.div `
6
6
  margin: 0.25rem 0;
7
7
  `;
8
8
  StyledParagraphSkeleton.defaultProps = defaultThemeProp;
9
- const ParagraphSkeleton = (props) => {
10
- return (_jsx(StyledParagraphSkeleton, { ...props, "aria-disabled": 'true', children: props.children }));
9
+ const ParagraphSkeleton = ({ children, ...restProps }) => {
10
+ return (_jsx(StyledParagraphSkeleton, { ...restProps, "aria-disabled": 'true', children: children }));
11
11
  };
12
12
  ParagraphSkeleton.defaultProps = defaultProps;
13
13
  export default ParagraphSkeleton;
@@ -1 +1 @@
1
- {"version":3,"file":"ParagraphSkeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/ParagraphSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAO/C,MAAM,YAAY,GAAoC,EAAE,CAAC;AAEzD,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAwB;;CAEjE,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,iBAAiB,GAA6D,CAClF,KAA6B,EAC7B,EAAE;IACF,OAAO,CACL,KAAC,uBAAuB,OAAK,KAAK,mBAAgB,MAAM,YACrD,KAAK,CAAC,QAAQ,GACS,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAAC;AAE9C,eAAe,iBAAiB,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface ParagraphSkeletonProps extends BaseProps {\n /** Children for the skeleton. These should be Line and Rectangle Skeletons. */\n children: ReactNode;\n}\n\nconst defaultProps: Partial<ParagraphSkeletonProps> = {};\n\nconst StyledParagraphSkeleton = styled.div<ParagraphSkeletonProps>`\n margin: 0.25rem 0;\n`;\n\nStyledParagraphSkeleton.defaultProps = defaultThemeProp;\n\nconst ParagraphSkeleton: FunctionComponent<ParagraphSkeletonProps & ForwardProps> = (\n props: ParagraphSkeletonProps\n) => {\n return (\n <StyledParagraphSkeleton {...props} aria-disabled='true'>\n {props.children}\n </StyledParagraphSkeleton>\n );\n};\n\nParagraphSkeleton.defaultProps = defaultProps;\n\nexport default ParagraphSkeleton;\n"]}
1
+ {"version":3,"file":"ParagraphSkeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/ParagraphSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAO/C,MAAM,YAAY,GAAoC,EAAE,CAAC;AAEzD,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAwB;;CAEjE,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,iBAAiB,GAA6D,CAAC,EACnF,QAAQ,EACR,GAAG,SAAS,EACW,EAAE,EAAE;IAC3B,OAAO,CACL,KAAC,uBAAuB,OAAK,SAAS,mBAAgB,MAAM,YACzD,QAAQ,GACe,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAAC;AAE9C,eAAe,iBAAiB,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface ParagraphSkeletonProps extends BaseProps {\n /** Children for the skeleton. These should be Line and Rectangle Skeletons. */\n children: ReactNode;\n}\n\nconst defaultProps: Partial<ParagraphSkeletonProps> = {};\n\nconst StyledParagraphSkeleton = styled.div<ParagraphSkeletonProps>`\n margin: 0.25rem 0;\n`;\n\nStyledParagraphSkeleton.defaultProps = defaultThemeProp;\n\nconst ParagraphSkeleton: FunctionComponent<ParagraphSkeletonProps & ForwardProps> = ({\n children,\n ...restProps\n}: ParagraphSkeletonProps) => {\n return (\n <StyledParagraphSkeleton {...restProps} aria-disabled='true'>\n {children}\n </StyledParagraphSkeleton>\n );\n};\n\nParagraphSkeleton.defaultProps = defaultProps;\n\nexport default ParagraphSkeleton;\n"]}
@@ -8,6 +8,10 @@ export interface UseActiveDescendantConfig {
8
8
  scopeSelector?: string;
9
9
  /** Custom selector for descendant options */
10
10
  selector?: string;
11
+ /** Orientation of descendant navigation
12
+ * @default 'vertical'
13
+ */
14
+ orientation?: 'horizontal' | 'vertical';
11
15
  /** One-time override for the focused descendant, triggers re-evaluation.
12
16
  * Include `clearFocusDescendantEl` for cleanup.
13
17
  */
@@ -43,7 +47,7 @@ export interface UseActiveDescendantConfig {
43
47
  }
44
48
  declare type CurrentDescendant = HTMLElement | undefined;
45
49
  declare type Descendants = HTMLElement[] | null;
46
- declare const useActiveDescendant: ({ focusEl, scope, scopeSelector, selector, focusDescendantEl, clearFocusDescendant, focusReturnEl, clearFocusReturn, currentDescendantId, onClick, preventInitialScroll, pauseDescendantEvaluation, clearPreventScroll }: UseActiveDescendantConfig, dependencyArray?: DependencyList) => {
50
+ declare const useActiveDescendant: ({ focusEl, scope, scopeSelector, selector, orientation, focusDescendantEl, clearFocusDescendant, focusReturnEl, clearFocusReturn, currentDescendantId, onClick, preventInitialScroll, pauseDescendantEvaluation, clearPreventScroll }: UseActiveDescendantConfig, dependencyArray?: DependencyList) => {
47
51
  activeDescendant: CurrentDescendant;
48
52
  descendants: Descendants;
49
53
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useActiveDescendant.d.ts","sourceRoot":"","sources":["../../src/hooks/useActiveDescendant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,cAAc,EAAuB,MAAM,OAAO,CAAC;AAIjF,MAAM,WAAW,yBAAyB;IACxC,4DAA4D;IAC5D,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,wCAAwC;IACxC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,qDAAqD;IACrD,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,mBAAmB,EAAE,WAAW,KAAK,IAAI,CAAC;IACrD;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wDAAwD;IACxD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,aAAK,iBAAiB,GAAG,WAAW,GAAG,SAAS,CAAC;AACjD,aAAK,WAAW,GAAG,WAAW,EAAE,GAAG,IAAI,CAAC;AAExC,QAAA,MAAM,mBAAmB,6NAepB,yBAAyB;sBAGV,iBAAiB;iBACtB,WAAW;CAkPzB,CAAC;AAEF,eAAO,MAAM,iBAAiB;aASnB,OAAO;iBACH,WAAW;8BACE,iBAAiB;sBACzB,iBAAiB;mBACpB,yBAAyB,CAAC,eAAe,CAAC;2BAClC,WAAW,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI;;UAmC/D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
1
+ {"version":3,"file":"useActiveDescendant.d.ts","sourceRoot":"","sources":["../../src/hooks/useActiveDescendant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,cAAc,EAAuB,MAAM,OAAO,CAAC;AAMjF,MAAM,WAAW,yBAAyB;IACxC,4DAA4D;IAC5D,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,wCAAwC;IACxC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;OAEG;IACH,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,qDAAqD;IACrD,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,mBAAmB,EAAE,WAAW,KAAK,IAAI,CAAC;IACrD;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wDAAwD;IACxD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,aAAK,iBAAiB,GAAG,WAAW,GAAG,SAAS,CAAC;AACjD,aAAK,WAAW,GAAG,WAAW,EAAE,GAAG,IAAI,CAAC;AAExC,QAAA,MAAM,mBAAmB,0OAgBpB,yBAAyB;sBAGV,iBAAiB;iBACtB,WAAW;CAwTzB,CAAC;AAEF,eAAO,MAAM,iBAAiB;aASnB,OAAO;iBACH,WAAW;8BACE,iBAAiB;sBACzB,iBAAiB;mBACpB,yBAAyB,CAAC,eAAe,CAAC;2BAClC,WAAW,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI;;UAmC/D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
@@ -1,29 +1,76 @@
1
1
  import { useEffect, useState, useCallback, useRef } from 'react';
2
2
  import { createUID } from '../utils';
3
- const useActiveDescendant = ({ focusEl, scope, scopeSelector, selector, focusDescendantEl, clearFocusDescendant, focusReturnEl, clearFocusReturn, currentDescendantId, onClick, preventInitialScroll, pauseDescendantEvaluation = false, clearPreventScroll }, dependencyArray = []) => {
3
+ import useDirection from './useDirection';
4
+ const useActiveDescendant = ({ focusEl, scope, scopeSelector, selector, orientation = 'vertical', focusDescendantEl, clearFocusDescendant, focusReturnEl, clearFocusReturn, currentDescendantId, onClick, preventInitialScroll, pauseDescendantEvaluation = false, clearPreventScroll }, dependencyArray = []) => {
4
5
  const [resetId, setResetId] = useState(0);
5
6
  const previousActiveId = useRef('');
7
+ const paused = useRef(pauseDescendantEvaluation);
6
8
  const [focusDescendantElIndex, setFocusDescendantElIndex] = useState(null);
7
9
  const [currentIndex, setCurrentIndex] = useState(null);
8
10
  const [descendants, setDescendants] = useState();
9
- const clearThenSetDescendants = useCallback((setVal) => {
11
+ const { rtl } = useDirection();
12
+ const clearDescendants = useCallback(() => {
10
13
  descendants?.forEach(node => {
11
14
  node.setAttribute('data-current', 'false');
12
15
  });
16
+ }, [descendants]);
17
+ const clearThenSetDescendants = useCallback((setVal) => {
18
+ clearDescendants();
13
19
  setDescendants(setVal
14
20
  ? Array.from(setVal).filter((item) => item instanceof HTMLElement)
15
21
  : null);
16
22
  }, [descendants]);
23
+ const setIdsAndOwns = useCallback(({ clear } = { clear: false }) => {
24
+ const ownedIds = [];
25
+ if (descendants && descendants.length) {
26
+ descendants.forEach(node => {
27
+ node.id = node.id || createUID();
28
+ ownedIds.push(node.id);
29
+ });
30
+ }
31
+ if (clear) {
32
+ const currentOwnedIds = focusEl?.getAttribute('aria-owns')?.split(' ');
33
+ const clearedIds = currentOwnedIds?.filter(id => !ownedIds.includes(id));
34
+ focusEl?.setAttribute('aria-owns', clearedIds?.join(' ') || '');
35
+ }
36
+ else {
37
+ focusEl?.setAttribute('aria-owns', ownedIds.join(' '));
38
+ }
39
+ }, [focusEl, descendants]);
40
+ const updateDescendants = useCallback(() => {
41
+ if (pauseDescendantEvaluation)
42
+ return;
43
+ let hasScope = scope;
44
+ if (hasScope && hasScope instanceof HTMLElement) {
45
+ if (scopeSelector) {
46
+ hasScope = hasScope.querySelector(scopeSelector);
47
+ }
48
+ if (!hasScope) {
49
+ clearThenSetDescendants(null);
50
+ return;
51
+ }
52
+ if (selector) {
53
+ const setVal = hasScope.querySelectorAll(selector);
54
+ clearThenSetDescendants(setVal);
55
+ }
56
+ else {
57
+ const setVal = hasScope.querySelectorAll('a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])');
58
+ clearThenSetDescendants(setVal);
59
+ }
60
+ }
61
+ else {
62
+ clearThenSetDescendants(null);
63
+ }
64
+ }, [scope, scopeSelector, selector, pauseDescendantEvaluation]);
65
+ // ## Update paused ref
66
+ useEffect(() => {
67
+ paused.current = pauseDescendantEvaluation;
68
+ }, [pauseDescendantEvaluation]);
17
69
  // ## Toggle active scope data attr.
18
70
  useEffect(() => {
19
71
  if (!scope || !focusEl)
20
72
  return;
21
- const rootNode = focusEl.getRootNode();
22
- let activeElement = rootNode.activeElement;
23
- if (activeElement?.tagName === 'IFRAME') {
24
- activeElement = activeElement.contentDocument?.activeElement;
25
- }
26
- scope.setAttribute('data-active-scope', activeElement === focusEl ? 'true' : 'false');
73
+ scope.setAttribute('data-active-scope', document.activeElement === focusEl ? 'true' : 'false');
27
74
  const onFocus = () => {
28
75
  scope.setAttribute('data-active-scope', 'true');
29
76
  };
@@ -39,118 +86,139 @@ const useActiveDescendant = ({ focusEl, scope, scopeSelector, selector, focusDes
39
86
  }, [scope, focusEl]);
40
87
  // ## Update descendants
41
88
  useEffect(() => {
42
- if (!pauseDescendantEvaluation) {
43
- // 0 second timeout added because descendantScope needs to be up to date before running query after dependencyArray change
44
- const timeoutId = setTimeout(() => {
45
- let hasScope = scope;
46
- if (hasScope && hasScope instanceof HTMLElement) {
47
- if (scopeSelector) {
48
- hasScope = hasScope.querySelector(scopeSelector);
49
- }
50
- if (!hasScope) {
51
- clearThenSetDescendants(null);
52
- return;
53
- }
54
- if (selector) {
55
- clearThenSetDescendants(hasScope.querySelectorAll(selector));
56
- }
57
- else {
58
- clearThenSetDescendants(hasScope.querySelectorAll('a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'));
59
- }
60
- }
61
- else {
62
- clearThenSetDescendants(null);
63
- }
64
- }, 0);
65
- return () => clearTimeout(timeoutId);
89
+ /**
90
+ * 0 second timeout added because descendantScope needs to be
91
+ * up to date before running query after dependencyArray change
92
+ */
93
+ const timeoutId = setTimeout(updateDescendants, 0);
94
+ return () => clearTimeout(timeoutId);
95
+ }, [...dependencyArray]);
96
+ // ## Reset base current index when dependencies change
97
+ useEffect(() => {
98
+ if (!paused.current) {
99
+ setCurrentIndex(0);
66
100
  }
67
- }, [pauseDescendantEvaluation, scope, scopeSelector, selector, focusEl, ...dependencyArray]);
101
+ }, [...dependencyArray]);
68
102
  // ## Set IDs and aria-owns
69
103
  useEffect(() => {
70
- const ownedIds = [];
71
- setCurrentIndex(0);
72
- if (descendants && descendants.length) {
73
- descendants.forEach(node => {
74
- node.id = node.id || createUID();
75
- ownedIds.push(node.id);
76
- });
104
+ if (!pauseDescendantEvaluation) {
105
+ setIdsAndOwns();
106
+ setResetId(Math.random());
77
107
  }
78
- focusEl?.setAttribute('aria-owns', ownedIds.join(' '));
79
- return () => {
80
- focusEl?.removeAttribute('aria-owns');
81
- };
82
- }, [focusEl, descendants]);
108
+ else {
109
+ clearDescendants();
110
+ setIdsAndOwns({ clear: true });
111
+ }
112
+ }, [pauseDescendantEvaluation, focusEl, descendants]);
83
113
  // ## Bind focus el keyDown
84
114
  useEffect(() => {
115
+ const nextIndex = () => {
116
+ // Focus next or first
117
+ clearFocusReturn?.();
118
+ clearPreventScroll?.();
119
+ if (currentIndex !== null && currentIndex + 1 < descendants.length) {
120
+ setCurrentIndex(currentIndex + 1);
121
+ }
122
+ else {
123
+ setCurrentIndex(0);
124
+ }
125
+ };
126
+ const prevIndex = () => {
127
+ // Focus previous or last
128
+ clearFocusReturn?.();
129
+ clearPreventScroll?.();
130
+ if (currentIndex !== null && currentIndex - 1 > -1) {
131
+ setCurrentIndex(currentIndex - 1);
132
+ }
133
+ else {
134
+ setCurrentIndex(descendants.length - 1);
135
+ }
136
+ };
85
137
  const onKeyDown = (e) => {
86
- if (descendants && descendants.length) {
87
- switch (e.key) {
88
- case 'ArrowDown':
89
- e.preventDefault();
90
- // Focus next or first
91
- clearFocusReturn?.();
92
- clearPreventScroll?.();
93
- if (currentIndex !== null && currentIndex + 1 < descendants.length) {
94
- setCurrentIndex(currentIndex + 1);
95
- }
96
- else {
97
- setCurrentIndex(0);
98
- }
99
- break;
100
- case 'ArrowUp':
101
- e.preventDefault();
102
- // Focus previous or last
103
- clearFocusReturn?.();
104
- clearPreventScroll?.();
105
- if (currentIndex !== null && currentIndex - 1 > -1) {
106
- setCurrentIndex(currentIndex - 1);
107
- }
108
- else {
109
- setCurrentIndex(descendants.length - 1);
110
- }
111
- break;
112
- case 'Enter':
113
- e.preventDefault();
114
- // Click focused item
115
- if (descendants && descendants.length && currentIndex !== null) {
116
- if (onClick) {
117
- onClick(descendants[currentIndex]);
118
- break;
138
+ // 0 second timeout to execute after explicitly defined onKeyDown event handlers.
139
+ setTimeout(() => {
140
+ if (descendants && descendants.length) {
141
+ switch (e.key) {
142
+ case 'ArrowDown':
143
+ if (orientation === 'vertical') {
144
+ e.preventDefault();
145
+ nextIndex();
119
146
  }
120
- const nodeName = descendants[currentIndex].nodeName.toLowerCase();
121
- if (nodeName === 'input' || nodeName === 'button' || nodeName === 'a') {
122
- descendants[currentIndex].click();
147
+ break;
148
+ case 'ArrowUp':
149
+ if (orientation === 'vertical') {
150
+ e.preventDefault();
151
+ prevIndex();
123
152
  }
124
- else {
125
- descendants[currentIndex].querySelector('button, a, input')?.click();
153
+ break;
154
+ case 'ArrowRight':
155
+ if (orientation === 'horizontal') {
156
+ e.preventDefault();
157
+ if (rtl) {
158
+ prevIndex();
159
+ }
160
+ else {
161
+ nextIndex();
162
+ }
126
163
  }
127
- }
128
- break;
129
- default:
130
- break;
164
+ break;
165
+ case 'ArrowLeft':
166
+ if (orientation === 'horizontal') {
167
+ e.preventDefault();
168
+ if (rtl) {
169
+ nextIndex();
170
+ }
171
+ else {
172
+ prevIndex();
173
+ }
174
+ }
175
+ break;
176
+ case 'Enter':
177
+ e.preventDefault();
178
+ // Click focused item
179
+ if (descendants && descendants.length && currentIndex !== null) {
180
+ if (onClick) {
181
+ onClick(descendants[currentIndex]);
182
+ break;
183
+ }
184
+ const nodeName = descendants[currentIndex].nodeName.toLowerCase();
185
+ if (nodeName === 'input' || nodeName === 'button' || nodeName === 'a') {
186
+ descendants[currentIndex].click();
187
+ }
188
+ else {
189
+ descendants[currentIndex].querySelector('button, a, input')?.click();
190
+ }
191
+ }
192
+ break;
193
+ default:
194
+ break;
195
+ }
131
196
  }
132
- }
197
+ }, 0);
133
198
  };
134
- // Do not rebind once / if `currentDescendantId` control is defined
135
- if (focusEl && descendants?.length && !currentDescendantId) {
199
+ // Do not rebind once / if `currentDescendantId` (deprecated) control is defined
200
+ if (!pauseDescendantEvaluation && focusEl && descendants?.length && !currentDescendantId) {
136
201
  focusEl.addEventListener('keydown', onKeyDown);
137
202
  }
138
203
  return () => {
139
204
  focusEl?.removeEventListener('keydown', onKeyDown);
140
205
  };
141
- }, [focusEl, currentIndex, descendants]);
142
- // ## Handle independent control update
206
+ }, [focusEl, currentIndex, descendants, pauseDescendantEvaluation]);
207
+ // ## Handle independent control update (deprecated)
143
208
  useEffect(() => {
144
- if (descendants && currentDescendantId) {
209
+ if (!pauseDescendantEvaluation && descendants && currentDescendantId) {
145
210
  descendants.forEach((node, index) => {
146
211
  if (node.id === currentDescendantId) {
147
212
  setCurrentIndex(index);
148
213
  }
149
214
  });
150
215
  }
151
- }, [currentDescendantId, descendants]);
216
+ }, [currentDescendantId, descendants, pauseDescendantEvaluation]);
152
217
  // ## Set and scroll to current descendant
153
218
  useEffect(() => {
219
+ if (paused.current) {
220
+ return;
221
+ }
154
222
  const nextIndex = focusDescendantElIndex || currentIndex;
155
223
  const focusReturnId = focusReturnEl?.id;
156
224
  let focusReturnIndex;