@frontify/fondue-components 3.3.6 → 4.0.1

package/dist/fondue-components.js

@@ -3,42 +3,44 @@ import { Box as t } from "./fondue-components3.js";
 import { Button as x } from "./fondue-components4.js";
 import { Checkbox as f } from "./fondue-components5.js";
 import { ColorPicker as l } from "./fondue-components6.js";
-import { Dialog as c } from "./fondue-components7.js";
-import { Divider as S } from "./fondue-components8.js";
-import { Dropdown as g } from "./fondue-components9.js";
-import { Flex as B } from "./fondue-components10.js";
-import { Flyout as D } from "./fondue-components11.js";
-import { Grid as h } from "./fondue-components12.js";
-import { Label as w } from "./fondue-components13.js";
-import { LoadingBar as L } from "./fondue-components14.js";
-import { ScrollArea as v } from "./fondue-components15.js";
-import { Section as A } from "./fondue-components16.js";
-import { SegmentedControl as I } from "./fondue-components17.js";
-import { Select as j } from "./fondue-components18.js";
-import { Slider as s } from "./fondue-components19.js";
+import { Dialog as a } from "./fondue-components7.js";
+import { Divider as d } from "./fondue-components8.js";
+import { Dropdown as b } from "./fondue-components9.js";
+import { Flex as u } from "./fondue-components10.js";
+import { Flyout as C } from "./fondue-components11.js";
+import { Grid as T } from "./fondue-components12.js";
+import { Label as k } from "./fondue-components13.js";
+import { LoadingBar as F } from "./fondue-components14.js";
+import { ScrollArea as s } from "./fondue-components15.js";
+import { Section as y } from "./fondue-components16.js";
+import { SegmentedControl as G } from "./fondue-components17.js";
+import { Select as P } from "./fondue-components18.js";
+import { Slider as q } from "./fondue-components19.js";
 import { Switch as E } from "./fondue-components20.js";
-import { TextInput as J } from "./fondue-components21.js";
-import { Tooltip as M } from "./fondue-components22.js";
+import { Tabs as J } from "./fondue-components21.js";
+import { TextInput as M } from "./fondue-components22.js";
+import { Tooltip as O } from "./fondue-components23.js";
 export {
   t as Box,
   x as Button,
   f as Checkbox,
   l as ColorPicker,
-  c as Dialog,
-  S as Divider,
-  g as Dropdown,
-  B as Flex,
-  D as Flyout,
-  h as Grid,
-  w as Label,
-  L as LoadingBar,
-  v as ScrollArea,
-  A as Section,
-  I as SegmentedControl,
-  j as Select,
-  s as Slider,
+  a as Dialog,
+  d as Divider,
+  b as Dropdown,
+  u as Flex,
+  C as Flyout,
+  T as Grid,
+  k as Label,
+  F as LoadingBar,
+  s as ScrollArea,
+  y as Section,
+  G as SegmentedControl,
+  P as Select,
+  q as Slider,
   E as Switch,
-  J as TextInput,
-  M as Tooltip
+  J as Tabs,
+  M as TextInput,
+  O as Tooltip
 };
 //# sourceMappingURL=fondue-components.js.map

package/dist/fondue-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fondue-components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/fondue-components10.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import { propsToCssVariables as a } from "./fondue-components23.js";
-import i from "./fondue-components40.js";
+import { propsToCssVariables as a } from "./fondue-components24.js";
+import i from "./fondue-components41.js";
 const l = ({
   as: t = "div",
   "data-test-id": s = "fondue-flex",

package/dist/fondue-components11.js

@@ -1,22 +1,22 @@
 import { jsx as a, jsxs as v } from "react/jsx-runtime";
-import { IconCross as C } from "@frontify/fondue-icons";
-import * as r from "@radix-ui/react-popover";
-import { forwardRef as s, useRef as x } from "react";
-import { usePreventDropdownOverflow as w } from "./fondue-components38.js";
-import { addAutoFocusAttribute as b, syncRefs as n, addShowFocusRing as A } from "./fondue-components35.js";
-import d from "./fondue-components41.js";
-const c = ({ children: t, ...o }) => /* @__PURE__ */ a(r.Root, { ...o, children: t });
+import { IconCross as x } from "@frontify/fondue-icons";
+import * as d from "@radix-ui/react-popover";
+import { forwardRef as r, useRef as C } from "react";
+import { usePreventDropdownOverflow as w } from "./fondue-components39.js";
+import { addAutoFocusAttribute as b, syncRefs as n, addShowFocusRing as A } from "./fondue-components36.js";
+import u from "./fondue-components42.js";
+const c = ({ children: t, ...o }) => /* @__PURE__ */ a(d.Root, { ...o, children: t });
 c.displayName = "Flyout.Root";
-const y = ({ children: t, "data-test-id": o = "fondue-flyout-trigger" }, e) => /* @__PURE__ */ a(
-  r.Trigger,
+const y = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger" }, s) => /* @__PURE__ */ a(
+  d.Trigger,
   {
     onMouseDown: b,
     "data-auto-focus-visible": "true",
     "data-auto-focus-trigger": !0,
-    "data-test-id": o,
-    asChild: !0,
-    ref: e,
-    children: t
+    "data-test-id": e,
+    asChild: t,
+    ref: s,
+    children: o
   }
 );
 y.displayName = "Flyout.Trigger";
@@ -24,32 +24,32 @@ const f = ({
   align: t = "start",
   maxWidth: o = "360px",
   padding: e = "compact",
-  "data-test-id": i = "fondue-flyout-content",
+  "data-test-id": s = "fondue-flyout-content",
   children: g,
   rounded: N,
   ...R
 }, l) => {
-  const u = x(null), { setMaxHeight: h } = w(u);
-  return /* @__PURE__ */ a(r.Portal, { children: /* @__PURE__ */ a(
-    r.Content,
+  const i = C(null), { setMaxHeight: h } = w(i);
+  return /* @__PURE__ */ a(d.Portal, { children: /* @__PURE__ */ a(
+    d.Content,
     {
       style: {
         "--flyout-max-width": o
       },
-      ref: u,
+      ref: i,
       align: t,
       collisionPadding: 8,
       sideOffset: 8,
       onOpenAutoFocus: () => {
-        h(), n(u, l);
+        h(), n(i, l);
       },
       onCloseAutoFocus: () => {
-        n(u, l);
+        n(i, l);
       },
-      className: d.root,
+      className: u.root,
       "data-flyout-spacing": e,
       "data-rounded": N,
-      "data-test-id": i,
+      "data-test-id": s,
       onFocus: A,
       ...R,
       children: g
@@ -57,22 +57,22 @@ const f = ({
   ) });
 };
 f.displayName = "Flyout.Content";
-const m = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, i) => /* @__PURE__ */ v("div", { "data-test-id": e, ref: i, className: d.header, children: [
+const m = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, s) => /* @__PURE__ */ v("div", { "data-test-id": e, ref: s, className: u.header, children: [
   /* @__PURE__ */ a("div", { children: o }),
-  t && /* @__PURE__ */ a(r.Close, { role: "button", "data-test-id": `${e}-close`, className: d.close, children: /* @__PURE__ */ a(C, { size: 20 }) })
+  t && /* @__PURE__ */ a(d.Close, { role: "button", "data-test-id": `${e}-close`, className: u.close, children: /* @__PURE__ */ a(x, { size: 20 }) })
 ] });
 m.displayName = "Flyout.Header";
-const p = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: d.footer, children: t });
+const p = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: u.footer, children: t });
 p.displayName = "Flyout.Footer";
-const F = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: d.body, children: t });
+const F = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: u.body, children: t });
 F.displayName = "Flyout.Body";
 const D = {
   Root: c,
-  Trigger: s(y),
-  Content: s(f),
-  Header: s(m),
-  Footer: s(p),
-  Body: s(F)
+  Trigger: r(y),
+  Content: r(f),
+  Header: r(m),
+  Footer: r(p),
+  Body: r(F)
 };
 export {
   D as Flyout,

package/dist/fondue-components11.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components11.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, useRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { addAutoFocusAttribute, addShowFocusRing, syncRefs } from '#/utilities/domUtilities';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the flyout\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport type FlyoutContentProps = {\n    /**\n     * Add rounded corners to the flyout\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type FlyoutTriggerProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type FlyoutBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport const FlyoutTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-trigger' }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild\n            ref={ref}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        rounded,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content\n                style={\n                    {\n                        '--flyout-max-width': maxWidth,\n                    } as CSSProperties\n                }\n                ref={localRef}\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                onOpenAutoFocus={() => {\n                    setMaxHeight();\n                    syncRefs(localRef, ref);\n                }}\n                onCloseAutoFocus={() => {\n                    syncRefs(localRef, ref);\n                }}\n                className={styles.root}\n                data-flyout-spacing={padding}\n                data-rounded={rounded}\n                data-test-id={dataTestId}\n                onFocus={addShowFocusRing}\n                {...props}\n            >\n                {children}\n            </RadixPopover.Content>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className={styles.close}>\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body' }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} data-flyout-spacing=\"compact\" className={styles.body}>\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","dataTestId","ref","jsx","addAutoFocusAttribute","FlyoutContent","align","maxWidth","padding","rounded","localRef","useRef","setMaxHeight","usePreventDropdownOverflow","syncRefs","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":";;;;;;;AA2EO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,EAAS,CAAA;AAEnDD,EAAW,cAAc;AAEZ,MAAAI,IAAgB,CACzB,EAAE,UAAAH,GAAU,gBAAgBI,IAAa,2BACzCC,MAGI,gBAAAC;AAAA,EAACJ,EAAa;AAAA,EAAb;AAAA,IACG,aAAaK;AAAA,IACb,2BAAwB;AAAA,IACxB,2BAAuB;AAAA,IACvB,gBAAcH;AAAA,IACd,SAAO;AAAA,IACP,KAAAC;AAAA,IAEC,UAAAL;AAAA,EAAA;AAAA;AAIbG,EAAc,cAAc;AAErB,MAAMK,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,gBAAgBP,IAAa;AAAA,EAC7B,UAAAJ;AAAA,EACA,SAAAY;AAAA,EACA,GAAGX;AACP,GACAI,MACC;AACK,QAAAQ,IAAWC,EAAO,IAAI,GAEtB,EAAE,cAAAC,EAAA,IAAiBC,EAA2BH,CAAQ;AAGxD,SAAA,gBAAAP,EAACJ,EAAa,QAAb,EACG,UAAA,gBAAAI;AAAA,IAACJ,EAAa;AAAA,IAAb;AAAA,MACG,OACI;AAAA,QACI,sBAAsBQ;AAAA,MAC1B;AAAA,MAEJ,KAAKG;AAAA,MACL,OAAAJ;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,iBAAiB,MAAM;AACN,QAAAM,KACbE,EAASJ,GAAUR,CAAG;AAAA,MAC1B;AAAA,MACA,kBAAkB,MAAM;AACpB,QAAAY,EAASJ,GAAUR,CAAG;AAAA,MAC1B;AAAA,MACA,WAAWa,EAAO;AAAA,MAClB,uBAAqBP;AAAA,MACrB,gBAAcC;AAAA,MACd,gBAAcR;AAAA,MACd,SAASe;AAAA,MACR,GAAGlB;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAER;AACAQ,EAAc,cAAc;AAEf,MAAAY,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAArB,GAAU,gBAAgBI,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWa,EAAO,QACvD,UAAA;AAAA,EAAA,gBAAAZ,EAAC,SAAK,UAAAN,GAAS;AAAA,EACdqB,KACI,gBAAAf,EAAAJ,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGE,CAAU,UAAU,WAAWc,EAAO,OACrF,4BAACI,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AAER,EAAA,CAAA;AAGRF,EAAa,cAAc;AAEd,MAAAG,IAAe,CACxB,EAAE,UAAAvB,GAAU,gBAAgBI,IAAa,0BACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWa,EAAO,QACtD,UAAAlB,EACL,CAAA;AAGRuB,EAAa,cAAc;AAEd,MAAAC,IAAa,CACtB,EAAE,UAAAxB,GAAU,gBAAgBI,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWa,EAAO,MACpF,UAAAlB,EACL,CAAA;AAGRwB,EAAW,cAAc;AAElB,MAAMC,IAAS;AAAA,EAClB,MAAM1B;AAAA,EACN,SAAS2B,EAAkDvB,CAAa;AAAA,EACxE,SAASuB,EAA+ClB,CAAa;AAAA,EACrE,QAAQkB,EAA8CN,CAAY;AAAA,EAClE,QAAQM,EAA8CH,CAAY;AAAA,EAClE,MAAMG,EAA4CF,CAAU;AAChE;"}
+{"version":3,"file":"fondue-components11.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, useRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { addAutoFocusAttribute, addShowFocusRing, syncRefs } from '#/utilities/domUtilities';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the flyout\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger' }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\nexport type FlyoutContentProps = {\n    /**\n     * Add rounded corners to the flyout\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        rounded,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content\n                style={\n                    {\n                        '--flyout-max-width': maxWidth,\n                    } as CSSProperties\n                }\n                ref={localRef}\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                onOpenAutoFocus={() => {\n                    setMaxHeight();\n                    syncRefs(localRef, ref);\n                }}\n                onCloseAutoFocus={() => {\n                    syncRefs(localRef, ref);\n                }}\n                className={styles.root}\n                data-flyout-spacing={padding}\n                data-rounded={rounded}\n                data-test-id={dataTestId}\n                onFocus={addShowFocusRing}\n                {...props}\n            >\n                {children}\n            </RadixPopover.Content>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className={styles.close}>\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body' }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} data-flyout-spacing=\"compact\" className={styles.body}>\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","FlyoutContent","align","maxWidth","padding","rounded","localRef","useRef","setMaxHeight","usePreventDropdownOverflow","syncRefs","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":";;;;;;;AA6BO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,EAAS,CAAA;AAEnDD,EAAW,cAAc;AAYZ,MAAAI,IAAgB,CACzB,EAAE,SAAAC,IAAU,IAAM,UAAAJ,GAAU,gBAAgBK,IAAa,wBAAwB,GACjFC,MAGI,gBAAAC;AAAA,EAACL,EAAa;AAAA,EAAb;AAAA,IACG,aAAaM;AAAA,IACb,2BAAwB;AAAA,IACxB,2BAAuB;AAAA,IACvB,gBAAcH;AAAA,IACd,SAAAD;AAAA,IACA,KAAAE;AAAA,IAEC,UAAAN;AAAA,EAAA;AAAA;AAIbG,EAAc,cAAc;AAgCrB,MAAMM,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,gBAAgBP,IAAa;AAAA,EAC7B,UAAAL;AAAA,EACA,SAAAa;AAAA,EACA,GAAGZ;AACP,GACAK,MACC;AACK,QAAAQ,IAAWC,EAAO,IAAI,GAEtB,EAAE,cAAAC,EAAA,IAAiBC,EAA2BH,CAAQ;AAGxD,SAAA,gBAAAP,EAACL,EAAa,QAAb,EACG,UAAA,gBAAAK;AAAA,IAACL,EAAa;AAAA,IAAb;AAAA,MACG,OACI;AAAA,QACI,sBAAsBS;AAAA,MAC1B;AAAA,MAEJ,KAAKG;AAAA,MACL,OAAAJ;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,iBAAiB,MAAM;AACN,QAAAM,KACbE,EAASJ,GAAUR,CAAG;AAAA,MAC1B;AAAA,MACA,kBAAkB,MAAM;AACpB,QAAAY,EAASJ,GAAUR,CAAG;AAAA,MAC1B;AAAA,MACA,WAAWa,EAAO;AAAA,MAClB,uBAAqBP;AAAA,MACrB,gBAAcC;AAAA,MACd,gBAAcR;AAAA,MACd,SAASe;AAAA,MACR,GAAGnB;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAER;AACAS,EAAc,cAAc;AAYf,MAAAY,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAAtB,GAAU,gBAAgBK,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWa,EAAO,QACvD,UAAA;AAAA,EAAA,gBAAAZ,EAAC,SAAK,UAAAP,GAAS;AAAA,EACdsB,KACI,gBAAAf,EAAAL,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGG,CAAU,UAAU,WAAWc,EAAO,OACrF,4BAACI,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AAER,EAAA,CAAA;AAGRF,EAAa,cAAc;AAId,MAAAG,IAAe,CACxB,EAAE,UAAAxB,GAAU,gBAAgBK,IAAa,0BACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWa,EAAO,QACtD,UAAAnB,EACL,CAAA;AAGRwB,EAAa,cAAc;AAId,MAAAC,IAAa,CACtB,EAAE,UAAAzB,GAAU,gBAAgBK,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWa,EAAO,MACpF,UAAAnB,EACL,CAAA;AAGRyB,EAAW,cAAc;AAElB,MAAMC,IAAS;AAAA,EAClB,MAAM3B;AAAA,EACN,SAAS4B,EAAkDxB,CAAa;AAAA,EACxE,SAASwB,EAA+ClB,CAAa;AAAA,EACrE,QAAQkB,EAA8CN,CAAY;AAAA,EAClE,QAAQM,EAA8CH,CAAY;AAAA,EAClE,MAAMG,EAA4CF,CAAU;AAChE;"}

package/dist/fondue-components12.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
-import { propsToCssVariables as a } from "./fondue-components23.js";
-import e from "./fondue-components42.js";
+import { propsToCssVariables as a } from "./fondue-components24.js";
+import e from "./fondue-components43.js";
 const d = ({
   as: s = "div",
   "data-test-id": t = "fondue-grid",

package/dist/fondue-components13.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import * as d from "@radix-ui/react-label";
 import { forwardRef as i } from "react";
-import { cn as n } from "./fondue-components25.js";
+import { cn as n } from "./fondue-components26.js";
 const s = ({ className: e, "data-test-id": a = "fondue-label", ...t }, r) => /* @__PURE__ */ o(
   d.Root,
   {

package/dist/fondue-components14.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-progress";
 import { forwardRef as m } from "react";
-import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components43.js";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components44.js";
 const p = m(
   ({
     value: a,

package/dist/fondue-components15.js

@@ -1,7 +1,7 @@
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-scroll-area";
 import { forwardRef as n } from "react";
-import l from "./fondue-components44.js";
+import l from "./fondue-components45.js";
 const b = ({
   type: t,
   maxHeight: e = "100%",

package/dist/fondue-components16.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { propsToCssVariables as r } from "./fondue-components23.js";
-import i from "./fondue-components45.js";
+import { propsToCssVariables as r } from "./fondue-components24.js";
+import i from "./fondue-components46.js";
 const a = ({ "data-test-id": t = "fondue-section", children: o, ...s }) => /* @__PURE__ */ e("section", { className: i.root, "data-test-id": t, style: r(s), children: o });
 a.displayName = "Section";
 export {

package/dist/fondue-components17.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-toggle-group";
 import { forwardRef as n } from "react";
-import { useControllableState as N } from "./fondue-components46.js";
-import e from "./fondue-components47.js";
+import { useControllableState as N } from "./fondue-components47.js";
+import e from "./fondue-components48.js";
 const d = ({ children: a, value: o, defaultValue: s, onValueChange: p, ...m }, f) => {
   const [g, C] = N({
     prop: o,

package/dist/fondue-components18.js

@@ -1,15 +1,15 @@
 import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { IconCaretDown as z, IconCheckMark as D, IconExclamationMarkTriangle as j } from "@frontify/fondue-icons";
+import { IconCaretDown as D, IconCheckMark as j, IconExclamationMarkTriangle as E } from "@frontify/fondue-icons";
 import * as S from "@radix-ui/react-popover";
-import { Slot as E } from "@radix-ui/react-slot";
-import { useSelect as H } from "downshift";
-import { forwardRef as T, useRef as $, useState as A } from "react";
-import { ForwardedRefCombobox as V } from "./fondue-components48.js";
-import { ForwardedRefSelectItem as q, ForwardedRefSelectItemGroup as J } from "./fondue-components49.js";
-import { SelectMenu as K } from "./fondue-components50.js";
-import { ForwardedRefSelectSlot as L } from "./fondue-components51.js";
-import a from "./fondue-components52.js";
-import { useSelectData as Q } from "./fondue-components53.js";
+import { Slot as H } from "@radix-ui/react-slot";
+import { useSelect as T } from "downshift";
+import { forwardRef as V, useRef as $, useState as A } from "react";
+import { ForwardedRefCombobox as q } from "./fondue-components49.js";
+import { ForwardedRefSelectItem as J, ForwardedRefSelectItemGroup as K } from "./fondue-components50.js";
+import { SelectMenu as L } from "./fondue-components51.js";
+import { ForwardedRefSelectSlot as Q } from "./fondue-components52.js";
+import a from "./fondue-components53.js";
+import { useSelectData as U } from "./fondue-components54.js";
 const g = ({
   children: h,
   onSelect: i,
@@ -18,13 +18,14 @@ const g = ({
   placeholder: b = "",
   status: s = "neutral",
   disabled: m,
-  "aria-label": C,
+  alignMenu: C = "start",
+  "aria-label": w,
   "data-test-id": l = "fondue-select"
 }, d) => {
-  const { inputSlots: w, menuSlots: x, items: R, clearButton: u, getItemByValue: p } = Q(h), y = p(N), F = p(I), c = $(!1), [k, f] = A(!1), { getToggleButtonProps: v, getMenuProps: M, getItemProps: P, reset: B, selectedItem: r, isOpen: G, highlightedIndex: O } = H({
-    items: R,
-    defaultSelectedItem: y,
-    selectedItem: F,
+  const { inputSlots: x, menuSlots: R, items: y, clearButton: u, getItemByValue: p } = U(h), F = p(N), k = p(I), c = $(!1), [v, f] = A(!1), { getToggleButtonProps: M, getMenuProps: P, getItemProps: B, reset: G, selectedItem: r, isOpen: O, highlightedIndex: z } = T({
+    items: y,
+    defaultSelectedItem: F,
+    selectedItem: k,
     onIsOpenChange: () => {
       f(!1);
     },
@@ -36,7 +37,7 @@ const g = ({
     },
     itemToString: (e) => e ? e.label : ""
   });
-  return /* @__PURE__ */ n(S.Root, { open: G, children: [
+  return /* @__PURE__ */ n(S.Root, { open: O, children: [
     /* @__PURE__ */ o(
       S.Anchor,
       {
@@ -58,27 +59,27 @@ const g = ({
             "data-disabled": m,
             "data-empty": !r,
             "data-test-id": l,
-            ...m ? {} : v({
-              "aria-label": C,
+            ...m ? {} : M({
+              "aria-label": w,
               ...d ? { ref: d } : {}
             }),
             children: [
-              /* @__PURE__ */ o("span", { className: a.input, children: r ? r.label : b }),
-              w,
+              /* @__PURE__ */ o("span", { className: a.selectedValue, children: r ? r.label : b }),
+              x,
               u && /* @__PURE__ */ o(
-                E,
+                H,
                 {
                   onClick: (e) => {
-                    e.stopPropagation(), B();
+                    e.stopPropagation(), G();
                   },
                   className: a.clear,
                   children: u
                 }
               ),
               /* @__PURE__ */ n("div", { className: a.icons, children: [
-                /* @__PURE__ */ o(z, { size: 16, className: a.caret }),
+                /* @__PURE__ */ o(D, { size: 16, className: a.caret }),
                 s === "success" ? /* @__PURE__ */ o(
-                  D,
+                  j,
                   {
                     size: 16,
                     className: a.iconSuccess,
@@ -86,7 +87,7 @@ const g = ({
                   }
                 ) : null,
                 s === "error" ? /* @__PURE__ */ o(
-                  j,
+                  E,
                   {
                     size: 16,
                     className: a.iconError,
@@ -100,31 +101,32 @@ const g = ({
       }
     ),
     /* @__PURE__ */ o(
-      K,
+      L,
       {
-        highlightedIndex: O,
-        getMenuProps: M,
-        getItemProps: P,
+        align: C,
+        highlightedIndex: z,
+        getMenuProps: P,
+        getItemProps: B,
         selectedItem: r,
-        hasInteractedSinceOpening: k,
-        children: x
+        hasInteractedSinceOpening: v,
+        children: R
       }
     )
   ] });
 };
 g.displayName = "Select";
-const U = T(g), t = U;
+const W = V(g), t = W;
 t.displayName = "Select";
-t.Combobox = V;
+t.Combobox = q;
 t.Combobox.displayName = "Select.Combobox";
-t.Item = q;
+t.Item = J;
 t.Item.displayName = "Select.Item";
-t.Group = J;
+t.Group = K;
 t.Group.displayName = "Select.Group";
-t.Slot = L;
+t.Slot = Q;
 t.Slot.displayName = "Select.Slot";
 export {
-  U as ForwardedRefSelect,
+  W as ForwardedRefSelect,
   t as Select,
   g as SelectInput
 };

package/dist/fondue-components18.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components18.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the select component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the select component.\n     */\n    disabled?: boolean;\n    /**\n     * The aria label of the select component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select',\n    }: SelectComponentProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const wasClicked = useRef(false);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect && onSelect(selectedItem.value);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor\n                asChild\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                }}\n            >\n                <div\n                    className={styles.root}\n                    data-status={status}\n                    data-disabled={disabled}\n                    data-empty={!selectedItem}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : getToggleButtonProps({\n                              'aria-label': ariaLabel,\n                              ...(forwardedRef ? { ref: forwardedRef } : {}),\n                          }))}\n                >\n                    <span className={styles.input}>{selectedItem ? selectedItem.label : placeholder}</span>\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n    Combobox: typeof ForwardedRefCombobox;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","status","disabled","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","jsxs","RadixPopover","jsx","mouseEvent","focusEvent","blurEvent","styles","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":"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"}
+{"version":3,"file":"fondue-components18.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the select component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the select component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end';\n    /**\n     * The aria label of the select component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select',\n    }: SelectComponentProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const wasClicked = useRef(false);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect && onSelect(selectedItem.value);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor\n                asChild\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                }}\n            >\n                <div\n                    className={styles.root}\n                    data-status={status}\n                    data-disabled={disabled}\n                    data-empty={!selectedItem}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : getToggleButtonProps({\n                              'aria-label': ariaLabel,\n                              ...(forwardedRef ? { ref: forwardedRef } : {}),\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{selectedItem ? selectedItem.label : placeholder}</span>\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n    Combobox: typeof ForwardedRefCombobox;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","status","disabled","alignMenu","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","jsxs","RadixPopover","jsx","mouseEvent","focusEvent","blurEvent","styles","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":"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"}

package/dist/fondue-components19.js

@@ -1,7 +1,7 @@
 import { jsxs as f, jsx as s } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-slider";
 import { forwardRef as h, useRef as R } from "react";
-import r from "./fondue-components54.js";
+import r from "./fondue-components55.js";
 const g = ({
   value: a,
   defaultValue: n = [0],

package/dist/fondue-components20.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-switch";
 import { forwardRef as l } from "react";
-import { cn as f } from "./fondue-components25.js";
-import t from "./fondue-components55.js";
+import { cn as f } from "./fondue-components26.js";
+import t from "./fondue-components56.js";
 const n = ({
   value: a,
   defaultValue: i,