@sats-group/ui-lib 82.0.0 → 82.1.0

package/package.json

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

package/react/components.js

@@ -1,2 +1,2 @@
-const e=["badge","banner","bomb","button","checkbox","chip","chip-selected","collapse","confirmation","context-menu","cropped-image","div-button","dropdown-list","expander","filter","filter-wrapper","flag","form-content","hidden-input","link","link-button","link-card","message","message-field","modal","progress-bar","radio","scale-bar","search","select","select-option","tag","text","text-area","text-input","toggle","toolbox","visually-button","visually-hidden"],t=[".badge",".banner",".bomb",".button",".checkbox",".chip",".chip-selected",".collapse",".confirmation",".context-menu",".cropped-image",".div-button",".dropdown-list",".expander",".filter",".filter-wrapper",".flag",".form-content",".hidden-input",".link",".link-button",".link-card",".message",".message-field",".modal",".progress-bar",".radio",".scale-bar",".search",".select",".select-option",".tag",".text",".text-area",".text-input",".toggle",".toolbox",".visually-button",".visually-hidden"];export{e as names,t as selectors};
+const e=["badge","banner","bomb","button","checkbox","chip","chip-selected","collapse","confirmation","context-menu","cropped-image","div-button","dropdown-list","expander","filter","filter-wrapper","flag","form-content","hidden-input","link","link-button","link-card","message","message-field","modal","pagination","progress-bar","radio","scale-bar","search","select","select-option","tag","text","text-area","text-input","toggle","toolbox","visually-button","visually-hidden"],t=[".badge",".banner",".bomb",".button",".checkbox",".chip",".chip-selected",".collapse",".confirmation",".context-menu",".cropped-image",".div-button",".dropdown-list",".expander",".filter",".filter-wrapper",".flag",".form-content",".hidden-input",".link",".link-button",".link-card",".message",".message-field",".modal",".pagination",".progress-bar",".radio",".scale-bar",".search",".select",".select-option",".tag",".text",".text-area",".text-input",".toggle",".toolbox",".visually-button",".visually-hidden"];export{e as names,t as selectors};
 //# sourceMappingURL=components.js.map

package/react/components.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../react/components.ts"],
-  "sourcesContent": ["export const names = [\n  'badge',\n  'banner',\n  'bomb',\n  'button',\n  'checkbox',\n  'chip',\n  'chip-selected',\n  'collapse',\n  'confirmation',\n  'context-menu',\n  'cropped-image',\n  'div-button',\n  'dropdown-list',\n  'expander',\n  'filter',\n  'filter-wrapper',\n  'flag',\n  'form-content',\n  'hidden-input',\n  'link',\n  'link-button',\n  'link-card',\n  'message',\n  'message-field',\n  'modal',\n  'progress-bar',\n  'radio',\n  'scale-bar',\n  'search',\n  'select',\n  'select-option',\n  'tag',\n  'text',\n  'text-area',\n  'text-input',\n  'toggle',\n  'toolbox',\n  'visually-button',\n  'visually-hidden',\n];\n\nexport const selectors = [\n  '.badge',\n  '.banner',\n  '.bomb',\n  '.button',\n  '.checkbox',\n  '.chip',\n  '.chip-selected',\n  '.collapse',\n  '.confirmation',\n  '.context-menu',\n  '.cropped-image',\n  '.div-button',\n  '.dropdown-list',\n  '.expander',\n  '.filter',\n  '.filter-wrapper',\n  '.flag',\n  '.form-content',\n  '.hidden-input',\n  '.link',\n  '.link-button',\n  '.link-card',\n  '.message',\n  '.message-field',\n  '.modal',\n  '.progress-bar',\n  '.radio',\n  '.scale-bar',\n  '.search',\n  '.select',\n  '.select-option',\n  '.tag',\n  '.text',\n  '.text-area',\n  '.text-input',\n  '.toggle',\n  '.toolbox',\n  '.visually-button',\n  '.visually-hidden',\n];\n"],
-  "mappings": "AAAO,MAAMA,EAAQ,CACnB,QACA,SACA,OACA,SACA,WACA,OACA,gBACA,WACA,eACA,eACA,gBACA,aACA,gBACA,WACA,SACA,iBACA,OACA,eACA,eACA,OACA,cACA,YACA,UACA,gBACA,QACA,eACA,QACA,YACA,SACA,SACA,gBACA,MACA,OACA,YACA,aACA,SACA,UACA,kBACA,iBACF,EAEaC,EAAY,CACvB,SACA,UACA,QACA,UACA,YACA,QACA,iBACA,YACA,gBACA,gBACA,iBACA,cACA,iBACA,YACA,UACA,kBACA,QACA,gBACA,gBACA,QACA,eACA,aACA,WACA,iBACA,SACA,gBACA,SACA,aACA,UACA,UACA,iBACA,OACA,QACA,aACA,cACA,UACA,WACA,mBACA,kBACF",
+  "sourcesContent": ["export const names = [\n  'badge',\n  'banner',\n  'bomb',\n  'button',\n  'checkbox',\n  'chip',\n  'chip-selected',\n  'collapse',\n  'confirmation',\n  'context-menu',\n  'cropped-image',\n  'div-button',\n  'dropdown-list',\n  'expander',\n  'filter',\n  'filter-wrapper',\n  'flag',\n  'form-content',\n  'hidden-input',\n  'link',\n  'link-button',\n  'link-card',\n  'message',\n  'message-field',\n  'modal',\n  'pagination',\n  'progress-bar',\n  'radio',\n  'scale-bar',\n  'search',\n  'select',\n  'select-option',\n  'tag',\n  'text',\n  'text-area',\n  'text-input',\n  'toggle',\n  'toolbox',\n  'visually-button',\n  'visually-hidden',\n];\n\nexport const selectors = [\n  '.badge',\n  '.banner',\n  '.bomb',\n  '.button',\n  '.checkbox',\n  '.chip',\n  '.chip-selected',\n  '.collapse',\n  '.confirmation',\n  '.context-menu',\n  '.cropped-image',\n  '.div-button',\n  '.dropdown-list',\n  '.expander',\n  '.filter',\n  '.filter-wrapper',\n  '.flag',\n  '.form-content',\n  '.hidden-input',\n  '.link',\n  '.link-button',\n  '.link-card',\n  '.message',\n  '.message-field',\n  '.modal',\n  '.pagination',\n  '.progress-bar',\n  '.radio',\n  '.scale-bar',\n  '.search',\n  '.select',\n  '.select-option',\n  '.tag',\n  '.text',\n  '.text-area',\n  '.text-input',\n  '.toggle',\n  '.toolbox',\n  '.visually-button',\n  '.visually-hidden',\n];\n"],
+  "mappings": "AAAO,MAAMA,EAAQ,CACnB,QACA,SACA,OACA,SACA,WACA,OACA,gBACA,WACA,eACA,eACA,gBACA,aACA,gBACA,WACA,SACA,iBACA,OACA,eACA,eACA,OACA,cACA,YACA,UACA,gBACA,QACA,aACA,eACA,QACA,YACA,SACA,SACA,gBACA,MACA,OACA,YACA,aACA,SACA,UACA,kBACA,iBACF,EAEaC,EAAY,CACvB,SACA,UACA,QACA,UACA,YACA,QACA,iBACA,YACA,gBACA,gBACA,iBACA,cACA,iBACA,YACA,UACA,kBACA,QACA,gBACA,gBACA,QACA,eACA,aACA,WACA,iBACA,SACA,cACA,gBACA,SACA,aACA,UACA,UACA,iBACA,OACA,QACA,aACA,cACA,UACA,WACA,mBACA,kBACF",
   "names": ["names", "selectors"]
 }

package/react/pagination/index.d.ts

@@ -0,0 +1,2 @@
+import Pagination from './pagination';
+export default Pagination;

package/react/pagination/index.js

@@ -0,0 +1,2 @@
+import o from"./pagination";var a=o;export{a as default};
+//# sourceMappingURL=index.js.map

package/react/pagination/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../react/pagination/index.ts"],
+  "sourcesContent": ["import Pagination from './pagination';\nexport default Pagination;\n"],
+  "mappings": "AAAA,OAAOA,MAAgB,eACvB,IAAOC,EAAQD",
+  "names": ["Pagination", "pagination_default"]
+}

package/react/pagination/pagination.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { Pagination as Props } from './pagination.types';
+declare const Pagination: React.FC<Props>;
+export default Pagination;

package/react/pagination/pagination.js

@@ -0,0 +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};
+//# sourceMappingURL=pagination.js.map

package/react/pagination/pagination.js.map

@@ -0,0 +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"]
+}

package/react/pagination/pagination.scss

@@ -0,0 +1,119 @@
+@use 'sass:math';
+@use '../../tokens/colours';
+@use '../../tokens/spacing';
+
+.pagination {
+  @mixin break {
+    @container (min-width: 400px) {
+      @content;
+    }
+  }
+
+  @mixin hover {
+    @media (hover: hover) {
+      &:hover {
+        @content;
+      }
+    }
+  }
+
+  container-type: inline-size;
+
+  &__content {
+    align-items: center;
+    display: flex;
+    gap: spacing.$s;
+  }
+
+  &__entries {
+    display: contents;
+
+    &--hideable:has(+ .pagination__select) {
+      display: none;
+
+      @include break {
+        display: contents;
+      }
+    }
+  }
+
+  &__select {
+    @include break {
+      display: none;
+    }
+  }
+
+  &__link {
+    $size: 38px;
+    border-radius: math.div($size, 2);
+    display: grid;
+    flex-shrink: 0;
+    height: $size;
+    max-height: $size;
+    min-height: $size;
+    min-width: $size;
+    padding: 0 spacing.$s;
+    place-items: center;
+    text-decoration: none;
+
+    @include hover {
+      background: var(--surface-primary-hover);
+      color: var(--buttons-primary-hover);
+    }
+
+    &--bordered {
+      background: var(--buttons-clean-default);
+      border: 1px solid var(--ge-divider-default);
+      color: var(--on-buttons-on-clean-default);
+      padding: 0;
+
+      @include break {
+        &[aria-disabled='true'] {
+          display: none;
+        }
+      }
+
+      @include hover {
+        background: var(--buttons-clean-default);
+        color: var(--on-buttons-on-clean-default);
+      }
+    }
+
+    &[aria-current='page'] {
+      background: var(--buttons-primary-default);
+      color: var(--on-buttons-on-primary-default);
+      outline-color: var(--buttons-primary-default);
+
+      @include break {
+        & + .pagination__link--bordered {
+          display: none;
+        }
+      }
+
+      @include hover {
+        background: var(--buttons-primary-hover);
+        color: var(--on-buttons-on-primary-default);
+      }
+    }
+
+    &[aria-disabled='true'] {
+      background: var(--buttons-clean-disabled);
+      color: var(--surface-secondary-disabled);
+
+      @include hover {
+        background: var(--buttons-clean-disabled);
+        color: var(--surface-secondary-disabled);
+      }
+    }
+  }
+
+  &__icon {
+    &--flipped {
+      rotate: 180deg;
+    }
+
+    svg {
+      display: block;
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+import type { AnchorHTMLAttributes } from 'react';
+import type { Select } from '../select/select.types';
+export type Link = AnchorHTMLAttributes<HTMLAnchorElement> & Required<Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-label' | 'href'>> & {
+    'aria-current'?: 'page';
+    bordered?: boolean;
+    text: string;
+};
+export type ClickHandler = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, entry: Link) => void;
+export type Pagination = {
+    entries: Link[];
+    /** `Pagination` is a `nav` and needs to be labeled */
+    label: string;
+    next?: Link;
+    onNext?: ClickHandler;
+    onPage?: ClickHandler;
+    onPrevious?: ClickHandler;
+    previous?: Link;
+    /** If passed, renders a `Select` in slimmer containers */
+    select?: Select;
+    /** Enforced minimum of `5` */
+    windowSize: number;
+};

package/react/pagination/pagination.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=pagination.types.js.map

package/react/pagination/pagination.types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/react/pagination/prep.d.ts

@@ -0,0 +1,9 @@
+import type { Pagination as Props } from './pagination.types';
+declare const filter: (entries: Props["entries"], currentIndex: number, windowSize: number) => typeof entries;
+/**
+ * To do less work on the client,
+ * use this on `entries` on the server
+ * before passing them to `Pagination`.
+ */
+export declare const prep: typeof filter;
+export {};

package/react/pagination/prep.js

@@ -0,0 +1,2 @@
+const u=(t,n,i)=>{const c=Math.max(i,5);if(t.length<=i)return t;const e=t.length-1,a=c-2,o=a/2;let s=Math.max(n-Math.floor(o),1),r=Math.min(n+Math.ceil(o),e);const l=Math.max(a-(r-s),0);s===1?r=r+l:r===e&&(s=s-l);const f=t.at(0),m=t.at(-1);if(!f||!m)return t;const p=t.slice(s,r);return p.unshift(f),p.push(m),p},h={text:"..."},d=(t,n)=>{const i=t.at(1),c=t.at(-2),e=n.at(1),a=n.at(-2);if(!i||!c||!e||!a)return n;const o=Array.from(n);return i.href!==e.href&&o.splice(1,1,Object.assign({},e,h)),c.href!==a.href&&o.splice(-2,1,Object.assign({},a,h)),o},x=(t,n,i)=>d(t,u(t,n,i));export{x as prep};
+//# sourceMappingURL=prep.js.map

package/react/pagination/prep.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../react/pagination/prep.ts"],
+  "sourcesContent": ["import type { Pagination as Props } from './pagination.types';\n\nconst filter = (\n  entries: Props['entries'],\n  currentIndex: number,\n  windowSize: number,\n): typeof entries => {\n  // NOTE: We can't have a window size less than 5,\n  // as it's then not possible to implement the design.\n  // The minimum UI renders [initial, ellipsis, current, ellipsis, ultimate].\n  const minimumWindowSize = Math.max(windowSize, 5);\n\n  if (entries.length <= windowSize) {\n    return entries;\n  }\n\n  const ultimateIndex = entries.length - 1;\n  const dynamicWindowSize = minimumWindowSize - 2;\n  const maxRadius = dynamicWindowSize / 2;\n  let start = Math.max(currentIndex - Math.floor(maxRadius), 1);\n  let stop = Math.min(currentIndex + Math.ceil(maxRadius), ultimateIndex);\n  const pad = Math.max(dynamicWindowSize - (stop - start), 0);\n  if (start === 1) {\n    stop = stop + pad;\n  } else if (stop === ultimateIndex) {\n    start = start - pad;\n  }\n\n  const initial = entries.at(0);\n  const ultimate = entries.at(-1);\n  if (!initial || !ultimate) {\n    return entries;\n  }\n\n  const dynamicWindow = entries.slice(start, stop);\n  dynamicWindow.unshift(initial);\n  dynamicWindow.push(ultimate);\n\n  return dynamicWindow;\n};\n\nconst overrides = { text: '...' };\n\nconst replaceText = (entries: Props['entries'], subset: Props['entries']) => {\n  const peninitial = entries.at(1);\n  const penultimate = entries.at(-2);\n  const subsetPeninitial = subset.at(1);\n  const subsetPenultimate = subset.at(-2);\n  if (!peninitial || !penultimate || !subsetPeninitial || !subsetPenultimate) {\n    return subset;\n  }\n\n  const newSubset = Array.from(subset);\n\n  if (peninitial.href !== subsetPeninitial.href) {\n    newSubset.splice(1, 1, Object.assign({}, subsetPeninitial, overrides));\n  }\n\n  if (penultimate.href !== subsetPenultimate.href) {\n    newSubset.splice(-2, 1, Object.assign({}, subsetPenultimate, overrides));\n  }\n\n  return newSubset;\n};\n\n/**\n * To do less work on the client,\n * use this on `entries` on the server\n * before passing them to `Pagination`.\n */\nexport const prep: typeof filter = (entries, currentIndex, windowSize) =>\n  replaceText(entries, filter(entries, currentIndex, windowSize));\n"],
+  "mappings": "AAEA,MAAMA,EAAS,CACbC,EACAC,EACAC,IACmB,CAInB,MAAMC,EAAoB,KAAK,IAAID,EAAY,CAAC,EAEhD,GAAIF,EAAQ,QAAUE,EACpB,OAAOF,EAGT,MAAMI,EAAgBJ,EAAQ,OAAS,EACjCK,EAAoBF,EAAoB,EACxCG,EAAYD,EAAoB,EACtC,IAAIE,EAAQ,KAAK,IAAIN,EAAe,KAAK,MAAMK,CAAS,EAAG,CAAC,EACxDE,EAAO,KAAK,IAAIP,EAAe,KAAK,KAAKK,CAAS,EAAGF,CAAa,EACtE,MAAMK,EAAM,KAAK,IAAIJ,GAAqBG,EAAOD,GAAQ,CAAC,EACtDA,IAAU,EACZC,EAAOA,EAAOC,EACLD,IAASJ,IAClBG,EAAQA,EAAQE,GAGlB,MAAMC,EAAUV,EAAQ,GAAG,CAAC,EACtBW,EAAWX,EAAQ,GAAG,EAAE,EAC9B,GAAI,CAACU,GAAW,CAACC,EACf,OAAOX,EAGT,MAAMY,EAAgBZ,EAAQ,MAAMO,EAAOC,CAAI,EAC/C,OAAAI,EAAc,QAAQF,CAAO,EAC7BE,EAAc,KAAKD,CAAQ,EAEpBC,CACT,EAEMC,EAAY,CAAE,KAAM,KAAM,EAE1BC,EAAc,CAACd,EAA2Be,IAA6B,CAC3E,MAAMC,EAAahB,EAAQ,GAAG,CAAC,EACzBiB,EAAcjB,EAAQ,GAAG,EAAE,EAC3BkB,EAAmBH,EAAO,GAAG,CAAC,EAC9BI,EAAoBJ,EAAO,GAAG,EAAE,EACtC,GAAI,CAACC,GAAc,CAACC,GAAe,CAACC,GAAoB,CAACC,EACvD,OAAOJ,EAGT,MAAMK,EAAY,MAAM,KAAKL,CAAM,EAEnC,OAAIC,EAAW,OAASE,EAAiB,MACvCE,EAAU,OAAO,EAAG,EAAG,OAAO,OAAO,CAAC,EAAGF,EAAkBL,CAAS,CAAC,EAGnEI,EAAY,OAASE,EAAkB,MACzCC,EAAU,OAAO,GAAI,EAAG,OAAO,OAAO,CAAC,EAAGD,EAAmBN,CAAS,CAAC,EAGlEO,CACT,EAOaC,EAAsB,CAACrB,EAASC,EAAcC,IACzDY,EAAYd,EAASD,EAAOC,EAASC,EAAcC,CAAU,CAAC",
+  "names": ["filter", "entries", "currentIndex", "windowSize", "minimumWindowSize", "ultimateIndex", "dynamicWindowSize", "maxRadius", "start", "stop", "pad", "initial", "ultimate", "dynamicWindow", "overrides", "replaceText", "subset", "peninitial", "penultimate", "subsetPeninitial", "subsetPenultimate", "newSubset", "prep"]
+}

package/react/search/search.d.ts

@@ -16,6 +16,7 @@ declare const RefSearch: React.ForwardRefExoticComponent<{
     name: string;
     onChangeFunc?: (arg: string) => void;
     onClear?: () => void;
+    onInputClick?: () => void;
     theme?: import("../types").ObjectValues<typeof themes>;
     variant?: import("../types").ObjectValues<typeof variants>;
 } & import("../types").InputHtmlProps & React.RefAttributes<HTMLInputElement>>;

package/react/search/search.js

@@ -1,2 +1,2 @@
-"use client";var Z=Object.defineProperty,b=Object.defineProperties;var R=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var D=(e,a,i)=>a in e?Z(e,a,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[a]=i,p=(e,a)=>{for(var i in a||(a={}))H.call(a,i)&&D(e,i,a[i]);if(N)for(var i of N(a))O.call(a,i)&&D(e,i,a[i]);return e},f=(e,a)=>b(e,R(a));var P=(e,a)=>{var i={};for(var l in e)H.call(e,l)&&a.indexOf(l)<0&&(i[l]=e[l]);if(e!=null&&N)for(var l of N(e))a.indexOf(l)<0&&O.call(e,l)&&(i[l]=e[l]);return i};import t from"classnames";import s,{useRef as ss,useState as V}from"react";import n from"../button";import es from"../hooks/use-click-outside";import{useIsMounted as rs}from"../hooks/use-is-mounted";import as from"../icons/18/close";import is from"../icons/24/search";import _ from"../text";import ns from"../use-input-validation";import{themes as h,inputSizes as m,variants as v,expandDirections as ls}from"./search.types";const j=s.forwardRef((os,G)=>{var x=os,{button:e,customErrorMessages:a,clear:i,disabled:l,label:y,isLabelVisible:$=!0,name:q,onChangeFunc:A=()=>{},onClear:B=()=>{},expandable:c,placeholder:L,required:S,inputSize:o=m.small,theme:d=h.inline,variant:r=v.default,value:W="",helpText:g,helpIcon:z}=x,F=P(x,["button","customErrorMessages","clear","disabled","label","isLabelVisible","name","onChangeFunc","onClear","expandable","placeholder","required","inputSize","theme","variant","value","helpText","helpIcon"]);const[J,K,I]=ns(a),T=ss(null),[w,C]=V(!1),Q=rs();es(T,()=>C(!1));const[E,U]=V(W),M=u=>{A(u),U(u)},X=u=>{M(u.target.value),J(u)},k=()=>{M(""),B()},Y=()=>{k(),C(!1)};return s.createElement("div",{className:t("search",{[`search--expand-direction-${c==null?void 0:c.direction}`]:c==null?void 0:c.direction})},Q?s.createElement("div",{className:t("search__inner",{"search__inner--expandable":c,"search__inner--expand":w}),ref:T},d===h.inline&&$?s.createElement(_,{theme:_.themes.emphasis,size:o===m.large?_.sizes.large:_.sizes.small,className:t("search__header",{[`search__header--variant-${r}`]:r})},y):null,s.createElement("div",{className:t("search__input-wrapper",{[`search__input-wrapper--size-${o}`]:o,[`search__input-wrapper--theme-${d}`]:d,[`search__input-wrapper--variant-${r}`]:r})},s.createElement("label",{className:"search__label"},s.createElement("div",{className:t("search__icon",{[`search__icon--variant-${r}`]:r})},s.createElement(is,null)),s.createElement("input",f(p({},F),{className:t("search__input",{[`search__input--variant-${r}`]:r,[`search__input--size-${o}`]:o}),disabled:l,name:q,onChange:X,onClick:()=>C(!0),value:E,onInvalid:K,placeholder:L,ref:G,required:S,type:"search","aria-label":d===h.floating||!$?y:void 0}))),s.createElement("div",{className:t("search__clear-button",{"search__clear-button--visible":E})},s.createElement(n,f(p({},i),{onClick:k,size:o===m.small?n.sizes.small:n.sizes.basic,type:"button",variant:r===v.fixed?n.variants.fixedTertiary:n.variants.tertiary}))),e?s.createElement(n,f(p({},e),{className:"search__search-button",variant:r===v.fixed?n.variants.secondaryWhite:n.variants.secondary,type:"submit",size:o===m.small?n.sizes.small:n.sizes.basic})):null,c&&w?s.createElement(n,f(p({},c.close),{className:"search__close-button",onClick:Y,leadingIcon:s.createElement(as,null),size:o===m.small?n.sizes.small:n.sizes.basic,type:"button",variant:r===v.fixed?n.variants.fixedTertiary:n.variants.tertiary})):null),I?s.createElement("div",{"aria-hidden":"true",className:"search__error"},s.createElement(_,null,I)):null,d===h.inline&&g?s.createElement(_,{size:_.sizes.interface,className:t("search__help-text",{[`search__help-text--variant-${r}`]:r})},z,g):null):s.createElement("div",{className:"search__loading-inner"},d===h.inline&&$?s.createElement("div",{className:t("search__loading-extra",{[`search__loading-extra--${r}`]:r})},y):null,s.createElement("div",{className:t("search__loading-input",{[`search__loading-input--${r}`]:r,[`search__loading-input--${o}`]:o})}),d===h.inline&&g?s.createElement("div",{className:t("search__loading-extra",{[`search__loading-extra--${r}`]:r})},z,g):null))});j.displayName="Search";const ts=Object.assign(j,{themes:h,variants:v,inputSizes:m,expandDirections:ls});var $s=ts;export{$s as default};
+"use client";var b=Object.defineProperty,R=Object.defineProperties;var ss=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var D=(e,a,i)=>a in e?b(e,a,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[a]=i,p=(e,a)=>{for(var i in a||(a={}))H.call(a,i)&&D(e,i,a[i]);if(N)for(var i of N(a))O.call(a,i)&&D(e,i,a[i]);return e},f=(e,a)=>R(e,ss(a));var P=(e,a)=>{var i={};for(var l in e)H.call(e,l)&&a.indexOf(l)<0&&(i[l]=e[l]);if(e!=null&&N)for(var l of N(e))a.indexOf(l)<0&&O.call(e,l)&&(i[l]=e[l]);return i};import t from"classnames";import s,{useRef as es,useState as V}from"react";import n from"../button";import rs from"../hooks/use-click-outside";import{useIsMounted as as}from"../hooks/use-is-mounted";import is from"../icons/18/close";import ns from"../icons/24/search";import _ from"../text";import ls from"../use-input-validation";import{themes as h,inputSizes as m,variants as v,expandDirections as ts}from"./search.types";const j=s.forwardRef((cs,J)=>{var x=cs,{button:e,customErrorMessages:a,clear:i,disabled:l,label:y,isLabelVisible:$=!0,name:q,onChangeFunc:A=()=>{},onClear:B=()=>{},onInputClick:L=()=>{},expandable:c,placeholder:S,required:W,inputSize:o=m.small,theme:d=h.inline,variant:r=v.default,value:F="",helpText:g,helpIcon:z}=x,G=P(x,["button","customErrorMessages","clear","disabled","label","isLabelVisible","name","onChangeFunc","onClear","onInputClick","expandable","placeholder","required","inputSize","theme","variant","value","helpText","helpIcon"]);const[K,Q,I]=ls(a),T=es(null),[w,C]=V(!1),U=as();rs(T,()=>C(!1));const[E,X]=V(F),M=u=>{A(u),X(u)},Y=u=>{M(u.target.value),K(u)},k=()=>{M(""),B()},Z=()=>{k(),C(!1)};return s.createElement("div",{className:t("search",{[`search--expand-direction-${c==null?void 0:c.direction}`]:c==null?void 0:c.direction})},U?s.createElement("div",{className:t("search__inner",{"search__inner--expandable":c,"search__inner--expand":w}),ref:T},d===h.inline&&$?s.createElement(_,{theme:_.themes.emphasis,size:o===m.large?_.sizes.large:_.sizes.small,className:t("search__header",{[`search__header--variant-${r}`]:r})},y):null,s.createElement("div",{className:t("search__input-wrapper",{[`search__input-wrapper--size-${o}`]:o,[`search__input-wrapper--theme-${d}`]:d,[`search__input-wrapper--variant-${r}`]:r})},s.createElement("label",{className:"search__label"},s.createElement("div",{className:t("search__icon",{[`search__icon--variant-${r}`]:r})},s.createElement(ns,null)),s.createElement("input",f(p({},G),{className:t("search__input",{[`search__input--variant-${r}`]:r,[`search__input--size-${o}`]:o}),disabled:l,name:q,onChange:Y,onClick:()=>{C(!0),L()},value:E,onInvalid:Q,placeholder:S,ref:J,required:W,type:"search","aria-label":d===h.floating||!$?y:void 0}))),s.createElement("div",{className:t("search__clear-button",{"search__clear-button--visible":E})},s.createElement(n,f(p({},i),{onClick:k,size:o===m.small?n.sizes.small:n.sizes.basic,type:"button",variant:r===v.fixed?n.variants.fixedTertiary:n.variants.tertiary}))),e?s.createElement(n,f(p({},e),{className:"search__search-button",variant:r===v.fixed?n.variants.secondaryWhite:n.variants.secondary,type:"submit",size:o===m.small?n.sizes.small:n.sizes.basic})):null,c&&w?s.createElement(n,f(p({},c.close),{className:"search__close-button",onClick:Z,leadingIcon:s.createElement(is,null),size:o===m.small?n.sizes.small:n.sizes.basic,type:"button",variant:r===v.fixed?n.variants.fixedTertiary:n.variants.tertiary})):null),I?s.createElement("div",{"aria-hidden":"true",className:"search__error"},s.createElement(_,null,I)):null,d===h.inline&&g?s.createElement(_,{size:_.sizes.interface,className:t("search__help-text",{[`search__help-text--variant-${r}`]:r})},z,g):null):s.createElement("div",{className:"search__loading-inner"},d===h.inline&&$?s.createElement("div",{className:t("search__loading-extra",{[`search__loading-extra--${r}`]:r})},y):null,s.createElement("div",{className:t("search__loading-input",{[`search__loading-input--${r}`]:r,[`search__loading-input--${o}`]:o})}),d===h.inline&&g?s.createElement("div",{className:t("search__loading-extra",{[`search__loading-extra--${r}`]:r})},z,g):null))});j.displayName="Search";const os=Object.assign(j,{themes:h,variants:v,inputSizes:m,expandDirections:ts});var Cs=os;export{Cs as default};
 //# sourceMappingURL=search.js.map

package/react/search/search.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/search/search.tsx"],
-  "sourcesContent": ["'use client';\n\nimport classNames from 'classnames';\nimport React, { useRef, useState } from 'react';\n\nimport Button from '../button';\nimport useClickOutside from '../hooks/use-click-outside';\nimport { useIsMounted } from '../hooks/use-is-mounted';\nimport CloseIcon from '../icons/18/close';\nimport SearchIcon from '../icons/24/search';\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport {\n  Search as Props,\n  themes,\n  inputSizes,\n  variants,\n  expandDirections,\n} from './search.types';\n\nconst RefSearch = React.forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      button,\n      customErrorMessages,\n      clear,\n      disabled,\n      label,\n      isLabelVisible = true,\n      name,\n      onChangeFunc = () => {},\n      onClear = () => {},\n      expandable,\n      placeholder,\n      required,\n      inputSize = inputSizes.small,\n      theme = themes.inline,\n      variant = variants.default,\n      value = '',\n      helpText,\n      helpIcon,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [validationOnChange, handleInvalid, error] =\n      useInputValidation(customErrorMessages);\n    const searchArea = useRef<HTMLDivElement>(null);\n    const [expand, setExpand] = useState(false);\n    const isMounted = useIsMounted();\n\n    useClickOutside(searchArea, () => setExpand(false));\n\n    const [inputValue, setInputValue] = useState(value);\n\n    const setValue = (value: string) => {\n      onChangeFunc(value);\n      setInputValue(value);\n    };\n\n    const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {\n      setValue(e.target.value);\n      validationOnChange(e);\n    };\n\n    const handleClear = () => {\n      setValue('');\n      onClear();\n    };\n\n    const handleClose = () => {\n      handleClear();\n      setExpand(false);\n    };\n\n    return (\n      <div\n        className={classNames('search', {\n          [`search--expand-direction-${expandable?.direction}`]:\n            expandable?.direction,\n        })}\n      >\n        {isMounted ? (\n          <div\n            className={classNames('search__inner', {\n              'search__inner--expandable': expandable,\n              'search__inner--expand': expand,\n            })}\n            ref={searchArea}\n          >\n            {theme === themes.inline && isLabelVisible ? (\n              <Text\n                theme={Text.themes.emphasis}\n                size={\n                  inputSize === inputSizes.large\n                    ? Text.sizes.large\n                    : Text.sizes.small\n                }\n                className={classNames('search__header', {\n                  [`search__header--variant-${variant}`]: variant,\n                })}\n              >\n                {label}\n              </Text>\n            ) : null}\n            <div\n              className={classNames('search__input-wrapper', {\n                [`search__input-wrapper--size-${inputSize}`]: inputSize,\n                [`search__input-wrapper--theme-${theme}`]: theme,\n                [`search__input-wrapper--variant-${variant}`]: variant,\n              })}\n            >\n              <label className=\"search__label\">\n                <div\n                  className={classNames('search__icon', {\n                    [`search__icon--variant-${variant}`]: variant,\n                  })}\n                >\n                  <SearchIcon />\n                </div>\n                <input\n                  {...restProps}\n                  className={classNames('search__input', {\n                    [`search__input--variant-${variant}`]: variant,\n                    [`search__input--size-${inputSize}`]: inputSize,\n                  })}\n                  disabled={disabled}\n                  name={name}\n                  onChange={handleChange}\n                  onClick={() => setExpand(true)}\n                  value={inputValue}\n                  onInvalid={handleInvalid}\n                  placeholder={placeholder}\n                  ref={ref}\n                  required={required}\n                  type=\"search\"\n                  aria-label={\n                    theme === themes.floating || !isLabelVisible\n                      ? label\n                      : undefined\n                  }\n                />\n              </label>\n              <div\n                className={classNames('search__clear-button', {\n                  'search__clear-button--visible': inputValue,\n                })}\n              >\n                <Button\n                  {...clear}\n                  onClick={handleClear}\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                  type=\"button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.fixedTertiary\n                      : Button.variants.tertiary\n                  }\n                />\n              </div>\n              {button ? (\n                <Button\n                  {...button}\n                  className=\"search__search-button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.secondaryWhite\n                      : Button.variants.secondary\n                  }\n                  type=\"submit\"\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                />\n              ) : null}\n              {expandable && expand ? (\n                <Button\n                  {...expandable.close}\n                  className=\"search__close-button\"\n                  onClick={handleClose}\n                  leadingIcon={<CloseIcon />}\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                  type=\"button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.fixedTertiary\n                      : Button.variants.tertiary\n                  }\n                />\n              ) : null}\n            </div>\n            {error ? (\n              <div aria-hidden=\"true\" className=\"search__error\">\n                <Text>{error}</Text>\n              </div>\n            ) : null}\n            {theme === themes.inline && helpText ? (\n              <Text\n                size={Text.sizes.interface}\n                className={classNames('search__help-text', {\n                  [`search__help-text--variant-${variant}`]: variant,\n                })}\n              >\n                {helpIcon}\n                {helpText}\n              </Text>\n            ) : null}\n          </div>\n        ) : (\n          <div className=\"search__loading-inner\">\n            {theme === themes.inline && isLabelVisible ? (\n              <div\n                className={classNames('search__loading-extra', {\n                  [`search__loading-extra--${variant}`]: variant,\n                })}\n              >\n                {label}\n              </div>\n            ) : null}\n            <div\n              className={classNames('search__loading-input', {\n                [`search__loading-input--${variant}`]: variant,\n                [`search__loading-input--${inputSize}`]: inputSize,\n              })}\n            ></div>\n            {theme === themes.inline && helpText ? (\n              <div\n                className={classNames('search__loading-extra', {\n                  [`search__loading-extra--${variant}`]: variant,\n                })}\n              >\n                {helpIcon}\n                {helpText}\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\n// NOTE: Stack traces will show \"forwardRef\" instead of \"Search\" if this is not set.\nRefSearch.displayName = 'Search';\n\nconst Search: typeof RefSearch & {\n  themes: typeof themes;\n  variants: typeof variants;\n  inputSizes: typeof inputSizes;\n  expandDirections: typeof expandDirections;\n} = Object.assign(RefSearch, {\n  themes,\n  variants,\n  inputSizes,\n  expandDirections,\n});\n\nexport default Search;\n"],
-  "mappings": "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",
-  "names": ["classNames", "React", "useRef", "useState", "Button", "useClickOutside", "useIsMounted", "CloseIcon", "SearchIcon", "Text", "useInputValidation", "themes", "inputSizes", "variants", "expandDirections", "RefSearch", "_a", "ref", "_b", "button", "customErrorMessages", "clear", "disabled", "label", "isLabelVisible", "name", "onChangeFunc", "onClear", "expandable", "placeholder", "required", "inputSize", "theme", "variant", "value", "helpText", "helpIcon", "restProps", "__objRest", "validationOnChange", "handleInvalid", "error", "searchArea", "expand", "setExpand", "isMounted", "inputValue", "setInputValue", "setValue", "handleChange", "e", "handleClear", "handleClose", "__spreadProps", "__spreadValues", "Search", "search_default"]
+  "sourcesContent": ["'use client';\n\nimport classNames from 'classnames';\nimport React, { useRef, useState } from 'react';\n\nimport Button from '../button';\nimport useClickOutside from '../hooks/use-click-outside';\nimport { useIsMounted } from '../hooks/use-is-mounted';\nimport CloseIcon from '../icons/18/close';\nimport SearchIcon from '../icons/24/search';\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport {\n  Search as Props,\n  themes,\n  inputSizes,\n  variants,\n  expandDirections,\n} from './search.types';\n\nconst RefSearch = React.forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      button,\n      customErrorMessages,\n      clear,\n      disabled,\n      label,\n      isLabelVisible = true,\n      name,\n      onChangeFunc = () => {},\n      onClear = () => {},\n      onInputClick = () => {},\n      expandable,\n      placeholder,\n      required,\n      inputSize = inputSizes.small,\n      theme = themes.inline,\n      variant = variants.default,\n      value = '',\n      helpText,\n      helpIcon,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [validationOnChange, handleInvalid, error] =\n      useInputValidation(customErrorMessages);\n    const searchArea = useRef<HTMLDivElement>(null);\n    const [expand, setExpand] = useState(false);\n    const isMounted = useIsMounted();\n\n    useClickOutside(searchArea, () => setExpand(false));\n\n    const [inputValue, setInputValue] = useState(value);\n\n    const setValue = (value: string) => {\n      onChangeFunc(value);\n      setInputValue(value);\n    };\n\n    const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {\n      setValue(e.target.value);\n      validationOnChange(e);\n    };\n\n    const handleClear = () => {\n      setValue('');\n      onClear();\n    };\n\n    const handleClose = () => {\n      handleClear();\n      setExpand(false);\n    };\n\n    return (\n      <div\n        className={classNames('search', {\n          [`search--expand-direction-${expandable?.direction}`]:\n            expandable?.direction,\n        })}\n      >\n        {isMounted ? (\n          <div\n            className={classNames('search__inner', {\n              'search__inner--expandable': expandable,\n              'search__inner--expand': expand,\n            })}\n            ref={searchArea}\n          >\n            {theme === themes.inline && isLabelVisible ? (\n              <Text\n                theme={Text.themes.emphasis}\n                size={\n                  inputSize === inputSizes.large\n                    ? Text.sizes.large\n                    : Text.sizes.small\n                }\n                className={classNames('search__header', {\n                  [`search__header--variant-${variant}`]: variant,\n                })}\n              >\n                {label}\n              </Text>\n            ) : null}\n            <div\n              className={classNames('search__input-wrapper', {\n                [`search__input-wrapper--size-${inputSize}`]: inputSize,\n                [`search__input-wrapper--theme-${theme}`]: theme,\n                [`search__input-wrapper--variant-${variant}`]: variant,\n              })}\n            >\n              <label className=\"search__label\">\n                <div\n                  className={classNames('search__icon', {\n                    [`search__icon--variant-${variant}`]: variant,\n                  })}\n                >\n                  <SearchIcon />\n                </div>\n                <input\n                  {...restProps}\n                  className={classNames('search__input', {\n                    [`search__input--variant-${variant}`]: variant,\n                    [`search__input--size-${inputSize}`]: inputSize,\n                  })}\n                  disabled={disabled}\n                  name={name}\n                  onChange={handleChange}\n                  onClick={() => {\n                    setExpand(true);\n                    onInputClick();\n                  }}\n                  value={inputValue}\n                  onInvalid={handleInvalid}\n                  placeholder={placeholder}\n                  ref={ref}\n                  required={required}\n                  type=\"search\"\n                  aria-label={\n                    theme === themes.floating || !isLabelVisible\n                      ? label\n                      : undefined\n                  }\n                />\n              </label>\n              <div\n                className={classNames('search__clear-button', {\n                  'search__clear-button--visible': inputValue,\n                })}\n              >\n                <Button\n                  {...clear}\n                  onClick={handleClear}\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                  type=\"button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.fixedTertiary\n                      : Button.variants.tertiary\n                  }\n                />\n              </div>\n              {button ? (\n                <Button\n                  {...button}\n                  className=\"search__search-button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.secondaryWhite\n                      : Button.variants.secondary\n                  }\n                  type=\"submit\"\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                />\n              ) : null}\n              {expandable && expand ? (\n                <Button\n                  {...expandable.close}\n                  className=\"search__close-button\"\n                  onClick={handleClose}\n                  leadingIcon={<CloseIcon />}\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                  type=\"button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.fixedTertiary\n                      : Button.variants.tertiary\n                  }\n                />\n              ) : null}\n            </div>\n            {error ? (\n              <div aria-hidden=\"true\" className=\"search__error\">\n                <Text>{error}</Text>\n              </div>\n            ) : null}\n            {theme === themes.inline && helpText ? (\n              <Text\n                size={Text.sizes.interface}\n                className={classNames('search__help-text', {\n                  [`search__help-text--variant-${variant}`]: variant,\n                })}\n              >\n                {helpIcon}\n                {helpText}\n              </Text>\n            ) : null}\n          </div>\n        ) : (\n          <div className=\"search__loading-inner\">\n            {theme === themes.inline && isLabelVisible ? (\n              <div\n                className={classNames('search__loading-extra', {\n                  [`search__loading-extra--${variant}`]: variant,\n                })}\n              >\n                {label}\n              </div>\n            ) : null}\n            <div\n              className={classNames('search__loading-input', {\n                [`search__loading-input--${variant}`]: variant,\n                [`search__loading-input--${inputSize}`]: inputSize,\n              })}\n            ></div>\n            {theme === themes.inline && helpText ? (\n              <div\n                className={classNames('search__loading-extra', {\n                  [`search__loading-extra--${variant}`]: variant,\n                })}\n              >\n                {helpIcon}\n                {helpText}\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\n// NOTE: Stack traces will show \"forwardRef\" instead of \"Search\" if this is not set.\nRefSearch.displayName = 'Search';\n\nconst Search: typeof RefSearch & {\n  themes: typeof themes;\n  variants: typeof variants;\n  inputSizes: typeof inputSizes;\n  expandDirections: typeof expandDirections;\n} = Object.assign(RefSearch, {\n  themes,\n  variants,\n  inputSizes,\n  expandDirections,\n});\n\nexport default Search;\n"],
+  "mappings": "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",
+  "names": ["classNames", "React", "useRef", "useState", "Button", "useClickOutside", "useIsMounted", "CloseIcon", "SearchIcon", "Text", "useInputValidation", "themes", "inputSizes", "variants", "expandDirections", "RefSearch", "_a", "ref", "_b", "button", "customErrorMessages", "clear", "disabled", "label", "isLabelVisible", "name", "onChangeFunc", "onClear", "onInputClick", "expandable", "placeholder", "required", "inputSize", "theme", "variant", "value", "helpText", "helpIcon", "restProps", "__objRest", "validationOnChange", "handleInvalid", "error", "searchArea", "expand", "setExpand", "isMounted", "inputValue", "setInputValue", "setValue", "handleChange", "e", "handleClear", "handleClose", "__spreadProps", "__spreadValues", "Search", "search_default"]
 }

package/react/search/search.types.d.ts

@@ -34,6 +34,7 @@ export type Search = {
     name: string;
     onChangeFunc?: (arg: string) => void;
     onClear?: () => void;
+    onInputClick?: () => void;
     theme?: ObjectValues<typeof themes>;
     variant?: ObjectValues<typeof variants>;
 } & InputHtmlProps;

package/react/search/search.types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/search/search.types.ts"],
-  "sourcesContent": ["import type { ReactElement } from 'react';\nimport type { Button } from '../button/button.types';\nimport type { InputHtmlProps, ObjectValues } from '../types';\nimport type { Messages } from '../use-input-validation.types';\n\nexport const themes = {\n  floating: 'floating',\n  inline: 'inline',\n} as const;\n\nexport const inputSizes = {\n  small: 'small',\n  large: 'large',\n} as const;\n\nexport const variants = {\n  default: 'default',\n  fixed: 'fixed',\n} as const;\n\nexport const expandDirections = {\n  left: 'left',\n  right: 'right',\n} as const;\n\nexport type Search = {\n  button?: Button;\n  clear: Button;\n  customErrorMessages?: Messages;\n  expandable?: {\n    close: Button;\n    direction?: ObjectValues<typeof expandDirections>;\n  };\n  helpIcon?: ReactElement;\n  helpText?: string;\n  inputSize?: ObjectValues<typeof inputSizes>; //NOTE: This is not named `size` due to InputHTMLProps having a `size` attribute that will clash\n  isLabelVisible?: boolean;\n  label: string;\n  name: string;\n  onChangeFunc?: (arg: string) => void;\n  onClear?: () => void;\n  theme?: ObjectValues<typeof themes>;\n  variant?: ObjectValues<typeof variants>;\n} & InputHtmlProps;\n"],
+  "sourcesContent": ["import type { ReactElement } from 'react';\nimport type { Button } from '../button/button.types';\nimport type { InputHtmlProps, ObjectValues } from '../types';\nimport type { Messages } from '../use-input-validation.types';\n\nexport const themes = {\n  floating: 'floating',\n  inline: 'inline',\n} as const;\n\nexport const inputSizes = {\n  small: 'small',\n  large: 'large',\n} as const;\n\nexport const variants = {\n  default: 'default',\n  fixed: 'fixed',\n} as const;\n\nexport const expandDirections = {\n  left: 'left',\n  right: 'right',\n} as const;\n\nexport type Search = {\n  button?: Button;\n  clear: Button;\n  customErrorMessages?: Messages;\n  expandable?: {\n    close: Button;\n    direction?: ObjectValues<typeof expandDirections>;\n  };\n  helpIcon?: ReactElement;\n  helpText?: string;\n  inputSize?: ObjectValues<typeof inputSizes>; //NOTE: This is not named `size` due to InputHTMLProps having a `size` attribute that will clash\n  isLabelVisible?: boolean;\n  label: string;\n  name: string;\n  onChangeFunc?: (arg: string) => void;\n  onClear?: () => void;\n  onInputClick?: () => void;\n  theme?: ObjectValues<typeof themes>;\n  variant?: ObjectValues<typeof variants>;\n} & InputHtmlProps;\n"],
   "mappings": "AAKO,MAAMA,EAAS,CACpB,SAAU,WACV,OAAQ,QACV,EAEaC,EAAa,CACxB,MAAO,QACP,MAAO,OACT,EAEaC,EAAW,CACtB,QAAS,UACT,MAAO,OACT,EAEaC,EAAmB,CAC9B,KAAM,OACN,MAAO,OACT",
   "names": ["themes", "inputSizes", "variants", "expandDirections"]
 }

package/react/style.scss

@@ -18,6 +18,7 @@
 @use "./message/message.scss";
 @use "./message-field/message-field.scss";
 @use "./modal/modal.scss";
+@use "./pagination/pagination.scss";
 @use "./progress-bar/progress-bar.scss";
 @use "./radio/radio.scss";
 @use "./scale-bar/scale-bar.scss";