@temp-spotwork/ui 1.4.4 → 1.4.5

package/dist/components/molecules/filter/context-search/context-search.d.ts

@@ -1,3 +1,5 @@
+import { default as React } from 'react';
+
 export type ContextSearchProps = {
     /**
      * value of the input
@@ -15,5 +17,17 @@ export type ContextSearchProps = {
      * disabled
      */
     disabled?: boolean;
+    /**
+     * class name for the container
+     */
+    className?: string;
+    /**
+     * css styles for the input
+     */
+    style?: React.CSSProperties;
+    /**
+     * prevent browser suggestions
+     */
+    preventBrowserSuggestions?: boolean;
 };
-export declare const ContextSearch: ({ value, onChange, placeholder, disabled, }: ContextSearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextSearch: ({ value, onChange, placeholder, disabled, className, style, preventBrowserSuggestions, }: ContextSearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/filter/context-search/context-search.js

@@ -1,52 +1,51 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { useState as p } from "react";
-import { Icons as n } from "../../../atoms/icons/icons.js";
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import { useState as x } from "react";
+import { Icons as g } from "../../../atoms/icons/icons.js";
 import "../../../atoms/icons/iconsSVGs/Large/Profile.js";
 import "../../../atoms/icons/iconsSVGs/Small/Profile.js";
 import { t as s } from "../../../../bundle-mjs-CAy1p0fn.js";
 import { outlinedBorder as l } from "../../../styles/defaults/defaults.js";
 import "../../../../purify.es-eYFoHPwR.js";
-import { styleMap as b } from "../../../styles/typography/style.js";
+import { styleMap as v } from "../../../styles/typography/style.js";
 import "../../../styles/colors/colormap.js";
-const w = ({
+const $ = ({
   value: a,
   onChange: e,
   placeholder: i,
-  disabled: o = !1
+  disabled: o = !1,
+  className: c,
+  style: m,
+  preventBrowserSuggestions: u = !1
 }) => {
-  const [c, r] = p(!1), m = () => {
-    r(!0);
-  }, u = () => {
-    r(!1);
+  const [f, t] = x(!1), p = () => {
+    t(!0);
+  }, d = () => {
+    t(!1);
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ b(
     "div",
     {
       className: s(
         `h-[3rem] flex items-center gap-xs px-xs bg-surface-default ${l.base} border-bcolor-default `,
-        c && l.active,
-        o && "bg-surface-disabled border-bcolor-disabled"
+        f && l.active,
+        o && "bg-surface-disabled border-bcolor-disabled",
+        c
       ),
+      style: m,
       children: [
-        /* @__PURE__ */ t(
-          n,
-          {
-            disabled: !0,
-            icon: "MagnifyingGlassSmall",
-            color: o ? "disabled" : "active"
-          }
-        ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r(g, { disabled: !0, icon: "MagnifyingGlassSmall", color: o ? "disabled" : "active" }),
+        /* @__PURE__ */ r(
           "input",
           {
             type: "text",
-            className: s(`focus:outline-none w-full ${b[1]}`),
+            className: s(`focus:outline-none w-full ${v[1]}`),
             placeholder: i,
-            onFocus: m,
-            onBlur: u,
-            onChange: (f) => e == null ? void 0 : e(f.target.value),
+            onFocus: p,
+            onBlur: d,
+            onChange: (n) => e == null ? void 0 : e(n.target.value),
             value: a,
-            disabled: o
+            disabled: o,
+            autoComplete: u ? "off" : "on"
           }
         )
       ]
@@ -54,5 +53,5 @@ const w = ({
   );
 };
 export {
-  w as ContextSearch
+  $ as ContextSearch
 };

package/dist/components/molecules/filter/dropdown-selector/dropdown-selector.d.ts

@@ -19,5 +19,6 @@ export type DropdownFilterProps = {
     multiselect?: boolean;
     disabled?: boolean;
     minWidth?: string | number;
+    className?: string;
 };
-export declare const DropdownFilter: ({ onChange, value, placeholder, options, multiselect, disabled, minWidth, }: DropdownFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownFilter: ({ onChange, value, placeholder, options, multiselect, disabled, minWidth, className, }: DropdownFilterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/filter/dropdown-selector/dropdown-selector.js

@@ -1,63 +1,64 @@
 import { jsx as s, jsxs as n } from "react/jsx-runtime";
-import { useRef as R, useState as V } from "react";
-import { R as P, T as $, I as F, P as K, C as z, V as L, a as M } from "../../../../index-CnWyMXBX.js";
-import { c as U } from "../../../../index-fN7hCOo3.js";
-import { outlinedBorder as N, border as W } from "../../../styles/defaults/defaults.js";
+import { useRef as V, useState as P } from "react";
+import { R as $, T as F, I as K, P as z, C as L, V as M, a as U } from "../../../../index-CnWyMXBX.js";
+import { c as W } from "../../../../index-fN7hCOo3.js";
+import { outlinedBorder as S, border as Z } from "../../../styles/defaults/defaults.js";
 import { Typography as g } from "../../../styles/typography/typography.js";
-import { filterDropdownStyles as Z, contentStyles as q } from "./styles.js";
-import { Badge as S } from "../../../atoms/badge/badge.js";
-import { Icons as k } from "../../../atoms/icons/icons.js";
+import { filterDropdownStyles as q, contentStyles as G } from "./styles.js";
+import { Badge as k } from "../../../atoms/badge/badge.js";
+import { Icons as A } from "../../../atoms/icons/icons.js";
 import "../../../atoms/icons/iconsSVGs/Large/Profile.js";
 import "../../../atoms/icons/iconsSVGs/Small/Profile.js";
-import { CheckboxFilter as G } from "../checkbox/checkbox.js";
-import { t as A } from "../../../../bundle-mjs-CAy1p0fn.js";
-import { getBorderClasses as H } from "../../../atoms/form/utils-for-forms/state-functions.js";
-import { useStickyZIndex as J } from "../../../../hooks/use-sticky-z-index.js";
-const fe = ({
-  onChange: y,
+import { CheckboxFilter as H } from "../checkbox/checkbox.js";
+import { t as y } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { getBorderClasses as J } from "../../../atoms/form/utils-for-forms/state-functions.js";
+import { useStickyZIndex as Q } from "../../../../hooks/use-sticky-z-index.js";
+const me = ({
+  onChange: x,
   value: o,
   placeholder: C = "Select value",
   options: f,
   multiselect: t = !1,
   disabled: a = !1,
-  minWidth: D
+  minWidth: D,
+  className: O
 }) => {
-  const x = R(null), O = J(x), [c, i] = V(!1), v = H(c, !1, !1, a), I = a ? `bg-surface-disabled ${N.disabled}` : "bg-surface-default", u = Array.isArray(o) ? o.length - 1 : 0;
-  function w(e) {
+  const u = V(null), v = Q(u), [c, i] = P(!1), I = J(c, !1, !1, a), B = a ? `bg-surface-disabled ${S.disabled}` : "bg-surface-default", w = Array.isArray(o) ? o.length - 1 : 0;
+  function b(e) {
     return Array.isArray(e) && typeof e[0] == "object" && e[0] !== null && "label" in e[0] && "value" in e[0];
   }
-  const b = (e, r) => {
+  const N = (e, r) => {
     if (Array.isArray(r)) {
       if (!r.length) return "";
-      if (w(e)) {
+      if (b(e)) {
         const l = e.find((p) => p.value === r[0]);
         return l ? l.label : "";
       }
       return r[0];
     } else {
-      if (w(e)) {
+      if (b(e)) {
         const l = e.find((p) => p.value === r);
         return l ? l.label : "";
       }
       return r;
     }
-  }, d = (e) => typeof e == "string" ? e : e.value, B = (e) => typeof e == "string" ? e : e.label, m = (e) => {
+  }, d = (e) => typeof e == "string" ? e : e.value, T = (e) => typeof e == "string" ? e : e.label, m = (e) => {
     if (t) {
       let r = [];
-      Array.isArray(o) && o.includes(e) ? r = [...o.filter((l) => l !== e)] : r = [...o, e], y(r);
+      Array.isArray(o) && o.includes(e) ? r = [...o.filter((l) => l !== e)] : r = [...o, e], x(r);
     } else
-      y(e);
-  }, h = f.filter((e) => !e.hide), T = (e, r) => {
+      x(e);
+  }, h = f.filter((e) => !e.hide), j = (e, r) => {
     e.key === "Enter" && m(r);
-  }, j = (e) => {
+  }, E = (e) => {
     e.key === "Escape" && i(!1);
-  }, E = () => {
+  }, R = () => {
     i(!1);
   };
-  return /* @__PURE__ */ s("div", { className: "w-full", children: /* @__PURE__ */ n(
-    P,
+  return /* @__PURE__ */ s("div", { className: y("w-full", O), children: /* @__PURE__ */ n(
+    $,
     {
-      value: b(f, o),
+      value: N(f, o),
       onValueChange: (e) => !t && m(e),
       open: c,
       onOpenChange: (e) => {
@@ -66,10 +67,10 @@ const fe = ({
       disabled: a,
       children: [
         /* @__PURE__ */ n(
-          $,
+          F,
           {
-            className: A(Z, I, v),
-            ref: x,
+            className: y(q, B, I),
+            ref: u,
             style: { height: "3rem", padding: "0.75rem", minWidth: D },
             children: [
               o && o.length !== 0 ? /* @__PURE__ */ n("div", { className: "min-w-0 flex gap-xxs items-center", children: [
@@ -77,12 +78,12 @@ const fe = ({
                   g,
                   {
                     swStyle: 1,
-                    children: b(f, o),
+                    children: N(f, o),
                     className: "whitespace-nowrap overflow-hidden text-ellipsis",
                     color: a ? "disabled" : "default"
                   }
                 ),
-                t && u > 0 && /* @__PURE__ */ s(S, { text: "+" + u, color: "affirmative" })
+                t && w > 0 && /* @__PURE__ */ s(k, { text: "+" + w, color: "affirmative" })
               ] }) : /* @__PURE__ */ s(
                 g,
                 {
@@ -92,8 +93,8 @@ const fe = ({
                   className: "whitespace-nowrap overflow-hidden text-ellipsis"
                 }
               ),
-              /* @__PURE__ */ s(F, { className: "flex-shrink-0", children: /* @__PURE__ */ s(
-                k,
+              /* @__PURE__ */ s(K, { className: "flex-shrink-0", children: /* @__PURE__ */ s(
+                A,
                 {
                   id: "dropdown-icon",
                   disabled: !0,
@@ -104,44 +105,44 @@ const fe = ({
             ]
           }
         ),
-        /* @__PURE__ */ s(K, { children: /* @__PURE__ */ s(
-          z,
+        /* @__PURE__ */ s(z, { children: /* @__PURE__ */ s(
+          L,
           {
-            className: U(
-              q,
+            className: W(
+              G,
               "max-h-[27.3rem]",
               // to fit 9 items in timesheet filter (with border width)
-              c ? N.active : W.default
+              c ? S.active : Z.default
             ),
             position: "popper",
             side: "bottom",
-            onPointerDownOutside: E,
-            onKeyDown: j,
-            style: { minWidth: "auto", zIndex: O },
-            children: /* @__PURE__ */ s(L, { children: h == null ? void 0 : h.map((e, r) => /* @__PURE__ */ s(
-              M,
+            onPointerDownOutside: R,
+            onKeyDown: E,
+            style: { minWidth: "auto", zIndex: v },
+            children: /* @__PURE__ */ s(M, { children: h == null ? void 0 : h.map((e, r) => /* @__PURE__ */ s(
+              U,
               {
-                className: A(
+                className: y(
                   "flex flex-row items-center gap-xs py-sm  cursor-pointer hover:bg-surface-active hover:outline-none focus:bg-surface-active focus:outline-none",
                   e.hasTopBorder && "border-t border-e-bcolor-subdued",
                   t ? "pr-xs" : "px-md"
                 ),
                 value: d(e),
                 onClick: () => t && m(d(e)),
-                onKeyDown: (l) => T(l, d(e)),
+                onKeyDown: (l) => j(l, d(e)),
                 style: { height: "3rem" },
                 children: /* @__PURE__ */ n("div", { className: "flex items-center", style: { height: "100%" }, children: [
                   t && /* @__PURE__ */ s(
-                    G,
+                    H,
                     {
                       "data-testid": `checkbox-${r}`,
                       checked: o ? o.includes(d(e)) : !1
                     }
                   ),
                   /* @__PURE__ */ n("div", { className: "flex items-center gap-xxs", children: [
-                    e.icon && /* @__PURE__ */ s(k, { ...e.icon, color: e.color ? e.color : "default" }),
+                    e.icon && /* @__PURE__ */ s(A, { ...e.icon, color: e.color ? e.color : "default" }),
                     !e.icon && e.badgeText && /* @__PURE__ */ s(
-                      S,
+                      k,
                       {
                         text: e.badgeText,
                         color: e.color ? e.color : "default"
@@ -151,7 +152,7 @@ const fe = ({
                       g,
                       {
                         swStyle: 1,
-                        children: B(e),
+                        children: T(e),
                         color: e.color ? e.color : "default",
                         className: "whitespace-nowrap overflow-hidden text-ellipsis"
                       }
@@ -168,5 +169,5 @@ const fe = ({
   ) });
 };
 export {
-  fe as DropdownFilter
+  me as DropdownFilter
 };

package/dist/components/molecules/filter/dropdown-selector/styles.js

@@ -2,21 +2,21 @@ import { c as e } from "../../../../index-fN7hCOo3.js";
 const r = e(
   "px-md h-[4rem] w-full flex flex-row justify-between items-center gap-md"
 ), s = e(
-  "px-md h-[4rem] w-auto flex flex-row justify-between items-center gap-xs"
-), n = e(
+  "px-md h-[4rem] w-full flex flex-row justify-between items-center gap-xs"
+), l = e(
   "overflow-hidden bg-surface-default rounded-lg my-[0.3rem] border-[0.15rem] outline-none"
-), o = "flex flex-row items-center gap-xs py-sm px-md cursor-pointer hover:bg-surface-active hover:outline-none focus:bg-surface-active focus:outline-none ", l = "flex items-center justify-center h-[1.5rem] bg-surface-default text-glyph-active cursor-default", c = "flex items-center gap-xs self-stretch", a = {
+), n = "flex flex-row items-center gap-xs py-sm px-md cursor-pointer hover:bg-surface-active hover:outline-none focus:bg-surface-active focus:outline-none ", o = "flex items-center justify-center h-[1.5rem] bg-surface-default text-glyph-active cursor-default", c = "flex items-center gap-xs self-stretch", f = {
   default: "affirmative",
   warning: "warning",
   error: "alert",
   disabled: "disabled"
 };
 export {
-  a as badgeStyleMap,
-  n as contentStyles,
+  f as badgeStyleMap,
+  l as contentStyles,
   s as filterDropdownStyles,
   c as hintStyles,
-  o as itemStyles,
-  l as scrollButtonStyles,
+  n as itemStyles,
+  o as scrollButtonStyles,
   r as triggerStyles
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@temp-spotwork/ui",
   "private": false,
-  "version": "1.4.4",
+  "version": "1.4.5",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",