@protonradio/proton-ui 0.11.10 → 0.11.11

package/README.md

@@ -1,148 +1,148 @@
-# ProtonUI
-
-![](./.readme.gif)
-
-```
-npm run storybook
-```
-
-## Installation
-
-### Prerequisites
-
-1. Ensure you have access to `@protonradio/proton-ui` [npm package](https://www.npmjs.com/package/@protonradio/proton-ui)
-2. Login using `npm login`
-
-### Install
-
-```bash
-npm install @protonradio/proton-ui --save
-```
-
-### Project Structure
-
-TODO: Explain project structure after treeshaking efforts have concluded
-
-### Setup ThemeProvider
-
-Wrap your application with the `ThemeProvider` to enable theming:
-
-```jsx
-import { ThemeProvider, THEMES } from "@protonradio/proton-ui";
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <ThemeProvider theme={THEMES.DARK}>
-      <Component {...pageProps} />
-    </ThemeProvider>
-  );
-}
-```
-
-### Custom Color Palettes
-
-Each theme has a `ProtonPalette` with colors tailored for UI design. Palettes are made up of `ProtonColorScale`s that have shades from super_light to super_dark:
-
-- **Primary Scale**
-- **Secondary Scale**
-- **Brand Colors** [Partial ProtonColorScale]
-- **Gray Scale**
-- **Semantic Colors**
-  - Success
-  - Warning
-  - Error
-
-When you pass a custom palette to the ThemeProvider, these five scales are updated with colors based on the background image you gave it. This is useful for designing UIs around individual releases, labels and artists. All generated scales are designed with accessibility in mind, ensuring proper contrast ratios and visual hierarchy.
-
-To generate a new palette, use the `usePalette` hook:
-
-```jsx
-import { ThemeProvider, usePalette, THEMES } from "@protonradio/proton-ui";
-
-function AppWithCustomPalette(props) {
-  const customPalette = usePalette(
-    `https://example.com/${props.imgUrl}.jpg`,
-    THEMES.DARK
-  );
-
-  return (
-    <ThemeProvider theme={THEMES.DARK} palette={customPalette}>
-      <YourApp />
-    </ThemeProvider>
-  );
-}
-```
-
-## Best Styling Practices
-
-Components use standardized _control_ variables defined in the theme config stylesheets for consistent styling across the design system:
-
-```typescript
-export interface ProtonStyleSheet {
-  "--proton-control__background-color": string;
-  "--proton-control__background-color-light": string;
-  "--proton-control__text-color": string;
-  "--proton-control__title-color": string;
-  "--proton-control__border-color": string;
-  "--proton-control__shadow-color": string;
-  // ... etc
-```
-
-These control variables unify the styling system while powering theme-specific CSS customization, and follow the pattern `--proton-control__{style}-{property}`:
-
-```css
-.myComponent {
-  background-color: var(--proton-control__background-color);
-}
-```
-
-For more advanced theme overrides we utilize the theme class names. The `ThemeProvider` applies the appropriate theme class to its container, making it available to all child components. Theme class names follow the pattern `proton-ui__theme--{themeName}`:
-
-```css
-.proton-ui__theme--dark .myComponent[active] {
-  background-color: var(--proton-control__interactive-color);
-}
-```
-
-Palettes can also be accessed in JSX via the `useTheme` hook for more advanced use cases:
-
-```jsx
-import { useTheme } from "@protonradio/proton-ui";
-
-function MyComponent() {
-  const { palette } = useTheme();
-
-  // Prefer CSS selectors over programmatic styling
-  return <Icon color={palette.BRAND.PRIMARY} />;
-}
-```
-
-## Publishing Updates to NPM
-
-We follow semantic versioning and use automated CI/CD for releases:
-
-**For Beta Releases (Testing):**
-
-```bash
-npm run build
-npm run publish-beta  # Automated versioning with beta tag
-```
-
-**For Production Releases:**
-
-```bash
-npm run build
-npm version <patch|minor|major>  # Semantic versioning
-npm publish
-```
-
-**Best Practices:**
-
-- Always publish beta releases first for testing across platforms
-- Test on all supported environments before production release
-- Use semantic versioning (patch for bug fixes, minor for features, major for breaking changes)
-- Our GitHub Actions [NPM Version](https://github.com/protonradio/proton-ui/actions/workflows/npm_release.yml) tool automatically handles versioning and deployment workflows
-
-## Recommended Reading
-
-- https://www.gabe.pizza/notes-on-component-libraries/
+# ProtonUI
+
+![](./.readme.gif)
+
+```
+npm run storybook
+```
+
+## Installation
+
+### Prerequisites
+
+1. Ensure you have access to `@protonradio/proton-ui` [npm package](https://www.npmjs.com/package/@protonradio/proton-ui)
+2. Login using `npm login`
+
+### Install
+
+```bash
+npm install @protonradio/proton-ui --save
+```
+
+### Project Structure
+
+TODO: Explain project structure after treeshaking efforts have concluded
+
+### Setup ThemeProvider
+
+Wrap your application with the `ThemeProvider` to enable theming:
+
+```jsx
+import { ThemeProvider, THEMES } from "@protonradio/proton-ui";
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeProvider theme={THEMES.DARK}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
+}
+```
+
+### Custom Color Palettes
+
+Each theme has a `ProtonPalette` with colors tailored for UI design. Palettes are made up of `ProtonColorScale`s that have shades from super_light to super_dark:
+
+- **Primary Scale**
+- **Secondary Scale**
+- **Brand Colors** [Partial ProtonColorScale]
+- **Gray Scale**
+- **Semantic Colors**
+  - Success
+  - Warning
+  - Error
+
+When you pass a custom palette to the ThemeProvider, these five scales are updated with colors based on the background image you gave it. This is useful for designing UIs around individual releases, labels and artists. All generated scales are designed with accessibility in mind, ensuring proper contrast ratios and visual hierarchy.
+
+To generate a new palette, use the `usePalette` hook:
+
+```jsx
+import { ThemeProvider, usePalette, THEMES } from "@protonradio/proton-ui";
+
+function AppWithCustomPalette(props) {
+  const customPalette = usePalette(
+    `https://example.com/${props.imgUrl}.jpg`,
+    THEMES.DARK
+  );
+
+  return (
+    <ThemeProvider theme={THEMES.DARK} palette={customPalette}>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+## Best Styling Practices
+
+Components use standardized _control_ variables defined in the theme config stylesheets for consistent styling across the design system:
+
+```typescript
+export interface ProtonStyleSheet {
+  "--proton-control__background-color": string;
+  "--proton-control__background-color-light": string;
+  "--proton-control__text-color": string;
+  "--proton-control__title-color": string;
+  "--proton-control__border-color": string;
+  "--proton-control__shadow-color": string;
+  // ... etc
+```
+
+These control variables unify the styling system while powering theme-specific CSS customization, and follow the pattern `--proton-control__{style}-{property}`:
+
+```css
+.myComponent {
+  background-color: var(--proton-control__background-color);
+}
+```
+
+For more advanced theme overrides we utilize the theme class names. The `ThemeProvider` applies the appropriate theme class to its container, making it available to all child components. Theme class names follow the pattern `proton-ui__theme--{themeName}`:
+
+```css
+.proton-ui__theme--dark .myComponent[active] {
+  background-color: var(--proton-control__interactive-color);
+}
+```
+
+Palettes can also be accessed in JSX via the `useTheme` hook for more advanced use cases:
+
+```jsx
+import { useTheme } from "@protonradio/proton-ui";
+
+function MyComponent() {
+  const { palette } = useTheme();
+
+  // Prefer CSS selectors over programmatic styling
+  return <Icon color={palette.BRAND.PRIMARY} />;
+}
+```
+
+## Publishing Updates to NPM
+
+We follow semantic versioning and use automated CI/CD for releases:
+
+**For Beta Releases (Testing):**
+
+```bash
+npm run build
+npm run publish-beta  # Automated versioning with beta tag
+```
+
+**For Production Releases:**
+
+```bash
+npm run build
+npm version <patch|minor|major>  # Semantic versioning
+npm publish
+```
+
+**Best Practices:**
+
+- Always publish beta releases first for testing across platforms
+- Test on all supported environments before production release
+- Use semantic versioning (patch for bug fixes, minor for features, major for breaking changes)
+- Our GitHub Actions [NPM Version](https://github.com/protonradio/proton-ui/actions/workflows/npm_release.yml) tool automatically handles versioning and deployment workflows
+
+## Recommended Reading
+
+- https://www.gabe.pizza/notes-on-component-libraries/

package/dist/_virtual/jsx-runtime.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;
+//# sourceMappingURL=jsx-runtime.cjs.js.map

package/dist/_virtual/jsx-runtime.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/jsx-runtime.es.js

@@ -0,0 +1,5 @@
+var e = { exports: {} };
+export {
+  e as __module
+};
+//# sourceMappingURL=jsx-runtime.es.js.map

package/dist/_virtual/jsx-runtime.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-jsx-runtime.development.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;
+//# sourceMappingURL=react-jsx-runtime.development.cjs.js.map

package/dist/_virtual/react-jsx-runtime.development.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-jsx-runtime.development.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/react-jsx-runtime.development.es.js

@@ -0,0 +1,5 @@
+var e = {};
+export {
+  e as __exports
+};
+//# sourceMappingURL=react-jsx-runtime.development.es.js.map

package/dist/_virtual/react-jsx-runtime.development.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-jsx-runtime.development.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-jsx-runtime.production.min.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;
+//# sourceMappingURL=react-jsx-runtime.production.min.cjs.js.map

package/dist/_virtual/react-jsx-runtime.production.min.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-jsx-runtime.production.min.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/react-jsx-runtime.production.min.es.js

@@ -0,0 +1,5 @@
+var r = {};
+export {
+  r as __exports
+};
+//# sourceMappingURL=react-jsx-runtime.production.min.es.js.map

package/dist/_virtual/react-jsx-runtime.production.min.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-jsx-runtime.production.min.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/assets/svg/icons.svg.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3csymbol%20id='external-link'%20viewBox='0%200%20512%20512'%3e%3cpath%20d='M384%20224v184a40%2040%200%2001-40%2040H104a40%2040%200%2001-40-40V168a40%2040%200%200140-40h167.48M336%2064h112v112M224%20288L440%2072'%20fill='none'%20stroke='currentColor'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='32'/%3e%3c/symbol%3e%3csymbol%20id='caret-down'%20viewBox='0%200%20512%20512'%3e%3cpath%20fill='currentColor'%20d='M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l192-192c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L256%20338.7L86.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l192%20192z'/%3e%3c/symbol%3e%3csymbol%20id='caret-right'%20viewBox='0%200%20512%20512'%3e%3cpath%20fill='currentColor'%20d='M216.5%20374.8c-11.3%2011.3-30%2011.3-41.3%200L74.8%20256c-11.3-11.3-11.3-30%200-41.3l128.5-128.5c11.3-11.3%2030-11.3%2041.3%200s11.3%2030%200%2041.3L145.7%20256l119.8%20119.8c11.3%2011.3%2011.3%2030%200%2041.3z'/%3e%3c/symbol%3e%3csymbol%20id='chevron-right'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill='currentColor'%20d='M5.74%203.2a.75.75%200%200%200-.04%201.06L9.227%208L5.7%2011.74a.75.75%200%201%200%201.1%201.02l4-4.25a.75.75%200%200%200%200-1.02l-4-4.25a.75.75%200%200%200-1.06-.04'/%3e%3c/symbol%3e%3csymbol%20id='chevron-left'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill='currentColor'%20d='M10.26%203.2a.75.75%200%200%201%20.04%201.06L6.773%208l3.527%203.74a.75.75%200%201%201-1.1%201.02l-4-4.25a.75.75%200%200%201%200-1.02l4-4.25a.75.75%200%200%201%201.06-.04'/%3e%3c/symbol%3e%3csymbol%20id='chevron-down'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill='currentColor'%20d='M3.2%205.74a.75.75%200%200%201%201.06-.04L8%209.227L11.74%205.7a.75.75%200%201%201%201.02%201.1l-4.25%204a.75.75%200%200%201-1.02%200l-4.25-4a.75.75%200%200%201-.04-1.06'/%3e%3c/symbol%3e%3c/defs%3e%3c/svg%3e";exports.default=e;
+//# sourceMappingURL=icons.svg.cjs.js.map

package/dist/assets/svg/icons.svg.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.svg.cjs.js","sources":["../../../assets/svg/icons.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3csymbol%20id='external-link'%20viewBox='0%200%20512%20512'%3e%3cpath%20d='M384%20224v184a40%2040%200%2001-40%2040H104a40%2040%200%2001-40-40V168a40%2040%200%200140-40h167.48M336%2064h112v112M224%20288L440%2072'%20fill='none'%20stroke='currentColor'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='32'/%3e%3c/symbol%3e%3csymbol%20id='caret-down'%20viewBox='0%200%20512%20512'%3e%3cpath%20fill='currentColor'%20d='M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l192-192c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L256%20338.7L86.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l192%20192z'/%3e%3c/symbol%3e%3csymbol%20id='caret-right'%20viewBox='0%200%20512%20512'%3e%3cpath%20fill='currentColor'%20d='M216.5%20374.8c-11.3%2011.3-30%2011.3-41.3%200L74.8%20256c-11.3-11.3-11.3-30%200-41.3l128.5-128.5c11.3-11.3%2030-11.3%2041.3%200s11.3%2030%200%2041.3L145.7%20256l119.8%20119.8c11.3%2011.3%2011.3%2030%200%2041.3z'/%3e%3c/symbol%3e%3csymbol%20id='chevron-right'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill='currentColor'%20d='M5.74%203.2a.75.75%200%200%200-.04%201.06L9.227%208L5.7%2011.74a.75.75%200%201%200%201.1%201.02l4-4.25a.75.75%200%200%200%200-1.02l-4-4.25a.75.75%200%200%200-1.06-.04'/%3e%3c/symbol%3e%3csymbol%20id='chevron-left'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill='currentColor'%20d='M10.26%203.2a.75.75%200%200%201%20.04%201.06L6.773%208l3.527%203.74a.75.75%200%201%201-1.1%201.02l-4-4.25a.75.75%200%200%201%200-1.02l4-4.25a.75.75%200%200%201%201.06-.04'/%3e%3c/symbol%3e%3csymbol%20id='chevron-down'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill='currentColor'%20d='M3.2%205.74a.75.75%200%200%201%201.06-.04L8%209.227L11.74%205.7a.75.75%200%201%201%201.02%201.1l-4.25%204a.75.75%200%200%201-1.02%200l-4.25-4a.75.75%200%200%201-.04-1.06'/%3e%3c/symbol%3e%3c/defs%3e%3c/svg%3e\""],"names":["iconURL"],"mappings":"4GAAA,MAAeA,EAAA"}

package/dist/assets/svg/icons.svg.es.js

@@ -0,0 +1,5 @@
+const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3csymbol%20id='external-link'%20viewBox='0%200%20512%20512'%3e%3cpath%20d='M384%20224v184a40%2040%200%2001-40%2040H104a40%2040%200%2001-40-40V168a40%2040%200%200140-40h167.48M336%2064h112v112M224%20288L440%2072'%20fill='none'%20stroke='currentColor'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='32'/%3e%3c/symbol%3e%3csymbol%20id='caret-down'%20viewBox='0%200%20512%20512'%3e%3cpath%20fill='currentColor'%20d='M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l192-192c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L256%20338.7L86.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l192%20192z'/%3e%3c/symbol%3e%3csymbol%20id='caret-right'%20viewBox='0%200%20512%20512'%3e%3cpath%20fill='currentColor'%20d='M216.5%20374.8c-11.3%2011.3-30%2011.3-41.3%200L74.8%20256c-11.3-11.3-11.3-30%200-41.3l128.5-128.5c11.3-11.3%2030-11.3%2041.3%200s11.3%2030%200%2041.3L145.7%20256l119.8%20119.8c11.3%2011.3%2011.3%2030%200%2041.3z'/%3e%3c/symbol%3e%3csymbol%20id='chevron-right'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill='currentColor'%20d='M5.74%203.2a.75.75%200%200%200-.04%201.06L9.227%208L5.7%2011.74a.75.75%200%201%200%201.1%201.02l4-4.25a.75.75%200%200%200%200-1.02l-4-4.25a.75.75%200%200%200-1.06-.04'/%3e%3c/symbol%3e%3csymbol%20id='chevron-left'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill='currentColor'%20d='M10.26%203.2a.75.75%200%200%201%20.04%201.06L6.773%208l3.527%203.74a.75.75%200%201%201-1.1%201.02l-4-4.25a.75.75%200%200%201%200-1.02l4-4.25a.75.75%200%200%201%201.06-.04'/%3e%3c/symbol%3e%3csymbol%20id='chevron-down'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill='currentColor'%20d='M3.2%205.74a.75.75%200%200%201%201.06-.04L8%209.227L11.74%205.7a.75.75%200%201%201%201.02%201.1l-4.25%204a.75.75%200%200%201-1.02%200l-4.25-4a.75.75%200%200%201-.04-1.06'/%3e%3c/symbol%3e%3c/defs%3e%3c/svg%3e";
+export {
+  e as default
+};
+//# sourceMappingURL=icons.svg.es.js.map

package/dist/assets/svg/icons.svg.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.svg.es.js","sources":["../../../assets/svg/icons.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3csymbol%20id='external-link'%20viewBox='0%200%20512%20512'%3e%3cpath%20d='M384%20224v184a40%2040%200%2001-40%2040H104a40%2040%200%2001-40-40V168a40%2040%200%200140-40h167.48M336%2064h112v112M224%20288L440%2072'%20fill='none'%20stroke='currentColor'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='32'/%3e%3c/symbol%3e%3csymbol%20id='caret-down'%20viewBox='0%200%20512%20512'%3e%3cpath%20fill='currentColor'%20d='M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l192-192c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L256%20338.7L86.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l192%20192z'/%3e%3c/symbol%3e%3csymbol%20id='caret-right'%20viewBox='0%200%20512%20512'%3e%3cpath%20fill='currentColor'%20d='M216.5%20374.8c-11.3%2011.3-30%2011.3-41.3%200L74.8%20256c-11.3-11.3-11.3-30%200-41.3l128.5-128.5c11.3-11.3%2030-11.3%2041.3%200s11.3%2030%200%2041.3L145.7%20256l119.8%20119.8c11.3%2011.3%2011.3%2030%200%2041.3z'/%3e%3c/symbol%3e%3csymbol%20id='chevron-right'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill='currentColor'%20d='M5.74%203.2a.75.75%200%200%200-.04%201.06L9.227%208L5.7%2011.74a.75.75%200%201%200%201.1%201.02l4-4.25a.75.75%200%200%200%200-1.02l-4-4.25a.75.75%200%200%200-1.06-.04'/%3e%3c/symbol%3e%3csymbol%20id='chevron-left'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill='currentColor'%20d='M10.26%203.2a.75.75%200%200%201%20.04%201.06L6.773%208l3.527%203.74a.75.75%200%201%201-1.1%201.02l-4-4.25a.75.75%200%200%201%200-1.02l4-4.25a.75.75%200%200%201%201.06-.04'/%3e%3c/symbol%3e%3csymbol%20id='chevron-down'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill='currentColor'%20d='M3.2%205.74a.75.75%200%200%201%201.06-.04L8%209.227L11.74%205.7a.75.75%200%201%201%201.02%201.1l-4.25%204a.75.75%200%200%201-1.02%200l-4.25-4a.75.75%200%200%201-.04-1.06'/%3e%3c/symbol%3e%3c/defs%3e%3c/svg%3e\""],"names":["iconURL"],"mappings":"AAAA,MAAeA,IAAA;"}

package/dist/components/ActionMenu/ActionMenu.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../node_modules/react/jsx-runtime.cjs.js"),s=require("react"),H=require("../../hooks/useIsClosing.cjs.js"),P=require("../../hooks/useLockBodyScroll.cjs.js"),G=require("../Button/Button.cjs.js"),L=require("../ScreenOverlay/ScreenOverlay.cjs.js"),i=require("radix-ui"),N=require("../Icon/Icon.cjs.js");;/* empty css                    */const D=require("../../utils/navigation.cjs.js"),T=({isOpen:e,actions:a=[],children:o,showCancel:l=!0,cancelButtonText:m="Cancel",selectionMode:E="single",selectedKeys:x,disabledKeys:h=[],onSelectionChange:p,onClose:f,title:j,"data-testid":r})=>{var $;P.useLockBodyScroll(e);const[u,c]=s.useState(0),[t,d]=s.useState([]),[A,_]=s.useState({title:j,actions:a,key:null,previousKey:null}),b=s.useRef(null),C=s.useRef(null),S=s.useRef(null),{isClosing:M,handleClose:g}=H.useIsClosing({onClose:f,overlayRef:S}),v=A.actions||[],w=v&&v.length>0,I=o||w||l,q=t.length>0;function B(R){const y=v.find(k=>k.key===R);if(!y){console.error(`Action with key ${R} not found`);return}d(k=>[...k,A]),_(k=>({title:y.label,actions:y.children,key:y.key,previousKey:k.key}))}function F(){if(t.length>0){const R=t[t.length-1];_(R),d(t.slice(0,-1))}}return s.useEffect(()=>{e&&requestAnimationFrame(()=>{b.current&&c(b.current.scrollHeight+12)})},[e,t,I]),s.useEffect(()=>{(!e||M)&&c(0)},[e,M]),!e&&!M?null:n.jsxRuntimeExports.jsx(L.ScreenOverlay,{fadeIn:!0,ref:S,children:n.jsxRuntimeExports.jsxs(i.DropdownMenu.Root,{modal:!0,open:e,onOpenChange:R=>{R||g()},children:[n.jsxRuntimeExports.jsx(i.DropdownMenu.Trigger,{asChild:!0,children:n.jsxRuntimeExports.jsx("div",{children:""})}),n.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__background-wrapper",style:{opacity:M?0:1},children:n.jsxRuntimeExports.jsx("div",{"data-testid":r||"ActionMenu-wrapper",className:"proton-ActionMenu__wrapper",children:n.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__card","data-testid":"ActionMenu-content",style:{height:`${u}px`},children:n.jsxRuntimeExports.jsx("div",{ref:C,className:"proton-ActionMenu__menu",children:n.jsxRuntimeExports.jsx(i.DropdownMenu.Content,{loop:!0,sideOffset:8,ref:b,children:I&&n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[o&&n.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__content",children:typeof o=="function"?o({close:g}):o}),w&&n.jsxRuntimeExports.jsx(z,{actions:v,selectionMode:E,selectedKeys:x,onSelectionChange:p,disabledKeys:h,handleSubmenuOpen:B,title:A.title,isInSubmenu:q,handleBack:F,previousMenuTitle:($=t[t.length-1])==null?void 0:$.title}),l&&n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(i.DropdownMenu.Separator,{}),n.jsxRuntimeExports.jsx(i.DropdownMenu.Item,{className:"proton-ActionMenu__cancel-button",children:n.jsxRuntimeExports.jsx(G.Button,{"data-testid":"ActionMenuItem-cancel",onPress:g,fullWidth:!0,variant:"secondary",children:m})})]})]})})})})})})]})})},z=({actions:e,selectionMode:a,selectedKeys:o=[],onSelectionChange:l,disabledKeys:m=[],handleSubmenuOpen:E,title:x,isInSubmenu:h=!1,handleBack:p,previousMenuTitle:f})=>{const j=()=>n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[h&&p&&n.jsxRuntimeExports.jsxs("div",{className:"proton-ActionMenu__back-button-container",children:[n.jsxRuntimeExports.jsx(i.DropdownMenu.Item,{className:"proton-ActionMenu__back-button",onSelect:r=>{r.preventDefault(),p()},"aria-label":`Go back to ${f||"previous menu"}`,children:n.jsxRuntimeExports.jsx(N.Icon,{id:"chevron-left",size:16,"aria-hidden":"true"})}),n.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__title",role:"banner","aria-label":h?`Submenu: ${x}`:`Menu: ${x}`,children:n.jsxRuntimeExports.jsx("span",{children:x})}),n.jsxRuntimeExports.jsx(i.DropdownMenu.Separator,{})]}),e.map((r,u)=>{var t;const c=e[u];return n.jsxRuntimeExports.jsx(U,{item:r,isSubmenu:!!((t=c.children)!=null&&t.length),selectionMode:a,onSelectionChange:l,selectedKeys:o,disabledKeys:m,handleSubmenuOpen:E},r.key)})]});return n.jsxRuntimeExports.jsx("div",{"aria-disabled":a==="none",className:"proton-ActionMenu__list",role:"menu","aria-label":x?`${h?"Submenu":"Menu"}: ${x}`:"Action menu","aria-orientation":"vertical",children:a==="single"?n.jsxRuntimeExports.jsx(i.DropdownMenu.RadioGroup,{value:(o==null?void 0:o[0])||"",onValueChange:r=>{var c;const u=e.find(t=>t.key===r);(c=u==null?void 0:u.children)!=null&&c.length||l&&l(new Set([r]))},children:n.jsxRuntimeExports.jsx(j,{})}):n.jsxRuntimeExports.jsx(i.DropdownMenu.Group,{children:n.jsxRuntimeExports.jsx(j,{})})})},U=({item:e,isSubmenu:a,selectionMode:o,onSelectionChange:l,selectedKeys:m=[],disabledKeys:E=[],handleSubmenuOpen:x})=>{const h=s.useRef(null),p=e.to&&D.isUrlExternal(e.to),f=E.includes(e.key),j=m.includes(e.key),r={className:"proton-ActionMenu__item","aria-label":e.label?`${e.label}${e.description?`, ${e.description}`:""}`:`ActionMenu-Item-${e.key}`,role:"menuitem",disabled:f,ref:h},u=t=>{var d;if((d=e==null?void 0:e.children)!=null&&d.length){t.preventDefault(),x(e.key);return}e.onAction&&e.onAction(e.key)},c=n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsxs("div",{className:"proton-ActionMenu__item-content",children:[n.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__item-label",children:e.label}),e.description&&n.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__description",children:e.description})]}),a&&n.jsxRuntimeExports.jsx(N.Icon,{id:"chevron-right",size:16,"aria-hidden":"true"})]});return e.to?s.createElement(i.DropdownMenu.Item,{...r,key:e.key,asChild:!0},n.jsxRuntimeExports.jsx("a",{"aria-label":e.label?`${e.label}${e.description?`, ${e.description}`:""}`:`ActionMenu-Item-${e.key}`,"aria-disabled":f,"aria-checked":j,"aria-expanded":a?!1:void 0,href:e.to,target:p?"_blank":void 0,rel:p?"noopener noreferrer":void 0,onClick:t=>{p||!e.to||D.handleInternalNavigation(t,e.to)},children:c})):o==="multiple"?s.createElement(i.DropdownMenu.CheckboxItem,{...r,key:e.key,checked:j,onSelect:u,onCheckedChange:t=>{if(!l)return;const d=new Set(m);t?d.add(e.key):d.delete(e.key),l(d)}},c):s.createElement(i.DropdownMenu.RadioItem,{...r,value:e.key,key:e.key,"aria-checked":j,"aria-expanded":a?!1:void 0,onSelect:u},c)};exports.ActionMenu=T;
+//# sourceMappingURL=ActionMenu.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionMenu.cjs.js","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNode, useEffect, useRef, useState } from \"react\";\r\nimport type { Selection } from \"@react-types/shared\";\r\n\r\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\r\nimport { useLockBodyScroll } from \"../../hooks/useLockBodyScroll\";\r\nimport { handleInternalNavigation, isUrlExternal } from \"../../utils\";\r\n\r\nimport { Button } from \"../Button/Button\";\r\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\r\nimport { DropdownMenu } from \"radix-ui\";\r\nimport { Icon } from \"../Icon/Icon\";\r\n\r\nimport \"./ActionMenu.css\";\r\n\r\nexport interface ActionMenuAction {\r\n  key: string;\r\n  label?: ReactNode;\r\n  description?: ReactNode;\r\n  to?: string;\r\n  onAction?: (key: string) => void;\r\n  children?: ActionMenuAction[];\r\n}\r\n\r\nexport type ActionMenuSelectionMode = \"single\" | \"multiple\" | \"none\";\r\n\r\nexport interface ActionMenuProps {\r\n  /** The actions of the menu\r\n   * - type {@link ActionMenuAction}[]\r\n   */\r\n  actions?: ActionMenuAction[];\r\n\r\n  /** The text of the cancel button */\r\n  cancelButtonText?: string;\r\n\r\n  /** The children of the menu */\r\n  children?: ReactNode | ((props: { close: () => void }) => ReactNode);\r\n\r\n  /** The test id of the menu */\r\n  \"data-testid\"?: string;\r\n\r\n  /** The keys of the disabled items\r\n   * @default []\r\n   */\r\n  disabledKeys?: string[];\r\n\r\n  /** Whether the menu is open\r\n   * @default false\r\n   */\r\n  isOpen: boolean;\r\n\r\n  /** The callback function to close the menu */\r\n  onClose?: () => void;\r\n\r\n  /** The callback function to change the selection\r\n   * - type {@link Selection}\r\n   */\r\n  onSelectionChange?: (keys: Selection) => void;\r\n\r\n  /** The selection mode of the menu\r\n   * @default \"single\"\r\n   */\r\n  selectionMode?: ActionMenuSelectionMode;\r\n\r\n  /** The keys of the selected items */\r\n  selectedKeys?: string[];\r\n\r\n  /** Whether to show the cancel button */\r\n  showCancel?: boolean;\r\n\r\n  /** The title of the menu */\r\n  title?: string;\r\n}\r\n\r\ntype ActionStack = {\r\n  title: ReactNode | null;\r\n  actions: ActionMenuAction[];\r\n  key: string | null;\r\n  previousKey: string | null;\r\n};\r\n\r\n/**\r\n * A controlled ActionMenu to display a menu of actions.\r\n * Renders a list of actions as a focusable menu, or non-focusable children.\r\n *\r\n * API:\r\n *  - {@link ActionMenuProps}\r\n */\r\nexport const ActionMenu = ({\r\n  isOpen,\r\n  actions = [],\r\n  children,\r\n  showCancel = true,\r\n  cancelButtonText = \"Cancel\",\r\n  selectionMode = \"single\",\r\n  selectedKeys,\r\n  disabledKeys = [],\r\n  onSelectionChange,\r\n  onClose,\r\n  title,\r\n  \"data-testid\": testId,\r\n}: ActionMenuProps) => {\r\n  useLockBodyScroll(isOpen);\r\n  const [contentHeight, setContentHeight] = useState<number>(0);\r\n  const [stackHistory, setStackHistory] = useState<ActionStack[]>([]);\r\n  const [currentActionStack, setCurrentActionStack] = useState<ActionStack>({\r\n    title,\r\n    actions,\r\n    key: null,\r\n    previousKey: null,\r\n  });\r\n  const contentRef = useRef<HTMLDivElement>(null);\r\n  const menuRef = useRef<HTMLDivElement>(null);\r\n  const overlayRef = useRef<HTMLDivElement>(null);\r\n  const { isClosing, handleClose } = useIsClosing({ onClose, overlayRef });\r\n\r\n  const currentActions = currentActionStack.actions || [];\r\n  const hasActions = currentActions && currentActions.length > 0;\r\n  const hasContent = children || hasActions || showCancel;\r\n  const isInSubmenu = stackHistory.length > 0;\r\n\r\n  function handleSubmenuOpen(key: string) {\r\n    const action = currentActions.find((action) => action.key === key);\r\n    if (!action) {\r\n      console.error(`Action with key ${key} not found`);\r\n      return;\r\n    }\r\n\r\n    setStackHistory((prevStackHistory) => [\r\n      ...prevStackHistory,\r\n      currentActionStack,\r\n    ]);\r\n    setCurrentActionStack((prevStack) => ({\r\n      title: action.label,\r\n      actions: action.children,\r\n      key: action.key,\r\n      previousKey: prevStack.key,\r\n    }));\r\n  }\r\n\r\n  function handleBack() {\r\n    if (stackHistory.length > 0) {\r\n      const previousStack = stackHistory[stackHistory.length - 1];\r\n      setCurrentActionStack(previousStack);\r\n      setStackHistory(stackHistory.slice(0, -1));\r\n    }\r\n  }\r\n\r\n  // Re-measure the open menu's content height when stack history changes\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n\r\n    requestAnimationFrame(() => {\r\n      if (contentRef.current) {\r\n        setContentHeight(contentRef.current.scrollHeight + 12);\r\n      }\r\n    });\r\n  }, [isOpen, stackHistory, hasContent]);\r\n\r\n  // Reset content height when menu closes or is closing\r\n  useEffect(() => {\r\n    if (!isOpen || isClosing) {\r\n      setContentHeight(0);\r\n    }\r\n  }, [isOpen, isClosing]);\r\n\r\n  if (!isOpen && !isClosing) return null;\r\n\r\n  return (\r\n    <ScreenOverlay fadeIn ref={overlayRef}>\r\n      <DropdownMenu.Root\r\n        modal\r\n        open={isOpen}\r\n        onOpenChange={(open) => {\r\n          if (!open) handleClose();\r\n        }}\r\n      >\r\n        <DropdownMenu.Trigger asChild>\r\n          {/* No visible trigger, menu is controlled by isOpen */}\r\n          <div>{\"\"}</div>\r\n        </DropdownMenu.Trigger>\r\n\r\n        <div\r\n          className=\"proton-ActionMenu__background-wrapper\"\r\n          style={{ opacity: isClosing ? 0 : 1 }}\r\n        >\r\n          <div\r\n            data-testid={testId || \"ActionMenu-wrapper\"}\r\n            className=\"proton-ActionMenu__wrapper\"\r\n          >\r\n            <div\r\n              className=\"proton-ActionMenu__card\"\r\n              data-testid=\"ActionMenu-content\"\r\n              style={{ height: `${contentHeight}px` }}\r\n            >\r\n              <div ref={menuRef} className=\"proton-ActionMenu__menu\">\r\n                <DropdownMenu.Content loop sideOffset={8} ref={contentRef}>\r\n                  {hasContent && (\r\n                    <>\r\n                      {children && (\r\n                        <div className=\"proton-ActionMenu__content\">\r\n                          {typeof children === \"function\"\r\n                            ? children({ close: handleClose })\r\n                            : children}\r\n                        </div>\r\n                      )}\r\n\r\n                      {hasActions && (\r\n                        <ActionMenuList\r\n                          actions={currentActions}\r\n                          selectionMode={selectionMode}\r\n                          selectedKeys={selectedKeys}\r\n                          onSelectionChange={onSelectionChange}\r\n                          disabledKeys={disabledKeys}\r\n                          handleSubmenuOpen={handleSubmenuOpen}\r\n                          title={currentActionStack.title}\r\n                          isInSubmenu={isInSubmenu}\r\n                          handleBack={handleBack}\r\n                          previousMenuTitle={\r\n                            stackHistory[stackHistory.length - 1]?.title\r\n                          }\r\n                        />\r\n                      )}\r\n\r\n                      {showCancel && (\r\n                        <>\r\n                          <DropdownMenu.Separator />\r\n                          <DropdownMenu.Item className=\"proton-ActionMenu__cancel-button\">\r\n                            <Button\r\n                              data-testid=\"ActionMenuItem-cancel\"\r\n                              onPress={handleClose}\r\n                              fullWidth\r\n                              variant=\"secondary\"\r\n                            >\r\n                              {cancelButtonText}\r\n                            </Button>\r\n                          </DropdownMenu.Item>\r\n                        </>\r\n                      )}\r\n                    </>\r\n                  )}\r\n                </DropdownMenu.Content>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </DropdownMenu.Root>\r\n    </ScreenOverlay>\r\n  );\r\n};\r\n\r\ninterface ActionMenuListProps {\r\n  actions: ActionMenuAction[];\r\n  selectionMode: ActionMenuSelectionMode;\r\n  selectedKeys?: string[];\r\n  onSelectionChange?: (keys: Selection) => void;\r\n  disabledKeys?: string[];\r\n  handleSubmenuOpen: (key: string) => void;\r\n  title?: ReactNode;\r\n  isInSubmenu?: boolean;\r\n  handleBack?: () => void;\r\n  previousMenuTitle?: ReactNode;\r\n}\r\n\r\nconst ActionMenuList = ({\r\n  actions,\r\n  selectionMode,\r\n  selectedKeys = [],\r\n  onSelectionChange,\r\n  disabledKeys = [],\r\n  handleSubmenuOpen,\r\n  title,\r\n  isInSubmenu = false,\r\n  handleBack,\r\n  previousMenuTitle,\r\n}: ActionMenuListProps) => {\r\n  const ActionMenuItemMap = () => (\r\n    <>\r\n      {isInSubmenu && handleBack && (\r\n        <div className=\"proton-ActionMenu__back-button-container\">\r\n          <DropdownMenu.Item\r\n            className=\"proton-ActionMenu__back-button\"\r\n            onSelect={(event) => {\r\n              event.preventDefault();\r\n              handleBack();\r\n            }}\r\n            aria-label={`Go back to ${previousMenuTitle || \"previous menu\"}`}\r\n          >\r\n            <Icon id=\"chevron-left\" size={16} aria-hidden=\"true\" />\r\n          </DropdownMenu.Item>\r\n          <div\r\n            className=\"proton-ActionMenu__title\"\r\n            role=\"banner\"\r\n            aria-label={isInSubmenu ? `Submenu: ${title}` : `Menu: ${title}`}\r\n          >\r\n            <span>{title}</span>\r\n          </div>\r\n          <DropdownMenu.Separator />\r\n        </div>\r\n      )}\r\n\r\n      {actions.map((action, i) => {\r\n        const itemProps = actions[i];\r\n        return (\r\n          <ActionMenuItem\r\n            key={action.key}\r\n            item={action}\r\n            isSubmenu={Boolean(itemProps.children?.length)}\r\n            selectionMode={selectionMode}\r\n            onSelectionChange={onSelectionChange}\r\n            selectedKeys={selectedKeys}\r\n            disabledKeys={disabledKeys}\r\n            handleSubmenuOpen={handleSubmenuOpen}\r\n          />\r\n        );\r\n      })}\r\n    </>\r\n  );\r\n\r\n  return (\r\n    <div\r\n      aria-disabled={selectionMode === \"none\"}\r\n      className=\"proton-ActionMenu__list\"\r\n      role=\"menu\"\r\n      aria-label={\r\n        title ? `${isInSubmenu ? \"Submenu\" : \"Menu\"}: ${title}` : \"Action menu\"\r\n      }\r\n      aria-orientation=\"vertical\"\r\n    >\r\n      {selectionMode === \"single\" ? (\r\n        <DropdownMenu.RadioGroup\r\n          value={selectedKeys?.[0] || \"\"}\r\n          onValueChange={(value) => {\r\n            // Check if this is a submenu item - if so, don't trigger selection change\r\n            const action = actions.find((action) => action.key === value);\r\n            if (action?.children?.length) {\r\n              return;\r\n            }\r\n\r\n            if (onSelectionChange) {\r\n              onSelectionChange(new Set([value]));\r\n            }\r\n          }}\r\n        >\r\n          <ActionMenuItemMap />\r\n        </DropdownMenu.RadioGroup>\r\n      ) : (\r\n        <DropdownMenu.Group>\r\n          <ActionMenuItemMap />\r\n        </DropdownMenu.Group>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\ninterface ActionMenuItemProps {\r\n  to?: string;\r\n  item: ActionMenuAction;\r\n  isSubmenu?: boolean;\r\n  selectionMode: ActionMenuSelectionMode;\r\n  onSelectionChange?: (keys: Selection) => void;\r\n  selectedKeys?: string[];\r\n  disabledKeys?: string[];\r\n  handleSubmenuOpen: (key: string) => void;\r\n}\r\n\r\nconst ActionMenuItem = ({\r\n  item,\r\n  isSubmenu,\r\n  selectionMode,\r\n  onSelectionChange,\r\n  selectedKeys = [],\r\n  disabledKeys = [],\r\n  handleSubmenuOpen,\r\n}: ActionMenuItemProps) => {\r\n  const ref = useRef(null);\r\n  const isExternal = item.to && isUrlExternal(item.to);\r\n  const isDisabled = disabledKeys.includes(item.key);\r\n  const isSelected = selectedKeys.includes(item.key);\r\n\r\n  const radixItemProps = {\r\n    className: \"proton-ActionMenu__item\",\r\n    \"aria-label\": item.label\r\n      ? `${item.label}${item.description ? `, ${item.description}` : \"\"}`\r\n      : `ActionMenu-Item-${item.key}`,\r\n    role: \"menuitem\",\r\n    disabled: isDisabled,\r\n    ref,\r\n  };\r\n\r\n  const onSelect = (event: Event) => {\r\n    if (item?.children?.length) {\r\n      event.preventDefault();\r\n      handleSubmenuOpen(item.key);\r\n      return;\r\n    }\r\n    if (item.onAction) {\r\n      item.onAction(item.key);\r\n    }\r\n  };\r\n\r\n  const content = (\r\n    <>\r\n      <div className=\"proton-ActionMenu__item-content\">\r\n        <div className=\"proton-ActionMenu__item-label\">{item.label}</div>\r\n        {item.description && (\r\n          <div className=\"proton-ActionMenu__description\">\r\n            {item.description}\r\n          </div>\r\n        )}\r\n      </div>\r\n      {isSubmenu && <Icon id=\"chevron-right\" size={16} aria-hidden=\"true\" />}\r\n    </>\r\n  );\r\n\r\n  if (item.to) {\r\n    return (\r\n      <DropdownMenu.Item {...radixItemProps} key={item.key} asChild>\r\n        <a\r\n          aria-label={\r\n            item.label\r\n              ? `${item.label}${item.description ? `, ${item.description}` : \"\"}`\r\n              : `ActionMenu-Item-${item.key}`\r\n          }\r\n          aria-disabled={isDisabled}\r\n          aria-checked={isSelected}\r\n          aria-expanded={isSubmenu ? false : undefined}\r\n          href={item.to}\r\n          target={isExternal ? \"_blank\" : undefined}\r\n          rel={isExternal ? \"noopener noreferrer\" : undefined}\r\n          onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {\r\n            if (isExternal || !item.to) {\r\n              return;\r\n            }\r\n            handleInternalNavigation(e, item.to);\r\n          }}\r\n        >\r\n          {content}\r\n        </a>\r\n      </DropdownMenu.Item>\r\n    );\r\n  }\r\n\r\n  if (selectionMode === \"multiple\") {\r\n    return (\r\n      <DropdownMenu.CheckboxItem\r\n        {...radixItemProps}\r\n        key={item.key}\r\n        checked={isSelected}\r\n        onSelect={onSelect}\r\n        onCheckedChange={(checked: boolean) => {\r\n          if (!onSelectionChange) return;\r\n\r\n          const currentKeys = new Set(selectedKeys);\r\n          if (checked) {\r\n            currentKeys.add(item.key);\r\n          } else {\r\n            currentKeys.delete(item.key);\r\n          }\r\n          onSelectionChange(currentKeys);\r\n        }}\r\n      >\r\n        {content}\r\n      </DropdownMenu.CheckboxItem>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <DropdownMenu.RadioItem\r\n      {...radixItemProps}\r\n      value={item.key}\r\n      key={item.key}\r\n      aria-checked={isSelected}\r\n      aria-expanded={isSubmenu ? false : undefined}\r\n      onSelect={onSelect}\r\n    >\r\n      {content}\r\n    </DropdownMenu.RadioItem>\r\n  );\r\n};\r\n"],"names":["ActionMenu","isOpen","actions","children","showCancel","cancelButtonText","selectionMode","selectedKeys","disabledKeys","onSelectionChange","onClose","title","testId","useLockBodyScroll","contentHeight","setContentHeight","useState","stackHistory","setStackHistory","currentActionStack","setCurrentActionStack","contentRef","useRef","menuRef","overlayRef","isClosing","handleClose","useIsClosing","currentActions","hasActions","hasContent","isInSubmenu","handleSubmenuOpen","key","action","prevStackHistory","prevStack","handleBack","previousStack","useEffect","jsx","ScreenOverlay","jsxs","DropdownMenu","open","Fragment","ActionMenuList","_a","Button","previousMenuTitle","ActionMenuItemMap","event","Icon","i","itemProps","ActionMenuItem","value","item","isSubmenu","ref","isExternal","isUrlExternal","isDisabled","isSelected","radixItemProps","onSelect","content","createElement","e","handleInternalNavigation","checked","currentKeys"],"mappings":"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"}