@frontify/fondue-components 29.2.0 → 30.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontify/fondue-components",
   "type": "module",
-  "version": "29.2.0",
+  "version": "30.0.0",
   "homepage": "https://github.com/Frontify/fondue",
   "repository": {
     "type": "git",
@@ -35,7 +35,7 @@
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18",
-    "@frontify/fondue-icons": "^0.25.0",
+    "@frontify/fondue-icons": "^0.26.0",
     "@frontify/fondue-tokens": "^5.0.0"
   },
   "dependencies": {
@@ -110,7 +110,7 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
-    "@frontify/fondue-icons": "^0.25.0",
+    "@frontify/fondue-icons": "^0.26.0",
     "@frontify/fondue-tokens": "^5.0.0"
   },
   "scripts": {

package/dist/fondue-components148.js

@@ -1,84 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as p from "@radix-ui/react-popover";
-import { Slot as M } from "@radix-ui/react-slot";
-import { isValidElement as T } from "react";
-import { useFondueTheme as E, ThemeProvider as F } from "./fondue-components40.js";
-import a from "./fondue-components134.js";
-import { recursiveMap as R, getSelectOptionValue as _ } from "./fondue-components156.js";
-const j = ({
-  highlightedIndex: l,
-  getMenuProps: u,
-  getItemProps: m,
-  children: f,
-  filterText: d,
-  align: h,
-  side: P,
-  selectedItemValues: o,
-  hasInteractedSinceOpening: S,
-  viewportCollisionPadding: g = "compact",
-  onEscapeKeyDown: v
-}) => {
-  const O = (e) => {
-    e.preventDefault();
-  }, N = {
-    compact: 8,
-    spacious: 24
-  }, { theme: A, dir: n } = E(), C = (e) => n === "ltr" ? e : e === "left" ? "right" : e === "right" ? "left" : e;
-  return /* @__PURE__ */ r(p.Portal, { children: /* @__PURE__ */ r(F, { theme: A, dir: n, children: /* @__PURE__ */ r(
-    p.Content,
-    {
-      dir: n,
-      align: h,
-      side: C(P),
-      collisionPadding: N[g] + 8,
-      onOpenAutoFocus: O,
-      onEscapeKeyDown: v,
-      className: a.portal,
-      children: /* @__PURE__ */ r(
-        "ul",
-        {
-          className: a.menu,
-          ...u({}, { suppressRefError: !0 }),
-          "data-has-interacted": S ? "true" : "false",
-          "data-test-id": "fondue-select-menu",
-          children: R(
-            f,
-            (e, s) => {
-              if (((t) => (
-                // @ts-expect-error - We are explicitly checking for ref
-                T(t) && t.ref !== void 0
-              ))(e)) {
-                const t = _(e.props), i = m({
-                  item: t,
-                  index: s,
-                  ...e.ref ? { ref: e.ref } : {}
-                }), c = o == null ? void 0 : o.includes(t.value);
-                return /* @__PURE__ */ r(
-                  M,
-                  {
-                    className: a.item,
-                    "data-highlighted": l === s,
-                    "data-selected": c,
-                    onTouchStart: (D) => {
-                      i.onClick && i.onClick(D);
-                    },
-                    ...i,
-                    "aria-selected": c,
-                    children: e
-                  },
-                  e.props.value
-                );
-              }
-            },
-            d
-          ).parsedChildren
-        }
-      )
-    }
-  ) }) });
-};
-j.displayName = "Select.Menu";
-export {
-  j as SelectMenu
-};
-//# sourceMappingURL=fondue-components148.js.map

package/dist/fondue-components148.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fondue-components148.js","sources":["../src/components/Select/components/SelectMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type UseComboboxPropGetters, type UseSelectPropGetters } from 'downshift';\nimport { isValidElement, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '#/components/ThemeProvider/ThemeProvider';\n\nimport styles from '../styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from '../utils';\n\nimport { type SelectItemProps } from './SelectItem';\n\nexport type SelectMenuViewportCollisionPadding = 'compact' | 'spacious';\n\nexport type SelectMenuProps = {\n    /**\n     * @internal\n     * The index of the highlighted item in the menu.\n     */\n    highlightedIndex: number;\n    /**\n     * @internal\n     * Callback function to retrieve the props for a menu element.\n     */\n    getMenuProps: UseSelectPropGetters<unknown>['getMenuProps'] | UseComboboxPropGetters<unknown>['getMenuProps'];\n    /**\n     * @internal\n     * Callback function to retrieve the props for a item element.\n     */\n    getItemProps: UseSelectPropGetters<unknown>['getItemProps'] | UseComboboxPropGetters<unknown>['getItemProps'];\n    /**\n     * @internal\n     * The children of the menu component. This can contain multiple `Select.Item` or `Select.Group` components.\n     */\n    children: ReactNode;\n    /**\n     * @internal\n     * The filter text shown in the combobox input element.\n     */\n    filterText?: string;\n    /**\n     * @internal\n     * The alignment of the menu.\n     */\n    align: 'start' | 'center' | 'end';\n    /**\n     * @internal\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * @internal\n     * The type of the menu.\n     */\n    selectedItemValues?: string[];\n    /**\n     * @internal\n     * A boolean to indicate if highlighted item was changed since opening the menu.\n     * This is used to determine the style of the selected/highlighted item.\n     */\n    hasInteractedSinceOpening?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n    /**\n     * @internal\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n};\n\nexport const SelectMenu = ({\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    children,\n    filterText,\n    align,\n    side,\n    selectedItemValues,\n    hasInteractedSinceOpening,\n    viewportCollisionPadding = 'compact',\n    onEscapeKeyDown,\n}: SelectMenuProps) => {\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n    };\n\n    const VIEWPORT_COLLISION_PADDING_MAP: Record<SelectMenuViewportCollisionPadding, number> = {\n        compact: 8,\n        spacious: 24,\n    };\n\n    const { theme, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side: 'left' | 'right' | 'bottom' | 'top') => {\n        if (dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixPopover.Content\n                    dir={dir}\n                    align={align}\n                    side={getAdjustedSide(side)}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding] + 8}\n                    onOpenAutoFocus={handleOnOpenAutoFocus}\n                    onEscapeKeyDown={onEscapeKeyDown}\n                    className={styles.portal}\n                >\n                    <ul\n                        className={styles.menu}\n                        // TODO: fix this accessibility issue\n                        // We are mounting/unmounting the menu on open/close\n                        // We should instead toggle its visibility for accessibility reasons\n                        // https://github.com/downshift-js/downshift?tab=readme-ov-file#getmenuprops\n                        {...getMenuProps({}, { suppressRefError: true })}\n                        data-has-interacted={hasInteractedSinceOpening ? 'true' : 'false'}\n                        data-test-id=\"fondue-select-menu\"\n                    >\n                        {\n                            recursiveMap(\n                                children,\n                                (child, index) => {\n                                    const isValid = <TProps,>(\n                                        child: ReactNode,\n                                    ): child is ReactElement<TProps> & { ref: ForwardedRef<HTMLElement> } =>\n                                        // @ts-expect-error - We are explicitly checking for ref\n                                        isValidElement<TProps>(child) && child.ref !== undefined;\n\n                                    if (isValid<SelectItemProps>(child)) {\n                                        const optionData = getSelectOptionValue(child.props);\n                                        const itemProps = getItemProps({\n                                            item: optionData,\n                                            index,\n                                            ...(child.ref ? { ref: child.ref } : {}),\n                                        });\n\n                                        const isSelected = selectedItemValues?.includes(optionData.value);\n\n                                        return (\n                                            <RadixSlot\n                                                className={styles.item}\n                                                data-highlighted={highlightedIndex === index}\n                                                data-selected={isSelected}\n                                                key={child.props.value}\n                                                // Workaround for the issue where the onClick event is not fired on touch devices because of portal usage\n                                                onTouchStart={(event) => {\n                                                    if (itemProps.onClick) {\n                                                        itemProps.onClick(event as unknown as MouseEvent<HTMLElement>);\n                                                    }\n                                                }}\n                                                {...itemProps}\n                                                aria-selected={isSelected}\n                                            >\n                                                {child}\n                                            </RadixSlot>\n                                        );\n                                    }\n                                },\n                                filterText,\n                            ).parsedChildren\n                        }\n                    </ul>\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","align","side","selectedItemValues","hasInteractedSinceOpening","viewportCollisionPadding","onEscapeKeyDown","handleOnOpenAutoFocus","event","VIEWPORT_COLLISION_PADDING_MAP","theme","dir","useFondueTheme","getAdjustedSide","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","isSelected","RadixSlot"],"mappings":";;;;;;;AA4EO,MAAMA,IAAa,CAAC;AAAA,EACvB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,iBAAAC;AACJ,MAAuB;AACnB,QAAMC,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAA;AAAA,EACV,GAEMC,IAAqF;AAAA,IACvF,SAAS;AAAA,IACT,UAAU;AAAA,EAAA,GAGR,EAAE,OAAAC,GAAO,KAAAC,EAAA,IAAQC,EAAA,GAEjBC,IAAkB,CAACX,MACjBS,MAAQ,QACDT,IAGPA,MAAS,SACF,UAEPA,MAAS,UACF,SAGJA;AAGX,2BACKY,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,GAAA,EAAc,OAAAN,GAAc,KAAAC,GACzB,UAAA,gBAAAI;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,KAAAH;AAAA,MACA,OAAAV;AAAA,MACA,MAAMY,EAAgBX,CAAI;AAAA,MAC1B,kBAAkBO,EAA+BJ,CAAwB,IAAI;AAAA,MAC7E,iBAAiBE;AAAA,MACjB,iBAAAD;AAAA,MACA,WAAWW,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UAKjB,GAAGpB,EAAa,CAAA,GAAI,EAAE,kBAAkB,IAAM;AAAA,UAC/C,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAc;AAAA,YACInB;AAAA,YACA,CAACoB,GAAOC,MAAU;AAOd,mBANgB,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AACjC,sBAAMG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAY1B,EAAa;AAAA,kBAC3B,MAAMwB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC,GAEKM,IAAatB,KAAA,gBAAAA,EAAoB,SAASmB,EAAW;AAE3D,uBACI,gBAAAP;AAAA,kBAACW;AAAAA,kBAAA;AAAA,oBACG,WAAWT,EAAO;AAAA,oBAClB,oBAAkBrB,MAAqBwB;AAAA,oBACvC,iBAAeK;AAAA,oBAGf,cAAc,CAACjB,MAAU;AACrB,sBAAIgB,EAAU,WACVA,EAAU,QAAQhB,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGgB;AAAA,oBACJ,iBAAeC;AAAA,oBAEd,UAAAN;AAAA,kBAAA;AAAA,kBAVIA,EAAM,MAAM;AAAA,gBAAA;AAAA,cAa7B;AAAA,YACJ;AAAA,YACAnB;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,EAAA,GAER,EAAA,CACJ;AAER;AACAL,EAAW,cAAc;"}