@simplybusiness/mobius 4.2.7 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 4.3.0
+
+### Minor Changes
+
+- 1aed87a: Modal: add `onOpen` prop and wrap component with `forwardRef`. This is to bring parity between Modal and Drawer which share similar implementation details
+
+### Patch Changes
+
+- 66ac8be: Change Storybook url and upload folder
+
+## 4.2.8
+
+### Patch Changes
+
+- fcc0e88: Fix `<Drawer>` close animation not firing when `isOpen` prop updates
+
 ## 4.2.7
 
 ### Patch Changes
@@ -8,12 +24,7 @@
 - Updated dependencies [8b6c5d6]
   - @simplybusiness/icons@4.2.7
 
-All notable changes to this project will be documented in this file, or link in [archives](#archived).
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [4.2.6] - 2023-12-20
+## 4.2.6
 
 ### Fixed
 
@@ -24,13 +35,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Rename incorrect `<Radio>` prop `defaultValue` (string) to `defaultChecked` (boolean)
 
-## [4.2.5] - 2023-12-19
+## 4.2.5
 
 ### Fixed
 
 - Fix an issue where standalone `<Radio>` (without `<RadioGroup>`) renders with `checked` attribute
 
-## [4.2.1] - 2023-12-12
+## 4.2.1
 
 ### Added
 
@@ -47,7 +58,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Remove duplicate icons `buttonArrowRight`, `buttonArrowRightActive`, `ctaArrow` in favour of `rightArrow` icon. Also remove `buttonArrowLeft`, `buttonArrowLeftActive` in favour of `leftArrow`.
 - Remove unused icons `facebook`, `facebookF`, `linkedin`, `linkedinSquare`, `twitter`, `twitterSquare`, `youtube`, `youtubeSquare`
 
-## [4.2.0] - 2023-12-11
+## 4.2.0
 
 ### Added
 
@@ -63,20 +74,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix `--size-undefined` on `<Icon>`; set default `size` to `xs`
 
-## [4.1.2] - 2023-12-07
+## 4.1.2
 
 ### Fixed
 
 - Fix `<Popover>` trigger prop not passing `className`
 - Fix `<Popover>` event bubbling when pressing Escape key to close
 
-## [4.1.1] - 2023-12-06
+## 4.1.1
 
 ### Fixed
 
 - Fix `<Popover>` content positioning in Shadow DOM by replacing underlying library from `react-tiny-popover` to `@floating-ui/react`
 
-## [4.1.0] - 2023-12-01
+## 4.1.0
 
 ### Added
 
@@ -120,7 +131,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Remove default font size changes on breakpoints for h1, h2, h3
 - Remove unused h5, h6 variants
 
-## [4.0.0-beta.3] - 2023-11-09
+## 4.0.0-beta.3
 
 ### Added
 
@@ -130,7 +141,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Changed all `React.SyntheticEvent` callback types to `HTMLElementEvent`, which includes a type definition for `e.target.value` and prevents TypeScript complaints in consuming apps.
 
-## [4.0.0-beta.1] - 2023-11-07
+## 4.0.0-beta.1
 
 ### Added
 
@@ -149,7 +160,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Make `<Accordion>` 18% lighter by replacing `react-animate-height` dependency with native animation. Other changes: 1) Prevent animation when `startOpen` value changes; 2) Attach `--is-open` class to icon and other components to make it easier to style; 3) Animate icon by default; 4) Remove `show` and `hide` classes in favour of `--is-open` when `<Accordion>` is expanded. This is to prevent accidental side-effects from generic CSS classes.
 - Move `<MaskedField>` to `@simplybusiness/chopin` package since it is Chopin specific
 
-## [4.0.0-alpha.0] - 2023-10-23
+## 4.0.0-alpha.0
 
 ### Changed
 
@@ -168,26 +179,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Chopin package no longer relies on React-aria as a dependency.
 - Removed sb-legacy theme
 
-## [3.12.2] - 2023-09-27
+## 3.12.2
 
 ### Added
 
 - Add `onChange` to `<Accordion>` to inform user when component is expanded/collapsed (true/false)
 
-## [3.12.1] - 2023-09-27
+## 3.12.1
 
 ### Fixed
 
 - Fix `startOpen` prop in `<Accordion>`. Changing the prop doesn't update the internal state of the component. For example, if initial state is `true`, which then changes to `false`, the component remains in initial state.
 - Fix `<Accordion>` toggle not rendering `aria-expanded` attribute
 
-## [3.12.0] - 2023-09-25
+## 3.12.0
 
 ### Added
 
 - Add `headerChildren` prop to `<Accordion>` in order to enable additional content to be added in the header part of the component.
 
-## [3.11.0] - 2023-09-14
+## 3.11.0
 
 ### Removed
 
@@ -198,27 +209,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Moved all Chopin components into their own package, now available under `@simplybusiness/mobius-chopin`. Previous Chopin component imports - `import { Chopin } from "@simplybusiness/mobius"`. For example `<Chopin.TradeSelector />` would have to be imported as `import { TradeSelector } from "@simplybusiness/mobius-chopin";`. The motivation behind this change is to reduce the weight of Mobius imports.
 - Moved `<DatePicker>` component into its own package. Any `import { DatePicker } from "@simplybusiness/mobius"` would have to be changed to `import { DatePicker } from "@simplybusiness/mobius-datepicker";`. The motivation behind this change is to reduce the weight of Mobius imports.
 
-## [3.10.0] - 2023-08-20
+## 3.10.0
 
 ### Changed
 
 - Migrated all icons to [FontAwesome Sharp Regular](https://fontawesome.com/search?o=r&s=regular&f=sharp) equivalents. This was a design decision to make it easier to have uniform looking icons, and also so we have a larger pool of icons to choose from.
 - Updated Icon component to better support FontAwesome icons
 
-## [3.9.4] - 2023-08-17
+## 3.9.4
 
 ### Added
 
 - Add docs for `<NumberField>` `formatOptions` prop with example
 - Exclude tests and stories from ESM build
 
-## [3.9.3] - 2023-08-17
+## 3.9.3
 
 ### Added
 
 - Added explicit types export to mobius package.json
 
-## [3.9.0] - 2023-08-14
+## 3.9.0
 
 ### Changed
 
@@ -230,33 +241,33 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix an issue where `gap` prop is ignored in `<Grid>`. This mostly affects examples where both `gap` and `rowGap` / `columnGap` values are provided. If `gap` has a value and `rowGap` / `columnGap` have `undefined`, the combined result will be `undefined` for `gap`. This is similar issue to `<Flex>` that's been recently fixed
 
-## [3.8.0] - 2023-08-01
+## 3.8.0
 
 ### Added
 
 - Added custom `useBodyScrollLock` hook to prevent scrolling of body when modal is open
 
-## [3.7.0] - 2023-07-31
+## 3.7.0
 
 ### Added
 
 - New simpler `useButton` hook implemenation, to work correctly with
   shadow DOM
 
-## [3.6.2] - 2023-07-26
+## 3.6.2
 
 ### Fixed
 
 - Fix missing `:focus-visible` state for `<Button variant="basic">`
 
-## [3.6.1] - 2023-07-26
+## 3.6.1
 
 ### Fixed
 
 - Add `:focus-visible` default styles alongisde programatically added `--is-focus-visible`, `--is-focused` CSS class names. This is to address an issue where no styles display when using keyboard navigation in ShadowDOM.
 - Fix previewing `@simplybusiness/icons` in Storybook. When an icon isn't published, Storybook only displays icons from an installed package as opposed to locally available set of icons.
 
-## [3.6.0] - 2023-07-20
+## 3.6.0
 
 ### Changed
 
@@ -270,13 +281,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add `Modal` `size` prop docs. Currently only `fullscreen` is documented. A user may assume that default sizing is provided out of the box. However, only a CSS class name is applied and user has to add their own styles. Documenting for clarity.
 
-## [3.5.1] - 2023-07-07
+## 3.5.1
 
 ### Fixed
 
 - Fix an issue where `gap` prop is ignored in `<Flex>`
 
-## [3.5.0] - 2023-04-28
+## 3.5.0
 
 ### Added
 
@@ -292,7 +303,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Checkbox only shows a focus ring around the box icon, rather than the entire label.
 
-## [3.4.4] - 2023-03-28
+## 3.4.4
 
 ### Added
 
@@ -302,7 +313,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix an issue where `<QuestionHelp>` `onChange` handler is called twice on render. It should only be invoked when help text button is pressed
 
-## [3.4.3] - 2023-03-28
+## 3.4.3
 
 ### Changed
 
@@ -313,20 +324,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added missing secondary colour variable to On The Tools (ott) partner theme.
 
-## [3.4.2] - 2023-03-27
+## 3.4.2
 
 ### Added
 
 - Add onChange prop to `<Question>` for when help text is shown/hidden. This is to enable Snowplow analytics events to be attached
 
-## [3.4.1] - 2023-03-23
+## 3.4.1
 
 ### Fixed
 
 - Fix an issue where disabled button ghost variant would change colour on click
 - Replace 301 Moved Permanently with 307 Temporary Redirect for homepage
 
-## [3.4.0] - 2023-03-06
+## 3.4.0
 
 ### Added
 
@@ -348,25 +359,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fixed an issue in Trade Selector 2 where 'View all trades' link may appear when minimum input threshold is met
 
-## [3.3.2] - 2023-02-07
+## 3.3.2
 
 ### Fixed
 
 - PasswordField did not reveal text after clicking 'show'
 
-## [3.3.1] - 2023-01-24
+## 3.3.1
 
 ### Changed
 
 - Change selected trade from TradeProps to string in Trade Selector. When loading Trade Selector where trade is already known, string value is sufficient to display the chosen trade. Example use case: Chopin API, which retains trade value as a string
 
-## [3.3.0] - 2023-01-23
+## 3.3.0
 
 ### Added
 
 - Add ability to have selected trade on initial render in Trade Selector
 
-## [3.2.3] - 2023-01-11
+## 3.2.3
 
 ### Changed
 
@@ -376,13 +387,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fixed `<Button />` default transition during page load by specifying only the properties that we want transitioning. This fixes an issue where conditionally added padding scales button in size in an inelegant way.
 
-## [3.2.2] - 2023-01-06
+## 3.2.2
 
 ### Fixed
 
 - Fixed `onClick` type for `<LinkButton>`, so that it always expects default event
 
-## [3.2.0] - 2023-01-04
+## 3.2.0
 
 ### Changed
 
@@ -393,7 +404,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed typo in `<Chopin.Actions />` docs
 - Fixed `<Chopin.Actions />` back button styles when disabled
 
-## [3.1.3] - 2022-12-19
+## 3.1.3
 
 ### Fixed
 
@@ -403,7 +414,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added docs for controlling state of individual and group `<Checkbox>`, `<Radio>`, `<RadioButton>` components
 
-## [3.1.2] - 2022-12-14
+## 3.1.2
 
 ### Added
 
@@ -415,7 +426,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed default `<Question>` width to take up 100% of container width
 - Changed default `<Question>` help text styles to always display inline. This is to match current behaviour in Chopin.
 
-## [3.1.1] - 2022-11-30
+## 3.1.1
 
 ### Added
 
@@ -425,13 +436,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Render `<Question>` label as `<span>` when no child components provided. This is to accommodate for `renderAs: "info"` in Chopin-next
 
-## [3.1.0] - 2022-11-24
+## 3.1.0
 
 ### Changed
 
 - Refactored props in `Chopin.Actions` molecule to only require back/next labels and respective `LinkButton` props; this allows users to assign any link or button attributes to buttons, e.g. disabled state.
 
-## [3.0.0] - 2022-11-23
+## 3.0.0
 
 ### Breaking Changes
 
@@ -506,52 +517,3 @@ Additionally, mobius and themes are available on the public NPM registry and can
 - Fix number formatting on blur on `<NumberField />`
 - Prevent `defaultSelected` prop from spilling onto `<Checkbox />` DOM attributes
 - Fixed `<Label />` validation CSS. Now valid and invalid states apply across components
-
-## Github Links
-
-[4.2.6]: https://github.com/simplybusiness/mobius/releases/tag/v4.2.6
-[4.2.5]: https://github.com/simplybusiness/mobius/releases/tag/v4.2.5
-[4.2.4]: https://github.com/simplybusiness/mobius/releases/tag/v4.2.4
-[4.2.3]: https://github.com/simplybusiness/mobius/releases/tag/v4.2.3
-[4.2.2]: https://github.com/simplybusiness/mobius/releases/tag/v4.2.2
-[4.2.1]: https://github.com/simplybusiness/mobius/releases/tag/v4.2.1
-[4.2.0]: https://github.com/simplybusiness/mobius/releases/tag/v4.2.0
-[4.1.2]: https://github.com/simplybusiness/mobius/releases/tag/v4.1.2
-[4.1.1]: https://github.com/simplybusiness/mobius/releases/tag/v4.1.1
-[4.1.0]: https://github.com/simplybusiness/mobius/releases/tag/v4.1.0
-[4.0.0]: https://github.com/simplybusiness/mobius/releases/tag/v4.0.0
-[3.12.2]: https://github.com/simplybusiness/mobius/releases/tag/v3.12.2
-[3.12.1]: https://github.com/simplybusiness/mobius/releases/tag/v3.12.1
-[3.12.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.12.0
-[3.11.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.11.0
-[3.10.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.10.0
-[3.9.4]: https://github.com/simplybusiness/mobius/releases/tag/v3.9.4
-[3.9.3]: https://github.com/simplybusiness/mobius/releases/tag/v3.9.3
-[3.9.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.9.0
-[3.8.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.8.0
-[3.7.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.7.0
-[3.6.2]: https://github.com/simplybusiness/mobius/releases/tag/v3.6.2
-[3.6.1]: https://github.com/simplybusiness/mobius/releases/tag/v3.6.1
-[3.6.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.6.0
-[3.5.1]: https://github.com/simplybusiness/mobius/releases/tag/v3.5.1
-[3.5.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.5.0
-[3.4.4]: https://github.com/simplybusiness/mobius/releases/tag/v3.4.4
-[3.4.3]: https://github.com/simplybusiness/mobius/releases/tag/v3.4.3
-[3.4.2]: https://github.com/simplybusiness/mobius/releases/tag/v3.4.2
-[3.4.1]: https://github.com/simplybusiness/mobius/releases/tag/v3.4.1
-[3.4.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.4.0
-[3.3.2]: https://github.com/simplybusiness/mobius/releases/tag/v3.3.2
-[3.3.1]: https://github.com/simplybusiness/mobius/releases/tag/v3.3.1
-[3.3.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.3.0
-[3.2.3]: https://github.com/simplybusiness/mobius/releases/tag/v3.2.3
-[3.2.2]: https://github.com/simplybusiness/mobius/releases/tag/v3.2.2
-[3.2.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.2.0
-[3.1.3]: https://github.com/simplybusiness/mobius/releases/tag/v3.1.3
-[3.1.2]: https://github.com/simplybusiness/mobius/releases/tag/v3.1.2
-[3.1.1]: https://github.com/simplybusiness/mobius/releases/tag/v3.1.1
-[3.1.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.1.0
-[3.0.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.0.0
-
-## Archived
-
-[Version 2 Changelog](./CHANGELOG-v2.md)

package/dist/cjs/components/Accordion/Accordion.js

@@ -1,69 +1,110 @@
-"use strict";
 "use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Accordion = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("@simplybusiness/icons");
-const dedupe_1 = __importDefault(require("classnames/dedupe"));
-const react_1 = require("react");
-const Flex_1 = require("../Flex");
-const Icon_1 = require("../Icon");
-const AccordionLink = ({ text, toggle, onClick, headerChildren, ariaExpanded, }) => {
-    const linkClasses = (0, dedupe_1.default)("mobius/AccordionLink", {
-        "--is-open": ariaExpanded,
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Accordion", {
+    enumerable: true,
+    get: function() {
+        return Accordion;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _icons = require("@simplybusiness/icons");
+const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
+const _react = require("react");
+const _Flex = require("../Flex");
+const _Icon = require("../Icon");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const AccordionLink = ({ text, toggle, onClick, headerChildren, ariaExpanded })=>{
+    const linkClasses = (0, _dedupe.default)("mobius/AccordionLink", {
+        "--is-open": ariaExpanded
     });
-    const iconClasses = (0, dedupe_1.default)("mobius/AccordionLinkIcon", {
-        "--is-open": ariaExpanded,
+    const iconClasses = (0, _dedupe.default)("mobius/AccordionLinkIcon", {
+        "--is-open": ariaExpanded
     });
-    const handleOnClick = () => {
+    const handleOnClick = ()=>{
         if (onClick) {
             onClick();
         }
         toggle();
     };
-    const handleKeyDown = (e) => {
+    const handleKeyDown = (e)=>{
         if (e.key === " " || e.key === "Enter") {
             toggle();
         }
     };
     if (headerChildren) {
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { justifyContent: "space-between", alignItems: "center", className: "mobius/AccordionHeader", children: [(0, jsx_runtime_1.jsxs)("div", { className: linkClasses, onClick: handleOnClick, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-expanded": !!ariaExpanded, children: [(0, jsx_runtime_1.jsx)("span", { className: "mobius/AccordionLinkText", children: text }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icons_1.chevronDown, className: iconClasses })] }), headerChildren] }));
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Flex.Flex, {
+            justifyContent: "space-between",
+            alignItems: "center",
+            className: "mobius/AccordionHeader",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: linkClasses,
+                    onClick: handleOnClick,
+                    onKeyDown: handleKeyDown,
+                    role: "button",
+                    tabIndex: 0,
+                    "aria-expanded": !!ariaExpanded,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            className: "mobius/AccordionLinkText",
+                            children: text
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
+                            icon: _icons.chevronDown,
+                            className: iconClasses
+                        })
+                    ]
+                }),
+                headerChildren
+            ]
+        });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: linkClasses, onClick: handleOnClick, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-expanded": !!ariaExpanded, children: [(0, jsx_runtime_1.jsx)("span", { className: "mobius/AccordionLinkText", children: text }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icons_1.chevronDown, className: iconClasses })] }));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: linkClasses,
+        onClick: handleOnClick,
+        onKeyDown: handleKeyDown,
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": !!ariaExpanded,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: "mobius/AccordionLinkText",
+                children: text
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
+                icon: _icons.chevronDown,
+                className: iconClasses
+            })
+        ]
+    });
 };
-exports.Accordion = (0, react_1.forwardRef)((props, ref) => {
-    const { showText = "See more", hideText = "See less", headerPosition = "top", startOpen = false, onOpen, onClose, onChange = () => { }, headerChildren } = props, rest = __rest(props, ["showText", "hideText", "headerPosition", "startOpen", "onOpen", "onClose", "onChange", "headerChildren"]);
-    const [accordionState, setAccordionState] = (0, react_1.useState)({
+const Accordion = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    var _window;
+    const { showText = "See more", hideText = "See less", headerPosition = "top", startOpen = false, onOpen, onClose, onChange = ()=>{}, headerChildren, ...rest } = props;
+    const [accordionState, setAccordionState] = (0, _react.useState)({
         open: true,
-        withAnimation: false,
+        withAnimation: false
     });
-    const prefersReducedMotion = window === null || window === void 0 ? void 0 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    const containerClasses = (0, dedupe_1.default)("mobius", "mobius/Accordion", props.className, {
+    const prefersReducedMotion = (_window = window) === null || _window === void 0 ? void 0 : _window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const containerClasses = (0, _dedupe.default)("mobius", "mobius/Accordion", props.className, {
         "--should-animate": accordionState.withAnimation && !prefersReducedMotion,
-        "--is-open": accordionState.open,
+        "--is-open": accordionState.open
     });
-    const contentContainerClasses = (0, dedupe_1.default)("mobius/AccordionContentContainer", {
-        "--is-open": accordionState.open,
+    const contentContainerClasses = (0, _dedupe.default)("mobius/AccordionContentContainer", {
+        "--is-open": accordionState.open
     });
-    const contentClasses = (0, dedupe_1.default)("mobius/AccordionContent", {
-        "--is-open": accordionState.open,
+    const contentClasses = (0, _dedupe.default)("mobius/AccordionContent", {
+        "--is-open": accordionState.open
     });
     const linkText = accordionState.open ? hideText : showText;
-    const handleChange = () => {
+    const handleChange = ()=>{
         // Fire events
         if (!accordionState.open && onOpen) {
             onOpen();
@@ -76,15 +117,44 @@ exports.Accordion = (0, react_1.forwardRef)((props, ref) => {
         }
         setAccordionState({
             open: !accordionState.open,
-            withAnimation: true,
+            withAnimation: true
         });
     };
-    (0, react_1.useEffect)(() => {
+    (0, _react.useEffect)(()=>{
         setAccordionState({
             open: startOpen,
-            withAnimation: false,
+            withAnimation: false
         });
-    }, [startOpen]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref }, rest, { className: containerClasses, children: [headerPosition === "top" && ((0, jsx_runtime_1.jsx)(AccordionLink, { text: linkText, toggle: handleChange, ariaExpanded: accordionState.open, headerChildren: headerChildren })), (0, jsx_runtime_1.jsx)("div", { className: contentContainerClasses, "aria-hidden": !accordionState.open, children: (0, jsx_runtime_1.jsx)("div", { className: contentClasses, children: props.children }) }), headerPosition === "bottom" && ((0, jsx_runtime_1.jsx)(AccordionLink, { text: linkText, toggle: handleChange, ariaExpanded: accordionState.open, headerChildren: headerChildren }))] })));
+    }, [
+        startOpen
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        ref: ref,
+        ...rest,
+        className: containerClasses,
+        children: [
+            headerPosition === "top" && /*#__PURE__*/ (0, _jsxruntime.jsx)(AccordionLink, {
+                text: linkText,
+                toggle: handleChange,
+                ariaExpanded: accordionState.open,
+                headerChildren: headerChildren
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: contentContainerClasses,
+                "aria-hidden": !accordionState.open,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: contentClasses,
+                    children: props.children
+                })
+            }),
+            headerPosition === "bottom" && /*#__PURE__*/ (0, _jsxruntime.jsx)(AccordionLink, {
+                text: linkText,
+                toggle: handleChange,
+                ariaExpanded: accordionState.open,
+                headerChildren: headerChildren
+            })
+        ]
+    });
 });
+
 //# sourceMappingURL=Accordion.js.map

package/dist/cjs/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,iDAAoD;AACpD,+DAA2C;AAC3C,iCAQe;AAGf,kCAA+B;AAC/B,kCAA+B;AAa/B,MAAM,aAAa,GAAG,CAAC,EACrB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,cAAc,EACd,YAAY,GACO,EAAE,EAAE;IACvB,MAAM,WAAW,GAAG,IAAA,gBAAU,EAAC,sBAAsB,EAAE;QACrD,WAAW,EAAE,YAAY;KAC1B,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,IAAA,gBAAU,EAAC,0BAA0B,EAAE;QACzD,WAAW,EAAE,YAAY;KAC1B,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,GAAS,EAAE;QAC/B,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,MAAM,EAAE,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAgB,EAAE,EAAE;QACzC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACvC,MAAM,EAAE,CAAC;QACX,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,CACL,wBAAC,WAAI,IACH,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAC,wBAAwB,aAElC,iCACE,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,aAAa,EACxB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,mBACI,CAAC,CAAC,YAAY,aAE7B,iCAAM,SAAS,EAAC,0BAA0B,YAAE,IAAI,GAAQ,EACxD,uBAAC,WAAI,IAAC,IAAI,EAAE,mBAAW,EAAE,SAAS,EAAE,WAAW,GAAI,IAC/C,EACL,cAAc,IACV,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,iCACE,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,aAAa,EACxB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,mBACI,CAAC,CAAC,YAAY,aAE7B,iCAAM,SAAS,EAAC,0BAA0B,YAAE,IAAI,GAAQ,EACxD,uBAAC,WAAI,IAAC,IAAI,EAAE,mBAAW,EAAE,SAAS,EAAE,WAAW,GAAI,IAC/C,CACP,CAAC;AACJ,CAAC,CAAC;AAyBW,QAAA,SAAS,GAGlB,IAAA,kBAAU,EAAC,CAAC,KAAqB,EAAE,GAAiB,EAAE,EAAE;IAC1D,MAAM,EACJ,QAAQ,GAAG,UAAU,EACrB,QAAQ,GAAG,UAAU,EACrB,cAAc,GAAG,KAAK,EACtB,SAAS,GAAG,KAAK,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,cAAc,KAEZ,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,0GAUL,CAAQ,CAAC;IACV,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC;QACnD,IAAI,EAAE,IAAI;QACV,aAAa,EAAE,KAAK;KACrB,CAAC,CAAC;IACH,MAAM,oBAAoB,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAC7C,kCAAkC,EAClC,OAAO,CAAC;IAEV,MAAM,gBAAgB,GAAG,IAAA,gBAAU,EACjC,QAAQ,EACR,kBAAkB,EAClB,KAAK,CAAC,SAAS,EACf;QACE,kBAAkB,EAAE,cAAc,CAAC,aAAa,IAAI,CAAC,oBAAoB;QACzE,WAAW,EAAE,cAAc,CAAC,IAAI;KACjC,CACF,CAAC;IACF,MAAM,uBAAuB,GAAG,IAAA,gBAAU,EACxC,kCAAkC,EAClC;QACE,WAAW,EAAE,cAAc,CAAC,IAAI;KACjC,CACF,CAAC;IACF,MAAM,cAAc,GAAG,IAAA,gBAAU,EAAC,yBAAyB,EAAE;QAC3D,WAAW,EAAE,cAAc,CAAC,IAAI;KACjC,CAAC,CAAC;IACH,MAAM,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE3D,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,cAAc;QACd,IAAI,CAAC,cAAc,CAAC,IAAI,IAAI,MAAM,EAAE,CAAC;YACnC,MAAM,EAAE,CAAC;QACX,CAAC;QACD,IAAI,cAAc,CAAC,IAAI,IAAI,OAAO,EAAE,CAAC;YACnC,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC;QACD,iBAAiB,CAAC;YAChB,IAAI,EAAE,CAAC,cAAc,CAAC,IAAI;YAC1B,aAAa,EAAE,IAAI;SACpB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,iBAAiB,CAAC;YAChB,IAAI,EAAE,SAAS;YACf,aAAa,EAAE,KAAK;SACrB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,+CAAK,GAAG,EAAE,GAAG,IAAM,IAAI,IAAE,SAAS,EAAE,gBAAgB,aACjD,cAAc,KAAK,KAAK,IAAI,CAC3B,uBAAC,aAAa,IACZ,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,YAAY,EACpB,YAAY,EAAE,cAAc,CAAC,IAAI,EACjC,cAAc,EAAE,cAAc,GAC9B,CACH,EACD,gCACE,SAAS,EAAE,uBAAuB,iBACrB,CAAC,cAAc,CAAC,IAAI,YAEjC,gCAAK,SAAS,EAAE,cAAc,YAAG,KAAK,CAAC,QAAQ,GAAO,GAClD,EACL,cAAc,KAAK,QAAQ,IAAI,CAC9B,uBAAC,aAAa,IACZ,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,YAAY,EACpB,YAAY,EAAE,cAAc,CAAC,IAAI,EACjC,cAAc,EAAE,cAAc,GAC9B,CACH,KACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport {\n  KeyboardEvent,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Flex } from \"../Flex\";\nimport { Icon } from \"../Icon\";\n\nexport type AccordionElementType = HTMLDivElement;\nexport type AccordionRef = Ref<AccordionElementType>;\nexport interface AccordionLinkProps extends DOMProps {\n  /** Link text to show accordion content */\n  text?: string;\n  onClick?: () => void;\n  toggle: () => void;\n  headerChildren?: ReactNode;\n  ariaExpanded: boolean | undefined;\n}\n\nconst AccordionLink = ({\n  text,\n  toggle,\n  onClick,\n  headerChildren,\n  ariaExpanded,\n}: AccordionLinkProps) => {\n  const linkClasses = classNames(\"mobius/AccordionLink\", {\n    \"--is-open\": ariaExpanded,\n  });\n  const iconClasses = classNames(\"mobius/AccordionLinkIcon\", {\n    \"--is-open\": ariaExpanded,\n  });\n\n  const handleOnClick = (): void => {\n    if (onClick) {\n      onClick();\n    }\n    toggle();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \" \" || e.key === \"Enter\") {\n      toggle();\n    }\n  };\n\n  if (headerChildren) {\n    return (\n      <Flex\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className=\"mobius/AccordionHeader\"\n      >\n        <div\n          className={linkClasses}\n          onClick={handleOnClick}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n          aria-expanded={!!ariaExpanded}\n        >\n          <span className=\"mobius/AccordionLinkText\">{text}</span>\n          <Icon icon={chevronDown} className={iconClasses} />\n        </div>\n        {headerChildren}\n      </Flex>\n    );\n  }\n\n  return (\n    <div\n      className={linkClasses}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-expanded={!!ariaExpanded}\n    >\n      <span className=\"mobius/AccordionLinkText\">{text}</span>\n      <Icon icon={chevronDown} className={iconClasses} />\n    </div>\n  );\n};\n\nexport interface AccordionProps\n  extends DOMProps,\n    RefAttributes<AccordionElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Link text to show accordion content */\n  showText?: string;\n  /** Link text to hide accordion content */\n  hideText?: string;\n  /** Whether header is above or below content */\n  headerPosition?: \"top\" | \"bottom\";\n  /** Whether to expand the accordion initially */\n  startOpen?: boolean | undefined;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Callback that fires each time the accordion state changes */\n  onChange?: (state: boolean) => void;\n  children?: ReactNode;\n  headerChildren?: ReactNode;\n}\n\nexport const Accordion: ForwardedRefComponent<\n  AccordionProps,\n  AccordionElementType\n> = forwardRef((props: AccordionProps, ref: AccordionRef) => {\n  const {\n    showText = \"See more\",\n    hideText = \"See less\",\n    headerPosition = \"top\",\n    startOpen = false,\n    onOpen,\n    onClose,\n    onChange = () => {},\n    headerChildren,\n    ...rest\n  } = props;\n  const [accordionState, setAccordionState] = useState({\n    open: true,\n    withAnimation: false,\n  });\n  const prefersReducedMotion = window?.matchMedia(\n    \"(prefers-reduced-motion: reduce)\",\n  ).matches;\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/Accordion\",\n    props.className,\n    {\n      \"--should-animate\": accordionState.withAnimation && !prefersReducedMotion,\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentContainerClasses = classNames(\n    \"mobius/AccordionContentContainer\",\n    {\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentClasses = classNames(\"mobius/AccordionContent\", {\n    \"--is-open\": accordionState.open,\n  });\n  const linkText = accordionState.open ? hideText : showText;\n\n  const handleChange = () => {\n    // Fire events\n    if (!accordionState.open && onOpen) {\n      onOpen();\n    }\n    if (accordionState.open && onClose) {\n      onClose();\n    }\n    if (onChange) {\n      onChange(!accordionState.open);\n    }\n    setAccordionState({\n      open: !accordionState.open,\n      withAnimation: true,\n    });\n  };\n\n  useEffect(() => {\n    setAccordionState({\n      open: startOpen,\n      withAnimation: false,\n    });\n  }, [startOpen]);\n\n  return (\n    <div ref={ref} {...rest} className={containerClasses}>\n      {headerPosition === \"top\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n      <div\n        className={contentContainerClasses}\n        aria-hidden={!accordionState.open}\n      >\n        <div className={contentClasses}>{props.children}</div>\n      </div>\n      {headerPosition === \"bottom\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["Accordion","AccordionLink","text","toggle","onClick","headerChildren","ariaExpanded","linkClasses","classNames","iconClasses","handleOnClick","handleKeyDown","e","key","Flex","justifyContent","alignItems","className","div","onKeyDown","role","tabIndex","aria-expanded","span","Icon","icon","chevronDown","forwardRef","props","ref","window","showText","hideText","headerPosition","startOpen","onOpen","onClose","onChange","rest","accordionState","setAccordionState","useState","open","withAnimation","prefersReducedMotion","matchMedia","matches","containerClasses","contentContainerClasses","contentClasses","linkText","handleChange","useEffect","aria-hidden","children"],"mappings":"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"}