@clickhouse/click-ui 0.6.1-rc2 → 0.6.2-rc1

package/dist/cjs/components/Collapsible/IconWrapper.cjs

@@ -1,27 +1,21 @@
+require("./Collapsible.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const Collapsible_module = require('./Collapsible.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
 
-const LabelContainer = styledComponents.styled.span.withConfig({
-  componentId: "sc-1cu1l45-0"
-})(["display:flex;align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;flex:1;gap:", ";overflow:hidden;"], ({
-  theme
-}) => theme.click.sidebar.navigation.item.default.space.gap);
-const EllipsisContainer = styledComponents.styled.span.withConfig({
-  componentId: "sc-1cu1l45-1"
-})(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-start;gap:inherit;flex:1;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
 const IconWrapper = ({
   icon,
   iconDir = "start",
   children
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(LabelContainer, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cva.cn(Collapsible_module.default.collapsible__label), children: [
     icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" }),
-    /* @__PURE__ */ jsxRuntime.jsx(EllipsisContainer, { children }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cva.cn(Collapsible_module.default.collapsible__ellipsis), children }),
     icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" })
   ] });
 };

package/dist/cjs/components/Collapsible/IconWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconWrapper.cjs","sources":["../../../../src/components/Collapsible/IconWrapper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { styled } from 'styled-components';\nimport { Icon } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport type { ImageName } from '@/components/Icon';\n\nconst LabelContainer = styled.span`\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  flex: 1;\n  gap: ${({ theme }) => theme.click.sidebar.navigation.item.default.space.gap};\n  overflow: hidden;\n`;\n\nconst EllipsisContainer = styled.span`\n  display: flex;\n  white-space: nowrap;\n  overflow: hidden;\n  justify-content: flex-start;\n  gap: inherit;\n  flex: 1;\n  & > *:not(button) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\n\nexport const IconWrapper = ({\n  icon,\n  iconDir = 'start',\n  children,\n}: {\n  // TODO: The consumer app seem to expect to use other assets\n  // this needs to be investigated why it had type IconName\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  children: ReactNode;\n}) => {\n  return (\n    <LabelContainer>\n      {icon && iconDir === 'start' && (\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      )}\n      <EllipsisContainer>{children}</EllipsisContainer>\n      {icon && iconDir === 'end' && (\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      )}\n    </LabelContainer>\n  );\n};\n"],"names":["LabelContainer","styled","span","withConfig","componentId","theme","click","sidebar","navigation","item","default","space","gap","EllipsisContainer","IconWrapper","icon","iconDir","children","jsx","Icon"],"mappings":";;;;;;;;AAMA,MAAMA,cAAAA,GAAiBC,uBAAAA,CAAOC,IAAAA,CAAIC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mJAAA,EAAA,mBAAA,GASzB,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,OAAAA,CAAQC,WAAWC,IAAAA,CAAKC,OAAAA,CAAQC,MAAMC,GAAG,CAAA;AAI7E,MAAMC,iBAAAA,GAAoBZ,uBAAAA,CAAOC,IAAAA,CAAIC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0JAAA,CAAA,CAAA;AAa9B,MAAMU,cAAcA,CAAC;AAAA,EAC1BC,IAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC;AAOF,CAAA,KAAM;AACJ,EAAA,uCACG,cAAA,EAAA,EACEF,QAAAA,EAAAA;AAAAA,IAAAA,IAAAA,IAAQC,YAAY,OAAA,oBACnBE,cAAA,CAACC,aACC,IAAA,EAAMJ,IAAAA,EACN,MAAK,IAAA,EAAI,CAAA;AAAA,oBAGbG,cAAA,CAAC,qBAAmBD,QAAAA,EAAS,CAAA;AAAA,IAC5BF,IAAAA,IAAQC,YAAY,KAAA,oBACnBE,cAAA,CAACC,aACC,IAAA,EAAMJ,IAAAA,EACN,MAAK,IAAA,EAAI;AAAA,GAAA,EAGf,CAAA;AAEJ;;;;"}
+{"version":3,"file":"IconWrapper.cjs","sources":["../../../../src/components/Collapsible/IconWrapper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport type { ImageName } from '@/components/Icon';\n\nimport { cn } from '@/lib/cva';\nimport styles from './Collapsible.module.css';\n\nexport const IconWrapper = ({\n  icon,\n  iconDir = 'start',\n  children,\n}: {\n  // TODO: The consumer app seem to expect to use other assets\n  // this needs to be investigated why it had type IconName\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  children: ReactNode;\n}) => {\n  return (\n    <span className={cn(styles.collapsible__label)}>\n      {icon && iconDir === 'start' && (\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      )}\n      <span className={cn(styles.collapsible__ellipsis)}>{children}</span>\n      {icon && iconDir === 'end' && (\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      )}\n    </span>\n  );\n};\n"],"names":["IconWrapper","icon","iconDir","children","cn","styles","collapsible__label","jsx","Icon","collapsible__ellipsis"],"mappings":";;;;;;;;;AAQO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC,IAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC;AAOF,CAAA,KAAM;AACJ,EAAA,uCACG,MAAA,EAAA,EAAK,SAAA,EAAWC,MAAAA,CAAGC,0BAAAA,CAAOC,kBAAkB,CAAA,EAC1CL,QAAAA,EAAAA;AAAAA,IAAAA,IAAAA,IAAQC,YAAY,OAAA,oBACnBK,cAAA,CAACC,aACC,IAAA,EAAMP,IAAAA,EACN,MAAK,IAAA,EAAI,CAAA;AAAA,mCAGZ,MAAA,EAAA,EAAK,SAAA,EAAWG,OAAGC,0BAAAA,CAAOI,qBAAqB,GAAIN,QAAAA,EAAS,CAAA;AAAA,IAC5DF,IAAAA,IAAQC,YAAY,KAAA,oBACnBK,cAAA,CAACC,aACC,IAAA,EAAMP,IAAAA,EACN,MAAK,IAAA,EAAI;AAAA,GAAA,EAGf,CAAA;AAEJ;;;;"}

package/dist/cjs/components/Collapsible/index.cjs

@@ -1,25 +1,26 @@
+require("./Collapsible.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
 const EmptyButton = require('../EmptyButton/index.cjs');
 const IconWrapper = require('./IconWrapper.cjs');
+const Collapsible_module = require('./Collapsible.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 const NavContext = react.createContext({
   open: false,
   onOpenChange: () => null
 });
-const CollapsibleContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-guwmyz-0"
-})(["width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open='true']{transform:rotate(90deg);}}[data-collapsible-header]:hover [data-trigger-icon]{visibility:visible;}"]);
 const Collapsible = ({
   open: openProp,
   onOpenChange: onOpenChangeProp,
   children,
+  className,
   ...props
 }) => {
   const [open, setOpen] = react.useState(openProp ?? false);
@@ -38,14 +39,19 @@ const Collapsible = ({
     open: openProp ?? open,
     onOpenChange
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContainer, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(NavContext.Provider, { value, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(Collapsible_module.default.collapsible, className), children: /* @__PURE__ */ jsxRuntime.jsx(NavContext.Provider, { value, children }) });
 };
-const CollapsipleHeaderContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-guwmyz-1"
-})(["margin-left:", ";user-select:none;"], ({
-  theme,
-  $indicatorDir
-}) => $indicatorDir === "start" ? 0 : theme.click.image.sm.size.width);
+const headerVariants = classVarianceAuthority.cva(Collapsible_module.default.collapsible__header, {
+  variants: {
+    indicatorDir: {
+      start: Collapsible_module.default["collapsible__header_indicator-dir_start"],
+      end: Collapsible_module.default["collapsible__header_indicator-dir_end"]
+    }
+  },
+  defaultVariants: {
+    indicatorDir: "start"
+  }
+});
 const CollapsipleHeader = react.forwardRef(({
   indicatorDir = "start",
   icon,
@@ -53,19 +59,22 @@ const CollapsipleHeader = react.forwardRef(({
   children,
   wrapInTrigger,
   onClick: onClickProp,
+  className,
   ...props
 }, ref) => {
   const {
     onOpenChange
   } = react.useContext(NavContext);
-  return /* @__PURE__ */ jsxRuntime.jsxs(CollapsipleHeaderContainer, { $indicatorDir: indicatorDir, ref, onClick: (e) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, onClick: (e) => {
     if (wrapInTrigger && typeof onOpenChange === "function") {
       onOpenChange();
     }
     if (typeof onClickProp === "function") {
       onClickProp(e);
     }
-  }, "data-collapsible-header": true, ...props, children: [
+  }, "data-collapsible-header": true, ...props, className: cva.cn(headerVariants({
+    indicatorDir
+  }), className), children: [
     indicatorDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Collapsible.Trigger, {}),
     children && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }),
     indicatorDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Collapsible.Trigger, {})
@@ -73,15 +82,13 @@ const CollapsipleHeader = react.forwardRef(({
 });
 CollapsipleHeader.displayName = "CollapsibleHeader";
 Collapsible.Header = CollapsipleHeader;
-const CollapsipleTriggerButton = styledComponents.styled(EmptyButton.EmptyButton).withConfig({
-  componentId: "sc-guwmyz-2"
-})(["display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;"]);
 const CollapsipleTrigger = ({
   onClick: onClickProp,
   children,
   indicatorDir = "start",
   icon,
   iconDir = "start",
+  className,
   ...props
 }) => {
   const {
@@ -96,7 +103,7 @@ const CollapsipleTrigger = ({
     }
     onOpenChange();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(CollapsipleTriggerButton, { onClick, $indicatorDir: indicatorDir, "aria-label": "trigger children", ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(EmptyButton.EmptyButton, { onClick, "aria-label": "trigger children", ...props, className: cva.cn(Collapsible_module.default.collapsible__trigger, className), children: [
     indicatorDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { "data-trigger-icon": true, name: "chevron-right", "data-open": open.toString(), size: "sm" }),
     children && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }),
     indicatorDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { "data-trigger-icon": true, name: "chevron-right", "data-open": open.toString(), size: "sm" })
@@ -104,14 +111,17 @@ const CollapsipleTrigger = ({
 };
 CollapsipleTrigger.displayName = "CollapsibleTrigger";
 Collapsible.Trigger = CollapsipleTrigger;
-const CollapsibleContentWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-guwmyz-3"
-})(["", ""], ({
-  theme,
-  $indicatorDir
-}) => $indicatorDir ? `${$indicatorDir === "start" ? "margin-left" : "margin-right"}: ${theme.click.image.sm.size.width}` : "");
+const contentVariants = classVarianceAuthority.cva(Collapsible_module.default.collapsible__content, {
+  variants: {
+    indicatorDir: {
+      start: Collapsible_module.default["collapsible__content_indicator-dir_start"],
+      end: Collapsible_module.default["collapsible__content_indicator-dir_end"]
+    }
+  }
+});
 const CollapsipleContent = ({
   indicatorDir,
+  className,
   ...props
 }) => {
   const {
@@ -120,7 +130,9 @@ const CollapsipleContent = ({
   if (!open) {
     return;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContentWrapper, { $indicatorDir: indicatorDir, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(contentVariants({
+    indicatorDir
+  }), className) });
 };
 CollapsipleContent.displayName = "CollapsibleContent";
 Collapsible.Content = CollapsipleContent;

package/dist/cjs/components/Collapsible/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["import {\n  createContext,\n  useState,\n  HTMLAttributes,\n  useContext,\n  useEffect,\n  forwardRef,\n} from 'react';\nimport { styled } from 'styled-components';\n\nimport { Icon, type ImageName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { EmptyButton } from '@/components/EmptyButton';\n\nimport { IconWrapper } from './IconWrapper';\nimport { CollapsibleProps } from './Collapsible.types';\n\ntype ContextProps = {\n  open: boolean;\n  onOpenChange: () => void;\n};\n\nconst NavContext = createContext<ContextProps>({\n  open: false,\n  onOpenChange: () => null,\n});\nconst CollapsibleContainer = styled.div`\n  width: 100%;\n  [data-trigger-icon] {\n    visibility: hidden;\n    transition: transform 150ms cubic-bezier(0.87, 0, 0.13, 1);\n    &[data-open='true'] {\n      transform: rotate(90deg);\n    }\n  }\n  [data-collapsible-header]:hover [data-trigger-icon] {\n    visibility: visible;\n  }\n`;\n\nexport const Collapsible = ({\n  open: openProp,\n  onOpenChange: onOpenChangeProp,\n  children,\n  ...props\n}: CollapsibleProps) => {\n  const [open, setOpen] = useState(openProp ?? false);\n  const onOpenChange = () => {\n    setOpen(open => {\n      if (typeof onOpenChangeProp === 'function') {\n        onOpenChangeProp(!open);\n      }\n      return !open;\n    });\n  };\n\n  useEffect(() => {\n    setOpen(open => openProp ?? open);\n  }, [openProp]);\n\n  const value = {\n    open: openProp ?? open,\n    onOpenChange,\n  };\n  return (\n    <CollapsibleContainer {...props}>\n      <NavContext.Provider value={value}>{children}</NavContext.Provider>\n    </CollapsibleContainer>\n  );\n};\n\nconst CollapsipleHeaderContainer = styled.div<{ $indicatorDir: HorizontalDirection }>`\n  margin-left: ${({ theme, $indicatorDir }) =>\n    $indicatorDir === 'start' ? 0 : theme.click.image.sm.size.width};\n  user-select: none;\n`;\n\ninterface CollapsipleHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  indicatorDir?: HorizontalDirection;\n  wrapInTrigger?: boolean;\n}\n\nconst CollapsipleHeader = forwardRef<HTMLDivElement, CollapsipleHeaderProps>(\n  (\n    {\n      indicatorDir = 'start',\n      icon,\n      iconDir,\n      children,\n      wrapInTrigger,\n      onClick: onClickProp,\n      ...props\n    }: CollapsipleHeaderProps,\n    ref\n  ) => {\n    const { onOpenChange } = useContext(NavContext);\n    return (\n      <CollapsipleHeaderContainer\n        $indicatorDir={indicatorDir}\n        ref={ref}\n        onClick={e => {\n          if (wrapInTrigger && typeof onOpenChange === 'function') {\n            onOpenChange();\n          }\n          if (typeof onClickProp === 'function') {\n            onClickProp(e);\n          }\n        }}\n        data-collapsible-header\n        {...props}\n      >\n        {indicatorDir === 'start' && <Collapsible.Trigger />}\n        {children && (\n          <IconWrapper\n            icon={icon}\n            iconDir={iconDir}\n          >\n            {children}\n          </IconWrapper>\n        )}\n        {indicatorDir === 'end' && <Collapsible.Trigger />}\n      </CollapsipleHeaderContainer>\n    );\n  }\n);\n\nCollapsipleHeader.displayName = 'CollapsibleHeader';\nCollapsible.Header = CollapsipleHeader;\n\nconst CollapsipleTriggerButton = styled(EmptyButton)<{\n  $indicatorDir: HorizontalDirection;\n}>`\n  display: flex;\n  align-items: center;\n  font: inherit;\n  color: inherit;\n  cursor: inherit;\n`;\ninterface CollapsipleTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  indicatorDir?: HorizontalDirection;\n}\n\nconst CollapsipleTrigger = ({\n  onClick: onClickProp,\n  children,\n  indicatorDir = 'start',\n  icon,\n  iconDir = 'start',\n  ...props\n}: CollapsipleTriggerProps) => {\n  const { open, onOpenChange } = useContext(NavContext);\n  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (onClickProp) {\n      onClickProp(e);\n    }\n    onOpenChange();\n  };\n\n  return (\n    <CollapsipleTriggerButton\n      onClick={onClick}\n      $indicatorDir={indicatorDir}\n      aria-label=\"trigger children\"\n      {...props}\n    >\n      {indicatorDir === 'start' && (\n        <Icon\n          data-trigger-icon\n          name=\"chevron-right\"\n          data-open={open.toString()}\n          size=\"sm\"\n        />\n      )}\n      {children && (\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {children}\n        </IconWrapper>\n      )}\n      {indicatorDir === 'end' && (\n        <Icon\n          data-trigger-icon\n          name=\"chevron-right\"\n          data-open={open.toString()}\n          size=\"sm\"\n        />\n      )}\n    </CollapsipleTriggerButton>\n  );\n};\n\nCollapsipleTrigger.displayName = 'CollapsibleTrigger';\nCollapsible.Trigger = CollapsipleTrigger;\n\nconst CollapsibleContentWrapper = styled.div<{ $indicatorDir?: HorizontalDirection }>`\n  ${({ theme, $indicatorDir }) =>\n    $indicatorDir\n      ? `${$indicatorDir === 'start' ? 'margin-left' : 'margin-right'}: ${\n          theme.click.image.sm.size.width\n        }`\n      : ''}\n`;\n\nconst CollapsipleContent = ({\n  indicatorDir,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { indicatorDir?: HorizontalDirection }) => {\n  const { open } = useContext(NavContext);\n  if (!open) {\n    return;\n  }\n  return (\n    <CollapsibleContentWrapper\n      $indicatorDir={indicatorDir}\n      {...props}\n    />\n  );\n};\n\nCollapsipleContent.displayName = 'CollapsibleContent';\nCollapsible.Content = CollapsipleContent;\n"],"names":["NavContext","createContext","open","onOpenChange","CollapsibleContainer","styled","div","withConfig","componentId","Collapsible","openProp","onOpenChangeProp","children","props","setOpen","useState","useEffect","value","jsx","CollapsipleHeaderContainer","theme","$indicatorDir","click","image","sm","size","width","CollapsipleHeader","forwardRef","indicatorDir","icon","iconDir","wrapInTrigger","onClick","onClickProp","ref","useContext","e","IconWrapper","displayName","Header","CollapsipleTriggerButton","EmptyButton","CollapsipleTrigger","preventDefault","stopPropagation","jsxs","Icon","toString","Trigger","CollapsibleContentWrapper","CollapsipleContent","Content"],"mappings":";;;;;;;;;;;AAsBA,MAAMA,aAAaC,mBAAAA,CAA4B;AAAA,EAC7CC,IAAAA,EAAM,KAAA;AAAA,EACNC,cAAcA,MAAM;AACtB,CAAC,CAAA;AACD,MAAMC,oBAAAA,GAAuBC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,gOAAA,CAAA,CAAA;AAchC,MAAMC,cAAcA,CAAC;AAAA,EAC1BP,IAAAA,EAAMQ,QAAAA;AAAAA,EACNP,YAAAA,EAAcQ,gBAAAA;AAAAA,EACdC,QAAAA;AAAAA,EACA,GAAGC;AACa,CAAA,KAAM;AACtB,EAAA,MAAM,CAACX,IAAAA,EAAMY,OAAO,CAAA,GAAIC,cAAAA,CAASL,YAAY,KAAK,CAAA;AAClD,EAAA,MAAMP,eAAeA,MAAM;AACzBW,IAAAA,OAAAA,CAAQZ,CAAAA,KAAAA,KAAQ;AACd,MAAA,IAAI,OAAOS,qBAAqB,UAAA,EAAY;AAC1CA,QAAAA,gBAAAA,CAAiB,CAACT,KAAI,CAAA;AAAA,MACxB;AACA,MAAA,OAAO,CAACA,KAAAA;AAAAA,IACV,CAAC,CAAA;AAAA,EACH,CAAA;AAEAc,EAAAA,eAAAA,CAAU,MAAM;AACdF,IAAAA,OAAAA,CAAQZ,CAAAA,KAAAA,KAAQQ,QAAAA,IAAYR,KAAI,CAAA;AAAA,EAClC,CAAA,EAAG,CAACQ,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAMO,KAAAA,GAAQ;AAAA,IACZf,MAAMQ,QAAAA,IAAYR,IAAAA;AAAAA,IAClBC;AAAAA,GACF;AACA,EAAA,uBACEe,cAAA,CAAC,oBAAA,EAAA,EAAqB,GAAIL,KAAAA,EACxB,QAAA,kBAAAK,cAAA,CAAC,WAAW,QAAA,EAAX,EAAoB,KAAA,EAAeN,QAAAA,EAAS,CAAA,EAC/C,CAAA;AAEJ;AAEA,MAAMO,0BAAAA,GAA6Bd,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,cAAA,EAAA,oBAAA,GAC5B,CAAC;AAAA,EAAEY,KAAAA;AAAAA,EAAOC;AAAc,CAAA,KACrCA,aAAAA,KAAkB,UAAU,CAAA,GAAID,KAAAA,CAAME,MAAMC,KAAAA,CAAMC,EAAAA,CAAGC,KAAKC,KAAK,CAAA;AAWnE,MAAMC,iBAAAA,GAAoBC,iBACxB,CACE;AAAA,EACEC,YAAAA,GAAe,OAAA;AAAA,EACfC,IAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAnB,QAAAA;AAAAA,EACAoB,aAAAA;AAAAA,EACAC,OAAAA,EAASC,WAAAA;AAAAA,EACT,GAAGrB;AACmB,CAAA,EACxBsB,GAAAA,KACG;AACH,EAAA,MAAM;AAAA,IAAEhC;AAAAA,GAAa,GAAIiC,iBAAWpC,UAAU,CAAA;AAC9C,EAAA,uCACG,0BAAA,EAAA,EACC,aAAA,EAAe6B,YAAAA,EACf,GAAA,EACA,SAASQ,CAAAA,CAAAA,KAAK;AACZ,IAAA,IAAIL,aAAAA,IAAiB,OAAO7B,YAAAA,KAAiB,UAAA,EAAY;AACvDA,MAAAA,YAAAA,EAAa;AAAA,IACf;AACA,IAAA,IAAI,OAAO+B,gBAAgB,UAAA,EAAY;AACrCA,MAAAA,WAAAA,CAAYG,CAAC,CAAA;AAAA,IACf;AAAA,EACF,CAAA,EACA,yBAAA,EAAuB,IAAA,EACvB,GAAIxB,KAAAA,EAEHgB,QAAAA,EAAAA;AAAAA,IAAAA,YAAAA,KAAiB,OAAA,oBAAWX,cAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAmB,CAAA;AAAA,IAChDN,QAAAA,oBACCM,cAAA,CAACoB,uBAAA,EAAA,EACC,IAAA,EACA,SAEC1B,QAAAA,EACH,CAAA;AAAA,IAEDiB,YAAAA,KAAiB,KAAA,oBAASX,cAAA,CAAC,WAAA,CAAY,SAAZ,EAAmB;AAAA,GAAA,EACjD,CAAA;AAEJ,CACF,CAAA;AAEAS,iBAAAA,CAAkBY,WAAAA,GAAc,mBAAA;AAChC9B,WAAAA,CAAY+B,MAAAA,GAASb,iBAAAA;AAErB,MAAMc,wBAAAA,GAA2BpC,uBAAAA,CAAOqC,uBAAW,CAAA,CAACnC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4EAAA,CAAA,CAAA;AAepD,MAAMmC,qBAAqBA,CAAC;AAAA,EAC1BV,OAAAA,EAASC,WAAAA;AAAAA,EACTtB,QAAAA;AAAAA,EACAiB,YAAAA,GAAe,OAAA;AAAA,EACfC,IAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACV,GAAGlB;AACoB,CAAA,KAAM;AAC7B,EAAA,MAAM;AAAA,IAAEX,IAAAA;AAAAA,IAAMC;AAAAA,GAAa,GAAIiC,iBAAWpC,UAAU,CAAA;AACpD,EAAA,MAAMiC,OAAAA,GAAUA,CAACI,CAAAA,KAA2C;AAC1DA,IAAAA,CAAAA,CAAEO,cAAAA,EAAe;AACjBP,IAAAA,CAAAA,CAAEQ,eAAAA,EAAgB;AAClB,IAAA,IAAIX,WAAAA,EAAa;AACfA,MAAAA,WAAAA,CAAYG,CAAC,CAAA;AAAA,IACf;AACAlC,IAAAA,YAAAA,EAAa;AAAA,EACf,CAAA;AAEA,EAAA,uBACE2C,eAAA,CAAC,4BACC,OAAA,EACA,aAAA,EAAejB,cACf,YAAA,EAAW,kBAAA,EACX,GAAIhB,KAAAA,EAEHgB,QAAAA,EAAAA;AAAAA,IAAAA,YAAAA,KAAiB,OAAA,oBAChBX,cAAA,CAAC6B,SAAA,EAAA,EACC,mBAAA,EAAiB,IAAA,EACjB,IAAA,EAAK,eAAA,EACL,WAAA,EAAW7C,IAAAA,CAAK8C,QAAAA,EAAS,EACzB,IAAA,EAAK,IAAA,EAAI,CAAA;AAAA,IAGZpC,QAAAA,oBACCM,cAAA,CAACoB,uBAAA,EAAA,EACC,IAAA,EACA,SAEC1B,QAAAA,EACH,CAAA;AAAA,IAEDiB,YAAAA,KAAiB,KAAA,oBAChBX,cAAA,CAAC6B,SAAA,EAAA,EACC,mBAAA,EAAiB,IAAA,EACjB,IAAA,EAAK,eAAA,EACL,WAAA,EAAW7C,IAAAA,CAAK8C,QAAAA,EAAS,EACzB,MAAK,IAAA,EAAI;AAAA,GAAA,EAGf,CAAA;AAEJ,CAAA;AAEAL,kBAAAA,CAAmBJ,WAAAA,GAAc,oBAAA;AACjC9B,WAAAA,CAAYwC,OAAAA,GAAUN,kBAAAA;AAEtB,MAAMO,yBAAAA,GAA4B7C,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GACxC,CAAC;AAAA,EAAEY,KAAAA;AAAAA,EAAOC;AAAc,CAAA,KACxBA,aAAAA,GACI,CAAA,EAAGA,aAAAA,KAAkB,OAAA,GAAU,gBAAgB,cAAc,CAAA,EAAA,EAC3DD,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMC,EAAAA,CAAGC,IAAAA,CAAKC,KAAK,KAEjC,EAAE,CAAA;AAGV,MAAMyB,qBAAqBA,CAAC;AAAA,EAC1BtB,YAAAA;AAAAA,EACA,GAAGhB;AACoE,CAAA,KAAM;AAC7E,EAAA,MAAM;AAAA,IAAEX;AAAAA,GAAK,GAAIkC,iBAAWpC,UAAU,CAAA;AACtC,EAAA,IAAI,CAACE,IAAAA,EAAM;AACT,IAAA;AAAA,EACF;AACA,EAAA,uBACEgB,cAAA,CAAC,yBAAA,EAAA,EACC,aAAA,EAAeW,YAAAA,EACf,GAAIhB,KAAAA,EAAM,CAAA;AAGhB,CAAA;AAEAsC,kBAAAA,CAAmBZ,WAAAA,GAAc,oBAAA;AACjC9B,WAAAA,CAAY2C,OAAAA,GAAUD,kBAAAA;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["import {\n  createContext,\n  useState,\n  HTMLAttributes,\n  useContext,\n  useEffect,\n  forwardRef,\n} from 'react';\n\nimport { cn, cva } from '@/lib/cva';\nimport { Icon, type ImageName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { EmptyButton } from '@/components/EmptyButton';\n\nimport { IconWrapper } from './IconWrapper';\nimport { CollapsibleProps } from './Collapsible.types';\nimport styles from './Collapsible.module.css';\n\ntype ContextProps = {\n  open: boolean;\n  onOpenChange: () => void;\n};\n\nconst NavContext = createContext<ContextProps>({\n  open: false,\n  onOpenChange: () => null,\n});\n\nexport const Collapsible = ({\n  open: openProp,\n  onOpenChange: onOpenChangeProp,\n  children,\n  className,\n  ...props\n}: CollapsibleProps) => {\n  const [open, setOpen] = useState(openProp ?? false);\n  const onOpenChange = () => {\n    setOpen(open => {\n      if (typeof onOpenChangeProp === 'function') {\n        onOpenChangeProp(!open);\n      }\n      return !open;\n    });\n  };\n\n  useEffect(() => {\n    setOpen(open => openProp ?? open);\n  }, [openProp]);\n\n  const value = {\n    open: openProp ?? open,\n    onOpenChange,\n  };\n  return (\n    <div\n      {...props}\n      className={cn(styles.collapsible, className)}\n    >\n      <NavContext.Provider value={value}>{children}</NavContext.Provider>\n    </div>\n  );\n};\n\nconst headerVariants = cva(styles.collapsible__header, {\n  variants: {\n    indicatorDir: {\n      start: styles['collapsible__header_indicator-dir_start'],\n      end: styles['collapsible__header_indicator-dir_end'],\n    },\n  },\n  defaultVariants: {\n    indicatorDir: 'start',\n  },\n});\n\ninterface CollapsipleHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  indicatorDir?: HorizontalDirection;\n  wrapInTrigger?: boolean;\n}\n\nconst CollapsipleHeader = forwardRef<HTMLDivElement, CollapsipleHeaderProps>(\n  (\n    {\n      indicatorDir = 'start',\n      icon,\n      iconDir,\n      children,\n      wrapInTrigger,\n      onClick: onClickProp,\n      className,\n      ...props\n    }: CollapsipleHeaderProps,\n    ref\n  ) => {\n    const { onOpenChange } = useContext(NavContext);\n    return (\n      <div\n        ref={ref}\n        onClick={e => {\n          if (wrapInTrigger && typeof onOpenChange === 'function') {\n            onOpenChange();\n          }\n          if (typeof onClickProp === 'function') {\n            onClickProp(e);\n          }\n        }}\n        data-collapsible-header\n        {...props}\n        className={cn(headerVariants({ indicatorDir }), className)}\n      >\n        {indicatorDir === 'start' && <Collapsible.Trigger />}\n        {children && (\n          <IconWrapper\n            icon={icon}\n            iconDir={iconDir}\n          >\n            {children}\n          </IconWrapper>\n        )}\n        {indicatorDir === 'end' && <Collapsible.Trigger />}\n      </div>\n    );\n  }\n);\n\nCollapsipleHeader.displayName = 'CollapsibleHeader';\nCollapsible.Header = CollapsipleHeader;\n\ninterface CollapsipleTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  indicatorDir?: HorizontalDirection;\n}\n\nconst CollapsipleTrigger = ({\n  onClick: onClickProp,\n  children,\n  indicatorDir = 'start',\n  icon,\n  iconDir = 'start',\n  className,\n  ...props\n}: CollapsipleTriggerProps) => {\n  const { open, onOpenChange } = useContext(NavContext);\n  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (onClickProp) {\n      onClickProp(e);\n    }\n    onOpenChange();\n  };\n\n  return (\n    <EmptyButton\n      onClick={onClick}\n      aria-label=\"trigger children\"\n      {...props}\n      className={cn(styles.collapsible__trigger, className)}\n    >\n      {indicatorDir === 'start' && (\n        <Icon\n          data-trigger-icon\n          name=\"chevron-right\"\n          data-open={open.toString()}\n          size=\"sm\"\n        />\n      )}\n      {children && (\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {children}\n        </IconWrapper>\n      )}\n      {indicatorDir === 'end' && (\n        <Icon\n          data-trigger-icon\n          name=\"chevron-right\"\n          data-open={open.toString()}\n          size=\"sm\"\n        />\n      )}\n    </EmptyButton>\n  );\n};\n\nCollapsipleTrigger.displayName = 'CollapsibleTrigger';\nCollapsible.Trigger = CollapsipleTrigger;\n\nconst contentVariants = cva(styles.collapsible__content, {\n  variants: {\n    indicatorDir: {\n      start: styles['collapsible__content_indicator-dir_start'],\n      end: styles['collapsible__content_indicator-dir_end'],\n    },\n  },\n});\n\nconst CollapsipleContent = ({\n  indicatorDir,\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { indicatorDir?: HorizontalDirection }) => {\n  const { open } = useContext(NavContext);\n  if (!open) {\n    return;\n  }\n  return (\n    <div\n      {...props}\n      className={cn(contentVariants({ indicatorDir }), className)}\n    />\n  );\n};\n\nCollapsipleContent.displayName = 'CollapsibleContent';\nCollapsible.Content = CollapsipleContent;\n"],"names":["NavContext","createContext","open","onOpenChange","Collapsible","openProp","onOpenChangeProp","children","className","props","setOpen","useState","useEffect","value","cn","styles","collapsible","headerVariants","cva","collapsible__header","variants","indicatorDir","start","end","defaultVariants","CollapsipleHeader","forwardRef","icon","iconDir","wrapInTrigger","onClick","onClickProp","ref","useContext","jsxs","e","jsx","IconWrapper","displayName","Header","CollapsipleTrigger","preventDefault","stopPropagation","EmptyButton","collapsible__trigger","Icon","toString","Trigger","contentVariants","collapsible__content","CollapsipleContent","Content"],"mappings":"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"}

package/dist/cjs/components/Container/Container.css

@@ -5,9 +5,9 @@
      this reset a nested Container would inherit an ancestor's value — e.g. a
      parent with `fillHeight` would force `height: 100%` onto every descendant
      Container, and a parent with `grow` would make children flex-grow too.
-     Resetting to the guaranteed-invalid `initial` value keeps each Container's
-     defaults isolated; the `var()` fallbacks below then resolve to the same
-     defaults the styled-components version produced when the prop was unset. */
+     Resetting the variables on `.container` prevents inheritance; using `initial`
+     makes the consuming declarations compute to their initial values when the prop
+     is unset (the `var()` fallbacks below are an extra guard). */
   --container-height: initial;
   --container-min-height: initial;
   --container-max-height: initial;

package/dist/cjs/components/ContextMenu/index.cjs

@@ -10,6 +10,7 @@ const GenericMenu = require('../GenericMenu/index.cjs');
 const PopoverArrow = require('../Assets/Icons/Popover-Arrow.cjs');
 const IconWrapper = require('../IconWrapper/index.cjs');
 const useInputModality = require('../../hooks/internal/useInputModality.cjs');
+const PortalContext = require('../../providers/PortalContext.cjs');
 const Icon = require('../Icon/index.cjs');
 
 function _interopNamespace(e) {
@@ -87,6 +88,7 @@ const RightMenuContent = styledComponents.styled(GenericMenu.GenericMenuPanel).w
 const ContextMenuContent = ({
   sub,
   children,
+  container,
   showArrow,
   // TODO: remove deprecated side and align
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -97,7 +99,8 @@ const ContextMenuContent = ({
 }) => {
   const ContentElement = sub ? RightMenu__namespace.SubContent : RightMenu__namespace.Content;
   const inputModalityProps = useInputModality.useInputModality();
-  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(RightMenuContent, { ...props, $type: "context-menu", $showArrow: showArrow, as: ContentElement, ...inputModalityProps, children: [
+  const portalContainer = PortalContext.useResolvedPortalContainer(container);
+  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RightMenuContent, { ...props, $type: "context-menu", $showArrow: showArrow, as: ContentElement, ...inputModalityProps, children: [
     showArrow && /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.Arrow, { asChild: true, as: RightMenu__namespace.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow.default, { className: "popover-arrow" }) }),
     children
   ] }) });

package/dist/cjs/components/ContextMenu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import * as RightMenu from '@radix-ui/react-context-menu';\nimport { styled } from 'styled-components';\nimport { forwardRef } from 'react';\nimport type { HorizontalDirection } from '@/types';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper/IconWrapper';\nimport { useInputModality } from '@/hooks/internal';\nimport type { ArrowProps, ContextMenuItemProps } from './ContextMenu.types';\n\nexport const ContextMenu = (props: RightMenu.ContextMenuProps) => (\n  <RightMenu.Root {...props} />\n);\n\nconst TriggerDiv = styled.div`\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.click.global.color.outline.default};\n    outline-offset: 2px;\n  }\n`;\n\nconst ContextMenuTrigger = forwardRef<HTMLDivElement, RightMenu.ContextMenuTriggerProps>(\n  ({ disabled, ...props }, ref) => {\n    return (\n      <RightMenu.Trigger\n        asChild\n        disabled={disabled}\n      >\n        <TriggerDiv\n          ref={ref}\n          {...props}\n        />\n      </RightMenu.Trigger>\n    );\n  }\n);\n\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\nContextMenu.Trigger = ContextMenuTrigger;\n\ninterface ContextMenuSubTriggerProps extends RightMenu.ContextMenuSubTriggerProps {\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n}\nconst ContextMenuSubTrigger = ({\n  icon,\n  iconDir,\n  children,\n  ...props\n}: ContextMenuSubTriggerProps) => {\n  return (\n    <GenericMenuItem\n      as={RightMenu.SubTrigger}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n      <div className=\"dropdown-arrow\">\n        <Icon name=\"chevron-right\" />\n      </div>\n    </GenericMenuItem>\n  );\n};\n\nContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';\nContextMenu.SubTrigger = ContextMenuSubTrigger;\n\ntype DeprecatedFields = {\n  /** @deprecated The side field have been deprecated. See https://github.com/ClickHouse/click-ui/pull/756/files#diff-801534275d6fc19b60543371f1055838e7d60942fa4005c3ab1623293e10fb7fR24 */\n  side?: string;\n  /** @deprecated The align field have been deprecated. See https://github.com/ClickHouse/click-ui/pull/756/files#diff-801534275d6fc19b60543371f1055838e7d60942fa4005c3ab1623293e10fb7fR24 */\n  align?: string;\n};\n\ntype ContextMenuContentProps = RightMenu.ContextMenuContentProps & {\n  sub?: true;\n} & ArrowProps &\n  DeprecatedFields;\n\ntype ContextMenuSubContentProps = RightMenu.ContextMenuSubContentProps & {\n  sub?: never;\n} & ArrowProps &\n  DeprecatedFields;\n\nconst RightMenuContent = styled(GenericMenuPanel)<{ $showArrow?: boolean }>`\n  flex-direction: column;\n  z-index: 1;\n  ${({ $showArrow }) =>\n    $showArrow\n      ? `\n      &[data-side=\"bottom\"] {\n        margin-top: -1px;\n      }\n      &[data-side=\"top\"] {\n        margin-bottom: -1px;\n      }\n      &[data-side=\"left\"] {\n        margin-right: -1px;\n        .popover-arrow {\n          margin-right: 1rem;\n        }\n      }\n      }\n      &[data-side=\"right\"] {\n        margin-left: -1px;\n        .popover-arrow {\n          margin-left: 1rem;\n        }\n      }\n  `\n      : ''};\n`;\n\nconst ContextMenuContent = ({\n  sub,\n  children,\n  showArrow,\n  // TODO: remove deprecated side and align\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  side,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  align,\n  ...props\n}: ContextMenuContentProps | ContextMenuSubContentProps) => {\n  const ContentElement = sub ? RightMenu.SubContent : RightMenu.Content;\n  const inputModalityProps = useInputModality();\n  return (\n    <RightMenu.Portal>\n      <RightMenuContent\n        {...props}\n        $type=\"context-menu\"\n        $showArrow={showArrow}\n        as={ContentElement}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RightMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow className=\"popover-arrow\" />\n          </Arrow>\n        )}\n        {children}\n      </RightMenuContent>\n    </RightMenu.Portal>\n  );\n};\n\nContextMenuContent.displayName = 'ContextMenuContent';\nContextMenu.Content = ContextMenuContent;\n\nconst RightMenuGroup = styled(RightMenu.Group)`\n  width: 100%;\n  border-bottom: 1px solid\n    ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst ContextMenuGroup = (props: RightMenu.ContextMenuGroupProps) => {\n  return <RightMenuGroup {...props} />;\n};\n\nContextMenuGroup.displayName = 'ContextMenuGroup';\nContextMenu.Group = ContextMenuGroup;\n\nconst RightMenuSub = styled(RightMenu.Sub)`\n  border-bottom: 1px solid\n    ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst ContextMenuSub = ({ ...props }: RightMenu.ContextMenuGroupProps) => {\n  return <RightMenuSub {...props} />;\n};\n\nContextMenuSub.displayName = 'ContextMenuSub';\nContextMenu.Sub = ContextMenuSub;\n\nconst ContextMenuItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  children,\n  ...props\n}: ContextMenuItemProps) => {\n  return (\n    <GenericMenuItem\n      as={RightMenu.Item}\n      $type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n    </GenericMenuItem>\n  );\n};\n\nContextMenuItem.displayName = 'ContextMenuItem';\nContextMenu.Item = ContextMenuItem;\n\nexport default ContextMenu;\n"],"names":["ContextMenu","props","jsx","RightMenu","TriggerDiv","styled","div","withConfig","componentId","theme","click","global","color","outline","default","ContextMenuTrigger","forwardRef","disabled","ref","displayName","Trigger","ContextMenuSubTrigger","icon","iconDir","children","GenericMenuItem","SubTrigger","IconWrapper","Icon","RightMenuContent","GenericMenuPanel","$showArrow","ContextMenuContent","sub","showArrow","side","align","ContentElement","SubContent","Content","inputModalityProps","useInputModality","Arrow","Popover_Arrow","RightMenuGroup","Group","genericMenu","item","stroke","ContextMenuGroup","RightMenuSub","Sub","ContextMenuSub","ContextMenuItem","type","Item"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import * as RightMenu from '@radix-ui/react-context-menu';\nimport { styled } from 'styled-components';\nimport { forwardRef } from 'react';\nimport type { HorizontalDirection } from '@/types';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper/IconWrapper';\nimport { useInputModality } from '@/hooks/internal';\nimport type { ArrowProps, ContextMenuItemProps } from './ContextMenu.types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\n\nexport const ContextMenu = (props: RightMenu.ContextMenuProps) => (\n  <RightMenu.Root {...props} />\n);\n\nconst TriggerDiv = styled.div`\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.click.global.color.outline.default};\n    outline-offset: 2px;\n  }\n`;\n\nconst ContextMenuTrigger = forwardRef<HTMLDivElement, RightMenu.ContextMenuTriggerProps>(\n  ({ disabled, ...props }, ref) => {\n    return (\n      <RightMenu.Trigger\n        asChild\n        disabled={disabled}\n      >\n        <TriggerDiv\n          ref={ref}\n          {...props}\n        />\n      </RightMenu.Trigger>\n    );\n  }\n);\n\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\nContextMenu.Trigger = ContextMenuTrigger;\n\ninterface ContextMenuSubTriggerProps extends RightMenu.ContextMenuSubTriggerProps {\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n}\nconst ContextMenuSubTrigger = ({\n  icon,\n  iconDir,\n  children,\n  ...props\n}: ContextMenuSubTriggerProps) => {\n  return (\n    <GenericMenuItem\n      as={RightMenu.SubTrigger}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n      <div className=\"dropdown-arrow\">\n        <Icon name=\"chevron-right\" />\n      </div>\n    </GenericMenuItem>\n  );\n};\n\nContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';\nContextMenu.SubTrigger = ContextMenuSubTrigger;\n\ntype DeprecatedFields = {\n  /** @deprecated The side field have been deprecated. See https://github.com/ClickHouse/click-ui/pull/756/files#diff-801534275d6fc19b60543371f1055838e7d60942fa4005c3ab1623293e10fb7fR24 */\n  side?: string;\n  /** @deprecated The align field have been deprecated. See https://github.com/ClickHouse/click-ui/pull/756/files#diff-801534275d6fc19b60543371f1055838e7d60942fa4005c3ab1623293e10fb7fR24 */\n  align?: string;\n};\n\ntype ContextMenuContentProps = RightMenu.ContextMenuContentProps & {\n  sub?: true;\n  container?: HTMLElement | null;\n} & ArrowProps &\n  DeprecatedFields;\n\ntype ContextMenuSubContentProps = RightMenu.ContextMenuSubContentProps & {\n  sub?: never;\n  container?: HTMLElement | null;\n} & ArrowProps &\n  DeprecatedFields;\n\nconst RightMenuContent = styled(GenericMenuPanel)<{ $showArrow?: boolean }>`\n  flex-direction: column;\n  z-index: 1;\n  ${({ $showArrow }) =>\n    $showArrow\n      ? `\n      &[data-side=\"bottom\"] {\n        margin-top: -1px;\n      }\n      &[data-side=\"top\"] {\n        margin-bottom: -1px;\n      }\n      &[data-side=\"left\"] {\n        margin-right: -1px;\n        .popover-arrow {\n          margin-right: 1rem;\n        }\n      }\n      }\n      &[data-side=\"right\"] {\n        margin-left: -1px;\n        .popover-arrow {\n          margin-left: 1rem;\n        }\n      }\n  `\n      : ''};\n`;\n\nconst ContextMenuContent = ({\n  sub,\n  children,\n  container,\n  showArrow,\n  // TODO: remove deprecated side and align\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  side,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  align,\n  ...props\n}: ContextMenuContentProps | ContextMenuSubContentProps) => {\n  const ContentElement = sub ? RightMenu.SubContent : RightMenu.Content;\n  const inputModalityProps = useInputModality();\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RightMenu.Portal container={portalContainer}>\n      <RightMenuContent\n        {...props}\n        $type=\"context-menu\"\n        $showArrow={showArrow}\n        as={ContentElement}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RightMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow className=\"popover-arrow\" />\n          </Arrow>\n        )}\n        {children}\n      </RightMenuContent>\n    </RightMenu.Portal>\n  );\n};\n\nContextMenuContent.displayName = 'ContextMenuContent';\nContextMenu.Content = ContextMenuContent;\n\nconst RightMenuGroup = styled(RightMenu.Group)`\n  width: 100%;\n  border-bottom: 1px solid\n    ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst ContextMenuGroup = (props: RightMenu.ContextMenuGroupProps) => {\n  return <RightMenuGroup {...props} />;\n};\n\nContextMenuGroup.displayName = 'ContextMenuGroup';\nContextMenu.Group = ContextMenuGroup;\n\nconst RightMenuSub = styled(RightMenu.Sub)`\n  border-bottom: 1px solid\n    ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst ContextMenuSub = ({ ...props }: RightMenu.ContextMenuGroupProps) => {\n  return <RightMenuSub {...props} />;\n};\n\nContextMenuSub.displayName = 'ContextMenuSub';\nContextMenu.Sub = ContextMenuSub;\n\nconst ContextMenuItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  children,\n  ...props\n}: ContextMenuItemProps) => {\n  return (\n    <GenericMenuItem\n      as={RightMenu.Item}\n      $type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n    </GenericMenuItem>\n  );\n};\n\nContextMenuItem.displayName = 'ContextMenuItem';\nContextMenu.Item = ContextMenuItem;\n\nexport default ContextMenu;\n"],"names":["ContextMenu","props","jsx","RightMenu","TriggerDiv","styled","div","withConfig","componentId","theme","click","global","color","outline","default","ContextMenuTrigger","forwardRef","disabled","ref","displayName","Trigger","ContextMenuSubTrigger","icon","iconDir","children","GenericMenuItem","SubTrigger","IconWrapper","Icon","RightMenuContent","GenericMenuPanel","$showArrow","ContextMenuContent","sub","container","showArrow","side","align","ContentElement","SubContent","Content","inputModalityProps","useInputModality","portalContainer","useResolvedPortalContainer","jsxs","Arrow","Popover_Arrow","RightMenuGroup","Group","genericMenu","item","stroke","ContextMenuGroup","RightMenuSub","Sub","ContextMenuSub","ContextMenuItem","type","Item"],"mappings":"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"}

package/dist/cjs/components/DatePicker/Common.cjs

@@ -535,7 +535,7 @@ const CalendarRenderer = ({
       return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: date.DAYS_IN_WEEK, children: renderYearsGrid() }) }) });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: headers.weekDays.map(({
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: headers.weekdays.map(({
         key,
         value: date
       }) => {