@veeqo/ui 9.0.0-beta-3 → 9.0.0

package/dist/components/Pagination/styled.js

@@ -1,22 +1,12 @@
-import o from"styled-components";import{theme as t}from"../../theme/index.js";import{Stack as r}from"../Stack/Stack.js";import{Button as e}from"../Button/Button.js";import{TextField as i}from"../TextField/index.js";const s=o(r)`
-  width: ${t.sizes.lg};
-  height: 30px;
-  background-color: ${t.colors.neutral.grey.light};
+import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
+import { Stack } from '../Stack/Stack.js';
+import { Button } from '../Button/Button.js';
+import { TextField } from '../TextField/index.js';
 
-  border: 1px solid ${t.colors.neutral.grey.base};
-  border-radius: ${t.sizes.xs};
-`,p=o(e)`
-  color: ${t.colors.neutral.ink.base};
-  width: 32px;
-  height: 32px;
+const PageLimitContainer = styled(Stack).withConfig({ displayName: "vui--PageLimitContainer", componentId: "vui--11yg0z2" }) `width:${theme.sizes.lg};height:30px;background-color:${theme.colors.neutral.grey.light};border:1px solid ${theme.colors.neutral.grey.base};border-radius:${theme.sizes.xs};`;
+const PaginationButton = styled(Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--1xoa6c5" }) `color:${theme.colors.neutral.ink.base};width:32px;height:32px;svg{width:24px;height:24px;}`;
+const PageInput = styled(TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--vpfeol" }) `&[type='number']{width:5.5ch;}`;
 
-  svg {
-    width: 24px;
-    height: 24px;
-  }
-`,d=o(i)`
-  &[type='number'] {
-    width: 5.5ch;
-  }
-`;export{d as PageInput,s as PageLimitContainer,p as PaginationButton};
+export { PageInput, PageLimitContainer, PaginationButton };
 //# sourceMappingURL=styled.js.map

package/dist/components/Pagination/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":[null],"names":["theme","colors","neutral","grey","base"],"mappings":";;;;;sBA0BsBA,EAAAC,OAAAC,QAAAC,KAAAC;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAMa,MAAA,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACpC,KAAK,CAAC,KAAK,CAAC,EAAE,iCAEH,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAE/B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,kBACjC,KAAK,CAAC,KAAK,CAAC,EAAE;AAGpB,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACnC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;MAU3B,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8BAAA;;;;"}

package/dist/components/Pagination/types.d.ts

@@ -6,4 +6,3 @@ export type PaginationProps = {
     handleChangePage: (newPageIndex: number) => void;
 };
 export type UsePaginationInputs = Omit<PaginationProps, 'testId'>;
-//# sourceMappingURL=types.d.ts.map

package/dist/components/Popover/Popover.cjs

@@ -1,2 +1,66 @@
-"use strict";var e=require("react"),r=require("react-popper"),o=require("resize-observer-polyfill"),t=require("../Portal/Portal.cjs"),n=require("../../theme/index.cjs"),s=require("./styled.cjs"),l=require("../../utils/generateId.cjs"),u=require("./hooks/useUpdateAriaAnchor.cjs"),a=require("./hooks/useHandleFocus.cjs");function c(e){return e&&e.__esModule?e:{default:e}}var i=c(e),d=c(o);exports.Popover=({id:o,children:c,zIndex:p=n.theme.layers.popup,placement:m="bottom",anchorElement:f,rootElementRef:h,onShouldClose:v,style:E,disableFocusLock:q,removeBackdrop:k=!1,useAnchorWidth:y,...b})=>{const[w,j]=e.useState(null),{styles:z,attributes:I,update:P}=r.usePopper(f,w,{placement:m}),x=e.useMemo((()=>o||l.generateId("popover")),[o]);u.useUpdateAriaAnchor({anchorElement:f,popoverId:x});const A=()=>{null==f||f.focus(),null==v||v()},{handleKeyDown:F}=a.useHandleFocus({popperElement:w,anchorElement:f,onClose:A,disableFocusLock:q});return e.useEffect((()=>{if(!P||!w)return;const e=new d.default(P);return e.observe(w),()=>e.disconnect()}),[P,w]),e.useEffect((()=>{if(P)return window.addEventListener("resize",P),()=>window.removeEventListener("resize",P)}),[P]),i.default.createElement(t.Portal,{rootElementRef:h},!k&&i.default.createElement(s.Backdrop,{onClick:A,zIndex:p,"data-testid":"popover-backdrop"}),i.default.createElement(s.PopoverDialog,{open:!0,id:x,zIndex:p,ref:j,style:{...z.popper,...E,...y?{minWidth:null==f?void 0:f.clientWidth}:{}},onKeyDown:F,...I.popper,...b},c))};
+'use strict';
+
+var React = require('react');
+var reactPopper = require('react-popper');
+var ResizeObserver = require('resize-observer-polyfill');
+var Portal = require('../Portal/Portal.cjs');
+var index = require('../../theme/index.cjs');
+var styled = require('./styled.cjs');
+var generateId = require('../../utils/generateId.cjs');
+var useUpdateAriaAnchor = require('./hooks/useUpdateAriaAnchor.cjs');
+var useHandleFocus = require('./hooks/useHandleFocus.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var ResizeObserver__default = /*#__PURE__*/_interopDefaultCompat(ResizeObserver);
+
+/* eslint-disable consistent-return */
+const Popover = ({ id: passedId, children, zIndex = index.theme.layers.popup, placement = 'bottom', anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop = false, useAnchorWidth, ignoreAriaWarnings, ...dialogProps }) => {
+    // Set up PopperJS
+    const [popperElement, setPopperElement] = React.useState(null);
+    const { styles, attributes, update } = reactPopper.usePopper(anchorElement, popperElement, { placement });
+    // Setup popover id to use passed, or generate its' own.
+    const id = React.useMemo(() => passedId || generateId.generateId('popover'), [passedId]);
+    // Check and update aria for anchor, only works once this has rendered for the first time though.
+    useUpdateAriaAnchor.useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });
+    const onClose = () => {
+        anchorElement === null || anchorElement === undefined ? undefined : anchorElement.focus();
+        onShouldClose === null || onShouldClose === undefined ? undefined : onShouldClose();
+    };
+    const { handleKeyDown } = useHandleFocus.useHandleFocus({
+        popperElement,
+        anchorElement,
+        onClose,
+        disableFocusLock,
+    });
+    /**
+     * When content size is changed, force popper update
+     */
+    React.useEffect(() => {
+        if (!update || !popperElement)
+            return;
+        const resizeObserver = new ResizeObserver__default.default(update);
+        resizeObserver.observe(popperElement);
+        return () => resizeObserver.disconnect();
+    }, [update, popperElement]);
+    /**
+     * When window is resized, force popper update
+     */
+    React.useEffect(() => {
+        if (!update)
+            return;
+        window.addEventListener('resize', update);
+        return () => window.removeEventListener('resize', update);
+    }, [update]);
+    return (React__default.default.createElement(Portal.Portal, { rootElementRef: rootElementRef },
+        !removeBackdrop && (React__default.default.createElement(styled.Backdrop, { onClick: onClose, zIndex: zIndex, "data-testid": "popover-backdrop" })),
+        React__default.default.createElement(styled.PopoverDialog, { open: true, id: id, zIndex: zIndex, ref: setPopperElement, style: {
+                ...styles.popper,
+                ...style,
+                ...(useAnchorWidth ? { minWidth: anchorElement === null || anchorElement === undefined ? undefined : anchorElement.clientWidth } : {}),
+            }, onKeyDown: handleKeyDown, ...attributes.popper, ...dialogProps }, children)));
+};
+
+exports.Popover = Popover;
 //# sourceMappingURL=Popover.cjs.map

package/dist/components/Popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":[null],"names":["theme","useState","usePopper","useMemo","generateId","useUpdateAriaAnchor","useHandleFocus","useEffect","ResizeObserver","React","Portal","Backdrop","PopoverDialog"],"mappings":";;;;;;;;;;;;;;;;;AAAA;MAaa,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAGA,WAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAA2B,IAAI,CAAC;AAClF,IAAA,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAGC,qBAAS,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,SAAS,EAAE,CAAC;;AAG7F,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,qBAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvEC,uCAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,EAAI;AACnB,KAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAGC,6BAAc,CAAC;QACvC,aAAa;QACb,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACHC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa;YAAE;AAC/B,QAAA,MAAM,cAAc,GAAG,IAAIC,+BAAc,CAAC,MAAM,CAAC;AACjD,QAAA,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC;AAErC,QAAA,OAAO,MAAM,cAAc,CAAC,UAAU,EAAE;AAC1C,KAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAE3B;;AAEG;IACHD,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM;YAAE;AACb,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC;QAEzC,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC3D,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,QACEE,sBAAC,CAAA,aAAA,CAAAC,aAAM,EAAC,EAAA,cAAc,EAAE,cAAc,EAAA;AACnC,QAAA,CAAC,cAAc,KACdD,sBAAC,CAAA,aAAA,CAAAE,eAAQ,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAc,aAAA,EAAA,kBAAkB,GAAG,CAC9E;AACD,QAAAF,sBAAA,CAAA,aAAA,CAACG,oBAAa,EACZ,EAAA,IAAI,EACJ,IAAA,EAAA,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAE;gBACL,GAAG,MAAM,CAAC,MAAM;AAChB,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;AACpE,aAAA,EACD,SAAS,EAAE,aAAa,EAAA,GACpB,UAAU,CAAC,MAAM,EACjB,GAAA,WAAW,EAEd,EAAA,QAAQ,CACK,CACT;AAEb;;;;"}

package/dist/components/Popover/Popover.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { PopoverProps } from './types';
-export declare const Popover: ({ id: passedId, children, zIndex, placement, anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop, useAnchorWidth, ...dialogProps }: PopoverProps) => React.JSX.Element;
-//# sourceMappingURL=Popover.d.ts.map
+export declare const Popover: ({ id: passedId, children, zIndex, placement, anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop, useAnchorWidth, ignoreAriaWarnings, ...dialogProps }: PopoverProps) => React.JSX.Element;

package/dist/components/Popover/Popover.js

@@ -1,2 +1,59 @@
-import e,{useState as o,useMemo as r,useEffect as t}from"react";import{usePopper as n}from"react-popper";import l from"resize-observer-polyfill";import{Portal as s}from"../Portal/Portal.js";import{theme as p}from"../../theme/index.js";import{Backdrop as i,PopoverDialog as m}from"./styled.js";import{generateId as d}from"../../utils/generateId.js";import{useUpdateAriaAnchor as c}from"./hooks/useUpdateAriaAnchor.js";import{useHandleFocus as a}from"./hooks/useHandleFocus.js";const u=({id:u,children:f,zIndex:h=p.layers.popup,placement:E="bottom",anchorElement:v,rootElementRef:y,onShouldClose:b,style:k,disableFocusLock:w,removeBackdrop:j=!1,useAnchorWidth:z,...x})=>{const[I,L]=o(null),{styles:A,attributes:C,update:F}=n(v,I,{placement:E}),W=r((()=>u||d("popover")),[u]);c({anchorElement:v,popoverId:W});const D=()=>{null==v||v.focus(),null==b||b()},{handleKeyDown:K}=a({popperElement:I,anchorElement:v,onClose:D,disableFocusLock:w});return t((()=>{if(!F||!I)return;const e=new l(F);return e.observe(I),()=>e.disconnect()}),[F,I]),t((()=>{if(F)return window.addEventListener("resize",F),()=>window.removeEventListener("resize",F)}),[F]),e.createElement(s,{rootElementRef:y},!j&&e.createElement(i,{onClick:D,zIndex:h,"data-testid":"popover-backdrop"}),e.createElement(m,{open:!0,id:W,zIndex:h,ref:L,style:{...A.popper,...k,...z?{minWidth:null==v?void 0:v.clientWidth}:{}},onKeyDown:K,...C.popper,...x},f))};export{u as Popover};
+import React, { useState, useMemo, useEffect } from 'react';
+import { usePopper } from 'react-popper';
+import ResizeObserver from 'resize-observer-polyfill';
+import { Portal } from '../Portal/Portal.js';
+import { theme } from '../../theme/index.js';
+import { Backdrop, PopoverDialog } from './styled.js';
+import { generateId } from '../../utils/generateId.js';
+import { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor.js';
+import { useHandleFocus } from './hooks/useHandleFocus.js';
+
+/* eslint-disable consistent-return */
+const Popover = ({ id: passedId, children, zIndex = theme.layers.popup, placement = 'bottom', anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop = false, useAnchorWidth, ignoreAriaWarnings, ...dialogProps }) => {
+    // Set up PopperJS
+    const [popperElement, setPopperElement] = useState(null);
+    const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });
+    // Setup popover id to use passed, or generate its' own.
+    const id = useMemo(() => passedId || generateId('popover'), [passedId]);
+    // Check and update aria for anchor, only works once this has rendered for the first time though.
+    useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });
+    const onClose = () => {
+        anchorElement === null || anchorElement === undefined ? undefined : anchorElement.focus();
+        onShouldClose === null || onShouldClose === undefined ? undefined : onShouldClose();
+    };
+    const { handleKeyDown } = useHandleFocus({
+        popperElement,
+        anchorElement,
+        onClose,
+        disableFocusLock,
+    });
+    /**
+     * When content size is changed, force popper update
+     */
+    useEffect(() => {
+        if (!update || !popperElement)
+            return;
+        const resizeObserver = new ResizeObserver(update);
+        resizeObserver.observe(popperElement);
+        return () => resizeObserver.disconnect();
+    }, [update, popperElement]);
+    /**
+     * When window is resized, force popper update
+     */
+    useEffect(() => {
+        if (!update)
+            return;
+        window.addEventListener('resize', update);
+        return () => window.removeEventListener('resize', update);
+    }, [update]);
+    return (React.createElement(Portal, { rootElementRef: rootElementRef },
+        !removeBackdrop && (React.createElement(Backdrop, { onClick: onClose, zIndex: zIndex, "data-testid": "popover-backdrop" })),
+        React.createElement(PopoverDialog, { open: true, id: id, zIndex: zIndex, ref: setPopperElement, style: {
+                ...styles.popper,
+                ...style,
+                ...(useAnchorWidth ? { minWidth: anchorElement === null || anchorElement === undefined ? undefined : anchorElement.clientWidth } : {}),
+            }, onKeyDown: handleKeyDown, ...attributes.popper, ...dialogProps }, children)));
+};
+
+export { Popover };
 //# sourceMappingURL=Popover.js.map

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAAA;MAaa,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC;AAClF,IAAA,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,SAAS,EAAE,CAAC;;AAG7F,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvE,mBAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,EAAI;AACnB,KAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,cAAc,CAAC;QACvC,aAAa;QACb,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa;YAAE;AAC/B,QAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC;AACjD,QAAA,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC;AAErC,QAAA,OAAO,MAAM,cAAc,CAAC,UAAU,EAAE;AAC1C,KAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAE3B;;AAEG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM;YAAE;AACb,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC;QAEzC,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC3D,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,MAAM,EAAC,EAAA,cAAc,EAAE,cAAc,EAAA;AACnC,QAAA,CAAC,cAAc,KACd,KAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAc,aAAA,EAAA,kBAAkB,GAAG,CAC9E;AACD,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EACZ,EAAA,IAAI,EACJ,IAAA,EAAA,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAE;gBACL,GAAG,MAAM,CAAC,MAAM;AAChB,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;AACpE,aAAA,EACD,SAAS,EAAE,aAAa,EAAA,GACpB,UAAU,CAAC,MAAM,EACjB,GAAA,WAAW,EAEd,EAAA,QAAQ,CACK,CACT;AAEb;;;;"}

package/dist/components/Popover/hooks/useHandleFocus.cjs

@@ -1,2 +1,86 @@
-"use strict";var e=require("react");const t='input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';exports.useHandleFocus=({popperElement:n,anchorElement:o,onClose:s,disableFocusLock:l=!1})=>{e.useEffect((()=>{if(!n||l)return;const e=n.querySelectorAll(t);e.length<1||setTimeout((()=>{e[0].focus()}),0)}),[n,l]),e.useEffect((()=>{if(!n||!n)return;const e=e=>{if("Tab"===e.key&&!e.shiftKey){const o=n.querySelectorAll(t);if(o.length<1)return void s();o[0].focus(),e.stopPropagation(),e.preventDefault()}};return null==o||o.addEventListener("keydown",e),()=>null==o?void 0:o.removeEventListener("keydown",e)}),[o,n,s]);return{handleKeyDown:e=>{n&&("Escape"===e.key?s():l||"Tab"!==e.key||(e=>{const o=n.querySelectorAll(t),s=o[0],l=o[o.length-1];e.shiftKey&&document.activeElement===s?(e.preventDefault(),l.focus()):e.shiftKey||document.activeElement!==l||(e.preventDefault(),s.focus())})(e))}}};
+'use strict';
+
+var React = require('react');
+
+const TABBABLE_SELECTORS = 'input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
+const useHandleFocus = ({ popperElement, anchorElement, onClose, disableFocusLock = false, }) => {
+    /**
+     * Focuses first element, when this gets rendered for the first time.
+     */
+    React.useEffect(() => {
+        if (!popperElement || disableFocusLock)
+            return;
+        const focusableElements = popperElement.querySelectorAll(TABBABLE_SELECTORS);
+        if (focusableElements.length < 1)
+            return;
+        setTimeout(() => {
+            focusableElements[0].focus();
+        }, 0);
+    }, [popperElement, disableFocusLock]);
+    /**
+     * Sets up tabbing into the popover.
+     *
+     * When the popover is open (pre-requisite for this being ran), and the user clicks `TAB`
+     * then the tab should move **into** the popover, instead of the natural tab order.
+     */
+    React.useEffect(() => {
+        if (!popperElement || !popperElement)
+            return;
+        const focusWithinPopper = (event) => {
+            if (event.key === 'Tab' && !event.shiftKey) {
+                const focusableElements = popperElement.querySelectorAll(TABBABLE_SELECTORS);
+                // When nothing is focusable within the popover, close popover and allow natural tab order.
+                if (focusableElements.length < 1) {
+                    onClose();
+                    return;
+                }
+                focusableElements[0].focus();
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        };
+        // When tab occurs on ref focus, if focusable elements in popover focus first.
+        anchorElement === null || anchorElement === undefined ? undefined : anchorElement.addEventListener('keydown', focusWithinPopper);
+        // eslint-disable-next-line consistent-return
+        return () => anchorElement === null || anchorElement === undefined ? undefined : anchorElement.removeEventListener('keydown', focusWithinPopper);
+    }, [anchorElement, popperElement, onClose]);
+    /**
+     * Creates focus trap within the popover itself. Stopping users tabbing back to outside the
+     * popover, or forward past the last scrollable element within.
+     */
+    const handleFocusTrap = (event) => {
+        const focusableElements = popperElement.querySelectorAll(TABBABLE_SELECTORS);
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        // If shift tabbing (BACK) and on the first element, loop to last element.
+        if (event.shiftKey && document.activeElement === firstElement) {
+            event.preventDefault();
+            lastElement.focus();
+            // If tabbing (FORWARD) and on the last element, loop to first element.
+        }
+        else if (!event.shiftKey && document.activeElement === lastElement) {
+            event.preventDefault();
+            firstElement.focus();
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (!popperElement)
+            return;
+        // Handle escape
+        if (event.key === 'Escape') {
+            onClose();
+            event.stopPropagation(); // Should only close THIS dialog.
+            event.preventDefault(); // Shouldn't close any fullscreen dialogs (Modal) it's part of
+            // Check we should enforce focus trap.
+        }
+        else if (!disableFocusLock && event.key === 'Tab') {
+            handleFocusTrap(event);
+        }
+    };
+    return {
+        handleKeyDown,
+    };
+};
+
+exports.useHandleFocus = useHandleFocus;
 //# sourceMappingURL=useHandleFocus.cjs.map

package/dist/components/Popover/hooks/useHandleFocus.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHandleFocus.cjs","sources":["../../../../src/components/Popover/hooks/useHandleFocus.ts"],"sourcesContent":[null],"names":["popperElement","anchorElement","onClose","disableFocusLock","useEffect","focusableElements","querySelectorAll","TABBABLE_SELECTORS"],"mappings":"oCAKA,QAA0B,4NACQ,EAAAA,gBAAiBC,gBAAQC,UAAAC,oBAAA,MAIzDC,EAAAA,WAAA,KAEK,IAAAJ,GAAoBG,SAwFzB,MAAAE,EAAAL,EAAAM,iBAAAC"}
+{"version":3,"file":"useHandleFocus.cjs","sources":["../../../../src/components/Popover/hooks/useHandleFocus.ts"],"sourcesContent":[null],"names":["useEffect"],"mappings":";;;;AAEA,MAAM,kBAAkB,GACtB,oMAAoM;AASzL,MAAA,cAAc,GAAG,CAAC,EAC7B,aAAa,EACb,aAAa,EACb,OAAO,EACP,gBAAgB,GAAG,KAAK,GACL,KAAI;AACvB;;AAEG;IACHA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,aAAa,IAAI,gBAAgB;YAAE;QACxC,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAE7E,QAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC;YAAE;QAElC,UAAU,CAAC,MAAK;AACb,YAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;SAC9C,EAAE,CAAC,CAAC;AACP,KAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;AAErC;;;;;AAKG;IACHA,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa;YAAE;AAEtC,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAoB,KAAI;YACjD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAC1C,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;;AAE7E,gBAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AAChC,oBAAA,OAAO,EAAE;oBACT;AACD;AAEA,gBAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;gBAC7C,KAAK,CAAC,eAAe,EAAE;gBACvB,KAAK,CAAC,cAAc,EAAE;AACvB;AACH,SAAC;;QAGD,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC;;AAG7D,QAAA,OAAO,MAAM,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC;KAC9E,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC;AAE3C;;;AAGG;AACH,IAAA,MAAM,eAAe,GAA6D,CAAC,KAAK,KAAI;QAC1F,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAC7E,QAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC;QACzC,MAAM,WAAW,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;;QAGnE,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,EAAE;YAC7D,KAAK,CAAC,cAAc,EAAE;YACrB,WAA2B,CAAC,KAAK,EAAE;;AAGrC;aAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE;YACpE,KAAK,CAAC,cAAc,EAAE;YACrB,YAA4B,CAAC,KAAK,EAAE;AACtC;AACH,KAAC;AAED,IAAA,MAAM,aAAa,GAA6D,CAAC,KAAK,KAAI;AACxF,QAAA,IAAI,CAAC,aAAa;YAAE;;AAGpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;AAC1B,YAAA,OAAO,EAAE;AACT,YAAA,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,YAAA,KAAK,CAAC,cAAc,EAAE,CAAC;;AAGxB;aAAM,IAAI,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACnD,eAAe,CAAC,KAAK,CAAC;AACvB;AACH,KAAC;IAED,OAAO;QACL,aAAa;KACd;AACH;;;;"}

package/dist/components/Popover/hooks/useHandleFocus.d.ts

@@ -9,4 +9,3 @@ export declare const useHandleFocus: ({ popperElement, anchorElement, onClose, d
     handleKeyDown: KeyboardEventHandler<HTMLDivElement | HTMLDialogElement>;
 };
 export {};
-//# sourceMappingURL=useHandleFocus.d.ts.map

package/dist/components/Popover/hooks/useHandleFocus.js

@@ -1,2 +1,84 @@
-import{useEffect as e}from"react";const t='input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])',n=({popperElement:n,anchorElement:o,onClose:l,disableFocusLock:r=!1})=>{e((()=>{if(!n||r)return;const e=n.querySelectorAll(t);e.length<1||setTimeout((()=>{e[0].focus()}),0)}),[n,r]),e((()=>{if(!n||!n)return;const e=e=>{if("Tab"===e.key&&!e.shiftKey){const o=n.querySelectorAll(t);if(o.length<1)return void l();o[0].focus(),e.stopPropagation(),e.preventDefault()}};return null==o||o.addEventListener("keydown",e),()=>null==o?void 0:o.removeEventListener("keydown",e)}),[o,n,l]);return{handleKeyDown:e=>{n&&("Escape"===e.key?l():r||"Tab"!==e.key||(e=>{const o=n.querySelectorAll(t),l=o[0],r=o[o.length-1];e.shiftKey&&document.activeElement===l?(e.preventDefault(),r.focus()):e.shiftKey||document.activeElement!==r||(e.preventDefault(),l.focus())})(e))}}};export{n as useHandleFocus};
+import { useEffect } from 'react';
+
+const TABBABLE_SELECTORS = 'input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
+const useHandleFocus = ({ popperElement, anchorElement, onClose, disableFocusLock = false, }) => {
+    /**
+     * Focuses first element, when this gets rendered for the first time.
+     */
+    useEffect(() => {
+        if (!popperElement || disableFocusLock)
+            return;
+        const focusableElements = popperElement.querySelectorAll(TABBABLE_SELECTORS);
+        if (focusableElements.length < 1)
+            return;
+        setTimeout(() => {
+            focusableElements[0].focus();
+        }, 0);
+    }, [popperElement, disableFocusLock]);
+    /**
+     * Sets up tabbing into the popover.
+     *
+     * When the popover is open (pre-requisite for this being ran), and the user clicks `TAB`
+     * then the tab should move **into** the popover, instead of the natural tab order.
+     */
+    useEffect(() => {
+        if (!popperElement || !popperElement)
+            return;
+        const focusWithinPopper = (event) => {
+            if (event.key === 'Tab' && !event.shiftKey) {
+                const focusableElements = popperElement.querySelectorAll(TABBABLE_SELECTORS);
+                // When nothing is focusable within the popover, close popover and allow natural tab order.
+                if (focusableElements.length < 1) {
+                    onClose();
+                    return;
+                }
+                focusableElements[0].focus();
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        };
+        // When tab occurs on ref focus, if focusable elements in popover focus first.
+        anchorElement === null || anchorElement === undefined ? undefined : anchorElement.addEventListener('keydown', focusWithinPopper);
+        // eslint-disable-next-line consistent-return
+        return () => anchorElement === null || anchorElement === undefined ? undefined : anchorElement.removeEventListener('keydown', focusWithinPopper);
+    }, [anchorElement, popperElement, onClose]);
+    /**
+     * Creates focus trap within the popover itself. Stopping users tabbing back to outside the
+     * popover, or forward past the last scrollable element within.
+     */
+    const handleFocusTrap = (event) => {
+        const focusableElements = popperElement.querySelectorAll(TABBABLE_SELECTORS);
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        // If shift tabbing (BACK) and on the first element, loop to last element.
+        if (event.shiftKey && document.activeElement === firstElement) {
+            event.preventDefault();
+            lastElement.focus();
+            // If tabbing (FORWARD) and on the last element, loop to first element.
+        }
+        else if (!event.shiftKey && document.activeElement === lastElement) {
+            event.preventDefault();
+            firstElement.focus();
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (!popperElement)
+            return;
+        // Handle escape
+        if (event.key === 'Escape') {
+            onClose();
+            event.stopPropagation(); // Should only close THIS dialog.
+            event.preventDefault(); // Shouldn't close any fullscreen dialogs (Modal) it's part of
+            // Check we should enforce focus trap.
+        }
+        else if (!disableFocusLock && event.key === 'Tab') {
+            handleFocusTrap(event);
+        }
+    };
+    return {
+        handleKeyDown,
+    };
+};
+
+export { useHandleFocus };
 //# sourceMappingURL=useHandleFocus.js.map

package/dist/components/Popover/hooks/useHandleFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHandleFocus.js","sources":["../../../../src/components/Popover/hooks/useHandleFocus.ts"],"sourcesContent":[null],"names":["useHandleFocus","popperElement","anchorElement","onClose","disableFocusLock","useEffect","focusableElements","querySelectorAll","TABBABLE_SELECTORS"],"mappings":"kCAKA,QAA0B,qMACxBA,EAAgC,EAAAC,gBAAiBC,gBAAQC,UAAAC,oBAAA,MAIzDC,GAAA,KAEK,IAAAJ,GAAoBG,SAwFzB,MAAAE,EAAAL,EAAAM,iBAAAC"}
+{"version":3,"file":"useHandleFocus.js","sources":["../../../../src/components/Popover/hooks/useHandleFocus.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA,MAAM,kBAAkB,GACtB,oMAAoM;AASzL,MAAA,cAAc,GAAG,CAAC,EAC7B,aAAa,EACb,aAAa,EACb,OAAO,EACP,gBAAgB,GAAG,KAAK,GACL,KAAI;AACvB;;AAEG;IACH,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,aAAa,IAAI,gBAAgB;YAAE;QACxC,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAE7E,QAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC;YAAE;QAElC,UAAU,CAAC,MAAK;AACb,YAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;SAC9C,EAAE,CAAC,CAAC;AACP,KAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;AAErC;;;;;AAKG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa;YAAE;AAEtC,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAoB,KAAI;YACjD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAC1C,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;;AAE7E,gBAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AAChC,oBAAA,OAAO,EAAE;oBACT;AACD;AAEA,gBAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;gBAC7C,KAAK,CAAC,eAAe,EAAE;gBACvB,KAAK,CAAC,cAAc,EAAE;AACvB;AACH,SAAC;;QAGD,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC;;AAG7D,QAAA,OAAO,MAAM,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC;KAC9E,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC;AAE3C;;;AAGG;AACH,IAAA,MAAM,eAAe,GAA6D,CAAC,KAAK,KAAI;QAC1F,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAC7E,QAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC;QACzC,MAAM,WAAW,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;;QAGnE,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,EAAE;YAC7D,KAAK,CAAC,cAAc,EAAE;YACrB,WAA2B,CAAC,KAAK,EAAE;;AAGrC;aAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE;YACpE,KAAK,CAAC,cAAc,EAAE;YACrB,YAA4B,CAAC,KAAK,EAAE;AACtC;AACH,KAAC;AAED,IAAA,MAAM,aAAa,GAA6D,CAAC,KAAK,KAAI;AACxF,QAAA,IAAI,CAAC,aAAa;YAAE;;AAGpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;AAC1B,YAAA,OAAO,EAAE;AACT,YAAA,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,YAAA,KAAK,CAAC,cAAc,EAAE,CAAC;;AAGxB;aAAM,IAAI,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACnD,eAAe,CAAC,KAAK,CAAC;AACvB;AACH,KAAC;IAED,OAAO;QACL,aAAa;KACd;AACH;;;;"}

package/dist/components/Popover/hooks/useUpdateAriaAnchor.cjs

@@ -1,2 +1,59 @@
-"use strict";var e=require("react");exports.useUpdateAriaAnchor=({anchorElement:a,popoverId:o})=>{e.useEffect((()=>{if(a){try{a.hasAttribute("aria-expanded")||(console.warn("Popover - aria-expanded not set on anchor element.",a),a.setAttribute("aria-expanded","true"))}catch(e){console.warn("Unable to update aria-expanded for popover anchor to: true")}try{a.hasAttribute("aria-controls")||(console.warn("Popover - aria-controls not set on anchor element.",a),a.setAttribute("aria-controls",o))}catch(e){console.warn(`Unable to set aria-controls for popover id: ${o}`)}try{a.hasAttribute("aria-haspopup")||(console.warn("Popover - aria-haspopup not set on anchor element.",a),a.setAttribute("aria-haspopup","dialog"))}catch(e){console.warn(`Unable to set aria-haspopup for popover id: ${o}`)}return()=>{try{a.setAttribute("aria-expanded","false")}catch(e){console.warn("Unable to update aria-expanded for popover anchor to: false")}}}}),[a,o])};
+'use strict';
+
+var React = require('react');
+
+/* eslint-disable no-console */
+/* eslint-disable consistent-return */
+/**
+ * Update the anchor element to sent the required attributes if they haven't already set them.
+ *
+ * This allows current, inaccesible usages to be improved.
+ */
+const useUpdateAriaAnchor = ({ anchorElement, popoverId, ignoreAriaWarnings = false, }) => {
+    React.useEffect(() => {
+        if (!anchorElement || ignoreAriaWarnings)
+            return;
+        // Try and set aria-expanded on the anchor.
+        try {
+            if (!anchorElement.hasAttribute('aria-expanded')) {
+                console.warn('Popover - aria-expanded not set on anchor element.', anchorElement);
+                anchorElement.setAttribute('aria-expanded', 'true');
+            }
+        }
+        catch (_) {
+            console.warn(`Unable to update aria-expanded for popover anchor to: ${true}`);
+        }
+        // Try and set aria controls, unless it already exists.
+        try {
+            if (!anchorElement.hasAttribute('aria-controls')) {
+                console.warn('Popover - aria-controls not set on anchor element.', anchorElement);
+                anchorElement.setAttribute('aria-controls', popoverId);
+            }
+        }
+        catch (_) {
+            console.warn(`Unable to set aria-controls for popover id: ${popoverId}`);
+        }
+        // Try and set aria-haspopup, unless it already exists.
+        try {
+            if (!anchorElement.hasAttribute('aria-haspopup')) {
+                console.warn('Popover - aria-haspopup not set on anchor element.', anchorElement);
+                anchorElement.setAttribute('aria-haspopup', 'dialog');
+            }
+        }
+        catch (_) {
+            console.warn(`Unable to set aria-haspopup for popover id: ${popoverId}`);
+        }
+        // On unmount set aria-expanded to false
+        return () => {
+            try {
+                anchorElement.setAttribute('aria-expanded', 'false');
+            }
+            catch (_) {
+                console.warn(`Unable to update aria-expanded for popover anchor to: ${false}`);
+            }
+        };
+    }, [anchorElement, popoverId, ignoreAriaWarnings]);
+};
+
+exports.useUpdateAriaAnchor = useUpdateAriaAnchor;
 //# sourceMappingURL=useUpdateAriaAnchor.cjs.map

package/dist/components/Popover/hooks/useUpdateAriaAnchor.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useUpdateAriaAnchor.cjs","sources":["../../../../src/components/Popover/hooks/useUpdateAriaAnchor.ts"],"sourcesContent":[null],"names":["anchorElement","popoverId","useEffect"],"mappings":"gEAaG,EAAAA,gBAAAC,gBACHC,EAAAA,WAAA"}
+{"version":3,"file":"useUpdateAriaAnchor.cjs","sources":["../../../../src/components/Popover/hooks/useUpdateAriaAnchor.ts"],"sourcesContent":[null],"names":["useEffect"],"mappings":";;;;AAAA;AACA;AASA;;;;AAIG;AACI,MAAM,mBAAmB,GAAG,CAAC,EAClC,aAAa,EACb,SAAS,EACT,kBAAkB,GAAG,KAAK,GACN,KAAI;IACxBA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,aAAa,IAAI,kBAAkB;YAAE;;QAG1C,IAAI;AACF,YAAA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE;AAChD,gBAAA,OAAO,CAAC,IAAI,CAAC,oDAAoD,EAAE,aAAa,CAAC;AACjF,gBAAA,aAAa,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;AACpD;AACF;AAAC,QAAA,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,CAAC,IAAI,CAAC,yDAAyD,IAAI,CAAA,CAAE,CAAC;AAC9E;;QAGD,IAAI;AACF,YAAA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE;AAChD,gBAAA,OAAO,CAAC,IAAI,CAAC,oDAAoD,EAAE,aAAa,CAAC;AACjF,gBAAA,aAAa,CAAC,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC;AACvD;AACF;AAAC,QAAA,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,CAAC,IAAI,CAAC,+CAA+C,SAAS,CAAA,CAAE,CAAC;AACzE;;QAGD,IAAI;AACF,YAAA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE;AAChD,gBAAA,OAAO,CAAC,IAAI,CAAC,oDAAoD,EAAE,aAAa,CAAC;AACjF,gBAAA,aAAa,CAAC,YAAY,CAAC,eAAe,EAAE,QAAQ,CAAC;AACtD;AACF;AAAC,QAAA,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,CAAC,IAAI,CAAC,+CAA+C,SAAS,CAAA,CAAE,CAAC;AACzE;;AAGD,QAAA,OAAO,MAAK;YACV,IAAI;AACF,gBAAA,aAAa,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC;AACrD;AAAC,YAAA,OAAO,CAAC,EAAE;AACV,gBAAA,OAAO,CAAC,IAAI,CAAC,yDAAyD,KAAK,CAAA,CAAE,CAAC;AAC/E;AACH,SAAC;KACF,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,kBAAkB,CAAC,CAAC;AACpD;;;;"}

package/dist/components/Popover/hooks/useUpdateAriaAnchor.d.ts

@@ -1,12 +1,12 @@
 type UseUpdateAriaAnchor = {
     anchorElement: HTMLElement | null;
     popoverId: string;
+    ignoreAriaWarnings?: boolean;
 };
 /**
  * Update the anchor element to sent the required attributes if they haven't already set them.
  *
  * This allows current, inaccesible usages to be improved.
  */
-export declare const useUpdateAriaAnchor: ({ anchorElement, popoverId }: UseUpdateAriaAnchor) => void;
+export declare const useUpdateAriaAnchor: ({ anchorElement, popoverId, ignoreAriaWarnings, }: UseUpdateAriaAnchor) => void;
 export {};
-//# sourceMappingURL=useUpdateAriaAnchor.d.ts.map

package/dist/components/Popover/hooks/useUpdateAriaAnchor.js

@@ -1,2 +1,57 @@
-import{useEffect as o}from"react";const a=({anchorElement:a,popoverId:e})=>{o((()=>{if(a){try{a.hasAttribute("aria-expanded")||(console.warn("Popover - aria-expanded not set on anchor element.",a),a.setAttribute("aria-expanded","true"))}catch(o){console.warn("Unable to update aria-expanded for popover anchor to: true")}try{a.hasAttribute("aria-controls")||(console.warn("Popover - aria-controls not set on anchor element.",a),a.setAttribute("aria-controls",e))}catch(o){console.warn(`Unable to set aria-controls for popover id: ${e}`)}try{a.hasAttribute("aria-haspopup")||(console.warn("Popover - aria-haspopup not set on anchor element.",a),a.setAttribute("aria-haspopup","dialog"))}catch(o){console.warn(`Unable to set aria-haspopup for popover id: ${e}`)}return()=>{try{a.setAttribute("aria-expanded","false")}catch(o){console.warn("Unable to update aria-expanded for popover anchor to: false")}}}}),[a,e])};export{a as useUpdateAriaAnchor};
+import { useEffect } from 'react';
+
+/* eslint-disable no-console */
+/* eslint-disable consistent-return */
+/**
+ * Update the anchor element to sent the required attributes if they haven't already set them.
+ *
+ * This allows current, inaccesible usages to be improved.
+ */
+const useUpdateAriaAnchor = ({ anchorElement, popoverId, ignoreAriaWarnings = false, }) => {
+    useEffect(() => {
+        if (!anchorElement || ignoreAriaWarnings)
+            return;
+        // Try and set aria-expanded on the anchor.
+        try {
+            if (!anchorElement.hasAttribute('aria-expanded')) {
+                console.warn('Popover - aria-expanded not set on anchor element.', anchorElement);
+                anchorElement.setAttribute('aria-expanded', 'true');
+            }
+        }
+        catch (_) {
+            console.warn(`Unable to update aria-expanded for popover anchor to: ${true}`);
+        }
+        // Try and set aria controls, unless it already exists.
+        try {
+            if (!anchorElement.hasAttribute('aria-controls')) {
+                console.warn('Popover - aria-controls not set on anchor element.', anchorElement);
+                anchorElement.setAttribute('aria-controls', popoverId);
+            }
+        }
+        catch (_) {
+            console.warn(`Unable to set aria-controls for popover id: ${popoverId}`);
+        }
+        // Try and set aria-haspopup, unless it already exists.
+        try {
+            if (!anchorElement.hasAttribute('aria-haspopup')) {
+                console.warn('Popover - aria-haspopup not set on anchor element.', anchorElement);
+                anchorElement.setAttribute('aria-haspopup', 'dialog');
+            }
+        }
+        catch (_) {
+            console.warn(`Unable to set aria-haspopup for popover id: ${popoverId}`);
+        }
+        // On unmount set aria-expanded to false
+        return () => {
+            try {
+                anchorElement.setAttribute('aria-expanded', 'false');
+            }
+            catch (_) {
+                console.warn(`Unable to update aria-expanded for popover anchor to: ${false}`);
+            }
+        };
+    }, [anchorElement, popoverId, ignoreAriaWarnings]);
+};
+
+export { useUpdateAriaAnchor };
 //# sourceMappingURL=useUpdateAriaAnchor.js.map

package/dist/components/Popover/hooks/useUpdateAriaAnchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUpdateAriaAnchor.js","sources":["../../../../src/components/Popover/hooks/useUpdateAriaAnchor.ts"],"sourcesContent":[null],"names":["useUpdateAriaAnchor","anchorElement","popoverId","useEffect"],"mappings":"kCAaG,MAAAA,EAAA,EAAAC,gBAAAC,gBACHC,GAAA"}
+{"version":3,"file":"useUpdateAriaAnchor.js","sources":["../../../../src/components/Popover/hooks/useUpdateAriaAnchor.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAA;AACA;AASA;;;;AAIG;AACI,MAAM,mBAAmB,GAAG,CAAC,EAClC,aAAa,EACb,SAAS,EACT,kBAAkB,GAAG,KAAK,GACN,KAAI;IACxB,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,aAAa,IAAI,kBAAkB;YAAE;;QAG1C,IAAI;AACF,YAAA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE;AAChD,gBAAA,OAAO,CAAC,IAAI,CAAC,oDAAoD,EAAE,aAAa,CAAC;AACjF,gBAAA,aAAa,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;AACpD;AACF;AAAC,QAAA,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,CAAC,IAAI,CAAC,yDAAyD,IAAI,CAAA,CAAE,CAAC;AAC9E;;QAGD,IAAI;AACF,YAAA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE;AAChD,gBAAA,OAAO,CAAC,IAAI,CAAC,oDAAoD,EAAE,aAAa,CAAC;AACjF,gBAAA,aAAa,CAAC,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC;AACvD;AACF;AAAC,QAAA,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,CAAC,IAAI,CAAC,+CAA+C,SAAS,CAAA,CAAE,CAAC;AACzE;;QAGD,IAAI;AACF,YAAA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE;AAChD,gBAAA,OAAO,CAAC,IAAI,CAAC,oDAAoD,EAAE,aAAa,CAAC;AACjF,gBAAA,aAAa,CAAC,YAAY,CAAC,eAAe,EAAE,QAAQ,CAAC;AACtD;AACF;AAAC,QAAA,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,CAAC,IAAI,CAAC,+CAA+C,SAAS,CAAA,CAAE,CAAC;AACzE;;AAGD,QAAA,OAAO,MAAK;YACV,IAAI;AACF,gBAAA,aAAa,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC;AACrD;AAAC,YAAA,OAAO,CAAC,EAAE;AACV,gBAAA,OAAO,CAAC,IAAI,CAAC,yDAAyD,KAAK,CAAA,CAAE,CAAC;AAC/E;AACH,SAAC;KACF,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,kBAAkB,CAAC,CAAC;AACpD;;;;"}

package/dist/components/Popover/index.d.ts

@@ -1,2 +1 @@
 export { Popover } from './Popover';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Popover/styled.cjs

@@ -1,17 +1,14 @@
-"use strict";function e(e){return e&&e.__esModule?e:{default:e}}var o=e(require("styled-components"));const t=o.default.dialog`
-  z-index: ${({zIndex:e})=>e+1};
+'use strict';
 
-  // Remove browser default styling of HTML Dialog.
-  padding: 0;
-  margin: 0;
-  border: none;
-  background: transparent;
-`,n=o.default.div`
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: ${({zIndex:e})=>e};
-`;exports.Backdrop=n,exports.PopoverDialog=t;
+var styled = require('styled-components');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const PopoverDialog = styled__default.default.dialog.withConfig({ displayName: "vui--PopoverDialog", componentId: "vui--kmoo2l" }) `z-index:${({ zIndex }) => zIndex + 1};padding:0;margin:0;border:none;background:transparent;`;
+const Backdrop = styled__default.default.div.withConfig({ displayName: "vui--Backdrop", componentId: "vui--9esryp" }) `position:fixed;top:0;right:0;bottom:0;left:0;z-index:${({ zIndex }) => zIndex};`;
+
+exports.Backdrop = Backdrop;
+exports.PopoverDialog = PopoverDialog;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/Popover/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Popover/styled.ts"],"sourcesContent":[null],"names":["PopoverDialog","styled","dialog","zIndex"],"mappings":"sGAGA,MAAAA,EAA0BC,EAAAA,QAAAC,MAAA;aAAiC,EAAAC,YAAAA,EAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Popover/styled.ts"],"sourcesContent":[null],"names":["styled"],"mappings":";;;;;;;;AAGa,MAAA,aAAa,GAAGA,uBAAM,CAAC,MAAM,CAC7B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAAA,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,GAAG,CAAC;AAS1B,MAAA,QAAQ,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qDAAA,EAMrB,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM;;;;;"}

package/dist/components/Popover/styled.d.ts

@@ -3,4 +3,3 @@ export declare const PopoverDialog: import("styled-components").StyledComponent<
     zIndex: number;
 }, never>;
 export declare const Backdrop: import("styled-components").StyledComponent<"div", any, Pick<BackdropProps, "zIndex">, never>;
-//# sourceMappingURL=styled.d.ts.map