@lax-wp/design-system 0.13.46 → 0.13.47

package/dist/components/forms/date-range/DateRange.es.js

@@ -1,31 +1,31 @@
 import { jsxs as R, jsx as t } from "react/jsx-runtime";
-import { DatePicker as ae } from "antd";
+import { DatePicker as ie } from "antd";
 import q from "../../../_virtual/index.es.js";
-import { useState as J, useRef as d, useCallback as g, useEffect as Q } from "react";
+import { useState as J, useRef as m, useCallback as I, useEffect as Q } from "react";
 import L from "dayjs";
-import ie from "../../button/IconButton.es.js";
+import ae from "../../button/IconButton.es.js";
 import { InputLabel as ce } from "../shared/InputLabel.es.js";
 import { CalendarMonthIcon as T, CheckIndeterminateSmallFilledIcon as X } from "../../icon/icons.generated.es.js";
-const { RangePicker: Z } = ae, G = {
+const { RangePicker: Z } = ie, G = {
   ENTER: "Enter"
-}, ee = () => Math.random().toString(36).substring(2, 9), le = (i, n) => {
-  const p = d(n);
+}, ee = () => Math.random().toString(36).substring(2, 9), le = (a, n) => {
+  const p = m(n);
   Q(() => {
     p.current = n;
   }, [n]), Q(() => {
     const f = (o) => p.current(o);
-    return document.addEventListener(i, f), () => {
-      document.removeEventListener(i, f);
+    return document.addEventListener(a, f), () => {
+      document.removeEventListener(a, f);
     };
-  }, [i]);
+  }, [a]);
 }, fe = ({
-  onCalendarChange: i = void 0,
+  onCalendarChange: a = void 0,
   onChange: n,
   required: p,
   label: f,
   startDate: o,
   endDate: u,
-  errorMessage: m,
+  errorMessage: d,
   className: M,
   id: c,
   disabled: F = !1,
@@ -42,7 +42,7 @@ const { RangePicker: Z } = ae, G = {
   labelExtra: P,
   inputEmphasis: $ = "default"
 }) => {
-  const D = $ === "modified" && !m, E = $ === "deleted" && !m, Y = $ === "success" && !m, j = D ? "var(--Warning-50, #FFFAEB)" : E ? "var(--Error-50, #FEF2F2)" : Y ? "var(--Success-50, #F0FDF4)" : "", y = D ? "var(--Warning-200, #FEDF89)" : E ? "var(--Error-200, #FECACA)" : Y ? "var(--Success-200, #BBF7D0)" : "", [w, b] = J(!1), [A, _] = J(!1), h = d(null), H = d(null), N = d(!1), I = d(!1), s = (e) => e ? L(e) : null, O = `date-range-start-${ee()}`, B = `date-range-end-${ee()}`, ne = () => {
+  const D = $ === "modified" && !d, y = $ === "deleted" && !d, w = $ === "success" && !d, j = D ? "var(--Warning-50, #FFFAEB)" : y ? "var(--Error-50, #FEF2F2)" : w ? "var(--Success-50, #F0FDF4)" : "", E = D ? "var(--Warning-200, #FEDF89)" : y ? "var(--Error-200, #FECACA)" : w ? "var(--Success-200, #BBF7D0)" : "", [Y, b] = J(!1), [A, _] = J(!1), h = m(null), H = m(null), N = m(!1), g = m(!1), s = (e) => e ? L(e) : null, O = `date-range-start-${ee()}`, B = `date-range-end-${ee()}`, ne = () => {
     b(!0), setTimeout(() => {
       h.current && h.current.focus();
     }, 0);
@@ -59,22 +59,22 @@ const { RangePicker: Z } = ae, G = {
       }
     }
   });
-  const U = g(
+  const U = I(
     (e) => {
-      const [r, a] = [s(o), s(u)];
-      return l ? r ? e.isBefore(r.startOf("day")) || e.isAfter(r.add(l, "day").endOf("day")) : a ? e.isBefore(a.subtract(l, "day").startOf("day")) || e.isAfter(a.endOf("day")) : !1 : !1;
+      const [r, i] = [s(o), s(u)];
+      return l ? r ? e.isBefore(r.startOf("day")) || e.isAfter(r.add(l, "day").endOf("day")) : i ? e.isBefore(i.subtract(l, "day").startOf("day")) || e.isAfter(i.endOf("day")) : !1 : !1;
     },
     [o, u, l]
-  ), V = g((e) => {
-    if (e.key === G.ENTER && !(C ? w : S ?? A)) {
+  ), V = I((e) => {
+    if (e.key === G.ENTER && !(C ? Y : S ?? A)) {
       e.preventDefault(), e.stopPropagation();
-      const a = e.target.closest("form");
-      if (a) {
-        const W = a.querySelector('button[type="submit"]');
-        W ? W.click() : a.requestSubmit();
+      const i = e.target.closest("form");
+      if (i) {
+        const W = i.querySelector('button[type="submit"]');
+        W ? W.click() : i.requestSubmit();
       }
     }
-  }, [C, w, S, A]), se = g((e) => {
+  }, [C, Y, S, A]), se = I((e) => {
     if (e && N.current) {
       N.current = !1, b(!1);
       return;
@@ -84,20 +84,20 @@ const { RangePicker: Z } = ae, G = {
         N.current = !1;
       });
     }));
-  }, []), oe = g((e) => {
-    if (e && I.current) {
-      I.current = !1, _(!1), x?.(!1);
+  }, []), oe = I((e) => {
+    if (e && g.current) {
+      g.current = !1, _(!1), x?.(!1);
       return;
     }
-    _(e), x?.(e), e || (I.current = !0, requestAnimationFrame(() => {
+    _(e), x?.(e), e || (g.current = !0, requestAnimationFrame(() => {
       H.current?.focus(), requestAnimationFrame(() => {
-        I.current = !1;
+        g.current = !1;
       });
     }));
   }, [x]);
   return C ? /* @__PURE__ */ R("div", { id: c, className: M, onKeyDownCapture: V, children: [
     /* @__PURE__ */ t(
-      ie,
+      ae,
       {
         onClick: ne,
         disabled: F,
@@ -113,7 +113,7 @@ const { RangePicker: Z } = ae, G = {
         onChange: (e) => {
           n(e), b(!1);
         },
-        onCalendarChange: i,
+        onCalendarChange: a,
         value: [s(o), s(u)],
         id: { start: O, end: B },
         allowClear: !0,
@@ -124,9 +124,10 @@ const { RangePicker: Z } = ae, G = {
         disabled: F,
         disabledDate: l ? U : void 0,
         autoComplete: "off",
-        open: w,
+        open: Y,
         onOpenChange: se,
-        placement: K
+        placement: K,
+        style: { position: "absolute", opacity: 0, pointerEvents: "none", width: 0, height: 0 }
       }
     )
   ] }) : /* @__PURE__ */ R("div", { id: c, className: q("flex flex-col", M), onKeyDownCapture: V, children: [
@@ -134,20 +135,20 @@ const { RangePicker: Z } = ae, G = {
       /* @__PURE__ */ t(ce, { label: f || "", required: p || !1 }),
       P
     ] }),
-    (j || y) && /* @__PURE__ */ t("style", { children: `
+    (j || E) && /* @__PURE__ */ t("style", { children: `
           #${c} .ant-picker {
             background-color: ${j} !important;
-            border-color: ${y} !important;
+            border-color: ${E} !important;
           }
           #${c} .ant-picker:hover {
-            border-color: ${y} !important;
+            border-color: ${E} !important;
           }
           #${c} .ant-picker.ant-picker-focused {
-            border-color: ${y} !important;
-            box-shadow: 0 0 0 2px ${E ? "rgba(254,202,202,0.45)" : D ? "rgba(254,223,137,0.45)" : "rgba(187,247,208,0.45)"} !important;
+            border-color: ${E} !important;
+            box-shadow: 0 0 0 2px ${y ? "rgba(254,202,202,0.45)" : D ? "rgba(254,223,137,0.45)" : "rgba(187,247,208,0.45)"} !important;
           }
           #${c} .ant-picker .ant-picker-input > input {
-            color: ${E ? "#475467" : Y ? "#101828" : "inherit"};
+            color: ${y ? "#475467" : w ? "#101828" : "inherit"};
           }
         ` }),
     /* @__PURE__ */ t(
@@ -155,7 +156,7 @@ const { RangePicker: Z } = ae, G = {
       {
         ref: H,
         onChange: n,
-        onCalendarChange: i,
+        onCalendarChange: a,
         value: [s(o), s(u)],
         id: { start: O, end: B },
         allowClear: !0,
@@ -171,14 +172,14 @@ const { RangePicker: Z } = ae, G = {
         placement: K
       }
     ),
-    m && /* @__PURE__ */ t(
+    d && /* @__PURE__ */ t(
       "p",
       {
         className: q(
           "text-sm font-inter font-normal text-left pt-[6px]",
           "text-red-500"
         ),
-        children: m
+        children: d
       }
     )
   ] });

package/dist/components/forms/date-range/DateRange.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRange.es.js","sources":["../../../../src/components/forms/date-range/DateRange.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DatePicker } from \"antd\";\nimport cn from \"classnames\";\nimport React from \"react\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { CalendarMonthIcon, CheckIndeterminateSmallFilledIcon } from '../../icon';\n\nconst { RangePicker } = DatePicker;\n\n// Keyboard keys constant\nconst KEYBOARD_KEYS = {\n  ENTER: \"Enter\",\n} as const;\n\n/**\n * Generate a short UUID\n */\nconst generateShortUUID = (): string => {\n  return Math.random().toString(36).substring(2, 9);\n};\n\n/**\n * Hook to add event listeners\n */\nconst useEventListener = <K extends keyof DocumentEventMap>(\n  eventName: K,\n  handler: (event: DocumentEventMap[K]) => void\n) => {\n  const savedHandler = useRef(handler);\n\n  useEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  useEffect(() => {\n    const eventListener = (event: DocumentEventMap[K]) =>\n      savedHandler.current(event);\n    document.addEventListener(eventName, eventListener);\n    return () => {\n      document.removeEventListener(eventName, eventListener);\n    };\n  }, [eventName]);\n};\n\n/**\n * Props for the DateRange component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TDateRangeProps = {\n  /** Unique identifier for the date range */\n  id: string;\n  /** Label text to display above the date range */\n  label?: string;\n  /** Start date value (ISO string or formatted date string) */\n  startDate: string;\n  /** End date value (ISO string or formatted date string) */\n  endDate: string;\n  /** Callback function called when date range changes */\n  onChange(data: any): void;\n  /** Callback function called when calendar selection changes */\n  onCalendarChange?(data: any): void;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Error message to display below the date range */\n  errorMessage?: string;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n  /** Whether the date range is disabled */\n  disabled?: boolean;\n  /** Custom date format */\n  dateFormat?: string;\n  /** Whether popup should render inside parent element */\n  shouldPopOnParent?: boolean;\n  /** Custom function to get popup container */\n  getPopupContainer?: (trigger: HTMLElement | null) => HTMLElement;\n  /** Maximum date range in days */\n  maxDateRange?: number;\n  /** Whether the picker is open */\n  open?: boolean;\n  /** Callback function called when open state changes */\n  onOpenChange?(open: boolean): void;\n  /** Placement of the dropdown */\n  placement?: \"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\";\n  /** Whether to render as an icon button that triggers the date picker */\n  renderAsIconButton?: boolean;\n  /** Additional CSS classes for the icon button */\n  iconButtonClassName?: string;\n  /** Additional CSS classes for the calendar icon inside the button */\n  iconClassName?: string;\n  /** Optional extra content in the label row (e.g. actions, badges) */\n  labelExtra?: React.ReactNode;\n  /** Input surface style: `'modified'` — Warning colors; `'deleted'` — Error colors; `'success'` — Success colors. */\n  inputEmphasis?: \"default\" | \"modified\" | \"deleted\" | \"success\";\n};\n\n/**\n * A date range picker component with label, validation, and styling support.\n * Features proper date handling, validation, and comprehensive prop support.\n * Built on top of Ant Design's RangePicker for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * DateRange component.\n *\n * @example\n * ```tsx\n * <DateRange\n *   id=\"event-dates\"\n *   label=\"Event Duration\"\n *   startDate={startDate}\n *   endDate={endDate}\n *   onChange={(dates) => {\n *     setStartDate(dates[0]);\n *     setEndDate(dates[1]);\n *   }}\n *   required\n * />\n * ```\n */\nexport const DateRange = ({\n  onCalendarChange = undefined,\n  onChange,\n  required,\n  label,\n  startDate,\n  endDate,\n  errorMessage,\n  className,\n  id,\n  disabled = false,\n  dateFormat,\n  shouldPopOnParent = true,\n  getPopupContainer: customGetPopupContainer,\n  maxDateRange,\n  open,\n  onOpenChange,\n  placement = \"bottomLeft\",\n  renderAsIconButton = false,\n  iconButtonClassName,\n  iconClassName,\n  labelExtra,\n  inputEmphasis = \"default\",\n}: TDateRangeProps) => {\n  const emphasisModifiedSkin = inputEmphasis === \"modified\" && !errorMessage;\n  const emphasisDeletedSkin = inputEmphasis === \"deleted\" && !errorMessage;\n  const emphasisSuccessSkin = inputEmphasis === \"success\" && !errorMessage;\n  const emphasisBg =\n    emphasisModifiedSkin ? \"var(--Warning-50, #FFFAEB)\" :\n    emphasisDeletedSkin ? \"var(--Error-50, #FEF2F2)\" :\n    emphasisSuccessSkin ? \"var(--Success-50, #F0FDF4)\" : \"\";\n  const emphasisBorder =\n    emphasisModifiedSkin ? \"var(--Warning-200, #FEDF89)\" :\n    emphasisDeletedSkin ? \"var(--Error-200, #FECACA)\" :\n    emphasisSuccessSkin ? \"var(--Success-200, #BBF7D0)\" : \"\";\n  const [isOpen, setIsOpen] = useState(false);\n  const [isNormalPickerOpen, setIsNormalPickerOpen] = useState(false);\n  const pickerRef = useRef<any>(null);\n  const normalPickerRef = useRef<any>(null);\n  const suppressNextIconOpenRef = useRef(false);\n  const suppressNextNormalOpenRef = useRef(false);\n\n  const parseDate = (str: string | number | Date | dayjs.Dayjs) => {\n    if (!str) return null;\n    return dayjs(str);\n  };\n\n  const START_ID = `date-range-start-${generateShortUUID()}`;\n  const END_ID = `date-range-end-${generateShortUUID()}`;\n\n  const handleIconClick = () => {\n    setIsOpen(true);\n    setTimeout(() => {\n      if (pickerRef.current) {\n        pickerRef.current.focus();\n      }\n    }, 0);\n  };\n\n  useEventListener(\"keydown\", (e: KeyboardEvent) => {\n    if (\n      e.key === KEYBOARD_KEYS.ENTER &&\n      document.activeElement instanceof HTMLInputElement\n    ) {\n      if (document?.activeElement?.id === START_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([date, parseDate(endDate)]);\n        }\n      }\n      if (document?.activeElement?.id === END_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([parseDate(startDate), date]);\n        }\n      }\n    }\n  });\n\n  const disabledDate = useCallback(\n    (current: dayjs.Dayjs) => {\n      const [start, end] = [parseDate(startDate), parseDate(endDate)];\n\n      if (!maxDateRange) return false;\n\n      if (start) {\n        return (\n          current.isBefore(start.startOf(\"day\")) ||\n          current.isAfter(start.add(maxDateRange, \"day\").endOf(\"day\"))\n        );\n      }\n\n      if (end) {\n        return (\n          current.isBefore(end.subtract(maxDateRange, \"day\").startOf(\"day\")) ||\n          current.isAfter(end.endOf(\"day\"))\n        );\n      }\n\n      return false;\n    },\n    [startDate, endDate, maxDateRange]\n  );\n\n  const handleKeyDownCapture = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === KEYBOARD_KEYS.ENTER) {\n      const pickerIsOpen = renderAsIconButton ? isOpen : (open ?? isNormalPickerOpen);\n      if (!pickerIsOpen) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        const form = (e.target as HTMLElement).closest('form');\n        if (form) {\n          const submitBtn = form.querySelector<HTMLButtonElement>('button[type=\"submit\"]');\n          if (submitBtn) {\n            submitBtn.click();\n          } else {\n            form.requestSubmit();\n          }\n        }\n      }\n    }\n  }, [renderAsIconButton, isOpen, open, isNormalPickerOpen]);\n\n  const handleIconPickerOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextIconOpenRef.current) {\n      suppressNextIconOpenRef.current = false;\n      setIsOpen(false);\n      return;\n    }\n\n    setIsOpen(nextOpen);\n    if (!nextOpen) {\n      suppressNextIconOpenRef.current = true;\n      requestAnimationFrame(() => {\n        pickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextIconOpenRef.current = false;\n        });\n      });\n    }\n  }, []);\n\n  const handleNormalOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextNormalOpenRef.current) {\n      suppressNextNormalOpenRef.current = false;\n      setIsNormalPickerOpen(false);\n      onOpenChange?.(false);\n      return;\n    }\n\n    setIsNormalPickerOpen(nextOpen);\n    onOpenChange?.(nextOpen);\n    if (!nextOpen) {\n      suppressNextNormalOpenRef.current = true;\n      requestAnimationFrame(() => {\n        normalPickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextNormalOpenRef.current = false;\n        });\n      });\n    }\n  }, [onOpenChange]);\n\n  if (renderAsIconButton) {\n    return (\n      <div id={id} className={className} onKeyDownCapture={handleKeyDownCapture}>\n        <IconButton\n          onClick={handleIconClick}\n          disabled={disabled}\n          variant=\"default\"\n          className={iconButtonClassName}\n        >\n          <CalendarMonthIcon size={20} className={cn(\"w-5 h-5\", iconClassName)} />\n        </IconButton>\n        <RangePicker\n          ref={pickerRef}\n          onChange={(dates) => {\n            onChange(dates);\n            setIsOpen(false);\n          }}\n          onCalendarChange={onCalendarChange}\n          value={[parseDate(startDate), parseDate(endDate)]}\n          id={{ start: START_ID, end: END_ID }}\n          allowClear\n          format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n          separator={<CheckIndeterminateSmallFilledIcon size={20} className=\"text-neutral-400 dark:text-gray-100\" />}\n          suffixIcon={<CalendarMonthIcon size={14} className=\"text-neutral-400 dark:text-gray-100\" />}\n          getPopupContainer={\n            customGetPopupContainer\n              ? customGetPopupContainer\n              : shouldPopOnParent\n                ? (trigger) => trigger.parentElement as HTMLElement\n                : () => document.body\n          }\n          disabled={disabled}\n          disabledDate={maxDateRange ? disabledDate : undefined}\n          autoComplete=\"off\"\n          open={isOpen}\n          onOpenChange={handleIconPickerOpenChange}\n          placement={placement}\n          // style={{ position: \"absolute\", opacity: 0, pointerEvents: \"none\", width: 0, height: 0 }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div id={id} className={cn(\"flex flex-col\", className)} onKeyDownCapture={handleKeyDownCapture}>\n      {(label || labelExtra) && (\n        <div className=\"mb-1 flex items-center justify-between gap-1\">\n          <InputLabel label={label || \"\"} required={required || false} />\n          {labelExtra}\n        </div>\n      )}\n      {(emphasisBg || emphasisBorder) && (\n        <style>{`\n          #${id} .ant-picker {\n            background-color: ${emphasisBg} !important;\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker:hover {\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker.ant-picker-focused {\n            border-color: ${emphasisBorder} !important;\n            box-shadow: 0 0 0 2px ${emphasisDeletedSkin ? \"rgba(254,202,202,0.45)\" : emphasisModifiedSkin ? \"rgba(254,223,137,0.45)\" : \"rgba(187,247,208,0.45)\"} !important;\n          }\n          #${id} .ant-picker .ant-picker-input > input {\n            color: ${emphasisDeletedSkin ? \"#475467\" : emphasisSuccessSkin ? \"#101828\" : \"inherit\"};\n          }\n        `}</style>\n      )}\n      <RangePicker\n        ref={normalPickerRef}\n        onChange={onChange}\n        onCalendarChange={onCalendarChange}\n        value={[parseDate(startDate), parseDate(endDate)]}\n        id={{ start: START_ID, end: END_ID }}\n        allowClear\n        format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n        separator={\n          <CheckIndeterminateSmallFilledIcon size={20} className='text-neutral-400 dark:text-gray-100' />\n        }\n        suffixIcon={\n          <CalendarMonthIcon size={14} className='text-neutral-400 dark:text-gray-100' />\n        }\n        getPopupContainer={\n          customGetPopupContainer\n            ? customGetPopupContainer\n            : shouldPopOnParent\n              ? (trigger) => trigger.parentElement as HTMLElement\n              : () => document.body\n        }\n        disabled={disabled}\n        disabledDate={maxDateRange ? disabledDate : undefined}\n        open={open ?? isNormalPickerOpen}\n        onOpenChange={handleNormalOpenChange}\n        autoComplete=\"off\"\n        placement={placement}\n      />\n      {errorMessage && (\n        <p\n          className={cn(\n            \"text-sm font-inter font-normal text-left pt-[6px]\",\n            \"text-red-500\"\n          )}\n        >\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  );\n};\n\nDateRange.displayName = \"DateRange\";\n\n"],"names":["RangePicker","DatePicker","KEYBOARD_KEYS","generateShortUUID","useEventListener","eventName","handler","savedHandler","useRef","useEffect","eventListener","event","DateRange","onCalendarChange","onChange","required","label","startDate","endDate","errorMessage","className","id","disabled","dateFormat","shouldPopOnParent","customGetPopupContainer","maxDateRange","open","onOpenChange","placement","renderAsIconButton","iconButtonClassName","iconClassName","labelExtra","inputEmphasis","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","emphasisBg","emphasisBorder","isOpen","setIsOpen","useState","isNormalPickerOpen","setIsNormalPickerOpen","pickerRef","normalPickerRef","suppressNextIconOpenRef","suppressNextNormalOpenRef","parseDate","str","dayjs","START_ID","END_ID","handleIconClick","date","disabledDate","useCallback","current","start","end","handleKeyDownCapture","form","submitBtn","handleIconPickerOpenChange","nextOpen","handleNormalOpenChange","jsxs","jsx","IconButton","CalendarMonthIcon","cn","dates","CheckIndeterminateSmallFilledIcon","trigger","InputLabel"],"mappings":"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"}
+{"version":3,"file":"DateRange.es.js","sources":["../../../../src/components/forms/date-range/DateRange.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DatePicker } from \"antd\";\nimport cn from \"classnames\";\nimport React from \"react\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { CalendarMonthIcon, CheckIndeterminateSmallFilledIcon } from '../../icon';\n\nconst { RangePicker } = DatePicker;\n\n// Keyboard keys constant\nconst KEYBOARD_KEYS = {\n  ENTER: \"Enter\",\n} as const;\n\n/**\n * Generate a short UUID\n */\nconst generateShortUUID = (): string => {\n  return Math.random().toString(36).substring(2, 9);\n};\n\n/**\n * Hook to add event listeners\n */\nconst useEventListener = <K extends keyof DocumentEventMap>(\n  eventName: K,\n  handler: (event: DocumentEventMap[K]) => void\n) => {\n  const savedHandler = useRef(handler);\n\n  useEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  useEffect(() => {\n    const eventListener = (event: DocumentEventMap[K]) =>\n      savedHandler.current(event);\n    document.addEventListener(eventName, eventListener);\n    return () => {\n      document.removeEventListener(eventName, eventListener);\n    };\n  }, [eventName]);\n};\n\n/**\n * Props for the DateRange component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TDateRangeProps = {\n  /** Unique identifier for the date range */\n  id: string;\n  /** Label text to display above the date range */\n  label?: string;\n  /** Start date value (ISO string or formatted date string) */\n  startDate: string;\n  /** End date value (ISO string or formatted date string) */\n  endDate: string;\n  /** Callback function called when date range changes */\n  onChange(data: any): void;\n  /** Callback function called when calendar selection changes */\n  onCalendarChange?(data: any): void;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Error message to display below the date range */\n  errorMessage?: string;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n  /** Whether the date range is disabled */\n  disabled?: boolean;\n  /** Custom date format */\n  dateFormat?: string;\n  /** Whether popup should render inside parent element */\n  shouldPopOnParent?: boolean;\n  /** Custom function to get popup container */\n  getPopupContainer?: (trigger: HTMLElement | null) => HTMLElement;\n  /** Maximum date range in days */\n  maxDateRange?: number;\n  /** Whether the picker is open */\n  open?: boolean;\n  /** Callback function called when open state changes */\n  onOpenChange?(open: boolean): void;\n  /** Placement of the dropdown */\n  placement?: \"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\";\n  /** Whether to render as an icon button that triggers the date picker */\n  renderAsIconButton?: boolean;\n  /** Additional CSS classes for the icon button */\n  iconButtonClassName?: string;\n  /** Additional CSS classes for the calendar icon inside the button */\n  iconClassName?: string;\n  /** Optional extra content in the label row (e.g. actions, badges) */\n  labelExtra?: React.ReactNode;\n  /** Input surface style: `'modified'` — Warning colors; `'deleted'` — Error colors; `'success'` — Success colors. */\n  inputEmphasis?: \"default\" | \"modified\" | \"deleted\" | \"success\";\n};\n\n/**\n * A date range picker component with label, validation, and styling support.\n * Features proper date handling, validation, and comprehensive prop support.\n * Built on top of Ant Design's RangePicker for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * DateRange component.\n *\n * @example\n * ```tsx\n * <DateRange\n *   id=\"event-dates\"\n *   label=\"Event Duration\"\n *   startDate={startDate}\n *   endDate={endDate}\n *   onChange={(dates) => {\n *     setStartDate(dates[0]);\n *     setEndDate(dates[1]);\n *   }}\n *   required\n * />\n * ```\n */\nexport const DateRange = ({\n  onCalendarChange = undefined,\n  onChange,\n  required,\n  label,\n  startDate,\n  endDate,\n  errorMessage,\n  className,\n  id,\n  disabled = false,\n  dateFormat,\n  shouldPopOnParent = true,\n  getPopupContainer: customGetPopupContainer,\n  maxDateRange,\n  open,\n  onOpenChange,\n  placement = \"bottomLeft\",\n  renderAsIconButton = false,\n  iconButtonClassName,\n  iconClassName,\n  labelExtra,\n  inputEmphasis = \"default\",\n}: TDateRangeProps) => {\n  const emphasisModifiedSkin = inputEmphasis === \"modified\" && !errorMessage;\n  const emphasisDeletedSkin = inputEmphasis === \"deleted\" && !errorMessage;\n  const emphasisSuccessSkin = inputEmphasis === \"success\" && !errorMessage;\n  const emphasisBg =\n    emphasisModifiedSkin ? \"var(--Warning-50, #FFFAEB)\" :\n    emphasisDeletedSkin ? \"var(--Error-50, #FEF2F2)\" :\n    emphasisSuccessSkin ? \"var(--Success-50, #F0FDF4)\" : \"\";\n  const emphasisBorder =\n    emphasisModifiedSkin ? \"var(--Warning-200, #FEDF89)\" :\n    emphasisDeletedSkin ? \"var(--Error-200, #FECACA)\" :\n    emphasisSuccessSkin ? \"var(--Success-200, #BBF7D0)\" : \"\";\n  const [isOpen, setIsOpen] = useState(false);\n  const [isNormalPickerOpen, setIsNormalPickerOpen] = useState(false);\n  const pickerRef = useRef<any>(null);\n  const normalPickerRef = useRef<any>(null);\n  const suppressNextIconOpenRef = useRef(false);\n  const suppressNextNormalOpenRef = useRef(false);\n\n  const parseDate = (str: string | number | Date | dayjs.Dayjs) => {\n    if (!str) return null;\n    return dayjs(str);\n  };\n\n  const START_ID = `date-range-start-${generateShortUUID()}`;\n  const END_ID = `date-range-end-${generateShortUUID()}`;\n\n  const handleIconClick = () => {\n    setIsOpen(true);\n    setTimeout(() => {\n      if (pickerRef.current) {\n        pickerRef.current.focus();\n      }\n    }, 0);\n  };\n\n  useEventListener(\"keydown\", (e: KeyboardEvent) => {\n    if (\n      e.key === KEYBOARD_KEYS.ENTER &&\n      document.activeElement instanceof HTMLInputElement\n    ) {\n      if (document?.activeElement?.id === START_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([date, parseDate(endDate)]);\n        }\n      }\n      if (document?.activeElement?.id === END_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([parseDate(startDate), date]);\n        }\n      }\n    }\n  });\n\n  const disabledDate = useCallback(\n    (current: dayjs.Dayjs) => {\n      const [start, end] = [parseDate(startDate), parseDate(endDate)];\n\n      if (!maxDateRange) return false;\n\n      if (start) {\n        return (\n          current.isBefore(start.startOf(\"day\")) ||\n          current.isAfter(start.add(maxDateRange, \"day\").endOf(\"day\"))\n        );\n      }\n\n      if (end) {\n        return (\n          current.isBefore(end.subtract(maxDateRange, \"day\").startOf(\"day\")) ||\n          current.isAfter(end.endOf(\"day\"))\n        );\n      }\n\n      return false;\n    },\n    [startDate, endDate, maxDateRange]\n  );\n\n  const handleKeyDownCapture = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === KEYBOARD_KEYS.ENTER) {\n      const pickerIsOpen = renderAsIconButton ? isOpen : (open ?? isNormalPickerOpen);\n      if (!pickerIsOpen) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        const form = (e.target as HTMLElement).closest('form');\n        if (form) {\n          const submitBtn = form.querySelector<HTMLButtonElement>('button[type=\"submit\"]');\n          if (submitBtn) {\n            submitBtn.click();\n          } else {\n            form.requestSubmit();\n          }\n        }\n      }\n    }\n  }, [renderAsIconButton, isOpen, open, isNormalPickerOpen]);\n\n  const handleIconPickerOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextIconOpenRef.current) {\n      suppressNextIconOpenRef.current = false;\n      setIsOpen(false);\n      return;\n    }\n\n    setIsOpen(nextOpen);\n    if (!nextOpen) {\n      suppressNextIconOpenRef.current = true;\n      requestAnimationFrame(() => {\n        pickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextIconOpenRef.current = false;\n        });\n      });\n    }\n  }, []);\n\n  const handleNormalOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextNormalOpenRef.current) {\n      suppressNextNormalOpenRef.current = false;\n      setIsNormalPickerOpen(false);\n      onOpenChange?.(false);\n      return;\n    }\n\n    setIsNormalPickerOpen(nextOpen);\n    onOpenChange?.(nextOpen);\n    if (!nextOpen) {\n      suppressNextNormalOpenRef.current = true;\n      requestAnimationFrame(() => {\n        normalPickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextNormalOpenRef.current = false;\n        });\n      });\n    }\n  }, [onOpenChange]);\n\n  if (renderAsIconButton) {\n    return (\n      <div id={id} className={className} onKeyDownCapture={handleKeyDownCapture}>\n        <IconButton\n          onClick={handleIconClick}\n          disabled={disabled}\n          variant=\"default\"\n          className={iconButtonClassName}\n        >\n          <CalendarMonthIcon size={20} className={cn(\"w-5 h-5\", iconClassName)} />\n        </IconButton>\n        <RangePicker\n          ref={pickerRef}\n          onChange={(dates) => {\n            onChange(dates);\n            setIsOpen(false);\n          }}\n          onCalendarChange={onCalendarChange}\n          value={[parseDate(startDate), parseDate(endDate)]}\n          id={{ start: START_ID, end: END_ID }}\n          allowClear\n          format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n          separator={<CheckIndeterminateSmallFilledIcon size={20} className=\"text-neutral-400 dark:text-gray-100\" />}\n          suffixIcon={<CalendarMonthIcon size={14} className=\"text-neutral-400 dark:text-gray-100\" />}\n          getPopupContainer={\n            customGetPopupContainer\n              ? customGetPopupContainer\n              : shouldPopOnParent\n                ? (trigger) => trigger.parentElement as HTMLElement\n                : () => document.body\n          }\n          disabled={disabled}\n          disabledDate={maxDateRange ? disabledDate : undefined}\n          autoComplete=\"off\"\n          open={isOpen}\n          onOpenChange={handleIconPickerOpenChange}\n          placement={placement}\n          style={{ position: \"absolute\", opacity: 0, pointerEvents: \"none\", width: 0, height: 0 }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div id={id} className={cn(\"flex flex-col\", className)} onKeyDownCapture={handleKeyDownCapture}>\n      {(label || labelExtra) && (\n        <div className=\"mb-1 flex items-center justify-between gap-1\">\n          <InputLabel label={label || \"\"} required={required || false} />\n          {labelExtra}\n        </div>\n      )}\n      {(emphasisBg || emphasisBorder) && (\n        <style>{`\n          #${id} .ant-picker {\n            background-color: ${emphasisBg} !important;\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker:hover {\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker.ant-picker-focused {\n            border-color: ${emphasisBorder} !important;\n            box-shadow: 0 0 0 2px ${emphasisDeletedSkin ? \"rgba(254,202,202,0.45)\" : emphasisModifiedSkin ? \"rgba(254,223,137,0.45)\" : \"rgba(187,247,208,0.45)\"} !important;\n          }\n          #${id} .ant-picker .ant-picker-input > input {\n            color: ${emphasisDeletedSkin ? \"#475467\" : emphasisSuccessSkin ? \"#101828\" : \"inherit\"};\n          }\n        `}</style>\n      )}\n      <RangePicker\n        ref={normalPickerRef}\n        onChange={onChange}\n        onCalendarChange={onCalendarChange}\n        value={[parseDate(startDate), parseDate(endDate)]}\n        id={{ start: START_ID, end: END_ID }}\n        allowClear\n        format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n        separator={\n          <CheckIndeterminateSmallFilledIcon size={20} className='text-neutral-400 dark:text-gray-100' />\n        }\n        suffixIcon={\n          <CalendarMonthIcon size={14} className='text-neutral-400 dark:text-gray-100' />\n        }\n        getPopupContainer={\n          customGetPopupContainer\n            ? customGetPopupContainer\n            : shouldPopOnParent\n              ? (trigger) => trigger.parentElement as HTMLElement\n              : () => document.body\n        }\n        disabled={disabled}\n        disabledDate={maxDateRange ? disabledDate : undefined}\n        open={open ?? isNormalPickerOpen}\n        onOpenChange={handleNormalOpenChange}\n        autoComplete=\"off\"\n        placement={placement}\n      />\n      {errorMessage && (\n        <p\n          className={cn(\n            \"text-sm font-inter font-normal text-left pt-[6px]\",\n            \"text-red-500\"\n          )}\n        >\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  );\n};\n\nDateRange.displayName = \"DateRange\";\n\n"],"names":["RangePicker","DatePicker","KEYBOARD_KEYS","generateShortUUID","useEventListener","eventName","handler","savedHandler","useRef","useEffect","eventListener","event","DateRange","onCalendarChange","onChange","required","label","startDate","endDate","errorMessage","className","id","disabled","dateFormat","shouldPopOnParent","customGetPopupContainer","maxDateRange","open","onOpenChange","placement","renderAsIconButton","iconButtonClassName","iconClassName","labelExtra","inputEmphasis","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","emphasisBg","emphasisBorder","isOpen","setIsOpen","useState","isNormalPickerOpen","setIsNormalPickerOpen","pickerRef","normalPickerRef","suppressNextIconOpenRef","suppressNextNormalOpenRef","parseDate","str","dayjs","START_ID","END_ID","handleIconClick","date","disabledDate","useCallback","current","start","end","handleKeyDownCapture","form","submitBtn","handleIconPickerOpenChange","nextOpen","handleNormalOpenChange","jsxs","jsx","IconButton","CalendarMonthIcon","cn","dates","CheckIndeterminateSmallFilledIcon","trigger","InputLabel"],"mappings":"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"}

package/dist/components/navigation/tabs/TabOptions.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("@mui/icons-material"),C=require("antd"),S=require("../../../_virtual/index.cjs.js"),d=require("react"),h=require("../../button/Button.cjs.js"),a=require("../../data-display/typography/Typography.cjs.js"),L=require("../../forms/base-input-field/BaseInputField.cjs.js"),M=require("../../forms/select-field/SelectField.cjs.js"),j=require("../../forms/toggle/Toggle.cjs.js"),q=require("../../button/IconButton.cjs.js"),y=require("./types.cjs.js"),l=require("../../icon/icons.generated.cjs.js"),A=({fontSize:t=24,className:i})=>e.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,children:e.jsx("path",{d:"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),B=({fontSize:t=24,className:i})=>e.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,children:e.jsx("path",{d:"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),F=[{label:"Default",value:"default",icon:e.jsx(l.FormatListBulletedIcon,{className:"w-icon h-icon"})},{label:"A-Z",value:"asc",icon:e.jsx(A,{className:"w-icon h-icon"})},{label:"Z-A",value:"desc",icon:e.jsx(B,{className:"w-icon h-icon"})}],V=({savedConfig:t,onApplyFilter:i,setUnsavedChanges:f,handleTabSort:w,onSearchChange:m,hasSuffixRecord:v=!1})=>{const[N,u]=d.useState(!1),[r,p]=d.useState(y.INITIAL_TAB_OPTION_CONFIG),[c,g]=d.useState(""),o=(s,x)=>{p(I=>({...I,[s]:x}))},k=()=>{p({filterType:{label:"Contains",value:"contains"},sortOrder:"default",showCounts:!0,lockOrder:!1}),g(""),m("","contains")},O=()=>{i({filterType:r.filterType,sortOrder:r.sortOrder,showCounts:r.showCounts,lockOrder:r.lockOrder}),w(r.sortOrder),f(!0),u(!1),c&&m(c,r.filterType.value)};d.useEffect(()=>{t&&JSON.stringify(t)!==JSON.stringify(r)&&p(t)},[t]);const T=e.jsxs("div",{children:[e.jsxs("div",{className:"p-5 space-y-5",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(n.Search,{sx:{height:"14px",width:"14px"}})," Filter Tabs"]}),e.jsxs("div",{className:"grid grid-cols-[150px_3fr] gap-2",children:[e.jsx(M.SelectField,{showSearch:!1,allowClear:!1,value:r.filterType,onChange:s=>o("filterType",s),options:[{label:"Contains",value:"contains"},{label:"Does not contain",value:"does-not-contain"}]}),e.jsx(L.BaseInputField,{id:"base-input-field-tab-options-filter",placeholder:"Insert value",value:c,onChange:s=>g(s),isClearable:!0})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(n.SwapVertOutlined,{sx:{height:"14px",width:"14px"}})," Sort"]}),e.jsx("div",{className:"grid grid-cols-3 gap-2",children:F.map(s=>{const x=r.sortOrder===s.value;return e.jsxs(h,{appearance:"outline",status:x?"secondary":"secondary-neutral",id:`sort-option-${s.value}`,onClick:()=>o("sortOrder",s.value),className:"w-full",children:[s.icon,s.label]},s.value)})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(n.VisibilityOutlined,{sx:{height:"14px",width:"14px"}})," Display Options"]}),v&&e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(n.TagOutlined,{sx:{height:"16px",width:"16px"},className:"text-neutral-800 dark:text-white"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(a.Typography,{size:"small",variant:"medium",appearance:"title",children:"Show Counts"}),e.jsx(a.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Display item counts on tabs"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(j.Toggle,{isChecked:r.showCounts,onChange:s=>o("showCounts",s),hideStatus:!0,icon:{checkedIcon:e.jsx(l.VisibilityIcon,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm"}),uncheckedIcon:e.jsx(l.VisibilityOffIcon,{className:"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm"})},withIcon:!0})})]}),e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(l.LockIcon,{className:"text-neutral-800 dark:text-white w-icon h-icon"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(a.Typography,{size:"small",variant:"medium",appearance:"title",children:"Lock Order"}),e.jsx(a.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Prevent tab reordering"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(j.Toggle,{isChecked:r.lockOrder,onChange:s=>o("lockOrder",s),hideStatus:!0,withIcon:!0,icon:{checkedIcon:e.jsx(l.LockIcon,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-md h-md"}),uncheckedIcon:e.jsx(l.LockOpenIcon,{className:"cursor-pointer !block text-neutral-700 w-md h-md"})}})})]})]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5",children:[e.jsx(h,{id:"btn-tab-options-reset",appearance:"outline",status:"cancel",className:"w-full",onClick:k,children:"Reset"}),e.jsx(h,{id:"btn-tab-options-apply",appearance:"filled",status:"primary",className:"w-full",onClick:O,disabled:JSON.stringify(t)===JSON.stringify(r)&&c==="",children:"Apply"})]})]});return e.jsx(C.Popover,{classNames:{body:"rounded-md w-[348px] !p-0"},placement:"bottomLeft",content:T,trigger:["click"],arrow:!1,open:N,onOpenChange:u,children:e.jsx("div",{className:"border-l border-neutral-200 dark:border-neutral-800 pl-2",children:e.jsxs(q,{tooltip:"Manage Tabs",variant:"ghost",className:"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative",onClick:()=>u(!0),children:[e.jsx(n.Tune,{sx:{height:"20px",width:"20px"}}),JSON.stringify(r)!==JSON.stringify(y.INITIAL_TAB_OPTION_CONFIG)&&e.jsx(b,{className:"text-primary-600"})]})})})},b=({className:t})=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"5",height:"5",viewBox:"0 0 4 4",fill:"none",className:S("absolute top-0.5 right-0.5",t),children:e.jsx("circle",{cx:"2",cy:"2",r:"2",fill:"currentColor"})});exports.Indicator=b;exports.TabOptions=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("@mui/icons-material"),C=require("antd"),S=require("../../../_virtual/index.cjs.js"),d=require("react"),h=require("../../button/Button.cjs.js"),a=require("../../data-display/typography/Typography.cjs.js"),L=require("../../forms/base-input-field/BaseInputField.cjs.js"),M=require("../../forms/select-field/SelectField.cjs.js"),j=require("../../forms/toggle/Toggle.cjs.js"),q=require("../../button/IconButton.cjs.js"),y=require("./types.cjs.js"),l=require("../../icon/icons.generated.cjs.js"),A=({fontSize:t=24,className:i})=>e.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,children:e.jsx("path",{d:"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),B=({fontSize:t=24,className:i})=>e.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,children:e.jsx("path",{d:"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),F=[{label:"Default",value:"default",icon:e.jsx(l.FormatListBulletedIcon,{className:"w-icon h-icon"})},{label:"A-Z",value:"asc",icon:e.jsx(A,{className:"w-icon h-icon"})},{label:"Z-A",value:"desc",icon:e.jsx(B,{className:"w-icon h-icon"})}],V=({savedConfig:t,onApplyFilter:i,setUnsavedChanges:f,handleTabSort:w,onSearchChange:m,hasSuffixRecord:v=!1})=>{const[N,u]=d.useState(!1),[r,p]=d.useState(y.INITIAL_TAB_OPTION_CONFIG),[c,g]=d.useState(""),o=(s,x)=>{p(I=>({...I,[s]:x}))},k=()=>{p({filterType:{label:"Contains",value:"contains"},sortOrder:"default",showCounts:!0,lockOrder:!1}),g(""),m("","contains")},O=()=>{i({filterType:r.filterType,sortOrder:r.sortOrder,showCounts:r.showCounts,lockOrder:r.lockOrder}),w(r.sortOrder),f(!0),u(!1),c&&m(c,r.filterType.value)};d.useEffect(()=>{t&&JSON.stringify(t)!==JSON.stringify(r)&&p(t)},[t]);const T=e.jsxs("div",{children:[e.jsxs("div",{className:"p-5 space-y-5",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(n.Search,{sx:{height:"14px",width:"14px"}})," Filter Tabs"]}),e.jsxs("div",{className:"grid grid-cols-[150px_3fr] gap-2",children:[e.jsx(M.SelectField,{showSearch:!1,allowClear:!1,value:r.filterType,onChange:s=>o("filterType",s),options:[{label:"Contains",value:"contains"},{label:"Does not contain",value:"does-not-contain"}]}),e.jsx(L.BaseInputField,{id:"base-input-field-tab-options-filter",placeholder:"Insert value",value:c,onChange:s=>g(s),isClearable:!0})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(n.SwapVertOutlined,{sx:{height:"14px",width:"14px"}})," Sort"]}),e.jsx("div",{className:"grid grid-cols-3 gap-2",children:F.map(s=>{const x=r.sortOrder===s.value;return e.jsxs(h,{appearance:"outline",status:x?"secondary":"secondary-neutral",id:`sort-option-${s.value}`,onClick:()=>o("sortOrder",s.value),className:"w-full",children:[s.icon,s.label]},s.value)})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(n.VisibilityOutlined,{sx:{height:"14px",width:"14px"}})," Display Options"]}),v&&e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(n.TagOutlined,{sx:{height:"16px",width:"16px"},className:"text-neutral-800 dark:text-white"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(a.Typography,{size:"small",variant:"medium",appearance:"title",children:"Show Counts"}),e.jsx(a.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Display item counts on tabs"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(j.Toggle,{isChecked:r.showCounts,onChange:s=>o("showCounts",s),hideStatus:!0,icon:{checkedIcon:e.jsx(l.VisibilityIcon,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm"}),uncheckedIcon:e.jsx(l.VisibilityOffIcon,{className:"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm"})},withIcon:!0})})]}),e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(l.LockIcon,{className:"text-neutral-800 dark:text-white w-icon h-icon"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(a.Typography,{size:"small",variant:"medium",appearance:"title",children:"Lock Order"}),e.jsx(a.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Prevent tab reordering"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(j.Toggle,{isChecked:r.lockOrder,onChange:s=>o("lockOrder",s),hideStatus:!0,withIcon:!0,icon:{checkedIcon:e.jsx(l.LockIcon,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm"}),uncheckedIcon:e.jsx(l.LockOpenIcon,{className:"cursor-pointer !block text-neutral-700 w-sm h-sm"})}})})]})]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5",children:[e.jsx(h,{id:"btn-tab-options-reset",appearance:"outline",status:"cancel",className:"w-full",onClick:k,children:"Reset"}),e.jsx(h,{id:"btn-tab-options-apply",appearance:"filled",status:"primary",className:"w-full",onClick:O,disabled:JSON.stringify(t)===JSON.stringify(r)&&c==="",children:"Apply"})]})]});return e.jsx(C.Popover,{classNames:{body:"rounded-md w-[348px] !p-0"},placement:"bottomLeft",content:T,trigger:["click"],arrow:!1,open:N,onOpenChange:u,children:e.jsx("div",{className:"border-l border-neutral-200 dark:border-neutral-800 pl-2",children:e.jsxs(q,{tooltip:"Manage Tabs",variant:"ghost",className:"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative",onClick:()=>u(!0),children:[e.jsx(n.Tune,{sx:{height:"20px",width:"20px"}}),JSON.stringify(r)!==JSON.stringify(y.INITIAL_TAB_OPTION_CONFIG)&&e.jsx(b,{className:"text-primary-600"})]})})})},b=({className:t})=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"5",height:"5",viewBox:"0 0 4 4",fill:"none",className:S("absolute top-0.5 right-0.5",t),children:e.jsx("circle",{cx:"2",cy:"2",r:"2",fill:"currentColor"})});exports.Indicator=b;exports.TabOptions=V;
 //# sourceMappingURL=TabOptions.cjs.js.map

package/dist/components/navigation/tabs/TabOptions.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabOptions.cjs.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n  Search,\n  SwapVertOutlined,\n  TagOutlined,\n  Tune,\n  VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\nimport { FormatListBulletedIcon, LockIcon, LockOpenIcon, VisibilityIcon, VisibilityOffIcon } from '../../icon';\n\ntype TabOptionsProps = {\n  savedConfig: TabOptionConfig;\n  onApplyFilter: (config: TabOptionConfig) => void;\n  setUnsavedChanges: (unsavedChanges: boolean) => void;\n  handleTabSort: (order: 'asc' | 'desc') => void;\n  onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n  hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SORT_OPTIONS = [\n  {\n    label: 'Default',\n    value: 'default',\n    icon: <FormatListBulletedIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'A-Z',\n    value: 'asc',\n    icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'Z-A',\n    value: 'desc',\n    icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\n  },\n];\n\nexport const TabOptions = ({\n  savedConfig,\n  onApplyFilter,\n  setUnsavedChanges,\n  handleTabSort,\n  onSearchChange,\n  hasSuffixRecord = false,\n}: TabOptionsProps) => {\n  const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n  const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n  const [filterValue, setFilterValue] = useState('');\n\n  const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n    setTabOptionConfig((prev) => ({\n      ...prev,\n      [key]: value,\n    }));\n  };\n\n  const handleReset = () => {\n    setTabOptionConfig({\n      filterType: { label: 'Contains', value: 'contains' },\n      sortOrder: 'default',\n      showCounts: true,\n      lockOrder: false,\n    });\n    setFilterValue('');\n    onSearchChange('', 'contains');\n  };\n\n  const applyFilter = () => {\n    onApplyFilter({\n      filterType: tabOptionConfig.filterType,\n      sortOrder: tabOptionConfig.sortOrder,\n      showCounts: tabOptionConfig.showCounts,\n      lockOrder: tabOptionConfig.lockOrder,\n    });\n    handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n    setUnsavedChanges(true);\n    setIsTabOptionsVisible(false);\n    if (filterValue) {\n      onSearchChange(filterValue, tabOptionConfig.filterType.value);\n    }\n  };\n\n  useEffect(() => {\n    if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n      setTabOptionConfig(savedConfig);\n    }\n  }, [savedConfig]);\n\n  const content = (\n    <div>\n      <div className=\"p-5 space-y-5\">\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n          </Typography>\n          <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n            <SelectField\n              showSearch={false}\n              allowClear={false}\n              value={tabOptionConfig.filterType}\n              onChange={(value) => handleConfigChange('filterType', value)}\n              options={[\n                { label: 'Contains', value: 'contains' },\n                { label: 'Does not contain', value: 'does-not-contain' },\n              ]}\n            />\n            <BaseInputField\n              id=\"base-input-field-tab-options-filter\"\n              placeholder=\"Insert value\"\n              value={filterValue}\n              onChange={(value: string) => setFilterValue(value)}\n              isClearable\n            />\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n          </Typography>\n          <div className=\"grid grid-cols-3 gap-2\">\n            {SORT_OPTIONS.map((option) => {\n              const isActive = tabOptionConfig.sortOrder === option.value;\n              return (\n                <Button\n                  appearance=\"outline\"\n                  status={isActive ? 'secondary' : 'secondary-neutral'}\n                  id={`sort-option-${option.value}`}\n                  onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n                  className=\"w-full\"\n                  key={option.value}\n                >\n                  {option.icon}\n                  {option.label}\n                </Button>\n              );\n            })}\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n          </Typography>\n          {hasSuffixRecord && (\n            <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                  <TagOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n                </div>\n                <div className=\"flex flex-col gap-0\">\n                  <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                    Show Counts\n                  </Typography>\n                  <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                    Display item counts on tabs\n                  </Typography>\n                </div>\n              </div>\n              <div className=\"flex items-center justify-end\">\n                <Toggle\n                  isChecked={tabOptionConfig.showCounts}\n                  onChange={(v) => handleConfigChange('showCounts', v)}\n                  hideStatus\n                  icon={{\n                    checkedIcon: <VisibilityIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm\" />,\n                    uncheckedIcon: <VisibilityOffIcon className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm\" />,\n                  }}\n                  withIcon\n                />\n              </div>\n            </div>\n          )}\n          <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                <LockIcon className=\"text-neutral-800 dark:text-white w-icon h-icon\" />\n              </div>\n              <div className=\"flex flex-col gap-0\">\n                <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                  Lock Order\n                </Typography>\n                <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                  Prevent tab reordering\n                </Typography>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-end\">\n              <Toggle\n                isChecked={tabOptionConfig.lockOrder}\n                onChange={(v) => handleConfigChange('lockOrder', v)}\n                hideStatus\n                withIcon\n                icon={{\n                  checkedIcon: <LockIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-md h-md\" />,\n                  uncheckedIcon: <LockOpenIcon className=\"cursor-pointer !block text-neutral-700 w-md h-md\" />,\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n        <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n          Reset\n        </Button>\n        <Button\n          id=\"btn-tab-options-apply\"\n          appearance=\"filled\"\n          status=\"primary\"\n          className=\"w-full\"\n          onClick={applyFilter}\n          disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n        >\n          Apply\n        </Button>\n      </div>\n    </div>\n  );\n\n  return (\n    <Popover\n      classNames={{\n        body: 'rounded-md w-[348px] !p-0',\n      }}\n      placement=\"bottomLeft\"\n      content={content}\n      trigger={['click']}\n      arrow={false}\n      open={isTabOptionsVisible}\n      onOpenChange={setIsTabOptionsVisible}\n    >\n      <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n        <IconButton\n          tooltip=\"Manage Tabs\"\n          variant=\"ghost\"\n          className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n          onClick={() => setIsTabOptionsVisible(true)}\n        >\n          <Tune sx={{ height: '20px', width: '20px' }} />\n          {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n        </IconButton>\n      </div>\n    </Popover>\n  );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"5\"\n      height=\"5\"\n      viewBox=\"0 0 4 4\"\n      fill=\"none\"\n      className={classNames('absolute top-0.5 right-0.5', className)}\n    >\n      <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagOutlined","Toggle","v","VisibilityIcon","VisibilityOffIcon","LockIcon","LockOpenIcon","Popover","IconButton","Tune","Indicator","classNames"],"mappings":"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"}
+{"version":3,"file":"TabOptions.cjs.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n  Search,\n  SwapVertOutlined,\n  TagOutlined,\n  Tune,\n  VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\nimport { FormatListBulletedIcon, LockIcon, LockOpenIcon, VisibilityIcon, VisibilityOffIcon } from '../../icon';\n\ntype TabOptionsProps = {\n  savedConfig: TabOptionConfig;\n  onApplyFilter: (config: TabOptionConfig) => void;\n  setUnsavedChanges: (unsavedChanges: boolean) => void;\n  handleTabSort: (order: 'asc' | 'desc') => void;\n  onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n  hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SORT_OPTIONS = [\n  {\n    label: 'Default',\n    value: 'default',\n    icon: <FormatListBulletedIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'A-Z',\n    value: 'asc',\n    icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'Z-A',\n    value: 'desc',\n    icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\n  },\n];\n\nexport const TabOptions = ({\n  savedConfig,\n  onApplyFilter,\n  setUnsavedChanges,\n  handleTabSort,\n  onSearchChange,\n  hasSuffixRecord = false,\n}: TabOptionsProps) => {\n  const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n  const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n  const [filterValue, setFilterValue] = useState('');\n\n  const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n    setTabOptionConfig((prev) => ({\n      ...prev,\n      [key]: value,\n    }));\n  };\n\n  const handleReset = () => {\n    setTabOptionConfig({\n      filterType: { label: 'Contains', value: 'contains' },\n      sortOrder: 'default',\n      showCounts: true,\n      lockOrder: false,\n    });\n    setFilterValue('');\n    onSearchChange('', 'contains');\n  };\n\n  const applyFilter = () => {\n    onApplyFilter({\n      filterType: tabOptionConfig.filterType,\n      sortOrder: tabOptionConfig.sortOrder,\n      showCounts: tabOptionConfig.showCounts,\n      lockOrder: tabOptionConfig.lockOrder,\n    });\n    handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n    setUnsavedChanges(true);\n    setIsTabOptionsVisible(false);\n    if (filterValue) {\n      onSearchChange(filterValue, tabOptionConfig.filterType.value);\n    }\n  };\n\n  useEffect(() => {\n    if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n      setTabOptionConfig(savedConfig);\n    }\n  }, [savedConfig]);\n\n  const content = (\n    <div>\n      <div className=\"p-5 space-y-5\">\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n          </Typography>\n          <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n            <SelectField\n              showSearch={false}\n              allowClear={false}\n              value={tabOptionConfig.filterType}\n              onChange={(value) => handleConfigChange('filterType', value)}\n              options={[\n                { label: 'Contains', value: 'contains' },\n                { label: 'Does not contain', value: 'does-not-contain' },\n              ]}\n            />\n            <BaseInputField\n              id=\"base-input-field-tab-options-filter\"\n              placeholder=\"Insert value\"\n              value={filterValue}\n              onChange={(value: string) => setFilterValue(value)}\n              isClearable\n            />\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n          </Typography>\n          <div className=\"grid grid-cols-3 gap-2\">\n            {SORT_OPTIONS.map((option) => {\n              const isActive = tabOptionConfig.sortOrder === option.value;\n              return (\n                <Button\n                  appearance=\"outline\"\n                  status={isActive ? 'secondary' : 'secondary-neutral'}\n                  id={`sort-option-${option.value}`}\n                  onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n                  className=\"w-full\"\n                  key={option.value}\n                >\n                  {option.icon}\n                  {option.label}\n                </Button>\n              );\n            })}\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n          </Typography>\n          {hasSuffixRecord && (\n            <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                  <TagOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n                </div>\n                <div className=\"flex flex-col gap-0\">\n                  <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                    Show Counts\n                  </Typography>\n                  <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                    Display item counts on tabs\n                  </Typography>\n                </div>\n              </div>\n              <div className=\"flex items-center justify-end\">\n                <Toggle\n                  isChecked={tabOptionConfig.showCounts}\n                  onChange={(v) => handleConfigChange('showCounts', v)}\n                  hideStatus\n                  icon={{\n                    checkedIcon: <VisibilityIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm\" />,\n                    uncheckedIcon: <VisibilityOffIcon className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm\" />,\n                  }}\n                  withIcon\n                />\n              </div>\n            </div>\n          )}\n          <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                <LockIcon className=\"text-neutral-800 dark:text-white w-icon h-icon\" />\n              </div>\n              <div className=\"flex flex-col gap-0\">\n                <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                  Lock Order\n                </Typography>\n                <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                  Prevent tab reordering\n                </Typography>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-end\">\n              <Toggle\n                isChecked={tabOptionConfig.lockOrder}\n                onChange={(v) => handleConfigChange('lockOrder', v)}\n                hideStatus\n                withIcon\n                icon={{\n                  checkedIcon: <LockIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm\" />,\n                  uncheckedIcon: <LockOpenIcon className=\"cursor-pointer !block text-neutral-700 w-sm h-sm\" />,\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n        <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n          Reset\n        </Button>\n        <Button\n          id=\"btn-tab-options-apply\"\n          appearance=\"filled\"\n          status=\"primary\"\n          className=\"w-full\"\n          onClick={applyFilter}\n          disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n        >\n          Apply\n        </Button>\n      </div>\n    </div>\n  );\n\n  return (\n    <Popover\n      classNames={{\n        body: 'rounded-md w-[348px] !p-0',\n      }}\n      placement=\"bottomLeft\"\n      content={content}\n      trigger={['click']}\n      arrow={false}\n      open={isTabOptionsVisible}\n      onOpenChange={setIsTabOptionsVisible}\n    >\n      <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n        <IconButton\n          tooltip=\"Manage Tabs\"\n          variant=\"ghost\"\n          className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n          onClick={() => setIsTabOptionsVisible(true)}\n        >\n          <Tune sx={{ height: '20px', width: '20px' }} />\n          {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n        </IconButton>\n      </div>\n    </Popover>\n  );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"5\"\n      height=\"5\"\n      viewBox=\"0 0 4 4\"\n      fill=\"none\"\n      className={classNames('absolute top-0.5 right-0.5', className)}\n    >\n      <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagOutlined","Toggle","v","VisibilityIcon","VisibilityOffIcon","LockIcon","LockOpenIcon","Popover","IconButton","Tune","Indicator","classNames"],"mappings":"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"}

package/dist/components/navigation/tabs/TabOptions.es.js

@@ -158,8 +158,8 @@ const R = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
               hideStatus: !0,
               withIcon: !0,
               icon: {
-                checkedIcon: /* @__PURE__ */ e(b, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-md h-md" }),
-                uncheckedIcon: /* @__PURE__ */ e(_, { className: "cursor-pointer !block text-neutral-700 w-md h-md" })
+                checkedIcon: /* @__PURE__ */ e(b, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm" }),
+                uncheckedIcon: /* @__PURE__ */ e(_, { className: "cursor-pointer !block text-neutral-700 w-sm h-sm" })
               }
             }
           ) })

package/dist/components/navigation/tabs/TabOptions.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabOptions.es.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n  Search,\n  SwapVertOutlined,\n  TagOutlined,\n  Tune,\n  VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\nimport { FormatListBulletedIcon, LockIcon, LockOpenIcon, VisibilityIcon, VisibilityOffIcon } from '../../icon';\n\ntype TabOptionsProps = {\n  savedConfig: TabOptionConfig;\n  onApplyFilter: (config: TabOptionConfig) => void;\n  setUnsavedChanges: (unsavedChanges: boolean) => void;\n  handleTabSort: (order: 'asc' | 'desc') => void;\n  onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n  hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SORT_OPTIONS = [\n  {\n    label: 'Default',\n    value: 'default',\n    icon: <FormatListBulletedIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'A-Z',\n    value: 'asc',\n    icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'Z-A',\n    value: 'desc',\n    icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\n  },\n];\n\nexport const TabOptions = ({\n  savedConfig,\n  onApplyFilter,\n  setUnsavedChanges,\n  handleTabSort,\n  onSearchChange,\n  hasSuffixRecord = false,\n}: TabOptionsProps) => {\n  const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n  const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n  const [filterValue, setFilterValue] = useState('');\n\n  const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n    setTabOptionConfig((prev) => ({\n      ...prev,\n      [key]: value,\n    }));\n  };\n\n  const handleReset = () => {\n    setTabOptionConfig({\n      filterType: { label: 'Contains', value: 'contains' },\n      sortOrder: 'default',\n      showCounts: true,\n      lockOrder: false,\n    });\n    setFilterValue('');\n    onSearchChange('', 'contains');\n  };\n\n  const applyFilter = () => {\n    onApplyFilter({\n      filterType: tabOptionConfig.filterType,\n      sortOrder: tabOptionConfig.sortOrder,\n      showCounts: tabOptionConfig.showCounts,\n      lockOrder: tabOptionConfig.lockOrder,\n    });\n    handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n    setUnsavedChanges(true);\n    setIsTabOptionsVisible(false);\n    if (filterValue) {\n      onSearchChange(filterValue, tabOptionConfig.filterType.value);\n    }\n  };\n\n  useEffect(() => {\n    if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n      setTabOptionConfig(savedConfig);\n    }\n  }, [savedConfig]);\n\n  const content = (\n    <div>\n      <div className=\"p-5 space-y-5\">\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n          </Typography>\n          <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n            <SelectField\n              showSearch={false}\n              allowClear={false}\n              value={tabOptionConfig.filterType}\n              onChange={(value) => handleConfigChange('filterType', value)}\n              options={[\n                { label: 'Contains', value: 'contains' },\n                { label: 'Does not contain', value: 'does-not-contain' },\n              ]}\n            />\n            <BaseInputField\n              id=\"base-input-field-tab-options-filter\"\n              placeholder=\"Insert value\"\n              value={filterValue}\n              onChange={(value: string) => setFilterValue(value)}\n              isClearable\n            />\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n          </Typography>\n          <div className=\"grid grid-cols-3 gap-2\">\n            {SORT_OPTIONS.map((option) => {\n              const isActive = tabOptionConfig.sortOrder === option.value;\n              return (\n                <Button\n                  appearance=\"outline\"\n                  status={isActive ? 'secondary' : 'secondary-neutral'}\n                  id={`sort-option-${option.value}`}\n                  onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n                  className=\"w-full\"\n                  key={option.value}\n                >\n                  {option.icon}\n                  {option.label}\n                </Button>\n              );\n            })}\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n          </Typography>\n          {hasSuffixRecord && (\n            <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                  <TagOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n                </div>\n                <div className=\"flex flex-col gap-0\">\n                  <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                    Show Counts\n                  </Typography>\n                  <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                    Display item counts on tabs\n                  </Typography>\n                </div>\n              </div>\n              <div className=\"flex items-center justify-end\">\n                <Toggle\n                  isChecked={tabOptionConfig.showCounts}\n                  onChange={(v) => handleConfigChange('showCounts', v)}\n                  hideStatus\n                  icon={{\n                    checkedIcon: <VisibilityIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm\" />,\n                    uncheckedIcon: <VisibilityOffIcon className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm\" />,\n                  }}\n                  withIcon\n                />\n              </div>\n            </div>\n          )}\n          <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                <LockIcon className=\"text-neutral-800 dark:text-white w-icon h-icon\" />\n              </div>\n              <div className=\"flex flex-col gap-0\">\n                <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                  Lock Order\n                </Typography>\n                <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                  Prevent tab reordering\n                </Typography>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-end\">\n              <Toggle\n                isChecked={tabOptionConfig.lockOrder}\n                onChange={(v) => handleConfigChange('lockOrder', v)}\n                hideStatus\n                withIcon\n                icon={{\n                  checkedIcon: <LockIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-md h-md\" />,\n                  uncheckedIcon: <LockOpenIcon className=\"cursor-pointer !block text-neutral-700 w-md h-md\" />,\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n        <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n          Reset\n        </Button>\n        <Button\n          id=\"btn-tab-options-apply\"\n          appearance=\"filled\"\n          status=\"primary\"\n          className=\"w-full\"\n          onClick={applyFilter}\n          disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n        >\n          Apply\n        </Button>\n      </div>\n    </div>\n  );\n\n  return (\n    <Popover\n      classNames={{\n        body: 'rounded-md w-[348px] !p-0',\n      }}\n      placement=\"bottomLeft\"\n      content={content}\n      trigger={['click']}\n      arrow={false}\n      open={isTabOptionsVisible}\n      onOpenChange={setIsTabOptionsVisible}\n    >\n      <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n        <IconButton\n          tooltip=\"Manage Tabs\"\n          variant=\"ghost\"\n          className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n          onClick={() => setIsTabOptionsVisible(true)}\n        >\n          <Tune sx={{ height: '20px', width: '20px' }} />\n          {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n        </IconButton>\n      </div>\n    </Popover>\n  );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"5\"\n      height=\"5\"\n      viewBox=\"0 0 4 4\"\n      fill=\"none\"\n      className={classNames('absolute top-0.5 right-0.5', className)}\n    >\n      <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagOutlined","Toggle","v","VisibilityIcon","VisibilityOffIcon","LockIcon","LockOpenIcon","Popover","IconButton","Tune","Indicator","classNames"],"mappings":"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"}
+{"version":3,"file":"TabOptions.es.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n  Search,\n  SwapVertOutlined,\n  TagOutlined,\n  Tune,\n  VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\nimport { FormatListBulletedIcon, LockIcon, LockOpenIcon, VisibilityIcon, VisibilityOffIcon } from '../../icon';\n\ntype TabOptionsProps = {\n  savedConfig: TabOptionConfig;\n  onApplyFilter: (config: TabOptionConfig) => void;\n  setUnsavedChanges: (unsavedChanges: boolean) => void;\n  handleTabSort: (order: 'asc' | 'desc') => void;\n  onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n  hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SORT_OPTIONS = [\n  {\n    label: 'Default',\n    value: 'default',\n    icon: <FormatListBulletedIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'A-Z',\n    value: 'asc',\n    icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'Z-A',\n    value: 'desc',\n    icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\n  },\n];\n\nexport const TabOptions = ({\n  savedConfig,\n  onApplyFilter,\n  setUnsavedChanges,\n  handleTabSort,\n  onSearchChange,\n  hasSuffixRecord = false,\n}: TabOptionsProps) => {\n  const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n  const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n  const [filterValue, setFilterValue] = useState('');\n\n  const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n    setTabOptionConfig((prev) => ({\n      ...prev,\n      [key]: value,\n    }));\n  };\n\n  const handleReset = () => {\n    setTabOptionConfig({\n      filterType: { label: 'Contains', value: 'contains' },\n      sortOrder: 'default',\n      showCounts: true,\n      lockOrder: false,\n    });\n    setFilterValue('');\n    onSearchChange('', 'contains');\n  };\n\n  const applyFilter = () => {\n    onApplyFilter({\n      filterType: tabOptionConfig.filterType,\n      sortOrder: tabOptionConfig.sortOrder,\n      showCounts: tabOptionConfig.showCounts,\n      lockOrder: tabOptionConfig.lockOrder,\n    });\n    handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n    setUnsavedChanges(true);\n    setIsTabOptionsVisible(false);\n    if (filterValue) {\n      onSearchChange(filterValue, tabOptionConfig.filterType.value);\n    }\n  };\n\n  useEffect(() => {\n    if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n      setTabOptionConfig(savedConfig);\n    }\n  }, [savedConfig]);\n\n  const content = (\n    <div>\n      <div className=\"p-5 space-y-5\">\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n          </Typography>\n          <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n            <SelectField\n              showSearch={false}\n              allowClear={false}\n              value={tabOptionConfig.filterType}\n              onChange={(value) => handleConfigChange('filterType', value)}\n              options={[\n                { label: 'Contains', value: 'contains' },\n                { label: 'Does not contain', value: 'does-not-contain' },\n              ]}\n            />\n            <BaseInputField\n              id=\"base-input-field-tab-options-filter\"\n              placeholder=\"Insert value\"\n              value={filterValue}\n              onChange={(value: string) => setFilterValue(value)}\n              isClearable\n            />\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n          </Typography>\n          <div className=\"grid grid-cols-3 gap-2\">\n            {SORT_OPTIONS.map((option) => {\n              const isActive = tabOptionConfig.sortOrder === option.value;\n              return (\n                <Button\n                  appearance=\"outline\"\n                  status={isActive ? 'secondary' : 'secondary-neutral'}\n                  id={`sort-option-${option.value}`}\n                  onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n                  className=\"w-full\"\n                  key={option.value}\n                >\n                  {option.icon}\n                  {option.label}\n                </Button>\n              );\n            })}\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n          </Typography>\n          {hasSuffixRecord && (\n            <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                  <TagOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n                </div>\n                <div className=\"flex flex-col gap-0\">\n                  <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                    Show Counts\n                  </Typography>\n                  <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                    Display item counts on tabs\n                  </Typography>\n                </div>\n              </div>\n              <div className=\"flex items-center justify-end\">\n                <Toggle\n                  isChecked={tabOptionConfig.showCounts}\n                  onChange={(v) => handleConfigChange('showCounts', v)}\n                  hideStatus\n                  icon={{\n                    checkedIcon: <VisibilityIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm\" />,\n                    uncheckedIcon: <VisibilityOffIcon className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm\" />,\n                  }}\n                  withIcon\n                />\n              </div>\n            </div>\n          )}\n          <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                <LockIcon className=\"text-neutral-800 dark:text-white w-icon h-icon\" />\n              </div>\n              <div className=\"flex flex-col gap-0\">\n                <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                  Lock Order\n                </Typography>\n                <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                  Prevent tab reordering\n                </Typography>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-end\">\n              <Toggle\n                isChecked={tabOptionConfig.lockOrder}\n                onChange={(v) => handleConfigChange('lockOrder', v)}\n                hideStatus\n                withIcon\n                icon={{\n                  checkedIcon: <LockIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm\" />,\n                  uncheckedIcon: <LockOpenIcon className=\"cursor-pointer !block text-neutral-700 w-sm h-sm\" />,\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n        <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n          Reset\n        </Button>\n        <Button\n          id=\"btn-tab-options-apply\"\n          appearance=\"filled\"\n          status=\"primary\"\n          className=\"w-full\"\n          onClick={applyFilter}\n          disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n        >\n          Apply\n        </Button>\n      </div>\n    </div>\n  );\n\n  return (\n    <Popover\n      classNames={{\n        body: 'rounded-md w-[348px] !p-0',\n      }}\n      placement=\"bottomLeft\"\n      content={content}\n      trigger={['click']}\n      arrow={false}\n      open={isTabOptionsVisible}\n      onOpenChange={setIsTabOptionsVisible}\n    >\n      <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n        <IconButton\n          tooltip=\"Manage Tabs\"\n          variant=\"ghost\"\n          className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n          onClick={() => setIsTabOptionsVisible(true)}\n        >\n          <Tune sx={{ height: '20px', width: '20px' }} />\n          {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n        </IconButton>\n      </div>\n    </Popover>\n  );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"5\"\n      height=\"5\"\n      viewBox=\"0 0 4 4\"\n      fill=\"none\"\n      className={classNames('absolute top-0.5 right-0.5', className)}\n    >\n      <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagOutlined","Toggle","v","VisibilityIcon","VisibilityOffIcon","LockIcon","LockOpenIcon","Popover","IconButton","Tune","Indicator","classNames"],"mappings":";;;;;;;;;;;;;AA6BA,MAAMA,IAAuB,CAAC,EAAE,UAAAC,IAAW,IAAI,WAAAC,EAAA,MAC7C,gBAAAC,EAAC,OAAA,EAAI,OAAOF,GAAU,QAAQA,GAAU,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAA6B,WAAAC,GACzG,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,oEAAmE,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,GAClK,GAGIC,IAAqB,CAAC,EAAE,UAAAH,IAAW,IAAI,WAAAC,EAAA,MAC3C,gBAAAC,EAAC,OAAA,EAAI,OAAOF,GAAU,QAAQA,GAAU,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAA6B,WAAAC,GACzG,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,gEAA+D,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,GAC9J,GAGIE,IAAe;AAAA,EACnB;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM,gBAAAF,EAACG,GAAA,EAAuB,WAAU,gBAAA,CAAgB;AAAA,EAAA;AAAA,EAE1D;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM,gBAAAH,EAACH,GAAA,EAAqB,WAAU,gBAAA,CAAgB;AAAA,EAAA;AAAA,EAExD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM,gBAAAG,EAACC,GAAA,EAAmB,WAAU,gBAAA,CAAgB;AAAA,EAAA;AAExD,GAEaG,KAAa,CAAC;AAAA,EACzB,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,iBAAAC,IAAkB;AACpB,MAAuB;AACrB,QAAM,CAACC,GAAqBC,CAAsB,IAAIC,EAAS,EAAK,GAC9D,CAACC,GAAiBC,CAAkB,IAAIF,EAA0BG,CAAyB,GAC3F,CAACC,GAAaC,CAAc,IAAIL,EAAS,EAAE,GAE3CM,IAAqB,CAAyCC,GAAQC,MAAuC;AACjH,IAAAN,EAAmB,CAACO,OAAU;AAAA,MAC5B,GAAGA;AAAA,MACH,CAACF,CAAG,GAAGC;AAAA,IAAA,EACP;AAAA,EACJ,GAEME,IAAc,MAAM;AACxB,IAAAR,EAAmB;AAAA,MACjB,YAAY,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,MACxC,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,WAAW;AAAA,IAAA,CACZ,GACDG,EAAe,EAAE,GACjBT,EAAe,IAAI,UAAU;AAAA,EAC/B,GAEMe,IAAc,MAAM;AACxB,IAAAlB,EAAc;AAAA,MACZ,YAAYQ,EAAgB;AAAA,MAC5B,WAAWA,EAAgB;AAAA,MAC3B,YAAYA,EAAgB;AAAA,MAC5B,WAAWA,EAAgB;AAAA,IAAA,CAC5B,GACDN,EAAcM,EAAgB,SAA2B,GACzDP,EAAkB,EAAI,GACtBK,EAAuB,EAAK,GACxBK,KACFR,EAAeQ,GAAaH,EAAgB,WAAW,KAAK;AAAA,EAEhE;AAEA,EAAAW,EAAU,MAAM;AACd,IAAIpB,KAAe,KAAK,UAAUA,CAAW,MAAM,KAAK,UAAUS,CAAe,KAC/EC,EAAmBV,CAAW;AAAA,EAElC,GAAG,CAACA,CAAW,CAAC;AAEhB,QAAMqB,sBACH,OAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAA,gBAAAA,EAACC,GAAA,EAAW,MAAK,eAAc,SAAQ,WAAU,WAAU,sDAAqD,YAAW,SACzH,UAAA;AAAA,UAAA,gBAAA5B,EAAC6B,KAAO,IAAI,EAAE,QAAQ,QAAQ,OAAO,UAAU;AAAA,UAAE;AAAA,QAAA,GACnD;AAAA,QACA,gBAAAF,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,UAAA,gBAAA3B;AAAA,YAAC8B;AAAA,YAAA;AAAA,cACC,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,OAAOhB,EAAgB;AAAA,cACvB,UAAU,CAACO,MAAUF,EAAmB,cAAcE,CAAK;AAAA,cAC3D,SAAS;AAAA,gBACP,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,gBAC5B,EAAE,OAAO,oBAAoB,OAAO,mBAAA;AAAA,cAAmB;AAAA,YACzD;AAAA,UAAA;AAAA,UAEF,gBAAArB;AAAA,YAAC+B;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,aAAY;AAAA,cACZ,OAAOd;AAAA,cACP,UAAU,CAACI,MAAkBH,EAAeG,CAAK;AAAA,cACjD,aAAW;AAAA,YAAA;AAAA,UAAA;AAAA,QACb,EAAA,CACF;AAAA,MAAA,GACF;AAAA,MACA,gBAAAM,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAA,gBAAAA,EAACC,GAAA,EAAW,MAAK,eAAc,SAAQ,WAAU,WAAU,sDAAqD,YAAW,SACzH,UAAA;AAAA,UAAA,gBAAA5B,EAACgC,KAAiB,IAAI,EAAE,QAAQ,QAAQ,OAAO,UAAU;AAAA,UAAE;AAAA,QAAA,GAC7D;AAAA,0BACC,OAAA,EAAI,WAAU,0BACZ,UAAA9B,EAAa,IAAI,CAAC+B,MAAW;AAC5B,gBAAMC,IAAWpB,EAAgB,cAAcmB,EAAO;AACtD,iBACE,gBAAAN;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,YAAW;AAAA,cACX,QAAQD,IAAW,cAAc;AAAA,cACjC,IAAI,eAAeD,EAAO,KAAK;AAAA,cAC/B,SAAS,MAAMd,EAAmB,aAAac,EAAO,KAAmC;AAAA,cACzF,WAAU;AAAA,cAGT,UAAA;AAAA,gBAAAA,EAAO;AAAA,gBACPA,EAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAHHA,EAAO;AAAA,UAAA;AAAA,QAMlB,CAAC,EAAA,CACH;AAAA,MAAA,GACF;AAAA,MACA,gBAAAN,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAA,gBAAAA,EAACC,GAAA,EAAW,MAAK,eAAc,SAAQ,WAAU,WAAU,sDAAqD,YAAW,SACzH,UAAA;AAAA,UAAA,gBAAA5B,EAACoC,KAAmB,IAAI,EAAE,QAAQ,QAAQ,OAAO,UAAU;AAAA,UAAE;AAAA,QAAA,GAC/D;AAAA,QACC1B,KACC,gBAAAiB,EAAC,OAAA,EAAI,WAAU,6GACb,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA,gBAAA3B,EAAC,OAAA,EAAI,WAAU,oFACb,UAAA,gBAAAA,EAACqC,KAAY,IAAI,EAAE,QAAQ,QAAQ,OAAO,OAAA,GAAU,WAAU,oCAAmC,GACnG;AAAA,YACA,gBAAAV,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,cAAA,gBAAA3B,EAAC4B,KAAW,MAAK,SAAQ,SAAQ,UAAS,YAAW,SAAQ,UAAA,cAAA,CAE7D;AAAA,cACA,gBAAA5B,EAAC4B,KAAW,MAAK,eAAc,SAAQ,WAAU,YAAW,YAAW,UAAA,8BAAA,CAEvE;AAAA,YAAA,EAAA,CACF;AAAA,UAAA,GACF;AAAA,UACA,gBAAA5B,EAAC,OAAA,EAAI,WAAU,iCACb,UAAA,gBAAAA;AAAA,YAACsC;AAAA,YAAA;AAAA,cACC,WAAWxB,EAAgB;AAAA,cAC3B,UAAU,CAACyB,MAAMpB,EAAmB,cAAcoB,CAAC;AAAA,cACnD,YAAU;AAAA,cACV,MAAM;AAAA,gBACJ,aAAa,gBAAAvC,EAACwC,GAAA,EAAe,WAAU,yEAAA,CAAyE;AAAA,gBAChH,eAAe,gBAAAxC,EAACyC,GAAA,EAAkB,WAAU,yEAAA,CAAyE;AAAA,cAAA;AAAA,cAEvH,UAAQ;AAAA,YAAA;AAAA,UAAA,EACV,CACF;AAAA,QAAA,GACF;AAAA,QAEF,gBAAAd,EAAC,OAAA,EAAI,WAAU,6GACb,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA,gBAAA3B,EAAC,SAAI,WAAU,oFACb,4BAAC0C,GAAA,EAAS,WAAU,kDAAiD,EAAA,CACvE;AAAA,YACA,gBAAAf,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,cAAA,gBAAA3B,EAAC4B,KAAW,MAAK,SAAQ,SAAQ,UAAS,YAAW,SAAQ,UAAA,aAAA,CAE7D;AAAA,cACA,gBAAA5B,EAAC4B,KAAW,MAAK,eAAc,SAAQ,WAAU,YAAW,YAAW,UAAA,yBAAA,CAEvE;AAAA,YAAA,EAAA,CACF;AAAA,UAAA,GACF;AAAA,UACA,gBAAA5B,EAAC,OAAA,EAAI,WAAU,iCACb,UAAA,gBAAAA;AAAA,YAACsC;AAAA,YAAA;AAAA,cACC,WAAWxB,EAAgB;AAAA,cAC3B,UAAU,CAACyB,MAAMpB,EAAmB,aAAaoB,CAAC;AAAA,cAClD,YAAU;AAAA,cACV,UAAQ;AAAA,cACR,MAAM;AAAA,gBACJ,aAAa,gBAAAvC,EAAC0C,GAAA,EAAS,WAAU,yEAAA,CAAyE;AAAA,gBAC1G,eAAe,gBAAA1C,EAAC2C,GAAA,EAAa,WAAU,mDAAA,CAAmD;AAAA,cAAA;AAAA,YAC5F;AAAA,UAAA,EACF,CACF;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IACA,gBAAAhB,EAAC,OAAA,EAAI,WAAU,kFACb,UAAA;AAAA,MAAA,gBAAA3B,EAACmC,GAAA,EAAO,IAAG,yBAAwB,YAAW,WAAU,QAAO,UAAS,WAAU,UAAS,SAASZ,GAAa,UAAA,SAEjH;AAAA,MACA,gBAAAvB;AAAA,QAACmC;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,YAAW;AAAA,UACX,QAAO;AAAA,UACP,WAAU;AAAA,UACV,SAASX;AAAA,UACT,UAAU,KAAK,UAAUnB,CAAW,MAAM,KAAK,UAAUS,CAAe,KAAKG,MAAgB;AAAA,UAC9F,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,EAAA,CACF;AAAA,EAAA,GACF;AAGF,SACE,gBAAAjB;AAAA,IAAC4C;AAAA,IAAA;AAAA,MACC,YAAY;AAAA,QACV,MAAM;AAAA,MAAA;AAAA,MAER,WAAU;AAAA,MACV,SAAAlB;AAAA,MACA,SAAS,CAAC,OAAO;AAAA,MACjB,OAAO;AAAA,MACP,MAAMf;AAAA,MACN,cAAcC;AAAA,MAEd,UAAA,gBAAAZ,EAAC,OAAA,EAAI,WAAU,4DACb,UAAA,gBAAA2B;AAAA,QAACkB;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,SAAS,MAAMjC,EAAuB,EAAI;AAAA,UAE1C,UAAA;AAAA,YAAA,gBAAAZ,EAAC8C,KAAK,IAAI,EAAE,QAAQ,QAAQ,OAAO,UAAU;AAAA,YAC5C,KAAK,UAAUhC,CAAe,MAAM,KAAK,UAAUE,CAAyB,KAAK,gBAAAhB,EAAC+C,GAAA,EAAU,WAAU,mBAAA,CAAmB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EAC5H,CACF;AAAA,IAAA;AAAA,EAAA;AAGN,GAEaA,IAAY,CAAC,EAAE,WAAAhD,QAExB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAWgD,EAAW,8BAA8BjD,CAAS;AAAA,IAE7D,UAAA,gBAAAC,EAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,MAAK,eAAA,CAAe;AAAA,EAAA;AAAA;"}