@epam/ai-dial-ui-kit 0.15.0-dev.4 → 0.15.0-dev.42

package/dist/IconButton-DHOFapLo.cjs

@@ -0,0 +1 @@
+"use strict";const u=require("react/jsx-runtime"),n=require("@floating-ui/react"),c=require("react"),x=require("classnames"),F=require("./merge-classes-BEJXjzkx.cjs");var l=(e=>(e.Primary="primary",e.Neutral="neutral",e.Danger="danger",e.Static="static",e.Starter="starter",e.Success="success",e.Secondary="secondary",e.Tertiary="tertiary",e))(l||{}),r=(e=>(e.Solid="solid",e.Outlined="outlined",e.Ghost="ghost",e.Link="link",e))(r||{});const v={[l.Primary]:{[r.Solid]:"dial-primary-solid-button",[r.Ghost]:"dial-primary-ghost-button",[r.Link]:"dial-primary-link-button"},[l.Neutral]:{[r.Outlined]:"dial-neutral-outlined-button"},[l.Danger]:{[r.Solid]:"dial-danger-solid-button",[r.Ghost]:"dial-danger-ghost-button",[r.Outlined]:"dial-danger-outlined-button"},[l.Success]:{[r.Ghost]:"dial-success-ghost-button"},[l.Secondary]:{[r.Ghost]:"dial-secondary-ghost-button"},[l.Tertiary]:{[r.Ghost]:"dial-tertiary-ghost-button"},[l.Static]:{},[l.Starter]:{}},S=(e=l.Primary,o=r.Solid)=>{const t=v[e]?.[o];return t||(console.warn(`Could not find Button styles for variant: ${e} and appearance: ${o}. Using default primary solid button styles.`),v[l.Primary][r.Solid])};var h=(e=>(e.Small="small",e.Standard="standard",e.Large="large",e))(h||{});const I=7,A=2,C=c.createContext(null),N=()=>{const e=c.useContext(C);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},q=({initialOpen:e=!1,placement:o="bottom",isTriggerClickable:t=!1,open:s,onOpenChange:a}={})=>{const[i,p]=c.useState(e),g=c.useRef(null),m=s??i,d=a??p,f=n.useFloating({placement:o,open:m,onOpenChange:d,whileElementsMounted:n.autoUpdate,middleware:[n.offset(I+A),n.flip({crossAxis:o.includes("-"),fallbackAxisSideDirection:"start",padding:5}),n.shift({padding:5}),n.arrow({element:g})]}),M=n.useHover(f.context,{move:!1,enabled:s==null,mouseOnly:t,delay:{open:500,close:0}}),k=n.useFocus(f.context,{enabled:s==null}),P=n.useDismiss(f.context),G=n.useRole(f.context,{role:"tooltip"}),b=n.useInteractions([M,k,P,G]);return c.useEffect(()=>{if(!m)return;const y=f.refs.reference.current;if(!(y instanceof Element))return;const w=new IntersectionObserver(([L])=>{L.isIntersecting||d(!1)},{root:null,threshold:0});return w.observe(y),()=>w.disconnect()},[m,f.refs.reference,d]),c.useMemo(()=>({open:m,setOpen:d,arrowRef:g,...b,...f}),[m,d,b,f])},R=({children:e,...o})=>{const t=q(o);return u.jsx(C.Provider,{value:t,children:e})},T="(hover: none)",_=()=>typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia(T).matches,D=()=>{const[e,o]=c.useState(()=>!_());return c.useEffect(()=>{if(typeof window>"u"||typeof window.matchMedia!="function")return;const t=window.matchMedia(T);if(o(!t.matches),typeof t.addEventListener!="function")return;const s=a=>o(!a.matches);return t.addEventListener("change",s),()=>t.removeEventListener("change",s)},[]),e},E=({style:e,...o})=>{const t=N(),s=D(),a=c.useRef(null),i=n.useMergeRefs([t.refs.setFloating,a]);return!t.open||!s?null:u.jsx(n.FloatingPortal,{id:"tooltip-portal",children:u.jsxs("div",{ref:i,style:{...t.floatingStyles,...e},...t.getFloatingProps(o),className:x("z-tooltip whitespace-pre-wrap break-words rounded border border-primary bg-layer-0 px-2 py-1 dial-tiny-text shadow max-w-[300px]",t.getFloatingProps(o).className),children:[o.children,u.jsx(n.FloatingArrow,{ref:t.arrowRef,context:t.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary text-[var(--bg-layer-0,_#000000)]"})]})})},H=({children:e,asChild:o=!1,...t})=>{const s=N(),a=o&&c.isValidElement(e),i=a?e.props?.ref:null,p=n.useMergeRefs([s.refs.setReference,...i?[i]:[]]);return a?c.cloneElement(e,s.getReferenceProps({...e.props,...t,ref:p})):u.jsx("span",{ref:p,...s.getReferenceProps(t),className:t.className??"dial-tooltip-trigger text-start",children:e})},j=({hideTooltip:e,tooltip:o,children:t,triggerClassName:s,contentClassName:a,...i})=>u.jsxs(R,{...i,children:[u.jsx(H,{className:x(s,"truncate"),children:t}),u.jsx(E,{className:x("text-primary",a,"max-w-[300px]",(e||!o)&&"hidden"),children:o})]}),O=(...e)=>e.find(o=>typeof o=="string"&&o.length>0),U=({variant:e,appearance:o=r.Solid,size:t=h.Standard,className:s,icon:a,tooltipProps:i,type:p="button",...g})=>{const m=F.mergeClasses(e&&S(e,o),t===h.Small?"h-[24px] w-[24px]":"h-[40px] w-[40px] dial-kit-enhanced-target","dial-icon-button disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-focus outline-offset-0 disabled:text-controls-secondary-disable",s),d=u.jsx("button",{...g,type:p,className:m,"aria-label":O(g["aria-label"],i?.tooltip),children:a});return i?u.jsx(j,{...i,children:d}):d};exports.ButtonAppearance=r;exports.ButtonVariant=l;exports.DialIconButton=U;exports.DialTooltip=j;exports.DialTooltipContainer=R;exports.DialTooltipContent=E;exports.DialTooltipTrigger=H;exports.ElementSize=h;exports.getButtonClassNames=S;exports.resolveAccessibleName=O;exports.useHasHover=D;

package/dist/JsonEditor-CpSpVa0v.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),u=require("./editor-Bc9xzKuR.cjs"),d=require("@monaco-editor/react");function f(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const m=f(d),b=({value:e,onChange:o,onValidateJSON:t,options:a,currentTheme:n,themesConfig:i=u.EDITOR_THEMES_CONFIG})=>{function s(r){r?.editor?.defineTheme(n,i[n]),r.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}const{Editor:l}=m;return c.jsx(l,{beforeMount:s,height:"100%",defaultLanguage:"json",value:e,onChange:o,theme:n,onValidate:t,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...a??{}}})};exports.DialJsonEditor=b;

package/dist/{MarkdownEditor-jQ8nDJfx.cjs → MarkdownEditor-CPzMv3lE.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@uiw/react-md-editor"),m=require("./lazy-tfN4sKhq.cjs"),u=require("./merge-classes-Dipy1Ih1.cjs"),x=({value:t,onChange:s,height:o=300,preview:i="edit",theme:a=m.EditorThemes.dark,className:n,placeholder:r})=>{const d=r!==void 0&&!t;return e.jsxs("div",{"data-color-mode":a,className:u.mergeClasses("relative",n),children:[e.jsx(c,{value:t,onChange:l=>s?.(l||""),height:o,preview:i}),d&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:r})]})};exports.DialMarkdownEditor=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@uiw/react-md-editor"),m=require("./lazy-Cy9WobJf.cjs"),u=require("./merge-classes-BEJXjzkx.cjs"),x=({value:t,onChange:s,height:o=300,preview:i="edit",theme:a=m.EditorThemes.dark,className:n,placeholder:r})=>{const d=r!==void 0&&!t;return e.jsxs("div",{"data-color-mode":a,className:u.mergeClasses("relative",n),children:[e.jsx(c,{value:t,onChange:l=>s?.(l||""),height:o,preview:i}),d&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:r})]})};exports.DialMarkdownEditor=x;

package/dist/{MarkdownEditor-DHn2pYOJ.cjs → MarkdownEditor-NYMcKLJy.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-tfN4sKhq.cjs"),k=require("./merge-classes-Dipy1Ih1.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const b=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:x,strikethrough:g,table:h,unorderedListCommand:C}=b;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(g,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(x,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(h,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=b;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m})=>{const I=j.useMemo(()=>M(),[]),x=j.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:g=>i?.(g||""),height:r,preview:u,commands:I,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-Cy9WobJf.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const b=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:x,strikethrough:g,table:h,unorderedListCommand:C}=b;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(g,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(x,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(h,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=b;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m})=>{const I=j.useMemo(()=>M(),[]),x=j.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:g=>i?.(g||""),height:r,preview:u,commands:I,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;

package/dist/MarkdownEditorContainer-DVPRplYf.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react");require("./editor-Bc9xzKuR.cjs");const E=require("./lazy-Cy9WobJf.cjs");require("@monaco-editor/react");const m=require("./Switch-DE6MrcqJ.cjs"),N=require("./MarkdownEditor-CPzMv3lE.cjs"),b=({value:o,onChangeValue:l,label:i,headerContent:a,switcherLabel:d,height:c=300,theme:u=E.EditorThemes.dark,onValidateJSON:x,preview:j="edit"})=>{const w=n.useId(),[t,C]=n.useState(!1),[f,p]=n.useState(null);n.useEffect(()=>{t&&typeof window<"u"&&Promise.resolve().then(()=>require("./JsonEditor-CpSpVa0v.cjs")).then(s=>{p(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),S=n.useCallback(s=>{x?.(s)},[x]),r=!!d;return e.jsx("div",{className:"size-full flex flex-col",children:e.jsx("div",{className:"flex flex-col gap-8",children:e.jsxs("div",{children:[(i||a||r)&&e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[i&&e.jsx(m.DialLabel,{label:i}),e.jsxs("div",{className:"flex items-center gap-2 flex-1 justify-end",children:[a,r&&e.jsx("label",{className:"flex items-center gap-2 cursor-pointer",children:e.jsx(m.DialSwitch,{isOn:t,label:d,switchId:w,onChange:s=>C(s)})})]})]}),r&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:o,onChange:h,onValidateJSON:S,currentTheme:u})}):e.jsx(N.DialMarkdownEditor,{value:o,onChange:h,height:c,preview:j,theme:u})]})})})};exports.DialMarkdownEditorContainer=b;

package/dist/{Switch-CUKClcEz.cjs → Switch-DE6MrcqJ.cjs}

@@ -1 +1 @@
-"use strict";const e=require("react/jsx-runtime"),p=require("./merge-classes-Dipy1Ih1.cjs"),d=require("@tabler/icons-react"),i=require("./IconButton-DWqoaBWf.cjs"),f=require("./icon-CrGVkVpG.cjs"),l=require("classnames"),h=require("react"),y="w-[24px] h-[24px] border border-solid rounded-[6px] border-transparent flex items-center justify-center text-secondary hover:text-controls-accent-primary-hover active:text-controls-accent-primary-active",o=({caption:t,onClick:a})=>{if(!t)return null;const s=e.jsx(i.DialIconButton,{"aria-label":t,className:y,icon:e.jsx(d.IconInfoCircle,{size:f.DIAL_ICON_SIZE.SM}),onClick:a});return t?e.jsx(i.DialTooltip,{tooltip:t,triggerClassName:"flex justify-center items-center",children:s}):s},j=({label:t,required:a,className:s,caption:r,...n})=>t?e.jsxs("label",{...n,className:p.mergeClasses("dial-tiny-text text-secondary flex items-center gap-1",s),children:[typeof t=="string"?e.jsx("span",{className:"min-h-4",children:t}):t,a&&e.jsx("span",{className:"text-accent-primary",children:"*"}),e.jsx(o,{caption:r})]}):null,N=({label:t,switchId:a,isOn:s=!1,disabled:r,onChange:n,caption:c})=>{const x=l("flex shrink-0 w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",s?"flex-row-reverse":"flex-row",r?"pointer-events-none":"",r?s?"bg-controls-disable":"bg-layer-4":s?"bg-accent-primary":"bg-layer-4"),m=h.useCallback(u=>{u.stopPropagation(),n?.(!s)},[n,s]);return e.jsxs("div",{className:"flex flex-row items-start",role:"switch",children:[e.jsx("input",{type:"checkbox",onChange:m,id:a,disabled:r,className:"invisible size-0",checked:s}),e.jsx("label",{htmlFor:a,className:x,"aria-describedby":c&&"caption",children:e.jsx("span",{className:l("size-3 rounded-full",r?"bg-controls-disable-accent":"bg-controls-enable-primary")})}),(t||c)&&e.jsxs("div",{className:"flex flex-col gap-1 ml-2",children:[t&&e.jsx("span",{className:l("dial-small-text py-[1px]",r?"text-secondary":"text-primary"),"aria-label":"switch-title",children:t}),c&&e.jsx("span",{id:"caption",className:"dial-tiny-text text-secondary",children:c})]})]})};exports.DialInfoButton=o;exports.DialLabel=j;exports.DialSwitch=N;
+"use strict";const e=require("react/jsx-runtime"),p=require("./merge-classes-BEJXjzkx.cjs"),d=require("@tabler/icons-react"),i=require("./IconButton-DHOFapLo.cjs"),f=require("./icon-CrGVkVpG.cjs"),l=require("classnames"),h=require("react"),y="w-[24px] h-[24px] border border-solid rounded-[6px] border-transparent flex items-center justify-center text-secondary hover:text-controls-accent-primary-hover active:text-controls-accent-primary-active",o=({caption:t,onClick:a})=>{if(!t)return null;const s=e.jsx(i.DialIconButton,{"aria-label":t,className:y,icon:e.jsx(d.IconInfoCircle,{size:f.DIAL_ICON_SIZE.SM}),onClick:a});return t?e.jsx(i.DialTooltip,{tooltip:t,triggerClassName:"flex justify-center items-center",children:s}):s},j=({label:t,required:a,className:s,caption:r,...n})=>t?e.jsxs("label",{...n,className:p.mergeClasses("dial-tiny-text text-secondary flex items-center gap-1",s),children:[typeof t=="string"?e.jsx("span",{className:"min-h-4",children:t}):t,a&&e.jsx("span",{className:"text-accent-primary",children:"*"}),e.jsx(o,{caption:r})]}):null,N=({label:t,switchId:a,isOn:s=!1,disabled:r,onChange:n,caption:c})=>{const x=l("flex shrink-0 w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",s?"flex-row-reverse":"flex-row",r?"pointer-events-none":"",r?s?"bg-controls-disable":"bg-layer-4":s?"bg-accent-primary":"bg-layer-4"),m=h.useCallback(u=>{u.stopPropagation(),n?.(!s)},[n,s]);return e.jsxs("div",{className:"flex flex-row items-start",role:"switch",children:[e.jsx("input",{type:"checkbox",onChange:m,id:a,disabled:r,className:"invisible size-0",checked:s}),e.jsx("label",{htmlFor:a,className:x,"aria-describedby":c&&"caption",children:e.jsx("span",{className:l("size-3 rounded-full",r?"bg-controls-disable-accent":"bg-controls-enable-primary")})}),(t||c)&&e.jsxs("div",{className:"flex flex-col gap-1 ml-2",children:[t&&e.jsx("span",{className:l("dial-small-text py-[1px]",r?"text-secondary":"text-primary"),"aria-label":"switch-title",children:t}),c&&e.jsx("span",{id:"caption",className:"dial-tiny-text text-secondary",children:c})]})]})};exports.DialInfoButton=o;exports.DialLabel=j;exports.DialSwitch=N;

package/dist/components/Button/constants.js

@@ -1,28 +1,29 @@
-import { ButtonVariant as o, ButtonAppearance as t } from "../../types/button.js";
+import { ButtonVariant as a, ButtonAppearance as t } from "../../types/button.js";
 const i = {
-  [o.Primary]: {
+  [a.Primary]: {
     [t.Solid]: "dial-primary-solid-button",
     [t.Ghost]: "dial-primary-ghost-button",
     [t.Link]: "dial-primary-link-button"
   },
-  [o.Neutral]: {
+  [a.Neutral]: {
     [t.Outlined]: "dial-neutral-outlined-button"
   },
-  [o.Danger]: {
+  [a.Danger]: {
     [t.Solid]: "dial-danger-solid-button",
     [t.Ghost]: "dial-danger-ghost-button",
     [t.Outlined]: "dial-danger-outlined-button"
   },
-  [o.Success]: {
+  [a.Success]: {
     [t.Ghost]: "dial-success-ghost-button"
   },
-  [o.Secondary]: {
+  [a.Secondary]: {
     [t.Ghost]: "dial-secondary-ghost-button"
   },
-  [o.Tertiary]: {
+  [a.Tertiary]: {
     [t.Ghost]: "dial-tertiary-ghost-button"
   },
-  [o.Static]: {}
+  [a.Static]: {},
+  [a.Starter]: {}
 };
 export {
   i as variantClassMap

package/dist/components/Dropdown/Dropdown.js

@@ -1,17 +1,18 @@
 import { jsxs as v, Fragment as N, jsx as o } from "react/jsx-runtime";
-import { useFloating as ce, autoUpdate as de, offset as fe, autoPlacement as ue, flip as pe, shift as me, size as he, useClick as ye, useHover as xe, useDismiss as ge, useRole as we, useInteractions as be, FloatingPortal as Ce, FloatingFocusManager as ve } from "@floating-ui/react";
+import { useFloating as ce, autoUpdate as de, offset as fe, autoPlacement as ue, flip as pe, shift as me, size as he, useClick as ye, useHover as xe, useDismiss as ge, useRole as we, useInteractions as Ce, FloatingPortal as be, FloatingFocusManager as ve } from "@floating-ui/react";
 import m from "classnames";
 import { useState as Ne, useRef as Pe, useCallback as h, useId as ke, useEffect as U, useMemo as De } from "react";
-import { DialIcon as Me } from "../Icon/Icon.js";
+import { DialIcon as Ie } from "../Icon/Icon.js";
+import { DIAL_KIT_CLASS as Me } from "../../constants/public-class-names.js";
 import { DropdownTrigger as y, DropdownItemType as X } from "../../types/dropdown.js";
-import { dropdownGap as x, dropdownDividerClassName as Ie, dropdownItemBaseClassName as Ee, dropdownItemDisabledClassName as Fe, dropdownItemDangerClassName as Re, dropdownBaseClassName as Be, dropdownListBaseClassName as $e } from "./constants.js";
-import { DialCloseButton as Ae } from "../CloseButton/CloseButton.js";
-import { mergeClasses as M } from "../../utils/merge-classes.js";
-import { DropdownSubMenuItem as We } from "./DropdownSubMenuItem.js";
-const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.()?.width ?? 0, Ke = ({
+import { dropdownGap as x, dropdownDividerClassName as Ee, dropdownItemBaseClassName as Fe, dropdownItemDisabledClassName as Re, dropdownItemDangerClassName as Ae, dropdownBaseClassName as Be, dropdownListBaseClassName as Le } from "./constants.js";
+import { DialCloseButton as Se } from "../CloseButton/CloseButton.js";
+import { mergeClasses as I } from "../../utils/merge-classes.js";
+import { DropdownSubMenuItem as $e } from "./DropdownSubMenuItem.js";
+const We = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.()?.width ?? 0, Je = ({
   children: c,
   items: g,
-  onItemClick: I,
+  onItemClick: M,
   menuHeader: d,
   menuFooter: f,
   renderOverlay: P,
@@ -21,51 +22,51 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
   open: F,
   defaultOpen: Y = !1,
   onOpenChange: R,
-  closable: z = !1,
-  onClose: G,
-  className: q,
-  overlayContentClassName: B,
-  separatorClassName: $,
-  listClassName: J,
-  outsidePressIgnoreRef: A,
-  outsideClosable: K = !0,
-  allowedPlacements: Q,
+  closable: _ = !1,
+  onClose: z,
+  className: G,
+  overlayContentClassName: A,
+  separatorClassName: B,
+  listClassName: K,
+  outsidePressIgnoreRef: L,
+  outsideClosable: T = !0,
+  allowedPlacements: q,
   anchorToMouse: w = !1,
   matchReferenceWidth: k = !0,
-  maxDropdownHeight: W
+  maxDropdownHeight: S
 }) => {
-  const [T, V] = Ne(Y), D = F !== void 0, s = D ? !!F : T, b = Pe(null), n = h(
+  const [J, Q] = Ne(Y), D = F !== void 0, s = D ? !!F : J, C = Pe(null), n = h(
     (e) => {
-      D || V(e), R?.(e);
+      D || Q(e), R?.(e);
     },
     [D, R]
-  ), j = ke(), Z = E === void 0, { refs: a, floatingStyles: _, context: u } = ce({
+  ), $ = ke(), V = E === void 0, { refs: a, floatingStyles: Z, context: u } = ce({
     placement: E,
     open: s,
     onOpenChange: n,
     whileElementsMounted: de,
     middleware: [
       fe({ mainAxis: x, crossAxis: 0 }),
-      Z ? ue({
+      V ? ue({
         alignment: "start",
         crossAxis: !0,
         padding: x,
-        allowedPlacements: Q
+        allowedPlacements: q
       }) : pe({ padding: x }),
       me({ padding: x }),
       he({
         padding: x,
         apply({ availableWidth: e, availableHeight: t, elements: p }) {
-          const l = p.floating, O = je(p.reference);
+          const l = p.floating, j = We(p.reference);
           l.style.setProperty(
             "--fui-available-height",
             `${Math.floor(t)}px`
           ), l.style.setProperty(
             "--reference-width",
-            k ? `${Math.round(O)}px` : "0px"
-          ), k ? l.style.minWidth = `${Math.round(O)}px` : l.style.removeProperty("min-width"), l.style.maxWidth = `${Math.floor(e)}px`;
-          const S = Math.floor(t);
-          l.style.maxHeight = `${W ? Math.min(S, W) : S}px`;
+            k ? `${Math.round(j)}px` : "0px"
+          ), k ? l.style.minWidth = `${Math.round(j)}px` : l.style.removeProperty("min-width"), l.style.maxWidth = `${Math.floor(e)}px`;
+          const O = Math.floor(t);
+          l.style.maxHeight = `${S ? Math.min(O, S) : O}px`;
         }
       })
     ]
@@ -80,16 +81,16 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
     bubbles: !0,
     referencePress: !1,
     outsidePress: (e) => {
-      if (!K) return !1;
+      if (!T) return !1;
       const t = e.target;
-      return !(A?.current && t instanceof Node && A.current.contains(t));
+      return !(L?.current && t instanceof Node && L.current.contains(t));
     }
-  }), ne = we(u, { role: "menu" }), { getReferenceProps: oe, getFloatingProps: re } = be([
+  }), ne = we(u, { role: "menu" }), { getReferenceProps: oe, getFloatingProps: re } = Ce([
     H,
     ee,
     te,
     ne
-  ]), C = h(
+  ]), b = h(
     (e, t) => {
       a.setPositionReference({
         getBoundingClientRect: () => ({
@@ -107,51 +108,55 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
     [a]
   ), se = h(
     (e) => {
-      !i.includes(y.ContextMenu) || r || (e.preventDefault(), w && (C(e.clientX, e.clientY), b.current = document.elementFromPoint(
+      !i.includes(y.ContextMenu) || r || (e.preventDefault(), w && (b(e.clientX, e.clientY), C.current = document.elementFromPoint(
         e.clientX,
         e.clientY
       )), n(!0));
     },
-    [w, r, n, C, i]
+    [w, r, n, b, i]
   ), le = h(
     (e) => {
-      !w || r || (i.includes(y.ContextMenu) && s && n(!1), C(e.clientX, e.clientY), b.current = document.elementFromPoint(
+      !w || r || (i.includes(y.ContextMenu) && s && n(!1), b(e.clientX, e.clientY), C.current = document.elementFromPoint(
         e.clientX,
         e.clientY
       ));
     },
-    [w, r, C, s, i, n]
+    [w, r, b, s, i, n]
   );
   U(() => {
     r && s && n(!1);
   }, [r, s, n]);
-  const L = h(
+  const W = h(
     (e) => (t) => {
-      e.disabled || (e.onClick?.({ key: e.key, domEvent: t }), I?.({ key: e.key, domEvent: t }), n(!1));
+      e.disabled || (e.onClick?.({ key: e.key, domEvent: t }), M?.({ key: e.key, domEvent: t }), n(!1));
     },
-    [I, n]
+    [M, n]
   ), ie = De(() => P ? P() : g ? /* @__PURE__ */ v(N, { children: [
     d && /* @__PURE__ */ o(N, { children: typeof d == "function" ? d() : d }),
     /* @__PURE__ */ o(
       "div",
       {
         role: "none",
-        className: M("py-1", B),
+        className: I(
+          "py-1",
+          A,
+          Me.dropdownList
+        ),
         "aria-label": "dropdown",
         children: g.map((e) => e.type === X.Divider ? /* @__PURE__ */ o(
           "div",
           {
             role: "separator",
-            className: M(
-              Ie,
-              $
+            className: I(
+              Ee,
+              B
             )
           },
           e.key
         ) : e.type === X.PlainText ? /* @__PURE__ */ o(
           "div",
           {
-            className: M(
+            className: I(
               "px-3 py-2 text-secondary dial-caption-text",
               e.className
             ),
@@ -159,7 +164,7 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
           },
           e.key
         ) : e.children?.length ? /* @__PURE__ */ o(
-          We,
+          $e,
           {
             item: e,
             onRootClose: () => n(!1)
@@ -172,13 +177,13 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
             type: "button",
             "aria-disabled": !!e.disabled,
             className: m(
-              Ee,
-              e.disabled && Fe,
-              e.danger && Re,
+              Fe,
+              e.disabled && Re,
+              e.danger && Ae,
               e.className
             ),
             disabled: e.disabled,
-            onClick: L(e),
+            onClick: W(e),
             children: [
               e.icon && /* @__PURE__ */ o(
                 "span",
@@ -187,7 +192,7 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
                     e.danger && "text-error",
                     e.disabled && "text-secondary"
                   ),
-                  children: /* @__PURE__ */ o(Me, { icon: e.icon })
+                  children: /* @__PURE__ */ o(Ie, { icon: e.icon })
                 }
               ),
               /* @__PURE__ */ o(
@@ -210,14 +215,14 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
     ),
     f && /* @__PURE__ */ o(N, { children: typeof f == "function" ? f() : f })
   ] }) : null, [
-    L,
+    W,
     g,
     f,
     d,
     P,
     n,
-    B,
-    $
+    A,
+    B
   ]), ae = oe({
     onContextMenu: se,
     onMouseDown: le
@@ -226,7 +231,7 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
     if (!s) return;
     const e = a.reference.current;
     let t = null;
-    if (e instanceof Element ? t = e : b.current instanceof Element && (t = b.current), !t) return;
+    if (e instanceof Element ? t = e : C.current instanceof Element && (t = C.current), !t) return;
     const p = new IntersectionObserver(
       ([l]) => {
         l.isIntersecting || n(!1);
@@ -242,16 +247,16 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
         className: m(
           Be,
           r && "!cursor-not-allowed opacity-75",
-          q
+          G
         ),
         "aria-haspopup": "menu",
         "aria-expanded": s,
-        "aria-controls": j,
+        "aria-controls": $,
         ...ae,
         children: c
       }
     ),
-    s && /* @__PURE__ */ o(Ce, { children: /* @__PURE__ */ o(
+    s && /* @__PURE__ */ o(be, { children: /* @__PURE__ */ o(
       ve,
       {
         context: u,
@@ -261,22 +266,22 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
         children: /* @__PURE__ */ v(
           "div",
           {
-            id: j,
+            id: $,
             ref: a.setFloating,
-            style: _,
+            style: Z,
             className: m(
-              $e,
+              Le,
               !k && "w-max",
-              J
+              K
             ),
             ...re(),
             children: [
-              z && /* @__PURE__ */ o("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ o(
-                Ae,
+              _ && /* @__PURE__ */ o("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ o(
+                Se,
                 {
                   ariaLabel: "Close dropdown",
                   onClose: (e) => {
-                    G?.(e), n(!1);
+                    z?.(e), n(!1);
                   }
                 }
               ) }),
@@ -289,5 +294,5 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
   ] });
 };
 export {
-  Ke as DialDropdown
+  Je as DialDropdown
 };

package/dist/components/Dropdown/DropdownSubMenuItem.js

@@ -1,27 +1,28 @@
-import { jsxs as r, Fragment as f, jsx as s } from "react/jsx-runtime";
+import { jsxs as r, Fragment as N, jsx as s } from "react/jsx-runtime";
 import n from "classnames";
 import { useCallback as y } from "react";
 import { DialIcon as l } from "../Icon/Icon.js";
-import { useSubMenuFloating as g, SubMenuPanel as k } from "../../utils/sub-menu-floating.js";
-import { dropdownGap as C, submenuCaretIcon as w, dropdownItemBaseClassName as c, dropdownItemDisabledClassName as i, dropdownItemDangerClassName as I } from "./constants.js";
-const v = ({
+import { DIAL_KIT_CLASS as g } from "../../constants/public-class-names.js";
+import { useSubMenuFloating as C, SubMenuPanel as k } from "../../utils/sub-menu-floating.js";
+import { dropdownGap as I, submenuCaretIcon as w, dropdownItemBaseClassName as i, dropdownItemDisabledClassName as m, dropdownItemDangerClassName as S } from "./constants.js";
+const A = ({
   item: a,
   onRootClose: o
 }) => {
   const {
     isOpen: t,
     refs: d,
-    floatingStyles: m,
-    context: b,
-    getReferenceProps: p,
+    floatingStyles: c,
+    context: p,
+    getReferenceProps: b,
     getFloatingProps: u
-  } = g(C, "menu", !!a.disabled), x = y(
-    (e) => (N) => {
-      e.disabled || (e.onClick?.({ key: e.key, domEvent: N }), o());
+  } = C(I, "menu", !!a.disabled), x = y(
+    (e) => (f) => {
+      e.disabled || (e.onClick?.({ key: e.key, domEvent: f }), o());
     },
     [o]
   );
-  return /* @__PURE__ */ r(f, { children: [
+  return /* @__PURE__ */ r(N, { children: [
     /* @__PURE__ */ r(
       "button",
       {
@@ -33,11 +34,11 @@ const v = ({
         "aria-disabled": !!a.disabled,
         disabled: a.disabled,
         className: n(
-          c,
-          a.disabled && i,
+          i,
+          a.disabled && m,
           a.className
         ),
-        ...p(),
+        ...b(),
         children: [
           a.icon && /* @__PURE__ */ s("span", { className: n(a.disabled && "text-secondary"), children: /* @__PURE__ */ s(l, { icon: a.icon }) }),
           /* @__PURE__ */ s(
@@ -67,55 +68,62 @@ const v = ({
       k,
       {
         refs: d,
-        floatingStyles: m,
-        context: b,
+        floatingStyles: c,
+        context: p,
         getFloatingProps: u,
         role: "menu",
         className: "w-max",
-        children: /* @__PURE__ */ s("div", { role: "none", className: "py-1", children: a.children.map((e) => /* @__PURE__ */ r(
-          "button",
+        children: /* @__PURE__ */ s(
+          "div",
           {
-            role: "menuitem",
-            type: "button",
-            "aria-disabled": !!e.disabled,
-            disabled: e.disabled,
-            className: n(
-              c,
-              e.disabled && i,
-              e.danger && I,
-              e.className
-            ),
-            onClick: x(e),
-            children: [
-              e.icon && /* @__PURE__ */ s(
-                "span",
-                {
-                  className: n(
-                    e.danger && "text-error",
-                    e.disabled && "text-secondary"
+            role: "none",
+            className: n("py-1", g.dropdownList),
+            children: a.children.map((e) => /* @__PURE__ */ r(
+              "button",
+              {
+                role: "menuitem",
+                type: "button",
+                "aria-disabled": !!e.disabled,
+                disabled: e.disabled,
+                className: n(
+                  i,
+                  e.disabled && m,
+                  e.danger && S,
+                  e.className
+                ),
+                onClick: x(e),
+                children: [
+                  e.icon && /* @__PURE__ */ s(
+                    "span",
+                    {
+                      className: n(
+                        e.danger && "text-error",
+                        e.disabled && "text-secondary"
+                      ),
+                      children: /* @__PURE__ */ s(l, { icon: e.icon })
+                    }
                   ),
-                  children: /* @__PURE__ */ s(l, { icon: e.icon })
-                }
-              ),
-              /* @__PURE__ */ s(
-                "span",
-                {
-                  className: n(
-                    "flex-1 truncate text-start",
-                    e.danger && "text-error",
-                    e.disabled && "text-secondary"
-                  ),
-                  children: e.label
-                }
-              )
-            ]
-          },
-          e.key
-        )) })
+                  /* @__PURE__ */ s(
+                    "span",
+                    {
+                      className: n(
+                        "flex-1 truncate text-start",
+                        e.danger && "text-error",
+                        e.disabled && "text-secondary"
+                      ),
+                      children: e.label
+                    }
+                  )
+                ]
+              },
+              e.key
+            ))
+          }
+        )
       }
     )
   ] });
 };
 export {
-  v as DropdownSubMenuItem
+  A as DropdownSubMenuItem
 };

package/dist/components/Dropdown/constants.js

@@ -1,24 +1,26 @@
 import { jsx as e } from "react/jsx-runtime";
 import o from "classnames";
 import { IconChevronRight as r } from "@tabler/icons-react";
-const n = o(
+import { DIAL_KIT_CLASS as s } from "../../constants/public-class-names.js";
+const i = o(
   "flex items-center gap-2 align-middle",
   "h-auto px-0 bg-transparent border-0"
-), d = o(
-  "z-[53] overflow-auto rounded bg-layer-0 text-primary shadow focus-visible:outline-none"
-), i = o(
+), m = o(
+  "z-floating overflow-auto rounded bg-layer-0 text-primary shadow focus-visible:outline-none"
+), l = o(
   "flex w-full cursor-pointer items-center gap-3",
   "focus-visible:border-none focus-visible:outline-none",
   "hover:bg-accent-primary-alpha px-3",
-  "dial-small-text h-[34px] rounded text-primary"
-), l = "opacity-75 !cursor-not-allowed", m = "text-error", p = "my-1 border-t border-hover border-secondary", c = 4, u = /* @__PURE__ */ e(r, { size: 14 });
+  "dial-small-text h-[34px] rounded text-primary",
+  s.menuItem
+), p = "opacity-75 !cursor-not-allowed", c = "text-error", u = "my-1 border-t border-hover border-secondary", b = 4, f = /* @__PURE__ */ e(r, { size: 14 });
 export {
-  n as dropdownBaseClassName,
-  p as dropdownDividerClassName,
-  c as dropdownGap,
-  i as dropdownItemBaseClassName,
-  m as dropdownItemDangerClassName,
-  l as dropdownItemDisabledClassName,
-  d as dropdownListBaseClassName,
-  u as submenuCaretIcon
+  i as dropdownBaseClassName,
+  u as dropdownDividerClassName,
+  b as dropdownGap,
+  l as dropdownItemBaseClassName,
+  c as dropdownItemDangerClassName,
+  p as dropdownItemDisabledClassName,
+  m as dropdownListBaseClassName,
+  f as submenuCaretIcon
 };