se-design 1.0.63-dev → 1.0.64

package/dist/index49.js

@@ -1,59 +1,77 @@
 import r from "react";
-import { Icon as s } from "./index5.js";
-import { Popover as d } from "./index18.js";
-import { MenuList as b } from "./index17.js";
+import { Icon as b } from "./index5.js";
+import { Popover as p } from "./index18.js";
+import { MenuList as f } from "./index17.js";
 /* empty css         */
-const v = ({
+function c() {
+  return c = Object.assign ? Object.assign.bind() : function(a) {
+    for (var n = 1; n < arguments.length; n++) {
+      var o = arguments[n];
+      for (var s in o) ({}).hasOwnProperty.call(o, s) && (a[s] = o[s]);
+    }
+    return a;
+  }, c.apply(null, arguments);
+}
+const $ = ({
   crumbs: a,
-  onCrumbClick: o,
-  className: m
+  onCrumbClick: n,
+  className: o,
+  ariaLabel: s = "Breadcrumb"
 }) => {
-  const n = a?.length > 3, i = n ? a?.slice(-2) : a, l = n ? a?.slice(0, -2) : [], c = (t) => {
-    let e = "se-design-breadcrumbs-item-label inline-flex items-center w-fit";
-    return i?.length === 1 ? `${e} single-crumb` : t === i?.length - 1 ? `${e} highlighted-crumb` : `${e} cursor-pointer unhighlighted-crumb`;
+  const i = a?.length > 3, m = i ? a?.slice(-2) : a, u = i ? a?.slice(0, -2) : [], l = (t) => t === m?.length - 1, d = (t) => {
+    const e = "se-design-breadcrumbs-item-label inline-flex items-center w-fit";
+    return m?.length === 1 ? `${e} single-crumb` : l(t) ? `${e} highlighted-crumb` : `${e} unhighlighted-crumb`;
   };
-  return /* @__PURE__ */ r.createElement("div", {
-    className: `se-design-breadcrumbs flex items-center ${m}`,
-    "aria-label": "Breadcrumb",
+  return /* @__PURE__ */ r.createElement("nav", {
+    className: `se-design-breadcrumbs flex items-center ${o}`,
+    "aria-label": s,
     "data-automation-id": "breadcrumbs-container"
-  }, l?.length > 0 && /* @__PURE__ */ r.createElement(d, {
+  }, u?.length > 0 && /* @__PURE__ */ r.createElement(p, {
     className: "se-design-overflow-breadcrumbs",
     position: "bottom-left",
     noBorder: !0,
+    ariaLabel: "Show more breadcrumbs",
     renderPopoverSrcElement: ({
       displayPopover: t
     }) => /* @__PURE__ */ r.createElement("div", {
       className: `overflow-breadcrumbs-src-element px-1.5 py-1.5 rounded-md hover:cursor-pointer ${t ? "bg-[var(--color-blue-200)]" : ""}`,
       "data-automation-id": "breadcrumbs-kebab-menu"
-    }, /* @__PURE__ */ r.createElement(s, {
+    }, /* @__PURE__ */ r.createElement(b, {
       name: "kebab-menu"
     })),
     renderPopoverContents: ({
       closePopoverCb: t
-    }) => /* @__PURE__ */ r.createElement(b, {
-      items: l.map((e) => ({
+    }) => /* @__PURE__ */ r.createElement(f, {
+      items: u.map((e) => ({
         id: String(e?.id),
         label: e?.label,
         onClick: () => {
-          o?.(e), t();
+          n?.(e), t();
         }
       }))
     })
-  }), /* @__PURE__ */ r.createElement("div", {
+  }), /* @__PURE__ */ r.createElement("ol", {
     className: "se-design-breadcrumbs-list inline-flex items-center"
-  }, i?.map((t, e) => /* @__PURE__ */ r.createElement("div", {
-    key: t?.id,
-    className: "se-design-breadcrumbs-item inline-flex items-center w-fit text-xl"
-  }, (e > 0 || n) && /* @__PURE__ */ r.createElement(s, {
-    name: "chevron",
-    rotation: "270"
-  }), /* @__PURE__ */ r.createElement("p", {
-    onClick: () => o?.(t),
-    className: c(e),
-    "data-automation-id": t?.automationId || `breadcrumbs-item-${e}`
-  }, t?.label)))));
+  }, m?.map((t, e) => {
+    const g = l(e) ? "span" : "button";
+    return /* @__PURE__ */ r.createElement("li", {
+      key: t?.id,
+      className: "se-design-breadcrumbs-item inline-flex items-center w-fit text-xl"
+    }, (e > 0 || i) && /* @__PURE__ */ r.createElement(b, {
+      name: "chevron",
+      rotation: "270"
+    }), /* @__PURE__ */ r.createElement(g, c({}, l(e) ? {
+      "aria-current": "page"
+    } : {
+      type: "button",
+      onClick: () => n?.(t)
+    }, {
+      className: `${d(e)}${l(e) ? "" : " cursor-pointer focus-outline"}`,
+      "data-automation-id": t?.automationId || `breadcrumbs-item-${e}`
+    }), t?.label));
+  })));
 };
 export {
-  v as BreadCrumbs
+  $ as BreadCrumbs
 };
 //# sourceMappingURL=index49.js.map

package/dist/index49.js.map

@@ -1 +1 @@
-{"version":3,"file":"index49.js","sources":["../src/components/BreadCrumbs/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\n\nimport './style.scss';\n\ninterface Crumb {\n  id: string | number;\n  label: string;\n  automationId?: string;\n}\n\ninterface BreadCrumbsProps {\n  crumbs: Crumb[];\n  onCrumbClick?: (crumb: Crumb) => void;\n  className?: any;\n}\n\nexport const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ crumbs, onCrumbClick, className }) => {\n  const shouldShowDropdown = crumbs?.length > 3;\n  const visibleCrumbs = shouldShowDropdown ? crumbs?.slice(-2) : crumbs;\n  const dropdownCrumbs = shouldShowDropdown ? crumbs?.slice(0, -2) : [];\n\n  const getLabelClassNames = (index: number) => {\n    let className = 'se-design-breadcrumbs-item-label inline-flex items-center w-fit';\n    if (visibleCrumbs?.length === 1) {\n      return `${className} single-crumb`;\n    }\n\n    if (index === visibleCrumbs?.length - 1) {\n      return `${className} highlighted-crumb`;\n    }\n\n    return `${className} cursor-pointer unhighlighted-crumb`;\n  };\n\n  return (\n    <div className={`se-design-breadcrumbs flex items-center ${className}`} aria-label=\"Breadcrumb\" data-automation-id=\"breadcrumbs-container\">\n      {dropdownCrumbs?.length > 0 && (\n        <Popover\n          className=\"se-design-overflow-breadcrumbs\"\n          position=\"bottom-left\"\n          noBorder\n          renderPopoverSrcElement={({ displayPopover }) => {\n            return (\n              <div\n                className={`overflow-breadcrumbs-src-element px-1.5 py-1.5 rounded-md hover:cursor-pointer ${\n                  displayPopover ? 'bg-[var(--color-blue-200)]' : ''\n                }`}\n                data-automation-id=\"breadcrumbs-kebab-menu\"\n              >\n                <Icon name=\"kebab-menu\" />\n              </div>\n            );\n          }}\n          renderPopoverContents={({ closePopoverCb }) => (\n            <MenuList\n              items={dropdownCrumbs.map((crumb) => ({\n                id: String(crumb?.id),\n                label: crumb?.label,\n                onClick: () => {\n                  onCrumbClick?.(crumb);\n                  closePopoverCb();\n                }\n              }))}\n            />\n          )}\n        />\n      )}\n      <div className=\"se-design-breadcrumbs-list inline-flex items-center\">\n        {visibleCrumbs?.map((crumb, index) => (\n          <div key={crumb?.id} className=\"se-design-breadcrumbs-item inline-flex items-center w-fit text-xl\" >\n            {(index > 0 || shouldShowDropdown) && <Icon name=\"chevron\" rotation={'270'} />}\n            <p onClick={() => onCrumbClick?.(crumb)} className={getLabelClassNames(index)} data-automation-id={crumb?.automationId || `breadcrumbs-item-${index}`}>\n              {crumb?.label}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["BreadCrumbs","crumbs","onCrumbClick","className","shouldShowDropdown","length","visibleCrumbs","slice","dropdownCrumbs","getLabelClassNames","index","React","createElement","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","renderPopoverContents","closePopoverCb","MenuList","items","map","crumb","id","String","label","onClick","key","rotation","automationId"],"mappings":";;;;;AAmBO,MAAMA,IAA0CA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,cAAAA;AAAAA,EAAcC,WAAAA;AAAU,MAAM;AAC9F,QAAMC,IAAqBH,GAAQI,SAAS,GACtCC,IAAgBF,IAAqBH,GAAQM,MAAM,EAAE,IAAIN,GACzDO,IAAiBJ,IAAqBH,GAAQM,MAAM,GAAG,EAAE,IAAI,CAAA,GAE7DE,IAAqBA,CAACC,MAAkB;AAC5C,QAAIP,IAAY;AAChB,WAAIG,GAAeD,WAAW,IACrB,GAAGF,CAAS,kBAGjBO,MAAUJ,GAAeD,SAAS,IAC7B,GAAGF,CAAS,uBAGd,GAAGA,CAAS;AAAA,EACrB;AAEA,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,2CAA2CA,CAAS;AAAA,IAAI,cAAW;AAAA,IAAa,sBAAmB;AAAA,EAAA,GAChHK,GAAgBH,SAAS,KACxBM,gBAAAA,EAAAC,cAACC,GAAO;AAAA,IACNV,WAAU;AAAA,IACVW,UAAS;AAAA,IACTC,UAAQ;AAAA,IACRC,yBAAyBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MAExBN,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACET,WAAW,kFACTc,IAAiB,+BAA+B,EAAE;AAAA,MAEpD,sBAAmB;AAAA,IAAA,GAEnBN,gBAAAA,EAAAC,cAACM,GAAI;AAAA,MAACC,MAAK;AAAA,IAAA,CAAc,CACtB;AAAA,IAGTC,uBAAuBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MACxBV,gBAAAA,EAAAC,cAACU,GAAQ;AAAA,MACPC,OAAOf,EAAegB,IAAKC,CAAAA,OAAW;AAAA,QACpCC,IAAIC,OAAOF,GAAOC,EAAE;AAAA,QACpBE,OAAOH,GAAOG;AAAAA,QACdC,SAASA,MAAM;AACb3B,UAAAA,IAAeuB,CAAK,GACpBJ,EAAAA;AAAAA,QACF;AAAA,MAAA,EACA;AAAA,IAAA,CACH;AAAA,EAAA,CAEJ,GAEHV,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,EAAA,GACZG,GAAekB,IAAI,CAACC,GAAOf,MAC1BC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKkB,KAAKL,GAAOC;AAAAA,IAAIvB,WAAU;AAAA,EAAA,IAC3BO,IAAQ,KAAKN,MAAuBO,gBAAAA,EAAAC,cAACM,GAAI;AAAA,IAACC,MAAK;AAAA,IAAUY,UAAU;AAAA,EAAA,CAAQ,GAC7EpB,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGiB,SAASA,MAAM3B,IAAeuB,CAAK;AAAA,IAAGtB,WAAWM,EAAmBC,CAAK;AAAA,IAAG,sBAAoBe,GAAOO,gBAAgB,oBAAoBtB,CAAK;AAAA,EAAA,GAChJe,GAAOG,KACP,CACA,CACN,CACE,CACF;AAET;"}
+{"version":3,"file":"index49.js","sources":["../src/components/BreadCrumbs/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\n\nimport './style.scss';\n\ninterface Crumb {\n  id: string | number;\n  label: string;\n  automationId?: string;\n}\n\ninterface BreadCrumbsProps {\n  crumbs: Crumb[];\n  onCrumbClick?: (crumb: Crumb) => void;\n  className?: any;\n  /** Accessible name for the breadcrumb navigation landmark. Defaults to \"Breadcrumb\". Use for i18n or when multiple breadcrumb regions exist. */\n  ariaLabel?: string;\n}\n\nexport const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ crumbs, onCrumbClick, className, ariaLabel = 'Breadcrumb' }) => {\n  const shouldShowDropdown = crumbs?.length > 3;\n  const visibleCrumbs = shouldShowDropdown ? crumbs?.slice(-2) : crumbs;\n  const dropdownCrumbs = shouldShowDropdown ? crumbs?.slice(0, -2) : [];\n\n  const isCurrentPage = (index: number) => index === visibleCrumbs?.length - 1;\n\n  const getLabelClassNames = (index: number) => {\n    const className = 'se-design-breadcrumbs-item-label inline-flex items-center w-fit';\n    if (visibleCrumbs?.length === 1) {\n      return `${className} single-crumb`;\n    }\n    if (isCurrentPage(index)) {\n      return `${className} highlighted-crumb`;\n    }\n    return `${className} unhighlighted-crumb`;\n  };\n\n  return (\n    <nav className={`se-design-breadcrumbs flex items-center ${className}`} aria-label={ariaLabel} data-automation-id=\"breadcrumbs-container\">\n      {dropdownCrumbs?.length > 0 && (\n        <Popover\n          className=\"se-design-overflow-breadcrumbs\"\n          position=\"bottom-left\"\n          noBorder\n          ariaLabel=\"Show more breadcrumbs\"\n          renderPopoverSrcElement={({ displayPopover }) => {\n            return (\n              <div\n                className={`overflow-breadcrumbs-src-element px-1.5 py-1.5 rounded-md hover:cursor-pointer ${\n                  displayPopover ? 'bg-[var(--color-blue-200)]' : ''\n                }`}\n                data-automation-id=\"breadcrumbs-kebab-menu\"\n              >\n                <Icon name=\"kebab-menu\" />\n              </div>\n            );\n          }}\n          renderPopoverContents={({ closePopoverCb }) => (\n            <MenuList\n              items={dropdownCrumbs.map((crumb) => ({\n                id: String(crumb?.id),\n                label: crumb?.label,\n                onClick: () => {\n                  onCrumbClick?.(crumb);\n                  closePopoverCb();\n                }\n              }))}\n            />\n          )}\n        />\n      )}\n      <ol className=\"se-design-breadcrumbs-list inline-flex items-center\">\n        {visibleCrumbs?.map((crumb, index) => {\n          const Tag = isCurrentPage(index) ? 'span' : 'button';// Current page should not be clickable\n          return (\n            <li key={crumb?.id} className=\"se-design-breadcrumbs-item inline-flex items-center w-fit text-xl\">\n              {(index > 0 || shouldShowDropdown) && <Icon name=\"chevron\" rotation={'270'} />}\n              <Tag\n                {...(isCurrentPage(index)\n                  ? { 'aria-current': 'page' as const }\n                  : { type: 'button' as const, onClick: () => onCrumbClick?.(crumb) })}\n                className={`${getLabelClassNames(index)}${!isCurrentPage(index) ? ' cursor-pointer focus-outline' : ''}`}\n                data-automation-id={crumb?.automationId || `breadcrumbs-item-${index}`}\n              >\n                {crumb?.label}\n              </Tag>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["BreadCrumbs","crumbs","onCrumbClick","className","ariaLabel","shouldShowDropdown","length","visibleCrumbs","slice","dropdownCrumbs","isCurrentPage","index","getLabelClassNames","React","createElement","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","renderPopoverContents","closePopoverCb","MenuList","items","map","crumb","id","String","label","onClick","Tag","key","rotation","_extends","type","automationId"],"mappings":";;;;;;;;;;;;;;AAqBO,MAAMA,IAA0CA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,cAAAA;AAAAA,EAAcC,WAAAA;AAAAA,EAAWC,WAAAA,IAAY;AAAa,MAAM;AACxH,QAAMC,IAAqBJ,GAAQK,SAAS,GACtCC,IAAgBF,IAAqBJ,GAAQO,MAAM,EAAE,IAAIP,GACzDQ,IAAiBJ,IAAqBJ,GAAQO,MAAM,GAAG,EAAE,IAAI,CAAA,GAE7DE,IAAgBA,CAACC,MAAkBA,MAAUJ,GAAeD,SAAS,GAErEM,IAAqBA,CAACD,MAAkB;AAC5C,UAAMR,IAAY;AAClB,WAAII,GAAeD,WAAW,IACrB,GAAGH,CAAS,kBAEjBO,EAAcC,CAAK,IACd,GAAGR,CAAS,uBAEd,GAAGA,CAAS;AAAA,EACrB;AAEA,SACEU,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKX,WAAW,2CAA2CA,CAAS;AAAA,IAAI,cAAYC;AAAAA,IAAW,sBAAmB;AAAA,EAAA,GAC/GK,GAAgBH,SAAS,KACxBO,gBAAAA,EAAAC,cAACC,GAAO;AAAA,IACNZ,WAAU;AAAA,IACVa,UAAS;AAAA,IACTC,UAAQ;AAAA,IACRb,WAAU;AAAA,IACVc,yBAAyBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MAExBN,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACEX,WAAW,kFACTgB,IAAiB,+BAA+B,EAAE;AAAA,MAEpD,sBAAmB;AAAA,IAAA,GAEnBN,gBAAAA,EAAAC,cAACM,GAAI;AAAA,MAACC,MAAK;AAAA,IAAA,CAAc,CACtB;AAAA,IAGTC,uBAAuBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MACxBV,gBAAAA,EAAAC,cAACU,GAAQ;AAAA,MACPC,OAAOhB,EAAeiB,IAAKC,CAAAA,OAAW;AAAA,QACpCC,IAAIC,OAAOF,GAAOC,EAAE;AAAA,QACpBE,OAAOH,GAAOG;AAAAA,QACdC,SAASA,MAAM;AACb7B,UAAAA,IAAeyB,CAAK,GACpBJ,EAAAA;AAAAA,QACF;AAAA,MAAA,EACA;AAAA,IAAA,CACH;AAAA,EAAA,CAEJ,GAEHV,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIX,WAAU;AAAA,EAAA,GACXI,GAAemB,IAAI,CAACC,GAAOhB,MAAU;AACpC,UAAMqB,IAAMtB,EAAcC,CAAK,IAAI,SAAS;AAC5C,WACEE,gBAAAA,EAAAC,cAAA,MAAA;AAAA,MAAImB,KAAKN,GAAOC;AAAAA,MAAIzB,WAAU;AAAA,IAAA,IAC1BQ,IAAQ,KAAKN,MAAuBQ,gBAAAA,EAAAC,cAACM,GAAI;AAAA,MAACC,MAAK;AAAA,MAAUa,UAAU;AAAA,IAAA,CAAQ,GAC7ErB,gBAAAA,EAAAC,cAACkB,GAAGG,EAAA,IACGzB,EAAcC,CAAK,IACpB;AAAA,MAAE,gBAAgB;AAAA,IAAA,IAClB;AAAA,MAAEyB,MAAM;AAAA,MAAmBL,SAASA,MAAM7B,IAAeyB,CAAK;AAAA,IAAA,GAAG;AAAA,MACrExB,WAAW,GAAGS,EAAmBD,CAAK,CAAC,GAAID,EAAcC,CAAK,IAAsC,KAAlC,+BAAoC;AAAA,MACtG,sBAAoBgB,GAAOU,gBAAgB,oBAAoB1B,CAAK;AAAA,IAAA,CAAG,GAEtEgB,GAAOG,KACL,CACH;AAAA,EAER,CAAC,CACC,CACD;AAET;"}