@pega/cosmos-react-core 4.0.0-dev.24.0 → 4.0.0-dev.25.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 (64) hide show
  1. package/lib/components/Backdrop/Backdrop.d.ts +4 -0
  2. package/lib/components/Backdrop/Backdrop.d.ts.map +1 -1
  3. package/lib/components/Backdrop/Backdrop.js +12 -8
  4. package/lib/components/Backdrop/Backdrop.js.map +1 -1
  5. package/lib/components/ListToolbar/ListToolbar.js +2 -3
  6. package/lib/components/ListToolbar/ListToolbar.js.map +1 -1
  7. package/lib/components/ListToolbar/ListToolbar.styles.d.ts +1 -0
  8. package/lib/components/ListToolbar/ListToolbar.styles.d.ts.map +1 -1
  9. package/lib/components/ListToolbar/ListToolbar.styles.js +7 -7
  10. package/lib/components/ListToolbar/ListToolbar.styles.js.map +1 -1
  11. package/lib/components/Menu/Menu.d.ts +1 -1
  12. package/lib/components/Menu/Menu.d.ts.map +1 -1
  13. package/lib/components/Menu/Menu.js +4 -2
  14. package/lib/components/Menu/Menu.js.map +1 -1
  15. package/lib/components/Menu/Menu.test-ids.d.ts +1 -1
  16. package/lib/components/Menu/Menu.test-ids.d.ts.map +1 -1
  17. package/lib/components/Menu/Menu.test-ids.js +1 -1
  18. package/lib/components/Menu/Menu.test-ids.js.map +1 -1
  19. package/lib/components/Menu/Menu.types.d.ts +2 -0
  20. package/lib/components/Menu/Menu.types.d.ts.map +1 -1
  21. package/lib/components/Menu/Menu.types.js.map +1 -1
  22. package/lib/components/Popover/Popover.d.ts +1 -1
  23. package/lib/components/Popover/Popover.d.ts.map +1 -1
  24. package/lib/components/Popover/Popover.js +25 -4
  25. package/lib/components/Popover/Popover.js.map +1 -1
  26. package/lib/components/Popover/Popover.styles.d.ts +1 -0
  27. package/lib/components/Popover/Popover.styles.d.ts.map +1 -1
  28. package/lib/components/Popover/Popover.styles.js +2 -2
  29. package/lib/components/Popover/Popover.styles.js.map +1 -1
  30. package/lib/components/RadioCheck/RadioCheck.d.ts.map +1 -1
  31. package/lib/components/RadioCheck/RadioCheck.js +8 -3
  32. package/lib/components/RadioCheck/RadioCheck.js.map +1 -1
  33. package/lib/components/SkipLinks/SkipLinks.d.ts.map +1 -1
  34. package/lib/components/SkipLinks/SkipLinks.js +1 -1
  35. package/lib/components/SkipLinks/SkipLinks.js.map +1 -1
  36. package/lib/components/Tooltip/Tooltip.d.ts.map +1 -1
  37. package/lib/components/Tooltip/Tooltip.js +2 -3
  38. package/lib/components/Tooltip/Tooltip.js.map +1 -1
  39. package/lib/hooks/useEvent.js +5 -5
  40. package/lib/hooks/useEvent.js.map +1 -1
  41. package/lib/hooks/useFocusWithin.d.ts +1 -1
  42. package/lib/hooks/useFocusWithin.d.ts.map +1 -1
  43. package/lib/hooks/useFocusWithin.js +5 -3
  44. package/lib/hooks/useFocusWithin.js.map +1 -1
  45. package/lib/hooks/useOuterEvent.d.ts.map +1 -1
  46. package/lib/hooks/useOuterEvent.js +10 -4
  47. package/lib/hooks/useOuterEvent.js.map +1 -1
  48. package/lib/utils/getAllPopovers.d.ts +4 -0
  49. package/lib/utils/getAllPopovers.d.ts.map +1 -0
  50. package/lib/utils/getAllPopovers.js +19 -0
  51. package/lib/utils/getAllPopovers.js.map +1 -0
  52. package/lib/utils/index.d.ts +2 -1
  53. package/lib/utils/index.d.ts.map +1 -1
  54. package/lib/utils/index.js +2 -1
  55. package/lib/utils/index.js.map +1 -1
  56. package/lib/utils/normalizeTargets.d.ts +9 -0
  57. package/lib/utils/normalizeTargets.d.ts.map +1 -0
  58. package/lib/utils/normalizeTargets.js +17 -0
  59. package/lib/utils/normalizeTargets.js.map +1 -0
  60. package/package.json +1 -1
  61. package/lib/utils/normalizeElements.d.ts +0 -9
  62. package/lib/utils/normalizeElements.d.ts.map +0 -1
  63. package/lib/utils/normalizeElements.js +0 -14
  64. package/lib/utils/normalizeElements.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Menu.types.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Dispatch, ReactNode, Ref, RefObject, SetStateAction, MouseEvent } from 'react';\n\nimport { BaseProps, NoChildrenProp, OmitStrict, PropsWithDefaults, TestIdProp } from '../../types';\nimport { MetaListProps } from '../MetaList';\nimport type { UseActiveDescendantConfig } from '../../hooks';\n\nexport type AcceptedMouseEventElement = HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;\n\nexport interface MenuItemProps extends MenuObjectProps {\n /** The primary piece of item information as a string. */\n primary: string;\n /** Secondary info about an item. Useful for additional metadata or context. Will be overridden when ancestors are passed as a prop. */\n secondary?: MetaListProps['items'];\n /** A visual to assist identifying an item. e.g. Avatar or Icon. */\n visual?: ReactNode;\n /** A count to assist with number of associated items. */\n count?: number;\n /** An array of MenuItemProps to identify an item's ancestors by their primary value. Useful for flattened tree search results. */\n ancestors?: (MenuItemProps | MenuGroupProps)[];\n /** An array of either MenuItemProps or MenuGroupProps children. */\n items?: (MenuItemProps | MenuGroupProps)[];\n /**\n * For single or multi select menus, selected must be set true|false to render an item's radiobutton or checkbox.\n * May be set on parent or leaf items.\n */\n selected?: boolean;\n /** FUTURE SUPPORT: Use to indicate an item has a partial selection, some but not all of its descendants are selected. */\n partial?: boolean;\n /** Will render the action item as link. Only use for leaf items. */\n href?: string;\n /**\n * Provide a description for an item that will render in a Tooltip when hovering that item.\n * This should be used only for VERY SPECIFIC UX scenarios.\n */\n tooltip?: string;\n /** Use this function to identify and set item selections. Recommend leveraging top level Menu onItemClick handler. */\n onClick?: (id: MenuItemProps['id'], e: MouseEvent<AcceptedMouseEventElement>) => void;\n onExpand?: MenuItemProps['onClick'];\n /** Determines if the MenuItem will be disabled. */\n disabled?: boolean;\n role?: 'menuitem' | 'option';\n}\n\nexport interface MenuGroupProps extends MenuObjectProps {\n /** Label of the group. */\n label: string;\n /** An array of MenuItemProps children. */\n items: MenuItemProps[];\n /** List-like role to apply to group items. */\n itemRole?: MenuItemProps['role'];\n}\n\nexport type ParentMenuItemProps = MenuItemProps & { items: NonNullable<MenuItemProps['items']> };\n\nexport interface MenuListHeaderProps {\n /** Text used to indicate an expanded parent item. */\n text: string;\n /** Internal handler. */\n onClick: () => void;\n}\n\nexport interface MenuObjectProps extends TestIdProp {\n /** A unique id within the entire tree of menu items. */\n id: string;\n}\n\nexport interface MenuListProps {\n items: ParentMenuItemProps['items'];\n id?: string;\n ref?: Ref<HTMLFieldSetElement>;\n parent?: {\n el: HTMLFieldSetElement;\n item: ParentMenuItemProps;\n siblingItems: ParentMenuItemProps['items'];\n setExpandedItem: Dispatch<SetStateAction<ParentMenuItemProps | undefined>>;\n returnFocusRef: RefObject<HTMLButtonElement>;\n };\n menuRole?: 'menu' | 'listbox';\n}\n\nexport interface MenuProps extends TestIdProp, BaseProps, NoChildrenProp {\n /** An array of MenuItemProps. */\n items: (MenuItemProps | MenuGroupProps)[];\n /** ID placed on the menu's list element. */\n listId?: string;\n /**\n * Indicates intent for the menu.\n * As of now item types can not be mixed.\n * @default 'action'\n */\n mode?: 'action' | 'multi-select' | 'single-select';\n role?: 'menu' | 'listbox';\n /**\n * Always recommended to go for default drill-down variant for better accessibility.\n * When flyout variant is selected, its recommended not to have more than 1 nested level\n * @default 'drill-down'\n */\n variant?: 'drill-down' | 'flyout';\n /**\n * Use to accent(make bold) portions of the primary text.\n * Useful for filter/search results.\n * If passed a function, that function will be passed each items primary text.\n */\n accent?: RegExp | ((primary: string) => RegExp);\n /**\n * Item height will grow or shrink based on item count.\n * Use this indicate at which item the menu should begin its scroll.\n * @default 7\n */\n scrollAt?: number;\n /** A simple message to display when there are no items. */\n emptyText?: string;\n /**\n * A top level handler for all item clicks.\n * This is convenient way to detect which item was clicked to react by updating state or performing an action.\n * Both an item's onClick and this will be called if both are passed.\n */\n onItemClick?: MenuItemProps['onClick'];\n /**\n * A top level handler for all item pseudo focus events.\n * This is convenient way to detect which item is active to react by updating state or performing an action.\n */\n onItemActive?: (id: MenuItemProps['id']) => void;\n /**\n * A top level handler for clicks on parent items to expand their child items.\n * This is convenient way to detect when an item is expanded.\n * For lazy loading this would be a good time to set an item's items.\n * Both an item's onExpand and this will be called if both are passed.\n */\n onItemExpand?: MenuProps['onItemClick'];\n /** A top level handler for capturing when nested items have been collapsed / \"back\" button clicks. */\n onItemCollapse?: (id: MenuItemProps['id']) => void;\n /**\n * Show a Progress indicator at the end of a list where newly loaded items will be appended.\n * @default false\n */\n loading?: boolean;\n /** Callback to fetch more items */\n loadMore?: (id?: MenuItemProps['id']) => void;\n /** Ref placed on the root menu element. */\n ref?: Ref<HTMLDivElement>;\n /** HTML ID. */\n id?: string;\n /**\n * Currently highlighted item.\n * Setting currentItemId assumes synthetic focus is being controlled entirely by the containing component,\n * and unbinds menu useActiveDescendant keydown controls.\n * @deprecated\n */\n currentItemId?: string;\n /** Override for default active-descendant focus control element in menu */\n focusControlEl?: HTMLElement | undefined;\n /** Header region. */\n header?: ReactNode;\n /** Footer region. */\n footer?: ReactNode;\n /** Pauses evaluation of menu active descendants while true */\n pauseDescendantEvaluation?: UseActiveDescendantConfig['pauseDescendantEvaluation'];\n /**\n * Flag to indicate that Right/Left arrow navigation for expand/collapse parent items is not available.\n * Will accept enter if not selectable parent, otherwise falls back to shift + space.\n */\n arrowNavigationUnsupported?: boolean;\n /** Additional information to announce to screen reader users. Read before menu navigation instructions. */\n 'aria-describedby'?: string;\n /** Label for menu or listbox element */\n 'aria-label'?: string;\n}\n\ntype MenuPropsWithDefaults = PropsWithDefaults<\n MenuProps,\n 'mode' | 'variant' | 'scrollAt' | 'loading'\n>;\nexport interface MenuContextProps extends OmitStrict<MenuPropsWithDefaults, 'ref' | 'items'> {\n radioName?: string;\n componentId: string;\n pushFlyoutId: (id: string) => void;\n flyOutActiveIdStack: string[];\n focusControl: HTMLElement | null;\n updateActiveDescendants: (options?: { preventScroll?: boolean }) => void;\n setFocusDescendant: Dispatch<SetStateAction<HTMLElement | null>>;\n setFocusReturnEl: Dispatch<SetStateAction<HTMLElement | null | undefined>>;\n getScopedItemId: (itemId: string) => string;\n updateParentDescendantStack?: (item: HTMLElement | null) => void;\n}\n\nexport interface NavItemsListProps {\n listRef: RefObject<HTMLUListElement>;\n cycle?: boolean;\n}\n"]}
1
+ {"version":3,"file":"Menu.types.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Dispatch, ReactNode, Ref, RefObject, SetStateAction, MouseEvent } from 'react';\n\nimport { BaseProps, NoChildrenProp, OmitStrict, PropsWithDefaults, TestIdProp } from '../../types';\nimport { MetaListProps } from '../MetaList';\nimport type { UseActiveDescendantConfig } from '../../hooks';\n\nexport type AcceptedMouseEventElement = HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;\n\nexport interface MenuItemProps extends MenuObjectProps {\n /** The primary piece of item information as a string. */\n primary: string;\n /** Secondary info about an item. Useful for additional metadata or context. Will be overridden when ancestors are passed as a prop. */\n secondary?: MetaListProps['items'];\n /** A visual to assist identifying an item. e.g. Avatar or Icon. */\n visual?: ReactNode;\n /** A count to assist with number of associated items. */\n count?: number;\n /** An array of MenuItemProps to identify an item's ancestors by their primary value. Useful for flattened tree search results. */\n ancestors?: (MenuItemProps | MenuGroupProps)[];\n /** An array of either MenuItemProps or MenuGroupProps children. */\n items?: (MenuItemProps | MenuGroupProps)[];\n /**\n * For single or multi select menus, selected must be set true|false to render an item's radiobutton or checkbox.\n * May be set on parent or leaf items.\n */\n selected?: boolean;\n /** FUTURE SUPPORT: Use to indicate an item has a partial selection, some but not all of its descendants are selected. */\n partial?: boolean;\n /** Will render the action item as link. Only use for leaf items. */\n href?: string;\n /**\n * Provide a description for an item that will render in a Tooltip when hovering that item.\n * This should be used only for VERY SPECIFIC UX scenarios.\n */\n tooltip?: string;\n /** Use this function to identify and set item selections. Recommend leveraging top level Menu onItemClick handler. */\n onClick?: (id: MenuItemProps['id'], e: MouseEvent<AcceptedMouseEventElement>) => void;\n onExpand?: MenuItemProps['onClick'];\n /** Determines if the MenuItem will be disabled. */\n disabled?: boolean;\n role?: 'menuitem' | 'option';\n}\n\nexport interface MenuGroupProps extends MenuObjectProps {\n /** Label of the group. */\n label: string;\n /** An array of MenuItemProps children. */\n items: MenuItemProps[];\n /** List-like role to apply to group items. */\n itemRole?: MenuItemProps['role'];\n}\n\nexport type ParentMenuItemProps = MenuItemProps & { items: NonNullable<MenuItemProps['items']> };\n\nexport interface MenuListHeaderProps {\n /** Text used to indicate an expanded parent item. */\n text: string;\n /** Internal handler. */\n onClick: () => void;\n}\n\nexport interface MenuObjectProps extends TestIdProp {\n /** A unique id within the entire tree of menu items. */\n id: string;\n}\n\nexport interface MenuListProps {\n items: ParentMenuItemProps['items'];\n id?: string;\n ref?: Ref<HTMLFieldSetElement>;\n parent?: {\n el: HTMLFieldSetElement;\n item: ParentMenuItemProps;\n siblingItems: ParentMenuItemProps['items'];\n setExpandedItem: Dispatch<SetStateAction<ParentMenuItemProps | undefined>>;\n returnFocusRef: RefObject<HTMLButtonElement>;\n };\n menuRole?: 'menu' | 'listbox';\n}\n\nexport interface MenuProps extends TestIdProp, BaseProps, NoChildrenProp {\n /** An array of MenuItemProps. */\n items: (MenuItemProps | MenuGroupProps)[];\n /** Renders a create new action below the menu. */\n onCreateNew?: () => void;\n /** ID placed on the menu's list element. */\n listId?: string;\n /**\n * Indicates intent for the menu.\n * As of now item types can not be mixed.\n * @default 'action'\n */\n mode?: 'action' | 'multi-select' | 'single-select';\n role?: 'menu' | 'listbox';\n /**\n * Always recommended to go for default drill-down variant for better accessibility.\n * When flyout variant is selected, its recommended not to have more than 1 nested level\n * @default 'drill-down'\n */\n variant?: 'drill-down' | 'flyout';\n /**\n * Use to accent(make bold) portions of the primary text.\n * Useful for filter/search results.\n * If passed a function, that function will be passed each items primary text.\n */\n accent?: RegExp | ((primary: string) => RegExp);\n /**\n * Item height will grow or shrink based on item count.\n * Use this indicate at which item the menu should begin its scroll.\n * @default 7\n */\n scrollAt?: number;\n /** A simple message to display when there are no items. */\n emptyText?: string;\n /**\n * A top level handler for all item clicks.\n * This is convenient way to detect which item was clicked to react by updating state or performing an action.\n * Both an item's onClick and this will be called if both are passed.\n */\n onItemClick?: MenuItemProps['onClick'];\n /**\n * A top level handler for all item pseudo focus events.\n * This is convenient way to detect which item is active to react by updating state or performing an action.\n */\n onItemActive?: (id: MenuItemProps['id']) => void;\n /**\n * A top level handler for clicks on parent items to expand their child items.\n * This is convenient way to detect when an item is expanded.\n * For lazy loading this would be a good time to set an item's items.\n * Both an item's onExpand and this will be called if both are passed.\n */\n onItemExpand?: MenuProps['onItemClick'];\n /** A top level handler for capturing when nested items have been collapsed / \"back\" button clicks. */\n onItemCollapse?: (id: MenuItemProps['id']) => void;\n /**\n * Show a Progress indicator at the end of a list where newly loaded items will be appended.\n * @default false\n */\n loading?: boolean;\n /** Callback to fetch more items */\n loadMore?: (id?: MenuItemProps['id']) => void;\n /** Ref placed on the root menu element. */\n ref?: Ref<HTMLDivElement>;\n /** HTML ID. */\n id?: string;\n /**\n * Currently highlighted item.\n * Setting currentItemId assumes synthetic focus is being controlled entirely by the containing component,\n * and unbinds menu useActiveDescendant keydown controls.\n * @deprecated\n */\n currentItemId?: string;\n /** Override for default active-descendant focus control element in menu */\n focusControlEl?: HTMLElement | undefined;\n /** Header region. */\n header?: ReactNode;\n /** Footer region. */\n footer?: ReactNode;\n /** Pauses evaluation of menu active descendants while true */\n pauseDescendantEvaluation?: UseActiveDescendantConfig['pauseDescendantEvaluation'];\n /**\n * Flag to indicate that Right/Left arrow navigation for expand/collapse parent items is not available.\n * Will accept enter if not selectable parent, otherwise falls back to shift + space.\n */\n arrowNavigationUnsupported?: boolean;\n /** Additional information to announce to screen reader users. Read before menu navigation instructions. */\n 'aria-describedby'?: string;\n /** Label for menu or listbox element */\n 'aria-label'?: string;\n}\n\ntype MenuPropsWithDefaults = PropsWithDefaults<\n MenuProps,\n 'mode' | 'variant' | 'scrollAt' | 'loading'\n>;\nexport interface MenuContextProps extends OmitStrict<MenuPropsWithDefaults, 'ref' | 'items'> {\n radioName?: string;\n componentId: string;\n pushFlyoutId: (id: string) => void;\n flyOutActiveIdStack: string[];\n focusControl: HTMLElement | null;\n updateActiveDescendants: (options?: { preventScroll?: boolean }) => void;\n setFocusDescendant: Dispatch<SetStateAction<HTMLElement | null>>;\n setFocusReturnEl: Dispatch<SetStateAction<HTMLElement | null | undefined>>;\n getScopedItemId: (itemId: string) => string;\n updateParentDescendantStack?: (item: HTMLElement | null) => void;\n}\n\nexport interface NavItemsListProps {\n listRef: RefObject<HTMLUListElement>;\n cycle?: boolean;\n}\n"]}
@@ -14,7 +14,7 @@ export interface PopoverProps<Modifiers extends string = string> extends BasePro
14
14
  show?: boolean;
15
15
  /**
16
16
  * If true, the Popover will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).
17
- * @default false
17
+ * @default true
18
18
  */
19
19
  portal?: boolean | ConfigurationProps['portalTarget'];
20
20
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,GAAG,EAEH,YAAY,EAEZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAStD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9C,MAAM,WAAW,YAAY,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS;IAChF,2IAA2I;IAC3I,MAAM,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACtD;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC9C;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yGAAyG;IACzG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAQD,QAAA,MAAM,OAAO,EAAE,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,EAC/C,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,GAAG,YAAY,KAC1C,YAAY,GAAG,IAuNlB,CAAC;AAEH,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,GAAG,EAEH,YAAY,EAEZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAStD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtD,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9C,MAAM,WAAW,YAAY,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS;IAChF,2IAA2I;IAC3I,MAAM,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACtD;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC9C;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yGAAyG;IACzG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAQD,QAAA,MAAM,OAAO,EAAE,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,EAC/C,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,GAAG,YAAY,KAC1C,YAAY,GAAG,IAkPlB,CAAC;AAEH,eAAe,OAAO,CAAC"}
@@ -3,7 +3,8 @@ import { forwardRef, useContext, useRef, useEffect, useMemo, useState, useLayout
3
3
  import { createPortal } from 'react-dom';
4
4
  import { usePopper } from 'react-popper';
5
5
  import { useAfterInitialEffect, useConfiguration, useConsolidatedRef, useElement, useUID } from '../../hooks';
6
- import { getRelativeOffset, windowIsAvailable } from '../../utils';
6
+ import { getRelativeOffset, popoverMap, windowIsAvailable } from '../../utils';
7
+ import { BackdropContext } from '../Backdrop/Backdrop';
7
8
  import { PopoverManagerContext } from './PopoverContext';
8
9
  import { StyledPopover, StyledPopoverArrow } from './Popover.styles';
9
10
  import { placeAndContain } from './modifiers';
@@ -12,8 +13,9 @@ const delays = {
12
13
  short: 500,
13
14
  long: 1000
14
15
  };
15
- const Popover = forwardRef(function Popover({ show = true, portal = false, target, placement = 'bottom', strategy = 'fixed', style, modifiers = [], arrow = false, groupId, showDelay = 'none', hideDelay = 'none', hideOnTargetHidden = false, children, onHide, ...restProps }, ref) {
16
+ const Popover = forwardRef(function Popover({ show = true, portal = true, target, placement = 'bottom', strategy = 'fixed', style, modifiers = [], arrow = false, groupId, showDelay = 'none', hideDelay = 'none', hideOnTargetHidden = false, children, onHide, ...restProps }, ref) {
16
17
  const { portalTarget: configurationPortal } = useConfiguration();
18
+ const { el: backdropPortal } = useContext(BackdropContext);
17
19
  const { checkActive, setActive, popovers } = useContext(PopoverManagerContext);
18
20
  const [popperEl, setPopperEl] = useElement();
19
21
  const popperRef = useConsolidatedRef(ref, setPopperEl);
@@ -23,8 +25,9 @@ const Popover = forwardRef(function Popover({ show = true, portal = false, targe
23
25
  const [showPopover, setShowPopover] = useState(show);
24
26
  const timeout = useRef();
25
27
  const uid = useUID();
28
+ const pointerId = useUID();
26
29
  const resolvedTarget = target instanceof Element ? target : target?.contextElement;
27
- const portalTarget = typeof portal === 'boolean' ? configurationPortal : portal;
30
+ const portalTarget = typeof portal === 'boolean' ? backdropPortal ?? configurationPortal : portal;
28
31
  const memoedModifiers = useMemo(() => {
29
32
  const flipEnabled = !!modifiers
30
33
  .slice()
@@ -170,7 +173,25 @@ const Popover = forwardRef(function Popover({ show = true, portal = false, targe
170
173
  setShowPopover(false);
171
174
  }
172
175
  }, [groupId ? popovers[groupId] : undefined]);
173
- const content = (_jsxs(StyledPopover, { ...restProps, offset: offset, ref: popperRef, style: { ...style, ...styles.popper }, ...attributes.popper, children: [arrow && _jsx(StyledPopoverArrow, { ref: arrowRef, style: { ...styles.arrow } }), children] }));
176
+ useEffect(() => {
177
+ if (!portal || !resolvedTarget)
178
+ return;
179
+ if (!popoverMap.has(resolvedTarget)) {
180
+ popoverMap.set(resolvedTarget, new Set());
181
+ }
182
+ resolvedTarget.toggleAttribute('data-popover-target', true);
183
+ popoverMap.get(resolvedTarget).add(pointerId);
184
+ return () => {
185
+ if (!popoverMap.has(resolvedTarget))
186
+ return;
187
+ popoverMap.get(resolvedTarget).delete(pointerId);
188
+ if (popoverMap.get(resolvedTarget).size === 0) {
189
+ popoverMap.delete(resolvedTarget);
190
+ resolvedTarget.removeAttribute('data-popover-target');
191
+ }
192
+ };
193
+ }, [portal, resolvedTarget, pointerId]);
194
+ const content = (_jsxs(StyledPopover, { ...restProps, "data-popover-id": pointerId, portal: !!(portal && portalTarget), offset: offset, ref: popperRef, style: { ...style, ...styles.popper }, ...attributes.popper, children: [arrow && _jsx(StyledPopoverArrow, { ref: arrowRef, style: { ...styles.arrow } }), children] }));
174
195
  if (!target || !showPopover || (groupId && !checkActive(uid, groupId)))
175
196
  return null;
176
197
  return portal && portalTarget ? createPortal(content, portalTarget) : content;
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useContext,\n PropsWithoutRef,\n Ref,\n CSSProperties,\n ReactElement,\n useRef,\n ReactNode,\n useEffect,\n useMemo,\n useState,\n useLayoutEffect\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper, PopperProps } from 'react-popper';\nimport { VirtualElement } from '@popperjs/core';\nimport { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport {\n useAfterInitialEffect,\n useConfiguration,\n useConsolidatedRef,\n useElement,\n useUID\n} from '../../hooks';\nimport { getRelativeOffset, windowIsAvailable } from '../../utils';\nimport { ConfigurationProps } from '../Configuration';\n\nimport { PopoverManagerContext } from './PopoverContext';\nimport { StyledPopover, StyledPopoverArrow } from './Popover.styles';\nimport { placeAndContain } from './modifiers';\n\nexport type Delay = 'none' | 'short' | 'long';\nexport interface PopoverProps<Modifiers extends string = string> extends BaseProps {\n /** The DOM element or [virtual element](https://popper.js.org/docs/v2/virtual-elements) that the Popover is positioned in reference to. */\n target: Element | VirtualElement | null;\n /**\n * If true, the Popover will be visible.\n * @default true\n */\n show?: boolean;\n /**\n * If true, the Popover will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n * @default false\n */\n portal?: boolean | ConfigurationProps['portalTarget'];\n /**\n * Delay on showing the Popover.\n * @default 'none'\n */\n showDelay?: Delay;\n /**\n * Delay on hiding the Popover.\n * @default 'none'\n */\n hideDelay?: Delay;\n /**\n * [React Popper Placement](https://popper.js.org/react-popper/v2/render-props/#placement)\n * @default 'bottom'\n */\n placement?: PopperProps<Modifiers>['placement'];\n /**\n * [React Popper Strategy](https://popper.js.org/react-popper/v2/render-props/#strategy)\n * @default 'absolute'\n */\n strategy?: PopperProps<Modifiers>['strategy'];\n /**\n * [React Popper Modifiers](https://popper.js.org/react-popper/v2/render-props/#modifiers)\n * @default []\n */\n modifiers?: PopperProps<Modifiers>['modifiers'];\n /**\n * If true, an arrow will visually identify from which element the Popover is rendered.\n * @default false\n */\n arrow?: boolean;\n /** The group that the Popover belongs to. Popovers in the same group will be closed when others open. */\n groupId?: string;\n /**\n * If true, the Popover will be visibly hidden when its target leaves the viewport.\n * @default false\n */\n hideOnTargetHidden?: boolean;\n /** Callback that runs when the popover is hidden */\n onHide?: () => void;\n /** The content of the Popover. */\n children: ReactNode;\n /** The ref of the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst delays = {\n none: 0,\n short: 500,\n long: 1000\n};\n\nconst Popover: <Modifiers extends string = string>(\n props: PopoverProps<Modifiers> & ForwardProps\n) => ReactElement | null = forwardRef(function Popover(\n {\n show = true,\n portal = false,\n target,\n placement = 'bottom',\n strategy = 'fixed',\n style,\n modifiers = [],\n arrow = false,\n groupId,\n showDelay = 'none',\n hideDelay = 'none',\n hideOnTargetHidden = false,\n children,\n onHide,\n ...restProps\n }: PropsWithoutRef<PopoverProps> & { style?: CSSProperties },\n ref: PopoverProps['ref']\n) {\n const { portalTarget: configurationPortal } = useConfiguration();\n const { checkActive, setActive, popovers } = useContext(PopoverManagerContext);\n const [popperEl, setPopperEl] = useElement<HTMLDivElement>();\n const popperRef = useConsolidatedRef<HTMLDivElement>(ref, setPopperEl);\n const arrowRef = useRef<HTMLDivElement>(null);\n const forceUpdateRef = useRef<() => void>();\n const initialOffset = useRef<Pick<DOMRect, 'x' | 'y'> | null>(null);\n const [showPopover, setShowPopover] = useState(show);\n const timeout = useRef<number>();\n const uid = useUID();\n\n const resolvedTarget = target instanceof Element ? target : target?.contextElement;\n const portalTarget = typeof portal === 'boolean' ? configurationPortal : portal;\n\n const memoedModifiers = useMemo(() => {\n const flipEnabled = !!modifiers\n .slice()\n .reverse()\n .find(modifier => modifier.name === 'flip' && modifier.enabled !== undefined)?.enabled;\n\n return [\n {\n name: 'computeStyles',\n options: {\n gpuAcceleration: false\n }\n },\n {\n name: 'offset',\n options: {\n offset: [0, arrow ? 5.5 : 2]\n }\n },\n { name: 'hide', enabled: hideOnTargetHidden },\n { name: 'arrow', enabled: arrow, options: { element: arrowRef.current } },\n {\n name: 'preventOverflow',\n options: {\n tether: !modifiers.find(m => m.name === 'sameWidth'),\n padding: 16\n }\n },\n {\n ...placeAndContain,\n enabled: !flipEnabled\n },\n ...modifiers\n ];\n }, [arrow, hideOnTargetHidden, modifiers]);\n\n const offset = useMemo(() => {\n const offsetModifier = [...memoedModifiers]\n .reverse()\n .find(m => m.name === 'offset' && m.enabled !== false) as OffsetModifier | undefined;\n return Array.isArray(offsetModifier?.options?.offset)\n ? offsetModifier?.options?.offset[1] ?? 0\n : 0;\n }, [memoedModifiers]);\n\n const { styles, attributes, forceUpdate } = usePopper(target, popperEl, {\n placement,\n strategy,\n modifiers: memoedModifiers\n });\n\n if (forceUpdate) forceUpdateRef.current = forceUpdate;\n\n // Setter-less useState to avoid re-running these constructors on every render with useRef.\n const [ac] = useState(() => new AbortController());\n const [observedSet] = useState(() => new WeakSet<Element>());\n const [ro] = useState(\n () =>\n new ResizeObserver(entries => {\n let updateQueued = false;\n\n for (const { target: resizeTarget } of entries) {\n // Ignore the first ResizeObserver event for each element since ResizeObserver always fires once when calling .observe().\n if (!observedSet.has(resizeTarget)) {\n observedSet.add(resizeTarget);\n } else if (!updateQueued) {\n updateQueued = true;\n\n if (!ac.signal.aborted) {\n forceUpdateRef.current?.();\n }\n }\n }\n })\n );\n\n useEffect(() => {\n return () => {\n ac.abort();\n ro.disconnect();\n };\n }, []);\n\n useEffect(() => {\n if (!popperEl) return;\n\n ro.observe(popperEl);\n\n return () => {\n ro.unobserve(popperEl);\n };\n }, [popperEl]);\n\n useEffect(() => {\n if (!resolvedTarget) return;\n\n ro.observe(resolvedTarget);\n\n return () => {\n ro.unobserve(resolvedTarget);\n };\n }, [resolvedTarget]);\n\n useLayoutEffect(() => {\n if (resolvedTarget) {\n initialOffset.current = getRelativeOffset(resolvedTarget, document.documentElement);\n } else {\n initialOffset.current = null;\n }\n }, [resolvedTarget]);\n\n useEffect(() => {\n if (!showPopover || !resolvedTarget) return;\n\n let rafId: ReturnType<typeof requestAnimationFrame>;\n\n const checkCoords = () => {\n if (resolvedTarget && initialOffset.current) {\n const newOffset = getRelativeOffset(resolvedTarget, document.documentElement);\n\n if (initialOffset.current.x !== newOffset.x || initialOffset.current.y !== newOffset.y) {\n initialOffset.current = newOffset;\n forceUpdateRef.current?.();\n } else {\n rafId = requestAnimationFrame(checkCoords);\n }\n }\n };\n\n rafId = requestAnimationFrame(checkCoords);\n\n return () => {\n cancelAnimationFrame(rafId);\n };\n }, [showPopover, resolvedTarget]);\n\n useEffect(() => {\n if (groupId && show) setActive(uid, groupId);\n\n if (windowIsAvailable) {\n if (timeout.current) clearTimeout(timeout.current);\n timeout.current = window.setTimeout(() => {\n setShowPopover(show);\n }, delays[show ? showDelay : hideDelay]);\n } else {\n setShowPopover(show);\n }\n }, [show]);\n\n useEffect(() => {\n return () => clearTimeout(timeout.current);\n }, []);\n\n useAfterInitialEffect(() => {\n if (!showPopover) {\n onHide?.();\n }\n }, [showPopover]);\n\n useEffect(() => {\n if (groupId && popovers[groupId] && popovers[groupId] !== uid) {\n setShowPopover(false);\n }\n }, [groupId ? popovers[groupId] : undefined]);\n\n const content = (\n <StyledPopover\n {...restProps}\n offset={offset}\n ref={popperRef}\n style={{ ...style, ...styles.popper }}\n {...attributes.popper}\n >\n {arrow && <StyledPopoverArrow ref={arrowRef} style={{ ...styles.arrow }} />}\n {children}\n </StyledPopover>\n );\n\n if (!target || !showPopover || (groupId && !checkActive(uid, groupId))) return null;\n\n return portal && portalTarget ? createPortal(content, portalTarget) : content;\n});\n\nexport default Popover;\n"]}
1
+ {"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useContext,\n PropsWithoutRef,\n Ref,\n CSSProperties,\n ReactElement,\n useRef,\n ReactNode,\n useEffect,\n useMemo,\n useState,\n useLayoutEffect\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper, PopperProps } from 'react-popper';\nimport { VirtualElement } from '@popperjs/core';\nimport { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport {\n useAfterInitialEffect,\n useConfiguration,\n useConsolidatedRef,\n useElement,\n useUID\n} from '../../hooks';\nimport { getRelativeOffset, popoverMap, windowIsAvailable } from '../../utils';\nimport { ConfigurationProps } from '../Configuration';\nimport { BackdropContext } from '../Backdrop/Backdrop';\n\nimport { PopoverManagerContext } from './PopoverContext';\nimport { StyledPopover, StyledPopoverArrow } from './Popover.styles';\nimport { placeAndContain } from './modifiers';\n\nexport type Delay = 'none' | 'short' | 'long';\nexport interface PopoverProps<Modifiers extends string = string> extends BaseProps {\n /** The DOM element or [virtual element](https://popper.js.org/docs/v2/virtual-elements) that the Popover is positioned in reference to. */\n target: Element | VirtualElement | null;\n /**\n * If true, the Popover will be visible.\n * @default true\n */\n show?: boolean;\n /**\n * If true, the Popover will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n * @default true\n */\n portal?: boolean | ConfigurationProps['portalTarget'];\n /**\n * Delay on showing the Popover.\n * @default 'none'\n */\n showDelay?: Delay;\n /**\n * Delay on hiding the Popover.\n * @default 'none'\n */\n hideDelay?: Delay;\n /**\n * [React Popper Placement](https://popper.js.org/react-popper/v2/render-props/#placement)\n * @default 'bottom'\n */\n placement?: PopperProps<Modifiers>['placement'];\n /**\n * [React Popper Strategy](https://popper.js.org/react-popper/v2/render-props/#strategy)\n * @default 'absolute'\n */\n strategy?: PopperProps<Modifiers>['strategy'];\n /**\n * [React Popper Modifiers](https://popper.js.org/react-popper/v2/render-props/#modifiers)\n * @default []\n */\n modifiers?: PopperProps<Modifiers>['modifiers'];\n /**\n * If true, an arrow will visually identify from which element the Popover is rendered.\n * @default false\n */\n arrow?: boolean;\n /** The group that the Popover belongs to. Popovers in the same group will be closed when others open. */\n groupId?: string;\n /**\n * If true, the Popover will be visibly hidden when its target leaves the viewport.\n * @default false\n */\n hideOnTargetHidden?: boolean;\n /** Callback that runs when the popover is hidden */\n onHide?: () => void;\n /** The content of the Popover. */\n children: ReactNode;\n /** The ref of the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst delays = {\n none: 0,\n short: 500,\n long: 1000\n};\n\nconst Popover: <Modifiers extends string = string>(\n props: PopoverProps<Modifiers> & ForwardProps\n) => ReactElement | null = forwardRef(function Popover(\n {\n show = true,\n portal = true,\n target,\n placement = 'bottom',\n strategy = 'fixed',\n style,\n modifiers = [],\n arrow = false,\n groupId,\n showDelay = 'none',\n hideDelay = 'none',\n hideOnTargetHidden = false,\n children,\n onHide,\n ...restProps\n }: PropsWithoutRef<PopoverProps> & { style?: CSSProperties },\n ref: PopoverProps['ref']\n) {\n const { portalTarget: configurationPortal } = useConfiguration();\n const { el: backdropPortal } = useContext(BackdropContext);\n const { checkActive, setActive, popovers } = useContext(PopoverManagerContext);\n const [popperEl, setPopperEl] = useElement<HTMLDivElement>();\n const popperRef = useConsolidatedRef<HTMLDivElement>(ref, setPopperEl);\n const arrowRef = useRef<HTMLDivElement>(null);\n const forceUpdateRef = useRef<() => void>();\n const initialOffset = useRef<Pick<DOMRect, 'x' | 'y'> | null>(null);\n const [showPopover, setShowPopover] = useState(show);\n const timeout = useRef<number>();\n const uid = useUID();\n const pointerId = useUID();\n\n const resolvedTarget = target instanceof Element ? target : target?.contextElement;\n const portalTarget = typeof portal === 'boolean' ? backdropPortal ?? configurationPortal : portal;\n\n const memoedModifiers = useMemo(() => {\n const flipEnabled = !!modifiers\n .slice()\n .reverse()\n .find(modifier => modifier.name === 'flip' && modifier.enabled !== undefined)?.enabled;\n\n return [\n {\n name: 'computeStyles',\n options: {\n gpuAcceleration: false\n }\n },\n {\n name: 'offset',\n options: {\n offset: [0, arrow ? 5.5 : 2]\n }\n },\n { name: 'hide', enabled: hideOnTargetHidden },\n { name: 'arrow', enabled: arrow, options: { element: arrowRef.current } },\n {\n name: 'preventOverflow',\n options: {\n tether: !modifiers.find(m => m.name === 'sameWidth'),\n padding: 16\n }\n },\n {\n ...placeAndContain,\n enabled: !flipEnabled\n },\n ...modifiers\n ];\n }, [arrow, hideOnTargetHidden, modifiers]);\n\n const offset = useMemo(() => {\n const offsetModifier = [...memoedModifiers]\n .reverse()\n .find(m => m.name === 'offset' && m.enabled !== false) as OffsetModifier | undefined;\n return Array.isArray(offsetModifier?.options?.offset)\n ? offsetModifier?.options?.offset[1] ?? 0\n : 0;\n }, [memoedModifiers]);\n\n const { styles, attributes, forceUpdate } = usePopper(target, popperEl, {\n placement,\n strategy,\n modifiers: memoedModifiers\n });\n\n if (forceUpdate) forceUpdateRef.current = forceUpdate;\n\n // Setter-less useState to avoid re-running these constructors on every render with useRef.\n const [ac] = useState(() => new AbortController());\n const [observedSet] = useState(() => new WeakSet<Element>());\n const [ro] = useState(\n () =>\n new ResizeObserver(entries => {\n let updateQueued = false;\n\n for (const { target: resizeTarget } of entries) {\n // Ignore the first ResizeObserver event for each element since ResizeObserver always fires once when calling .observe().\n if (!observedSet.has(resizeTarget)) {\n observedSet.add(resizeTarget);\n } else if (!updateQueued) {\n updateQueued = true;\n\n if (!ac.signal.aborted) {\n forceUpdateRef.current?.();\n }\n }\n }\n })\n );\n\n useEffect(() => {\n return () => {\n ac.abort();\n ro.disconnect();\n };\n }, []);\n\n useEffect(() => {\n if (!popperEl) return;\n\n ro.observe(popperEl);\n\n return () => {\n ro.unobserve(popperEl);\n };\n }, [popperEl]);\n\n useEffect(() => {\n if (!resolvedTarget) return;\n\n ro.observe(resolvedTarget);\n\n return () => {\n ro.unobserve(resolvedTarget);\n };\n }, [resolvedTarget]);\n\n useLayoutEffect(() => {\n if (resolvedTarget) {\n initialOffset.current = getRelativeOffset(resolvedTarget, document.documentElement);\n } else {\n initialOffset.current = null;\n }\n }, [resolvedTarget]);\n\n useEffect(() => {\n if (!showPopover || !resolvedTarget) return;\n\n let rafId: ReturnType<typeof requestAnimationFrame>;\n\n const checkCoords = () => {\n if (resolvedTarget && initialOffset.current) {\n const newOffset = getRelativeOffset(resolvedTarget, document.documentElement);\n\n if (initialOffset.current.x !== newOffset.x || initialOffset.current.y !== newOffset.y) {\n initialOffset.current = newOffset;\n forceUpdateRef.current?.();\n } else {\n rafId = requestAnimationFrame(checkCoords);\n }\n }\n };\n\n rafId = requestAnimationFrame(checkCoords);\n\n return () => {\n cancelAnimationFrame(rafId);\n };\n }, [showPopover, resolvedTarget]);\n\n useEffect(() => {\n if (groupId && show) setActive(uid, groupId);\n\n if (windowIsAvailable) {\n if (timeout.current) clearTimeout(timeout.current);\n timeout.current = window.setTimeout(() => {\n setShowPopover(show);\n }, delays[show ? showDelay : hideDelay]);\n } else {\n setShowPopover(show);\n }\n }, [show]);\n\n useEffect(() => {\n return () => clearTimeout(timeout.current);\n }, []);\n\n useAfterInitialEffect(() => {\n if (!showPopover) {\n onHide?.();\n }\n }, [showPopover]);\n\n useEffect(() => {\n if (groupId && popovers[groupId] && popovers[groupId] !== uid) {\n setShowPopover(false);\n }\n }, [groupId ? popovers[groupId] : undefined]);\n\n useEffect(() => {\n if (!portal || !resolvedTarget) return;\n\n if (!popoverMap.has(resolvedTarget)) {\n popoverMap.set(resolvedTarget, new Set());\n }\n\n resolvedTarget.toggleAttribute('data-popover-target', true);\n\n popoverMap.get(resolvedTarget)!.add(pointerId);\n\n return () => {\n if (!popoverMap.has(resolvedTarget)) return;\n\n popoverMap.get(resolvedTarget)!.delete(pointerId);\n\n if (popoverMap.get(resolvedTarget)!.size === 0) {\n popoverMap.delete(resolvedTarget);\n resolvedTarget.removeAttribute('data-popover-target');\n }\n };\n }, [portal, resolvedTarget, pointerId]);\n\n const content = (\n <StyledPopover\n {...restProps}\n data-popover-id={pointerId}\n portal={!!(portal && portalTarget)}\n offset={offset}\n ref={popperRef}\n style={{ ...style, ...styles.popper }}\n {...attributes.popper}\n >\n {arrow && <StyledPopoverArrow ref={arrowRef} style={{ ...styles.arrow }} />}\n {children}\n </StyledPopover>\n );\n\n if (!target || !showPopover || (groupId && !checkActive(uid, groupId))) return null;\n\n return portal && portalTarget ? createPortal(content, portalTarget) : content;\n});\n\nexport default Popover;\n"]}
@@ -1,5 +1,6 @@
1
1
  export declare const StyledPopoverArrow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
2
2
  export declare const StyledPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
3
3
  offset?: number | undefined;
4
+ portal?: boolean | undefined;
4
5
  }, never>;
5
6
  //# sourceMappingURL=Popover.styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,yGAW9B,CAAC;AAIF,eAAO,MAAM,aAAa;;SA4GzB,CAAC"}
1
+ {"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,yGAW9B,CAAC;AAIF,eAAO,MAAM,aAAa;;;SA6GzB,CAAC"}
@@ -13,14 +13,14 @@ export const StyledPopoverArrow = styled.div `
13
13
  }
14
14
  `;
15
15
  StyledPopoverArrow.defaultProps = defaultThemeProp;
16
- export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': borderRadius, 'z-index': { popover: zIndex }, shadow: { high } }, components: { card: { background }, 'form-control': { 'border-radius': formControlBorderRadius } } }, offset }) => {
16
+ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': borderRadius, 'z-index': { popover: popoverZIndex, backdrop: backdropZIndex }, shadow: { high } }, components: { card: { background }, 'form-control': { 'border-radius': formControlBorderRadius } } }, portal, offset }) => {
17
17
  return css `
18
18
  /*
19
19
  Margin should never be used with Popper.
20
20
  https://popper.js.org/docs/v2/migration-guide/#4-remove-all-css-margins
21
21
  */
22
22
  margin: 0 !important;
23
- z-index: ${zIndex};
23
+ z-index: ${portal ? backdropZIndex - 1 : popoverZIndex};
24
24
  background-color: ${background};
25
25
  border-radius: calc(${formControlBorderRadius} * ${borderRadius});
26
26
  box-shadow: ${high};
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.styles.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;CAW3C,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,YAAY,EAC7B,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC9B,MAAM,EAAE,EAAE,IAAI,EAAE,EACjB,EACD,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,UAAU,EAAE,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,uBAAuB,EAAE,EAC7D,EACF,EACD,MAAM,EACP,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;;iBAMG,MAAM;0BACG,UAAU;4BACR,uBAAuB,MAAM,YAAY;oBACjD,IAAI;;;;;;;;YAQZ,kBAAkB;;;;+CAIiB,YAAY;;;;;;;oBAOvC,MAAM;qBACL,MAAM;;;;;;;YAOf,kBAAkB;;;;2CAIa,YAAY;;;;;;;oBAOnC,MAAM;kBACR,MAAM;;;;;;;YAOZ,kBAAkB;;;;8CAIgB,YAAY;;;;;;;mBAOvC,MAAM;mBACN,MAAM;;;;;;;YAOb,kBAAkB;;;;4CAIc,YAAY;;;;;;;mBAOrC,MAAM;oBACL,MAAM;;;;;KAKrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nexport const StyledPopoverArrow = styled.div`\n background-color: inherit;\n\n ::before {\n content: '';\n display: block;\n position: absolute;\n inset: -0.25rem;\n background-color: inherit;\n transform: rotate(45deg);\n }\n`;\n\nStyledPopoverArrow.defaultProps = defaultThemeProp;\n\nexport const StyledPopover = styled.div<{ offset?: number }>(\n ({\n theme: {\n base: {\n 'border-radius': borderRadius,\n 'z-index': { popover: zIndex },\n shadow: { high }\n },\n components: {\n card: { background },\n 'form-control': { 'border-radius': formControlBorderRadius }\n }\n },\n offset\n }) => {\n return css`\n /*\n Margin should never be used with Popper.\n https://popper.js.org/docs/v2/migration-guide/#4-remove-all-css-margins\n */\n margin: 0 !important;\n z-index: ${zIndex};\n background-color: ${background};\n border-radius: calc(${formControlBorderRadius} * ${borderRadius});\n box-shadow: ${high};\n\n &[data-popper-reference-hidden='true'] {\n visibility: hidden;\n pointer-events: none;\n }\n\n &[data-popper-placement^='top'] {\n > ${StyledPopoverArrow} {\n top: calc(100%);\n\n ::before {\n border-bottom-right-radius: calc(${borderRadius} / 4);\n }\n }\n\n ::before {\n content: '';\n position: absolute;\n height: ${offset}px;\n bottom: -${offset}px;\n left: 0;\n right: 0;\n }\n }\n\n &[data-popper-placement^='bottom'] {\n > ${StyledPopoverArrow} {\n bottom: calc(100%);\n\n ::before {\n border-top-left-radius: calc(${borderRadius} / 4);\n }\n }\n\n ::before {\n content: '';\n position: absolute;\n height: ${offset}px;\n top: -${offset}px;\n left: 0;\n right: 0;\n }\n }\n\n &[data-popper-placement^='right'] {\n > ${StyledPopoverArrow} {\n right: calc(100%);\n\n ::before {\n border-bottom-left-radius: calc(${borderRadius} / 4);\n }\n }\n\n ::before {\n content: '';\n position: absolute;\n width: ${offset}px;\n left: -${offset}px;\n top: 0;\n bottom: 0;\n }\n }\n\n &[data-popper-placement^='left'] {\n > ${StyledPopoverArrow} {\n left: calc(100%);\n\n ::before {\n border-top-right-radius: calc(${borderRadius} / 4);\n }\n }\n\n ::before {\n content: '';\n position: absolute;\n width: ${offset}px;\n right: -${offset}px;\n top: 0;\n bottom: 0;\n }\n }\n `;\n }\n);\n\nStyledPopover.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"Popover.styles.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;CAW3C,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,YAAY,EAC7B,SAAS,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,EAC/D,MAAM,EAAE,EAAE,IAAI,EAAE,EACjB,EACD,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,UAAU,EAAE,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,uBAAuB,EAAE,EAC7D,EACF,EACD,MAAM,EACN,MAAM,EACP,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;;iBAMG,MAAM,CAAC,CAAC,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa;0BAClC,UAAU;4BACR,uBAAuB,MAAM,YAAY;oBACjD,IAAI;;;;;;;;YAQZ,kBAAkB;;;;+CAIiB,YAAY;;;;;;;oBAOvC,MAAM;qBACL,MAAM;;;;;;;YAOf,kBAAkB;;;;2CAIa,YAAY;;;;;;;oBAOnC,MAAM;kBACR,MAAM;;;;;;;YAOZ,kBAAkB;;;;8CAIgB,YAAY;;;;;;;mBAOvC,MAAM;mBACN,MAAM;;;;;;;YAOb,kBAAkB;;;;4CAIc,YAAY;;;;;;;mBAOrC,MAAM;oBACL,MAAM;;;;;KAKrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nexport const StyledPopoverArrow = styled.div`\n background-color: inherit;\n\n ::before {\n content: '';\n display: block;\n position: absolute;\n inset: -0.25rem;\n background-color: inherit;\n transform: rotate(45deg);\n }\n`;\n\nStyledPopoverArrow.defaultProps = defaultThemeProp;\n\nexport const StyledPopover = styled.div<{ offset?: number; portal?: boolean }>(\n ({\n theme: {\n base: {\n 'border-radius': borderRadius,\n 'z-index': { popover: popoverZIndex, backdrop: backdropZIndex },\n shadow: { high }\n },\n components: {\n card: { background },\n 'form-control': { 'border-radius': formControlBorderRadius }\n }\n },\n portal,\n offset\n }) => {\n return css`\n /*\n Margin should never be used with Popper.\n https://popper.js.org/docs/v2/migration-guide/#4-remove-all-css-margins\n */\n margin: 0 !important;\n z-index: ${portal ? backdropZIndex - 1 : popoverZIndex};\n background-color: ${background};\n border-radius: calc(${formControlBorderRadius} * ${borderRadius});\n box-shadow: ${high};\n\n &[data-popper-reference-hidden='true'] {\n visibility: hidden;\n pointer-events: none;\n }\n\n &[data-popper-placement^='top'] {\n > ${StyledPopoverArrow} {\n top: calc(100%);\n\n ::before {\n border-bottom-right-radius: calc(${borderRadius} / 4);\n }\n }\n\n ::before {\n content: '';\n position: absolute;\n height: ${offset}px;\n bottom: -${offset}px;\n left: 0;\n right: 0;\n }\n }\n\n &[data-popper-placement^='bottom'] {\n > ${StyledPopoverArrow} {\n bottom: calc(100%);\n\n ::before {\n border-top-left-radius: calc(${borderRadius} / 4);\n }\n }\n\n ::before {\n content: '';\n position: absolute;\n height: ${offset}px;\n top: -${offset}px;\n left: 0;\n right: 0;\n }\n }\n\n &[data-popper-placement^='right'] {\n > ${StyledPopoverArrow} {\n right: calc(100%);\n\n ::before {\n border-bottom-left-radius: calc(${borderRadius} / 4);\n }\n }\n\n ::before {\n content: '';\n position: absolute;\n width: ${offset}px;\n left: -${offset}px;\n top: 0;\n bottom: 0;\n }\n }\n\n &[data-popper-placement^='left'] {\n > ${StyledPopoverArrow} {\n left: calc(100%);\n\n ::before {\n border-top-right-radius: calc(${borderRadius} / 4);\n }\n }\n\n ::before {\n content: '';\n position: absolute;\n width: ${offset}px;\n right: -${offset}px;\n top: 0;\n bottom: 0;\n }\n }\n `;\n }\n);\n\nStyledPopover.defaultProps = defaultThemeProp;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"RadioCheck.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EACF,GAAG,EAKH,iBAAiB,EACjB,oBAAoB,EACrB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAGrE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMtE,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,8CAA8C;IAC9C,SAAS,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,sBAAsB,mJAiDlC,CAAC;AAIF,eAAO,MAAM,qBAAqB,2GAiGhC,CAAC;AAIH,eAAO,MAAM,gBAAgB,qJAkD5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kKAgEhC,CAAC;AAIF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CA2FjD,CAAC;AAEH,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"RadioCheck.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EACF,GAAG,EAKH,iBAAiB,EACjB,oBAAoB,EACrB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAGrE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMtE,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,8CAA8C;IAC9C,SAAS,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,sBAAsB,mJAiDlC,CAAC;AAIF,eAAO,MAAM,qBAAqB,2GAuGhC,CAAC;AAIH,eAAO,MAAM,gBAAgB,qJAkD5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kKAgEhC,CAAC;AAIF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CA2FjD,CAAC;AAEH,eAAe,UAAU,CAAC"}
@@ -39,12 +39,19 @@ export const StyledPseudoRadioCheck = styled.div(props => {
39
39
  });
40
40
  StyledPseudoRadioCheck.defaultProps = defaultThemeProp;
41
41
  export const StyledRadioCheckInput = styled.input(props => {
42
- const { disabled, theme: { base: { 'border-radius': baseBorderRadius }, components: { 'form-control': { ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor }, ':read-only': { 'background-color': readOnlyBackgroundColor } }, 'radio-check': { ':checked': { 'background-color': checkedBackgroundColor, 'border-color': checkedBorderColor } }, checkbox: { 'border-radius': checkRadius }, 'radio-button': { 'border-radius': radioRadius } } } } = props;
42
+ const { disabled, theme: { base: { 'border-radius': baseBorderRadius }, components: { 'form-control': { ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor }, ':read-only': { 'background-color': readOnlyBackgroundColor } }, 'radio-check': { size, ':checked': { 'background-color': checkedBackgroundColor, 'border-color': checkedBorderColor } }, checkbox: { 'border-radius': checkRadius }, 'radio-button': { 'border-radius': radioRadius } } } } = props;
43
43
  const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;
44
44
  const foreground = tryCatch(() => readableColor(backgroundColor));
45
45
  const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;
46
46
  const { ltr } = useDirection();
47
47
  return css `
48
+ ${hideVisually}
49
+ margin: 0;
50
+
51
+ /* Sets rect size for JAWS focus outline */
52
+ width: ${size};
53
+ height: ${size};
54
+
48
55
  ${!disabled &&
49
56
  css `
50
57
  &:focus ${prcSelector} {
@@ -110,8 +117,6 @@ export const StyledRadioCheckInput = styled.input(props => {
110
117
  background-color: ${foreground};
111
118
  }
112
119
  }
113
-
114
- ${hideVisually}
115
120
  `;
116
121
  });
117
122
  StyledRadioCheckInput.defaultProps = defaultThemeProp;
@@ -1 +1 @@
1
- {"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FC,\n Ref,\n useEffect,\n MouseEvent,\n KeyboardEvent,\n PropsWithoutRef,\n MouseEventHandler,\n KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, hideVisually, mix } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface RadioCheckProps extends BaseProps, NoChildrenProp {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Sets the type of input. */\n type: 'radio' | 'checkbox';\n /** Sets checked prop via onChange when using as controlled component. */\n checked?: boolean;\n /** Initialize checked prop when using as uncontrolled component. */\n defaultChecked?: boolean;\n /**\n * Sets control to an an indeterminate state.\n * @default false\n */\n indeterminate?: boolean;\n /**\n * Controls the styling of the RadioCheck.\n * @default 'simple'\n */\n variant?: 'simple' | 'card';\n /** Callback function for onClick events. */\n onClick?: MouseEventHandler<HTMLInputElement>;\n /** Callback function for onKeyDown events. */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** info like error, success, warning messages */\n info?: FormControlProps['info'];\n /** Ref forwarded to the underlying input. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n props => {\n const {\n theme: {\n base: {\n spacing,\n palette: { 'primary-background': primaryBackground }\n },\n components: {\n 'form-field': formField,\n 'radio-check': {\n size,\n 'touch-size': touchSize,\n 'background-color': backgroundColor,\n 'border-color': borderColor,\n 'border-width': borderWidth\n }\n }\n },\n status\n } = props;\n\n const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n const useBackgroundColor =\n status && formField[status]\n ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n : backgroundColor;\n\n return css`\n display: flex;\n flex-shrink: 0;\n position: relative;\n width: ${size};\n height: ${size};\n margin-inline-end: ${spacing};\n border: ${borderWidth} solid ${useBorderColor};\n background-color: ${useBackgroundColor};\n\n @media (pointer: coarse) {\n width: ${touchSize};\n height: ${touchSize};\n }\n\n &::after {\n content: '';\n display: none;\n }\n `;\n }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n const {\n disabled,\n theme: {\n base: { 'border-radius': baseBorderRadius },\n components: {\n 'form-control': {\n ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n ':read-only': { 'background-color': readOnlyBackgroundColor }\n },\n 'radio-check': {\n ':checked': {\n 'background-color': checkedBackgroundColor,\n 'border-color': checkedBorderColor\n }\n },\n checkbox: { 'border-radius': checkRadius },\n 'radio-button': { 'border-radius': radioRadius }\n }\n }\n } = props;\n\n const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n const foreground = tryCatch(() => readableColor(backgroundColor));\n\n const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n const { ltr } = useDirection();\n\n return css`\n ${!disabled &&\n css`\n &:focus ${prcSelector} {\n box-shadow: ${shadow};\n border-color: ${focusBorderColor};\n }\n `}\n\n &:checked\n ${prcSelector},\n &:checked:disabled\n ${prcSelector},\n &[type='checkbox']:indeterminate\n ${prcSelector},\n &[type='checkbox']:indeterminate:disabled\n ${prcSelector} {\n border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n background-color: ${backgroundColor};\n\n &::after {\n display: block;\n }\n }\n\n &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n border-radius: ${radioRadius};\n }\n\n &[type='radio'] ${prcSelector}::after {\n margin: auto;\n width: 100%;\n height: 100%;\n background-color: ${foreground};\n transform: scale(0.4);\n }\n\n &[type='checkbox'] ${prcSelector} {\n border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n }\n\n &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n &::after {\n width: 40%;\n height: 75%;\n ${ltr\n ? css`\n transform: rotate(45deg) translate(50%, -30%);\n `\n : css`\n transform: rotate(45deg) translate(-50%, 30%);\n `}\n border-right: 0.15em solid ${foreground};\n border-bottom: 0.15em solid ${foreground};\n }\n }\n\n &[type='checkbox']:indeterminate ${prcSelector} {\n display: flex;\n &::after {\n width: 90%;\n height: 0.15em;\n margin: auto;\n background-color: ${foreground};\n }\n }\n\n ${hideVisually}\n `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n props => {\n const {\n disabled,\n readOnly,\n theme: {\n base,\n components: {\n 'radio-check': {\n label: { color: labelColor, 'font-weight': labelFontWeight }\n },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n } = props;\n\n const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n return css`\n > ${StyledLabel} {\n cursor: pointer;\n display: flex;\n align-items: center;\n font-weight: ${labelFontWeight};\n word-break: break-word;\n font-size: ${fontSize.s};\n color: ${labelColor};\n margin: 0;\n min-height: ${base['hit-area']['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${base.spacing} / 4);\n }\n\n ${!(disabled || readOnly) &&\n css`\n &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n `}\n `;\n }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n ({\n disabled,\n readOnly,\n status,\n theme: {\n base: { palette, shadow, spacing },\n components: {\n card,\n 'form-field': formField,\n 'radio-check': { label },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n }) => {\n const useBorderColor =\n status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n return css`\n min-width: min-content;\n cursor: pointer;\n background-color: ${card.background};\n border-radius: ${card['border-radius']};\n border: 0.0625rem solid ${useBorderColor};\n padding: ${spacing};\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n\n ${!(disabled || readOnly) &&\n css`\n :hover:not(:focus-within) {\n border-color: ${hoverBorderColor};\n ${StyledLabel} ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n }\n\n :focus-within {\n box-shadow: ${shadow.focus};\n border-color: transparent;\n }\n `}\n\n > ${StyledLabel} {\n display: flex;\n align-items: center;\n color: ${label.color};\n font-weight: ${label['font-weight']};\n margin: 0;\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${spacing} / 4);\n }\n `;\n }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(function RadioCheck(\n props: PropsWithoutRef<RadioCheckProps>,\n ref: RadioCheckProps['ref']\n) {\n const uid = useUID();\n const t = useI18n();\n\n const {\n type,\n id = uid,\n label,\n required = false,\n disabled = false,\n indeterminate = false,\n readOnly = false,\n variant = 'simple',\n onClick,\n onKeyDown,\n status,\n info,\n additionalInfo,\n ...restProps\n } = props;\n\n const isRadio = type === 'radio';\n const card = variant === 'card';\n const newRef = useConsolidatedRef(ref);\n\n useEffect(() => {\n if (!isRadio && newRef.current) {\n newRef.current.indeterminate = !!indeterminate;\n }\n }, [newRef, indeterminate, isRadio]);\n\n return (\n <FormField\n as={card ? StyledRadioCheckCard : StyledRadioCheck}\n label={\n <>\n <StyledPseudoRadioCheck\n status={status}\n isRadio={isRadio}\n as={StyledFormControl}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n />\n <>\n {label}\n {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n </>\n </>\n }\n labelAs={card ? 'div' : undefined}\n id={id}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n info={info}\n isRadioCheck\n inline\n labelAfter\n additionalInfo={additionalInfo}\n >\n <StyledRadioCheckInput\n {...restProps}\n id={id}\n type={type}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onClick={(e: MouseEvent<HTMLInputElement>) => {\n if (readOnly) e.preventDefault();\n\n onClick?.(e);\n }}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (type === 'checkbox' && readOnly && e.key === ' ') {\n e.preventDefault();\n }\n if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n e.preventDefault();\n }\n\n onKeyDown?.(e);\n }}\n ref={newRef}\n />\n </FormField>\n );\n});\n\nexport default RadioCheck;\n"]}
1
+ {"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FC,\n Ref,\n useEffect,\n MouseEvent,\n KeyboardEvent,\n PropsWithoutRef,\n MouseEventHandler,\n KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, hideVisually, mix } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface RadioCheckProps extends BaseProps, NoChildrenProp {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Sets the type of input. */\n type: 'radio' | 'checkbox';\n /** Sets checked prop via onChange when using as controlled component. */\n checked?: boolean;\n /** Initialize checked prop when using as uncontrolled component. */\n defaultChecked?: boolean;\n /**\n * Sets control to an an indeterminate state.\n * @default false\n */\n indeterminate?: boolean;\n /**\n * Controls the styling of the RadioCheck.\n * @default 'simple'\n */\n variant?: 'simple' | 'card';\n /** Callback function for onClick events. */\n onClick?: MouseEventHandler<HTMLInputElement>;\n /** Callback function for onKeyDown events. */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** info like error, success, warning messages */\n info?: FormControlProps['info'];\n /** Ref forwarded to the underlying input. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n props => {\n const {\n theme: {\n base: {\n spacing,\n palette: { 'primary-background': primaryBackground }\n },\n components: {\n 'form-field': formField,\n 'radio-check': {\n size,\n 'touch-size': touchSize,\n 'background-color': backgroundColor,\n 'border-color': borderColor,\n 'border-width': borderWidth\n }\n }\n },\n status\n } = props;\n\n const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n const useBackgroundColor =\n status && formField[status]\n ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n : backgroundColor;\n\n return css`\n display: flex;\n flex-shrink: 0;\n position: relative;\n width: ${size};\n height: ${size};\n margin-inline-end: ${spacing};\n border: ${borderWidth} solid ${useBorderColor};\n background-color: ${useBackgroundColor};\n\n @media (pointer: coarse) {\n width: ${touchSize};\n height: ${touchSize};\n }\n\n &::after {\n content: '';\n display: none;\n }\n `;\n }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n const {\n disabled,\n theme: {\n base: { 'border-radius': baseBorderRadius },\n components: {\n 'form-control': {\n ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n ':read-only': { 'background-color': readOnlyBackgroundColor }\n },\n 'radio-check': {\n size,\n ':checked': {\n 'background-color': checkedBackgroundColor,\n 'border-color': checkedBorderColor\n }\n },\n checkbox: { 'border-radius': checkRadius },\n 'radio-button': { 'border-radius': radioRadius }\n }\n }\n } = props;\n\n const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n const foreground = tryCatch(() => readableColor(backgroundColor));\n\n const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n const { ltr } = useDirection();\n\n return css`\n ${hideVisually}\n margin: 0;\n\n /* Sets rect size for JAWS focus outline */\n width: ${size};\n height: ${size};\n\n ${!disabled &&\n css`\n &:focus ${prcSelector} {\n box-shadow: ${shadow};\n border-color: ${focusBorderColor};\n }\n `}\n\n &:checked\n ${prcSelector},\n &:checked:disabled\n ${prcSelector},\n &[type='checkbox']:indeterminate\n ${prcSelector},\n &[type='checkbox']:indeterminate:disabled\n ${prcSelector} {\n border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n background-color: ${backgroundColor};\n\n &::after {\n display: block;\n }\n }\n\n &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n border-radius: ${radioRadius};\n }\n\n &[type='radio'] ${prcSelector}::after {\n margin: auto;\n width: 100%;\n height: 100%;\n background-color: ${foreground};\n transform: scale(0.4);\n }\n\n &[type='checkbox'] ${prcSelector} {\n border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n }\n\n &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n &::after {\n width: 40%;\n height: 75%;\n ${ltr\n ? css`\n transform: rotate(45deg) translate(50%, -30%);\n `\n : css`\n transform: rotate(45deg) translate(-50%, 30%);\n `}\n border-right: 0.15em solid ${foreground};\n border-bottom: 0.15em solid ${foreground};\n }\n }\n\n &[type='checkbox']:indeterminate ${prcSelector} {\n display: flex;\n &::after {\n width: 90%;\n height: 0.15em;\n margin: auto;\n background-color: ${foreground};\n }\n }\n `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n props => {\n const {\n disabled,\n readOnly,\n theme: {\n base,\n components: {\n 'radio-check': {\n label: { color: labelColor, 'font-weight': labelFontWeight }\n },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n } = props;\n\n const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n return css`\n > ${StyledLabel} {\n cursor: pointer;\n display: flex;\n align-items: center;\n font-weight: ${labelFontWeight};\n word-break: break-word;\n font-size: ${fontSize.s};\n color: ${labelColor};\n margin: 0;\n min-height: ${base['hit-area']['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${base.spacing} / 4);\n }\n\n ${!(disabled || readOnly) &&\n css`\n &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n `}\n `;\n }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n ({\n disabled,\n readOnly,\n status,\n theme: {\n base: { palette, shadow, spacing },\n components: {\n card,\n 'form-field': formField,\n 'radio-check': { label },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n }) => {\n const useBorderColor =\n status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n return css`\n min-width: min-content;\n cursor: pointer;\n background-color: ${card.background};\n border-radius: ${card['border-radius']};\n border: 0.0625rem solid ${useBorderColor};\n padding: ${spacing};\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n\n ${!(disabled || readOnly) &&\n css`\n :hover:not(:focus-within) {\n border-color: ${hoverBorderColor};\n ${StyledLabel} ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n }\n\n :focus-within {\n box-shadow: ${shadow.focus};\n border-color: transparent;\n }\n `}\n\n > ${StyledLabel} {\n display: flex;\n align-items: center;\n color: ${label.color};\n font-weight: ${label['font-weight']};\n margin: 0;\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${spacing} / 4);\n }\n `;\n }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(function RadioCheck(\n props: PropsWithoutRef<RadioCheckProps>,\n ref: RadioCheckProps['ref']\n) {\n const uid = useUID();\n const t = useI18n();\n\n const {\n type,\n id = uid,\n label,\n required = false,\n disabled = false,\n indeterminate = false,\n readOnly = false,\n variant = 'simple',\n onClick,\n onKeyDown,\n status,\n info,\n additionalInfo,\n ...restProps\n } = props;\n\n const isRadio = type === 'radio';\n const card = variant === 'card';\n const newRef = useConsolidatedRef(ref);\n\n useEffect(() => {\n if (!isRadio && newRef.current) {\n newRef.current.indeterminate = !!indeterminate;\n }\n }, [newRef, indeterminate, isRadio]);\n\n return (\n <FormField\n as={card ? StyledRadioCheckCard : StyledRadioCheck}\n label={\n <>\n <StyledPseudoRadioCheck\n status={status}\n isRadio={isRadio}\n as={StyledFormControl}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n />\n <>\n {label}\n {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n </>\n </>\n }\n labelAs={card ? 'div' : undefined}\n id={id}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n info={info}\n isRadioCheck\n inline\n labelAfter\n additionalInfo={additionalInfo}\n >\n <StyledRadioCheckInput\n {...restProps}\n id={id}\n type={type}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onClick={(e: MouseEvent<HTMLInputElement>) => {\n if (readOnly) e.preventDefault();\n\n onClick?.(e);\n }}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (type === 'checkbox' && readOnly && e.key === ' ') {\n e.preventDefault();\n }\n if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n e.preventDefault();\n }\n\n onKeyDown?.(e);\n }}\n ref={newRef}\n />\n </FormField>\n );\n});\n\nexport default RadioCheck;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"SkipLinks.d.ts","sourceRoot":"","sources":["../../../src/components/SkipLinks/SkipLinks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAgBjC,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CACjD;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB;AASD,eAAO,MAAM,eAAe,8TAkB1B,CAAC;AAgBH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAiFhC,CAAC;AAEH,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"SkipLinks.d.ts","sourceRoot":"","sources":["../../../src/components/SkipLinks/SkipLinks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAgBjC,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CACjD;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB;AASD,eAAO,MAAM,eAAe,8TAkB1B,CAAC;AAgBH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAkFhC,CAAC;AAEH,eAAe,SAAS,CAAC"}
@@ -46,7 +46,7 @@ const SkipLinks = memo(({ items }) => {
46
46
  const bindings = useShortcutManager();
47
47
  const t = useI18n();
48
48
  const shortcutHeadingId = useUID();
49
- return (_jsxs(Flex, { as: StyledSkipLinks, container: { direction: 'column' }, placement: 'bottom-end', target: {
49
+ return (_jsxs(Flex, { as: StyledSkipLinks, portal: false, container: { direction: 'column' }, placement: 'bottom-end', target: {
50
50
  getBoundingClientRect: () => ({
51
51
  height: 0,
52
52
  width: 0,
@@ -1 +1 @@
1
- {"version":3,"file":"SkipLinks.js","sourceRoot":"","sources":["../../../src/components/SkipLinks/SkipLinks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,IAAI,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,MAAM,EAAE,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAYlE,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;QAC/B,gBAAgB;;;;CAIvB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,EAAE;IACrD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC9B,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC;IAEnD,OAAO,GAAG,CAAA;;eAEG,CAAC;;;;QAIR,YAAY;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/C,OAAO,GAAG,CAAA;0CAC8B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;GAKxE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,SAAS,GAAuB,IAAI,CAAC,CAAC,EAAE,KAAK,EAAkB,EAAE,EAAE;IACvE,MAAM,QAAQ,GAAG,kBAAkB,EAAE,CAAC;IACtC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,iBAAiB,GAAG,MAAM,EAAE,CAAC;IAEnC,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,eAAe,EACnB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,SAAS,EAAC,YAAY,EACtB,MAAM,EAAE;YACN,qBAAqB,EAAE,GAAG,EAAE,CAAC,CAAC;gBAC5B,MAAM,EAAE,CAAC;gBACT,KAAK,EAAE,CAAC;gBACR,CAAC,EAAE,EAAE;gBACL,CAAC,EAAE,EAAE;gBACL,GAAG,EAAE,EAAE;gBACP,MAAM,EAAE,EAAE;gBACV,IAAI,EAAE,EAAE;gBACR,KAAK,EAAE,EAAE;aACV,CAAC;SACH,EACD,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,iBAAiB;gBACvB,OAAO,EAAE,KAAK;aACf;SACF,yCAEW,CAAC,CAAC,4BAA4B,CAAC,aAE3C,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,oBAAoB,YACjF,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,EAEd,OAAO,EAAE,GAAG,EAAE,CACZ,uBAAuB,CACrB,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,QAAQ,EACxD,IAAI,CAAC,MAAM,CAAC,SAAS,CACtB,YAGF,IAAI,CAAC,KAAK,IARN,IAAI,CAAC,KAAK,CASR,CACV,CAAC,GACG,EAEN,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CACtC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,eAAe,aAC3E,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAE,iBAAiB,YAC/C,CAAC,CAAC,WAAW,CAAC,GACV,EACP,KAAC,IAAI,IACH,SAAS,EAAE;4BACT,IAAI,EAAE,qBAAqB;4BAC3B,GAAG,EAAE,CAAC;4BACN,UAAU,EAAE,QAAQ;yBACrB,EACD,IAAI,EAAC,MAAM,qBACM,iBAAiB,YAEjC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE;4BAC3D,OAAO,CACL,eAAK,IAAI,EAAC,UAAU,aAClB,KAAC,IAAI,cAAE,CAAC,CAAC,YAAY,QAAQ,EAAuB,CAAC,GAAQ,EAC7D,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,YAC1B,QAAQ,CAAC,oBAAoB,CAAC,UAAU,CAAC;6CACvC,KAAK,CAAC,GAAG,CAAC;6CACV,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACV,KAAC,QAAQ,IAAC,OAAO,EAAE,GAAG,IAAO,GAAG,CAAI,CACrC,CAAC,GACC,KARiB,QAAQ,CAS5B,CACP,CAAC;wBACJ,CAAC,CAAC,GACG,IACF,CACR,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC","sourcesContent":["import { FC, memo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\nimport { Shortcut } from 'shortcuts';\n\nimport { defaultThemeProp } from '../../theme';\nimport { focusHeadingOrContainer } from '../../utils';\nimport Button, { StyledButtonLink } from '../Button';\nimport Popover from '../Popover';\nimport Flex from '../Flex';\nimport { Keyboard } from '../Badges';\nimport Text from '../Text';\nimport Grid from '../Grid';\nimport { useI18n, useShortcutManager, useUID } from '../../hooks';\nimport { Translation } from '../../i18n';\n\ninterface SkipLink {\n label: string;\n target: { ariaLabel: string; selector: string };\n}\n\nexport interface SkipLinksProps {\n items: SkipLink[];\n}\n\nconst StyledSkipLinksItems = styled.div`\n & > ${StyledButtonLink} {\n display: block;\n margin-inline-start: 0;\n }\n`;\n\nexport const StyledSkipLinks = styled(Popover)(props => {\n const {\n theme: {\n base: { 'z-index': zIndices }\n }\n } = props;\n\n const z = Math.max(...Object.values(zIndices)) + 1;\n\n return css`\n position: fixed;\n z-index: ${z};\n\n &:not(:focus-within) {\n z-index: -1;\n ${hideVisually}\n }\n `;\n});\n\nStyledSkipLinks.defaultProps = defaultThemeProp;\n\nconst StyledShortcuts = styled.div(({ theme }) => {\n return css`\n border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n\n [role='listitem'] {\n display: contents;\n }\n `;\n});\n\nStyledShortcuts.defaultProps = defaultThemeProp;\n\nconst SkipLinks: FC<SkipLinksProps> = memo(({ items }: SkipLinksProps) => {\n const bindings = useShortcutManager();\n const t = useI18n();\n const shortcutHeadingId = useUID();\n\n return (\n <Flex\n as={StyledSkipLinks}\n container={{ direction: 'column' }}\n placement='bottom-end'\n target={{\n getBoundingClientRect: () => ({\n height: 0,\n width: 0,\n x: 24,\n y: 24,\n top: 24,\n bottom: 24,\n left: 24,\n right: 24\n })\n }}\n modifiers={[\n {\n name: 'placeAndContain',\n enabled: false\n }\n ]}\n data-app-region\n aria-label={t('skip_navigation_menu_label')}\n >\n <Flex container={{ direction: 'column', gap: 0.5, pad: 1 }} as={StyledSkipLinksItems}>\n {items.map(item => (\n <Button\n variant='link'\n key={item.label}\n onClick={() =>\n focusHeadingOrContainer(\n document.querySelector(item.target.selector) ?? document,\n item.target.ariaLabel\n )\n }\n >\n {item.label}\n </Button>\n ))}\n </Flex>\n\n {Object.entries(bindings).length > 0 && (\n <Flex container={{ direction: 'column', gap: 1, pad: 1 }} as={StyledShortcuts}>\n <Text variant='h2' as='span' id={shortcutHeadingId}>\n {t('shortcuts')}\n </Text>\n <Grid\n container={{\n cols: 'auto minmax(0, 1fr)',\n gap: 1,\n alignItems: 'center'\n }}\n role='list'\n aria-labelledby={shortcutHeadingId}\n >\n {Object.entries(bindings).map(([actionId, { keyBinding }]) => {\n return (\n <div role='listitem' key={actionId}>\n <Text>{t(`shortcut_${actionId}` as keyof Translation)}</Text>\n <Flex container={{ gap: 0.5 }}>\n {Shortcut.shortcut2accelerator(keyBinding)\n .split('+')\n .map(key => (\n <Keyboard keyName={key} key={key} />\n ))}\n </Flex>\n </div>\n );\n })}\n </Grid>\n </Flex>\n )}\n </Flex>\n );\n});\n\nexport default SkipLinks;\n"]}
1
+ {"version":3,"file":"SkipLinks.js","sourceRoot":"","sources":["../../../src/components/SkipLinks/SkipLinks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, memo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\nimport { Shortcut } from 'shortcuts';\n\nimport { defaultThemeProp } from '../../theme';\nimport { focusHeadingOrContainer } from '../../utils';\nimport Button, { StyledButtonLink } from '../Button';\nimport Popover from '../Popover';\nimport Flex from '../Flex';\nimport { Keyboard } from '../Badges';\nimport Text from '../Text';\nimport Grid from '../Grid';\nimport { useI18n, useShortcutManager, useUID } from '../../hooks';\nimport { Translation } from '../../i18n';\n\ninterface SkipLink {\n label: string;\n target: { ariaLabel: string; selector: string };\n}\n\nexport interface SkipLinksProps {\n items: SkipLink[];\n}\n\nconst StyledSkipLinksItems = styled.div`\n & > ${StyledButtonLink} {\n display: block;\n margin-inline-start: 0;\n }\n`;\n\nexport const StyledSkipLinks = styled(Popover)(props => {\n const {\n theme: {\n base: { 'z-index': zIndices }\n }\n } = props;\n\n const z = Math.max(...Object.values(zIndices)) + 1;\n\n return css`\n position: fixed;\n z-index: ${z};\n\n &:not(:focus-within) {\n z-index: -1;\n ${hideVisually}\n }\n `;\n});\n\nStyledSkipLinks.defaultProps = defaultThemeProp;\n\nconst StyledShortcuts = styled.div(({ theme }) => {\n return css`\n border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n\n [role='listitem'] {\n display: contents;\n }\n `;\n});\n\nStyledShortcuts.defaultProps = defaultThemeProp;\n\nconst SkipLinks: FC<SkipLinksProps> = memo(({ items }: SkipLinksProps) => {\n const bindings = useShortcutManager();\n const t = useI18n();\n const shortcutHeadingId = useUID();\n\n return (\n <Flex\n as={StyledSkipLinks}\n portal={false}\n container={{ direction: 'column' }}\n placement='bottom-end'\n target={{\n getBoundingClientRect: () => ({\n height: 0,\n width: 0,\n x: 24,\n y: 24,\n top: 24,\n bottom: 24,\n left: 24,\n right: 24\n })\n }}\n modifiers={[\n {\n name: 'placeAndContain',\n enabled: false\n }\n ]}\n data-app-region\n aria-label={t('skip_navigation_menu_label')}\n >\n <Flex container={{ direction: 'column', gap: 0.5, pad: 1 }} as={StyledSkipLinksItems}>\n {items.map(item => (\n <Button\n variant='link'\n key={item.label}\n onClick={() =>\n focusHeadingOrContainer(\n document.querySelector(item.target.selector) ?? document,\n item.target.ariaLabel\n )\n }\n >\n {item.label}\n </Button>\n ))}\n </Flex>\n\n {Object.entries(bindings).length > 0 && (\n <Flex container={{ direction: 'column', gap: 1, pad: 1 }} as={StyledShortcuts}>\n <Text variant='h2' as='span' id={shortcutHeadingId}>\n {t('shortcuts')}\n </Text>\n <Grid\n container={{\n cols: 'auto minmax(0, 1fr)',\n gap: 1,\n alignItems: 'center'\n }}\n role='list'\n aria-labelledby={shortcutHeadingId}\n >\n {Object.entries(bindings).map(([actionId, { keyBinding }]) => {\n return (\n <div role='listitem' key={actionId}>\n <Text>{t(`shortcut_${actionId}` as keyof Translation)}</Text>\n <Flex container={{ gap: 0.5 }}>\n {Shortcut.shortcut2accelerator(keyBinding)\n .split('+')\n .map(key => (\n <Keyboard keyName={key} key={key} />\n ))}\n </Flex>\n </div>\n );\n })}\n </Grid>\n </Flex>\n )}\n </Flex>\n );\n});\n\nexport default SkipLinks;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAK1D,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,oCAAoC;IACpC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,gDAAgD;IAChD,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,yGAcxB,CAAC;AAIH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAkI1D,CAAC;AAEH,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAK1D,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,oCAAoC;IACpC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,gDAAgD;IAChD,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,yGAaxB,CAAC;AAIH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAgI1D,CAAC;AAEH,eAAe,OAAO,CAAC"}
@@ -17,11 +17,10 @@ export const StyledTooltip = styled.div(({ theme }) => {
17
17
  white-space: pre-line;
18
18
  word-break: break-word;
19
19
  pointer-events: none;
20
- z-index: ${theme.base['z-index'].tooltip};
21
20
  `;
22
21
  });
23
22
  StyledTooltip.defaultProps = defaultThemeProp;
24
- const Tooltip = forwardRef(function Tooltip({ children, target, showDelay = 'short', hideDelay = 'long', portal = true, placement = 'bottom', describeTarget = true, smart, ...restProps }, ref) {
23
+ const Tooltip = forwardRef(function Tooltip({ children, target, showDelay = 'short', hideDelay = 'long', placement = 'bottom', describeTarget = true, smart, ...restProps }, ref) {
25
24
  const id = useUID();
26
25
  const [show, setShow] = useState(false);
27
26
  const tooltipRef = useConsolidatedRef(ref);
@@ -100,7 +99,7 @@ const Tooltip = forwardRef(function Tooltip({ children, target, showDelay = 'sho
100
99
  }
101
100
  }
102
101
  }, [describeTarget, target, show]);
103
- return (_jsx(Popover, { id: id, ...restProps, show: show, showDelay: showDelay, hideDelay: hideDelay, groupId: 'tooltip', strategy: 'fixed', portal: portal, as: StyledTooltip, role: 'tooltip', target: target, arrow: true, placement: placement, onMouseDown: onMouseDown, hideOnTargetHidden: true, ref: tooltipRef, children: children }));
102
+ return (_jsx(Popover, { id: id, ...restProps, show: show, showDelay: showDelay, hideDelay: hideDelay, groupId: 'tooltip', strategy: 'fixed', as: StyledTooltip, role: 'tooltip', target: target, arrow: true, placement: placement, onMouseDown: onMouseDown, hideOnTargetHidden: true, ref: tooltipRef, children: children }));
104
103
  });
105
104
  export default Tooltip;
106
105
  //# sourceMappingURL=Tooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MutableRefObject,\n PropsWithoutRef,\n Ref,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Popover, { Delay, PopoverProps } from '../Popover';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport { calculateFontSize } from '../../styles';\nimport { getActiveElement } from '../../utils';\n\nexport interface TooltipProps extends BaseProps {\n /** Text content for the tooltip. */\n children: string | string[];\n /** Element to serve as the tooltip's target. */\n target: Element | null;\n /**\n * Delay showing the tooltip on mouseenter.\n * @default 'short'\n */\n showDelay?: Delay;\n /**\n * Delay hiding the tooltip on mouseleave.\n * @default 'long'\n */\n hideDelay?: Delay;\n /**\n * If true, the Tooltip will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n * @default true\n */\n portal?: PopoverProps['portal'];\n /**\n * If true, the Tooltip will automatically apply an aria-describedby attribute to its target.\n * @default true\n */\n describeTarget?: boolean;\n /**\n * Sets the placement of the tooltip relative to the target.\n * @default 'bottom'\n */\n placement?: PopoverProps['placement'];\n /**\n * Conditionally renders a tooltip only if the associated element's text content is truncated.\n * To work, the associated element must be be displayed as a CSS \"block box\" i.e. block, inline-block, etc...\n * @default false\n */\n smart?: boolean;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTooltip = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n background-color: ${theme.components.tooltip['background-color']};\n color: ${theme.components.tooltip['foreground-color']};\n font-size: ${fontSize.xxs};\n max-width: 40ch;\n padding: ${theme.base.spacing};\n white-space: pre-line;\n word-break: break-word;\n pointer-events: none;\n z-index: ${theme.base['z-index'].tooltip};\n `;\n});\n\nStyledTooltip.defaultProps = defaultThemeProp;\n\nconst Tooltip: FunctionComponent<TooltipProps & ForwardProps> = forwardRef(function Tooltip(\n {\n children,\n target,\n showDelay = 'short',\n hideDelay = 'long',\n portal = true,\n placement = 'bottom',\n describeTarget = true,\n smart,\n ...restProps\n }: PropsWithoutRef<TooltipProps>,\n ref: Ref<HTMLDivElement>\n) {\n const id = useUID();\n const [show, setShow] = useState(false);\n const tooltipRef = useConsolidatedRef(ref);\n const lastClickedRef: MutableRefObject<EventTarget | null> = useRef(null);\n\n const onMouseDown = useCallback(\n ({ target: eTarget }: MouseEvent) => {\n lastClickedRef.current = eTarget;\n if (eTarget === tooltipRef.current || eTarget === target) return;\n setShow(false);\n },\n [target]\n );\n\n useEffect(() => {\n if (!target) return;\n\n const showTooltip = () => {\n setShow(\n // This approach may result in a tooltip NOT appearing 1px before it should due to browser specifics. Enhance as needed.\n // https://stackoverflow.com/a/64747288\n smart ? target.scrollWidth > target.getBoundingClientRect().width : true\n );\n };\n\n const onFocusIn = () => {\n showTooltip();\n };\n\n const onFocusOut = () => {\n if (lastClickedRef.current !== tooltipRef.current) {\n setShow(false);\n }\n lastClickedRef.current = null;\n };\n\n const onMouseEnter = () => {\n showTooltip();\n };\n\n const onMouseLeave = () => {\n if (getActiveElement() !== target) {\n setShow(false);\n }\n };\n\n const onKeyDown = ({ key }: KeyboardEvent) => {\n if (key === 'Escape' && getActiveElement() === target) {\n setShow(false);\n }\n };\n\n document.addEventListener('keydown', onKeyDown);\n document.addEventListener('mousedown', onMouseDown);\n\n target.addEventListener('focusin', onFocusIn);\n target.addEventListener('focusout', onFocusOut);\n\n target.addEventListener('mouseenter', onMouseEnter);\n target.addEventListener('mouseleave', onMouseLeave);\n\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n document.removeEventListener('mousedown', onMouseDown);\n\n target.removeEventListener('focusin', onFocusIn);\n target.removeEventListener('focusout', onFocusOut);\n\n target.removeEventListener('mouseenter', onMouseEnter);\n target.removeEventListener('mouseleave', onMouseLeave);\n };\n }, [target, onMouseDown, smart]);\n\n useEffect(() => {\n if (target && describeTarget && show) {\n const describedBy = target.getAttribute('aria-describedby');\n // Set the attribute to the old attribute plus the id\n target.setAttribute('aria-describedby', describedBy ? `${describedBy} ${id}` : id);\n } else if (target) {\n // Get the old attribute\n const describedBy = target.getAttribute('aria-describedby');\n if (describedBy) {\n // If the old attribute matches the id just remove it entirely\n if (describedBy === id) {\n target.removeAttribute('aria-describedby');\n } else {\n // Otherwise we want to just remove the id that was added and reset the attribute to what it was before\n const oldDescribedBy = describedBy.replace(new RegExp(`(?:^|\\\\s+)${id}`), '');\n target.setAttribute('aria-describedby', oldDescribedBy);\n }\n }\n }\n }, [describeTarget, target, show]);\n\n return (\n <Popover\n id={id}\n {...restProps}\n show={show}\n showDelay={showDelay}\n hideDelay={hideDelay}\n groupId='tooltip'\n strategy='fixed'\n portal={portal}\n as={StyledTooltip}\n role='tooltip'\n target={target}\n arrow\n placement={placement}\n onMouseDown={onMouseDown}\n hideOnTargetHidden\n ref={tooltipRef}\n >\n {children}\n </Popover>\n );\n});\n\nexport default Tooltip;\n"]}
1
+ {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MutableRefObject,\n PropsWithoutRef,\n Ref,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Popover, { Delay, PopoverProps } from '../Popover';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport { calculateFontSize } from '../../styles';\nimport { getActiveElement } from '../../utils';\n\nexport interface TooltipProps extends BaseProps {\n /** Text content for the tooltip. */\n children: string | string[];\n /** Element to serve as the tooltip's target. */\n target: Element | null;\n /**\n * Delay showing the tooltip on mouseenter.\n * @default 'short'\n */\n showDelay?: Delay;\n /**\n * Delay hiding the tooltip on mouseleave.\n * @default 'long'\n */\n hideDelay?: Delay;\n /**\n * If true, the Tooltip will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n * @default true\n */\n portal?: PopoverProps['portal'];\n /**\n * If true, the Tooltip will automatically apply an aria-describedby attribute to its target.\n * @default true\n */\n describeTarget?: boolean;\n /**\n * Sets the placement of the tooltip relative to the target.\n * @default 'bottom'\n */\n placement?: PopoverProps['placement'];\n /**\n * Conditionally renders a tooltip only if the associated element's text content is truncated.\n * To work, the associated element must be be displayed as a CSS \"block box\" i.e. block, inline-block, etc...\n * @default false\n */\n smart?: boolean;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTooltip = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n background-color: ${theme.components.tooltip['background-color']};\n color: ${theme.components.tooltip['foreground-color']};\n font-size: ${fontSize.xxs};\n max-width: 40ch;\n padding: ${theme.base.spacing};\n white-space: pre-line;\n word-break: break-word;\n pointer-events: none;\n `;\n});\n\nStyledTooltip.defaultProps = defaultThemeProp;\n\nconst Tooltip: FunctionComponent<TooltipProps & ForwardProps> = forwardRef(function Tooltip(\n {\n children,\n target,\n showDelay = 'short',\n hideDelay = 'long',\n placement = 'bottom',\n describeTarget = true,\n smart,\n ...restProps\n }: PropsWithoutRef<TooltipProps>,\n ref: Ref<HTMLDivElement>\n) {\n const id = useUID();\n const [show, setShow] = useState(false);\n const tooltipRef = useConsolidatedRef(ref);\n const lastClickedRef: MutableRefObject<EventTarget | null> = useRef(null);\n\n const onMouseDown = useCallback(\n ({ target: eTarget }: MouseEvent) => {\n lastClickedRef.current = eTarget;\n if (eTarget === tooltipRef.current || eTarget === target) return;\n setShow(false);\n },\n [target]\n );\n\n useEffect(() => {\n if (!target) return;\n\n const showTooltip = () => {\n setShow(\n // This approach may result in a tooltip NOT appearing 1px before it should due to browser specifics. Enhance as needed.\n // https://stackoverflow.com/a/64747288\n smart ? target.scrollWidth > target.getBoundingClientRect().width : true\n );\n };\n\n const onFocusIn = () => {\n showTooltip();\n };\n\n const onFocusOut = () => {\n if (lastClickedRef.current !== tooltipRef.current) {\n setShow(false);\n }\n lastClickedRef.current = null;\n };\n\n const onMouseEnter = () => {\n showTooltip();\n };\n\n const onMouseLeave = () => {\n if (getActiveElement() !== target) {\n setShow(false);\n }\n };\n\n const onKeyDown = ({ key }: KeyboardEvent) => {\n if (key === 'Escape' && getActiveElement() === target) {\n setShow(false);\n }\n };\n\n document.addEventListener('keydown', onKeyDown);\n document.addEventListener('mousedown', onMouseDown);\n\n target.addEventListener('focusin', onFocusIn);\n target.addEventListener('focusout', onFocusOut);\n\n target.addEventListener('mouseenter', onMouseEnter);\n target.addEventListener('mouseleave', onMouseLeave);\n\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n document.removeEventListener('mousedown', onMouseDown);\n\n target.removeEventListener('focusin', onFocusIn);\n target.removeEventListener('focusout', onFocusOut);\n\n target.removeEventListener('mouseenter', onMouseEnter);\n target.removeEventListener('mouseleave', onMouseLeave);\n };\n }, [target, onMouseDown, smart]);\n\n useEffect(() => {\n if (target && describeTarget && show) {\n const describedBy = target.getAttribute('aria-describedby');\n // Set the attribute to the old attribute plus the id\n target.setAttribute('aria-describedby', describedBy ? `${describedBy} ${id}` : id);\n } else if (target) {\n // Get the old attribute\n const describedBy = target.getAttribute('aria-describedby');\n if (describedBy) {\n // If the old attribute matches the id just remove it entirely\n if (describedBy === id) {\n target.removeAttribute('aria-describedby');\n } else {\n // Otherwise we want to just remove the id that was added and reset the attribute to what it was before\n const oldDescribedBy = describedBy.replace(new RegExp(`(?:^|\\\\s+)${id}`), '');\n target.setAttribute('aria-describedby', oldDescribedBy);\n }\n }\n }\n }, [describeTarget, target, show]);\n\n return (\n <Popover\n id={id}\n {...restProps}\n show={show}\n showDelay={showDelay}\n hideDelay={hideDelay}\n groupId='tooltip'\n strategy='fixed'\n as={StyledTooltip}\n role='tooltip'\n target={target}\n arrow\n placement={placement}\n onMouseDown={onMouseDown}\n hideOnTargetHidden\n ref={tooltipRef}\n >\n {children}\n </Popover>\n );\n});\n\nexport default Tooltip;\n"]}