@sikka/hawa 0.16.10-next → 0.16.12-next

package/dist/index.d.mts

@@ -269,32 +269,31 @@ type ColorPickerTypes = {
 };
 declare const ColorPicker: FC<ColorPickerTypes>;
 
-type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
-    isLoading?: boolean;
-    containerClassName?: string;
-    margin?: "none" | "normal" | "large";
-    width?: "small" | "normal" | "full" | "auto";
+declare const Input: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & {
+    isLoading?: boolean | undefined;
+    containerClassName?: string | undefined;
+    margin?: "none" | "normal" | "large" | undefined;
+    width?: "small" | "full" | "normal" | "auto" | undefined;
     /** The label of the input field   */
     label?: any;
-    hint?: string;
-    hintSide?: PositionType;
+    hint?: string | undefined;
+    hintSide?: PositionType | undefined;
     /** If true, it will show a red asterisk next to the label*/
-    isRequired?: boolean;
+    isRequired?: boolean | undefined;
     /** Disable/Enable multiple line text input field   */
-    multiline?: boolean;
+    multiline?: boolean | undefined;
     /** The small red text under the input field to show validation or a hint.   */
     helperText?: any;
-    forceHideHelperText?: boolean;
-    inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
+    forceHideHelperText?: boolean | undefined;
+    inputProps?: React__default.InputHTMLAttributes<HTMLInputElement> | undefined;
     /** The icon inside the input field */
     icon?: any;
     /** Boolean to enable/disable editing the input field and using it as a text field   */
-    preview?: boolean;
+    preview?: boolean | undefined;
     iconInside?: React__default.ReactNode;
     endIcon?: React__default.ReactNode;
     startIcon?: React__default.ReactNode;
-};
-declare const Input: FC<TextFieldTypes>;
+} & React__default.RefAttributes<HTMLInputElement>>;
 
 type ComboboxTypes<T> = {
     labelKey?: keyof T;

package/dist/index.d.ts

@@ -269,32 +269,31 @@ type ColorPickerTypes = {
 };
 declare const ColorPicker: FC<ColorPickerTypes>;
 
-type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
-    isLoading?: boolean;
-    containerClassName?: string;
-    margin?: "none" | "normal" | "large";
-    width?: "small" | "normal" | "full" | "auto";
+declare const Input: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & {
+    isLoading?: boolean | undefined;
+    containerClassName?: string | undefined;
+    margin?: "none" | "normal" | "large" | undefined;
+    width?: "small" | "full" | "normal" | "auto" | undefined;
     /** The label of the input field   */
     label?: any;
-    hint?: string;
-    hintSide?: PositionType;
+    hint?: string | undefined;
+    hintSide?: PositionType | undefined;
     /** If true, it will show a red asterisk next to the label*/
-    isRequired?: boolean;
+    isRequired?: boolean | undefined;
     /** Disable/Enable multiple line text input field   */
-    multiline?: boolean;
+    multiline?: boolean | undefined;
     /** The small red text under the input field to show validation or a hint.   */
     helperText?: any;
-    forceHideHelperText?: boolean;
-    inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
+    forceHideHelperText?: boolean | undefined;
+    inputProps?: React__default.InputHTMLAttributes<HTMLInputElement> | undefined;
     /** The icon inside the input field */
     icon?: any;
     /** Boolean to enable/disable editing the input field and using it as a text field   */
-    preview?: boolean;
+    preview?: boolean | undefined;
     iconInside?: React__default.ReactNode;
     endIcon?: React__default.ReactNode;
     startIcon?: React__default.ReactNode;
-};
-declare const Input: FC<TextFieldTypes>;
+} & React__default.RefAttributes<HTMLInputElement>>;
 
 type ComboboxTypes<T> = {
     labelKey?: keyof T;

package/dist/index.js

@@ -4066,7 +4066,7 @@ var ColorPicker = function(_param) {
 };
 // components/elements/Input.tsx
 var import_react15 = __toESM(require("react"));
-var Input = function(_param) {
+var Input = (0, import_react15.forwardRef)(function(_param, ref) {
     var _param_margin = _param.margin, margin = _param_margin === void 0 ? "none" : _param_margin, _param_width = _param.width, width = _param_width === void 0 ? "full" : _param_width, _param_preview = _param.preview, preview = _param_preview === void 0 ? false : _param_preview, _param_forceHideHelperText = _param.forceHideHelperText, forceHideHelperText = _param_forceHideHelperText === void 0 ? false : _param_forceHideHelperText, props = _object_without_properties(_param, [
         "margin",
         "width",
@@ -4123,7 +4123,7 @@ var Input = function(_param) {
     })), !forceHideHelperText && /* @__PURE__ */ import_react15.default.createElement("p", {
         className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText))));
-};
+});
 // components/elements/Combobox.tsx
 var React28 = __toESM(require("react"));
 var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"));
@@ -5678,13 +5678,16 @@ var TableHeader = React44.forwardRef(function(_param, ref) /* @__PURE__ */ {
 });
 TableHeader.displayName = "TableHeader";
 var TableHead = React44.forwardRef(function(_param, ref) /* @__PURE__ */ {
-    var className = _param.className, props = _object_without_properties(_param, [
-        "className"
+    var className = _param.className, condensed = _param.condensed, clickable = _param.clickable, dir = _param.dir, props = _object_without_properties(_param, [
+        "className",
+        "condensed",
+        "clickable",
+        "dir"
     ]);
     return React44.createElement("th", _object_spread({
         ref: ref,
-        className: cn("hawa-bg-muted/60 dark:hawa-bg-muted/40 hawa-text-start hawa-align-middle hawa-font-medium hawa-text-muted-foreground [&:has([role=checkbox])]:hawa-pr-0 [&:not(:last-child)&:not(:first-child)]:hawa-border-x", props.dir === "rtl" ? "[&:not(:last-child)]:hawa-border-l" : "[&:not(:last-child)]:hawa-border-r", props.condensed ? "hawa-h-8" : "hawa-h-12", props.clickable ? "hawa-px-1" : "hawa-px-4", //First and last columns
-        props.clickable ? " [&:not(:last-child)&:not(:first-child)]:hawa-p-1" : "hawa-px-4", //Columns in between
+        className: cn("hawa-bg-muted/60 dark:hawa-bg-muted/40 hawa-text-start hawa-align-middle hawa-font-medium hawa-text-muted-foreground [&:has([role=checkbox])]:hawa-pr-0 [&:not(:last-child)&:not(:first-child)]:hawa-border-x", dir === "rtl" ? "[&:not(:last-child)]:hawa-border-l" : "[&:not(:last-child)]:hawa-border-r", condensed ? "hawa-h-8" : "hawa-h-12", clickable ? "hawa-px-1" : "hawa-px-4", //First and last columns
+        clickable ? " [&:not(:last-child)&:not(:first-child)]:hawa-p-1" : "hawa-px-4", //Columns in between
         className)
     }, props));
 });
@@ -5763,12 +5766,12 @@ var DataTable = function(_param) {
         "enableGoTo"
     ]);
     var _props_texts, _props_itemsPerPage, _props_texts1, _props_texts2, _table_getRowModel_rows, _props_texts3, _props_texts4, _props_texts5, _props_texts6, _props_texts7, _props_texts8;
-    var _React45_useState = _sliced_to_array(React45.useState([
+    var _React45_useState = _sliced_to_array(React45.useState(props.defaultSort ? [
         {
-            id: props.defaultSort || "",
+            id: props.defaultSort,
             desc: false
         }
-    ]), 2), sorting = _React45_useState[0], setSorting = _React45_useState[1];
+    ] : []), 2), sorting = _React45_useState[0], setSorting = _React45_useState[1];
     var _React45_useState1 = _sliced_to_array(React45.useState([]), 2), columnFilters = _React45_useState1[0], setColumnFilters = _React45_useState1[1];
     var _React45_useState2 = _sliced_to_array(React45.useState(""), 2), globalFilter = _React45_useState2[0], setGlobalFilter = _React45_useState2[1];
     var _React45_useState3 = _sliced_to_array(React45.useState({}), 2), expanded = _React45_useState3[0], setExpanded = _React45_useState3[1];

package/dist/index.mjs

@@ -3442,90 +3442,92 @@ var ColorPicker = ({
 };
 
 // components/elements/Input.tsx
-import React24 from "react";
-var Input = ({
-  margin = "none",
-  width = "full",
-  preview = false,
-  forceHideHelperText = false,
-  ...props
-}) => {
-  let marginStyles = {
-    none: "hawa-mb-0",
-    normal: "hawa-mb-3",
-    large: "hawa-mb-5"
-  };
-  let widthStyles = {
-    small: "hawa-w-full hawa-max-w-2xs",
-    normal: "hawa-w-1/2",
-    full: "hawa-w-full",
-    auto: ""
-  };
-  let defaultStyle = "hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0";
-  let defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm ";
-  return /* @__PURE__ */ React24.createElement(
-    "div",
-    {
-      className: cn(
-        defaultStyle,
-        marginStyles[margin],
-        widthStyles[width],
-        props.containerClassName,
-        "hawa-w-full hawa-gap-2"
-      )
-    },
-    props.label && /* @__PURE__ */ React24.createElement(
-      Label2,
-      {
-        htmlFor: props.id,
-        hint: props.hint,
-        hintSide: props.hintSide,
-        required: props.isRequired
-      },
-      props.label
-    ),
-    props.isLoading ? /* @__PURE__ */ React24.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React24.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
+import React24, { forwardRef as forwardRef9 } from "react";
+var Input = forwardRef9(
+  ({
+    margin = "none",
+    width = "full",
+    preview = false,
+    forceHideHelperText = false,
+    ...props
+  }, ref) => {
+    let marginStyles = {
+      none: "hawa-mb-0",
+      normal: "hawa-mb-3",
+      large: "hawa-mb-5"
+    };
+    let widthStyles = {
+      small: "hawa-w-full hawa-max-w-2xs",
+      normal: "hawa-w-1/2",
+      full: "hawa-w-full",
+      auto: ""
+    };
+    let defaultStyle = "hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0";
+    let defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm ";
+    return /* @__PURE__ */ React24.createElement(
       "div",
       {
         className: cn(
-          "hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800",
-          preview ? "hawa-opacity-100" : "hawa-opacity-0"
-        )
-      }
-    ), /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", { className: cn("hawa-relative") }, props.startIcon && /* @__PURE__ */ React24.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ React24.createElement("div", { className: "hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.endIcon), /* @__PURE__ */ React24.createElement(
-      "input",
-      {
-        required: true,
-        dir: props.dir,
-        type: props.type,
-        value: props.value,
-        onChange: props.onChange,
-        autoComplete: props.autoComplete,
-        defaultValue: props.defaultValue,
-        placeholder: props.placeholder,
-        disabled: preview,
-        style: { height: 40 },
-        className: cn(
-          defaultInputStyle,
-          " dark:hawa-text-white focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0",
-          props.endIcon && "hawa-pe-9",
-          props.startIcon && "hawa-ps-9",
-          preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0",
-          props.inputProps?.className
-        )
-      }
-    )), !forceHideHelperText && /* @__PURE__ */ React24.createElement(
-      "p",
-      {
-        className: cn(
-          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
-          props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
+          defaultStyle,
+          marginStyles[margin],
+          widthStyles[width],
+          props.containerClassName,
+          "hawa-w-full hawa-gap-2"
         )
       },
-      props.helperText
-    )))
-  );
-};
+      props.label && /* @__PURE__ */ React24.createElement(
+        Label2,
+        {
+          htmlFor: props.id,
+          hint: props.hint,
+          hintSide: props.hintSide,
+          required: props.isRequired
+        },
+        props.label
+      ),
+      props.isLoading ? /* @__PURE__ */ React24.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React24.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
+        "div",
+        {
+          className: cn(
+            "hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800",
+            preview ? "hawa-opacity-100" : "hawa-opacity-0"
+          )
+        }
+      ), /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", { className: cn("hawa-relative") }, props.startIcon && /* @__PURE__ */ React24.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ React24.createElement("div", { className: "hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.endIcon), /* @__PURE__ */ React24.createElement(
+        "input",
+        {
+          required: true,
+          dir: props.dir,
+          type: props.type,
+          value: props.value,
+          onChange: props.onChange,
+          autoComplete: props.autoComplete,
+          defaultValue: props.defaultValue,
+          placeholder: props.placeholder,
+          disabled: preview,
+          style: { height: 40 },
+          className: cn(
+            defaultInputStyle,
+            " dark:hawa-text-white focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0",
+            props.endIcon && "hawa-pe-9",
+            props.startIcon && "hawa-ps-9",
+            preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0",
+            props.inputProps?.className
+          )
+        }
+      )), !forceHideHelperText && /* @__PURE__ */ React24.createElement(
+        "p",
+        {
+          className: cn(
+            "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
+            props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
+          )
+        },
+        props.helperText
+      )))
+    );
+  }
+);
 
 // components/elements/Combobox.tsx
 import * as React28 from "react";
@@ -5365,17 +5367,17 @@ var TableHeader = React44.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ));
 TableHeader.displayName = "TableHeader";
 var TableHead = React44.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ React44.createElement(
+  ({ className, condensed, clickable, dir, ...props }, ref) => /* @__PURE__ */ React44.createElement(
     "th",
     {
       ref,
       className: cn(
         "hawa-bg-muted/60 dark:hawa-bg-muted/40 hawa-text-start hawa-align-middle hawa-font-medium hawa-text-muted-foreground [&:has([role=checkbox])]:hawa-pr-0 [&:not(:last-child)&:not(:first-child)]:hawa-border-x",
-        props.dir === "rtl" ? "[&:not(:last-child)]:hawa-border-l" : "[&:not(:last-child)]:hawa-border-r",
-        props.condensed ? "hawa-h-8" : "hawa-h-12",
-        props.clickable ? "hawa-px-1" : "hawa-px-4",
+        dir === "rtl" ? "[&:not(:last-child)]:hawa-border-l" : "[&:not(:last-child)]:hawa-border-r",
+        condensed ? "hawa-h-8" : "hawa-h-12",
+        clickable ? "hawa-px-1" : "hawa-px-4",
         //First and last columns
-        props.clickable ? " [&:not(:last-child)&:not(:first-child)]:hawa-p-1" : "hawa-px-4",
+        clickable ? " [&:not(:last-child)&:not(:first-child)]:hawa-p-1" : "hawa-px-4",
         //Columns in between
         className
       ),
@@ -5465,9 +5467,9 @@ var DataTable = ({
   enableGoTo,
   ...props
 }) => {
-  const [sorting, setSorting] = React45.useState([
-    { id: props.defaultSort || "", desc: false }
-  ]);
+  const [sorting, setSorting] = React45.useState(
+    props.defaultSort ? [{ id: props.defaultSort, desc: false }] : []
+  );
   const [columnFilters, setColumnFilters] = React45.useState(
     []
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.16.10-next",
+  "version": "0.16.12-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {