@edifice.io/react 2.0.0-develop-rc.4 → 2.0.0-develop-rc.10

package/dist/components/Modal/ModalHeader.js

@@ -1,27 +1,28 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { IconButton } from "../Button/IconButton.js";
-import { useModalContext } from "./ModalContext.js";
-import { Icon } from "../Icon/Icon.js";
-const ModalHeader = (props) => {
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { useRef as m, useEffect as d } from "react";
+import { useTranslation as f } from "react-i18next";
+import { IconButton as u } from "../Button/IconButton.js";
+import { useModalContext as p } from "./ModalContext.js";
+import { Icon as b } from "../Icon/Icon.js";
+const j = (a) => {
   const {
-    onModalClose,
-    children
-  } = props, {
-    ariaLabelId,
-    focusId
-  } = useModalContext(), closeButtonRef = useRef(null), {
-    t
-  } = useTranslation();
-  return useEffect(() => {
-    var _a;
-    focusId || (_a = closeButtonRef.current) == null || _a.focus();
-  }, [focusId]), /* @__PURE__ */ jsxs("div", { className: "modal-header", children: [
-    /* @__PURE__ */ jsx("h2", { id: ariaLabelId, className: "modal-title", tabIndex: -1, children }),
-    /* @__PURE__ */ jsx(IconButton, { ref: closeButtonRef, "aria-label": t("close"), color: "tertiary", icon: /* @__PURE__ */ jsx(Icon, { name: "close" }), type: "button", variant: "ghost", title: t("close"), onClick: onModalClose, className: "btn-close" })
+    onModalClose: l,
+    children: n
+  } = a, {
+    ariaLabelId: c,
+    focusId: t
+  } = p(), e = m(null), {
+    t: r
+  } = f();
+  return d(() => {
+    var s;
+    t || (s = e.current) == null || s.focus();
+  }, [t]), /* @__PURE__ */ i("div", { className: "modal-header", children: [
+    /* @__PURE__ */ o("h2", { id: c, className: "modal-title", tabIndex: -1, children: n }),
+    /* @__PURE__ */ o(u, { ref: e, "aria-label": r("close"), color: "tertiary", icon: /* @__PURE__ */ o(b, { name: "close" }), type: "button", variant: "ghost", title: r("close"), onClick: l, className: "btn-close" })
   ] });
 };
 export {
-  ModalHeader as default
+  j as default
 };
+//# sourceMappingURL=ModalHeader.js.map

package/dist/components/Modal/ModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef } from 'react';\n\nimport { useTranslation } from 'react-i18next';\n\nimport { Icon } from '..';\nimport IconButton from '../Button/IconButton';\nimport { useModalContext } from './ModalContext';\n\nexport interface ModalHeaderProps {\n  /**\n   * Method called on modal close\n   */\n  onModalClose: () => void;\n  /**\n   * ReactNode\n   */\n  children: ReactNode;\n}\n\n/**\n * Modal Header\n */\nconst ModalHeader = (props: ModalHeaderProps) => {\n  const { onModalClose, children } = props;\n  const { ariaLabelId, focusId } = useModalContext();\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (!focusId) {\n      closeButtonRef.current?.focus();\n    }\n  }, [focusId]);\n\n  return (\n    <div className=\"modal-header\">\n      <h2 id={ariaLabelId} className=\"modal-title\" tabIndex={-1}>\n        {children}\n      </h2>\n      <IconButton\n        ref={closeButtonRef}\n        aria-label={t('close')}\n        color=\"tertiary\"\n        icon={<Icon name=\"close\" />}\n        type=\"button\"\n        variant=\"ghost\"\n        title={t('close')}\n        onClick={onModalClose}\n        className=\"btn-close\"\n      />\n    </div>\n  );\n};\n\nModalHeader.displayName = 'Modal.Header';\n\nexport default ModalHeader;\n"],"names":["ModalHeader","props","onModalClose","children","ariaLabelId","focusId","useModalContext","closeButtonRef","useRef","t","useTranslation","useEffect","current","focus","jsxs","jsx","IconButton","Icon"],"mappings":";;;;;;AAsBMA,MAAAA,IAAcA,CAACC,MAA4B;AACzC,QAAA;AAAA,IAAEC,cAAAA;AAAAA,IAAcC,UAAAA;AAAAA,EAAaF,IAAAA,GAC7B;AAAA,IAAEG,aAAAA;AAAAA,IAAaC,SAAAA;AAAAA,MAAYC,EAAgB,GAC3CC,IAAiBC,EAA0B,IAAI,GAC/C;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe;AAE7BC,SAAAA,EAAU,MAAM;;AACd,IAAKN,MACHE,IAAAA,EAAeK,YAAfL,QAAAA,EAAwBM;AAAAA,EAC1B,GACC,CAACR,CAAO,CAAC,GAGV,gBAAAS,EAAC,OAAI,EAAA,WAAU,gBACb,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAG,IAAIX,GAAa,WAAU,eAAc,UAAU,IACpDD,UAAAA,GACH;AAAA,IACA,gBAAAY,EAACC,GACC,EAAA,KAAKT,GACL,cAAYE,EAAE,OAAO,GACrB,OAAM,YACN,MAAO,gBAAAM,EAAAE,GAAA,EAAK,MAAK,QAAA,CAAU,GAC3B,MAAK,UACL,SAAQ,SACR,OAAOR,EAAE,OAAO,GAChB,SAASP,GACT,WAAU,YAAW,CAAA;AAAA,EAEzB,EAAA,CAAA;AAEJ;"}

package/dist/components/Modal/ModalSubtitle.js

@@ -1,5 +1,6 @@
-import { jsx } from "react/jsx-runtime";
-const ModalSubtitle = (props) => /* @__PURE__ */ jsx("p", { className: "modal-subtitle", children: props.children });
+import { jsx as t } from "react/jsx-runtime";
+const a = (l) => /* @__PURE__ */ t("p", { className: "modal-subtitle", children: l.children });
 export {
-  ModalSubtitle as default
+  a as default
 };
+//# sourceMappingURL=ModalSubtitle.js.map

package/dist/components/Modal/ModalSubtitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalSubtitle.js","sources":["../../../src/components/Modal/ModalSubtitle.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport interface ModalSubtitleProps {\n  children: ReactNode;\n}\n/**\n * Modal Subtitle\n */\nconst ModalSubtitle = (props: ModalSubtitleProps) => (\n  <p className=\"modal-subtitle\">{props.children}</p>\n);\n\nModalSubtitle.displayName = 'Modal.Subtitle';\n\nexport default ModalSubtitle;\n"],"names":["ModalSubtitle","props","jsx","children"],"mappings":";AAQMA,MAAAA,IAAgBA,CAACC,MACrB,gBAAAC,EAAC,OAAE,WAAU,kBAAkBD,YAAME,SAAS,CAAA;"}

package/dist/components/Popover/Popover.js

@@ -1,34 +1,34 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useTransition, animated } from "@react-spring/web";
-import clsx from "clsx";
-const PopoverHeader = ({
-  children,
-  className
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { useTransition as m, animated as v } from "@react-spring/web";
+import s from "clsx";
+const N = ({
+  children: o,
+  className: r
 }) => {
-  const classes = clsx("popover-header", className);
-  return /* @__PURE__ */ jsx("div", { className: classes, children });
-}, PopoverBody = ({
-  children,
-  className
+  const e = s("popover-header", r);
+  return /* @__PURE__ */ t("div", { className: e, children: o });
+}, P = ({
+  children: o,
+  className: r
 }) => {
-  const classes = clsx("popover-body", className);
-  return /* @__PURE__ */ jsx("div", { className: classes, children });
-}, PopoverFooter = ({
-  children,
-  className
+  const e = s("popover-body", r);
+  return /* @__PURE__ */ t("div", { className: e, children: o });
+}, g = ({
+  children: o,
+  className: r
 }) => {
-  const classes = clsx("popover-footer p-8", className);
-  return /* @__PURE__ */ jsx("div", { className: classes, children });
-}, Popover = /* @__PURE__ */ forwardRef(({
-  children,
-  className,
-  id,
-  isVisible,
-  ...restProps
-}, ref) => {
-  const classes = clsx("popover d-block position-absolute top-100 start-50 translate-middle-x", className);
-  return useTransition(isVisible, {
+  const e = s("popover-footer p-8", r);
+  return /* @__PURE__ */ t("div", { className: e, children: o });
+}, h = /* @__PURE__ */ d(({
+  children: o,
+  className: r,
+  id: e,
+  isVisible: a,
+  ...i
+}, n) => {
+  const p = s("popover d-block position-absolute top-100 start-50 translate-middle-x", r);
+  return m(a, {
     from: {
       opacity: 0
     },
@@ -41,11 +41,12 @@ const PopoverHeader = ({
     config: {
       duration: 0
     }
-  })((style, isVisible2) => isVisible2 && /* @__PURE__ */ jsx(animated.div, { ref, "aria-labelledby": id, className: classes, role: "tooltip", style, ...restProps, children }));
+  })((c, l) => l && /* @__PURE__ */ t(v.div, { ref: n, "aria-labelledby": e, className: p, role: "tooltip", style: c, ...i, children: o }));
 });
 export {
-  Popover,
-  PopoverBody,
-  PopoverFooter,
-  PopoverHeader
+  h as Popover,
+  P as PopoverBody,
+  g as PopoverFooter,
+  N as PopoverHeader
 };
+//# sourceMappingURL=Popover.js.map

package/dist/components/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { ReactNode, forwardRef } from 'react';\n\nimport { animated, useTransition } from '@react-spring/web';\nimport clsx from 'clsx';\n\nexport interface PopoverProps {\n  /**\n   * Popover id for a11y\n   */\n  id?: string;\n  /**\n   * When Popover is visible\n   */\n  isVisible?: boolean;\n  /**\n   * React Node\n   */\n  children: ReactNode;\n  /**\n   * Optional class for styling purpose\n   */\n  className?: string;\n}\n\nexport interface PopoverElementProps {\n  /**\n   * React Node\n   */\n  children: ReactNode;\n  /**\n   * Optional class for styling purpose\n   */\n  className?: string;\n}\n\nexport const PopoverHeader = ({ children, className }: PopoverProps) => {\n  const classes = clsx('popover-header', className);\n  return <div className={classes}>{children}</div>;\n};\n\nexport const PopoverBody = ({ children, className }: PopoverProps) => {\n  const classes = clsx('popover-body', className);\n  return <div className={classes}>{children}</div>;\n};\n\nexport const PopoverFooter = ({ children, className }: PopoverProps) => {\n  const classes = clsx('popover-footer p-8', className);\n  return <div className={classes}>{children}</div>;\n};\n\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(\n  ({ children, className, id, isVisible, ...restProps }, ref) => {\n    const classes = clsx(\n      'popover d-block position-absolute top-100 start-50 translate-middle-x',\n      className,\n    );\n\n    const transition = useTransition(isVisible, {\n      from: { opacity: 0 },\n      enter: { opacity: 1 },\n      leave: { opacity: 0 },\n      config: { duration: 0 },\n    });\n\n    return transition(\n      (style, isVisible) =>\n        isVisible && (\n          <animated.div\n            ref={ref}\n            aria-labelledby={id}\n            className={classes}\n            role=\"tooltip\"\n            style={style}\n            {...restProps}\n          >\n            {children}\n          </animated.div>\n        ),\n    );\n  },\n);\n\nPopover.displayName = 'Popover';\n"],"names":["PopoverHeader","children","className","classes","clsx","jsx","PopoverBody","PopoverFooter","Popover","id","isVisible","restProps","ref","transition","useTransition","from","opacity","enter","leave","config","duration","style","animated"],"mappings":";;;;AAmCO,MAAMA,IAAgBA,CAAC;AAAA,EAAEC,UAAAA;AAAAA,EAAUC,WAAAA;AAAwB,MAAM;AAChEC,QAAAA,IAAUC,EAAK,kBAAkBF,CAAS;AAChD,SAAQ,gBAAAG,EAAA,OAAA,EAAI,WAAWF,GAAUF,UAAAA,EAAS,CAAA;AAC5C,GAEaK,IAAcA,CAAC;AAAA,EAAEL,UAAAA;AAAAA,EAAUC,WAAAA;AAAwB,MAAM;AAC9DC,QAAAA,IAAUC,EAAK,gBAAgBF,CAAS;AAC9C,SAAQ,gBAAAG,EAAA,OAAA,EAAI,WAAWF,GAAUF,UAAAA,EAAS,CAAA;AAC5C,GAEaM,IAAgBA,CAAC;AAAA,EAAEN,UAAAA;AAAAA,EAAUC,WAAAA;AAAwB,MAAM;AAChEC,QAAAA,IAAUC,EAAK,sBAAsBF,CAAS;AACpD,SAAQ,gBAAAG,EAAA,OAAA,EAAI,WAAWF,GAAUF,UAAAA,EAAS,CAAA;AAC5C,GAEaO,sBACX,CAAC;AAAA,EAAEP,UAAAA;AAAAA,EAAUC,WAAAA;AAAAA,EAAWO,IAAAA;AAAAA,EAAIC,WAAAA;AAAAA,EAAW,GAAGC;AAAU,GAAGC,MAAQ;AACvDT,QAAAA,IAAUC,EACd,yEACAF,CACF;AASOW,SAPYC,EAAcJ,GAAW;AAAA,IAC1CK,MAAM;AAAA,MAAEC,SAAS;AAAA,IAAE;AAAA,IACnBC,OAAO;AAAA,MAAED,SAAS;AAAA,IAAE;AAAA,IACpBE,OAAO;AAAA,MAAEF,SAAS;AAAA,IAAE;AAAA,IACpBG,QAAQ;AAAA,MAAEC,UAAU;AAAA,IAAE;AAAA,EAAA,CACvB,EAGC,CAACC,GAAOX,MACNA,KACG,gBAAAL,EAAAiB,EAAS,KAAT,EACC,KAAAV,GACA,mBAAiBH,GACjB,WAAWN,GACX,MAAK,WACL,OAAAkB,GACA,GAAIV,GAEHV,UAAAA,EACH,CAAA,CAEN;AACF,CACF;"}

package/dist/components/Radio/Radio.js

@@ -1,32 +1,33 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
-import clsx from "clsx";
-const Radio = /* @__PURE__ */ forwardRef(({
-  model,
-  icon,
-  label = !1,
-  disabled = !1,
-  checked,
-  ...restProps
-}, ref) => {
-  const id = useId(), radioProps = {
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import { forwardRef as p, useId as h } from "react";
+import l from "clsx";
+const k = /* @__PURE__ */ p(({
+  model: o,
+  icon: e,
+  label: t = !1,
+  disabled: c = !1,
+  checked: m,
+  ...a
+}, d) => {
+  const i = h(), n = {
     type: "radio",
-    checked,
-    disabled,
-    ref,
-    className: clsx(restProps.className, "form-check-input c-pointer", icon && "d-none"),
-    id
-  }, inputProps = {
-    ...restProps,
-    ...radioProps
+    checked: m,
+    disabled: c,
+    ref: d,
+    className: l(a.className, "form-check-input c-pointer", e && "d-none"),
+    id: i
+  }, r = {
+    ...a,
+    ...n
   };
-  return /* @__PURE__ */ jsxs("div", { className: clsx("form-check d-flex align-items-center gap-8", icon && "ps-0"), children: [
-    /* @__PURE__ */ jsx("input", { ...inputProps }),
-    icon && /* @__PURE__ */ jsx("label", { htmlFor: inputProps.id, className: clsx("c-pointer", model !== restProps.value && "text-muted"), children: icon }),
-    !icon && label && /* @__PURE__ */ jsx("label", { className: "form-check-label", htmlFor: inputProps.id, children: label })
+  return /* @__PURE__ */ f("div", { className: l("form-check d-flex align-items-center gap-8", e && "ps-0"), children: [
+    /* @__PURE__ */ s("input", { ...r }),
+    e && /* @__PURE__ */ s("label", { htmlFor: r.id, className: l("c-pointer", o !== a.value && "text-muted"), children: e }),
+    !e && t && /* @__PURE__ */ s("label", { className: "form-check-label", htmlFor: r.id, children: t })
   ] });
 });
 export {
-  Radio,
-  Radio as default
+  k as Radio,
+  k as default
 };
+//# sourceMappingURL=Radio.js.map

package/dist/components/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { ChangeEvent, forwardRef, ReactNode, Ref, useId } from 'react';\n\nimport clsx from 'clsx';\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * State controlling activated radio group\n   */\n  model: string | boolean | number;\n  /**\n   * Use onChange event Handler to set new value of model\n   */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * If checked\n   */\n  checked?: boolean;\n  /**\n   * Label of the radio checkbox\n   */\n  label?: string | false;\n  /**\n   * Replace with an icon\n   */\n  icon?: ReactNode;\n}\n\nexport const Radio = forwardRef(\n  (\n    {\n      model,\n      icon,\n      label = false,\n      disabled = false,\n      checked,\n      ...restProps\n    }: RadioProps,\n    ref: Ref<HTMLInputElement>,\n  ) => {\n    const id = useId();\n\n    const radioProps = {\n      type: 'radio',\n      checked,\n      disabled,\n      ref,\n      className: clsx(\n        restProps.className,\n        'form-check-input c-pointer',\n        icon && 'd-none',\n      ),\n      id,\n    };\n\n    const inputProps = {\n      ...restProps,\n      ...radioProps,\n    };\n\n    return (\n      <div\n        className={clsx(\n          'form-check d-flex align-items-center gap-8',\n          icon && 'ps-0',\n        )}\n      >\n        <input {...inputProps} />\n        {icon && (\n          <label\n            htmlFor={inputProps.id}\n            className={clsx(\n              'c-pointer',\n              model !== restProps.value && 'text-muted',\n            )}\n          >\n            {icon}\n          </label>\n        )}\n        {!icon && label && (\n          <label className=\"form-check-label\" htmlFor={inputProps.id}>\n            {label}\n          </label>\n        )}\n      </div>\n    );\n  },\n);\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"names":["Radio","model","icon","label","disabled","checked","restProps","ref","id","useId","radioProps","type","className","clsx","inputProps","jsx","value"],"mappings":";;;AA4BaA,MAAAA,sBACX,CACE;AAAA,EACEC,OAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,OAAAA,IAAQ;AAAA,EACRC,UAAAA,IAAW;AAAA,EACXC,SAAAA;AAAAA,EACA,GAAGC;AACO,GACZC,MACG;AACH,QAAMC,IAAKC,KAELC,IAAa;AAAA,IACjBC,MAAM;AAAA,IACNN,SAAAA;AAAAA,IACAD,UAAAA;AAAAA,IACAG,KAAAA;AAAAA,IACAK,WAAWC,EACTP,EAAUM,WACV,8BACAV,KAAQ,QACV;AAAA,IACAM,IAAAA;AAAAA,EAAAA,GAGIM,IAAa;AAAA,IACjB,GAAGR;AAAAA,IACH,GAAGI;AAAAA,EAAAA;AAGL,2BACG,OACC,EAAA,WAAWG,EACT,8CACAX,KAAQ,MACV,GAEA,UAAA;AAAA,IAAC,gBAAAa,EAAA,SAAA,EAAM,GAAID,GAAW;AAAA,IACrBZ,KACC,gBAAAa,EAAC,SACC,EAAA,SAASD,EAAWN,IACpB,WAAWK,EACT,aACAZ,MAAUK,EAAUU,SAAS,YAC/B,GAECd,UACHA,GAAA;AAAA,IAED,CAACA,KAAQC,KACP,gBAAAY,EAAA,SAAA,EAAM,WAAU,oBAAmB,SAASD,EAAWN,IACrDL,UACHA,EAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CACF;"}

package/dist/components/SearchBar/SearchBar.js

@@ -1,37 +1,38 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import { FormControl } from "../Form/FormControl.js";
-import { SearchButton } from "../Button/SearchButton.js";
-import { Icon } from "../Icon/Icon.js";
-const SearchBar = ({
-  isVariant = !1,
-  size = "md",
-  placeholder = "search",
-  className,
-  disabled,
-  onChange,
-  onClick,
-  ...restProps
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import s from "clsx";
+import { useTranslation as x } from "react-i18next";
+import { FormControl as a } from "../Form/FormControl.js";
+import { SearchButton as N } from "../Button/SearchButton.js";
+import { Icon as c } from "../Icon/Icon.js";
+const S = ({
+  isVariant: r = !1,
+  size: m = "md",
+  placeholder: n = "search",
+  className: p,
+  disabled: l,
+  onChange: d,
+  onClick: o,
+  ...h
 }) => {
   const {
     t
-  } = useTranslation(), searchbar = clsx(className, {
-    "input-group": !isVariant,
-    "position-relative": isVariant
-  }), input = clsx({
-    "border-end-0": !isVariant,
-    "ps-48": isVariant
-  }), handleClick = () => {
-    onClick == null || onClick();
+  } = x(), i = s(p, {
+    "input-group": !r,
+    "position-relative": r
+  }), u = s({
+    "border-end-0": !r,
+    "ps-48": r
+  }), b = () => {
+    o == null || o();
   };
-  return /* @__PURE__ */ jsxs(FormControl, { id: "search-bar", className: searchbar, children: [
-    isVariant && /* @__PURE__ */ jsx("div", { className: "position-absolute z-1 top-50 start-0 translate-middle-y border-0 ps-12 bg-transparent", children: /* @__PURE__ */ jsx(Icon, { name: "search" }) }),
-    /* @__PURE__ */ jsx(FormControl.Input, { type: "search", placeholder: t(placeholder), size, noValidationIcon: !0, className: input, onChange, disabled, ...restProps }),
-    !isVariant && /* @__PURE__ */ jsx(SearchButton, { type: "submit", "aria-label": t("search"), icon: /* @__PURE__ */ jsx(Icon, { name: "search" }), className: "border-start-0", onClick: handleClick })
+  return /* @__PURE__ */ f(a, { id: "search-bar", className: i, children: [
+    r && /* @__PURE__ */ e("div", { className: "position-absolute z-1 top-50 start-0 translate-middle-y border-0 ps-12 bg-transparent", children: /* @__PURE__ */ e(c, { name: "search" }) }),
+    /* @__PURE__ */ e(a.Input, { type: "search", placeholder: t(n), size: m, noValidationIcon: !0, className: u, onChange: d, disabled: l, ...h }),
+    !r && /* @__PURE__ */ e(N, { type: "submit", "aria-label": t("search"), icon: /* @__PURE__ */ e(c, { name: "search" }), className: "border-start-0", onClick: b })
   ] });
 };
 export {
-  SearchBar,
-  SearchBar as default
+  S as SearchBar,
+  S as default
 };
+//# sourceMappingURL=SearchBar.js.map

package/dist/components/SearchBar/SearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.js","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { ChangeEvent } from 'react';\n\nimport clsx from 'clsx';\nimport { useTranslation } from 'react-i18next';\n\nimport { Size } from '../../types';\nimport { SearchButton } from '../Button';\nimport FormControl from '../Form/FormControl';\nimport { Icon } from '../Icon';\n\nexport interface BaseProps {\n  /**\n   * String or Template literal with React i18next namespace\n   */\n  placeholder?: string;\n  /**\n   * Control SearchBar size\n   */\n  size?: Exclude<Size, 'sm'>;\n  /**\n   * Disabled status\n   */\n  disabled?: boolean;\n  /**\n   * Optional class for styling purpose\n   */\n  className?: string;\n  /**\n   * ChangeEvent Handler\n   */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n}\n\ntype DefaultSearchBar = {\n  /**\n   * Switch between button or dynamic search bar\n   */\n  isVariant: false;\n  /**\n   * Handle Search with Default SearchBar\n   */\n  onClick: () => void;\n};\n\ntype DynamicSearchBar = {\n  /**\n   * Switch between button or dynamic search bar\n   */\n  isVariant: true;\n  /**\n   * Handle Search with Default SearchBar\n   */\n  onClick?: undefined;\n};\n\nexport type Props = DefaultSearchBar | DynamicSearchBar;\n\nexport type SearchBarProps = BaseProps & Props;\n\nexport const SearchBar = ({\n  isVariant = false,\n  size = 'md',\n  placeholder = 'search',\n  className,\n  disabled,\n  onChange,\n  onClick,\n  ...restProps\n}: SearchBarProps) => {\n  const { t } = useTranslation();\n\n  const searchbar = clsx(className, {\n    'input-group': !isVariant,\n    'position-relative': isVariant,\n  });\n\n  const input = clsx({\n    'border-end-0': !isVariant,\n    'ps-48': isVariant,\n  });\n\n  const handleClick = () => {\n    onClick?.();\n  };\n\n  return (\n    <FormControl id=\"search-bar\" className={searchbar}>\n      {isVariant && (\n        <div className=\"position-absolute z-1 top-50 start-0 translate-middle-y border-0 ps-12 bg-transparent\">\n          <Icon name=\"search\" />\n        </div>\n      )}\n      <FormControl.Input\n        type=\"search\"\n        placeholder={t(placeholder)}\n        size={size}\n        noValidationIcon\n        className={input}\n        onChange={onChange}\n        disabled={disabled}\n        {...restProps}\n      />\n      {!isVariant && (\n        <SearchButton\n          type=\"submit\"\n          aria-label={t('search')}\n          icon={<Icon name=\"search\" />}\n          className=\"border-start-0\"\n          onClick={handleClick}\n        />\n      )}\n    </FormControl>\n  );\n};\n\nSearchBar.displayName = 'SearchBar';\nexport default SearchBar;\n"],"names":["SearchBar","isVariant","size","placeholder","className","disabled","onChange","onClick","restProps","t","useTranslation","searchbar","clsx","input","handleClick","jsxs","FormControl","jsx","Icon","SearchButton"],"mappings":";;;;;;AA2DO,MAAMA,IAAYA,CAAC;AAAA,EACxBC,WAAAA,IAAY;AAAA,EACZC,MAAAA,IAAO;AAAA,EACPC,aAAAA,IAAc;AAAA,EACdC,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACW,MAAM;AACd,QAAA;AAAA,IAAEC;AAAAA,MAAMC,EAAe,GAEvBC,IAAYC,EAAKR,GAAW;AAAA,IAChC,eAAe,CAACH;AAAAA,IAChB,qBAAqBA;AAAAA,EAAAA,CACtB,GAEKY,IAAQD,EAAK;AAAA,IACjB,gBAAgB,CAACX;AAAAA,IACjB,SAASA;AAAAA,EAAAA,CACV,GAEKa,IAAcA,MAAM;AACd,IAAAP,KAAA,QAAAA;AAAA,EAAA;AAGZ,SACG,gBAAAQ,EAAAC,GAAA,EAAY,IAAG,cAAa,WAAWL,GACrCV,UAAAA;AAAAA,IACCA,KAAA,gBAAAgB,EAAC,SAAI,WAAU,yFACb,4BAACC,GAAK,EAAA,MAAK,UAAQ,EACrB,CAAA;AAAA,sBAEDF,EAAY,OAAZ,EACC,MAAK,UACL,aAAaP,EAAEN,CAAW,GAC1B,MAAAD,GACA,kBAAgB,IAChB,WAAWW,GACX,UAAAP,GACA,UAAAD,GACIG,GAAAA,GAAU;AAAA,IAEf,CAACP,KACA,gBAAAgB,EAACE,KACC,MAAK,UACL,cAAYV,EAAE,QAAQ,GACtB,MAAM,gBAAAQ,EAACC,KAAK,MAAK,SAAW,CAAA,GAC5B,WAAU,kBACV,SAASJ,GAEZ;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/components/Select/Select.js

@@ -1,38 +1,39 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { Dropdown } from "../Dropdown/Dropdown.js";
-import SelectTrigger from "./SelectTrigger.js";
-const Select = ({
-  icon,
-  options,
-  overflow,
-  block,
-  variant,
-  size,
-  disabled,
-  placeholderOption,
-  onValueChange
+import { jsxs as S, jsx as r } from "react/jsx-runtime";
+import { useState as T, useEffect as k } from "react";
+import { useTranslation as w } from "react-i18next";
+import { Dropdown as o } from "../Dropdown/Dropdown.js";
+import D from "./SelectTrigger.js";
+const q = ({
+  icon: f,
+  options: t,
+  overflow: s,
+  block: a,
+  variant: b,
+  size: m,
+  disabled: i,
+  placeholderOption: u,
+  onValueChange: l
 }) => {
-  const [localValue, setLocalValue] = useState(), {
-    t
-  } = useTranslation();
-  useEffect(() => {
-    if (localValue) {
-      const value = typeof localValue == "object" ? localValue.value : localValue;
-      onValueChange == null || onValueChange(value);
+  const [c, j] = T(), {
+    t: d
+  } = w();
+  k(() => {
+    if (c) {
+      const e = typeof c == "object" ? c.value : c;
+      l == null || l(e);
     }
-  }, [localValue]);
-  const label = typeof localValue == "object" ? localValue.label : localValue, iconChange = typeof localValue == "object" ? localValue.icon : void 0;
-  return /* @__PURE__ */ jsxs(Dropdown, { overflow, block, children: [
-    /* @__PURE__ */ jsx(SelectTrigger, { icon: iconChange || icon, label: t(label || placeholderOption), variant, size, disabled }),
-    /* @__PURE__ */ jsx(Dropdown.Menu, { role: "listbox", children: options == null ? void 0 : options.map((option) => {
-      const value = typeof option == "object" ? option.value : option, label2 = typeof option == "object" ? option.label : option, icon2 = typeof option == "object" ? option.icon : void 0;
-      return /* @__PURE__ */ jsx(Dropdown.Item, { type: "action", onClick: () => setLocalValue(option), icon: icon2, children: label2 }, value);
+  }, [c]);
+  const n = typeof c == "object" ? c.label : c, y = typeof c == "object" ? c.icon : void 0;
+  return /* @__PURE__ */ S(o, { overflow: s, block: a, children: [
+    /* @__PURE__ */ r(D, { icon: y || f, label: d(n || u), variant: b, size: m, disabled: i }),
+    /* @__PURE__ */ r(o.Menu, { role: "listbox", children: t == null ? void 0 : t.map((e) => {
+      const v = typeof e == "object" ? e.value : e, x = typeof e == "object" ? e.label : e, p = typeof e == "object" ? e.icon : void 0;
+      return /* @__PURE__ */ r(o.Item, { type: "action", onClick: () => j(e), icon: p, children: x }, v);
     }) })
   ] });
 };
 export {
-  Select,
-  Select as default
+  q as Select,
+  q as default
 };
+//# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useTranslation } from 'react-i18next';\n\nimport Dropdown, { DropdownProps } from '../Dropdown/Dropdown';\nimport { DropdownTriggerProps } from '../Dropdown/DropdownTrigger';\nimport SelectTrigger from './SelectTrigger';\n\nexport interface OptionsType {\n  /**\n   * Select Option Value\n   */\n  value: string;\n  /**\n   * Option Option Label\n   */\n  label: string;\n  /**\n   * Icon Left Options\n   */\n  icon?: JSX.Element;\n}\n\nexport interface SelectProps\n  extends Omit<DropdownProps, 'children'>,\n    Omit<DropdownTriggerProps, 'badgeContent'> {\n  /**\n   * Default select label\n   */\n  placeholderOption: string;\n  /**\n   * Select options\n   * */\n  options: OptionsType[] | string[];\n  /**\n   * Callback to get value\n   */\n  onValueChange?: (option: OptionsType | string) => void;\n}\n\n/**\n *\n * Select component is based on Dropdown Component. It extends `Dropdown` and `Dropdown.Trigger` props `block`, `overflow`, `icon`, `variant`, `size`, `disabled`\n */\n\nexport const Select = ({\n  icon,\n  options,\n  overflow,\n  block,\n  variant,\n  size,\n  disabled,\n  placeholderOption,\n  onValueChange,\n}: SelectProps) => {\n  const [localValue, setLocalValue] = useState<OptionsType | string>();\n\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (localValue) {\n      const value =\n        typeof localValue === 'object' ? localValue.value : localValue;\n      onValueChange?.(value);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [localValue]);\n\n  const label = typeof localValue === 'object' ? localValue.label : localValue;\n  const iconChange =\n    typeof localValue === 'object' ? localValue.icon : undefined;\n\n  return (\n    <Dropdown overflow={overflow} block={block}>\n      <SelectTrigger\n        icon={iconChange || icon}\n        label={t(label || placeholderOption)}\n        variant={variant}\n        size={size}\n        disabled={disabled}\n      />\n      <Dropdown.Menu role=\"listbox\">\n        {options?.map((option) => {\n          const value = typeof option === 'object' ? option.value : option;\n          const label = typeof option === 'object' ? option.label : option;\n          const icon = typeof option === 'object' ? option.icon : undefined;\n          return (\n            <Dropdown.Item\n              type=\"action\"\n              key={value}\n              onClick={() => setLocalValue(option)}\n              icon={icon}\n            >\n              {label}\n            </Dropdown.Item>\n          );\n        })}\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n};\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"names":["Select","icon","options","overflow","block","variant","size","disabled","placeholderOption","onValueChange","localValue","setLocalValue","useState","t","useTranslation","useEffect","value","label","iconChange","undefined","jsxs","Dropdown","jsx","SelectTrigger","map","option"],"mappings":";;;;;AA6CO,MAAMA,IAASA,CAAC;AAAA,EACrBC,MAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,mBAAAA;AAAAA,EACAC,eAAAA;AACW,MAAM;AACjB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAA+B,GAE7D;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe;AAE7BC,EAAAA,EAAU,MAAM;AACd,QAAIL,GAAY;AACd,YAAMM,IACJ,OAAON,KAAe,WAAWA,EAAWM,QAAQN;AACtDD,MAAAA,KAAAA,QAAAA,EAAgBO;AAAAA,IAClB;AAAA,EAAA,GAEC,CAACN,CAAU,CAAC;AAEf,QAAMO,IAAQ,OAAOP,KAAe,WAAWA,EAAWO,QAAQP,GAC5DQ,IACJ,OAAOR,KAAe,WAAWA,EAAWT,OAAOkB;AAGnD,SAAA,gBAAAC,EAACC,GAAS,EAAA,UAAAlB,GAAoB,OAAAC,GAC5B,UAAA;AAAA,IAAC,gBAAAkB,EAAAC,GAAA,EACC,MAAML,KAAcjB,GACpB,OAAOY,EAAEI,KAAST,CAAiB,GACnC,SAAAH,GACA,MAAAC,GACA,UAAAC,EAAmB,CAAA;AAAA,IAErB,gBAAAe,EAACD,EAAS,MAAT,EAAc,MAAK,WACjBnB,UAAAA,KAAAA,gBAAAA,EAASsB,IAAKC,CAAWA,MAAA;AACxB,YAAMT,IAAQ,OAAOS,KAAW,WAAWA,EAAOT,QAAQS,GACpDR,IAAQ,OAAOQ,KAAW,WAAWA,EAAOR,QAAQQ,GACpDxB,IAAO,OAAOwB,KAAW,WAAWA,EAAOxB,OAAOkB;AACxD,aACG,gBAAAG,EAAAD,EAAS,MAAT,EACC,MAAK,UAEL,SAAS,MAAMV,EAAcc,CAAM,GACnC,MAAMxB,GAELgB,UAAAA,KAJID,CAKP;AAAA,IAEH,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/components/Select/SelectTrigger.js

@@ -1,6 +1,7 @@
-import { jsx } from "react/jsx-runtime";
-import { Dropdown } from "../Dropdown/Dropdown.js";
-const SelectTrigger = (props) => /* @__PURE__ */ jsx(Dropdown.Trigger, { ...props, "aria-haspopup": "listbox", role: "combobox" });
+import { jsx as r } from "react/jsx-runtime";
+import { Dropdown as e } from "../Dropdown/Dropdown.js";
+const i = (o) => /* @__PURE__ */ r(e.Trigger, { ...o, "aria-haspopup": "listbox", role: "combobox" });
 export {
-  SelectTrigger as default
+  i as default
 };
+//# sourceMappingURL=SelectTrigger.js.map

package/dist/components/Select/SelectTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.js","sources":["../../../src/components/Select/SelectTrigger.tsx"],"sourcesContent":["import { RefAttributes } from 'react';\n\nimport { JSX } from 'react/jsx-runtime';\n\nimport Dropdown from '../Dropdown/Dropdown';\nimport { DropdownTriggerProps } from '../Dropdown/DropdownTrigger';\n\nconst SelectTrigger = (\n  props: JSX.IntrinsicAttributes &\n    Omit<DropdownTriggerProps, 'ref'> &\n    RefAttributes<HTMLButtonElement>,\n) => {\n  return (\n    <Dropdown.Trigger {...props} aria-haspopup=\"listbox\" role=\"combobox\" />\n  );\n};\n\nSelectTrigger.displayName = 'SelectTrigger';\nexport default SelectTrigger;\n"],"names":["SelectTrigger","props","jsx","Dropdown"],"mappings":";;AAOMA,MAAAA,IAAgBA,CACpBC,MAKE,gBAAAC,EAACC,EAAS,SAAT,KAAqBF,GAAO,iBAAc,WAAU,MAAK,WAAa,CAAA;"}

package/dist/components/Table/TableExplorer.js

@@ -1,9 +1,10 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const TableExplorer = /* @__PURE__ */ forwardRef(({
-  children
-}, ref) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("table", { ref, className: "table-explorer", children }) }));
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+const f = /* @__PURE__ */ a(({
+  children: r
+}, e) => /* @__PURE__ */ o("table", { ref: e, className: "table-explorer", children: r }));
 export {
-  TableExplorer,
-  TableExplorer as default
+  f as TableExplorer,
+  f as default
 };
+//# sourceMappingURL=TableExplorer.js.map

package/dist/components/Table/TableExplorer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExplorer.js","sources":["../../../src/components/Table/TableExplorer.tsx"],"sourcesContent":["/**\n * TableExplorer  Component\n *\n * @see Docs     https://edifice-ui.vercel.app/?path=/docs/components-core-table--base\n * @see Source   https://github.com/opendigitaleducation/edifice-ui/blob/main/packages/core/src/Table/Table.tsx\n * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/table/\n */\n\nimport { forwardRef, Ref } from 'react';\n\nexport type TableExplorerRef = HTMLTableElement;\n\nexport interface TableExplorerProps {\n  children?: Array<React.ReactElement<HTMLTableSectionElement>>;\n}\n\nexport const TableExplorer = forwardRef(\n  ({ children }: TableExplorerProps, ref: Ref<TableExplorerRef>) => {\n    return (\n      <table ref={ref} className=\"table-explorer\">\n        {children}\n      </table>\n    );\n  },\n);\n\nTableExplorer.displayName = 'TableExplorer';\n\nexport default TableExplorer;\n"],"names":["TableExplorer","children","ref","jsx"],"mappings":";;AAgBaA,MAAAA,sBACX,CAAC;AAAA,EAAEC,UAAAA;AAA6B,GAAGC,MAE9B,gBAAAC,EAAA,SAAA,EAAM,KAAAD,GAAU,WAAU,kBACxBD,UAAAA,EACH,CAAA,CAGN;"}

package/dist/components/Tabs/Tabs.js

@@ -1,75 +1,76 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useRef, useCallback, useEffect, useMemo } from "react";
-import { TabsContext } from "./TabsContext.js";
-import TabsItem from "./TabsItem.js";
-import TabsList from "./TabsList.js";
-import TabsPanel from "./TabsPanel.js";
-const Tabs = ({
-  defaultId,
-  items,
-  onChange,
-  children
+import { jsx as T, jsxs as N, Fragment as W } from "react/jsx-runtime";
+import { useState as x, useRef as g, useCallback as l, useEffect as U, useMemo as j } from "react";
+import { TabsContext as m } from "./TabsContext.js";
+import y from "./TabsItem.js";
+import z from "./TabsList.js";
+import S from "./TabsPanel.js";
+const a = ({
+  defaultId: f,
+  items: e,
+  onChange: b,
+  children: v
 }) => {
-  const [activeTab, setActiveTab] = useState(defaultId || ""), [tabUnderlineWidth, setTabUnderlineWidth] = useState(0), [tabUnderlineLeft, setTabUnderlineLeft] = useState(0), tabsRef = useRef([]), setSelectedTab = useCallback((id) => {
-    setActiveTab(id);
+  const [r, d] = x(f || ""), [L, I] = x(0), [p, A] = x(0), w = g([]), P = l((n) => {
+    d(n);
   }, []);
-  useEffect(() => {
-    const currentItem2 = items.find((item) => item.id === activeTab);
-    currentItem2 && (onChange == null || onChange(currentItem2));
-  }, [activeTab]), useEffect(() => {
-    function setTabPosition() {
-      var _a;
-      if (((_a = document == null ? void 0 : document.activeElement) == null ? void 0 : _a.tagName) !== "INPUT") {
-        const currentTabIndex = items.findIndex((item) => item.id === activeTab);
-        currentTabIndex === -1 && defaultId && setActiveTab(defaultId);
-        const currentTabRef = tabsRef.current[currentTabIndex];
-        currentTabRef && (currentTabRef.focus(), setTabUnderlineLeft((currentTabRef == null ? void 0 : currentTabRef.offsetLeft) ?? 0), setTabUnderlineWidth((currentTabRef == null ? void 0 : currentTabRef.clientWidth) ?? 0));
+  U(() => {
+    const n = e.find((t) => t.id === r);
+    n && (b == null || b(n));
+  }, [r]), U(() => {
+    function n() {
+      var t;
+      if (((t = document == null ? void 0 : document.activeElement) == null ? void 0 : t.tagName) !== "INPUT") {
+        const i = e.findIndex((c) => c.id === r);
+        i === -1 && f && d(f);
+        const o = w.current[i];
+        o && (o.focus(), A((o == null ? void 0 : o.offsetLeft) ?? 0), I((o == null ? void 0 : o.clientWidth) ?? 0));
       }
     }
-    return setTabPosition(), window.addEventListener("resize", setTabPosition), () => window.removeEventListener("resize", setTabPosition);
-  }, [activeTab, items, defaultId]);
-  const moveFocusToPreviousTab = useCallback((activeTab2) => {
-    var _a, _b, _c;
-    const index = items.findIndex((item) => item.id === activeTab2);
-    activeTab2 === ((_a = items[0]) == null ? void 0 : _a.id) ? setActiveTab((_b = items[items.length - 1]) == null ? void 0 : _b.id) : setActiveTab((_c = items[index - 1]) == null ? void 0 : _c.id);
-  }, [items]), moveFocusToNextTab = useCallback((activeTab2) => {
-    var _a, _b, _c;
-    const index = items.findIndex((item) => item.id === activeTab2);
-    activeTab2 === ((_a = items[items.length - 1]) == null ? void 0 : _a.id) ? setActiveTab((_b = items[0]) == null ? void 0 : _b.id) : setActiveTab((_c = items[index + 1]) == null ? void 0 : _c.id);
-  }, [items]), onKeyDown = useCallback((event) => {
-    var _a, _b;
-    switch (event.code) {
+    return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+  }, [r, e, f]);
+  const h = l((n) => {
+    var i, o, c;
+    const t = e.findIndex((u) => u.id === n);
+    n === ((i = e[0]) == null ? void 0 : i.id) ? d((o = e[e.length - 1]) == null ? void 0 : o.id) : d((c = e[t - 1]) == null ? void 0 : c.id);
+  }, [e]), k = l((n) => {
+    var i, o, c;
+    const t = e.findIndex((u) => u.id === n);
+    n === ((i = e[e.length - 1]) == null ? void 0 : i.id) ? d((o = e[0]) == null ? void 0 : o.id) : d((c = e[t + 1]) == null ? void 0 : c.id);
+  }, [e]), E = l((n) => {
+    var t, i;
+    switch (n.code) {
       case "ArrowLeft":
-        moveFocusToPreviousTab(activeTab);
+        h(r);
         break;
       case "ArrowRight":
-        moveFocusToNextTab(activeTab);
+        k(r);
         break;
       case "Home":
-        setActiveTab((_a = items[0]) == null ? void 0 : _a.id);
+        d((t = e[0]) == null ? void 0 : t.id);
         break;
       case "End":
-        setActiveTab((_b = items[items.length - 1]) == null ? void 0 : _b.id);
+        d((i = e[e.length - 1]) == null ? void 0 : i.id);
         break;
     }
-  }, [activeTab, items, moveFocusToNextTab, moveFocusToPreviousTab]), value = useMemo(() => ({
-    activeTab,
-    items,
-    setSelectedTab,
-    tabsRef,
-    tabUnderlineLeft,
-    tabUnderlineWidth,
-    onKeyDown
-  }), [activeTab, items, onKeyDown, setSelectedTab, tabUnderlineLeft, tabUnderlineWidth]), currentItem = items.find((item) => item.id === activeTab);
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: typeof children == "function" ? children(currentItem) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tabs.List, {}),
-    /* @__PURE__ */ jsx(Tabs.Panel, { currentItem, children: currentItem == null ? void 0 : currentItem.content })
+  }, [r, e, k, h]), F = j(() => ({
+    activeTab: r,
+    items: e,
+    setSelectedTab: P,
+    tabsRef: w,
+    tabUnderlineLeft: p,
+    tabUnderlineWidth: L,
+    onKeyDown: E
+  }), [r, e, E, P, p, L]), s = e.find((n) => n.id === r);
+  return /* @__PURE__ */ T(m.Provider, { value: F, children: typeof v == "function" ? v(s) : /* @__PURE__ */ N(W, { children: [
+    /* @__PURE__ */ T(a.List, {}),
+    /* @__PURE__ */ T(a.Panel, { currentItem: s, children: s == null ? void 0 : s.content })
   ] }) });
 };
-Tabs.Item = TabsItem;
-Tabs.Panel = TabsPanel;
-Tabs.List = TabsList;
+a.Item = y;
+a.Panel = S;
+a.List = z;
 export {
-  Tabs,
-  Tabs as default
+  a as Tabs,
+  a as default
 };
+//# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/**\n * Tabs Component\n */\nimport {\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { TabsContext } from './TabsContext';\nimport TabsItem, { TabsItemProps } from './TabsItem';\nimport TabsList from './TabsList';\nimport TabsPanel from './TabsPanel';\n\nexport interface TabsProps {\n  /**\n   * Selected tab, by default.\n   */\n  defaultId?: string;\n  /**\n   * Items to be displayed\n   */\n  items: TabsItemProps[];\n  /**\n   * Get notified when a tab is selected\n   */\n  onChange?: (tab: TabsItemProps) => void;\n  /**\n   * Children Props\n   */\n  children?: (...props: any) => ReactNode;\n}\n\n/**\n * Tab Content displayed one at a time when a Tab Item is selected\n */\nexport const Tabs = ({ defaultId, items, onChange, children }: TabsProps) => {\n  const [activeTab, setActiveTab] = useState<string>(defaultId || '');\n  const [tabUnderlineWidth, setTabUnderlineWidth] = useState(0);\n  const [tabUnderlineLeft, setTabUnderlineLeft] = useState(0);\n\n  const tabsRef = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const setSelectedTab = useCallback((id: string) => {\n    setActiveTab(id);\n  }, []);\n\n  useEffect(() => {\n    const currentItem = items.find((item) => item.id === activeTab);\n    currentItem && onChange?.(currentItem);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeTab]); // only updating the activeTab value should trigger this effect.\n\n  useEffect(() => {\n    function setTabPosition() {\n      /**\n       * If the active element is not an input, then focus on the current tab.\n       * The focus on input element with a reponse device will cause the keyboard to be displayed and trigger the resize event.\n       * Which will cause the tab to be focused again and the keyboard to be closed. #WB-2841\n       */\n      if (document?.activeElement?.tagName !== 'INPUT') {\n        const currentTabIndex = items.findIndex(\n          (item) => item.id === activeTab,\n        );\n        if (currentTabIndex === -1 && defaultId) {\n          setActiveTab(defaultId);\n        }\n        const currentTabRef = tabsRef.current[currentTabIndex];\n        if (currentTabRef) {\n          currentTabRef.focus();\n          setTabUnderlineLeft(currentTabRef?.offsetLeft ?? 0);\n          setTabUnderlineWidth(currentTabRef?.clientWidth ?? 0);\n        }\n      }\n    }\n\n    setTabPosition();\n    window.addEventListener('resize', setTabPosition);\n\n    return () => window.removeEventListener('resize', setTabPosition);\n  }, [activeTab, items, defaultId]);\n\n  const moveFocusToPreviousTab = useCallback(\n    (activeTab: string) => {\n      const index = items.findIndex((item) => item.id === activeTab);\n\n      if (activeTab === items[0]?.id) {\n        setActiveTab(items[items.length - 1]?.id);\n      } else {\n        setActiveTab(items[index - 1]?.id);\n      }\n    },\n    [items],\n  );\n\n  const moveFocusToNextTab = useCallback(\n    (activeTab: string | number) => {\n      const index = items.findIndex((item) => item.id === activeTab);\n\n      if (activeTab === items[items.length - 1]?.id) {\n        setActiveTab(items[0]?.id);\n      } else {\n        setActiveTab(items[index + 1]?.id);\n      }\n    },\n    [items],\n  );\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      switch (event.code) {\n        case 'ArrowLeft':\n          moveFocusToPreviousTab(activeTab);\n          break;\n\n        case 'ArrowRight':\n          moveFocusToNextTab(activeTab);\n          break;\n\n        case 'Home':\n          setActiveTab(items[0]?.id);\n          break;\n\n        case 'End':\n          setActiveTab(items[items.length - 1]?.id);\n          break;\n\n        default:\n          break;\n      }\n    },\n    [activeTab, items, moveFocusToNextTab, moveFocusToPreviousTab],\n  );\n\n  const value = useMemo(\n    () => ({\n      activeTab,\n      items,\n      setSelectedTab,\n      tabsRef,\n      tabUnderlineLeft,\n      tabUnderlineWidth,\n      onKeyDown,\n    }),\n    [\n      activeTab,\n      items,\n      onKeyDown,\n      setSelectedTab,\n      tabUnderlineLeft,\n      tabUnderlineWidth,\n    ],\n  );\n\n  const currentItem = items.find((item) => item.id === activeTab);\n\n  return (\n    <TabsContext.Provider value={value}>\n      {typeof children === 'function' ? (\n        children(currentItem)\n      ) : (\n        <>\n          <Tabs.List />\n          <Tabs.Panel currentItem={currentItem}>\n            {currentItem?.content}\n          </Tabs.Panel>\n        </>\n      )}\n    </TabsContext.Provider>\n  );\n};\n\nTabs.Item = TabsItem;\nTabs.Panel = TabsPanel;\nTabs.List = TabsList;\n\nTabs.displayName = 'Tabs';\n\nexport default Tabs;\n"],"names":["Tabs","defaultId","items","onChange","children","activeTab","setActiveTab","useState","tabUnderlineWidth","setTabUnderlineWidth","tabUnderlineLeft","setTabUnderlineLeft","tabsRef","useRef","setSelectedTab","useCallback","id","useEffect","currentItem","find","item","setTabPosition","document","activeElement","tagName","currentTabIndex","findIndex","currentTabRef","current","focus","offsetLeft","clientWidth","addEventListener","window","removeEventListener","moveFocusToPreviousTab","index","length","moveFocusToNextTab","onKeyDown","event","code","value","useMemo","jsx","TabsContext","jsxs","Fragment","content","Item","TabsItem","Panel","TabsPanel","List","TabsList"],"mappings":"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"}