@sats-group/ui-lib 82.1.1 → 83.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "82.1.1",
+  "version": "83.0.0",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",

package/react/pagination/pagination.js

@@ -1,2 +1,2 @@
-var P=Object.defineProperty,x=Object.defineProperties;var L=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var c=(n,i,a)=>i in n?P(n,i,{enumerable:!0,configurable:!0,writable:!0,value:a}):n[i]=a,t=(n,i)=>{for(var a in i||(i={}))k.call(i,a)&&c(n,a,i[a]);if(g)for(var a of g(i))C.call(i,a)&&c(n,a,i[a]);return n},l=(n,i)=>x(n,L(i));var b=(n,i)=>{var a={};for(var e in n)k.call(n,e)&&i.indexOf(e)<0&&(a[e]=n[e]);if(n!=null&&g)for(var e of g(n))i.indexOf(e)<0&&C.call(n,e)&&(a[e]=n[e]);return a};import o from"react";import h from"../icons/24/arrow-right";import M from"../select";import H from"../text";import{prep as T}from"./prep";const v=p=>{var m=p,{bordered:n,children:i,text:a}=m,e=b(m,["bordered","children","text"]);return o.createElement(e["aria-disabled"]===!0||e["aria-disabled"]==="true"?"div":"a",l(t({},e),{className:n?"pagination__link pagination__link--bordered":"pagination__link"}),i||o.createElement(H,{size:H.sizes.small,tight:!0},a))},_=(n,i)=>i?a=>i(a,n):void 0,y=(n,i)=>i?a=>{const e=n.at(a.target.selectedIndex);if(e)return _(e,i)}:void 0,S=({entries:n,label:i,next:a,onNext:e,onPage:p,onPrevious:m,previous:u,select:r,windowSize:E})=>{const s=n.findIndex(d=>d["aria-current"]),f=s===-1?void 0:n.at(s),N=T(n,s,E);return o.createElement("nav",{className:"pagination","aria-label":i},o.createElement("div",{className:"pagination__content"},u?o.createElement(v,l(t({},u),{"aria-disabled":s===0,bordered:!0,onClick:_(u,m)}),o.createElement("div",{className:"pagination__icon pagination__icon--flipped"},o.createElement(h,null))):null,o.createElement("div",{className:r?"pagination__entries pagination__entries--hideable":"pagination__entries"},N.map(d=>o.createElement(v,l(t({},d),{key:d.href,onClick:_(d,p)})))),r?o.createElement("div",{className:"pagination__select"},o.createElement(M,l(t({},r),{onChange:r.onChange?r.onChange:y(n,p),options:r.options?r.options:n.map(d=>({text:d["aria-label"],value:d.href})),value:r.value?r.value:p&&f?f.href:void 0}))):null,a?o.createElement(v,l(t({},a),{"aria-disabled":s===n.length-1,bordered:!0,onClick:_(a,e)}),o.createElement("div",{className:"pagination__icon"},o.createElement(h,null))):null))};var j=S;export{j as default};
+var w=Object.defineProperty,y=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var k=(i,n,a)=>n in i?w(i,n,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[n]=a,l=(i,n)=>{for(var a in n||(n={}))c.call(n,a)&&k(i,a,n[a]);if(m)for(var a of m(n))C.call(n,a)&&k(i,a,n[a]);return i},t=(i,n)=>y(i,M(n));var b=(i,n)=>{var a={};for(var o in i)c.call(i,o)&&n.indexOf(o)<0&&(a[o]=i[o]);if(i!=null&&m)for(var o of m(i))n.indexOf(o)<0&&C.call(i,o)&&(a[o]=i[o]);return a};import e from"react";import N from"../icons/24/arrow-right";import S from"../select";import P from"../text";import{prep as T}from"./prep";const _=u=>{var p=u,{bordered:i,children:n,text:a}=p,o=b(p,["bordered","children","text"]);return e.createElement(o["aria-disabled"]===!0||o["aria-disabled"]==="true"?"div":"a",t(l({},o),{className:i?"pagination__link pagination__link--bordered":"pagination__link"}),n||e.createElement(P,{size:P.sizes.small,tight:!0},a))},f=(i,n)=>n?a=>n(a,i):void 0,z=({entries:i,label:n,navigateOnSelect:a,next:o,onNext:u,onPage:p,onPrevious:E,onSelectChange:v,previous:g,select:d,windowSize:H})=>{const s=i.findIndex(r=>r["aria-current"]),h=s===-1?void 0:i.at(s),x=T(i,s,H),L=d?r=>{d.onChange&&d.onChange(r),v&&v(r),a&&window.location.assign(r.target.value)}:void 0;return e.createElement("nav",{className:"pagination","aria-label":n},e.createElement("div",{className:"pagination__content"},g?e.createElement(_,t(l({},g),{"aria-disabled":s===0,bordered:!0,onClick:f(g,E)}),e.createElement("div",{className:"pagination__icon pagination__icon--flipped"},e.createElement(N,null))):null,e.createElement("div",{className:d?"pagination__entries pagination__entries--hideable":"pagination__entries"},x.map(r=>e.createElement(_,t(l({},r),{key:r.href,onClick:f(r,p)})))),d?e.createElement("div",{className:"pagination__select"},e.createElement(S,t(l({},d),{onChange:L,options:d.options?d.options:i.map(r=>({text:r["aria-label"],value:r.href})),value:d.value?d.value:p&&h?h.href:void 0}))):null,o?e.createElement(_,t(l({},o),{"aria-disabled":s===i.length-1,bordered:!0,onClick:f(o,u)}),e.createElement("div",{className:"pagination__icon"},e.createElement(N,null))):null))};var B=z;export{B as default};
 //# sourceMappingURL=pagination.js.map

package/react/pagination/pagination.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/pagination/pagination.tsx"],
-  "sourcesContent": ["import React, { type MouseEventHandler } from 'react';\nimport SvgArrowRight from '../icons/24/arrow-right';\nimport Select from '../select';\nimport Text from '../text';\nimport type { ClickHandler, Pagination as Props } from './pagination.types';\nimport { prep } from './prep';\n\nconst Link: React.FC<React.PropsWithChildren<Props['entries'][0]>> = ({\n  bordered,\n  children,\n  text,\n  ...rest\n}) =>\n  React.createElement(\n    rest['aria-disabled'] === true || rest['aria-disabled'] === 'true'\n      ? 'div'\n      : 'a',\n    {\n      ...rest,\n      className: bordered\n        ? 'pagination__link pagination__link--bordered'\n        : 'pagination__link',\n    },\n    children ? (\n      children\n    ) : (\n      <Text size={Text.sizes.small} tight>\n        {text}\n      </Text>\n    ),\n  );\n\nconst linkHandler = (\n  entry: Props['entries'][0],\n  handler?: ClickHandler,\n): MouseEventHandler<HTMLAnchorElement> | undefined =>\n  handler ? event => handler(event, entry) : undefined;\n\nconst selectHandler = (\n  entries: Props['entries'],\n  handler?: ClickHandler,\n): React.ChangeEventHandler<HTMLSelectElement> | undefined =>\n  handler\n    ? event => {\n        const entry = entries.at(event.target.selectedIndex);\n        if (entry) {\n          return linkHandler(entry, handler);\n        }\n      }\n    : undefined;\n\nconst Pagination: React.FC<Props> = ({\n  entries,\n  label,\n  next,\n  onNext,\n  onPage,\n  onPrevious,\n  previous,\n  select,\n  windowSize,\n}) => {\n  const index = entries.findIndex(entry => entry['aria-current']);\n  const currentEntry = index === -1 ? undefined : entries.at(index);\n  const visibleEntries = prep(entries, index, windowSize);\n\n  return (\n    <nav className=\"pagination\" aria-label={label}>\n      <div className=\"pagination__content\">\n        {previous ? (\n          <Link\n            {...previous}\n            aria-disabled={index === 0}\n            bordered\n            onClick={linkHandler(previous, onPrevious)}\n          >\n            <div className=\"pagination__icon pagination__icon--flipped\">\n              <SvgArrowRight />\n            </div>\n          </Link>\n        ) : null}\n        <div\n          className={\n            select\n              ? 'pagination__entries pagination__entries--hideable'\n              : 'pagination__entries'\n          }\n        >\n          {visibleEntries.map(entry => (\n            <Link\n              {...entry}\n              key={entry.href}\n              onClick={linkHandler(entry, onPage)}\n            />\n          ))}\n        </div>\n        {select ? (\n          <div className=\"pagination__select\">\n            <Select\n              {...select}\n              onChange={\n                select.onChange\n                  ? select.onChange\n                  : selectHandler(entries, onPage)\n              }\n              options={\n                select.options\n                  ? select.options\n                  : entries.map(entry => ({\n                      text: entry['aria-label'],\n                      value: entry.href,\n                    }))\n              }\n              value={\n                select.value\n                  ? select.value\n                  : onPage && currentEntry\n                    ? currentEntry.href\n                    : undefined\n              }\n            />\n          </div>\n        ) : null}\n        {next ? (\n          <Link\n            {...next}\n            aria-disabled={index === entries.length - 1}\n            bordered\n            onClick={linkHandler(next, onNext)}\n          >\n            <div className=\"pagination__icon\">\n              <SvgArrowRight />\n            </div>\n          </Link>\n        ) : null}\n      </div>\n    </nav>\n  );\n};\n\nexport default Pagination;\n"],
-  "mappings": "+kBAAA,OAAOA,MAAuC,QAC9C,OAAOC,MAAmB,0BAC1B,OAAOC,MAAY,YACnB,OAAOC,MAAU,UAEjB,OAAS,QAAAC,MAAY,SAErB,MAAMC,EAAgEC,GAKnE,CALmE,IAAAC,EAAAD,EACpE,UAAAE,EACA,SAAAC,EACA,KAAAC,CAVF,EAOsEH,EAIjEI,EAAAC,EAJiEL,EAIjE,CAHH,WACA,WACA,SAGA,OAAAP,EAAM,cACJW,EAAK,eAAe,IAAM,IAAQA,EAAK,eAAe,IAAM,OACxD,MACA,IACJE,EAAAC,EAAA,GACKH,GADL,CAEE,UAAWH,EACP,8CACA,kBACN,GACAC,GAGET,EAAA,cAACG,EAAA,CAAK,KAAMA,EAAK,MAAM,MAAO,MAAK,IAChCO,CACH,CAEJ,GAEIK,EAAc,CAClBC,EACAC,IAEAA,EAAUC,GAASD,EAAQC,EAAOF,CAAK,EAAI,OAEvCG,EAAgB,CACpBC,EACAH,IAEAA,EACIC,GAAS,CACP,MAAMF,EAAQI,EAAQ,GAAGF,EAAM,OAAO,aAAa,EACnD,GAAIF,EACF,OAAOD,EAAYC,EAAOC,CAAO,CAErC,EACA,OAEAI,EAA8B,CAAC,CACnC,QAAAD,EACA,MAAAE,EACA,KAAAC,EACA,OAAAC,EACA,OAAAC,EACA,WAAAC,EACA,SAAAC,EACA,OAAAC,EACA,WAAAC,CACF,IAAM,CACJ,MAAMC,EAAQV,EAAQ,UAAUJ,GAASA,EAAM,cAAc,CAAC,EACxDe,EAAeD,IAAU,GAAK,OAAYV,EAAQ,GAAGU,CAAK,EAC1DE,EAAiB5B,EAAKgB,EAASU,EAAOD,CAAU,EAEtD,OACE7B,EAAA,cAAC,OAAI,UAAU,aAAa,aAAYsB,GACtCtB,EAAA,cAAC,OAAI,UAAU,uBACZ2B,EACC3B,EAAA,cAACK,EAAAQ,EAAAC,EAAA,GACKa,GADL,CAEC,gBAAeG,IAAU,EACzB,SAAQ,GACR,QAASf,EAAYY,EAAUD,CAAU,IAEzC1B,EAAA,cAAC,OAAI,UAAU,8CACbA,EAAA,cAACC,EAAA,IAAc,CACjB,CACF,EACE,KACJD,EAAA,cAAC,OACC,UACE4B,EACI,oDACA,uBAGLI,EAAe,IAAIhB,GAClBhB,EAAA,cAACK,EAAAQ,EAAAC,EAAA,GACKE,GADL,CAEC,IAAKA,EAAM,KACX,QAASD,EAAYC,EAAOS,CAAM,GACpC,CACD,CACH,EACCG,EACC5B,EAAA,cAAC,OAAI,UAAU,sBACbA,EAAA,cAACE,EAAAW,EAAAC,EAAA,GACKc,GADL,CAEC,SACEA,EAAO,SACHA,EAAO,SACPT,EAAcC,EAASK,CAAM,EAEnC,QACEG,EAAO,QACHA,EAAO,QACPR,EAAQ,IAAIJ,IAAU,CACpB,KAAMA,EAAM,YAAY,EACxB,MAAOA,EAAM,IACf,EAAE,EAER,MACEY,EAAO,MACHA,EAAO,MACPH,GAAUM,EACRA,EAAa,KACb,QAEV,CACF,EACE,KACHR,EACCvB,EAAA,cAACK,EAAAQ,EAAAC,EAAA,GACKS,GADL,CAEC,gBAAeO,IAAUV,EAAQ,OAAS,EAC1C,SAAQ,GACR,QAASL,EAAYQ,EAAMC,CAAM,IAEjCxB,EAAA,cAAC,OAAI,UAAU,oBACbA,EAAA,cAACC,EAAA,IAAc,CACjB,CACF,EACE,IACN,CACF,CAEJ,EAEA,IAAOgC,EAAQZ",
-  "names": ["React", "SvgArrowRight", "Select", "Text", "prep", "Link", "_a", "_b", "bordered", "children", "text", "rest", "__objRest", "__spreadProps", "__spreadValues", "linkHandler", "entry", "handler", "event", "selectHandler", "entries", "Pagination", "label", "next", "onNext", "onPage", "onPrevious", "previous", "select", "windowSize", "index", "currentEntry", "visibleEntries", "pagination_default"]
+  "sourcesContent": ["import React, { type MouseEventHandler } from 'react';\nimport SvgArrowRight from '../icons/24/arrow-right';\nimport Select from '../select';\nimport Text from '../text';\nimport type { ClickHandler, Pagination as Props } from './pagination.types';\nimport { prep } from './prep';\n\nconst Link: React.FC<React.PropsWithChildren<Props['entries'][0]>> = ({\n  bordered,\n  children,\n  text,\n  ...rest\n}) =>\n  React.createElement(\n    rest['aria-disabled'] === true || rest['aria-disabled'] === 'true'\n      ? 'div'\n      : 'a',\n    {\n      ...rest,\n      className: bordered\n        ? 'pagination__link pagination__link--bordered'\n        : 'pagination__link',\n    },\n    children ? (\n      children\n    ) : (\n      <Text size={Text.sizes.small} tight>\n        {text}\n      </Text>\n    ),\n  );\n\nconst linkHandler = (\n  entry: Props['entries'][0],\n  handler?: ClickHandler,\n): MouseEventHandler<HTMLAnchorElement> | undefined =>\n  handler ? event => handler(event, entry) : undefined;\n\nconst Pagination: React.FC<Props> = ({\n  entries,\n  label,\n  navigateOnSelect,\n  next,\n  onNext,\n  onPage,\n  onPrevious,\n  onSelectChange,\n  previous,\n  select,\n  windowSize,\n}) => {\n  const index = entries.findIndex(entry => entry['aria-current']);\n  const currentEntry = index === -1 ? undefined : entries.at(index);\n  const visibleEntries = prep(entries, index, windowSize);\n\n  const handleSelectChange: Parameters<typeof Select>[0]['onChange'] = select\n    ? event => {\n        if (select.onChange) {\n          select.onChange(event);\n        }\n\n        if (onSelectChange) {\n          onSelectChange(event);\n        }\n\n        if (navigateOnSelect) {\n          window.location.assign(event.target.value);\n        }\n      }\n    : undefined;\n\n  return (\n    <nav className=\"pagination\" aria-label={label}>\n      <div className=\"pagination__content\">\n        {previous ? (\n          <Link\n            {...previous}\n            aria-disabled={index === 0}\n            bordered\n            onClick={linkHandler(previous, onPrevious)}\n          >\n            <div className=\"pagination__icon pagination__icon--flipped\">\n              <SvgArrowRight />\n            </div>\n          </Link>\n        ) : null}\n        <div\n          className={\n            select\n              ? 'pagination__entries pagination__entries--hideable'\n              : 'pagination__entries'\n          }\n        >\n          {visibleEntries.map(entry => (\n            <Link\n              {...entry}\n              key={entry.href}\n              onClick={linkHandler(entry, onPage)}\n            />\n          ))}\n        </div>\n        {select ? (\n          <div className=\"pagination__select\">\n            <Select\n              {...select}\n              onChange={handleSelectChange}\n              options={\n                select.options\n                  ? select.options\n                  : entries.map(entry => ({\n                      text: entry['aria-label'],\n                      value: entry.href,\n                    }))\n              }\n              value={\n                select.value\n                  ? select.value\n                  : onPage && currentEntry\n                    ? currentEntry.href\n                    : undefined\n              }\n            />\n          </div>\n        ) : null}\n        {next ? (\n          <Link\n            {...next}\n            aria-disabled={index === entries.length - 1}\n            bordered\n            onClick={linkHandler(next, onNext)}\n          >\n            <div className=\"pagination__icon\">\n              <SvgArrowRight />\n            </div>\n          </Link>\n        ) : null}\n      </div>\n    </nav>\n  );\n};\n\nexport default Pagination;\n"],
+  "mappings": "+kBAAA,OAAOA,MAAuC,QAC9C,OAAOC,MAAmB,0BAC1B,OAAOC,MAAY,YACnB,OAAOC,MAAU,UAEjB,OAAS,QAAAC,MAAY,SAErB,MAAMC,EAAgEC,GAKnE,CALmE,IAAAC,EAAAD,EACpE,UAAAE,EACA,SAAAC,EACA,KAAAC,CAVF,EAOsEH,EAIjEI,EAAAC,EAJiEL,EAIjE,CAHH,WACA,WACA,SAGA,OAAAP,EAAM,cACJW,EAAK,eAAe,IAAM,IAAQA,EAAK,eAAe,IAAM,OACxD,MACA,IACJE,EAAAC,EAAA,GACKH,GADL,CAEE,UAAWH,EACP,8CACA,kBACN,GACAC,GAGET,EAAA,cAACG,EAAA,CAAK,KAAMA,EAAK,MAAM,MAAO,MAAK,IAChCO,CACH,CAEJ,GAEIK,EAAc,CAClBC,EACAC,IAEAA,EAAUC,GAASD,EAAQC,EAAOF,CAAK,EAAI,OAEvCG,EAA8B,CAAC,CACnC,QAAAC,EACA,MAAAC,EACA,iBAAAC,EACA,KAAAC,EACA,OAAAC,EACA,OAAAC,EACA,WAAAC,EACA,eAAAC,EACA,SAAAC,EACA,OAAAC,EACA,WAAAC,CACF,IAAM,CACJ,MAAMC,EAAQX,EAAQ,UAAUJ,GAASA,EAAM,cAAc,CAAC,EACxDgB,EAAeD,IAAU,GAAK,OAAYX,EAAQ,GAAGW,CAAK,EAC1DE,EAAiB7B,EAAKgB,EAASW,EAAOD,CAAU,EAEhDI,EAA+DL,EACjEX,GAAS,CACHW,EAAO,UACTA,EAAO,SAASX,CAAK,EAGnBS,GACFA,EAAeT,CAAK,EAGlBI,GACF,OAAO,SAAS,OAAOJ,EAAM,OAAO,KAAK,CAE7C,EACA,OAEJ,OACElB,EAAA,cAAC,OAAI,UAAU,aAAa,aAAYqB,GACtCrB,EAAA,cAAC,OAAI,UAAU,uBACZ4B,EACC5B,EAAA,cAACK,EAAAQ,EAAAC,EAAA,GACKc,GADL,CAEC,gBAAeG,IAAU,EACzB,SAAQ,GACR,QAAShB,EAAYa,EAAUF,CAAU,IAEzC1B,EAAA,cAAC,OAAI,UAAU,8CACbA,EAAA,cAACC,EAAA,IAAc,CACjB,CACF,EACE,KACJD,EAAA,cAAC,OACC,UACE6B,EACI,oDACA,uBAGLI,EAAe,IAAIjB,GAClBhB,EAAA,cAACK,EAAAQ,EAAAC,EAAA,GACKE,GADL,CAEC,IAAKA,EAAM,KACX,QAASD,EAAYC,EAAOS,CAAM,GACpC,CACD,CACH,EACCI,EACC7B,EAAA,cAAC,OAAI,UAAU,sBACbA,EAAA,cAACE,EAAAW,EAAAC,EAAA,GACKe,GADL,CAEC,SAAUK,EACV,QACEL,EAAO,QACHA,EAAO,QACPT,EAAQ,IAAIJ,IAAU,CACpB,KAAMA,EAAM,YAAY,EACxB,MAAOA,EAAM,IACf,EAAE,EAER,MACEa,EAAO,MACHA,EAAO,MACPJ,GAAUO,EACRA,EAAa,KACb,QAEV,CACF,EACE,KACHT,EACCvB,EAAA,cAACK,EAAAQ,EAAAC,EAAA,GACKS,GADL,CAEC,gBAAeQ,IAAUX,EAAQ,OAAS,EAC1C,SAAQ,GACR,QAASL,EAAYQ,EAAMC,CAAM,IAEjCxB,EAAA,cAAC,OAAI,UAAU,oBACbA,EAAA,cAACC,EAAA,IAAc,CACjB,CACF,EACE,IACN,CACF,CAEJ,EAEA,IAAOkC,EAAQhB",
+  "names": ["React", "SvgArrowRight", "Select", "Text", "prep", "Link", "_a", "_b", "bordered", "children", "text", "rest", "__objRest", "__spreadProps", "__spreadValues", "linkHandler", "entry", "handler", "event", "Pagination", "entries", "label", "navigateOnSelect", "next", "onNext", "onPage", "onPrevious", "onSelectChange", "previous", "select", "windowSize", "index", "currentEntry", "visibleEntries", "handleSelectChange", "pagination_default"]
 }

package/react/pagination/pagination.scss

@@ -17,8 +17,6 @@
     }
   }
 
-  container-type: inline-size;
-
   &__content {
     align-items: center;
     display: flex;

package/react/pagination/pagination.types.d.ts

@@ -11,9 +11,12 @@ export type Pagination = {
     /** `Pagination` is a `nav` and needs to be labeled */
     label: string;
     next?: Link;
+    /** If true `select.options[number].value` will be used for navigation */
+    navigateOnSelect?: boolean;
     onNext?: ClickHandler;
     onPage?: ClickHandler;
     onPrevious?: ClickHandler;
+    onSelectChange?: Select['onChange'];
     previous?: Link;
     /** If passed, renders a `Select` in slimmer containers */
     select?: Select;