@veeqo/ui 9.0.0-beta-2 → 9.0.0-beta-v2-1

package/dist/components/Pagination/hooks/usePagination.js

@@ -1,2 +1,83 @@
-import{useState as e,useEffect as n}from"react";const t=({currentPage:t,totalPagesCount:a,handleChangePage:r})=>{const[o,u]=e(`${t}`);n((()=>{u(`${t}`)}),[t]);const c=e=>e>=1&&e<=a,l=()=>{if(o||u(`${t}`),o===`${t}`)return;const e=parseInt(o,10);c(e)&&r(e)};return{pageInputValue:o,handleIncrement:()=>{c(t+1)&&r(t+1)},handleDecrement:()=>{c(t-1)&&r(t-1)},handleInputChange:e=>{e||u(e);const n=parseInt(e,10);var t;c(t=n)&&u(`${t}`)},handleSubmit:l,handleFormSubmit:e=>{e.preventDefault(),l()}}};export{t as usePagination};
+import { useState, useEffect } from 'react';
+
+/**
+ * A hook to handle pagination state.
+ */
+const usePagination = ({ currentPage, totalPagesCount, handleChangePage, }) => {
+    const [pageInputValue, setPageInputValue] = useState(`${currentPage}`);
+    /**
+     * When a new value is passed into the component we update the local state, meaning the input
+     * value gets updated.
+     */
+    useEffect(() => {
+        setPageInputValue(`${currentPage}`);
+    }, [currentPage]);
+    const validatePageValue = (value) => value >= 1 && value <= totalPagesCount;
+    const checkAndSetLocalPage = (newPage) => {
+        if (validatePageValue(newPage))
+            setPageInputValue(`${newPage}`);
+    };
+    /**
+     * A function to handle changes to the input, a string will be passed int. We check for an empty
+     * string and directly set that, otherwise we validate the input number is within range.
+     * @param newValue The new string input value.
+     */
+    const handleInputChange = (newValue) => {
+        if (!newValue)
+            setPageInputValue(newValue);
+        const intValue = parseInt(newValue, 10);
+        checkAndSetLocalPage(intValue);
+    };
+    /**
+     * A function to increment the current page, using callback from props. Local state will update
+     * when a new `currentPage` is passed.
+     */
+    const handleIncrement = () => {
+        if (validatePageValue(currentPage + 1))
+            handleChangePage(currentPage + 1);
+    };
+    /**
+     * A function to decrement the current page, using callback from props. Local state will update
+     * when a new `currentPage` is passed.
+     */
+    const handleDecrement = () => {
+        if (validatePageValue(currentPage - 1))
+            handleChangePage(currentPage - 1);
+    };
+    /**
+     * When the input is unfocussed we want to update parent or local state depending on 3 cases:
+     *   1. Local page input is '', reset it to the currentPage
+     *   2. Local page input is the same as passed by prop, catch and do nothing.
+     *   3. Local state has a new value, convert it, validate it and potentially send to parent via
+     *  `handlePageChange`
+     */
+    const handleSubmit = () => {
+        if (!pageInputValue)
+            setPageInputValue(`${currentPage}`);
+        if (pageInputValue === `${currentPage}`)
+            return;
+        const newValue = parseInt(pageInputValue, 10);
+        if (validatePageValue(newValue))
+            handleChangePage(newValue);
+    };
+    /**
+     * When the user submits the form, either pressing enter or a screenreader shortcut we prevent
+     * default action and try and send update.
+     * @param event The event fired from the form when submitting.
+     */
+    const handleFormSubmit = (event) => {
+        event.preventDefault();
+        handleSubmit();
+    };
+    return {
+        pageInputValue,
+        handleIncrement,
+        handleDecrement,
+        handleInputChange,
+        handleSubmit,
+        handleFormSubmit,
+    };
+};
+
+export { usePagination };
 //# sourceMappingURL=usePagination.js.map

package/dist/components/Pagination/hooks/usePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePagination.js","sources":["../../../../src/components/Pagination/hooks/usePagination.ts"],"sourcesContent":[null],"names":["usePagination","currentPage","totalPagesCount","handleChangePage","pageInputValue","setPageInputValue","useState"],"mappings":"gDAKG,MAAAA,EAAA,EAAAC,cAAAC,kBAAAC,uBACI,MAAAC,EAAmBC,GAAAC,EAAA,GAAAL,aAoESI,EAAA,GAAAJ,OAajC,CAAAA"}
+{"version":3,"file":"usePagination.js","sources":["../../../../src/components/Pagination/hooks/usePagination.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGA;;AAEG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,WAAW,EACX,eAAe,EACf,gBAAgB,GACI,KAAI;AACxB,IAAA,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,CAAG,EAAA,WAAW,CAAE,CAAA,CAAC;AAEtE;;;AAGG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,iBAAiB,CAAC,CAAA,EAAG,WAAW,CAAA,CAAE,CAAC;AACrC,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAEjB,IAAA,MAAM,iBAAiB,GAAG,CAAC,KAAa,KAAc,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,eAAe;AAC5F,IAAA,MAAM,oBAAoB,GAAG,CAAC,OAAe,KAAI;QAC/C,IAAI,iBAAiB,CAAC,OAAO,CAAC;AAAE,YAAA,iBAAiB,CAAC,CAAA,EAAG,OAAO,CAAA,CAAE,CAAC;AACjE,KAAC;AAED;;;;AAIG;AACH,IAAA,MAAM,iBAAiB,GAAG,CAAC,QAAgB,KAAI;AAC7C,QAAA,IAAI,CAAC,QAAQ;YAAE,iBAAiB,CAAC,QAAQ,CAAC;QAE1C,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC;QACvC,oBAAoB,CAAC,QAAQ,CAAC;AAChC,KAAC;AAED;;;AAGG;IACH,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,IAAI,iBAAiB,CAAC,WAAW,GAAG,CAAC,CAAC;AAAE,YAAA,gBAAgB,CAAC,WAAW,GAAG,CAAC,CAAC;AAC3E,KAAC;AAED;;;AAGG;IACH,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,IAAI,iBAAiB,CAAC,WAAW,GAAG,CAAC,CAAC;AAAE,YAAA,gBAAgB,CAAC,WAAW,GAAG,CAAC,CAAC;AAC3E,KAAC;AAED;;;;;;AAMG;IACH,MAAM,YAAY,GAAG,MAAK;AACxB,QAAA,IAAI,CAAC,cAAc;AAAE,YAAA,iBAAiB,CAAC,CAAA,EAAG,WAAW,CAAA,CAAE,CAAC;AACxD,QAAA,IAAI,cAAc,KAAK,CAAG,EAAA,WAAW,CAAE,CAAA;YAAE;QAEzC,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,EAAE,EAAE,CAAC;QAC7C,IAAI,iBAAiB,CAAC,QAAQ,CAAC;YAAE,gBAAgB,CAAC,QAAQ,CAAC;AAC7D,KAAC;AAED;;;;AAIG;AACH,IAAA,MAAM,gBAAgB,GAAG,CAAC,KAAiC,KAAI;QAC7D,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,YAAY,EAAE;AAChB,KAAC;IAED,OAAO;QACL,cAAc;QACd,eAAe;QACf,eAAe;QACf,iBAAiB;QACjB,YAAY;QACZ,gBAAgB;KACjB;AACH;;;;"}

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

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

package/dist/components/Pagination/styled.cjs

@@ -1,2 +1,20 @@
-"use strict";var e=require("styled-components"),t=require("../../theme/index.cjs"),i=require("../Stack/Stack.cjs"),o=require("../Button/Button.cjs"),n=require("../TextField/index.cjs");function r(e){return e&&e.__esModule?e:{default:e}}var a=r(e);const u=a.default(i.Stack).withConfig({displayName:"vui--PageLimitContainer",componentId:"vui--1psd9g8"})`width:${t.theme.sizes.lg};height:30px;background-color:${t.theme.colors.neutral.grey.light};border:1px solid ${t.theme.colors.neutral.grey.base};border-radius:${t.theme.sizes.xs};`,s=a.default(o.Button).withConfig({displayName:"vui--PaginationButton",componentId:"vui--oolvks"})`color:${t.theme.colors.neutral.ink.base};width:32px;height:32px;svg{width:24px;height:24px;}`,d=a.default(n.TextField).withConfig({displayName:"vui--PageInput",componentId:"vui--jjraff"})`&[type='number']{width:5.5ch;}`;exports.PageInput=d,exports.PageLimitContainer=u,exports.PaginationButton=s;
+'use strict';
+
+var styled = require('styled-components');
+var index = require('../../theme/index.cjs');
+var Stack = require('../Stack/Stack.cjs');
+var Button = require('../Button/Button.cjs');
+var index$1 = require('../TextField/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const PageLimitContainer = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--PageLimitContainer", componentId: "vui--1psd9g8" }) `width:${index.theme.sizes.lg};height:30px;background-color:${index.theme.colors.neutral.grey.light};border:1px solid ${index.theme.colors.neutral.grey.base};border-radius:${index.theme.sizes.xs};`;
+const PaginationButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--oolvks" }) `color:${index.theme.colors.neutral.ink.base};width:32px;height:32px;svg{width:24px;height:24px;}`;
+const PageInput = styled__default.default(index$1.TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--jjraff" }) `&[type='number']{width:5.5ch;}`;
+
+exports.PageInput = PageInput;
+exports.PageLimitContainer = PageLimitContainer;
+exports.PaginationButton = PaginationButton;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":[null],"names":["styled","Stack","theme","Button","TextField"],"mappings":";;;;;;;;;;;;AAMa,MAAA,kBAAkB,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACpCC,WAAK,CAAC,KAAK,CAAC,EAAE,iCAEHA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAE/BA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,kBACjCA,WAAK,CAAC,KAAK,CAAC,EAAE;AAGpB,MAAA,gBAAgB,GAAGF,uBAAM,CAACG,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACnCD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;MAU3B,SAAS,GAAGF,uBAAM,CAACI,iBAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8BAAA;;;;;;"}

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

@@ -7,6 +7,7 @@ export declare const PaginationButton: import("styled-components").StyledCompone
     iconSlot?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
+    contentStyles?: import("react").CSSProperties | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const PageInput: import("styled-components").StyledComponent<import("react").FC<{
     form?: string | undefined;
@@ -310,4 +311,3 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps>, any, {}, never>;
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/Pagination/styled.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"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,aAAA,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