@pega/cosmos-react-core 3.0.0-dev.9.1 → 3.0.0-rc.10

package/lib/components/Popover/Popover.js

@@ -2,18 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useRef, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
-import { useConfiguration, useConsolidatedRef, useElement, useUID } from '../../hooks';
+import { useAfterInitialEffect, useConfiguration, useConsolidatedRef, useElement, useUID } from '../../hooks';
 import { windowIsAvailable } from '../../utils';
 import { PopoverManagerContext } from './PopoverContext';
-import { StyledPopover, StyledPopoverArrow } from './Popover.styles';
+import { StyledPopover, StyledPopoverContent, StyledPopoverArrow } from './Popover.styles';
+import { applyMaxSize, maxSize } from './modifiers';
 const delays = {
     none: 0,
     short: 500,
     long: 1000
 };
-const Popover = forwardRef(({ show = true, portal = false, target, placement, strategy = 'fixed', style, modifiers = [], arrow = false, groupId, showDelay = 'none', hideDelay = 'none', hideOnTargetHidden = false, children, ...restProps }, ref) => {
-    const { portalTarget } = useConfiguration();
-    const { checkActive, setActive } = useContext(PopoverManagerContext);
+const Popover = forwardRef(({ show = true, portal = false, target, placement, strategy = 'fixed', style, modifiers = [], arrow = false, groupId, showDelay = 'none', hideDelay = 'none', hideOnTargetHidden = false, children, onHide, ...restProps }, ref) => {
+    const { portalTarget: configurationPortal } = useConfiguration();
+    const { checkActive, setActive, popovers } = useContext(PopoverManagerContext);
     const [, setPopperEl] = useElement();
     const popperRef = useConsolidatedRef(ref, setPopperEl);
     const arrowRef = useRef(null);
@@ -21,7 +22,14 @@ const Popover = forwardRef(({ show = true, portal = false, target, placement, st
     const [showPopover, setShowPopover] = useState(show);
     const timeout = useRef();
     const uid = useUID();
+    const portalTarget = typeof portal === 'boolean' ? configurationPortal : portal;
     const memoedModifiers = useMemo(() => [
+        {
+            name: 'computeStyles',
+            options: {
+                gpuAcceleration: false
+            }
+        },
         {
             name: 'offset',
             options: {
@@ -36,12 +44,8 @@ const Popover = forwardRef(({ show = true, portal = false, target, placement, st
                 tether: !modifiers.find(m => m.name === 'sameWidth')
             }
         },
-        {
-            name: 'computeStyles',
-            options: {
-                gpuAcceleration: false
-            }
-        },
+        maxSize,
+        applyMaxSize,
         ...modifiers
     ], [modifiers, arrow, hideOnTargetHidden]);
     const offset = useMemo(() => {
@@ -88,7 +92,17 @@ const Popover = forwardRef(({ show = true, portal = false, target, placement, st
     useEffect(() => {
         return () => clearTimeout(timeout.current);
     }, []);
-    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] }));
+    useAfterInitialEffect(() => {
+        if (!showPopover) {
+            onHide?.();
+        }
+    }, [showPopover]);
+    useEffect(() => {
+        if (groupId && popovers[groupId] && popovers[groupId] !== uid) {
+            setShowPopover(false);
+        }
+    }, [groupId ? popovers[groupId] : undefined]);
+    const content = (_jsxs(StyledPopover, { ...restProps, offset: offset, ref: popperRef, style: { ...style, ...styles.popper }, ...attributes.popper, children: [arrow && _jsx(StyledPopoverArrow, { ref: arrowRef, style: { ...styles.arrow } }), _jsx(StyledPopoverContent, { children: children })] }));
     if (!target || !showPopover || (groupId && !checkActive(uid, groupId)))
         return null;
     return portal && portalTarget ? createPortal(content, portalTarget) : content;

package/lib/components/Popover/Popover.js.map

@@ -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} 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 { useConfiguration, useConsolidatedRef, useElement, useUID } from '../../hooks';\nimport { windowIsAvailable } from '../../utils';\n\nimport { PopoverManagerContext } from './PopoverContext';\nimport { StyledPopover, StyledPopoverArrow } from './Popover.styles';\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;\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   */\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  /** 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(\n  (\n    {\n      show = true,\n      portal = false,\n      target,\n      placement,\n      strategy = 'fixed',\n      style,\n      modifiers = [],\n      arrow = false,\n      groupId,\n      showDelay = 'none',\n      hideDelay = 'none',\n      hideOnTargetHidden = false,\n      children,\n      ...restProps\n    }: PropsWithoutRef<PopoverProps> & { style?: CSSProperties },\n    ref: PopoverProps['ref']\n  ) => {\n    const { portalTarget } = useConfiguration();\n    const { checkActive, setActive } = useContext(PopoverManagerContext);\n    const [, setPopperEl] = useElement<HTMLDivElement>();\n    const popperRef = useConsolidatedRef<HTMLDivElement>(ref, setPopperEl);\n    const arrowRef = useRef<HTMLDivElement>(null);\n    const forceUpdateRef = useRef<() => void>();\n    const [showPopover, setShowPopover] = useState(show);\n    const timeout = useRef<number>();\n    const uid = useUID();\n\n    const memoedModifiers = useMemo(\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          }\n        },\n        {\n          name: 'computeStyles',\n          options: {\n            gpuAcceleration: false\n          }\n        },\n        ...modifiers\n      ],\n      [modifiers, arrow, hideOnTargetHidden]\n    );\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, popperRef.current, {\n      placement,\n      strategy,\n      modifiers: memoedModifiers\n    });\n\n    if (forceUpdate) forceUpdateRef.current = forceUpdate;\n\n    useEffect(() => {\n      const observer = new ResizeObserver(() => {\n        forceUpdateRef.current?.();\n      });\n\n      if (popperRef.current) observer.observe(popperRef.current);\n      if (target instanceof Element) observer.observe(target);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [forceUpdate, popperRef.current, target]);\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    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);\n\nexport default Popover;\n"]}
+{"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} 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 { windowIsAvailable } from '../../utils';\nimport { ConfigurationProps } from '../Configuration';\n\nimport { PopoverManagerContext } from './PopoverContext';\nimport { StyledPopover, StyledPopoverContent, StyledPopoverArrow } from './Popover.styles';\nimport { applyMaxSize, maxSize } 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   */\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(\n  (\n    {\n      show = true,\n      portal = false,\n      target,\n      placement,\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 [, setPopperEl] = useElement<HTMLDivElement>();\n    const popperRef = useConsolidatedRef<HTMLDivElement>(ref, setPopperEl);\n    const arrowRef = useRef<HTMLDivElement>(null);\n    const forceUpdateRef = useRef<() => void>();\n    const [showPopover, setShowPopover] = useState(show);\n    const timeout = useRef<number>();\n    const uid = useUID();\n\n    const portalTarget = typeof portal === 'boolean' ? configurationPortal : portal;\n\n    const memoedModifiers = useMemo(\n      () => [\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          }\n        },\n        maxSize,\n        applyMaxSize,\n        ...modifiers\n      ],\n      [modifiers, arrow, hideOnTargetHidden]\n    );\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, popperRef.current, {\n      placement,\n      strategy,\n      modifiers: memoedModifiers\n    });\n\n    if (forceUpdate) forceUpdateRef.current = forceUpdate;\n\n    useEffect(() => {\n      const observer = new ResizeObserver(() => {\n        forceUpdateRef.current?.();\n      });\n\n      if (popperRef.current) observer.observe(popperRef.current);\n      if (target instanceof Element) observer.observe(target);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [forceUpdate, popperRef.current, target]);\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        <StyledPopoverContent>{children}</StyledPopoverContent>\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);\n\nexport default Popover;\n"]}

package/lib/components/Popover/Popover.styles.d.ts

@@ -1,4 +1,5 @@
 export declare const StyledPopoverArrow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPopoverContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     offset?: number | undefined;
 }, never>;

package/lib/components/Popover/Popover.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,yGAwB9B,CAAC;AAIF,eAAO,MAAM,aAAa;;SAoJzB,CAAC"}
+{"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,oBAAoB,yGAKhC,CAAC;AAEF,eAAO,MAAM,aAAa;;SA4GzB,CAAC"}

package/lib/components/Popover/Popover.styles.js

@@ -1,24 +1,25 @@
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
-export const StyledPopoverArrow = styled.div(({ theme: { base: { shadow: { 'low-filter': low } } } }) => css `
+export const StyledPopoverArrow = styled.div `
+  background-color: inherit;
+
+  ::before {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: -0.25rem;
     background-color: inherit;
-
-    ::before,
-    ::after {
-      content: '';
-      display: block;
-      position: absolute;
-      background-color: inherit;
-    }
-
-    ::before {
-      inset: -0.25rem;
-      filter: ${low};
-      transform: rotate(45deg);
-    }
-  `);
+    transform: rotate(45deg);
+  }
+`;
 StyledPopoverArrow.defaultProps = defaultThemeProp;
-export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': borderRadius, 'z-index': { popover: zIndex }, shadow: { 'low-filter': low } }, components: { card: { background }, 'form-control': { 'border-radius': formControlBorderRadius } } }, offset }) => {
+export const StyledPopoverContent = styled.div `
+  max-width: inherit;
+  max-height: inherit;
+  border-radius: inherit;
+  overflow: auto;
+`;
+export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': borderRadius, 'z-index': { popover: zIndex }, shadow: { low } }, components: { card: { background }, 'form-control': { 'border-radius': formControlBorderRadius } } }, offset }) => {
     return css `
       /*
         Margin should never be used with Popper.
@@ -28,19 +29,7 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
       z-index: ${zIndex};
       background-color: ${background};
       border-radius: calc(${formControlBorderRadius} * ${borderRadius});
-
-      ::after {
-        content: '';
-        background-color: inherit;
-        border-radius: inherit;
-        z-index: -2; /* Make sure it's under the arrow. */
-        filter: ${low};
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-      }
+      box-shadow: ${low};
 
       &[data-popper-reference-hidden='true'] {
         visibility: hidden;
@@ -54,13 +43,6 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
           ::before {
             border-bottom-right-radius: calc(${borderRadius} / 4);
           }
-
-          ::after {
-            top: -0.75rem;
-            right: -0.75rem;
-            bottom: 0;
-            left: -0.75rem;
-          }
         }
 
         ::before {
@@ -80,13 +62,6 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
           ::before {
             border-top-left-radius: calc(${borderRadius} / 4);
           }
-
-          ::after {
-            top: 0;
-            right: -0.75rem;
-            bottom: -0.75rem;
-            left: -0.75rem;
-          }
         }
 
         ::before {
@@ -106,13 +81,6 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
           ::before {
             border-bottom-left-radius: calc(${borderRadius} / 4);
           }
-
-          ::after {
-            top: -0.75rem;
-            right: -0.75rem;
-            bottom: -0.75rem;
-            left: 0;
-          }
         }
 
         ::before {
@@ -132,13 +100,6 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
           ::before {
             border-top-right-radius: calc(${borderRadius} / 4);
           }
-
-          ::after {
-            top: -0.75rem;
-            right: 0;
-            bottom: -0.75rem;
-            left: -0.75rem;
-          }
         }
 
         ::before {

package/lib/components/Popover/Popover.styles.js.map

@@ -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,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,MAAM,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,EAC9B,EACF,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;;;;;;;;gBAaK,GAAG;;;GAGhB,CACF,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,YAAY,EAAE,GAAG,EAAE,EAC9B,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;;;;;;;kBAOnD,GAAG;;;;;;;;;;;;;;YAcT,kBAAkB;;;;+CAIiB,YAAY;;;;;;;;;;;;;;oBAcvC,MAAM;qBACL,MAAM;;;;;;;YAOf,kBAAkB;;;;2CAIa,YAAY;;;;;;;;;;;;;;oBAcnC,MAAM;kBACR,MAAM;;;;;;;YAOZ,kBAAkB;;;;8CAIgB,YAAY;;;;;;;;;;;;;;mBAcvC,MAAM;mBACN,MAAM;;;;;;;YAOb,kBAAkB;;;;4CAIc,YAAY;;;;;;;;;;;;;;mBAcrC,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  ({\n    theme: {\n      base: {\n        shadow: { 'low-filter': low }\n      }\n    }\n  }) => css`\n    background-color: inherit;\n\n    ::before,\n    ::after {\n      content: '';\n      display: block;\n      position: absolute;\n      background-color: inherit;\n    }\n\n    ::before {\n      inset: -0.25rem;\n      filter: ${low};\n      transform: rotate(45deg);\n    }\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: { 'low-filter': low }\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\n      ::after {\n        content: '';\n        background-color: inherit;\n        border-radius: inherit;\n        z-index: -2; /* Make sure it's under the arrow. */\n        filter: ${low};\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      }\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          ::after {\n            top: -0.75rem;\n            right: -0.75rem;\n            bottom: 0;\n            left: -0.75rem;\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          ::after {\n            top: 0;\n            right: -0.75rem;\n            bottom: -0.75rem;\n            left: -0.75rem;\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          ::after {\n            top: -0.75rem;\n            right: -0.75rem;\n            bottom: -0.75rem;\n            left: 0;\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          ::after {\n            top: -0.75rem;\n            right: 0;\n            bottom: -0.75rem;\n            left: -0.75rem;\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"]}
+{"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,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK7C,CAAC;AAEF,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,GAAG,EAAE,EAChB,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,GAAG;;;;;;;;YAQX,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 StyledPopoverContent = styled.div`\n  max-width: inherit;\n  max-height: inherit;\n  border-radius: inherit;\n  overflow: auto;\n`;\n\nexport const StyledPopover = styled.div<{ offset?: number }>(\n  ({\n    theme: {\n      base: {\n        'border-radius': borderRadius,\n        'z-index': { popover: zIndex },\n        shadow: { low }\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: ${low};\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"]}

package/lib/components/Popover/PopoverContext.d.ts

@@ -1,6 +1,7 @@
 export interface PopoverContextValue {
     checkActive: (id: string, groupId: string) => boolean;
     setActive: (id: string, groupId: string) => void;
+    popovers: Record<string, string>;
 }
 export declare const PopoverManagerContext: import("react").Context<PopoverContextValue>;
 //# sourceMappingURL=PopoverContext.d.ts.map

package/lib/components/Popover/PopoverContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverContext.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverContext.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IACtD,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,qBAAqB,8CAGhC,CAAC"}
+{"version":3,"file":"PopoverContext.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverContext.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IACtD,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,qBAAqB,8CAIhC,CAAC"}

package/lib/components/Popover/PopoverContext.js

@@ -1,6 +1,7 @@
 import { createContext } from 'react';
 export const PopoverManagerContext = createContext({
     checkActive: () => true,
-    setActive: () => { }
+    setActive: () => { },
+    popovers: {}
 });
 //# sourceMappingURL=PopoverContext.js.map

package/lib/components/Popover/PopoverContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverContext.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAOtC,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAsB;IACtE,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI;IACvB,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC;CACpB,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\nexport interface PopoverContextValue {\n  checkActive: (id: string, groupId: string) => boolean;\n  setActive: (id: string, groupId: string) => void;\n}\n\nexport const PopoverManagerContext = createContext<PopoverContextValue>({\n  checkActive: () => true,\n  setActive: () => {}\n});\n"]}
+{"version":3,"file":"PopoverContext.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAQtC,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAsB;IACtE,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI;IACvB,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC;IACnB,QAAQ,EAAE,EAAE;CACb,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\nexport interface PopoverContextValue {\n  checkActive: (id: string, groupId: string) => boolean;\n  setActive: (id: string, groupId: string) => void;\n  popovers: Record<string, string>;\n}\n\nexport const PopoverManagerContext = createContext<PopoverContextValue>({\n  checkActive: () => true,\n  setActive: () => {},\n  popovers: {}\n});\n"]}

package/lib/components/Popover/PopoverManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverManager.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAI/D,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAuB9D,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"PopoverManager.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAI/D,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAwB9D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/Popover/PopoverManager.js

@@ -13,7 +13,8 @@ const PopoverManager = ({ children }) => {
     };
     return (_jsx(PopoverManagerContext.Provider, { value: {
             checkActive,
-            setActive
+            setActive,
+            popovers
         }, children: children }));
 };
 export default PopoverManager;

package/lib/components/Popover/PopoverManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverManager.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverManager.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,cAAc,GAA+C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAyB,EAAE,CAAC,CAAC;IAErE,MAAM,WAAW,GAAG,CAAC,EAAU,EAAE,OAAe,EAAW,EAAE;QAC3D,OAAO,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,EAAU,EAAE,OAAe,EAAE,EAAE;QAChD,WAAW,CAAC,IAAI,CAAC,EAAE;YACjB,OAAO,EAAE,GAAG,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,qBAAqB,CAAC,QAAQ,IAC7B,KAAK,EAAE;YACL,WAAW;YACX,SAAS;SACV,YAEA,QAAQ,GACsB,CAClC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, useState } from 'react';\n\nimport { PopoverManagerContext } from './PopoverContext';\n\nconst PopoverManager: FunctionComponent<{ children: ReactNode }> = ({ children }) => {\n  const [popovers, setPopovers] = useState<Record<string, string>>({});\n\n  const checkActive = (id: string, groupId: string): boolean => {\n    return popovers[groupId] === id;\n  };\n\n  const setActive = (id: string, groupId: string) => {\n    setPopovers(curr => {\n      return { ...curr, [groupId]: id };\n    });\n  };\n\n  return (\n    <PopoverManagerContext.Provider\n      value={{\n        checkActive,\n        setActive\n      }}\n    >\n      {children}\n    </PopoverManagerContext.Provider>\n  );\n};\n\nexport default PopoverManager;\n"]}
+{"version":3,"file":"PopoverManager.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverManager.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,cAAc,GAA+C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAyB,EAAE,CAAC,CAAC;IAErE,MAAM,WAAW,GAAG,CAAC,EAAU,EAAE,OAAe,EAAW,EAAE;QAC3D,OAAO,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,EAAU,EAAE,OAAe,EAAE,EAAE;QAChD,WAAW,CAAC,IAAI,CAAC,EAAE;YACjB,OAAO,EAAE,GAAG,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,qBAAqB,CAAC,QAAQ,IAC7B,KAAK,EAAE;YACL,WAAW;YACX,SAAS;YACT,QAAQ;SACT,YAEA,QAAQ,GACsB,CAClC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, useState } from 'react';\n\nimport { PopoverManagerContext } from './PopoverContext';\n\nconst PopoverManager: FunctionComponent<{ children: ReactNode }> = ({ children }) => {\n  const [popovers, setPopovers] = useState<Record<string, string>>({});\n\n  const checkActive = (id: string, groupId: string): boolean => {\n    return popovers[groupId] === id;\n  };\n\n  const setActive = (id: string, groupId: string) => {\n    setPopovers(curr => {\n      return { ...curr, [groupId]: id };\n    });\n  };\n\n  return (\n    <PopoverManagerContext.Provider\n      value={{\n        checkActive,\n        setActive,\n        popovers\n      }}\n    >\n      {children}\n    </PopoverManagerContext.Provider>\n  );\n};\n\nexport default PopoverManager;\n"]}

package/lib/components/Popover/modifiers.d.ts

@@ -1,3 +1,5 @@
 import { Modifier } from '@popperjs/core';
 export declare const sameWidth: Modifier<'sameWidth', object>;
+export declare const maxSize: Modifier<'maxSize', object>;
+export declare const applyMaxSize: Modifier<'applyMaxSize', object>;
 //# sourceMappingURL=modifiers.d.ts.map

package/lib/components/Popover/modifiers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modifiers.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/modifiers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,WAAW,EAAE,MAAM,CAQlD,CAAC"}
+{"version":3,"file":"modifiers.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/modifiers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1D,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,WAAW,EAAE,MAAM,CAQlD,CAAC;AAGH,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,SAAS,EAAE,MAAM,CAmB9C,CAAC;AAGH,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,cAAc,EAAE,MAAM,CASxD,CAAC"}

package/lib/components/Popover/modifiers.js

@@ -1,4 +1,5 @@
-// eslint-disable-next-line import/prefer-default-export
+import { detectOverflow } from '@popperjs/core';
+// taken from https://codesandbox.io/s/bitter-sky-pe3z9?file=/src/index.js
 export const sameWidth = Object.freeze({
     name: 'sameWidth',
     enabled: true,
@@ -8,4 +9,34 @@ export const sameWidth = Object.freeze({
     },
     requires: ['computeStyles']
 });
+// taken from https://github.com/atomiks/popper.js/blob/master/src/modifiers/maxSize.js
+export const maxSize = Object.freeze({
+    name: 'maxSize',
+    enabled: true,
+    phase: 'main',
+    requiresIfExists: ['offset', 'preventOverflow', 'flip'],
+    fn({ state, name, options }) {
+        const overflow = detectOverflow(state, options);
+        const { x, y } = state.modifiersData.preventOverflow || { x: 0, y: 0 };
+        const { width, height } = state.rects.popper;
+        const [basePlacement] = state.placement.split('-');
+        const widthProp = basePlacement === 'left' ? 'left' : 'right';
+        const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
+        state.modifiersData[name] = {
+            width: width - overflow[widthProp] - x,
+            height: height - overflow[heightProp] - y
+        };
+    }
+});
+// taken from https://codesandbox.io/s/great-tesla-3roz7?file=/src/index.js
+export const applyMaxSize = Object.freeze({
+    name: 'applyMaxSize',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['maxSize'],
+    fn({ state }) {
+        const { height } = state.modifiersData.maxSize;
+        state.styles.popper.maxHeight = `${height}px`;
+    }
+});
 //# sourceMappingURL=modifiers.js.map

package/lib/components/Popover/modifiers.js.map

@@ -1 +1 @@
-{"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../../../src/components/Popover/modifiers.ts"],"names":[],"mappings":"AAEA,wDAAwD;AACxD,MAAM,CAAC,MAAM,SAAS,GAAkC,MAAM,CAAC,MAAM,CAAC;IACpE,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,aAAa;IACpB,EAAE,CAAC,EAAE,KAAK,EAAE;QACV,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IACjE,CAAC;IACD,QAAQ,EAAE,CAAC,eAAe,CAAC;CAC5B,CAAC,CAAC","sourcesContent":["import { Modifier } from '@popperjs/core';\n\n// eslint-disable-next-line import/prefer-default-export\nexport const sameWidth: Modifier<'sameWidth', object> = Object.freeze({\n  name: 'sameWidth',\n  enabled: true,\n  phase: 'beforeWrite',\n  fn({ state }) {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  requires: ['computeStyles']\n});\n"]}
+{"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../../../src/components/Popover/modifiers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAY,MAAM,gBAAgB,CAAC;AAE1D,0EAA0E;AAC1E,MAAM,CAAC,MAAM,SAAS,GAAkC,MAAM,CAAC,MAAM,CAAC;IACpE,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,aAAa;IACpB,EAAE,CAAC,EAAE,KAAK,EAAE;QACV,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IACjE,CAAC;IACD,QAAQ,EAAE,CAAC,eAAe,CAAC;CAC5B,CAAC,CAAC;AAEH,uFAAuF;AACvF,MAAM,CAAC,MAAM,OAAO,GAAgC,MAAM,CAAC,MAAM,CAAC;IAChE,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,MAAM;IACb,gBAAgB,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,MAAM,CAAC;IACvD,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE;QACzB,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAChD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC,aAAa,CAAC,eAAe,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QACvE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;QAC7C,MAAM,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAEnD,MAAM,SAAS,GAAG,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAC9D,MAAM,UAAU,GAAG,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;QAE9D,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG;YAC1B,KAAK,EAAE,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;YACtC,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC;SAC1C,CAAC;IACJ,CAAC;CACF,CAAC,CAAC;AAEH,2EAA2E;AAC3E,MAAM,CAAC,MAAM,YAAY,GAAqC,MAAM,CAAC,MAAM,CAAC;IAC1E,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,CAAC,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,KAAK,EAAE;QACV,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC;QAC/C,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,GAAG,GAAG,MAAM,IAAI,CAAC;IAChD,CAAC;CACF,CAAC,CAAC","sourcesContent":["import { detectOverflow, Modifier } from '@popperjs/core';\n\n// taken from https://codesandbox.io/s/bitter-sky-pe3z9?file=/src/index.js\nexport const sameWidth: Modifier<'sameWidth', object> = Object.freeze({\n  name: 'sameWidth',\n  enabled: true,\n  phase: 'beforeWrite',\n  fn({ state }) {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  requires: ['computeStyles']\n});\n\n// taken from https://github.com/atomiks/popper.js/blob/master/src/modifiers/maxSize.js\nexport const maxSize: Modifier<'maxSize', object> = Object.freeze({\n  name: 'maxSize',\n  enabled: true,\n  phase: 'main',\n  requiresIfExists: ['offset', 'preventOverflow', 'flip'],\n  fn({ state, name, options }) {\n    const overflow = detectOverflow(state, options);\n    const { x, y } = state.modifiersData.preventOverflow || { x: 0, y: 0 };\n    const { width, height } = state.rects.popper;\n    const [basePlacement] = state.placement.split('-');\n\n    const widthProp = basePlacement === 'left' ? 'left' : 'right';\n    const heightProp = basePlacement === 'top' ? 'top' : 'bottom';\n\n    state.modifiersData[name] = {\n      width: width - overflow[widthProp] - x,\n      height: height - overflow[heightProp] - y\n    };\n  }\n});\n\n// taken from https://codesandbox.io/s/great-tesla-3roz7?file=/src/index.js\nexport const applyMaxSize: Modifier<'applyMaxSize', object> = Object.freeze({\n  name: 'applyMaxSize',\n  enabled: true,\n  phase: 'beforeWrite',\n  requires: ['maxSize'],\n  fn({ state }) {\n    const { height } = state.modifiersData.maxSize;\n    state.styles.popper.maxHeight = `${height}px`;\n  }\n});\n"]}

package/lib/components/Progress/Ring.js

@@ -52,8 +52,8 @@ export const StyledProgressRing = styled.div(({ theme, placement, determinate })
           vertical-align: top;
         `
         : css `
-          width: ${placement === 'global' ? '4' : '2'}rem;
-          height: ${placement === 'global' ? '4' : '2'}rem;
+          width: 2rem;
+          height: 2rem;
         `}
   `;
 });

package/lib/components/Progress/Ring.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ring.js","sourceRoot":"","sources":["../../../src/components/Progress/Ring.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmB,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAE1C,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;kBAsBM,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;;;;;oBASnC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;qDACV,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;cACjE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;YAElC,CAAC,WAAW;QACd,GAAG,CAAA;8CACiC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;WAC7D;;;;;MAKL,SAAS,KAAK,QAAQ;QACtB,CAAC,CAAC,GAAG,CAAA;;;SAGF;QACH,CAAC,CAAC,GAAG,CAAA;mBACQ,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;oBACjC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;SAC7C;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,IAAI,GAAqC,UAAU,CACvD,CACE,EACE,KAAK,EACL,QAAQ,GAAG,CAAC,EACZ,QAAQ,GAAG,GAAG,EACd,SAAS,EACT,GAAG,SAAS,EACmB,EACjC,GAAyB,EACzB,EAAE;IACF,IAAI,gBAAgB,CAAC;IACrB,MAAM,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IAEnC,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,gBAAgB,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;SAC5E,IAAI,KAAK,GAAG,QAAQ,IAAI,QAAQ,GAAG,QAAQ;QAAE,gBAAgB,GAAG,CAAC,CAAC;SAClE,IAAI,KAAK,GAAG,QAAQ;QAAE,gBAAgB,GAAG,aAAa,CAAC;;QACvD,gBAAgB,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG,aAAa,CAAC;IAEzF,OAAO,CACL,KAAC,kBAAkB,IACjB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,aAAa,mBACH,QAAQ,mBACR,QAAQ,mBACR,KAAK,EACpB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,OAAO,KAAK,KAAK,QAAQ,KAClC,SAAS,YAEb,eAAK,OAAO,EAAC,WAAW,aACtB,kBAAU,EACV,iBAAQ,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,gBAAgB,EAAE,GAAI,IACnE,GACa,CACtB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\n\nimport { ProgressProps } from './Progress.types';\n\nexport const StyledProgressRing = styled.div<\n  Pick<ProgressProps, 'placement'> & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  return css`\n    position: relative;\n    min-width: 1em;\n    min-height: 1em;\n\n    @keyframes LoadingRing {\n      0% {\n        transform: rotate(0deg);\n      }\n\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    svg {\n      display: block;\n      position: absolute;\n      height: 100%;\n\n      circle {\n        fill: transparent;\n        stroke: ${theme.base.colors.gray['extra-light']};\n        stroke-width: 2;\n        r: 45%;\n        cx: 50%;\n        cy: 50%;\n        transform: rotate(-90deg);\n        transform-origin: 50% 50%;\n\n        &:nth-child(2) {\n          stroke: ${theme.components.progress['progress-color']};\n          transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n\n          ${!determinate &&\n          css`\n            animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;\n          `}\n        }\n      }\n    }\n\n    ${placement === 'inline'\n      ? css`\n          display: inline-flex;\n          vertical-align: top;\n        `\n      : css`\n          width: ${placement === 'global' ? '4' : '2'}rem;\n          height: ${placement === 'global' ? '4' : '2'}rem;\n        `}\n  `;\n});\n\nStyledProgressRing.defaultProps = defaultThemeProp;\n\nconst Ring: FC<ProgressProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      minValue = 0,\n      maxValue = 100,\n      placement,\n      ...restProps\n    }: PropsWithoutRef<ProgressProps>,\n    ref: ProgressProps['ref']\n  ) => {\n    let strokeDashoffset;\n    const circumference = 18 * Math.PI;\n\n    if (typeof value !== 'number') strokeDashoffset = (1 - 33 / 100) * circumference;\n    else if (value > maxValue || minValue > maxValue) strokeDashoffset = 0;\n    else if (value < minValue) strokeDashoffset = circumference;\n    else strokeDashoffset = (1 - (value - minValue) / (maxValue - minValue)) * circumference;\n\n    return (\n      <StyledProgressRing\n        ref={ref}\n        role='progressbar'\n        aria-valuemin={minValue}\n        aria-valuemax={maxValue}\n        aria-valuenow={value}\n        placement={placement}\n        determinate={typeof value === 'number'}\n        {...restProps}\n      >\n        <svg viewBox='0 0 20 20'>\n          <circle />\n          <circle strokeDasharray={circumference} style={{ strokeDashoffset }} />\n        </svg>\n      </StyledProgressRing>\n    );\n  }\n);\n\nexport default Ring;\n"]}
+{"version":3,"file":"Ring.js","sourceRoot":"","sources":["../../../src/components/Progress/Ring.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmB,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAE1C,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;kBAsBM,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;;;;;oBASnC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;qDACV,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;cACjE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;YAElC,CAAC,WAAW;QACd,GAAG,CAAA;8CACiC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;WAC7D;;;;;MAKL,SAAS,KAAK,QAAQ;QACtB,CAAC,CAAC,GAAG,CAAA;;;SAGF;QACH,CAAC,CAAC,GAAG,CAAA;;;SAGF;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,IAAI,GAAqC,UAAU,CACvD,CACE,EACE,KAAK,EACL,QAAQ,GAAG,CAAC,EACZ,QAAQ,GAAG,GAAG,EACd,SAAS,EACT,GAAG,SAAS,EACmB,EACjC,GAAyB,EACzB,EAAE;IACF,IAAI,gBAAgB,CAAC;IACrB,MAAM,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IAEnC,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,gBAAgB,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;SAC5E,IAAI,KAAK,GAAG,QAAQ,IAAI,QAAQ,GAAG,QAAQ;QAAE,gBAAgB,GAAG,CAAC,CAAC;SAClE,IAAI,KAAK,GAAG,QAAQ;QAAE,gBAAgB,GAAG,aAAa,CAAC;;QACvD,gBAAgB,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG,aAAa,CAAC;IAEzF,OAAO,CACL,KAAC,kBAAkB,IACjB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,aAAa,mBACH,QAAQ,mBACR,QAAQ,mBACR,KAAK,EACpB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,OAAO,KAAK,KAAK,QAAQ,KAClC,SAAS,YAEb,eAAK,OAAO,EAAC,WAAW,aACtB,kBAAU,EACV,iBAAQ,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,gBAAgB,EAAE,GAAI,IACnE,GACa,CACtB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\n\nimport { ProgressProps } from './Progress.types';\n\nexport const StyledProgressRing = styled.div<\n  Pick<ProgressProps, 'placement'> & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  return css`\n    position: relative;\n    min-width: 1em;\n    min-height: 1em;\n\n    @keyframes LoadingRing {\n      0% {\n        transform: rotate(0deg);\n      }\n\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    svg {\n      display: block;\n      position: absolute;\n      height: 100%;\n\n      circle {\n        fill: transparent;\n        stroke: ${theme.base.colors.gray['extra-light']};\n        stroke-width: 2;\n        r: 45%;\n        cx: 50%;\n        cy: 50%;\n        transform: rotate(-90deg);\n        transform-origin: 50% 50%;\n\n        &:nth-child(2) {\n          stroke: ${theme.components.progress['progress-color']};\n          transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n\n          ${!determinate &&\n          css`\n            animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;\n          `}\n        }\n      }\n    }\n\n    ${placement === 'inline'\n      ? css`\n          display: inline-flex;\n          vertical-align: top;\n        `\n      : css`\n          width: 2rem;\n          height: 2rem;\n        `}\n  `;\n});\n\nStyledProgressRing.defaultProps = defaultThemeProp;\n\nconst Ring: FC<ProgressProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      minValue = 0,\n      maxValue = 100,\n      placement,\n      ...restProps\n    }: PropsWithoutRef<ProgressProps>,\n    ref: ProgressProps['ref']\n  ) => {\n    let strokeDashoffset;\n    const circumference = 18 * Math.PI;\n\n    if (typeof value !== 'number') strokeDashoffset = (1 - 33 / 100) * circumference;\n    else if (value > maxValue || minValue > maxValue) strokeDashoffset = 0;\n    else if (value < minValue) strokeDashoffset = circumference;\n    else strokeDashoffset = (1 - (value - minValue) / (maxValue - minValue)) * circumference;\n\n    return (\n      <StyledProgressRing\n        ref={ref}\n        role='progressbar'\n        aria-valuemin={minValue}\n        aria-valuemax={maxValue}\n        aria-valuenow={value}\n        placement={placement}\n        determinate={typeof value === 'number'}\n        {...restProps}\n      >\n        <svg viewBox='0 0 20 20'>\n          <circle />\n          <circle strokeDasharray={circumference} style={{ strokeDashoffset }} />\n        </svg>\n      </StyledProgressRing>\n    );\n  }\n);\n\nexport default Ring;\n"]}

package/lib/components/RadioButton/RadioButton.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ChangeEvent, FC } from 'react';
 import { FormControlProps } from '../FormControl';
 import { RadioCheckProps } from '../RadioCheck';
 import type { ForwardProps, NoChildrenProp } from '../../types';
@@ -27,6 +27,8 @@ export interface RadioButtonProps extends NoChildrenProp {
      * @default false
      */
     indeterminate?: RadioCheckProps['indeterminate'];
+    /** Callback invoked when this particular radio button is selected. */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 declare const RB: FC<RadioButtonProps & ForwardProps>;
 export default RB;

package/lib/components/RadioButton/RadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;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,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,oEAAoE;IACpE,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD;;;OAGG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;CAClD;AAGD,QAAA,MAAM,EAAE,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAI3C,CAAC;AAKF,eAAe,EAAE,CAAC"}
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;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,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,oEAAoE;IACpE,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD;;;OAGG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACvD;AAGD,QAAA,MAAM,EAAE,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAI3C,CAAC;AAKF,eAAe,EAAE,CAAC"}

package/lib/components/RadioButton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAO,MAAM,OAAO,CAAC;AAG5C,OAAO,UAA+B,MAAM,eAAe,CAAC;AA8B5D,6FAA6F;AAC7F,MAAM,EAAE,GAAwC,UAAU,CACxD,CAAC,KAAuB,EAAE,GAA0B,EAAE,EAAE,CAAC,CACvD,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,GAAI,CACjD,CACF,CAAC;AAEF,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport type { ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface RadioButtonProps extends 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  /** 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 checked prop via onChange when using as controlled component. */\n  checked?: RadioCheckProps['checked'];\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: RadioCheckProps['defaultChecked'];\n  /**\n   * Sets Radio Button to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-radio-buttons).\n   * @default false\n   */\n  indeterminate?: RadioCheckProps['indeterminate'];\n}\n\n// Odd issue with SB doc prop table not being generated when called RadioButton...so using RB\nconst RB: FC<RadioButtonProps & ForwardProps> = forwardRef(\n  (props: RadioButtonProps, ref: Ref<HTMLInputElement>) => (\n    <RadioCheck {...props} type='radio' ref={ref} />\n  )\n);\n\n// Adding here for doc purposes only\nRB.defaultProps = RadioCheck.defaultProps;\n\nexport default RB;\n"]}
+{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,UAAU,EAAO,MAAM,OAAO,CAAC;AAGzD,OAAO,UAA+B,MAAM,eAAe,CAAC;AAgC5D,6FAA6F;AAC7F,MAAM,EAAE,GAAwC,UAAU,CACxD,CAAC,KAAuB,EAAE,GAA0B,EAAE,EAAE,CAAC,CACvD,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,GAAI,CACjD,CACF,CAAC;AAEF,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { ChangeEvent, FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport type { ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface RadioButtonProps extends 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  /** 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 checked prop via onChange when using as controlled component. */\n  checked?: RadioCheckProps['checked'];\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: RadioCheckProps['defaultChecked'];\n  /**\n   * Sets Radio Button to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-radio-buttons).\n   * @default false\n   */\n  indeterminate?: RadioCheckProps['indeterminate'];\n  /** Callback invoked when this particular radio button is selected. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n}\n\n// Odd issue with SB doc prop table not being generated when called RadioButton...so using RB\nconst RB: FC<RadioButtonProps & ForwardProps> = forwardRef(\n  (props: RadioButtonProps, ref: Ref<HTMLInputElement>) => (\n    <RadioCheck {...props} type='radio' ref={ref} />\n  )\n);\n\n// Adding here for doc purposes only\nRB.defaultProps = RadioCheck.defaultProps;\n\nexport default RB;\n"]}

package/lib/components/RadioCheck/RadioCheck.d.ts

@@ -39,6 +39,8 @@ export interface RadioCheckProps extends BaseProps, NoChildrenProp {
     onClick?: MouseEventHandler<HTMLInputElement>;
     /** Callback function for onKeyDown events. */
     onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    /** Pass a heading and content to show additional information on the field. */
+    additionalInfo?: FormControlProps['additionalInfo'];
     /** Ref forwarded to the underlying input. */
     ref?: Ref<HTMLInputElement>;
 }

package/lib/components/RadioCheck/RadioCheck.d.ts.map

@@ -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;AAKtE,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,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,sBAAsB,mJAiDlC,CAAC;AAIF,eAAO,MAAM,qBAAqB,2GAgGhC,CAAC;AAIH,eAAO,MAAM,gBAAgB,qJA6C5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kKA2DhC,CAAC;AAIF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CAiFlD,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"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,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,qJA6C5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kKA2DhC,CAAC;AAIF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CAwFlD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/RadioCheck/RadioCheck.js

@@ -6,9 +6,10 @@ import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils/utils';
-import { useConsolidatedRef, useDirection, useUID } from '../../hooks';
+import { useConsolidatedRef, useDirection, useI18n, useUID } from '../../hooks';
 import { StyledLabel } from '../Label';
 import { calculateFontSize } from '../../styles';
+import VisuallyHiddenText from '../VisuallyHiddenText';
 export const StyledPseudoRadioCheck = styled.div(props => {
     const { theme: { base: { spacing, palette: { 'primary-background': primaryBackground } }, components: { 'form-field': formField, 'radio-check': { size, 'touch-size': touchSize, 'background-color': backgroundColor, 'border-color': borderColor, 'border-width': borderWidth } } }, status } = props;
     const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;
@@ -38,7 +39,7 @@ export const StyledPseudoRadioCheck = styled.div(props => {
 });
 StyledPseudoRadioCheck.defaultProps = defaultThemeProp;
 export const StyledRadioCheckInput = styled.input(props => {
-    const { 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;
+    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;
     const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;
     const foreground = tryCatch(() => readableColor(backgroundColor));
     const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;
@@ -46,7 +47,7 @@ export const StyledRadioCheckInput = styled.input(props => {
     return css `
     ${hideVisually}
 
-    ${!(props.disabled || props.readOnly) &&
+    ${!disabled &&
         css `
       &:focus ${prcSelector} {
         box-shadow: ${shadow};
@@ -185,7 +186,8 @@ export const StyledRadioCheckCard = styled.label(({ disabled, readOnly, status,
 StyledRadioCheckCard.defaultProps = defaultThemeProp;
 const RadioCheck = forwardRef((props, ref) => {
     const uid = useUID();
-    const { type, id = uid, label, required = false, disabled = false, indeterminate = false, readOnly = false, variant = 'simple', onClick, onKeyDown, status, ...restProps } = props;
+    const t = useI18n();
+    const { type, id = uid, label, required = false, disabled = false, indeterminate = false, readOnly = false, variant = 'simple', onClick, onKeyDown, status, additionalInfo, ...restProps } = props;
     const isRadio = type === 'radio';
     const card = variant === 'card';
     const newRef = useConsolidatedRef(ref);
@@ -194,7 +196,7 @@ const RadioCheck = forwardRef((props, ref) => {
             newRef.current.indeterminate = !!indeterminate;
         }
     }, [newRef, indeterminate, isRadio]);
-    return (_jsx(FormField, { as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, isRadio: isRadio, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly }), label] }), labelAs: card ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, inline: true, labelAfter: true, children: _jsx(StyledRadioCheckInput, { ...restProps, id: id, type: type, required: required, disabled: disabled, readOnly: readOnly, "aria-readonly": readOnly, onClick: (e) => {
+    return (_jsx(FormField, { as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, isRadio: isRadio, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly }), _jsxs(_Fragment, { children: [label, readOnly && _jsx(VisuallyHiddenText, { children: ` ${t('read_only')}` })] })] }), labelAs: card ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, isRadioCheck: true, inline: true, labelAfter: true, additionalInfo: additionalInfo, children: _jsx(StyledRadioCheckInput, { ...restProps, id: id, type: type, required: required, disabled: disabled, readOnly: readOnly, onClick: (e) => {
                 if (readOnly)
                     e.preventDefault();
                 onClick?.(e);