@equinor/amplify-component-lib 9.15.2 → 9.15.3

package/dist/molecules/Select/Select.styles.js

@@ -0,0 +1,213 @@
+import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS as t,VARIANT_HELPER_TEXT_COLORS as n,colors as r}from"../../atoms/style/colors.js";import{spacings as i}from"../../atoms/style/spacings.js";import{Chip as a}from"../Chip/Chip.js";import{Button as o,Menu as s,Typography as c}from"@equinor/eds-core-react";import l,{css as u}from"styled-components";const d=l.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${i.small};
+`,f=l.span`
+  display: flex;
+  gap: ${i.small};
+  align-items: center;
+  margin-left: ${i.small};
+  width: calc(100% - ${i.small});
+  > label {
+    margin: 0;
+  }
+  ${({$variant:e})=>e?u`
+      > label {
+        color: ${e===`disabled`?r.interactive.disabled__text.rgba:n[e]};
+      }
+      > svg {
+        flex-shrink: 0;
+        fill: ${e===`disabled`?r.interactive.disabled__text.rgba:n[e]};
+      }
+    `:``}
+`,p=l.div`
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  padding: 6px 8px;
+  transition:
+    background ${e.transitionMS},
+    box-shadow ${e.transitionMS};
+  &:hover:not(:has(input:disabled)) {
+    cursor: pointer;
+    background: ${r.ui.background__light_medium.rgba};
+  }
+
+  ${({$variant:e})=>e?e===`dirty`?u`
+        box-shadow: inset 0 -2px 0 0 ${t[e]};
+        &:hover {
+          box-shadow: inset 0 -2px 0 0 ${t[e]};
+        }
+      `:u`
+      outline: 1px solid ${t[e]};
+      &:hover {
+        box-shadow: inset 0 -1px 0 0 ${t[e]};
+      }
+    `:u`
+        box-shadow: inset 0 -1px 0 0 ${r.text.static_icons__tertiary.rgba};
+        &:hover {
+          box-shadow: inset 0 -2px 0 0
+            ${r.text.static_icons__tertiary.rgba};
+        }
+      `}
+
+  ${({$lightBackground:e})=>e?`background-color: ${r.ui.background__default.rgba}`:`background-color: ${r.ui.background__light.rgba}`};
+
+  &[aria-expanded='true'] {
+    box-shadow: inset 0 -2px 0 0 ${r.interactive.primary__resting.rgba};
+  }
+
+  > svg[role='progressbar'] {
+    overflow: unset;
+  }
+  > svg:not([role='progressbar']) {
+    cursor: pointer;
+    &:hover {
+      background: ${r.interactive.primary__hover_alt.rgba};
+      border-radius: 50%;
+    }
+  }
+
+  &:has(input:disabled) {
+    outline: none;
+    cursor: not-allowed;
+    box-shadow: inset 0 -1px 0 0 ${r.interactive.disabled__text.rgba} !important;
+    > svg:not([role='progressbar']) {
+      cursor: not-allowed;
+      fill: ${r.interactive.disabled__text.rgba};
+      &:hover {
+        background: transparent;
+      }
+    }
+    > label {
+      color: ${r.interactive.disabled__text.rgba};
+    }
+  }
+
+  &:has(button#clear) {
+    > section {
+      width: calc(100% - 24px);
+    }
+  }
+`,m=l.section`
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${i.x_small};
+  min-height: 24px;
+  input[type='search'] {
+    background: transparent;
+    width: 0;
+    flex-grow: 1;
+    padding: 0;
+    font-family: 'Equinor', sans-serif;
+    color: ${r.text.static_icons__default.rgba};
+    outline: none;
+    border: none;
+  }
+  input[type='search']:disabled {
+    cursor: not-allowed;
+  }
+  input[type='search']::-webkit-search-decoration,
+  input[type='search']::-webkit-search-cancel-button,
+  input[type='search']::-webkit-search-results-button,
+  input[type='search']::-webkit-search-results-decoration {
+    appearance: none;
+  }
+  &:has(input:disabled) {
+    > p {
+      color: ${r.interactive.disabled__text.rgba};
+    }
+    > .amplify-combo-box-chip {
+      cursor: not-allowed;
+      background: ${r.interactive.disabled__fill.rgba};
+      color: ${r.interactive.disabled__text.rgba};
+      > svg {
+        fill: ${r.interactive.disabled__text.rgba};
+        &:hover {
+          cursor: not-allowed;
+          background: none;
+        }
+      }
+    }
+  }
+`,h=l(o)`
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
+  right: 32px;
+  width: 24px;
+  height: 24px;
+  svg {
+    fill: ${r.text.static_icons__secondary.rgba};
+  }
+  &:after {
+    width: 24px;
+    height: 24px;
+    left: 0;
+  }
+`,g=l(a)`
+  background: ${({$tryingToRemove:e,$lightBackground:t})=>e?r.interactive.primary__hover_alt.rgba:t?r.ui.background__light.rgba:r.ui.background__default.rgba} !important;
+`,_=l(s.Item)`
+  flex-grow: 1;
+  ${({$paddedLeft:e})=>e&&`margin-left: 36px`};
+  padding-left: 10px;
+  
+  > div {
+    grid-auto-columns: auto;
+    justify-content: flex-start;
+  }
+
+  &:hover {
+    background: ${r.interactive.primary__hover_alt.rgba};
+  }
+
+  &:focus-visible {
+    outline: 2px dashed ${r.interactive.primary__resting.rgba};
+  }
+
+    ${({$selected:e})=>e?u`
+            background: ${r.interactive.primary__selected_highlight.rgba};
+
+            &:hover {
+              background: ${r.interactive.primary__selected_hover.rgba};
+            }
+          `:``}}
+`,v=l.hr`
+  height: calc(100% + ${i.medium} * 2);
+  justify-self: center;
+  width: ${i.x_large};
+  min-width: ${i.x_large};
+`,y=l(c)`
+  user-select: none;
+  pointer-events: none;
+  position: absolute;
+  color: ${r.text.static_icons__tertiary.rgba};
+  top: calc(50%);
+  transform: translate(0, -50%);
+`,b=l(y)`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${r.text.static_icons__default.rgba};
+  max-width: 100%;
+`,x=l(c)`
+  margin: ${i.medium};
+`,S=l(c)`
+  margin-left: ${i.medium};
+`,C=l(s)`
+  max-height: 20rem;
+  max-width: inherit;
+  overflow-y: auto;
+  > div {
+    width: inherit;
+    max-width: inherit;
+  }
+`,w=l.div`
+  display: flex;
+  align-items: center;
+`,T=l(o)`
+  width: 36px;
+  height: 36px;
+`;export{h as ClearButton,g as ComboBoxChip,p as Container,f as HelperWrapper,v as MenuItemSpacer,w as MenuItemWrapper,S as NoItemsFoundText,x as NoTagFoundText,y as PlaceholderText,m as Section,T as SmallButton,C as StyledMenu,_ as StyledMenuItem,b as ValueText,d as Wrapper};

package/dist/molecules/Select/Select.types.d.ts

@@ -0,0 +1,91 @@
+import { Variants } from "../../atoms/types/variants.js";
+import { FC, KeyboardEvent, ReactNode, RefObject } from "react";
+
+//#region src/molecules/Select/Select.types.d.ts
+interface SelectOptionRequired {
+  value: string;
+  label: string;
+}
+type SelectOption<T extends SelectOptionRequired> = T & {
+  children?: T[];
+};
+interface SingleSelectCommon<T extends SelectOptionRequired> {
+  value: SelectOption<T> | undefined;
+  onSelect: (value: SelectOption<T> | undefined) => void;
+  customValueComponent?: FC<{
+    item: SelectOption<T>;
+  }>;
+}
+interface MultiSelectBase<T extends SelectOptionRequired> {
+  values: SelectOption<T>[];
+  onSelect: (values: SelectOption<T>[], selectedValue?: SelectOption<T>) => void;
+  syncParentChildSelection?: boolean;
+}
+type MultiSelectWithSelectedAsText<T extends SelectOptionRequired> = {
+  showSelectedAsText: boolean | (({
+    selectedAmount,
+    totalAmount
+  }: {
+    selectedAmount: number;
+    totalAmount: number;
+  }) => string);
+} & MultiSelectBase<T>;
+type MultiSelectWithCustomValueComponent<T extends SelectOptionRequired> = {
+  showSelectedAsText?: undefined;
+  customValueComponent?: FC<{
+    item: SelectOption<T>;
+    onDelete: () => void;
+    tryingToRemove: boolean;
+  }>;
+} & MultiSelectBase<T>;
+type MultiSelectCommon<T extends SelectOptionRequired> = MultiSelectWithSelectedAsText<T> | MultiSelectWithCustomValueComponent<T>;
+interface SelectGroup<T extends SelectOptionRequired> {
+  title?: string;
+  items: SelectOption<T>[];
+}
+interface GroupedSelectProps<T extends SelectOptionRequired> {
+  groups: SelectGroup<T>[];
+  items?: undefined;
+}
+type CommonListSelectProps<T extends SelectOptionRequired> = {
+  items: SelectOption<T>[];
+  groups?: undefined;
+};
+interface ListSelectWithAddItemProps<T extends SelectOptionRequired> extends CommonListSelectProps<T> {
+  onAddItem: (item: string) => void;
+  itemSingularWord?: string;
+}
+interface ListSelectWithoutAddItemProps<T extends SelectOptionRequired> extends CommonListSelectProps<T> {
+  onAddItem?: undefined;
+  itemSingularWord?: undefined;
+}
+type ListSelectProps<T extends SelectOptionRequired> = ListSelectWithAddItemProps<T> | ListSelectWithoutAddItemProps<T>;
+type SelectedState = 'selected' | 'indeterminate' | 'none';
+interface CustomMenuItemComponentProps<T extends SelectOptionRequired> {
+  CustomMenuItemComponent?: FC<{
+    item: SelectOption<T>;
+    selectedState: SelectedState;
+  }>;
+}
+type CommonSelectProps<T extends SelectOptionRequired> = {
+  id?: string;
+  variant?: Variants;
+  label?: string;
+  helperText?: string;
+  showHelperIcon?: boolean;
+  placeholder?: string;
+  sortValues?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  lightBackground?: boolean;
+  underlineHighlight?: boolean;
+  clearable?: boolean;
+  meta?: ReactNode;
+  onSearchChange?: (inputValue: string) => void;
+  inDialog?: boolean;
+  onOpenCallback?: (value: boolean) => void;
+  onSearchFilter?: (searchValue: string, item: T) => void;
+  'data-testid'?: string;
+} & CustomMenuItemComponentProps<T>;
+//#endregion
+export { CommonSelectProps, GroupedSelectProps, ListSelectProps, MultiSelectCommon, SelectOption, SelectOptionRequired, SingleSelectCommon };

package/dist/molecules/Select/Select.utils.js

@@ -0,0 +1 @@
+function e(t,n){let r=t.length,i=t.slice(0,n).map(t=>e(t.children??[],0)).reduce((e,t)=>e+t,0);return r+i}const t=e=>{let t=e=>{if(!e?.length)return[];let n=e.flatMap(({children:e,value:t})=>e?.map(e=>({...e,parent:t}))??[]);return[...n,...t(n)]};return[...e,...t(e)]},n=e=>{let t=Array(e.length).fill(0);for(let n=1;n<e.length;n++)t[n]=t[n-1]+e[n-1];return t};export{t as flattenOptions,e as getChildOffset,n as getCumulativeArrayFromNumberedArray};

package/dist/molecules/Select/SelectMenuItem.js

@@ -0,0 +1 @@
+import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{spacings as t}from"../../atoms/style/spacings.js";import{getChildOffset as n}from"./Select.utils.js";import{MenuItemSpacer as r,MenuItemWrapper as i,SmallButton as a,StyledMenuItem as o}from"./Select.styles.js";import{getParentIcon as s,getParentState as c}from"./SelectMenuItem.utils.js";import{useMemo as l,useRef as u,useState as d}from"react";import{Icon as f}from"@equinor/eds-core-react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";import{checkbox as g,checkbox_outline as _,chevron_down as v,chevron_right as y}from"@equinor/eds-icons";const{colors:b}=e,x=e=>{let{index:S,childOffset:C,depth:w=0,item:T,itemRefs:E,onItemKeyDown:D,onItemSelect:O,parentHasNestedItems:k=!1,CustomMenuItemComponent:A}=e,[j,M]=d(!1),N=u(-1),P=u([]),F=`values`in e?e.values.map(({value:e})=>e):[],I=F.includes(T.value),L=l(()=>`value`in e?_:s(T,e.values),[T,e]),R=l(()=>`value`in e?`none`:c(T,e.values),[T,e]),z=l(()=>Array(w).fill(0).map((e,t)=>m(r,{},`spacer-${e+t}`)),[w]),B=e=>{e.preventDefault(),O(T)},V=e=>{e.stopPropagation(),M(e=>!e)},H=e=>{e.key===`ArrowDown`?N.current+=1:e.key===`ArrowUp`&&--N.current,N.current<=-1?(E.current[S]?.focus(),N.current=-1):N.current+C===P.current.length?(N.current=-1,D(e),M(!1)):N.current>=0&&N.current<P.current.length-C&&P.current[N.current+C]?.focus()},U=e=>{!j&&e.key===`ArrowDown`||e.key===`ArrowUp`?D(e):e.key===`ArrowRight`||e.key===`ArrowLeft`?M(e=>!e):j&&e.key===`ArrowDown`&&N.current===-1&&(N.current=0,P.current[N.current+C]?.focus())};return T.children&&T.children.length>0&&`values`in e?h(p,{children:[h(i,{style:{paddingLeft:w===0?t.small:0},children:[z,m(a,{variant:`ghost_icon`,onClick:V,"data-testid":`toggle-button`,children:m(f,{color:b.interactive.primary__resting.rgba,data:j?v:y})}),m(o,{$depth:w,ref:e=>{E.current[S]=e},index:S,closeMenuOnClick:!1,onKeyDownCapture:U,onClick:B,children:A?m(A,{item:T,selectedState:R}):h(p,{children:[m(f,{color:b.interactive.primary__resting.rgba,data:L}),m(`span`,{children:T.label})]})})]}),j&&T.children.map((t,r)=>m(x,{index:C+r,childOffset:C+n(T.children,r),depth:w+1,item:t,itemRefs:P,values:e.values,onItemKeyDown:H,onItemSelect:O,parentHasNestedItems:!0,CustomMenuItemComponent:A},`child-${r}-${t.value}-${T.value}`))]}):`values`in e?h(i,{children:[z,m(o,{$depth:w,$paddedLeft:k,ref:e=>{E.current[S]=e},index:S,tabIndex:w,closeMenuOnClick:!1,onKeyDownCapture:D,onClick:B,children:A?m(A,{item:T,selectedState:I?`selected`:`none`}):h(p,{children:[m(f,{color:b.interactive.primary__resting.rgba,data:I?g:_}),m(`span`,{children:T.label})]})})]}):m(i,{children:m(o,{$depth:w,$selected:e.value&&T.value===e.value.value,ref:e=>{E.current[S]=e},index:S,onKeyDownCapture:D,onClick:B,children:A?m(A,{item:T,selectedState:e.value&&T.value===e.value.value?`selected`:`none`}):m(`span`,{children:T.label})})})};export{x as SelectMenuItem};

package/dist/molecules/Select/SelectMenuItem.utils.js

@@ -0,0 +1 @@
+import{flattenOptions as e}from"./Select.utils.js";import{checkbox as t,checkbox_indeterminate as n,checkbox_outline as r}from"@equinor/eds-icons";const i={selected:t,indeterminate:n,none:r};function a(e,t){let n=o(e,t);return i[n]}function o(t,n){if(!t.children||t.children.length===0)return`none`;let r=n.some(e=>e.value===t.value),i=n.map(({value:e})=>e),a=e([t])?.map(({value:e})=>e);return r?`selected`:a.some(e=>i.includes(e))?`indeterminate`:`none`}export{a as getParentIcon,o as getParentState};

package/dist/molecules/Select/SingleSelect/SingleSelect.d.ts

@@ -0,0 +1,21 @@
+import { CommonSelectProps, GroupedSelectProps, ListSelectProps, SelectOptionRequired, SingleSelectCommon } from "../Select.types.js";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/molecules/Select/SingleSelect/SingleSelect.d.ts
+type ListSingleSelectProps<T extends SelectOptionRequired> = CommonSelectProps<T> & SingleSelectCommon<T> & ListSelectProps<T>;
+type GroupedSingleSelectProps<T extends SelectOptionRequired> = CommonSelectProps<T> & SingleSelectCommon<T> & GroupedSelectProps<T>;
+/**
+ * @param clearable - If users should be able to clear the input, defaults to true
+ * @param loading - Show loader, defaults to false
+ * @param lightBackground - If the input should have white background, defaults to false
+ * @param sortValues - Sort the provided values, defaults to true
+ * @param inDialog - Fixes weird issue that EDS menus has when it's used in dialogs, defaults to false
+ * @param showHelperIcon - Show helper variant icon, defaults to true
+ * @param onAddItem - Enables the possibility to add extra tags and is called when submitting a new item, either via menu click 'add' or {Enter}. Not supported with groups prop.
+ * @param addItemSingularWord - Word to use when adding a new item, default is "tag"
+ * @param onSearchFilter - Custom filter function for search, default is "item.label.match(new RegExp(searchValue, 'i'))"
+ * @param customMenuItemComponent - Custom component to use for rendering menu item, defaults to a checkbox with label
+ */
+declare function SingleSelect<T extends SelectOptionRequired>(props: ListSingleSelectProps<T> | GroupedSingleSelectProps<T>): react_jsx_runtime2.JSX.Element;
+//#endregion
+export { GroupedSingleSelectProps, ListSingleSelectProps, SingleSelect };

package/dist/molecules/Select/SingleSelect/SingleSelect.js

@@ -0,0 +1 @@
+import{Select as e}from"../Select.js";import{jsx as t}from"react/jsx-runtime";function n(n){return t(e,{...n})}export{n as SingleSelect};

package/dist/molecules/SelectionControls/Checkbox/Checkbox.d.ts

@@ -0,0 +1,12 @@
+import * as react91 from "react";
+import { CheckboxProps } from "@equinor/eds-core-react";
+
+//#region src/molecules/SelectionControls/Checkbox/Checkbox.d.ts
+interface CheckboxProps$1 extends CheckboxProps {
+  label?: string;
+  outlined?: boolean;
+  error?: boolean;
+}
+declare const Checkbox$1: react91.ForwardRefExoticComponent<CheckboxProps$1 & react91.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxProps$1 as CheckboxProps };

package/dist/molecules/SelectionControls/Checkbox/Checkbox.js

@@ -0,0 +1 @@
+import{Wrapper as e}from"../SelectionControls.styles.js";import{forwardRef as t}from"react";import{Checkbox as n}from"@equinor/eds-core-react";import{jsx as r}from"react/jsx-runtime";const i=t((t,i)=>{let{outlined:a,error:o,...s}=t;return r(e,{$outlined:a||!1,$error:o,children:r(n,{ref:i,...s})})});i.displayName=`Checkbox`;export{i as Checkbox};

package/dist/molecules/SelectionControls/Radio/Radio.d.ts

@@ -0,0 +1,12 @@
+import * as react95 from "react";
+import { RadioProps } from "@equinor/eds-core-react";
+
+//#region src/molecules/SelectionControls/Radio/Radio.d.ts
+interface RadioProps$1 extends RadioProps {
+  label: string;
+  outlined?: boolean;
+  error?: boolean;
+}
+declare const Radio$1: react95.ForwardRefExoticComponent<RadioProps$1 & react95.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Radio$1 as Radio, RadioProps$1 as RadioProps };

package/dist/molecules/SelectionControls/Radio/Radio.js

@@ -0,0 +1 @@
+import{Wrapper as e}from"../SelectionControls.styles.js";import{forwardRef as t}from"react";import{Radio as n}from"@equinor/eds-core-react";import{jsx as r}from"react/jsx-runtime";const i=t((t,i)=>{let{outlined:a,error:o,...s}=t;return r(e,{$outlined:a||!1,$error:o,children:r(n,{ref:i,...s,checked:s.checked?!0:void 0})})});i.displayName=`Radio`;export{i as Radio};

package/dist/molecules/SelectionControls/SelectionControls.styles.js

@@ -0,0 +1,108 @@
+import{animation as e}from"../../atoms/style/animation.js";import{colors as t}from"../../atoms/style/colors.js";import{spacings as n}from"../../atoms/style/spacings.js";import{shape as r}from"../../atoms/style/index.js";import i,{css as a}from"styled-components";const o=i.span`
+  > label {
+    padding: ${n.x_small} ${n.medium_small};
+    border-radius: ${r.button.borderRadius};
+    transition: background ${e.transitionMS};
+    gap: ${n.small};
+    min-height: 36px;
+    > span:first-child {
+      padding: 0;
+      height: 24px;
+      aspect-ratio: 1;
+    }
+    > span[class*='Switch']:last-child {
+      padding: 0 ${n.medium_small} 0 0;
+    }
+  }
+
+  &.switch > label {
+    padding: 0 ${n.x_small} 0 ${n.medium_small};
+    gap: ${n.small};
+
+    > span:first-child {
+      height: 36px;
+    }
+
+    input {
+      width: 0;
+      ~ span {
+        height: 36px;
+      }
+    }
+  }
+
+  /* Radio / Checkbox hover state override */
+  > label > span:before {
+    background-color: transparent !important;
+    height: 36px;
+  }
+  /* Switch hover state override */
+  > label > span > input[type='checkbox'] + span {
+    background: transparent !important;
+  }
+  svg {
+    transition: fill ${e.transitionMS};
+  }
+  input:not(:checked) {
+    ~ svg {
+      fill: ${({$error:e})=>e?t.interactive.danger__resting.rgba:t.text.static_icons__tertiary.rgba};
+      &:hover {
+        fill: ${({$error:e})=>e?t.interactive.danger__hover.rgba:t.text.static_icons__default.rgba};
+      }
+    }
+  }
+  ${({$error:e})=>e?a`
+        input ~ svg {
+          fill: ${t.interactive.danger__resting.rgba};
+          &:hover {
+            fill: ${t.interactive.danger__hover.rgba};
+          }
+        }
+      `:``}
+
+  /* Switch dot override */
+  > label:has(input:checked)
+    > span
+    > span
+    > span:last-child:not([class*='SwitchSmall']) {
+    background: ${t.interactive.primary__resting.rgba};
+  }
+  > label:has(input)
+    > span
+    > span
+    > span:last-child:not([class*='SwitchSmall']) {
+    background: ${t.text.static_icons__tertiary.rgba};
+  }
+
+  > label:hover:not(:has(input:disabled)) {
+    background: ${({$error:e})=>e?t.interactive.danger__highlight.rgba:t.interactive.primary__hover_alt.rgba};
+    svg {
+      fill: ${({$error:e})=>e?t.interactive.danger__hover.rgba:t.text.static_icons__default.rgba};
+    }
+  }
+
+  > label:focus:not(:hover):not(:has(input:disabled)) {
+    outline: 1px dashed ${t.interactive.primary__resting.rgba};
+    outline-offset: -1px;
+  }
+
+  &:has(input:disabled) {
+    span:last-child {
+      color: ${t.interactive.disabled__text.rgba};
+    }
+    svg {
+      fill: ${t.interactive.disabled__text.rgba};
+    }
+  }
+
+  ${({$outlined:e})=>{if(e)return a`
+        > label {
+          outline: 1px solid ${t.ui.background__medium.rgba};
+        }
+        &:has(input:disabled) {
+          svg {
+            fill: ${t.interactive.disabled__border.rgba};
+          }
+        }
+      `}}
+`;export{o as Wrapper};

package/dist/molecules/SelectionControls/Switch/Switch.d.ts

@@ -0,0 +1,10 @@
+import * as react93 from "react";
+import { SwitchProps } from "@equinor/eds-core-react";
+
+//#region src/molecules/SelectionControls/Switch/Switch.d.ts
+interface SwitchProps$1 extends SwitchProps {
+  outlined?: boolean;
+}
+declare const Switch$1: react93.ForwardRefExoticComponent<SwitchProps$1 & react93.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Switch$1 as Switch, SwitchProps$1 as SwitchProps };

package/dist/molecules/SelectionControls/Switch/Switch.js

@@ -0,0 +1 @@
+import{Wrapper as e}from"../SelectionControls.styles.js";import{forwardRef as t}from"react";import{Switch as n}from"@equinor/eds-core-react";import{jsx as r}from"react/jsx-runtime";const i=t((t,i)=>{let{outlined:a,...o}=t;return r(e,{$outlined:a||!1,className:`switch`,children:r(n,{ref:i,...o})})});i.displayName=`Switch`;export{i as Switch};

package/dist/molecules/Sieve/Filter.d.ts

@@ -0,0 +1,10 @@
+import { SieveOption } from "./Sieve.types.js";
+import { FC } from "react";
+
+//#region src/molecules/Sieve/Filter.d.ts
+interface SieveFilterGroup {
+  label: string;
+  options: SieveOption[];
+}
+//#endregion
+export { SieveFilterGroup };

package/dist/molecules/Sieve/Filter.js

@@ -0,0 +1 @@
+import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{useOutsideClick as t}from"../../node_modules/@equinor/eds-utils/dist/esm/hooks/useOutsideClick.js";import{Chip as n,MenuItem as r}from"./Sieve.styles.js";import{useRef as i,useState as a}from"react";import{Icon as o,Menu as s}from"@equinor/eds-core-react";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import{arrow_drop_right as d,checkbox as f,checkbox_outline as p,filter_list as m}from"@equinor/eds-icons";const{colors:h}=e,g=({options:e,filterValues:g,setFilterValues:_})=>{let v=i(null),[y,b]=a(null),x=i(null),S=i(null),[C,w]=a(-1),[T,E]=a(!1);t(v.current,e=>{y===null&&T&&x.current&&!x.current.contains(e.target)?E(!1):T&&y!==null&&x.current&&!x.current.contains(e.target)&&S.current&&!S.current.contains(e.target)&&(E(!1),w(-1),b(null))});let D=()=>{E(!T),w(-1),b(null)},O=(e,t)=>{C===t?(w(-1),b(null)):(w(t),b(e.currentTarget))},k=(e,t)=>{let n={...g};if(e in n&&n[e].some(e=>e.value===t.value)){let r=n[e].findIndex(e=>e.value===t.value);n[e].splice(r,1),n[e].length===0&&delete n[e]}else n[e]?n[e].push(t):n[e]=[t];Object.keys(n).flatMap(e=>n?.[e]).length===0&&(n=void 0),_(n)};return e.length===0?null:u(c,{children:[u(n,{ref:v,onClick:D,children:[`Filter by `,l(o,{data:m})]}),T&&l(s,{open:!0,ref:x,anchorEl:v.current,placement:`bottom-start`,children:l(s.Section,{title:`Filter by`,children:e.map((e,t)=>u(r,{active:C===t,onClick:e=>O(e,t),children:[e.label,l(o,{data:d,color:h.text.static_icons__tertiary.rgba})]},`filter-menu-item-${e.label}`))})}),C!==-1&&l(s,{open:!0,anchorEl:y,ref:S,placement:`right-start`,children:l(s.Section,{title:e[C].label,children:e[C]?.options.map(t=>u(r,{onClick:()=>k(e[C].label,t),children:[t.label,l(o,{data:g?.[e[C].label]?.some(e=>e.value===t.value)?f:p,color:h.interactive.primary__resting.rgba})]},`filter-option-${t.label}`))})})]})};export{g as default};

package/dist/molecules/Sieve/Sieve.d.ts

@@ -0,0 +1,7 @@
+import { SieveProps } from "./Sieve.types.js";
+import { FC } from "react";
+
+//#region src/molecules/Sieve/Sieve.d.ts
+declare const Sieve: FC<SieveProps>;
+//#endregion
+export { Sieve };

package/dist/molecules/Sieve/Sieve.js

@@ -0,0 +1 @@
+import{Container as e,FilterChip as t,Search as n,Wrapper as r}from"./Sieve.styles.js";import i from"./Filter.js";import a from"./Sort.js";import{useCallback as o,useEffect as s,useRef as c,useState as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{debounce as f}from"lodash";import{useSearchParams as p}from"react-router-dom";const m=({searchPlaceholder:m,sortOptions:h,filterOptions:g,sieveValue:_,onUpdate:v,showChips:y=!0,minSearchWidth:b=`24rem`,syncWithSearchParams:x=!1,isLoadingOptions:S=!1,debounceSearchValue:C=!1,onIsTyping:w})=>{let[T,E]=l(_.searchValue??``),D=c(!1),[O,k]=p(),A=c(!1);s(()=>{if(!A.current&&x&&!S){let e=O.get(`search`)??void 0,t=g?.map(e=>e.label)??[],n={};for(let e of t){let t=g?.find(t=>t.label===e)?.options,r=JSON.parse(O.get(e.toLowerCase())??`[]`);t!==void 0&&(n[e]=t.filter(e=>r.includes(e.label)))}v({searchValue:e,filterValues:n,sortValue:_.sortValue}),A.current=!0}},[g,A,S,v,O,_.sortValue,x]);let j=c(`{}`);s(()=>{if(x&&A.current&&!S&&JSON.stringify(_)!==j.current){_.searchValue===void 0?O.delete(`search`):O.set(`search`,_.searchValue);let e=g?.map(e=>e.label)??[],t=_.filterValues;for(let n of e)t?.[n]&&t[n].length>0?O.set(n.toLowerCase(),JSON.stringify(t[n].map(e=>e.label))):O.delete(n.toLowerCase());j.current=JSON.stringify(_),k(O),v(_)}},[g,A,S,v,O,k,_,x]);let M=o((e,t)=>{let n={..._,[e]:t};v(n)},[v,_]),N=o(f((e,t)=>{M(e,t),w?.(!1),D.current=!1},800),[M,w]),P=(e,t)=>{let n={..._.filterValues},r=n[e].findIndex(e=>e.value===t.value);n[e].splice(r,1),n[e].length===0&&delete n[e],Object.keys(n).flatMap(e=>n?.[e]).length===0&&(n=void 0),M(`filterValues`,n)},F=()=>{M(`filterValues`,void 0)},I=e=>{C?(E(e.target.value),e.target.value===``?(N.cancel(),M(`searchValue`,void 0),w?.(!1),D.current=!1):(N(`searchValue`,e.target.value),D.current||=(w?.(!0),!0))):M(`searchValue`,e.target.value===``?void 0:e.target.value)};return d(r,{className:`sieve-container`,children:[d(e,{children:[u(n,{style:{minWidth:b},placeholder:m,value:C?T:_.searchValue??``,onChange:I}),h!==void 0&&u(a,{options:h,selectedOption:_.sortValue,setSelectedOption:e=>M(`sortValue`,e)}),g!==void 0&&u(i,{options:g,filterValues:_.filterValues,setFilterValues:e=>M(`filterValues`,e)})]}),y&&d(e,{children:[Object.keys(_.filterValues??{}).map(e=>_.filterValues?.[e].map(n=>u(t,{onDelete:()=>P(e,n),children:n?.label},`filter-chip-${n?.value}`))),_.filterValues&&Object.keys(_.filterValues).flatMap(e=>_.filterValues?.[e]).length>1&&u(t,{onDelete:F,children:`Remove all`})]})]})};export{m as Sieve};

package/dist/molecules/Sieve/Sieve.styles.js

@@ -0,0 +1,43 @@
+import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import{Chip as n,Menu as r,Search as i}from"@equinor/eds-core-react";import a from"styled-components";const o=a.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${t.medium};
+`,s=a.div`
+  display: flex;
+  gap: ${t.medium};
+  align-items: center;
+`,c=a(n)`
+  color: ${e.text.static_icons__default.rgba};
+  background: ${e.ui.background__light.rgba};
+  border: 1px solid ${e.ui.background__medium.rgba};
+  line-height: normal;
+  transition: background 0.15s ease-in;
+
+  svg {
+    z-index: auto;
+    fill: ${e.text.static_icons__default.rgba};
+  }
+`,l=a(i)`
+  > div {
+    box-shadow: none;
+    outline: none !important;
+    background: ${e.ui.background__default.rgba};
+    > input {
+      color: ${e.text.static_icons__default.rgba};
+      box-shadow: inset 0 -1px 0 0 ${e.text.static_icons__tertiary.rgba};
+      &:hover {
+        box-shadow: inset 0 -2px 0 0 ${e.text.static_icons__tertiary.rgba};
+      }
+      &:focus {
+        box-shadow: inset 0 -2px 0 0 ${e.interactive.primary__resting.rgba};
+      }
+    }
+  }
+`,u=a(r.Item)`
+  outline: none !important;
+  > div {
+    grid-template-columns: 1fr auto;
+  }
+`,d=a(n)`
+  background: none;
+`;export{d as Chip,s as Container,c as FilterChip,u as MenuItem,l as Search,o as Wrapper};

package/dist/molecules/Sieve/Sieve.types.d.ts

@@ -0,0 +1,28 @@
+import { SieveFilterGroup } from "./Filter.js";
+
+//#region src/molecules/Sieve/Sieve.types.d.ts
+interface SieveOption {
+  label: string;
+  value: string;
+}
+type FilterValues = Record<string, SieveOption[]>;
+interface SieveValue {
+  searchValue: string | undefined;
+  sortValue: SieveOption | undefined;
+  filterValues: FilterValues | undefined;
+}
+interface SieveProps {
+  searchPlaceholder: string;
+  sortOptions?: SieveOption[];
+  filterOptions?: SieveFilterGroup[];
+  sieveValue: SieveValue;
+  onUpdate: (value: SieveValue) => void;
+  showChips?: boolean;
+  minSearchWidth?: string;
+  syncWithSearchParams?: boolean;
+  isLoadingOptions?: boolean;
+  debounceSearchValue?: boolean;
+  onIsTyping?: (value: boolean) => void;
+}
+//#endregion
+export { type FilterValues, type SieveOption, type SieveProps, type SieveValue };

package/dist/molecules/Sieve/Sort.js

@@ -0,0 +1 @@
+import{colors as e}from"../../atoms/style/colors.js";import{Chip as t,MenuItem as n}from"./Sieve.styles.js";import{useRef as r,useState as i}from"react";import{Icon as a,Menu as o}from"@equinor/eds-core-react";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";import{radio_button_selected as u,radio_button_unselected as d,sort as f}from"@equinor/eds-icons";const p=({options:p,selectedOption:m,setSelectedOption:h})=>{let g=r(null),[_,v]=i(!1),y=()=>{v(!_)},b=()=>{v(!1)},x=e=>{h(e)};return p.length===0?null:l(s,{children:[l(t,{ref:g,onClick:y,children:[`Sort by `,c(a,{data:f})]}),_&&c(o,{open:!0,anchorEl:g.current,onClose:b,placement:`bottom-start`,children:c(o.Section,{title:`Sort by`,children:p.map(t=>l(n,{onClick:()=>x(t),children:[t.label,c(a,{data:m?.value===t.value?u:d,color:e.interactive.primary__resting.rgba})]},`sort-item-${t.value}`))})})]})};export{p as default};

package/dist/molecules/SingleFilterMenu/SingleFilterMenu.d.ts

@@ -0,0 +1,15 @@
+import { FC } from "react";
+import { IconData } from "@equinor/eds-icons";
+
+//#region src/molecules/SingleFilterMenu/SingleFilterMenu.d.ts
+interface SingleFilterMenuProps {
+  onChange: (selectedId: string | undefined | null) => void;
+  customIcon?: IconData;
+  menuTitle: string;
+  data: string[];
+  showChip?: boolean;
+  chipColor?: string;
+}
+declare const SingleFilterMenu: FC<SingleFilterMenuProps>;
+//#endregion
+export { SingleFilterMenu, SingleFilterMenuProps };

package/dist/molecules/SingleFilterMenu/SingleFilterMenu.js

@@ -0,0 +1,20 @@
+import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{spacings as t}from"../../atoms/style/spacings.js";import n,{useState as r}from"react";import{Button as i,Chip as a,Icon as o,Menu as s,Typography as c}from"@equinor/eds-core-react";import l from"styled-components";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{filter_list as f}from"@equinor/eds-icons";const{colors:p}=e,m=l.div`
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 25px;
+`,h=l(a)`
+  background: ${e=>e.$backgroundColor};
+`,g=l(i)`
+  justify-self: flex-end;
+`,_=l(s)`
+  overflow-y: auto;
+`,v=l.div`
+  padding: ${t.medium};
+  padding-left: ${t.large};
+`,y=l(s.Item)`
+  &:focus {
+    outline: none;
+    background: ${p.ui.background__light.rgba};
+  }
+`,b=({onChange:e,customIcon:t,menuTitle:n,data:i,showChip:a=!1,chipColor:s=p.ui.background__default.rgba})=>{let[l,b]=r(!1),[x,S]=r(null),[C,w]=r(),T=e=>{let t=e.target;S(t),b(!l)},E=()=>b(!1),D=t=>{b(!1),C===t?(w(void 0),e(void 0)):(w(t),e(t))},O=()=>{E(),e(void 0),w(void 0)};return d(m,{children:[a&&C&&u(h,{"data-testid":`chip`,onDelete:O,variant:`default`,$backgroundColor:s,children:C}),u(g,{"data-testid":`menuButton`,variant:`ghost_icon`,onClick:e=>T(e),children:u(o,{data:t??f})}),d(_,{open:l,anchorEl:x,onClose:E,placement:`bottom-end`,"data-testid":`menuContainer`,children:[u(v,{children:u(c,{group:`navigation`,variant:`label`,children:n})}),i.map((e,t)=>u(y,{onClick:()=>D(e),disabled:C===e&&a,active:C===e&&!a,children:u(c,{group:`navigation`,variant:`menu_title`,as:`span`,children:e})},e+t))]})]})};b.displayName=`SingleFilterMenu`;export{b as SingleFilterMenu};

package/dist/molecules/Skeleton/Skeleton.styles.js

@@ -0,0 +1 @@
+import{colors as e}from"../../atoms/style/colors.js";const t={START:e.interactive.disabled__border.rgba,END:e.interactive.disabled__text.rgba};export{t as COLORS};