@clickhouse/click-ui 0.6.1 → 0.6.2-rc1

package/README.md

@@ -51,6 +51,7 @@ You can find the official docs for the Click UI design system and component libr
 * [Contributing](#contributing)
   - [Component RFC](#component-rfc)
   - [Conventional commits](#conventional-commits)
+  - [AI Policy](#ai-policy)
 
 ## Requirements
 
@@ -649,3 +650,7 @@ docs: 📝 Documentation only changes
 refactor: 💡 A code change that neither fixes a bug or adds a feature
 style: 💄 Markup, white-space, formatting, missing semi-colons...
 ```
+
+### AI Policy
+
+You can use AI for Click UI development — see the [AI Policy](./AI_POLICY.md) for what we encourage and what's expected of contributors.

package/dist/cjs/click-ui.css

@@ -623,6 +623,60 @@
   color: var(--click-button-iconButton-color-disabled-text-default);
   cursor: not-allowed;
 }
+.tabs__trigger__JHqK4 {
+  padding: var(--click-tabs-space-y) var(--click-tabs-space-x);
+  border: none;
+  border-bottom: 2px solid var(--click-tabs-basic-color-stroke-default);
+  background-color: var(--click-tabs-basic-color-background-default);
+  color: var(--click-tabs-basic-color-text-default);
+  font: var(--click-tabs-typography-label-default);
+  cursor: pointer;
+  border-top-left-radius: var(--click-tabs-radii-all);
+  border-top-right-radius: var(--click-tabs-radii-all);
+}
+
+.tabs__trigger__JHqK4[data-state='active'] {
+  border-bottom: 2px solid var(--click-tabs-basic-color-stroke-active);
+  color: var(--click-tabs-basic-color-text-active);
+  font: var(--click-tabs-typography-label-active);
+}
+
+.tabs__trigger__JHqK4:hover {
+  border-bottom: 2px solid var(--click-tabs-basic-color-stroke-hover);
+  background-color: var(--click-tabs-basic-color-background-hover);
+  color: var(--click-tabs-basic-color-text-hover);
+  font: var(--click-tabs-typography-label-hover);
+}
+
+.tabs__trigger__JHqK4:hover[data-state='active'] {
+  border-bottom: 2px solid var(--click-tabs-basic-color-stroke-active);
+  font: var(--click-tabs-typography-label-active);
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.tabs__content__O9Cub {
+}
+
+.tabs__triggers-list__9Hz3q {
+  display: flex;
+  border-bottom: 1px solid var(--click-global-color-stroke-default);
+}
+
+.full-width-tabs__VaUSf {
+  width: 100%;
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.full-width-tabs__trigger__LA8iG {
+}
+
+.full-width-tabs__trigger_width_stretched__Q31k- {
+  flex: 1 1 auto;
+}
+
+.full-width-tabs__trigger_width_fixed__U9z-W {
+  width: var(--full-width-tabs-trigger-width);
+}
 .buttongroup__9IkOe {
   display: inline-flex;
   box-sizing: border-box;
@@ -676,6 +730,43 @@
   border-radius: var(--click-button-group-radii-button-borderless-all);
 }
 
+.button_icon-only_default__1hthE {
+  padding: var(--click-button-group-space-icon-default-y)
+    var(--click-button-group-space-icon-default-x);
+  border: 1px solid var(--click-button-group-color-stroke-default);
+}
+
+.button_icon-only_default__1hthE:hover {
+  border-color: var(--click-button-group-color-stroke-hover);
+}
+
+.button_icon-only_default__1hthE[aria-pressed='true'] {
+  border-color: var(--click-button-group-color-stroke-active);
+}
+
+.button_icon-only_default__1hthE:disabled {
+  border-color: var(--click-button-group-color-stroke-disabled);
+}
+
+.button_icon-only_default__1hthE[aria-pressed='true']:disabled {
+  border-color: var(--click-button-group-color-stroke-disabled-active);
+}
+
+.button_icon-only_borderless__04LpP {
+  padding: var(--click-button-group-space-icon-borderless-y)
+    var(--click-button-group-space-icon-borderless-x);
+}
+
+.button__icon__HLIjg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.button__icon_height_line__fURvB {
+  height: 1lh;
+}
+
 .button_fillwidth__lqIVG {
   flex: 1;
 }
@@ -2306,6 +2397,103 @@ div:active + .topbadge__E79OZ {
   cursor: not-allowed;
 }
 /* stylelint-enable no-descending-specificity */
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. opaqueBackground) */
+.trigger__bbzuV {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `width` is widely supported on evergreen browsers; the original
+     rule used the same value. */
+  width: fit-content;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+@keyframes overlay-show__YkYqH {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes content-show__V3LjD {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.overlay__6zjBZ {
+  position: fixed;
+  inset: 0;
+  background-color: var(--click-dialog-color-opaqueBackground-default);
+  animation: overlay-show__YkYqH 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.content__eXA1D {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 75%;
+  max-width: 670px;
+  max-height: 75%;
+  overflow: auto;
+  border: 1px solid var(--click-global-color-stroke-default);
+  border-radius: var(--click-dialog-radii-all);
+  background: var(--click-dialog-color-background-default);
+  outline: none;
+  box-shadow: var(--click-dialog-shadow-default);
+  transform: translate(-50%, -50%);
+  animation: content-show__V3LjD 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  padding-block: var(--click-dialog-space-y);
+  padding-inline: var(--click-dialog-space-x);
+}
+
+.content_reduce-padding__DYRs6 {
+  padding-block: var(--sizes-4);
+  padding-inline: var(--sizes-4);
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 640px) {
+  .content__eXA1D {
+    width: 100%;
+    max-height: 100%;
+    border-radius: 0;
+  }
+}
+
+.title-area__cF92Z {
+  display: flex;
+  min-height: var(--sizes-9); /* 32px */
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-area_only-close__PFiEJ {
+  justify-content: flex-end;
+}
+
+.title__glVA6 {
+  margin: 0;
+  padding: 0;
+  font: var(--click-dialog-typography-title-default);
+}
+
+.description__6Bsa9 {
+  margin: 0;
+  padding: 0;
+  color: var(--click-dialog-color-description-default);
+  font: var(--click-dialog-typography-description-default);
+}
 .progressbar__21KMf {
   display: flex;
   min-height: 2px;
@@ -2575,6 +2763,206 @@ div:active + .topbadge__E79OZ {
   width: var(--click-link-icon-size-md-width);
   height: var(--click-link-icon-size-md-height);
 }
+.multi-accordion__ntYTM {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+  gap: var(--multi-accordion-gap);
+}
+
+.multi-accordion_fill-width__Rnqso {
+  width: 100%;
+}
+
+.multi-accordion_gap_none__NrRxK {
+  --multi-accordion-gap: var(--click-container-gap-none);
+}
+
+.multi-accordion_gap_xxs__1FSFF {
+  --multi-accordion-gap: var(--click-container-gap-xxs);
+}
+
+.multi-accordion_gap_xs__oHQut {
+  --multi-accordion-gap: var(--click-container-gap-xs);
+}
+
+.multi-accordion_gap_sm__hxMme {
+  --multi-accordion-gap: var(--click-container-gap-sm);
+}
+
+.multi-accordion_gap_md__epg85 {
+  --multi-accordion-gap: var(--click-container-gap-md);
+}
+
+.multi-accordion_gap_lg__iYlYQ {
+  --multi-accordion-gap: var(--click-container-gap-lg);
+}
+
+.multi-accordion_gap_xl__1uarr {
+  --multi-accordion-gap: var(--click-container-gap-xl);
+}
+
+.multi-accordion_gap_xxl__m9X9V {
+  --multi-accordion-gap: var(--click-container-gap-xxl);
+}
+
+.multi-accordion__item__RHKu8 {
+  border: 1px solid var(--click-global-color-stroke-default);
+  border-radius: var(--border-radii-1);
+  background-color: var(--click-global-color-background-default);
+}
+
+.multi-accordion__item_no-border__ZtqMX {
+  border: none;
+}
+
+.multi-accordion__item_fill-width__zyq4f {
+  width: 100%;
+}
+
+.multi-accordion__trigger__etXVq {
+  display: flex;
+  width: 100%;
+  padding: var(--multi-accordion-trigger-padding);
+  align-items: center;
+  gap: var(--multi-accordion-trigger-gap);
+  border: none;
+  border-radius: inherit;
+  background-color: transparent;
+  color: var(--multi-accordion-label-default);
+  font: var(--multi-accordion-font-default);
+}
+
+.multi-accordion__trigger__etXVq:active {
+  color: var(--multi-accordion-label-active);
+  font: var(--multi-accordion-font-active);
+}
+
+.multi-accordion__trigger__etXVq:hover {
+  background: var(--click-global-color-stroke-default);
+  color: var(--multi-accordion-label-hover);
+  font: var(--multi-accordion-font-hover);
+  cursor: pointer;
+}
+
+.multi-accordion__trigger__etXVq [data-icon='accordion-status'] {
+  color: var(--global-color-stroke-intense);
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] [data-icon='accordion-status'] {
+  color: var(--global-color-accent-default);
+}
+
+.multi-accordion__trigger_size_none__o4eWF {
+  --multi-accordion-trigger-padding: var(--click-container-space-none);
+  --multi-accordion-trigger-gap: var(--click-accordion-sm-space-gap);
+}
+
+.multi-accordion__trigger_size_sm__80VXp {
+  --multi-accordion-trigger-padding: var(--click-container-space-sm);
+  --multi-accordion-trigger-gap: var(--click-accordion-sm-space-gap);
+}
+
+.multi-accordion__trigger_size_md__uAE8q {
+  --multi-accordion-trigger-padding: var(--click-container-space-md);
+  --multi-accordion-trigger-gap: var(--click-accordion-md-space-gap);
+}
+
+.multi-accordion__trigger_size_lg__VHN7C {
+  --multi-accordion-trigger-padding: var(--click-container-space-lg);
+  --multi-accordion-trigger-gap: var(--click-accordion-lg-space-gap);
+}
+
+.multi-accordion__trigger_font_sm__xnOLy {
+  --multi-accordion-font-default: var(--click-accordion-sm-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-sm-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-sm-typography-label-active);
+}
+
+.multi-accordion__trigger_font_md__hTIA8 {
+  --multi-accordion-font-default: var(--click-accordion-md-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-md-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-md-typography-label-active);
+}
+
+.multi-accordion__trigger_font_lg__yMSpQ {
+  --multi-accordion-font-default: var(--click-accordion-lg-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-lg-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-lg-typography-label-active);
+}
+
+.multi-accordion__trigger_color_default__X7f4v {
+  --multi-accordion-label-default: var(--click-accordion-color-default-label-default);
+  --multi-accordion-label-hover: var(--click-accordion-color-default-label-hover);
+  --multi-accordion-label-active: var(--click-accordion-color-default-label-active);
+}
+
+.multi-accordion__trigger_color_link__hXDgW {
+  --multi-accordion-label-default: var(--click-accordion-color-link-label-default);
+  --multi-accordion-label-hover: var(--click-accordion-color-link-label-hover);
+  --multi-accordion-label-active: var(--click-accordion-color-link-label-active);
+}
+
+.multi-accordion__icon-wrapper__uhWrs {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 200ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] .multi-accordion__icon-wrapper__uhWrs {
+  transform: rotate(90deg);
+}
+
+.multi-accordion__icons-wrapper__67uu- {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.multi-accordion__content__Gz0po {
+  padding: var(--multi-accordion-content-padding);
+  padding-top: 0;
+}
+
+.multi-accordion__content_padding_none__GgbED {
+  --multi-accordion-content-padding: var(--click-container-space-none);
+}
+
+.multi-accordion__content_padding_sm__nmI7q {
+  --multi-accordion-content-padding: var(--click-container-space-sm);
+}
+
+.multi-accordion__content_padding_md__XD2Ki {
+  --multi-accordion-content-padding: var(--click-container-space-md);
+}
+
+.multi-accordion__content_padding_lg__W-njL {
+  --multi-accordion-content-padding: var(--click-container-space-lg);
+}
+
+.multi-accordion__title__kLWyH {
+  overflow: hidden;
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.multi-accordion__status-icon__MNVgx {
+}
+
+.multi-accordion__status-icon_completed__z5-XJ svg path {
+  fill: var(--global-color-accent-default) !important;
+  stroke: var(--global-color-background-default) !important;
+}
+
+.multi-accordion__status-icon_completed__z5-XJ svg path:first-of-type {
+  stroke: var(--global-color-accent-default) !important;
+}
 .collapsible__8jmKP {
   width: 100%;
 }
@@ -3332,6 +3720,11 @@ div:active + .topbadge__E79OZ {
   --click-button-group-space-button-default-x: 0.75rem;
   --click-button-group-space-button-borderless-y: 5.5px;
   --click-button-group-space-button-borderless-x: 1rem;
+  --click-button-group-space-icon-default-y: 3px;
+  --click-button-group-space-icon-default-x: 1rem;
+  --click-button-group-space-icon-borderless-y: 5.5px;
+  --click-button-group-space-icon-borderless-x: 1rem;
+  --click-button-group-icon-size-all: 1rem;
   --click-button-group-color-background-default: rgba(0, 0, 0, 0);
   --click-button-group-color-background-hover: #f6f7fa;
   --click-button-group-color-background-active: lch(95.274 1.5364 271.98);
@@ -5129,6 +5522,11 @@ div:active + .topbadge__E79OZ {
   --click-button-group-space-button-default-x: 0.75rem;
   --click-button-group-space-button-borderless-y: 5.5px;
   --click-button-group-space-button-borderless-x: 1rem;
+  --click-button-group-space-icon-default-y: 3px;
+  --click-button-group-space-icon-default-x: 1rem;
+  --click-button-group-space-icon-borderless-y: 5.5px;
+  --click-button-group-space-icon-borderless-x: 1rem;
+  --click-button-group-icon-size-all: 1rem;
   --click-button-group-color-background-default: rgba(0, 0, 0, 0);
   --click-button-group-color-background-hover: #282828;
   --click-button-group-color-background-active: #414141;

package/dist/cjs/components/AutoComplete/index.cjs

@@ -10,6 +10,7 @@ const GenericMenu = require('../GenericMenu/index.cjs');
 const IconWrapper = require('../IconWrapper/index.cjs');
 const getTextFromNodes = require('../../lib/getTextFromNodes.cjs');
 const mergeRefs = require('../../utils/mergeRefs.cjs');
+const PortalContext = require('../../providers/PortalContext.cjs');
 const useOption = require('./useOption.cjs');
 const OptionContext = require('./OptionContext.cjs');
 const SearchField = require('../SearchField/index.cjs');
@@ -114,12 +115,14 @@ const AutoComplete = ({
   disabled,
   value = "",
   placeholder = "Search",
+  container,
   ...props
 }) => {
   const defaultId = react.useId();
   const [search, setSearch] = react.useState("");
   const [open, setOpen] = react.useState(false);
   const inputRef = react.useRef(null);
+  const portalContainer = PortalContext.useResolvedPortalContainer(container);
   const [highlighted, setHighlighted] = react.useState();
   const visibleList = react.useRef([]);
   const navigatable = react.useRef([]);
@@ -287,7 +290,7 @@ const AutoComplete = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(SelectPopoverRoot, { open, onOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Trigger, { asChild: true, disabled, "data-testid": "autocomplete-trigger", children: /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: onTriggerClick, children: /* @__PURE__ */ jsxRuntime.jsx(SearchField.SearchField, { ref: inputRef, value: search, onChange: onUpdateSearch, onKeyDown, disabled, placeholder, ...props }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { sideOffset: 5, onFocus, onCloseAutoFocus: () => {
+    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { sideOffset: 5, onFocus, onCloseAutoFocus: () => {
       onUpdateSearch("");
       inputRef.current?.focus();
     }, onOpenAutoFocus: (e) => {