@clickhouse/click-ui 0.0.124 → 0.0.125

package/dist/click-ui.es.js

@@ -32164,8 +32164,23 @@ const InputElement = styled.input.withConfig({
       color: ${theme2.click.field.color.placeholder.default};
     }
   `);
-const TextAreaElement = styled.textarea.withConfig({
+const NumberInputElement = styled(InputElement).withConfig({
   componentId: "sc-1pvd2nj-2"
+})(["", ""], ({
+  $hideControls
+}) => `
+    ${$hideControls ? `
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    -moz-appearance: textfield;
+    ` : ""}
+  `);
+const TextAreaElement = styled.textarea.withConfig({
+  componentId: "sc-1pvd2nj-3"
 })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
   theme: theme2
 }) => `
@@ -32176,10 +32191,10 @@ const TextAreaElement = styled.textarea.withConfig({
     }
   `);
 styled(InputWrapper).withConfig({
-  componentId: "sc-1pvd2nj-3"
+  componentId: "sc-1pvd2nj-4"
 })(["resize:vertical;overflow:auto;color:red;"]);
 const IconButton = styled.button.withConfig({
-  componentId: "sc-1pvd2nj-4"
+  componentId: "sc-1pvd2nj-5"
 })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
   theme: theme2,
   $show
@@ -32188,7 +32203,7 @@ const IconButton = styled.button.withConfig({
       visibility: ${$show ? "visible" : "hidden"};
   `);
 styled.svg.withConfig({
-  componentId: "sc-1pvd2nj-5"
+  componentId: "sc-1pvd2nj-6"
 })(["", ""], ({
   theme: theme2
 }) => `
@@ -32208,6 +32223,7 @@ const NumberField = forwardRef(({
   onChange: onChangeProp,
   orientation,
   dir,
+  hideControls,
   ...props
 }, ref) => {
   const defaultId = useId();
@@ -32215,7 +32231,7 @@ const NumberField = forwardRef(({
     onChangeProp(e.target.value, e);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(InputElement, { ref, type: "number", id: id ?? defaultId, disabled, onChange, ...props }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(NumberInputElement, { ref, type: "number", id: id ?? defaultId, disabled, onChange, $hideControls: hideControls, ...props }),
     loading && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", size: "sm" })
   ] });
 });
@@ -32366,7 +32382,7 @@ const Pagination = ({
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap: "xxs", fillWidth: false, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled: currentPage === 1, onClick: onPrevClick, "data-testid": "prev-btn" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, onBlur: onPageNumberBlur }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur }) }),
       !!totalPages && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
         "of ",
         formatNumber(totalPages)

package/dist/click-ui.umd.js

@@ -32181,8 +32181,23 @@ var __publicField = (obj, key, value) => {
       color: ${theme2.click.field.color.placeholder.default};
     }
   `);
-  const TextAreaElement = styled.textarea.withConfig({
+  const NumberInputElement = styled(InputElement).withConfig({
     componentId: "sc-1pvd2nj-2"
+  })(["", ""], ({
+    $hideControls
+  }) => `
+    ${$hideControls ? `
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    -moz-appearance: textfield;
+    ` : ""}
+  `);
+  const TextAreaElement = styled.textarea.withConfig({
+    componentId: "sc-1pvd2nj-3"
   })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
     theme: theme2
   }) => `
@@ -32193,10 +32208,10 @@ var __publicField = (obj, key, value) => {
     }
   `);
   styled(InputWrapper).withConfig({
-    componentId: "sc-1pvd2nj-3"
+    componentId: "sc-1pvd2nj-4"
   })(["resize:vertical;overflow:auto;color:red;"]);
   const IconButton = styled.button.withConfig({
-    componentId: "sc-1pvd2nj-4"
+    componentId: "sc-1pvd2nj-5"
   })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
     theme: theme2,
     $show
@@ -32205,7 +32220,7 @@ var __publicField = (obj, key, value) => {
       visibility: ${$show ? "visible" : "hidden"};
   `);
   styled.svg.withConfig({
-    componentId: "sc-1pvd2nj-5"
+    componentId: "sc-1pvd2nj-6"
   })(["", ""], ({
     theme: theme2
   }) => `
@@ -32225,6 +32240,7 @@ var __publicField = (obj, key, value) => {
     onChange: onChangeProp,
     orientation,
     dir,
+    hideControls,
     ...props
   }, ref) => {
     const defaultId = React.useId();
@@ -32232,7 +32248,7 @@ var __publicField = (obj, key, value) => {
       onChangeProp(e.target.value, e);
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(InputElement, { ref, type: "number", id: id ?? defaultId, disabled, onChange, ...props }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(NumberInputElement, { ref, type: "number", id: id ?? defaultId, disabled, onChange, $hideControls: hideControls, ...props }),
       loading && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", size: "sm" })
     ] });
   });
@@ -32383,7 +32399,7 @@ var __publicField = (obj, key, value) => {
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap: "xxs", fillWidth: false, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled: currentPage === 1, onClick: onPrevClick, "data-testid": "prev-btn" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, onBlur: onPageNumberBlur }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur }) }),
         !!totalPages && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
           "of ",
           formatNumber(totalPages)

package/dist/components/Input/InputWrapper.d.ts

@@ -11,6 +11,9 @@ export interface WrapperProps {
 }
 export declare const InputWrapper: ({ id, label, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element;
 export declare const InputElement: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const NumberInputElement: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
+    $hideControls?: boolean | undefined;
+}, never>;
 export declare const TextAreaElement: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, {}, never>;
 export declare const TextAreaWrapper: import("styled-components").StyledComponent<({ id, label, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const IconButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {

package/dist/components/Input/NumberField.d.ts

@@ -6,5 +6,6 @@ export interface NumberFieldProps extends Omit<WrapperProps, "id" | "children">,
     onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;
     orientation?: "vertical" | "horizontal";
     dir?: "start" | "end";
+    hideControls?: boolean;
 }
 export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.124",
+  "version": "0.0.125",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",