@allxsmith/bestax-bulma 5.36.0 → 5.36.1

package/dist/esm/components/Menu.js

@@ -38,6 +38,10 @@ const MenuLabel = ({ className, children, ...props }) => {
 /**
  * MenuList applies `menu-list` class only at the top level (not for nested lists).
  *
+ * Every level renders `role="list"`, which Safari needs: WebKit stops
+ * exposing a `<ul>` as a list once its markers are hidden, and Bulma's reset
+ * hides them.
+ *
  * @function
  * @param {MenuListProps} props - Props for the MenuList component.
  * @returns {JSX.Element} The rendered menu list.
@@ -48,8 +52,11 @@ const MenuList = ({ className, children, ...props }) => {
     const ulClass = classNames(className, bulmaHelperClasses, {
         [usePrefixedClassNames('menu-list')]: level === 0,
     });
-    // Increment level for nested MenuLists
-    return (jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsx("ul", { className: ulClass || undefined, ...rest, children: children }) }));
+    // Increment level for nested MenuLists. role="list" restates the <ul>'s
+    // own role, for Safari: WebKit stops exposing a list as one once its
+    // markers are hidden, as Bulma's reset hides them, unless the role is set
+    // explicitly. After the spread, so a caller's role can't take it away.
+    return (jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsx("ul", { className: ulClass || undefined, ...rest, role: "list", children: children }) }));
 };
 /**
  * `href` alone — annotated so a typo is a compile error rather than a silent

package/dist/esm/components/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu.tsx"],"sourcesContent":["import React, { createContext, forwardRef, useContext } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { omitAttrs } from '../helpers/anchorAttrs';\nimport { buttonType } from '../helpers/buttonType';\nimport {\n  isCustomElement,\n  type PolymorphicComponent,\n} from '../helpers/polymorphic';\n\n// Context to track MenuList nesting level\nconst MenuListLevelContext = createContext(0);\n\n/**\n * Props for the Menu component.\n */\nexport interface MenuProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Menu content (labels, lists, items, etc). */\n  children: React.ReactNode;\n}\n\n/**\n * The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.\n *\n * @function\n * @param {MenuProps} props - Props for the Menu component.\n * @returns {JSX.Element} The rendered menu.\n * @see {@link https://bulma.io/documentation/components/menu/ | Bulma Menu documentation}\n */\nconst MenuComponent: React.FC<MenuProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('menu');\n\n  return (\n    <aside\n      className={classNames(bulmaClasses, bulmaHelperClasses, className)}\n      {...rest}\n    >\n      {children}\n    </aside>\n  );\n};\n\n/**\n * Props for the MenuLabel component.\n */\nexport interface MenuLabelProps\n  extends\n    Omit<React.HTMLAttributes<HTMLParagraphElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Label content. */\n  children: React.ReactNode;\n}\n\n/**\n * Bulma Menu label component.\n *\n * @function\n * @param {MenuLabelProps} props - Props for the MenuLabel component.\n * @returns {JSX.Element} The rendered menu label.\n */\nexport const MenuLabel: React.FC<MenuLabelProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  return (\n    <p\n      className={classNames(\n        usePrefixedClassNames('menu-label'),\n        className,\n        bulmaHelperClasses\n      )}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n};\n\n/**\n * Props for the MenuList component.\n */\nexport interface MenuListProps\n  extends\n    Omit<React.HTMLAttributes<HTMLUListElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** List items. */\n  children: React.ReactNode;\n}\n\n/**\n * MenuList applies `menu-list` class only at the top level (not for nested lists).\n *\n * @function\n * @param {MenuListProps} props - Props for the MenuList component.\n * @returns {JSX.Element} The rendered menu list.\n */\nexport const MenuList: React.FC<MenuListProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const level = useContext(MenuListLevelContext);\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  const ulClass = classNames(className, bulmaHelperClasses, {\n    [usePrefixedClassNames('menu-list')]: level === 0,\n  });\n\n  // Increment level for nested MenuLists\n  return (\n    <MenuListLevelContext.Provider value={level + 1}>\n      <ul className={ulClass || undefined} {...rest}>\n        {children}\n      </ul>\n    </MenuListLevelContext.Provider>\n  );\n};\n\n/**\n * The MenuItem component's own props.\n *\n * A menu item is two elements: a wrapping `<li>` and, inside it, the element\n * `as` names. The props here are the ones the `<li>` consumes; everything else\n * follows `as` onto the inner element.\n */\nexport interface MenuItemOwnProps extends BulmaClassesProps {\n  /** Additional CSS classes for the wrapping `<li>`. */\n  className?: string;\n  /** Item content and optional nested MenuList. */\n  children: React.ReactNode;\n  /**\n   * Marks the item as the current one. It adds Bulma's `is-active` class, and\n   * `aria-current=\"page\"` on the element `as` renders, so assistive tech can\n   * tell which item is current too. An `aria-current` you pass wins, even\n   * `undefined`: use it to say something else (`\"location\"` for a section of\n   * one page, say), or `aria-current={false}` to turn it off. A menu should\n   * mark one page, so when the section above the current page is `active` too,\n   * give it `aria-current=\"location\"`, and give an `active` item that isn't\n   * navigation, such as an `as=\"button\"` filter, `aria-current={false}`.\n   */\n  active?: boolean;\n  /** Inline styles for the wrapping `<li>`. */\n  style?: React.CSSProperties;\n  /** `id` for the wrapping `<li>`. */\n  id?: string;\n  /** `title` for the wrapping `<li>`. */\n  title?: string;\n  /** ARIA role for the wrapping `<li>`. */\n  role?: React.AriaRole;\n  /** Tab index for the wrapping `<li>`. */\n  tabIndex?: number;\n  /** Test id for the wrapping `<li>`. */\n  'data-testid'?: string;\n}\n\n/**\n * Props for the MenuItem component. Everything the `<li>` does not consume\n * follows `as` onto the inner element: with the default `'a'` that means `href`\n * and the other anchor attributes, and with `as={Link}` it means that\n * component's own props.\n *\n * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the inner element `as` renders, not the wrapping `<li>`, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.\n */\nexport type MenuItemProps<T extends React.ElementType = 'a'> =\n  MenuItemOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof MenuItemOwnProps | 'as'> & {\n      /**\n       * Custom link component (e.g. `Link` from router).\n       *\n       * `'button'` renders `type=\"button\"` unless you pass `type=\"submit\"` or `type=\"reset\"`, so\n       * an item inside a form does not submit it.\n       */\n      as?: T;\n    };\n\n/**\n * `href` alone — annotated so a typo is a compile error rather than a silent\n * no-op, the way both siblings' sets are.\n */\nconst STRIP_FROM_NON_LINK: Readonly<Record<'href', true>> = { href: true };\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `MenuItemProps<T>` above — the body cannot see through `T`.\n */\ntype MenuItemImplProps = MenuItemOwnProps & {\n  as?: React.ElementType;\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n};\n\n/**\n * MenuItem supports `as` prop for custom link components, e.g., react-router-dom Link.\n *\n * Give each item an `href`, a router link through `as`, or `as=\"button\"`, so\n * the keyboard can reach it: an `<a>` with no `href` isn't a link, and Tab\n * skips it.\n *\n * @function\n * @param {MenuItemProps} props - Props for the MenuItem component.\n * @param {React.Ref} ref - Forwarded ref to the inner element `as` renders.\n * @returns {JSX.Element} The rendered menu item.\n */\nexport const MenuItem = forwardRef(function MenuItem(\n  itemProps: MenuItemProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const {\n    className,\n    children,\n    active,\n    as: Component = 'a',\n    'data-testid': testId,\n    style,\n    id,\n    title,\n    role,\n    tabIndex,\n    ...rest\n  } = itemProps as MenuItemImplProps;\n  const { bulmaHelperClasses, rest: forwarded } = useBulmaClasses(rest);\n  // `href` reaches an anchor or a custom component (which owns its own prop\n  // contract), but not another intrinsic tag — `<span href>` is invalid HTML.\n  // The same rule Avatar applies through `isLinkLike` and Button through its\n  // intrinsic-only strip. Before #641 `href` was an own prop re-applied only\n  // for `as=\"a\"`; deriving it from `as` must not quietly widen that.\n  const isLinkLike =\n    Component === 'a' ||\n    typeof Component !== 'string' ||\n    isCustomElement(Component);\n  // `href` ALONE. `Dropdown.Item` strips every anchor-only attribute except\n  // `type`; `Level.Item` strips all of them, plus `rel`.\n  //\n  // Not because nothing else can arrive: `as` here is an open `React.ElementType`,\n  // and a non-fresh spread skips excess-property checking, so a typed caller\n  // CAN deliver `target` or `download` and they are forwarded. The set stays at\n  // `href` because widening it would be wrong for an open `as` — `referrerPolicy`\n  // on `as=\"img\"`, `target` on `as=\"form\"` and `media` on `as=\"source\"` are all\n  // legal, and a flat strip would delete them. Getting that right needs a\n  // per-attribute-per-element rule, which `bestax-migrate` already models in\n  // `LINK_ATTR_ELEMENTS`.\n  const linkProps = isLinkLike\n    ? forwarded\n    : omitAttrs(forwarded, STRIP_FROM_NON_LINK);\n  const itemClass = classNames(\n    { [usePrefixedClassNames('is-active')]: active },\n    bulmaHelperClasses\n  );\n\n  // Split children into label and nested MenuList(s)\n  const labelChildren: React.ReactNode[] = [];\n  const nestedMenuLists: React.ReactNode[] = [];\n  React.Children.forEach(children, child => {\n    if (React.isValidElement(child) && child.type === MenuList) {\n      nestedMenuLists.push(child);\n    } else {\n      labelChildren.push(child);\n    }\n  });\n\n  return (\n    <li\n      className={className}\n      data-testid={testId}\n      style={style}\n      id={id}\n      title={title}\n      role={role}\n      tabIndex={tabIndex}\n    >\n      <Component\n        ref={ref}\n        className={itemClass || undefined}\n        // The active item is the current page, the way Pagination marks its\n        // page. Before the spread, so an `aria-current` the caller passes\n        // decides, `false` and `undefined` included. bestax-migrate converts\n        // `is-active` to `active` only beside an `aria-current` of the\n        // element's own, and relies on that to render the same markup.\n        aria-current={active ? 'page' : undefined}\n        {...linkProps}\n        // A menu item inside a form must not submit it, and `<button>` defaults\n        // to type=\"submit\". A sidebar menu sitting in a form is ordinary. A\n        // caller's `submit` or `reset` still wins. Anything else becomes\n        // `button`, since HTML reads a value it does not define for a button as\n        // submit too; `buttonType` says more.\n        //\n        // After `linkProps`, reading through it rather than before it: React\n        // treats `type={undefined}` as \"remove the attribute\", and a spread\n        // carrying the key with no value is how that arrives, so a default\n        // spread first would be erased by it. `Dropdown.Item` and `Avatar`\n        // apply their button type after the spread too.\n        {...(Component === 'button'\n          ? { type: buttonType(linkProps.type) }\n          : {})}\n      >\n        {labelChildren}\n      </Component>\n      {nestedMenuLists}\n    </li>\n  );\n}) as PolymorphicComponent<MenuItemOwnProps, 'a'>;\n\nMenuItem.displayName = 'MenuItem';\n\n// Attach static subcomponents\nexport const Menu = withSubComponents(\n  MenuComponent,\n  {\n    Label: MenuLabel,\n    List: MenuList,\n    Item: MenuItem,\n  },\n  'Menu'\n);\n\nexport default Menu;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu.tsx"],"sourcesContent":["import React, { createContext, forwardRef, useContext } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { omitAttrs } from '../helpers/anchorAttrs';\nimport { buttonType } from '../helpers/buttonType';\nimport {\n  isCustomElement,\n  type PolymorphicComponent,\n} from '../helpers/polymorphic';\n\n// Context to track MenuList nesting level\nconst MenuListLevelContext = createContext(0);\n\n/**\n * Props for the Menu component.\n */\nexport interface MenuProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Menu content (labels, lists, items, etc). */\n  children: React.ReactNode;\n}\n\n/**\n * The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.\n *\n * @function\n * @param {MenuProps} props - Props for the Menu component.\n * @returns {JSX.Element} The rendered menu.\n * @see {@link https://bulma.io/documentation/components/menu/ | Bulma Menu documentation}\n */\nconst MenuComponent: React.FC<MenuProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('menu');\n\n  return (\n    <aside\n      className={classNames(bulmaClasses, bulmaHelperClasses, className)}\n      {...rest}\n    >\n      {children}\n    </aside>\n  );\n};\n\n/**\n * Props for the MenuLabel component.\n */\nexport interface MenuLabelProps\n  extends\n    Omit<React.HTMLAttributes<HTMLParagraphElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Label content. */\n  children: React.ReactNode;\n}\n\n/**\n * Bulma Menu label component.\n *\n * @function\n * @param {MenuLabelProps} props - Props for the MenuLabel component.\n * @returns {JSX.Element} The rendered menu label.\n */\nexport const MenuLabel: React.FC<MenuLabelProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  return (\n    <p\n      className={classNames(\n        usePrefixedClassNames('menu-label'),\n        className,\n        bulmaHelperClasses\n      )}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n};\n\n/**\n * Props for the MenuList component.\n * @extraProp {React.AriaRole} [role] - Ignored: every level renders `role=\"list\"` in its place, so a menu or tree role can't go here.\n */\nexport interface MenuListProps\n  extends\n    Omit<React.HTMLAttributes<HTMLUListElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** List items. */\n  children: React.ReactNode;\n}\n\n/**\n * MenuList applies `menu-list` class only at the top level (not for nested lists).\n *\n * Every level renders `role=\"list\"`, which Safari needs: WebKit stops\n * exposing a `<ul>` as a list once its markers are hidden, and Bulma's reset\n * hides them.\n *\n * @function\n * @param {MenuListProps} props - Props for the MenuList component.\n * @returns {JSX.Element} The rendered menu list.\n */\nexport const MenuList: React.FC<MenuListProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const level = useContext(MenuListLevelContext);\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  const ulClass = classNames(className, bulmaHelperClasses, {\n    [usePrefixedClassNames('menu-list')]: level === 0,\n  });\n\n  // Increment level for nested MenuLists. role=\"list\" restates the <ul>'s\n  // own role, for Safari: WebKit stops exposing a list as one once its\n  // markers are hidden, as Bulma's reset hides them, unless the role is set\n  // explicitly. After the spread, so a caller's role can't take it away.\n  return (\n    <MenuListLevelContext.Provider value={level + 1}>\n      <ul className={ulClass || undefined} {...rest} role=\"list\">\n        {children}\n      </ul>\n    </MenuListLevelContext.Provider>\n  );\n};\n\n/**\n * The MenuItem component's own props.\n *\n * A menu item is two elements: a wrapping `<li>` and, inside it, the element\n * `as` names. The props here are the ones the `<li>` consumes; everything else\n * follows `as` onto the inner element.\n */\nexport interface MenuItemOwnProps extends BulmaClassesProps {\n  /** Additional CSS classes for the wrapping `<li>`. */\n  className?: string;\n  /** Item content and optional nested MenuList. */\n  children: React.ReactNode;\n  /**\n   * Marks the item as the current one. It adds Bulma's `is-active` class, and\n   * `aria-current=\"page\"` on the element `as` renders, so assistive tech can\n   * tell which item is current too. An `aria-current` you pass wins, even\n   * `undefined`: use it to say something else (`\"location\"` for a section of\n   * one page, say), or `aria-current={false}` to turn it off. A menu should\n   * mark one page, so when the section above the current page is `active` too,\n   * give it `aria-current=\"location\"`, and give an `active` item that isn't\n   * navigation, such as an `as=\"button\"` filter, `aria-current={false}`.\n   */\n  active?: boolean;\n  /** Inline styles for the wrapping `<li>`. */\n  style?: React.CSSProperties;\n  /** `id` for the wrapping `<li>`. */\n  id?: string;\n  /** `title` for the wrapping `<li>`. */\n  title?: string;\n  /** ARIA role for the wrapping `<li>`. */\n  role?: React.AriaRole;\n  /** Tab index for the wrapping `<li>`. */\n  tabIndex?: number;\n  /** Test id for the wrapping `<li>`. */\n  'data-testid'?: string;\n}\n\n/**\n * Props for the MenuItem component. Everything the `<li>` does not consume\n * follows `as` onto the inner element: with the default `'a'` that means `href`\n * and the other anchor attributes, and with `as={Link}` it means that\n * component's own props.\n *\n * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the inner element `as` renders, not the wrapping `<li>`, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.\n */\nexport type MenuItemProps<T extends React.ElementType = 'a'> =\n  MenuItemOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof MenuItemOwnProps | 'as'> & {\n      /**\n       * Custom link component (e.g. `Link` from router).\n       *\n       * `'button'` renders `type=\"button\"` unless you pass `type=\"submit\"` or `type=\"reset\"`, so\n       * an item inside a form does not submit it.\n       */\n      as?: T;\n    };\n\n/**\n * `href` alone — annotated so a typo is a compile error rather than a silent\n * no-op, the way both siblings' sets are.\n */\nconst STRIP_FROM_NON_LINK: Readonly<Record<'href', true>> = { href: true };\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `MenuItemProps<T>` above — the body cannot see through `T`.\n */\ntype MenuItemImplProps = MenuItemOwnProps & {\n  as?: React.ElementType;\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n};\n\n/**\n * MenuItem supports `as` prop for custom link components, e.g., react-router-dom Link.\n *\n * Give each item an `href`, a router link through `as`, or `as=\"button\"`, so\n * the keyboard can reach it: an `<a>` with no `href` isn't a link, and Tab\n * skips it.\n *\n * @function\n * @param {MenuItemProps} props - Props for the MenuItem component.\n * @param {React.Ref} ref - Forwarded ref to the inner element `as` renders.\n * @returns {JSX.Element} The rendered menu item.\n */\nexport const MenuItem = forwardRef(function MenuItem(\n  itemProps: MenuItemProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const {\n    className,\n    children,\n    active,\n    as: Component = 'a',\n    'data-testid': testId,\n    style,\n    id,\n    title,\n    role,\n    tabIndex,\n    ...rest\n  } = itemProps as MenuItemImplProps;\n  const { bulmaHelperClasses, rest: forwarded } = useBulmaClasses(rest);\n  // `href` reaches an anchor or a custom component (which owns its own prop\n  // contract), but not another intrinsic tag — `<span href>` is invalid HTML.\n  // The same rule Avatar applies through `isLinkLike` and Button through its\n  // intrinsic-only strip. Before #641 `href` was an own prop re-applied only\n  // for `as=\"a\"`; deriving it from `as` must not quietly widen that.\n  const isLinkLike =\n    Component === 'a' ||\n    typeof Component !== 'string' ||\n    isCustomElement(Component);\n  // `href` ALONE. `Dropdown.Item` strips every anchor-only attribute except\n  // `type`; `Level.Item` strips all of them, plus `rel`.\n  //\n  // Not because nothing else can arrive: `as` here is an open `React.ElementType`,\n  // and a non-fresh spread skips excess-property checking, so a typed caller\n  // CAN deliver `target` or `download` and they are forwarded. The set stays at\n  // `href` because widening it would be wrong for an open `as` — `referrerPolicy`\n  // on `as=\"img\"`, `target` on `as=\"form\"` and `media` on `as=\"source\"` are all\n  // legal, and a flat strip would delete them. Getting that right needs a\n  // per-attribute-per-element rule, which `bestax-migrate` already models in\n  // `LINK_ATTR_ELEMENTS`.\n  const linkProps = isLinkLike\n    ? forwarded\n    : omitAttrs(forwarded, STRIP_FROM_NON_LINK);\n  const itemClass = classNames(\n    { [usePrefixedClassNames('is-active')]: active },\n    bulmaHelperClasses\n  );\n\n  // Split children into label and nested MenuList(s)\n  const labelChildren: React.ReactNode[] = [];\n  const nestedMenuLists: React.ReactNode[] = [];\n  React.Children.forEach(children, child => {\n    if (React.isValidElement(child) && child.type === MenuList) {\n      nestedMenuLists.push(child);\n    } else {\n      labelChildren.push(child);\n    }\n  });\n\n  return (\n    <li\n      className={className}\n      data-testid={testId}\n      style={style}\n      id={id}\n      title={title}\n      role={role}\n      tabIndex={tabIndex}\n    >\n      <Component\n        ref={ref}\n        className={itemClass || undefined}\n        // The active item is the current page, the way Pagination marks its\n        // page. Before the spread, so an `aria-current` the caller passes\n        // decides, `false` and `undefined` included. bestax-migrate converts\n        // `is-active` to `active` only beside an `aria-current` of the\n        // element's own, and relies on that to render the same markup.\n        aria-current={active ? 'page' : undefined}\n        {...linkProps}\n        // A menu item inside a form must not submit it, and `<button>` defaults\n        // to type=\"submit\". A sidebar menu sitting in a form is ordinary. A\n        // caller's `submit` or `reset` still wins. Anything else becomes\n        // `button`, since HTML reads a value it does not define for a button as\n        // submit too; `buttonType` says more.\n        //\n        // After `linkProps`, reading through it rather than before it: React\n        // treats `type={undefined}` as \"remove the attribute\", and a spread\n        // carrying the key with no value is how that arrives, so a default\n        // spread first would be erased by it. `Dropdown.Item` and `Avatar`\n        // apply their button type after the spread too.\n        {...(Component === 'button'\n          ? { type: buttonType(linkProps.type) }\n          : {})}\n      >\n        {labelChildren}\n      </Component>\n      {nestedMenuLists}\n    </li>\n  );\n}) as PolymorphicComponent<MenuItemOwnProps, 'a'>;\n\nMenuItem.displayName = 'MenuItem';\n\n// Attach static subcomponents\nexport const Menu = withSubComponents(\n  MenuComponent,\n  {\n    Label: MenuLabel,\n    List: MenuList,\n    Item: MenuItem,\n  },\n  'Menu'\n);\n\nexport default Menu;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/index.cjs

@@ -3559,6 +3559,10 @@ const MenuLabel = ({ className, children, ...props }) => {
 /**
  * MenuList applies `menu-list` class only at the top level (not for nested lists).
  *
+ * Every level renders `role="list"`, which Safari needs: WebKit stops
+ * exposing a `<ul>` as a list once its markers are hidden, and Bulma's reset
+ * hides them.
+ *
  * @function
  * @param {MenuListProps} props - Props for the MenuList component.
  * @returns {JSX.Element} The rendered menu list.
@@ -3569,8 +3573,11 @@ const MenuList = ({ className, children, ...props }) => {
     const ulClass = classNames(className, bulmaHelperClasses, {
         [usePrefixedClassNames('menu-list')]: level === 0,
     });
-    // Increment level for nested MenuLists
-    return (jsxRuntime.jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsxRuntime.jsx("ul", { className: ulClass || undefined, ...rest, children: children }) }));
+    // Increment level for nested MenuLists. role="list" restates the <ul>'s
+    // own role, for Safari: WebKit stops exposing a list as one once its
+    // markers are hidden, as Bulma's reset hides them, unless the role is set
+    // explicitly. After the spread, so a caller's role can't take it away.
+    return (jsxRuntime.jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsxRuntime.jsx("ul", { className: ulClass || undefined, ...rest, role: "list", children: children }) }));
 };
 /**
  * `href` alone — annotated so a typo is a compile error rather than a silent