@equinor/amplify-component-lib 8.18.0 → 8.18.2

package/dist/molecules/DatePicker/DatePicker.styles.js

@@ -13,5 +13,8 @@ import{colors as t}from"../../atoms/style/colors.js";import o from"styled-compon
 
   div:has(> button) {
     outline-width: 1px;
+    > button:focus-visible {
+      outline: none;
+    }
   }
 `;export{e as DatePickerWrapper};

package/dist/molecules/OptionDrawer/OptionDrawer.d.ts

@@ -7,6 +7,7 @@ export interface ToggleEventProps<T> {
 export interface OptionDrawerProps<T extends {
     id: string;
     label: string;
+    disabled?: boolean;
     parentId?: string;
     children?: T[];
 }> {
@@ -22,14 +23,14 @@ export interface OptionDrawerProps<T extends {
     openAll?: boolean;
     showIntermediateParent?: boolean;
     parentHasNestedItems?: boolean;
-    disabled?: boolean;
 }
 export declare const OptionDrawer: {
     <T extends {
         id: string;
         label: string;
+        disabled?: boolean;
         parentId?: string;
         children?: T[];
-    }>({ item, onToggle, section, selectedItems, singleSelect, siblings, animateCheck, animateUncheck, animateParent, openAll, showIntermediateParent, parentHasNestedItems, disabled, }: OptionDrawerProps<T>): import("react/jsx-runtime").JSX.Element;
+    }>({ item, onToggle, section, selectedItems, singleSelect, siblings, animateCheck, animateUncheck, animateParent, openAll, showIntermediateParent, parentHasNestedItems, }: OptionDrawerProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/molecules/OptionDrawer/OptionDrawer.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n,useEffect as i}from"react";import{Button as r,Checkbox as d}from"@equinor/eds-core-react";import{chevron_down as o,chevron_right as a}from"@equinor/eds-icons";import{StyledOptionWrapper as l,StyledOptionItem as c,StyledIcon as s,StyledOption as E}from"./OptionDrawer.styles.js";const m=e=>{if(0===e.length)return[];let t=[];return e.forEach((e=>{const n=m(e?.children??[]);t=[e,...t,...n]})),t},h=(e,t,n,i)=>{if(void 0!==t.find((t=>t.id===e.id)))return"CHECKED";if(void 0===e.children||0===e.children.length||n&&!i)return"NONE";const r=m(e?.children).map((e=>void 0!==t.find((t=>t.id===e.id))));return!n&&r.every(Boolean)?"CHECKED":r.every((e=>!e))?"NONE":"INTERMEDIATE"},p=({item:m,onToggle:g,section:C=0,selectedItems:N=[],singleSelect:f=!1,siblings:D,animateCheck:u,animateUncheck:I,animateParent:T,openAll:v,showIntermediateParent:H=!1,parentHasNestedItems:O=!1,disabled:K=!1})=>{const[k,y]=n(!1),[A,$]=n(h(m,N,f,H)),[w,b]=n(!1);i((()=>{$(h(m,N,f,H))}),[m,N,f,H]),i((()=>{y(!!v)}),[v]);const M=e=>{const t=0===m.children?.length||f||void 0===m.children?[m]:[...m.children];"CHECKED"===A?(g({items:t,toggle:!1,event:e}),y(!1)):"NONE"!==A&&"INTERMEDIATE"!==A||(g({items:t,toggle:!0,event:e}),y(!0)),b(!1)},P=(e,t)=>{t&&T?(T(!0),$("CHECKED"===A?"NONE":"CHECKED"),setTimeout((()=>{M(e)}),400)):D?M(e):(b(!0),$("CHECKED"===A?"NONE":"CHECKED"),setTimeout((()=>{M(e)}),400))},R=e=>{if(D&&T){const t=N.filter((e=>e.id.includes(m.parentId??""))).length;if(!e&&u&&t===D-1)return!0;if(e&&I&&1===t)return!0}return!1},S=e=>{"CHECKED"===A&&I?P(e,R(!0)):"NONE"!==A&&"INTERMEDIATE"!==A||!u?M(e):P(e,R(!1))},j=m.children&&0!==m.children.length;return e(l,{$section:C,$animationActive:w,"data-testid":w?"animated-"+m.id:m.id,children:[e(c,{$paddedLeft:O&&!j,children:[j&&t(r,{variant:"ghost_icon",onClick:()=>{y((e=>!e))},"data-testid":"chevron-toggler-option-drawer",children:t(s,{data:k?o:a})}),e(E,{$section:C,onClick:e=>{K||(m.children&&0!==m.children.length&&y((e=>!e)),S(e))},children:[t(d,{indeterminate:"INTERMEDIATE"===A,checked:"CHECKED"===A,color:"secondary"}),m.label]})]}),k&&m.children?.map((e=>t(p,{section:C+1,onToggle:g,selectedItems:N,item:e,singleSelect:f,siblings:m.children?.length,animateCheck:u,animateUncheck:I,animateParent:b,openAll:v,showIntermediateParent:H,parentHasNestedItems:!0,disabled:K},`OptionDrawer-${e.id}`)))]},w?`animated-StyledOptionWrapper-${m.id}`:`StyledOptionWrapper-${m.id}`)};p.displayName="OptionDrawer";export{p as OptionDrawer};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i,useEffect as n}from"react";import{Button as r,Checkbox as d}from"@equinor/eds-core-react";import{chevron_down as o,chevron_right as a}from"@equinor/eds-icons";import{StyledOptionWrapper as l,StyledOptionItem as c,StyledIcon as s,StyledOption as E}from"./OptionDrawer.styles.js";const m=e=>{if(0===e.length)return[];let t=[];return e.forEach((e=>{const i=m(e?.children??[]);t=[e,...t,...i]})),t},h=(e,t,i,n)=>{if(void 0!==t.find((t=>t.id===e.id)))return"CHECKED";if(void 0===e.children||0===e.children.length||i&&!n)return"NONE";const r=m(e?.children).map((e=>void 0!==t.find((t=>t.id===e.id))));return!i&&r.every(Boolean)?"CHECKED":r.every((e=>!e))?"NONE":"INTERMEDIATE"},p=({item:m,onToggle:g,section:C=0,selectedItems:N=[],singleSelect:f=!1,siblings:D,animateCheck:u,animateUncheck:I,animateParent:T,openAll:v,showIntermediateParent:H=!1,parentHasNestedItems:O=!1})=>{const[K,b]=i(!1),[k,y]=i(h(m,N,f,H)),[A,$]=i(!1);n((()=>{y(h(m,N,f,H))}),[m,N,f,H]),n((()=>{b(!!v)}),[v]);const w=e=>{const t=0===m.children?.length||f||void 0===m.children?[m]:[...m.children];"CHECKED"===k?(g({items:t,toggle:!1,event:e}),b(!1)):"NONE"!==k&&"INTERMEDIATE"!==k||(g({items:t,toggle:!0,event:e}),b(!0)),$(!1)},M=(e,t)=>{t&&T?(T(!0),y("CHECKED"===k?"NONE":"CHECKED"),setTimeout((()=>{w(e)}),400)):D?w(e):($(!0),y("CHECKED"===k?"NONE":"CHECKED"),setTimeout((()=>{w(e)}),400))},P=e=>{if(D&&T){const t=N.filter((e=>e.id.includes(m.parentId??""))).length;if(!e&&u&&t===D-1)return!0;if(e&&I&&1===t)return!0}return!1},R=e=>{"CHECKED"===k&&I?M(e,P(!0)):"NONE"!==k&&"INTERMEDIATE"!==k||!u?w(e):M(e,P(!1))},S=m.children&&0!==m.children.length;return e(l,{$section:C,$animationActive:A,"data-testid":A?"animated-"+m.id:m.id,children:[e(c,{$paddedLeft:O&&!S,children:[S&&t(r,{variant:"ghost_icon",onClick:()=>{b((e=>!e))},"data-testid":"chevron-toggler-option-drawer",children:t(s,{data:K?o:a})}),e(E,{$section:C,onClick:e=>{m.disabled||(m.children&&0!==m.children.length&&b((e=>!e)),R(e))},disabled:!!m.disabled,children:[t(d,{indeterminate:"INTERMEDIATE"===k,checked:"CHECKED"===k,color:"secondary",disabled:!!m.disabled}),m.label]})]}),K&&m.children?.map((e=>t(p,{section:C+1,onToggle:g,selectedItems:N,item:e,singleSelect:f,siblings:m.children?.length,animateCheck:u,animateUncheck:I,animateParent:$,openAll:v,showIntermediateParent:H,parentHasNestedItems:!0},`OptionDrawer-${e.id}`)))]},A?`animated-StyledOptionWrapper-${m.id}`:`StyledOptionWrapper-${m.id}`)};p.displayName="OptionDrawer";export{p as OptionDrawer};

package/dist/molecules/OptionDrawer/OptionDrawer.styles.d.ts

@@ -3,7 +3,7 @@ interface StyledOptionProps {
     $animationActive?: boolean;
 }
 declare const StyledOptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledOptionProps>> & string;
-declare const StyledOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledOptionProps>> & string;
+declare const StyledOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledOptionProps>> & string;
 declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<{
     title?: string;
     color?: string;

package/dist/molecules/OptionDrawer/OptionDrawer.styles.js

@@ -1,4 +1,4 @@
-import{Icon as i}from"@equinor/eds-core-react";import{colors as e}from"../../atoms/style/colors.js";import t,{keyframes as o,css as r}from"styled-components";const a=o`
+import{Icon as o}from"@equinor/eds-core-react";import{colors as t}from"../../atoms/style/colors.js";import e,{keyframes as i,css as r}from"styled-components";const a=i`
   0% {
     opacity: 1;
   }
@@ -9,29 +9,42 @@ import{Icon as i}from"@equinor/eds-core-react";import{colors as e}from"../../ato
     opacity: 0;
     display: none;
   }
-`,n=t.div`
-  margin-left: ${({$section:i})=>i>0?"22px":""};
+`,n=e.div`
+  margin-left: ${({$section:o})=>o>0?"22px":""};
   opacity: 1;
-  color: ${e.text.static_icons__default.rgba};
-  animation: ${({$animationActive:i})=>i?r`
+  color: ${t.text.static_icons__default.rgba};
+  animation: ${({$animationActive:o})=>o?r`
           ${a} 400ms ease-in
         `:"none"};
-`,s=t.div`
+`,s=e.button`
   position: relative;
   display: flex;
   flex: 1;
   align-items: center;
   cursor: pointer;
   transition: background-color 0.1s ease-in;
-  &:hover {
-    background-color: ${e.interactive.primary__hover_alt.rgba};
+  font-family: 'Equinor', sans-serif;
+  font-size: 1rem;
+  color: ${t.text.static_icons__default.rgba};
+  &:hover:not(:disabled) {
+    background-color: ${t.interactive.primary__hover_alt.rgba};
+  }
+  &:disabled {
+    cursor: not-allowed;
+    color: ${t.interactive.disabled__text.rgba};
+    > button {
+      cursor: not-allowed;
+    }
+  }
+  > span::before {
+    display: none;
   }
 
   svg {
-    fill: ${e.interactive.primary__resting.rgba};
+    fill: ${t.interactive.primary__resting.rgba};
   }
-`,c=t(i)``,l=t.div`
+`,l=e(o)``,c=e.div`
   display: flex;
   align-items: center;
-  ${({$paddedLeft:i})=>i&&"margin-left: 40px"};
-`;export{c as StyledIcon,s as StyledOption,l as StyledOptionItem,n as StyledOptionWrapper};
+  ${({$paddedLeft:o})=>o&&"margin-left: 40px"};
+`;export{l as StyledIcon,s as StyledOption,c as StyledOptionItem,n as StyledOptionWrapper};

package/dist/molecules/OptionDrawer/stories/data.d.ts

@@ -1,6 +1,7 @@
 export interface ValueType {
     id: string;
     label: string;
+    disabled?: boolean;
     children?: ValueType[];
     value: number;
 }

package/dist/organisms/TableOfContents/TableOfContents.styles.js

@@ -2,10 +2,12 @@ import{Link as t}from"react-router-dom";import{tokens as e}from"../../node_modul
   &:hover {
     background: ${s.interactive.primary__hover_alt.rgba};
   }
-  &:focus {
-    outline: 2px dashed ${s.interactive.focus.rgba};
-    outline-offset: -4px;
-  }
+  ${({$active:t})=>t?"":n`
+      &:focus:not(:hover) {
+        outline: 2px dashed ${s.interactive.focus.rgba};
+        outline-offset: -4px;
+      }
+    `}
   position: relative;
   display: grid;
   grid-template-columns: auto 1fr;
@@ -111,7 +113,6 @@ import{Link as t}from"react-router-dom";import{tokens as e}from"../../node_modul
         `}}}
 `,u=a.div`
   display: flex;
-  flex-direction:;
   position: relative;
   &:after {
     position: absolute;
@@ -170,8 +171,7 @@ import{Link as t}from"react-router-dom";import{tokens as e}from"../../node_modul
             background: ${s.ui.background__medium.rgba};
           }
         `}}}
-  data-testid="table-of-contents-container"
-`,b=a(r.div)`
+`,$=a(r.div)`
   display: flex;
   flex-direction: column;
   ${({$shouldShowChildren:t})=>t?null:n`
@@ -187,4 +187,4 @@ import{Link as t}from"react-router-dom";import{tokens as e}from"../../node_modul
   }
 
   ${({$variant:t})=>"buttons"===t&&`gap:${i.x_small};`}
-`;export{f as BorderItemsContainer,u as BorderItemsHorizontalContainer,d as Button,b as ChildContainer,c as Link,g as TableOfContentsContainer,p as TableOfContentsItemContainer};
+`;export{f as BorderItemsContainer,u as BorderItemsHorizontalContainer,d as Button,$ as ChildContainer,c as Link,g as TableOfContentsContainer,p as TableOfContentsItemContainer};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "8.18.0",
+  "version": "8.18.2",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",