@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.2

package/fullscreen-image-carousel/fullscreen-image-carousel.style.js

@@ -1,83 +1,135 @@
-import i,{css as t}from"styled-components";import{ClickableIcon as e}from"../shared/clickable-icon/clickable-icon.js";import{ImagePlaceholder as o}from"../shared/image-placeholder/image-placeholder.js";import{Typography as n}from"../typography/index.js";import{V3_Colour as r,V3_Shadow as a,V3_MediaQuery as s,V3_Spacing as c,V3_Radius as d,V3_Border as p}from"../v3_theme/index.js";import{StatefulImage as h}from"./stateful-image.js";const l=i(e)`
+import i,{css as e}from"styled-components";import{ClickableIcon as t}from"../shared/clickable-icon/clickable-icon.js";import{ImagePlaceholder as o}from"../shared/image-placeholder/image-placeholder.js";import{Typography as n}from"../typography/index.js";import{V3_Colour as r,V3_Shadow as d,V3_Border as s,V3_Spacing as a,V3_MediaQuery as c,V3_Radius as l,V3_Font as p}from"../v3_theme/index.js";import{StatefulImage as h}from"./stateful-image.js";const g=i(t)`
     padding: 0;
     border-radius: 100%;
     background: ${r.bg};
     color: ${r["icon-primary"]};
     height: 2.5rem;
     width: 2.5rem;
-    box-shadow: ${a["md-strong"]};
+    box-shadow: ${d["md-strong"]};
 
     svg {
         height: 1.5rem;
         width: 1.5rem;
     }
-`,$=i(l)`
-    position: absolute;
-    top: ${i=>t`calc(${c["spacing-48"]} + ${i.$insetTop||0}px)`};
-    right: ${i=>t`calc(${c["spacing-48"]} + ${i.$insetRight||0}px)`};
-    z-index: 5;
 
-    ${s.MaxWidth.sm} {
-        top: ${i=>t`calc(${c["spacing-20"]} + ${i.$insetTop||0}px)`};
-        right: ${i=>t`calc(${c["spacing-20"]} + ${i.$insetRight||0}px)`};
+    &:focus {
+        outline: none;
     }
-`,g=i(l)`
-    position: absolute;
-    top: ${i=>t`calc(${c["spacing-48"]} + ${i.$insetTop||0}px)`};
-    right: ${i=>t`calc(2.5rem + ${c["spacing-48"]} + ${c["spacing-16"]} + ${i.$insetRight||0}px)`};
-
-    z-index: 5;
 
-    ${s.MaxWidth.sm} {
-        top: ${i=>t`calc(${c["spacing-20"]} + ${i.$insetTop||0}px)`};
-        right: ${i=>t`calc(2.5rem + ${c["spacing-20"]} + ${c["spacing-16"]} + ${i.$insetRight||0}px)`};
+    &:focus-visible {
+        outline: ${s["width-020"]} solid ${r["border-selected"]};
+        outline-offset: 2px;
     }
-`,x=i(l)`
+`,$=i.div`
+    order: -1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: ${a["spacing-16"]};
+
+    ${i=>i.$hasFileInfo?e`
+                  flex-shrink: 0;
+                  background-color: ${r["bg-inverse"]};
+                  padding-top: calc(
+                      ${a["spacing-24"]} + ${i.$insetTop||0}px
+                  );
+                  padding-bottom: ${a["spacing-24"]};
+                  padding-left: calc(
+                      ${a["spacing-32"]} + ${i.$insetLeft||0}px
+                  );
+                  padding-right: calc(
+                      ${a["spacing-32"]} + ${i.$insetRight||0}px
+                  );
+
+                  ${c.MaxWidth.sm} {
+                      padding-top: calc(
+                          ${a["spacing-16"]} + ${i.$insetTop||0}px
+                      );
+                      padding-bottom: ${a["spacing-16"]};
+                      padding-left: calc(
+                          ${a["spacing-20"]} + ${i.$insetLeft||0}px
+                      );
+                      padding-right: calc(
+                          ${a["spacing-20"]} + ${i.$insetRight||0}px
+                      );
+                  }
+              `:e`
+                  position: absolute;
+                  top: calc(
+                      ${a["spacing-48"]} + ${i.$insetTop||0}px
+                  );
+                  right: calc(
+                      ${a["spacing-48"]} + ${i.$insetRight||0}px
+                  );
+                  z-index: 5;
+
+                  ${c.MaxWidth.sm} {
+                      top: calc(
+                          ${a["spacing-20"]} + ${i.$insetTop||0}px
+                      );
+                      right: calc(
+                          ${a["spacing-20"]} + ${i.$insetRight||0}px
+                      );
+                  }
+              `}
+`,x=i(g)``,f=i(g)`
+    color: ${r["icon-error"]};
+`,m=i(g)``,b=i(g)`
     z-index: 4;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
 
-    ${i=>"left"===i.$position&&t`
+    ${i=>"left"===i.$position&&e`
             left: calc(
-                ${c["spacing-48"]} + ${i.$insetLeft||0}px
+                ${a["spacing-48"]} + ${i.$insetLeft||0}px
             );
-            ${s.MaxWidth.sm} {
+
+            ${c.MaxWidth.sm} {
                 left: calc(
-                    ${c["spacing-20"]} + ${i.$insetLeft||0}px
+                    ${a["spacing-20"]} + ${i.$insetLeft||0}px
                 );
             }
         `}
 
-    ${i=>"right"===i.$position&&t`
+    ${i=>"right"===i.$position&&e`
             right: calc(
-                ${c["spacing-48"]} + ${i.$insetRight||0}px
+                ${a["spacing-48"]} + ${i.$insetRight||0}px
             );
-            ${s.MaxWidth.sm} {
+
+            ${c.MaxWidth.sm} {
                 right: calc(
-                    ${c["spacing-20"]} + ${i.$insetRight||0}px
+                    ${a["spacing-20"]} + ${i.$insetRight||0}px
                 );
             }
         `}
-`,m=i.div`
+`,u=i.div`
+    position: relative;
+    width: 100%;
+    height: 100dvh;
+    display: flex;
+    flex-direction: column;
+`,w=i.div`
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: 100%;
-`,f=i.div`
+    flex: 1;
+    min-height: 0;
+`,v=i.div`
     user-select: none;
     position: relative;
     display: block;
     overflow: hidden;
     width: 100%;
-    height: 100%;
-`,b=i.div`
+    flex: 1;
+    min-height: 0;
+`,y=i.div`
     display: block;
     user-select: none;
     height: 100%;
     overflow: hidden;
     touch-action: pan-y;
-`,u=i.div`
+`,j=i.div`
     display: flex;
     transition: all 450ms ease-out 0s;
     position: relative;
@@ -85,34 +137,49 @@ import i,{css as t}from"styled-components";import{ClickableIcon as e}from"../sha
     user-select: none;
     width: 100%;
     height: 100%;
-`,w=i.div`
+`,k=i.div`
     flex: 0 0 100%;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
     align-items: center;
+
     .react-transform-wrapper {
         height: 100%;
         width: 100%;
     }
+
     .react-transform-component {
         height: 100%;
         width: 100%;
     }
-`,v=i(h)`
+`,M=i.div`
+    height: 100%;
+    width: 100%;
+    outline: none;
+
+    &:focus {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: ${s["width-020"]} solid ${r["border-selected"]};
+        outline-offset: -2px;
+    }
+`,W=i(h)`
     height: 100%;
     width: 100%;
-    border-radius: ${d.none};
-`,y=i(o)`
+    border-radius: ${l.none};
+`,z=i(o)`
     width: 60vw;
     height: auto;
     max-height: 100%;
-    border-radius: ${d.none};
+    border-radius: ${l.none};
     aspect-ratio: 4 / 3;
-`,j=i.div`
+`,B=i.div`
     display: flex;
     justify-content: center;
-    padding: ${c["spacing-16"]};
+    padding: ${a["spacing-16"]};
     position: absolute;
     bottom: 0;
     left: 0;
@@ -120,51 +187,51 @@ import i,{css as t}from"styled-components";import{ClickableIcon as e}from"../sha
     margin-left: auto;
     margin-right: auto;
     z-index: 3;
-`,k=i(n.BodyXS)`
+`,R=i(n.BodyXS)`
     display: inline-flex;
-    padding: ${c["spacing-4"]} ${c["spacing-16"]};
+    padding: ${a["spacing-4"]} ${a["spacing-16"]};
     justify-content: center;
     align-items: center;
-    border-radius: ${d.full};
+    border-radius: ${l.full};
     background-color: ${r.bg};
     text-align: center;
-`,M=i.div`
+`,L=i.div`
     flex-shrink: 0;
     display: flex;
     overflow: auto;
     background-color: ${r["bg-inverse"]};
-    padding: ${i=>t`
-                ${c["spacing-24"]} ${c["spacing-16"]} calc(${c["spacing-24"]} + ${i.$insetBottom||0}px);
+    padding: ${i=>e`
+                ${a["spacing-24"]} ${a["spacing-16"]} calc(${a["spacing-24"]} + ${i.$insetBottom||0}px);
             `}
-        ${s.MaxWidth.sm} {
-        padding: ${i=>t`
-                ${c["spacing-16"]} ${c["spacing-20"]} calc(${c["spacing-16"]} + ${i.$insetBottom||0}px);
+        ${c.MaxWidth.sm} {
+        padding: ${i=>e`
+                ${a["spacing-16"]} ${a["spacing-20"]} calc(${a["spacing-16"]} + ${i.$insetBottom||0}px);
             `};
     }
-`,W=i.div`
+`,T=i.div`
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    gap: ${c["spacing-16"]};
+    gap: ${a["spacing-16"]};
     justify-content: center;
     margin-left: auto;
     margin-right: auto;
-`,z=i.div`
+`,S=i.div`
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100px;
     width: 100px;
 
-    ${s.MaxWidth.sm} {
+    ${c.MaxWidth.sm} {
         height: 64px;
         width: 64px;
     }
-`,R=i.div`
+`,C=i.div`
     cursor: pointer;
     background-color: ${r["bg-inverse"]};
-    border-radius: ${d.md};
-    border: ${p.solid} transparent;
+    border-radius: ${l.md};
+    border: ${s.solid} transparent;
     box-sizing: content-box;
 
     flex-shrink: 0;
@@ -175,31 +242,57 @@ import i,{css as t}from"styled-components";import{ClickableIcon as e}from"../sha
     height: 92px;
     width: 92px;
 
-    ${s.MaxWidth.sm} {
+    ${c.MaxWidth.sm} {
         height: 60px;
         width: 60px;
     }
 
-    ${i=>i.$active?t`
-                  border-width: ${p["width-040"]};
+    ${i=>i.$active?e`
+                  border-width: ${s["width-040"]};
                   border-color: ${r["border-selected"]};
 
-                  ${s.MaxWidth.sm} {
-                      border-width: ${p["width-020"]};
+                  ${c.MaxWidth.sm} {
+                      border-width: ${s["width-020"]};
                   }
 
                   &:hover {
                       border-color: ${r["border-selected-hover"]};
                   }
-              `:t`
-                  border-width: ${p["width-010"]};
+              `:e`
+                  border-width: ${s["width-010"]};
 
                   &:hover {
                       border-color: ${r["border-hover"]};
                   }
               `};
-`,T=i(h)`
+`,D=i(h)`
     height: 100%;
     width: 100%;
-`;export{x as ArrowButton,j as BoxChip,k as Chip,$ as CloseButton,m as ImageGalleryContainer,w as ImageGallerySlide,u as ImageGallerySlides,b as ImageGallerySwipe,f as ImageGalleryWrapper,g as MagnifierButton,v as SlideImage,y as SlidePlaceholderImage,M as ThumbnailContainer,T as ThumbnailImage,R as ThumbnailItem,z as ThumbnailItemContainer,W as ThumbnailWrapper};
+`,F=i.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: ${a["spacing-8"]};
+    overflow: hidden;
+    min-width: 0;
+    min-height: calc(
+        ${p.Spec["body-lh-baseline"]} + ${a["spacing-8"]} +
+            ${p.Spec["body-lh-md"]}
+    );
+    ${i=>i.$centerContent&&e`
+            justify-content: center;
+        `}
+`,I=i(n.BodyBL)`
+    color: ${r["text-inverse"]};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+`,X=i(n.BodyMD)`
+    color: ${r["text-inverse"]};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+`;export{b as ArrowButton,B as BoxChip,u as CarouselModalContent,R as Chip,x as CloseButton,f as DeleteButton,I as FileInfoFileName,X as FileInfoFileSize,F as FileInfoTextWrapper,M as FocusableImageRegion,w as ImageGalleryContainer,k as ImageGallerySlide,j as ImageGallerySlides,y as ImageGallerySwipe,v as ImageGalleryWrapper,m as MagnifierButton,W as SlideImage,z as SlidePlaceholderImage,L as ThumbnailContainer,D as ThumbnailImage,C as ThumbnailItem,S as ThumbnailItemContainer,T as ThumbnailWrapper,$ as TopActionButtons};
 //# sourceMappingURL=fullscreen-image-carousel.style.js.map

package/fullscreen-image-carousel/fullscreen-image-carousel.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-image-carousel.style.js","sources":["../../src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport type { InsetStyleProps } from \"../shared/types\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../v3_theme\";\nimport { StatefulImage } from \"./stateful-image\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface ArrowButtonStyleProps extends InsetStyleProps {\n    $position: \"left\" | \"right\";\n}\n\ninterface ThumbnailItemStyleProps {\n    $active?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst IconButton = styled(ClickableIcon)`\n    padding: 0;\n    border-radius: 100%;\n    background: ${V3_Colour[\"bg\"]};\n    color: ${V3_Colour[\"icon-primary\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    box-shadow: ${V3_Shadow[\"md-strong\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n`;\n\nexport const CloseButton = styled(IconButton)<InsetStyleProps>`\n    position: absolute;\n    top: ${(props) =>\n        css`calc(${V3_Spacing[\"spacing-48\"]} + ${props.$insetTop || 0}px)`};\n    right: ${(props) =>\n        css`calc(${V3_Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px)`};\n    z-index: 5;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        top: ${(props) =>\n            css`calc(${V3_Spacing[\"spacing-20\"]} + ${props.$insetTop || 0}px)`};\n        right: ${(props) =>\n            css`calc(${V3_Spacing[\"spacing-20\"]} + ${\n                props.$insetRight || 0\n            }px)`};\n    }\n`;\n\nexport const MagnifierButton = styled(IconButton)<InsetStyleProps>`\n    position: absolute;\n    top: ${(props) =>\n        css`calc(${V3_Spacing[\"spacing-48\"]} + ${props.$insetTop || 0}px)`};\n    right: ${\n        (props) =>\n            css`calc(2.5rem + ${V3_Spacing[\"spacing-48\"]} + ${\n                V3_Spacing[\"spacing-16\"]\n            } + ${props.$insetRight || 0}px)` // close button + space from screen + gap between buttons\n    };\n\n    z-index: 5;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        top: ${(props) =>\n            css`calc(${V3_Spacing[\"spacing-20\"]} + ${props.$insetTop || 0}px)`};\n        right: ${\n            (props) =>\n                css`calc(2.5rem + ${V3_Spacing[\"spacing-20\"]} + ${\n                    V3_Spacing[\"spacing-16\"]\n                } + ${props.$insetRight || 0}px)` // close button + space from screen + gap between buttons\n        };\n    }\n`;\n\nexport const ArrowButton = styled(IconButton)<ArrowButtonStyleProps>`\n    z-index: 4;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n\n    ${(props) =>\n        props.$position === \"left\" &&\n        css`\n            left: calc(\n                ${V3_Spacing[\"spacing-48\"]} + ${props.$insetLeft || 0}px\n            );\n            ${V3_MediaQuery.MaxWidth.sm} {\n                left: calc(\n                    ${V3_Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                );\n            }\n        `}\n\n    ${(props) =>\n        props.$position === \"right\" &&\n        css`\n            right: calc(\n                ${V3_Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px\n            );\n            ${V3_MediaQuery.MaxWidth.sm} {\n                right: calc(\n                    ${V3_Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                );\n            }\n        `}\n`;\n\nexport const ImageGalleryContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const ImageGalleryWrapper = styled.div`\n    user-select: none;\n    position: relative;\n    display: block;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const ImageGallerySwipe = styled.div`\n    display: block;\n    user-select: none;\n    height: 100%;\n    overflow: hidden;\n    touch-action: pan-y;\n`;\n\nexport const ImageGallerySlides = styled.div`\n    display: flex;\n    transition: all 450ms ease-out 0s;\n    position: relative;\n    text-align: center;\n    user-select: none;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const ImageGallerySlide = styled.div`\n    flex: 0 0 100%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    .react-transform-wrapper {\n        height: 100%;\n        width: 100%;\n    }\n    .react-transform-component {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const SlideImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n    border-radius: ${V3_Radius[\"none\"]};\n`;\n\nexport const SlidePlaceholderImage = styled(ImagePlaceholder)`\n    width: 60vw;\n    height: auto;\n    max-height: 100%;\n    border-radius: ${V3_Radius[\"none\"]};\n    aspect-ratio: 4 / 3;\n`;\n\nexport const BoxChip = styled.div`\n    display: flex;\n    justify-content: center;\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin-left: auto;\n    margin-right: auto;\n    z-index: 3;\n`;\n\nexport const Chip = styled(Typography.BodyXS)`\n    display: inline-flex;\n    padding: ${V3_Spacing[\"spacing-4\"]} ${V3_Spacing[\"spacing-16\"]};\n    justify-content: center;\n    align-items: center;\n    border-radius: ${V3_Radius[\"full\"]};\n    background-color: ${V3_Colour[\"bg\"]};\n    text-align: center;\n`;\n\n// -----------------------------------------------------------------------------\n// THUMBNAIL STYLING\n// -----------------------------------------------------------------------------\n\nexport const ThumbnailContainer = styled.div<InsetStyleProps>`\n    flex-shrink: 0;\n    display: flex;\n    overflow: auto;\n    background-color: ${V3_Colour[\"bg-inverse\"]};\n    padding: ${(props) =>\n            css`\n                ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\n                    \"spacing-16\"\n                ]} calc(${V3_Spacing[\"spacing-24\"]} + ${props.$insetBottom ||\n                0}px);\n            `}\n        ${V3_MediaQuery.MaxWidth.sm} {\n        padding: ${(props) =>\n            css`\n                ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\n                    \"spacing-20\"\n                ]} calc(${V3_Spacing[\"spacing-16\"]} + ${props.$insetBottom ||\n                0}px);\n            `};\n    }\n`;\n\nexport const ThumbnailWrapper = styled.div`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-16\"]};\n    justify-content: center;\n    margin-left: auto;\n    margin-right: auto;\n`;\n\nexport const ThumbnailItemContainer = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100px;\n    width: 100px;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        height: 64px;\n        width: 64px;\n    }\n`;\n\nexport const ThumbnailItem = styled.div<ThumbnailItemStyleProps>`\n    cursor: pointer;\n    background-color: ${V3_Colour[\"bg-inverse\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n    border: ${V3_Border[\"solid\"]} transparent;\n    box-sizing: content-box;\n\n    flex-shrink: 0;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 92px;\n    width: 92px;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        height: 60px;\n        width: 60px;\n    }\n\n    ${(props) =>\n        props.$active\n            ? css`\n                  border-width: ${V3_Border[\"width-040\"]};\n                  border-color: ${V3_Colour[\"border-selected\"]};\n\n                  ${V3_MediaQuery.MaxWidth.sm} {\n                      border-width: ${V3_Border[\"width-020\"]};\n                  }\n\n                  &:hover {\n                      border-color: ${V3_Colour[\"border-selected-hover\"]};\n                  }\n              `\n            : css`\n                  border-width: ${V3_Border[\"width-010\"]};\n\n                  &:hover {\n                      border-color: ${V3_Colour[\"border-hover\"]};\n                  }\n              `};\n`;\n\nexport const ThumbnailImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n`;\n"],"names":["IconButton","styled","ClickableIcon","V3_Colour","V3_Shadow","CloseButton","props","css","V3_Spacing","$insetTop","$insetRight","V3_MediaQuery","MaxWidth","sm","MagnifierButton","ArrowButton","$position","$insetLeft","ImageGalleryContainer","div","ImageGalleryWrapper","ImageGallerySwipe","ImageGallerySlides","ImageGallerySlide","SlideImage","StatefulImage","V3_Radius","SlidePlaceholderImage","ImagePlaceholder","BoxChip","Chip","Typography","BodyXS","ThumbnailContainer","$insetBottom","ThumbnailWrapper","ThumbnailItemContainer","ThumbnailItem","V3_Border","$active","ThumbnailImage"],"mappings":"mbA8BA,MAAMA,EAAaC,EAAOC,EAAc;;;kBAGtBC,EAAc;aACnBA,EAAU;;;kBAGLC,EAAU;;;;;;EAQfC,EAAcJ,EAAOD,EAA4B;;WAElDM,GACJC,CAAG,QAAQC,EAAW,mBAAmBF,EAAMG,WAAa;aACtDH,GACNC,CAAG,QAAQC,EAAW,mBAAmBF,EAAMI,aAAe;;;MAGhEC,EAAcC,SAASC;eACbP,GACJC,CAAG,QAAQC,EAAW,mBAAmBF,EAAMG,WAAa;iBACtDH,GACNC,CAAG,QAAQC,EAAW,mBAClBF,EAAMI,aAAe;;EAKxBI,EAAkBb,EAAOD,EAA4B;;WAEtDM,GACJC,CAAG,QAAQC,EAAW,mBAAmBF,EAAMG,WAAa;aAE3DH,GACGC,CAAG,iBAAiBC,EAAW,mBAC3BA,EAAW,mBACTF,EAAMI,aAAe;;;;MAKjCC,EAAcC,SAASC;eACbP,GACJC,CAAG,QAAQC,EAAW,mBAAmBF,EAAMG,WAAa;iBAE3DH,GACGC,CAAG,iBAAiBC,EAAW,mBAC3BA,EAAW,mBACTF,EAAMI,aAAe;;EAK9BK,EAAcd,EAAOD,EAAkC;;;;;;MAM7DM,GACqB,SAApBA,EAAMU,WACNT,CAAG;;kBAEOC,EAAW,mBAAmBF,EAAMW,YAAc;;cAEtDN,EAAcC,SAASC;;sBAEfL,EAAW,mBAAmBF,EAAMW,YAAc;;;;;MAKjEX,GACqB,UAApBA,EAAMU,WACNT,CAAG;;kBAEOC,EAAW,mBAAmBF,EAAMI,aAAe;;cAEvDC,EAAcC,SAASC;;sBAEfL,EAAW,mBAAmBF,EAAMI,aAAe;;;;EAM5DQ,EAAwBjB,EAAOkB,GAAG;;;;;EAOlCC,EAAsBnB,EAAOkB,GAAG;;;;;;;EAShCE,EAAoBpB,EAAOkB,GAAG;;;;;;EAQ9BG,EAAqBrB,EAAOkB,GAAG;;;;;;;;EAU/BI,EAAoBtB,EAAOkB,GAAG;;;;;;;;;;;;;;EAgB9BK,EAAavB,EAAOwB,EAAc;;;qBAG1BC,EAAgB;EAGxBC,EAAwB1B,EAAO2B,EAAiB;;;;qBAIxCF,EAAgB;;EAIxBG,EAAU5B,EAAOkB,GAAG;;;eAGlBX,EAAW;;;;;;;;EAUbsB,EAAO7B,EAAO8B,EAAWC,OAAO;;eAE9BxB,EAAW,gBAAgBA,EAAW;;;qBAGhCkB,EAAgB;wBACbvB,EAAc;;EAQzB8B,EAAqBhC,EAAOkB,GAAoB;;;;wBAIrChB,EAAU;eAClBG,GACJC,CAAG;kBACGC,EAAW,iBAAiBA,EAC1B,sBACMA,EAAW,mBAAmBF,EAAM4B,cAC9C;;UAENvB,EAAcC,SAASC;mBACbP,GACRC,CAAG;kBACGC,EAAW,iBAAiBA,EAC1B,sBACMA,EAAW,mBAAmBF,EAAM4B,cAC9C;;;EAKHC,EAAmBlC,EAAOkB,GAAG;;;;WAI/BX,EAAW;;;;EAMT4B,EAAyBnC,EAAOkB,GAAG;;;;;;;MAO1CR,EAAcC,SAASC;;;;EAMhBwB,EAAgBpC,EAAOkB,GAA4B;;wBAExChB,EAAU;qBACbuB,EAAc;cACrBY,EAAiB;;;;;;;;;;;MAWzB3B,EAAcC,SAASC;;;;;MAKtBP,GACCA,EAAMiC,QACAhC,CAAG;kCACiB+B,EAAU;kCACVnC,EAAU;;oBAExBQ,EAAcC,SAASC;sCACLyB,EAAU;;;;sCAIVnC,EAAU;;gBAGlCI,CAAG;kCACiB+B,EAAU;;;sCAGNnC,EAAU;;;EAKnCqC,EAAiBvC,EAAOwB,EAAc;;;"}
+{"version":3,"file":"fullscreen-image-carousel.style.js","sources":["../../src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport type { InsetStyleProps } from \"../shared/types\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../v3_theme\";\nimport { StatefulImage } from \"./stateful-image\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface ArrowButtonStyleProps extends InsetStyleProps {\n    $position: \"left\" | \"right\";\n}\n\ninterface ThumbnailItemStyleProps {\n    $active?: boolean;\n}\n\ninterface TopActionButtonsStyleProps extends InsetStyleProps {\n    $hasFileInfo?: boolean | undefined;\n}\n\ninterface FileInfoTextWrapperStyleProps {\n    $centerContent?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst IconButton = styled(ClickableIcon)`\n    padding: 0;\n    border-radius: 100%;\n    background: ${V3_Colour[\"bg\"]};\n    color: ${V3_Colour[\"icon-primary\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    box-shadow: ${V3_Shadow[\"md-strong\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${V3_Border[\"width-020\"]} solid ${V3_Colour[\"border-selected\"]};\n        outline-offset: 2px;\n    }\n`;\n\nexport const TopActionButtons = styled.div<TopActionButtonsStyleProps>`\n    order: -1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: ${V3_Spacing[\"spacing-16\"]};\n\n    ${(props) =>\n        props.$hasFileInfo\n            ? css`\n                  flex-shrink: 0;\n                  background-color: ${V3_Colour[\"bg-inverse\"]};\n                  padding-top: calc(\n                      ${V3_Spacing[\"spacing-24\"]} + ${props.$insetTop || 0}px\n                  );\n                  padding-bottom: ${V3_Spacing[\"spacing-24\"]};\n                  padding-left: calc(\n                      ${V3_Spacing[\"spacing-32\"]} + ${props.$insetLeft || 0}px\n                  );\n                  padding-right: calc(\n                      ${V3_Spacing[\"spacing-32\"]} + ${props.$insetRight || 0}px\n                  );\n\n                  ${V3_MediaQuery.MaxWidth.sm} {\n                      padding-top: calc(\n                          ${V3_Spacing[\"spacing-16\"]} + ${props.$insetTop || 0}px\n                      );\n                      padding-bottom: ${V3_Spacing[\"spacing-16\"]};\n                      padding-left: calc(\n                          ${V3_Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                      );\n                      padding-right: calc(\n                          ${V3_Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `\n            : css`\n                  position: absolute;\n                  top: calc(\n                      ${V3_Spacing[\"spacing-48\"]} + ${props.$insetTop || 0}px\n                  );\n                  right: calc(\n                      ${V3_Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px\n                  );\n                  z-index: 5;\n\n                  ${V3_MediaQuery.MaxWidth.sm} {\n                      top: calc(\n                          ${V3_Spacing[\"spacing-20\"]} + ${props.$insetTop || 0}px\n                      );\n                      right: calc(\n                          ${V3_Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `}\n`;\n\nexport const CloseButton = styled(IconButton)``;\n\nexport const DeleteButton = styled(IconButton)`\n    color: ${V3_Colour[\"icon-error\"]};\n`;\n\nexport const MagnifierButton = styled(IconButton)``;\n\nexport const ArrowButton = styled(IconButton)<ArrowButtonStyleProps>`\n    z-index: 4;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n\n    ${(props) =>\n        props.$position === \"left\" &&\n        css`\n            left: calc(\n                ${V3_Spacing[\"spacing-48\"]} + ${props.$insetLeft || 0}px\n            );\n\n            ${V3_MediaQuery.MaxWidth.sm} {\n                left: calc(\n                    ${V3_Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                );\n            }\n        `}\n\n    ${(props) =>\n        props.$position === \"right\" &&\n        css`\n            right: calc(\n                ${V3_Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px\n            );\n\n            ${V3_MediaQuery.MaxWidth.sm} {\n                right: calc(\n                    ${V3_Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                );\n            }\n        `}\n`;\n\nexport const CarouselModalContent = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100dvh;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const ImageGalleryContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGalleryWrapper = styled.div`\n    user-select: none;\n    position: relative;\n    display: block;\n    overflow: hidden;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGallerySwipe = styled.div`\n    display: block;\n    user-select: none;\n    height: 100%;\n    overflow: hidden;\n    touch-action: pan-y;\n`;\n\nexport const ImageGallerySlides = styled.div`\n    display: flex;\n    transition: all 450ms ease-out 0s;\n    position: relative;\n    text-align: center;\n    user-select: none;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const ImageGallerySlide = styled.div`\n    flex: 0 0 100%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    .react-transform-wrapper {\n        height: 100%;\n        width: 100%;\n    }\n\n    .react-transform-component {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const FocusableImageRegion = styled.div`\n    height: 100%;\n    width: 100%;\n    outline: none;\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${V3_Border[\"width-020\"]} solid ${V3_Colour[\"border-selected\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const SlideImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n    border-radius: ${V3_Radius[\"none\"]};\n`;\n\nexport const SlidePlaceholderImage = styled(ImagePlaceholder)`\n    width: 60vw;\n    height: auto;\n    max-height: 100%;\n    border-radius: ${V3_Radius[\"none\"]};\n    aspect-ratio: 4 / 3;\n`;\n\nexport const BoxChip = styled.div`\n    display: flex;\n    justify-content: center;\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin-left: auto;\n    margin-right: auto;\n    z-index: 3;\n`;\n\nexport const Chip = styled(Typography.BodyXS)`\n    display: inline-flex;\n    padding: ${V3_Spacing[\"spacing-4\"]} ${V3_Spacing[\"spacing-16\"]};\n    justify-content: center;\n    align-items: center;\n    border-radius: ${V3_Radius[\"full\"]};\n    background-color: ${V3_Colour[\"bg\"]};\n    text-align: center;\n`;\n\n// -----------------------------------------------------------------------------\n// THUMBNAIL STYLING\n// -----------------------------------------------------------------------------\n\nexport const ThumbnailContainer = styled.div<InsetStyleProps>`\n    flex-shrink: 0;\n    display: flex;\n    overflow: auto;\n    background-color: ${V3_Colour[\"bg-inverse\"]};\n    padding: ${(props) =>\n            css`\n                ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\n                    \"spacing-16\"\n                ]} calc(${V3_Spacing[\"spacing-24\"]} + ${props.$insetBottom ||\n                0}px);\n            `}\n        ${V3_MediaQuery.MaxWidth.sm} {\n        padding: ${(props) =>\n            css`\n                ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\n                    \"spacing-20\"\n                ]} calc(${V3_Spacing[\"spacing-16\"]} + ${props.$insetBottom ||\n                0}px);\n            `};\n    }\n`;\n\nexport const ThumbnailWrapper = styled.div`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-16\"]};\n    justify-content: center;\n    margin-left: auto;\n    margin-right: auto;\n`;\n\nexport const ThumbnailItemContainer = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100px;\n    width: 100px;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        height: 64px;\n        width: 64px;\n    }\n`;\n\nexport const ThumbnailItem = styled.div<ThumbnailItemStyleProps>`\n    cursor: pointer;\n    background-color: ${V3_Colour[\"bg-inverse\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n    border: ${V3_Border[\"solid\"]} transparent;\n    box-sizing: content-box;\n\n    flex-shrink: 0;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 92px;\n    width: 92px;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        height: 60px;\n        width: 60px;\n    }\n\n    ${(props) =>\n        props.$active\n            ? css`\n                  border-width: ${V3_Border[\"width-040\"]};\n                  border-color: ${V3_Colour[\"border-selected\"]};\n\n                  ${V3_MediaQuery.MaxWidth.sm} {\n                      border-width: ${V3_Border[\"width-020\"]};\n                  }\n\n                  &:hover {\n                      border-color: ${V3_Colour[\"border-selected-hover\"]};\n                  }\n              `\n            : css`\n                  border-width: ${V3_Border[\"width-010\"]};\n\n                  &:hover {\n                      border-color: ${V3_Colour[\"border-hover\"]};\n                  }\n              `};\n`;\n\nexport const ThumbnailImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n`;\n\n// -----------------------------------------------------------------------------\n// FILE INFO BAR STYLING\n// -----------------------------------------------------------------------------\n\nexport const FileInfoTextWrapper = styled.div<FileInfoTextWrapperStyleProps>`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n    overflow: hidden;\n    min-width: 0;\n    min-height: calc(\n        ${V3_Font.Spec[\"body-lh-baseline\"]} + ${V3_Spacing[\"spacing-8\"]} +\n            ${V3_Font.Spec[\"body-lh-md\"]}\n    );\n    ${(props) =>\n        props.$centerContent &&\n        css`\n            justify-content: center;\n        `}\n`;\n\nexport const FileInfoFileName = styled(Typography.BodyBL)`\n    color: ${V3_Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n\nexport const FileInfoFileSize = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n"],"names":["IconButton","styled","ClickableIcon","V3_Colour","V3_Shadow","V3_Border","TopActionButtons","div","V3_Spacing","props","$hasFileInfo","css","$insetTop","$insetLeft","$insetRight","V3_MediaQuery","MaxWidth","sm","CloseButton","DeleteButton","MagnifierButton","ArrowButton","$position","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","ImageGallerySlides","ImageGallerySlide","FocusableImageRegion","SlideImage","StatefulImage","V3_Radius","SlidePlaceholderImage","ImagePlaceholder","BoxChip","Chip","Typography","BodyXS","ThumbnailContainer","$insetBottom","ThumbnailWrapper","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","FileInfoTextWrapper","V3_Font","Spec","$centerContent","FileInfoFileName","BodyBL","FileInfoFileSize","BodyMD"],"mappings":"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"}

package/fullscreen-image-carousel/index.js

@@ -1,2 +1,2 @@
-export{FullscreenImageCarousel}from"./fullscreen-image-carousel.js";
+export{Component,FullscreenImageCarousel}from"./fullscreen-image-carousel.js";
 //# sourceMappingURL=index.js.map

package/fullscreen-image-carousel/stateful-image.js

@@ -1,2 +1,2 @@
-import{jsx as i}from"react/jsx-runtime";import{useState as o,useEffect as t}from"react";import{LoadingDots as n}from"../animations/loading-dots/loading-dots.js";import"../animations/loading-dots-spinner/loading-dots-spinner.js";import"../animations/loading-spinner/loading-spinner.js";import"styled-components";import{ImageWrapper as s,DefaultPlaceholder as r,ImageBox as e}from"./stateful-image.style.js";const a=({src:a,className:m,alt:l,fit:d,placeholder:c,retrieveImageDimension:p,setDimension:g})=>{const[h,f]=o(!0),[j,u]=o();t((()=>{f(!0),u(void 0);const i=new Image;i.src=a,i.onload=()=>{p&&g&&g({src:a,width:i.width,height:i.height}),f(!1)},i.onerror=i=>{f(!1),u(i)}}),[a]);return i(s,{className:m,children:j?null!=c?c:i(r,{}):h?i(n,{}):i(e,{src:a,alt:l,$fit:d})})};export{a as StatefulImage};
+import{jsx as i}from"react/jsx-runtime";import{useState as t,useEffect as o}from"react";import{LoadingDots as e}from"../animations/loading-dots/loading-dots.js";import"../animations/loading-dots-spinner/loading-dots-spinner.js";import"../animations/loading-spinner/loading-spinner.js";import"../theme/theme-provider/context.js";import{ImageWrapper as n,DefaultPlaceholder as r,ImageBox as s}from"./stateful-image.style.js";const a=({src:a,className:m,alt:l,fit:d,placeholder:c,retrieveImageDimension:p,setDimension:g})=>{const[h,f]=t(!0),[j,u]=t();o((()=>{f(!0),u(void 0);const i=new Image;i.src=a,i.onload=()=>{p&&g&&g({src:a,width:i.width,height:i.height}),f(!1)},i.onerror=i=>{f(!1),u(i)}}),[a]);return i(n,{className:m,children:j?null!=c?c:i(r,{}):h?i(e,{}):i(s,{src:a,alt:l,$fit:d})})};export{a as StatefulImage};
 //# sourceMappingURL=stateful-image.js.map

package/fullscreen-image-carousel/stateful-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"stateful-image.js","sources":["../../src/fullscreen-image-carousel/stateful-image.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { LoadingDots } from \"../animations\";\nimport {\n    DefaultPlaceholder,\n    ImageBox,\n    ImageWrapper,\n} from \"./stateful-image.style\";\n\nexport interface StatefulImageProps {\n    src: string;\n    className?: string | undefined;\n    alt?: string | undefined;\n    fit?: React.CSSProperties[\"objectFit\"] | undefined;\n    placeholder?: React.ReactNode | undefined;\n    retrieveImageDimension?: boolean;\n    setDimension?: ({\n        src,\n        width,\n        height,\n    }: {\n        src: string;\n        width: number;\n        height: number;\n    }) => void;\n}\n\nexport const StatefulImage = ({\n    src,\n    className,\n    alt,\n    fit,\n    placeholder,\n    retrieveImageDimension,\n    setDimension,\n}: StatefulImageProps) => {\n    const [loading, setLoading] = useState(true);\n    const [error, setError] = useState<Event | string>();\n\n    useEffect(() => {\n        setLoading(true);\n        setError(undefined);\n\n        const img = new Image();\n        img.src = src;\n        img.onload = () => {\n            if (!!retrieveImageDimension && setDimension) {\n                setDimension({\n                    src,\n                    width: img.width,\n                    height: img.height,\n                });\n            }\n\n            setLoading(false);\n        };\n        img.onerror = (e: Event | string) => {\n            setLoading(false);\n            setError(e);\n        };\n    }, [src]);\n\n    const renderContent = () => {\n        if (error) {\n            return placeholder ?? <DefaultPlaceholder />;\n        }\n\n        if (loading) {\n            return <LoadingDots />;\n        }\n\n        return <ImageBox src={src} alt={alt} $fit={fit} />;\n    };\n\n    return <ImageWrapper className={className}>{renderContent()}</ImageWrapper>;\n};\n"],"names":["StatefulImage","src","className","alt","fit","placeholder","retrieveImageDimension","setDimension","loading","setLoading","useState","error","setError","useEffect","undefined","img","Image","onload","width","height","onerror","e","_jsx","ImageWrapper","children","DefaultPlaceholder","LoadingDots","ImageBox","$fit"],"mappings":"4ZA4BaA,EAAgB,EACzBC,MACAC,YACAC,MACAC,MACAC,cACAC,yBACAC,mBAEA,MAAOC,EAASC,GAAcC,GAAS,IAChCC,EAAOC,GAAYF,IAE1BG,GAAU,KACNJ,GAAW,GACXG,OAASE,GAET,MAAMC,EAAM,IAAIC,MAChBD,EAAId,IAAMA,EACVc,EAAIE,OAAS,KACHX,GAA0BC,GAC5BA,EAAa,CACTN,MACAiB,MAAOH,EAAIG,MACXC,OAAQJ,EAAII,SAIpBV,GAAW,EAAM,EAErBM,EAAIK,QAAWC,IACXZ,GAAW,GACXG,EAASS,EAAE,CACd,GACF,CAACpB,IAcJ,OAAOqB,EAACC,EAAY,CAACrB,UAAWA,EAASsB,SAXjCb,EACON,QAAAA,EAAeiB,EAACG,EAAkB,IAGzCjB,EACOc,EAACI,EAAW,IAGhBJ,EAACK,EAAQ,CAAC1B,IAAKA,EAAKE,IAAKA,EAAGyB,KAAQxB,KAG4B"}
+{"version":3,"file":"stateful-image.js","sources":["../../src/fullscreen-image-carousel/stateful-image.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { LoadingDots } from \"../animations\";\nimport {\n    DefaultPlaceholder,\n    ImageBox,\n    ImageWrapper,\n} from \"./stateful-image.style\";\n\nexport interface StatefulImageProps {\n    src: string;\n    className?: string | undefined;\n    alt?: string | undefined;\n    fit?: React.CSSProperties[\"objectFit\"] | undefined;\n    placeholder?: React.ReactNode | undefined;\n    retrieveImageDimension?: boolean;\n    setDimension?: ({\n        src,\n        width,\n        height,\n    }: {\n        src: string;\n        width: number;\n        height: number;\n    }) => void;\n}\n\nexport const StatefulImage = ({\n    src,\n    className,\n    alt,\n    fit,\n    placeholder,\n    retrieveImageDimension,\n    setDimension,\n}: StatefulImageProps) => {\n    const [loading, setLoading] = useState(true);\n    const [error, setError] = useState<Event | string>();\n\n    useEffect(() => {\n        setLoading(true);\n        setError(undefined);\n\n        const img = new Image();\n        img.src = src;\n        img.onload = () => {\n            if (!!retrieveImageDimension && setDimension) {\n                setDimension({\n                    src,\n                    width: img.width,\n                    height: img.height,\n                });\n            }\n\n            setLoading(false);\n        };\n        img.onerror = (e: Event | string) => {\n            setLoading(false);\n            setError(e);\n        };\n    }, [src]);\n\n    const renderContent = () => {\n        if (error) {\n            return placeholder ?? <DefaultPlaceholder />;\n        }\n\n        if (loading) {\n            return <LoadingDots />;\n        }\n\n        return <ImageBox src={src} alt={alt} $fit={fit} />;\n    };\n\n    return <ImageWrapper className={className}>{renderContent()}</ImageWrapper>;\n};\n"],"names":["StatefulImage","src","className","alt","fit","placeholder","retrieveImageDimension","setDimension","loading","setLoading","useState","error","setError","useEffect","undefined","img","Image","onload","width","height","onerror","e","_jsx","ImageWrapper","children","DefaultPlaceholder","LoadingDots","ImageBox","$fit"],"mappings":"6aA4BaA,EAAgB,EACzBC,MACAC,YACAC,MACAC,MACAC,cACAC,yBACAC,mBAEA,MAAOC,EAASC,GAAcC,GAAS,IAChCC,EAAOC,GAAYF,IAE1BG,GAAU,KACNJ,GAAW,GACXG,OAASE,GAET,MAAMC,EAAM,IAAIC,MAChBD,EAAId,IAAMA,EACVc,EAAIE,OAAS,KACHX,GAA0BC,GAC5BA,EAAa,CACTN,MACAiB,MAAOH,EAAIG,MACXC,OAAQJ,EAAII,SAIpBV,GAAW,EAAM,EAErBM,EAAIK,QAAWC,IACXZ,GAAW,GACXG,EAASS,EAAE,CACd,GACF,CAACpB,IAcJ,OAAOqB,EAACC,EAAY,CAACrB,UAAWA,EAASsB,SAXjCb,EACON,QAAAA,EAAeiB,EAACG,EAAkB,IAGzCjB,EACOc,EAACI,EAAW,IAGhBJ,EAACK,EAAQ,CAAC1B,IAAKA,EAAKE,IAAKA,EAAGyB,KAAQxB,KAG4B"}

package/fullscreen-image-carousel/stateful-image.style.d.ts

@@ -1,7 +1,7 @@
 interface ImageStyleProps {
     $fit?: React.CSSProperties["objectFit"];
 }
-export declare const ImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ImageBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, ImageStyleProps>> & string;
-export declare const DefaultPlaceholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/image-placeholder").ImagePlaceholderProps, never>> & string & Omit<(props: import("../shared/image-placeholder").ImagePlaceholderProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const ImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ImageBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "$fit"> & ImageStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "$fit"> & ImageStyleProps, never>>> & string;
+export declare const DefaultPlaceholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/image-placeholder").ImagePlaceholderProps, never> & Partial<Pick<import("../shared/image-placeholder").ImagePlaceholderProps, never>>> & string & Omit<({ className }: import("../shared/image-placeholder").ImagePlaceholderProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export {};

package/fullscreen-image-carousel/types.d.ts

@@ -7,22 +7,42 @@ export interface FullscreenImageCarouselRef {
     goToNextItem: () => void;
 }
 export interface FullscreenImageCarouselProps extends Pick<ModalProps, "show" | "rootComponentId" | "animationFrom" | "zIndex"> {
-    items: FullscreenCarouselItemProps[];
+    items: FullscreenImageCarouselItemProps[];
     /** The index of the visible item, starts from 0 */
     initialActiveItemIndex?: number | undefined;
     hideThumbnail?: boolean | undefined;
     hideNavigation?: boolean | undefined;
     hideCounter?: boolean | undefined;
     hideMagnifier?: boolean | undefined;
+    onDelete?: ((item: FullscreenImageCarouselItemProps, index: number) => void) | undefined;
     onClose?: (() => void) | undefined;
     insets?: Insets | undefined;
 }
-export interface FullscreenCarouselItemProps {
+interface FullscreenImageCarouselBaseItemProps {
+    fileName?: string | undefined;
+    fileSize?: string | undefined;
+}
+export interface FullscreenImageCarouselImageItemProps extends FullscreenImageCarouselBaseItemProps {
+    type?: "image" | undefined;
     src: string;
     alt?: string | undefined;
     thumbnailSrc?: string | undefined;
+    renderContent?: never;
+}
+/** @deprecated Use FullscreenImageCarouselImageItemProps instead */
+export type FullscreenCarouselItemProps = FullscreenImageCarouselImageItemProps;
+export interface FullscreenImageCarouselCustomItemProps extends FullscreenImageCarouselBaseItemProps {
+    type: "custom";
+    /** The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip. */
+    thumbnailSrc?: string | undefined;
+    /** Label for this item used in aria-labels (e.g. "PDF"). Defaults to "image". When any item sets this, carousel-level aria-labels use generic "item" wording. */
+    itemLabel?: string | undefined;
+    /** Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). */
+    renderContent: () => React.ReactNode;
 }
+export type FullscreenImageCarouselItemProps = FullscreenImageCarouselImageItemProps | FullscreenImageCarouselCustomItemProps;
 export interface ImageDimension {
     width: number;
     height: number;
 }
+export {};

package/histogram-slider/histogram-slider.d.ts

@@ -1,2 +1,2 @@
 import type { HistogramSliderProps } from "./types";
-export declare const HistogramSlider: ({ bins, interval, disabled, readOnly, value, showRangeLabels, rangeLabelPrefix, rangeLabelSuffix, ariaLabels, onChange, onChangeEnd, renderEmptyView, renderRangeLabel, ...otherProps }: HistogramSliderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HistogramSlider: ({ bins, interval, disabled, readOnly, value, showRangeLabels, rangeLabelPrefix, rangeLabelSuffix, ariaLabels, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onChange, onChangeEnd, renderEmptyView, renderRangeLabel, className, ...otherProps }: HistogramSliderProps) => import("react/jsx-runtime").JSX.Element;

package/histogram-slider/histogram-slider.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as n,jsx as a,Fragment as r}from"react/jsx-runtime";import{useState as l,useMemo as i,useEffect as t}from"react";import{Typography as s}from"../typography/index.js";import{Label as o,Separator as m,Histogram as d,Bar as u,Slider as c}from"./histogram-slider.styles.js";const h=h=>{var{bins:b=[],interval:g,disabled:p,readOnly:f,value:L,showRangeLabels:y,rangeLabelPrefix:x,rangeLabelSuffix:v,ariaLabels:V,onChange:C,onChangeEnd:j,renderEmptyView:E,renderRangeLabel:O}=h,R=e(h,["bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","onChange","onChangeEnd","renderEmptyView","renderRangeLabel"]);const w=b.map((e=>e.count)),M=Math.max(...w),$=b.map((e=>e.minValue)),B=Math.max(...$),P=Math.min(...$),[S,_]=l(z()),T=i((()=>{const e=[...b].sort(((e,n)=>e.minValue-n.minValue)),n=(B-P)/g+1,a=[];for(let r=0;r<n;r++){const n=e.find((e=>e.minValue===P+g*r));n?a.push(n):a.push({count:0,minValue:P+g*r})}return a}),[b,g]);t((()=>{L!==S&&_(z())}),[L]);const k=e=>{const[n,a]=e,r=[n,a];_(r),null==C||C(r)},q=e=>{const[n,a]=e,r=[n,a];_(r),null==j||j(r)};function z(){return null!=L?L:[P,P+g]}const A=e=>O?O(e):n(s.BodyBL,{children:[x,e,v]});return n("div",Object.assign({},R,{children:[y&&n(o,{children:[A(S[0]),a(m,{children:"-"}),A(S[1])]}),T.every((e=>0===e.count))&&E?E():n(r,{children:[a(d,{children:T.map(((e,n)=>{const r=e.count/M;return a(u,{style:{height:r?`calc(calc(100% - 0.25rem) * ${r} + 0.25rem)`:0},$selected:e.minValue>=S[0]&&e.minValue<S[1],$disabled:p||f},n)}))}),a(c,{min:P,max:B+g,step:g,minRange:g,numOfThumbs:2,value:S,disabled:p,readOnly:f,ariaLabels:V,onChange:k,onChangeEnd:q})]})]}))};export{h as HistogramSlider};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as a,Fragment as i}from"react/jsx-runtime";import{clearAnnouncer as n,announce as t}from"@react-aria/live-announcer";import s from"clsx";import{useState as l,useRef as o,useMemo as m,useEffect as u}from"react";import{InputRangeSlider as c}from"../input-range-slider/input-range-slider.js";import{concatIds as d}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as p}from"../theme/utils/use-apply-styles.js";import{Typography as h}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as b}from"../util/simple-id-generator.js";import"../util/string-helper.js";import{label as f,separator as g,histogram as y,slider as j,bar as v,barSelectedDisabled as x,barDisabled as L,barSelected as V}from"./histogram-slider.styles.js";const C=s=>{var{bins:p=[],interval:v,disabled:x,readOnly:L,value:V,showRangeLabels:C,rangeLabelPrefix:E,rangeLabelSuffix:O,ariaLabels:R,"aria-labelledby":k,"aria-describedby":w,onChange:M,onChangeEnd:S,renderEmptyView:D,renderRangeLabel:T,className:$}=s,B=e(s,["bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","aria-labelledby","aria-describedby","onChange","onChangeEnd","renderEmptyView","renderRangeLabel","className"]);const P=p.map((e=>e.count)),_=Math.max(...P),q=p.map((e=>e.minValue)),z=Math.max(...q),A=Math.min(...q),[F,G]=l(X()),H=b(),I=o(null),J=`${H}-range-label`,K=d(w,C?J:void 0),Q=m((()=>{const e=[...p].sort(((e,r)=>e.minValue-r.minValue)),r=(z-A)/v+1,a=[];for(let i=0;i<r;i++){const r=e.find((e=>e.minValue===A+v*i));r?a.push(r):a.push({count:0,minValue:A+v*i})}return a}),[p,v]);u((()=>{V!==F&&G(X())}),[V]),u((()=>()=>{Y()}),[]);const U=e=>{const[r,a]=e,i=[r,a];G(i),ee(i),null==M||M(i)},W=e=>{const[r,a]=e,i=[r,a];G(i),ee(i),null==S||S(i)};function X(){return null!=V?V:[A,A+v]}function Y(){I.current&&(clearTimeout(I.current),I.current=null)}function Z(e){const r=Q.reduce(((e,r)=>e+r.count),0);if(0===r)return"0% of results available in the range you specified.";const a=Q.reduce(((r,a)=>a.minValue>=e[0]&&a.minValue<e[1]?r+a.count:r),0);return`${Math.round(a/r*100)}% of results available in the range you specified.`}function ee(e){if(x||L)return;const r=Z(e);Y(),I.current=setTimeout((()=>{n("polite"),t(r,"polite")}),500)}const re=e=>T?T(e):r(h.BodyBL,{children:[E,e,O]});return r("div",Object.assign({role:"group"},B,{className:$,children:[C&&r("div",{id:J,className:f,children:[re(F[0]),a("div",{className:g,children:"-"}),re(F[1])]}),Q.every((e=>0===e.count))&&D?D():(()=>{const e=Z(F);return r(i,{children:[a("div",{className:y,children:Q.map(((e,r)=>a(N,{item:e,maxCount:_,isSelected:e.minValue>=F[0]&&e.minValue<F[1],isDisabled:x||L},r)))}),a(c,{min:A,max:z+v,step:v,minRange:v,numOfThumbs:2,value:F,disabled:x,readOnly:L,ariaLabels:R,ariaDescriptions:[e,e],"aria-describedby":K,"aria-labelledby":k,onChange:U,onChangeEnd:W,className:j})]})})()]}))},N=({item:e,maxCount:r,isSelected:i,isDisabled:n})=>{const t=e.count/r,l=o(null);return p(l,{height:t?`calc(calc(100% - 0.25rem) * ${t} + 0.25rem)`:"0"}),a("div",{"data-testid":"histogram-bar",className:s(v,n&&i&&x,n&&L,i&&V),ref:l})};export{C as HistogramSlider};
 //# sourceMappingURL=histogram-slider.js.map

package/histogram-slider/histogram-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"histogram-slider.js","sources":["../../src/histogram-slider/histogram-slider.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\n\nimport { Typography } from \"../typography\";\nimport {\n    Bar,\n    Histogram,\n    Label,\n    Separator,\n    Slider,\n} from \"./histogram-slider.styles\";\nimport type { HistogramSliderProps } from \"./types\";\n\nexport const HistogramSlider = ({\n    bins = [],\n    interval,\n    disabled,\n    readOnly,\n    value,\n    showRangeLabels,\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    ariaLabels,\n    onChange,\n    onChangeEnd,\n    renderEmptyView,\n    renderRangeLabel,\n    ...otherProps\n}: HistogramSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const counts = bins.map((item) => item.count);\n    const maxCount = Math.max(...counts);\n\n    const values = bins.map((item) => item.minValue);\n    const maxValue = Math.max(...values);\n    const minValue = Math.min(...values);\n\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n\n    const items = useMemo(() => {\n        const sorted = [...bins].sort((a, b) => a.minValue - b.minValue);\n        const numCols = (maxValue - minValue) / interval + 1;\n\n        const items: typeof sorted = [];\n        for (let i = 0; i < numCols; i++) {\n            const bin = sorted.find(\n                (b) => b.minValue === minValue + interval * i\n            );\n            if (bin) {\n                items.push(bin);\n            } else {\n                items.push({ count: 0, minValue: minValue + interval * i });\n            }\n        }\n        return items;\n    }, [bins, interval]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        onChange?.(newSelection);\n    };\n\n    const handleChangeEnd = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        onChangeEnd?.(newSelection);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderRangeItem = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const renderHistogramSlider = () => {\n        return (\n            <>\n                <Histogram>\n                    {items.map((item, i) => {\n                        const ratio = item.count / maxCount;\n                        return (\n                            <Bar\n                                key={i}\n                                style={{\n                                    height: ratio\n                                        ? `calc(calc(100% - 0.25rem) * ${ratio} + 0.25rem)`\n                                        : 0,\n                                }}\n                                $selected={\n                                    item.minValue >= selection[0] &&\n                                    item.minValue < selection[1]\n                                }\n                                $disabled={disabled || readOnly}\n                            />\n                        );\n                    })}\n                </Histogram>\n                <Slider\n                    min={minValue}\n                    max={maxValue + interval}\n                    step={interval}\n                    minRange={interval}\n                    numOfThumbs={2}\n                    value={selection}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    ariaLabels={ariaLabels}\n                    onChange={handleChange}\n                    onChangeEnd={handleChangeEnd}\n                />\n            </>\n        );\n    };\n\n    return (\n        <div {...otherProps}>\n            {showRangeLabels && (\n                <Label>\n                    {renderRangeItem(selection[0])}\n                    <Separator>-</Separator>\n                    {renderRangeItem(selection[1])}\n                </Label>\n            )}\n            {items.every((item) => item.count === 0) && renderEmptyView\n                ? renderEmptyView()\n                : renderHistogramSlider()}\n        </div>\n    );\n};\n"],"names":["HistogramSlider","_a","bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","onChange","onChangeEnd","renderEmptyView","renderRangeLabel","otherProps","__rest","counts","map","item","count","maxCount","Math","max","values","minValue","maxValue","min","selection","setSelection","useState","initSelection","items","useMemo","sorted","sort","a","b","numCols","i","bin","find","push","useEffect","handleChange","val1","val2","newSelection","handleChangeEnd","renderRangeItem","_jsxs","Typography","BodyBL","children","Label","_jsx","Separator","every","_Fragment","Histogram","ratio","Bar","style","height","$selected","$disabled","Slider","step","minRange","numOfThumbs"],"mappings":"wUAYO,MAAMA,EAAmBC,IAAA,IAAAC,KAC5BA,EAAO,GAAEC,SACTA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,MACRA,EAAKC,gBACLA,EAAeC,iBACfA,EAAgBC,iBAChBA,EAAgBC,WAChBA,EAAUC,SACVA,EAAQC,YACRA,EAAWC,gBACXA,EAAeC,iBACfA,GAAgBb,EACbc,EAAUC,EAAAf,EAde,sLAmB5B,MAAMgB,EAASf,EAAKgB,KAAKC,GAASA,EAAKC,QACjCC,EAAWC,KAAKC,OAAON,GAEvBO,EAAStB,EAAKgB,KAAKC,GAASA,EAAKM,WACjCC,EAAWJ,KAAKC,OAAOC,GACvBC,EAAWH,KAAKK,OAAOH,IAEtBI,EAAWC,GAAgBC,EAC9BC,KAGEC,EAAQC,GAAQ,KAClB,MAAMC,EAAS,IAAIhC,GAAMiC,MAAK,CAACC,EAAGC,IAAMD,EAAEX,SAAWY,EAAEZ,WACjDa,GAAWZ,EAAWD,GAAYtB,EAAW,EAE7C6B,EAAuB,GAC7B,IAAK,IAAIO,EAAI,EAAGA,EAAID,EAASC,IAAK,CAC9B,MAAMC,EAAMN,EAAOO,MACdJ,GAAMA,EAAEZ,WAAaA,EAAWtB,EAAWoC,IAE5CC,EACAR,EAAMU,KAAKF,GAEXR,EAAMU,KAAK,CAAEtB,MAAO,EAAGK,SAAUA,EAAWtB,EAAWoC,GAE/D,CACA,OAAOP,CAAK,GACb,CAAC9B,EAAMC,IAKVwC,GAAU,KACFrC,IAAUsB,GACVC,EAAaE,IACjB,GACD,CAACzB,IAKJ,MAAMsC,EAAgBpB,IAClB,MAAOqB,EAAMC,GAAQtB,EACfuB,EAAiC,CAACF,EAAMC,GAC9CjB,EAAakB,GACbpC,SAAAA,EAAWoC,EAAa,EAGtBC,EAAmBxB,IACrB,MAAOqB,EAAMC,GAAQtB,EACfuB,EAAiC,CAACF,EAAMC,GAC9CjB,EAAakB,GACbnC,SAAAA,EAAcmC,EAAa,EAM/B,SAAShB,IACL,OAAOzB,QAAAA,EAAS,CAACmB,EAAUA,EAAWtB,EAC1C,CAKA,MAAM8C,EAAmB3C,GACjBQ,EACOA,EAAiBR,GAGxB4C,EAACC,EAAWC,OAAM,CAAAC,SAAA,CACb7C,EACAF,EACAG,KA6Cb,OACIyC,yBAASnC,EAAU,CAAAsC,SAAA,CACd9C,GACG2C,EAACI,EAAK,CAAAD,SAAA,CACDJ,EAAgBrB,EAAU,IAC3B2B,EAACC,EAAS,CAAAH,SAAA,MACTJ,EAAgBrB,EAAU,OAGlCI,EAAMyB,OAAOtC,GAAwB,IAAfA,EAAKC,SAAgBP,EACtCA,IAhDNqC,EAAAQ,EAAA,CAAAL,SAAA,CACIE,EAACI,YACI3B,EAAMd,KAAI,CAACC,EAAMoB,KACd,MAAMqB,EAAQzC,EAAKC,MAAQC,EAC3B,OACIkC,EAACM,EAAG,CAEAC,MAAO,CACHC,OAAQH,EACF,+BAA+BA,eAC/B,GACTI,UAEG7C,EAAKM,UAAYG,EAAU,IAC3BT,EAAKM,SAAWG,EAAU,GAAEqC,UAErB7D,GAAYC,GAVlBkC,EAWP,MAIdgB,EAACW,GACGvC,IAAKF,EACLF,IAAKG,EAAWvB,EAChBgE,KAAMhE,EACNiE,SAAUjE,EACVkE,YAAa,EACb/D,MAAOsB,EACPxB,SAAUA,EACVC,SAAUA,EACVK,WAAYA,EACZC,SAAUiC,EACVhC,YAAaoC,UAkBnB"}
+{"version":3,"file":"histogram-slider.js","sources":["../../src/histogram-slider/histogram-slider.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./histogram-slider.styles\";\nimport type { HistogramBinProps, HistogramSliderProps } from \"./types\";\n\nconst ANNOUNCEMENT_DEBOUNCE_MS = 500;\n\nexport const HistogramSlider = ({\n    bins = [],\n    interval,\n    disabled,\n    readOnly,\n    value,\n    showRangeLabels,\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    ariaLabels,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onChangeEnd,\n    renderEmptyView,\n    renderRangeLabel,\n    className,\n    ...otherProps\n}: HistogramSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const counts = bins.map((item) => item.count);\n    const maxCount = Math.max(...counts);\n\n    const values = bins.map((item) => item.minValue);\n    const maxValue = Math.max(...values);\n    const minValue = Math.min(...values);\n\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const internalId = useId();\n    const announcementTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n        null\n    );\n    const rangeLabelId = `${internalId}-range-label`;\n    const sliderDescribedBy = concatIds(\n        ariaDescribedBy,\n        showRangeLabels ? rangeLabelId : undefined\n    );\n\n    const items = useMemo(() => {\n        const sorted = [...bins].sort((a, b) => a.minValue - b.minValue);\n        const numCols = (maxValue - minValue) / interval + 1;\n\n        const items: typeof sorted = [];\n        for (let i = 0; i < numCols; i++) {\n            const bin = sorted.find(\n                (b) => b.minValue === minValue + interval * i\n            );\n            if (bin) {\n                items.push(bin);\n            } else {\n                items.push({ count: 0, minValue: minValue + interval * i });\n            }\n        }\n        return items;\n    }, [bins, interval]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n    }, [value]);\n\n    useEffect(() => {\n        return () => {\n            clearPendingAnnouncement();\n        };\n    }, []);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        scheduleRangePercentageAnnouncement(newSelection);\n        onChange?.(newSelection);\n    };\n\n    const handleChangeEnd = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        scheduleRangePercentageAnnouncement(newSelection);\n        onChangeEnd?.(newSelection);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    function clearPendingAnnouncement() {\n        if (announcementTimeoutRef.current) {\n            clearTimeout(announcementTimeoutRef.current);\n            announcementTimeoutRef.current = null;\n        }\n    }\n\n    function getRangePercentageDescription(currentSelection: [number, number]) {\n        const totalCount = items.reduce((sum, item) => sum + item.count, 0);\n\n        if (totalCount === 0) {\n            return \"0% of results available in the range you specified.\";\n        }\n\n        const selectedCount = items.reduce((sum, item) => {\n            const isSelected =\n                item.minValue >= currentSelection[0] &&\n                item.minValue < currentSelection[1];\n\n            return isSelected ? sum + item.count : sum;\n        }, 0);\n\n        const percentage = Math.round((selectedCount / totalCount) * 100);\n\n        return `${percentage}% of results available in the range you specified.`;\n    }\n\n    function scheduleRangePercentageAnnouncement(\n        currentSelection: [number, number]\n    ) {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        const announcement = getRangePercentageDescription(currentSelection);\n\n        clearPendingAnnouncement();\n\n        announcementTimeoutRef.current = setTimeout(() => {\n            clearAnnouncer(\"polite\");\n            announce(announcement, \"polite\");\n        }, ANNOUNCEMENT_DEBOUNCE_MS);\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderRangeItem = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const renderHistogramSlider = () => {\n        const selectionDescription = getRangePercentageDescription(selection);\n\n        return (\n            <>\n                <div className={styles.histogram}>\n                    {items.map((item, i) => (\n                        <HistogramBar\n                            key={i}\n                            item={item}\n                            maxCount={maxCount}\n                            isSelected={\n                                item.minValue >= selection[0] &&\n                                item.minValue < selection[1]\n                            }\n                            isDisabled={disabled || readOnly}\n                        />\n                    ))}\n                </div>\n                <InputRangeSlider\n                    min={minValue}\n                    max={maxValue + interval}\n                    step={interval}\n                    minRange={interval}\n                    numOfThumbs={2}\n                    value={selection}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    ariaLabels={ariaLabels}\n                    ariaDescriptions={[\n                        selectionDescription,\n                        selectionDescription,\n                    ]}\n                    aria-describedby={sliderDescribedBy}\n                    aria-labelledby={ariaLabelledBy}\n                    onChange={handleChange}\n                    onChangeEnd={handleChangeEnd}\n                    className={styles.slider}\n                />\n            </>\n        );\n    };\n\n    return (\n        <div role=\"group\" {...otherProps} className={className}>\n            {showRangeLabels && (\n                <div id={rangeLabelId} className={styles.label}>\n                    {renderRangeItem(selection[0])}\n                    <div className={styles.separator}>-</div>\n                    {renderRangeItem(selection[1])}\n                </div>\n            )}\n            {items.every((item) => item.count === 0) && renderEmptyView\n                ? renderEmptyView()\n                : renderHistogramSlider()}\n        </div>\n    );\n};\n\n// =============================================================================\n// SUB COMPONENT\n// =============================================================================\ninterface HistogramBarProps {\n    item: HistogramBinProps;\n    maxCount: number;\n    isSelected: boolean;\n    isDisabled: boolean | undefined;\n}\n\nconst HistogramBar = ({\n    item,\n    maxCount,\n    isSelected,\n    isDisabled,\n}: HistogramBarProps) => {\n    const ratio = item.count / maxCount;\n    const barRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(barRef, {\n        height: ratio ? `calc(calc(100% - 0.25rem) * ${ratio} + 0.25rem)` : \"0\",\n    });\n\n    return (\n        <div\n            data-testid=\"histogram-bar\"\n            className={clsx(\n                styles.bar,\n                isDisabled && isSelected && styles.barSelectedDisabled,\n                isDisabled && styles.barDisabled,\n                isSelected && styles.barSelected\n            )}\n            ref={barRef}\n        />\n    );\n};\n"],"names":["HistogramSlider","_a","bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","ariaLabelledBy","ariaDescribedBy","onChange","onChangeEnd","renderEmptyView","renderRangeLabel","className","otherProps","__rest","counts","map","item","count","maxCount","Math","max","values","minValue","maxValue","min","selection","setSelection","useState","initSelection","internalId","useId","announcementTimeoutRef","useRef","rangeLabelId","sliderDescribedBy","concatIds","undefined","items","useMemo","sorted","sort","a","b","numCols","i","bin","find","push","useEffect","clearPendingAnnouncement","handleChange","val1","val2","newSelection","scheduleRangePercentageAnnouncement","handleChangeEnd","current","clearTimeout","getRangePercentageDescription","currentSelection","totalCount","reduce","sum","selectedCount","round","announcement","setTimeout","clearAnnouncer","announce","renderRangeItem","_jsxs","Typography","BodyBL","children","Object","assign","role","id","styles.label","_jsx","styles.separator","every","selectionDescription","_Fragment","styles.histogram","HistogramBar","isSelected","isDisabled","InputRangeSlider","step","minRange","numOfThumbs","ariaDescriptions","styles.slider","renderHistogramSlider","ratio","barRef","useApplyStyle","height","clsx","styles.bar","styles.barSelectedDisabled","styles.barDisabled","styles.barSelected","ref"],"mappings":"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"}