@clickhouse/click-ui 0.0.214 → 0.0.216

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/click-ui.bundled.es.js +7 -4
  2. package/dist/click-ui.bundled.umd.js +7 -4
  3. package/dist/click-ui.es.js +7 -4
  4. package/dist/click-ui.umd.js +7 -4
  5. package/dist/components/Select/selectOptions.d.ts +1 -0
  6. package/package.json +1 -1
package/dist/click-ui.bundled.es.js CHANGED
@@ -9068,7 +9068,7 @@ const IconWrapper$3 = ({
9068
9068
  ...props
9069
9069
  }) => {
9070
9070
  const TextWrapper2 = ellipsisContent ? EllipsisContent : "div";
9071
- return /* @__PURE__ */ jsxs(Container, { orientation: "horizontal", gap, ...props, children: [
9071
+ return /* @__PURE__ */ jsxs(Container, { orientation: "horizontal", gap, overflow: "hidden", ...props, children: [
9072
9072
  icon && iconDir === "start" && /* @__PURE__ */ jsx(SvgImage, { name: icon, size: size2, width, height }),
9073
9073
  /* @__PURE__ */ jsx(TextWrapper2, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-icon-wrapper-text`, children }),
9074
9074
  icon && iconDir === "end" && /* @__PURE__ */ jsx(SvgImage, { name: icon, size: size2, width, height })
@@ -39527,7 +39527,7 @@ const MultiSelectCheckboxItem = forwardRef(({
39527
39527
  }
39528
39528
  const isChecked = selectedValues.includes(value);
39529
39529
  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
39530
- /* @__PURE__ */ jsx(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: /* @__PURE__ */ jsxs(Container, { orientation: "horizontal", gap: "xs", children: [
39530
+ /* @__PURE__ */ jsx(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: /* @__PURE__ */ jsxs(Container, { orientation: "horizontal", gap: "xs", overflow: "hidden", children: [
39531
39531
  /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, variant: variant ?? "default" }),
39532
39532
  /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir, gap: "xxs", children: label ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
39533
39533
  label,
@@ -51911,8 +51911,8 @@ const MultiAccordionItem = ({
51911
51911
  /* @__PURE__ */ jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsx(SvgImage, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
51912
51912
  icon ? /* @__PURE__ */ jsx(SvgImage, { name: icon, size: iconSize ?? customSize }) : null
51913
51913
  ] }),
51914
- /* @__PURE__ */ jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", children: [
51915
- /* @__PURE__ */ jsx(Text, { component: "span", size: customSize, fillWidth, children: title }),
51914
+ /* @__PURE__ */ jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", overflow: "hidden", children: [
51915
+ /* @__PURE__ */ jsx(AccordionItemTitle, { component: "span", size: customSize, fillWidth, children: title }),
51916
51916
  showCheck && /* @__PURE__ */ jsx(CustomIcon, { name: isCompleted ? "check-in-circle" : "circle", $isCompleted: isCompleted, size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
51917
51917
  ] })
51918
51918
  ] }),
@@ -52003,6 +52003,9 @@ const AccordionContent = pt($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfi
52003
52003
  theme: theme2,
52004
52004
  $padding
52005
52005
  }) => theme2.click.container.space[$padding]);
52006
+ const AccordionItemTitle = pt(Text).withConfig({
52007
+ componentId: "sc-1lb3204-7"
52008
+ })(["overflow:hidden;"]);
52006
52009
  export {
52007
52010
  AccordionToExport as Accordion,
52008
52011
  Alert,
package/dist/click-ui.bundled.umd.js CHANGED
@@ -9084,7 +9084,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
9084
9084
  ...props
9085
9085
  }) => {
9086
9086
  const TextWrapper2 = ellipsisContent ? EllipsisContent : "div";
9087
- return /* @__PURE__ */ jsxRuntime.jsxs(Container, { orientation: "horizontal", gap, ...props, children: [
9087
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container, { orientation: "horizontal", gap, overflow: "hidden", ...props, children: [
9088
9088
  icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: size2, width, height }),
9089
9089
  /* @__PURE__ */ jsxRuntime.jsx(TextWrapper2, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-icon-wrapper-text`, children }),
9090
9090
  icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: size2, width, height })
@@ -39543,7 +39543,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
39543
39543
  }
39544
39544
  const isChecked = selectedValues.includes(value);
39545
39545
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
39546
- /* @__PURE__ */ jsxRuntime.jsx(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { orientation: "horizontal", gap: "xs", children: [
39546
+ /* @__PURE__ */ jsxRuntime.jsx(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { orientation: "horizontal", gap: "xs", overflow: "hidden", children: [
39547
39547
  /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, variant: variant ?? "default" }),
39548
39548
  /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, gap: "xxs", children: label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
39549
39549
  label,
@@ -51927,8 +51927,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
51927
51927
  /* @__PURE__ */ jsxRuntime.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
51928
51928
  icon ? /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: iconSize ?? customSize }) : null
51929
51929
  ] }),
51930
- /* @__PURE__ */ jsxRuntime.jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", children: [
51931
- /* @__PURE__ */ jsxRuntime.jsx(Text, { component: "span", size: customSize, fillWidth, children: title }),
51930
+ /* @__PURE__ */ jsxRuntime.jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", overflow: "hidden", children: [
51931
+ /* @__PURE__ */ jsxRuntime.jsx(AccordionItemTitle, { component: "span", size: customSize, fillWidth, children: title }),
51932
51932
  showCheck && /* @__PURE__ */ jsxRuntime.jsx(CustomIcon, { name: isCompleted ? "check-in-circle" : "circle", $isCompleted: isCompleted, size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
51933
51933
  ] })
51934
51934
  ] }),
@@ -52019,6 +52019,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
52019
52019
  theme: theme2,
52020
52020
  $padding
52021
52021
  }) => theme2.click.container.space[$padding]);
52022
+ const AccordionItemTitle = pt(Text).withConfig({
52023
+ componentId: "sc-1lb3204-7"
52024
+ })(["overflow:hidden;"]);
52022
52025
  exports2.Accordion = AccordionToExport;
52023
52026
  exports2.Alert = Alert;
52024
52027
  exports2.AutoComplete = AutoComplete;
package/dist/click-ui.es.js CHANGED
@@ -7872,7 +7872,7 @@ const IconWrapper$3 = ({
7872
7872
  ...props
7873
7873
  }) => {
7874
7874
  const TextWrapper2 = ellipsisContent ? EllipsisContent : "div";
7875
- return /* @__PURE__ */ jsxs(Container, { orientation: "horizontal", gap, ...props, children: [
7875
+ return /* @__PURE__ */ jsxs(Container, { orientation: "horizontal", gap, overflow: "hidden", ...props, children: [
7876
7876
  icon && iconDir === "start" && /* @__PURE__ */ jsx(SvgImage, { name: icon, size: size2, width, height }),
7877
7877
  /* @__PURE__ */ jsx(TextWrapper2, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-icon-wrapper-text`, children }),
7878
7878
  icon && iconDir === "end" && /* @__PURE__ */ jsx(SvgImage, { name: icon, size: size2, width, height })
@@ -38359,7 +38359,7 @@ const MultiSelectCheckboxItem = forwardRef(({
38359
38359
  }
38360
38360
  const isChecked = selectedValues.includes(value);
38361
38361
  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
38362
- /* @__PURE__ */ jsx(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: /* @__PURE__ */ jsxs(Container, { orientation: "horizontal", gap: "xs", children: [
38362
+ /* @__PURE__ */ jsx(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: /* @__PURE__ */ jsxs(Container, { orientation: "horizontal", gap: "xs", overflow: "hidden", children: [
38363
38363
  /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, variant: variant ?? "default" }),
38364
38364
  /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir, gap: "xxs", children: label ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
38365
38365
  label,
@@ -50743,8 +50743,8 @@ const MultiAccordionItem = ({
50743
50743
  /* @__PURE__ */ jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsx(SvgImage, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
50744
50744
  icon ? /* @__PURE__ */ jsx(SvgImage, { name: icon, size: iconSize ?? customSize }) : null
50745
50745
  ] }),
50746
- /* @__PURE__ */ jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", children: [
50747
- /* @__PURE__ */ jsx(Text, { component: "span", size: customSize, fillWidth, children: title }),
50746
+ /* @__PURE__ */ jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", overflow: "hidden", children: [
50747
+ /* @__PURE__ */ jsx(AccordionItemTitle, { component: "span", size: customSize, fillWidth, children: title }),
50748
50748
  showCheck && /* @__PURE__ */ jsx(CustomIcon, { name: isCompleted ? "check-in-circle" : "circle", $isCompleted: isCompleted, size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
50749
50749
  ] })
50750
50750
  ] }),
@@ -50835,6 +50835,9 @@ const AccordionContent = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withC
50835
50835
  theme: theme2,
50836
50836
  $padding
50837
50837
  }) => theme2.click.container.space[$padding]);
50838
+ const AccordionItemTitle = styled(Text).withConfig({
50839
+ componentId: "sc-1lb3204-7"
50840
+ })(["overflow:hidden;"]);
50838
50841
  export {
50839
50842
  AccordionToExport as Accordion,
50840
50843
  Alert,
package/dist/click-ui.umd.js CHANGED
@@ -7887,7 +7887,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
7887
7887
  ...props
7888
7888
  }) => {
7889
7889
  const TextWrapper2 = ellipsisContent ? EllipsisContent : "div";
7890
- return /* @__PURE__ */ jsxRuntime.jsxs(Container, { orientation: "horizontal", gap, ...props, children: [
7890
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container, { orientation: "horizontal", gap, overflow: "hidden", ...props, children: [
7891
7891
  icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: size2, width, height }),
7892
7892
  /* @__PURE__ */ jsxRuntime.jsx(TextWrapper2, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-icon-wrapper-text`, children }),
7893
7893
  icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: size2, width, height })
@@ -38374,7 +38374,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
38374
38374
  }
38375
38375
  const isChecked = selectedValues.includes(value);
38376
38376
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
38377
- /* @__PURE__ */ jsxRuntime.jsx(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { orientation: "horizontal", gap: "xs", children: [
38377
+ /* @__PURE__ */ jsxRuntime.jsx(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { orientation: "horizontal", gap: "xs", overflow: "hidden", children: [
38378
38378
  /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, variant: variant ?? "default" }),
38379
38379
  /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, gap: "xxs", children: label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
38380
38380
  label,
@@ -50758,8 +50758,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
50758
50758
  /* @__PURE__ */ jsxRuntime.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
50759
50759
  icon ? /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: iconSize ?? customSize }) : null
50760
50760
  ] }),
50761
- /* @__PURE__ */ jsxRuntime.jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", children: [
50762
- /* @__PURE__ */ jsxRuntime.jsx(Text, { component: "span", size: customSize, fillWidth, children: title }),
50761
+ /* @__PURE__ */ jsxRuntime.jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", overflow: "hidden", children: [
50762
+ /* @__PURE__ */ jsxRuntime.jsx(AccordionItemTitle, { component: "span", size: customSize, fillWidth, children: title }),
50763
50763
  showCheck && /* @__PURE__ */ jsxRuntime.jsx(CustomIcon, { name: isCompleted ? "check-in-circle" : "circle", $isCompleted: isCompleted, size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
50764
50764
  ] })
50765
50765
  ] }),
@@ -50850,6 +50850,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
50850
50850
  theme: theme2,
50851
50851
  $padding
50852
50852
  }) => theme2.click.container.space[$padding]);
50853
+ const AccordionItemTitle = styled.styled(Text).withConfig({
50854
+ componentId: "sc-1lb3204-7"
50855
+ })(["overflow:hidden;"]);
50853
50856
  exports2.Accordion = AccordionToExport;
50854
50857
  exports2.Alert = Alert;
50855
50858
  exports2.AutoComplete = AutoComplete;
package/dist/components/Select/selectOptions.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import { SelectOptionListItem } from './common/types';
2
2
 
3
3
  export declare const selectOptions: Array<SelectOptionListItem>;
4
+ export declare const selectOptionsLong: Array<SelectOptionListItem>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clickhouse/click-ui",
3
- "version": "0.0.214",
3
+ "version": "0.0.216",
4
4
  "description": "Official ClickHouse design system react library",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",