@lifesg/react-design-system 3.5.0-canary.2 → 3.5.0-canary.4

package/cjs/file-upload/file-list-item/file-list-item.styles.js

@@ -131,6 +131,7 @@
     margin-top: ${r.Spacing["spacing-16"]};
 `,y=s.default(x)`
     margin-top: ${r.Spacing["spacing-4"]};
+    overflow-wrap: anywhere;
 `,b=s.default(o.ExclamationCircleFillIcon)`
     height: 1lh;
     width: 1em;
@@ -138,7 +139,7 @@
     color: ${r.Colour["icon-error-strong"]};
 `,S=s.default(n.Typography.BodySM)`
     color: ${r.Colour["text-error"]};
-`,M=s.default(S)`
+`,w=s.default(S)`
     margin-top: ${r.Spacing["spacing-4"]};
     display: flex;
     gap: ${r.Spacing["spacing-4"]};
@@ -147,7 +148,7 @@
         display: none;
         visibility: hidden;
     }
-`,w=s.default(S)`
+`,M=s.default(S)`
     display: none;
     visibility: hidden;
 
@@ -190,5 +191,5 @@
     &:not(:last-child) {
         margin-right: ${r.Spacing["spacing-8"]};
     }
-`;exports.ActionContainer=v,exports.BaseErrorMessage=S,exports.Box=c,exports.ContentSection=p,exports.DescriptionFileSizeText=m,exports.DesktopErrorMessage=M,exports.DragHandleIcon=d,exports.ErrorIcon=b,exports.ExtendedNameSection=u,exports.FileSizeSection=$,exports.FileSizeText=f,exports.IconButton=C,exports.Item=l,exports.ItemDescriptionLabel=h,exports.ItemDescriptionText=y,exports.ItemText=x,exports.MobileErrorMessage=w,exports.NameSection=g;
+`;exports.ActionContainer=v,exports.BaseErrorMessage=S,exports.Box=c,exports.ContentSection=p,exports.DescriptionFileSizeText=m,exports.DesktopErrorMessage=w,exports.DragHandleIcon=d,exports.ErrorIcon=b,exports.ExtendedNameSection=u,exports.FileSizeSection=$,exports.FileSizeText=f,exports.IconButton=C,exports.Item=l,exports.ItemDescriptionLabel=h,exports.ItemDescriptionText=y,exports.ItemText=x,exports.MobileErrorMessage=M,exports.NameSection=g;
 //# sourceMappingURL=file-list-item.styles.js.map

package/cjs/file-upload/file-list-item/file-list-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-item.styles.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\nimport { Typography } from \"../../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\ninterface ItemStyleProps {\n    $sortable: boolean;\n    $disabled?: boolean | undefined;\n    $focusType: ItemFocusType;\n}\n\ninterface DragHandleIconStyleProps {\n    $disabled?: boolean | undefined;\n    $active?: boolean | undefined;\n}\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n    $disabled?: boolean | undefined;\n    $focused?: boolean | undefined;\n    $loading?: boolean | undefined;\n    $editable?: boolean | undefined;\n    $hasDescription?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\ninterface ActionContainerStyleProps {\n    $editable?: boolean | undefined;\n    $error?: boolean | undefined;\n    $loading?: boolean | undefined;\n    $hasDescription?: boolean | undefined;\n}\n\ninterface FileSizeSectionStyleProps {\n    $hideInMobile?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$disabled && props.$focusType === \"none\") {\n            // Show disabled cursor only if no dragging is happening\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$sortable && props.$focusType === \"self\") {\n            return css`\n                cursor: grabbing;\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        } else if (props.$sortable) {\n            return css`\n                &:hover {\n                    cursor: grab;\n                }\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        }\n    }}\n`;\n\nexport const DragHandleIcon = styled(\n    DSDragHandleIcon\n)<DragHandleIconStyleProps>`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${Colour[\"icon\"]};\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                color: ${Colour[\"icon-primary\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"icon-disabled\"]};\n            `;\n        }\n    }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$focused) {\n            return css`\n                border-color: ${Colour[\"border-focus\"]};\n                box-shadow: ${Shadow[\"xs-focus-strong\"]};\n            `;\n        } else if (props.$disabled) {\n            return css`\n                border-color: ${Colour[\"border-disabled\"]};\n            `;\n        } else if (props.$error) {\n            return css`\n                background: ${Colour[\"bg-error\"]};\n                border-color: ${Colour[\"border-error\"]};\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (!props.$error && (props.$loading || props.$editable)) {\n            return css`\n                ${MediaQuery.MaxWidth.md} {\n                    flex-direction: column;\n                    align-items: flex-start;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${MediaQuery.MaxWidth.md} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    align-items: flex-start;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n    display: flex;\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    ${ExtendedNameSection} > & {\n        width: auto;\n        margin-left: 0;\n        margin-top: ${Spacing[\"spacing-16\"]};\n        justify-content: flex-start;\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        ${(props) => {\n            if (props.$hideInMobile) {\n                return css`\n                    display: none;\n                    visibility: hidden;\n                `;\n            } else {\n                return css`\n                    width: 100%;\n                    margin-left: 0;\n                    margin-top: ${Spacing[\"spacing-8\"]};\n                    justify-content: flex-start;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionFileSizeText = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-subtler\"]};\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\n\nexport const ItemDescriptionLabel = styled.span`\n    ${Font[\"form-label\"]}\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n    color: ${Colour[\"text-subtle\"]};\n    display: block;\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemDescriptionText = styled(ItemText)`\n    margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const ActionContainer = styled.div<ActionContainerStyleProps>`\n    width: 6rem;\n    margin-left: ${Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${(props) => {\n        if (\n            props.$hasDescription &&\n            props.$editable &&\n            !props.$error &&\n            !props.$loading\n        ) {\n            return css`\n                width: 100%;\n                margin-left: 0;\n                margin-top: ${Spacing[\"spacing-16\"]};\n                justify-content: flex-end;\n            `;\n        }\n    }}\n\n    ${MediaQuery.MaxWidth.md} {\n        width: fit-content;\n\n        ${(props) => {\n            if (props.$loading && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${Spacing[\"spacing-16\"]};\n                    width: 100%;\n                `;\n            } else if (props.$editable && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${Spacing[\"spacing-16\"]};\n                    align-self: flex-end;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-8\"]};\n    }\n`;\n"],"names":["Item","styled","li","Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","Colour","$active","Box","div","Border","Radius","MediaQuery","MaxWidth","md","$focused","Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","FileSizeText","Typography","BodyMD","DescriptionFileSizeText","ItemText","ItemDescriptionLabel","span","Font","Spec","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","$hasDescription","IconButton","DSIconButton"],"mappings":"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"}
+{"version":3,"file":"file-list-item.styles.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\nimport { Typography } from \"../../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\ninterface ItemStyleProps {\n    $sortable: boolean;\n    $disabled?: boolean | undefined;\n    $focusType: ItemFocusType;\n}\n\ninterface DragHandleIconStyleProps {\n    $disabled?: boolean | undefined;\n    $active?: boolean | undefined;\n}\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n    $disabled?: boolean | undefined;\n    $focused?: boolean | undefined;\n    $loading?: boolean | undefined;\n    $editable?: boolean | undefined;\n    $hasDescription?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\ninterface ActionContainerStyleProps {\n    $editable?: boolean | undefined;\n    $error?: boolean | undefined;\n    $loading?: boolean | undefined;\n    $hasDescription?: boolean | undefined;\n}\n\ninterface FileSizeSectionStyleProps {\n    $hideInMobile?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$disabled && props.$focusType === \"none\") {\n            // Show disabled cursor only if no dragging is happening\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$sortable && props.$focusType === \"self\") {\n            return css`\n                cursor: grabbing;\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        } else if (props.$sortable) {\n            return css`\n                &:hover {\n                    cursor: grab;\n                }\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        }\n    }}\n`;\n\nexport const DragHandleIcon = styled(\n    DSDragHandleIcon\n)<DragHandleIconStyleProps>`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${Colour[\"icon\"]};\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                color: ${Colour[\"icon-primary\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"icon-disabled\"]};\n            `;\n        }\n    }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$focused) {\n            return css`\n                border-color: ${Colour[\"border-focus\"]};\n                box-shadow: ${Shadow[\"xs-focus-strong\"]};\n            `;\n        } else if (props.$disabled) {\n            return css`\n                border-color: ${Colour[\"border-disabled\"]};\n            `;\n        } else if (props.$error) {\n            return css`\n                background: ${Colour[\"bg-error\"]};\n                border-color: ${Colour[\"border-error\"]};\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (!props.$error && (props.$loading || props.$editable)) {\n            return css`\n                ${MediaQuery.MaxWidth.md} {\n                    flex-direction: column;\n                    align-items: flex-start;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${MediaQuery.MaxWidth.md} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    align-items: flex-start;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n    display: flex;\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    ${ExtendedNameSection} > & {\n        width: auto;\n        margin-left: 0;\n        margin-top: ${Spacing[\"spacing-16\"]};\n        justify-content: flex-start;\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        ${(props) => {\n            if (props.$hideInMobile) {\n                return css`\n                    display: none;\n                    visibility: hidden;\n                `;\n            } else {\n                return css`\n                    width: 100%;\n                    margin-left: 0;\n                    margin-top: ${Spacing[\"spacing-8\"]};\n                    justify-content: flex-start;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionFileSizeText = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-subtler\"]};\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\n\nexport const ItemDescriptionLabel = styled.span`\n    ${Font[\"form-label\"]}\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n    color: ${Colour[\"text-subtle\"]};\n    display: block;\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemDescriptionText = styled(ItemText)`\n    margin-top: ${Spacing[\"spacing-4\"]};\n    overflow-wrap: anywhere;\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const ActionContainer = styled.div<ActionContainerStyleProps>`\n    width: 6rem;\n    margin-left: ${Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${(props) => {\n        if (\n            props.$hasDescription &&\n            props.$editable &&\n            !props.$error &&\n            !props.$loading\n        ) {\n            return css`\n                width: 100%;\n                margin-left: 0;\n                margin-top: ${Spacing[\"spacing-16\"]};\n                justify-content: flex-end;\n            `;\n        }\n    }}\n\n    ${MediaQuery.MaxWidth.md} {\n        width: fit-content;\n\n        ${(props) => {\n            if (props.$loading && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${Spacing[\"spacing-16\"]};\n                    width: 100%;\n                `;\n            } else if (props.$editable && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${Spacing[\"spacing-16\"]};\n                    align-self: flex-end;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-8\"]};\n    }\n`;\n"],"names":["Item","styled","li","Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","Colour","$active","Box","div","Border","Radius","MediaQuery","MaxWidth","md","$focused","Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","FileSizeText","Typography","BodyMD","DescriptionFileSizeText","ItemText","ItemDescriptionLabel","span","Font","Spec","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","$hasDescription","IconButton","DSIconButton"],"mappings":"qWAyDO,MAAMA,EAAOC,EAAAA,QAAOC,EAAkB;;;;;;;yBAOpBC,EAAAA,QAAQ;;;MAG1BC,GACKA,EAAMC,WAAkC,SAArBD,EAAME,WAElBC,KAAG;;cAGHH,EAAMI,WAAkC,SAArBJ,EAAME,WACzBC,KAAG;;;;;cAMHH,EAAMI,UACND,KAAG;;;;;;;mBADP;EAaFE,EAAiBR,EAAAA,QAC1BS,EAAAA,eACuB;oBACPP,EAAAA,QAAQ;;;aAGfQ,EAAAA,OAAa;;MAEnBP,GACKA,EAAMQ,QACCL,KAAG;yBACGI,EAAAA,OAAO;cAIpBP,EAAMC,UACCE,KAAG;yBACGI,EAAAA,OAAO;mBAFxB;EAQKE,EAAMZ,EAAAA,QAAOa,GAAkB;kBAC1BH,EAAAA,OAAO;cACXI,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKJ,SAAe;qBAClDK,EAAAA,OAAW;eACjBb,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;;;MAK1Cc,EAAAA,WAAWC,SAASC;mBACPhB,EAAAA,QAAQ;;;MAGpBC,GACKA,EAAMgB,SACCb,KAAG;gCACUI,EAAAA,OAAO;8BACTU,EAAAA,OAAO;cAElBjB,EAAMC,UACNE,KAAG;gCACUI,EAAAA,OAAO;cAEpBP,EAAMkB,OACNf,KAAG;8BACQI,EAAAA,OAAO;gCACLA,EAAAA,OAAO;mBAHxB;;MAQRP,IACC,IAAKA,EAAMkB,SAAWlB,EAAMmB,UAAYnB,EAAMoB,WAC1C,OAAOjB,KAAG;kBACJU,EAAAA,WAAWC,SAASC;;;;aAK9B;EAIKM,EAAiBxB,EAAAA,QAAOa,GAA6B;;;;;MAK5DG,EAAAA,WAAWC,SAASC;;;;;;MAMnBf,IACC,GAAIA,EAAMsB,cACN,OAAOnB,KAAG;kBACJU,EAAAA,WAAWC,SAASC;;;;aAK9B;EAIKQ,EAAc1B,EAAAA,QAAOa,GAAG;;;;;EAOxBc,EAAsB3B,EAAAA,QAAOa,GAAG;;;;;;MAMvCG,EAAAA,WAAWC,SAASC;;;EAKbU,EAAkB5B,EAAAA,QAAOa,GAA8B;;;mBAGjDX,EAAAA,QAAQ;;;MAGrByB;;;sBAGgBzB,EAAAA,QAAQ;;;;MAIxBc,EAAAA,WAAWC,SAASC;UACff,GACKA,EAAM0B,cACCvB,KAAG;;;kBAKHA,KAAG;;;kCAGQJ,EAAAA,QAAQ;;;;EAQ7B4B,EAAe9B,EAAAA,QAAO+B,aAAWC,OAAO;aACxCtB,EAAAA,OAAO;EAGPuB,EAA0BjC,EAAAA,QAAO+B,aAAWC,OAAO;aACnDtB,EAAAA,OAAO;kBACFR,EAAAA,QAAQ;EAGbgC,EAAWlC,EAAAA,QAAO+B,aAAWC,OAAO,GAEpCG,EAAuBnC,EAAAA,QAAOoC,IAAI;MACzCC,EAAAA,KAAK;mBACQA,EAAAA,KAAKC,KAAK;aAChB5B,EAAAA,OAAO;;kBAEFR,EAAAA,QAAQ;EAGbqC,EAAsBvC,EAAAA,QAAOkC,EAAS;kBACjChC,EAAAA,QAAQ;;EAIbsC,EAAYxC,EAAAA,QAAOyC,EAAAA,0BAA0B;;;;aAI7C/B,EAAAA,OAAO;EAGPgC,EAAmB1C,EAAAA,QAAO+B,aAAWY,OAAO;aAC5CjC,EAAAA,OAAO;EAGPkC,EAAsB5C,EAAAA,QAAO0C,EAAiB;kBACzCxC,EAAAA,QAAQ;;WAEfA,EAAAA,QAAQ;;MAEbc,EAAAA,WAAWC,SAASC;;;;EAMb2B,EAAqB7C,EAAAA,QAAO0C,EAAiB;;;;MAIpD1B,EAAAA,WAAWC,SAASC;;eAEXhB,EAAAA,QAAQ;;sBAEDA,EAAAA,QAAQ;;EAIjB4C,EAAkB9C,EAAAA,QAAOa,GAA8B;;mBAEjDX,EAAAA,QAAQ;;;;;MAKpBC,IACC,GACIA,EAAM4C,iBACN5C,EAAMoB,YACLpB,EAAMkB,SACNlB,EAAMmB,SAEP,OAAOhB,KAAG;;;8BAGQJ,EAAAA,QAAQ;;aAG9B;;MAGFc,EAAAA,WAAWC,SAASC;;;UAGff,GACKA,EAAMmB,WAAanB,EAAMkB,OAClBf,KAAG;;kCAEQJ,EAAAA,QAAQ;;kBAGnBC,EAAMoB,YAAcpB,EAAMkB,OAC1Bf,KAAG;;kCAEQJ,EAAAA,QAAQ;;uBAHvB;;EAWN8C,EAAahD,EAAAA,QAAOiD,EAAAA,WAAa;;;;wBAItB/C,EAAAA,QAAQ;;"}

package/cjs/form/form-textarea.style.js

@@ -1,7 +1,7 @@
 "use strict";var e=require("styled-components"),r=require("../theme/index.js"),t=require("./form-label.style.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(e);const n=i.default.div`
     display: flex;
     justify-content: flex-end;
-    margin-top: ${r.Spacing["spacing-4"]};
+    margin-top: ${r.Spacing["spacing-8"]};
 `,s=i.default.div`
     ${r.Font["body-sm-semibold"]}
     display: flex;

package/cjs/form/form-textarea.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-textarea.style.js","sources":["../../../src/form/form-textarea.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Font, Spacing } from \"../theme\";\nimport { ErrorMessage } from \"./form-label.style\";\n\nexport const LabelContainer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorMessageContainer = styled.div`\n    ${Font[\"body-sm-semibold\"]}\n    display: flex;\n    flex: 1;\n    margin-right: ${Spacing[\"spacing-12\"]};\n    gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorMessageLabel = styled(ErrorMessage)`\n    margin-top: 0;\n`;\n"],"names":["LabelContainer","styled","div","Spacing","ErrorMessageContainer","Font","ErrorMessageLabel","ErrorMessage"],"mappings":"qMAIO,MAAMA,EAAiBC,EAAAA,QAAOC,GAAG;;;kBAGtBC,EAAAA,QAAQ;EAGbC,EAAwBH,EAAAA,QAAOC,GAAG;MACzCG,EAAAA,KAAK;;;oBAGSF,EAAAA,QAAQ;WACjBA,EAAAA,QAAQ;EAGNG,EAAoBL,EAAAA,QAAOM,EAAAA,aAAa;;"}
+{"version":3,"file":"form-textarea.style.js","sources":["../../../src/form/form-textarea.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Font, Spacing } from \"../theme\";\nimport { ErrorMessage } from \"./form-label.style\";\n\nexport const LabelContainer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const ErrorMessageContainer = styled.div`\n    ${Font[\"body-sm-semibold\"]}\n    display: flex;\n    flex: 1;\n    margin-right: ${Spacing[\"spacing-12\"]};\n    gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorMessageLabel = styled(ErrorMessage)`\n    margin-top: 0;\n`;\n"],"names":["LabelContainer","styled","div","Spacing","ErrorMessageContainer","Font","ErrorMessageLabel","ErrorMessage"],"mappings":"qMAIO,MAAMA,EAAiBC,EAAAA,QAAOC,GAAG;;;kBAGtBC,EAAAA,QAAQ;EAGbC,EAAwBH,EAAAA,QAAOC,GAAG;MACzCG,EAAAA,KAAK;;;oBAGSF,EAAAA,QAAQ;WACjBA,EAAAA,QAAQ;EAGNG,EAAoBL,EAAAA,QAAOM,EAAAA,aAAa;;"}

package/cjs/input-textarea/textarea.style.js

@@ -1,6 +1,7 @@
 "use strict";var r=require("styled-components"),o=require("../theme/index.js");function e(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var l=e(r);const t=l.default.div`
     display: flex;
     flex-direction: column;
+    gap: ${o.Spacing["spacing-8"]};
 `,d=l.default.textarea`
     border: ${o.Border["width-010"]} ${o.Border.solid} ${o.Colour.border};
     border-radius: ${o.Radius.sm};

package/cjs/input-textarea/textarea.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.style.js","sources":["../../../src/input-textarea/textarea.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $error?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Wrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const Element = styled.textarea<StyleProps>`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n    outline: none;\n    overflow: auto;\n\n    display: block;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    width: 100%;\n\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    &:focus,\n    &:active {\n        outline-offset: -1px;\n        outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n\n    ${(props) => {\n        if (props.readOnly) {\n            return css`\n                border-color: transparent;\n                background: transparent !important;\n                padding: ${Spacing[\"spacing-12\"]} 0;\n\n                &:focus,\n                &:active {\n                    outline-color: ${Colour[\"border-focus\"]};\n                }\n            `;\n        } else if (props.disabled) {\n            return css`\n                background: ${Colour[\"bg-disabled\"]};\n                cursor: not-allowed;\n\n                &:focus,\n                &:active {\n                    outline-color: ${Colour[\"border-disabled\"]};\n                }\n            `;\n        } else if (props.$error) {\n            return css`\n                border-color: ${Colour[\"border-error\"]};\n\n                &:focus,\n                &:active {\n                    outline-color: ${Colour[\"border-error-focus\"]};\n                }\n            `;\n        }\n    }}\n`;\n"],"names":["Wrapper","styled","div","Element","textarea","Border","Colour","Radius","Spacing","Font","props","readOnly","css","disabled","$error"],"mappings":"kKAcO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;;EAKpBC,EAAUF,EAAAA,QAAOG,QAAoB;cACpCC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,SAAe;qBAClDC,EAAAA,OAAW;kBACdD,EAAAA,OAAW;;;;;eAKdE,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;MAG1CC,EAAAA,KAAK;aACEH,EAAAA,OAAa;;;;;mBAKPD,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;cAC1CC,EAAAA,OAAO;;;;;iBAKJA,EAAAA,OAAO;;;;;;;;;;;;sBAYFA,EAAAA,OAAO;;yBAEJC,EAAAA,OAAa;;;;MAI/BG,GACKA,EAAMC,SACCC,KAAG;;;2BAGKJ,EAAAA,QAAQ;;;;qCAIEF,EAAAA,OAAO;;cAGzBI,EAAMG,SACND,KAAG;8BACQN,EAAAA,OAAO;;;;;qCAKAA,EAAAA,OAAO;;cAGzBI,EAAMI,OACNF,KAAG;gCACUN,EAAAA,OAAO;;;;qCAIFA,EAAAA,OAAO;;mBAN7B;"}
+{"version":3,"file":"textarea.style.js","sources":["../../../src/input-textarea/textarea.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $error?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Wrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const Element = styled.textarea<StyleProps>`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n    outline: none;\n    overflow: auto;\n\n    display: block;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    width: 100%;\n\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    &:focus,\n    &:active {\n        outline-offset: -1px;\n        outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n\n    ${(props) => {\n        if (props.readOnly) {\n            return css`\n                border-color: transparent;\n                background: transparent !important;\n                padding: ${Spacing[\"spacing-12\"]} 0;\n\n                &:focus,\n                &:active {\n                    outline-color: ${Colour[\"border-focus\"]};\n                }\n            `;\n        } else if (props.disabled) {\n            return css`\n                background: ${Colour[\"bg-disabled\"]};\n                cursor: not-allowed;\n\n                &:focus,\n                &:active {\n                    outline-color: ${Colour[\"border-disabled\"]};\n                }\n            `;\n        } else if (props.$error) {\n            return css`\n                border-color: ${Colour[\"border-error\"]};\n\n                &:focus,\n                &:active {\n                    outline-color: ${Colour[\"border-error-focus\"]};\n                }\n            `;\n        }\n    }}\n`;\n"],"names":["Wrapper","styled","div","Spacing","Element","textarea","Border","Colour","Radius","Font","props","readOnly","css","disabled","$error"],"mappings":"kKAcO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;;WAGtBC,EAAAA,QAAQ;EAGNC,EAAUH,EAAAA,QAAOI,QAAoB;cACpCC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,SAAe;qBAClDC,EAAAA,OAAW;kBACdD,EAAAA,OAAW;;;;;eAKdJ,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;MAG1CM,EAAAA,KAAK;aACEF,EAAAA,OAAa;;;;;mBAKPD,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;cAC1CC,EAAAA,OAAO;;;;;iBAKJA,EAAAA,OAAO;;;;;;;;;;;;sBAYFA,EAAAA,OAAO;;yBAEJC,EAAAA,OAAa;;;;MAI/BE,GACKA,EAAMC,SACCC,KAAG;;;2BAGKT,EAAAA,QAAQ;;;;qCAIEI,EAAAA,OAAO;;cAGzBG,EAAMG,SACND,KAAG;8BACQL,EAAAA,OAAO;;;;;qCAKAA,EAAAA,OAAO;;cAGzBG,EAAMI,OACNF,KAAG;gCACUL,EAAAA,OAAO;;;;qCAIFA,EAAAA,OAAO;;mBAN7B;"}

package/cjs/predictive-text-input/predictive-text-input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/lodash/debounce.js"),s=require("react"),a=require("../shared/accessibility/index.js"),i=require("../input/input.js");require("styled-components"),require("../theme/index.js"),require("../util/string-helper.js"),require("../shared/dropdown-list/dropdown-label.styles.js");var l=require("../shared/dropdown-list/dropdown-list.js"),o=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var n=require("../util/simple-id-generator.js");require("@react-aria/live-announcer");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list/dropdown-list.styles.js"),require("../shared/dropdown-list/dropdown-search.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/nested-dropdown-list.styles.js"),require("../shared/dropdown-list/virtuoso-components.js");var u=require("../shared/input-wrapper/input-wrapper.js");exports.PredictiveTextInput=c=>{var{className:p,"data-testid":h,selectedOption:x,minimumCharacters:j=3,fetchOptions:m,placeholder:f="Enter here...",readOnly:g=!1,disabled:q=!1,error:w,valueExtractor:v,listExtractor:b,displayValueExtractor:y,onSelectOption:S,alignment:E,dropdownZIndex:T,dropdownRootNode:I,dropdownWidth:O,"aria-describedby":_}=c,C=e.__rest(c,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const D=e=>e?y?y(e):e.toString():"",[N,$]=s.useState((()=>x?D(x):"")),[R,L]=s.useState((()=>x?D(x):"")),[W,k]=s.useState([]),[B,V]=s.useState(!0),[A,F]=s.useState(!1),[H,Z]=s.useState(!!x),[P,G]=s.useState(x),[M,z]=s.useState(!1),[J,K]=s.useState(!1),Q=n.useId(),[U,X]=s.useState(null),Y=`${Q}-instruction`,ee=s.useRef(null),re=s.useRef(null),te=s.useRef(m),se=s.useCallback((r=>e.__awaiter(void 0,void 0,void 0,(function*(){if(te.current){F(!1),V(!0);try{const e=yield te.current(r);L(r),k(null!=e?e:[]),V(!1)}catch(e){F(!0),V(!1)}}}))),[]),ae=s.useCallback(t.default((e=>{se(e)}),500),[se]);s.useEffect((()=>{te.current=m}),[m]),s.useEffect((()=>{N&&N.length>=j?H?N!==R&&ae(N):(z(!0),ae(N)):ae.cancel(),""===N&&P&&(null==S||S(void 0,void 0),pe(),G(void 0)),x&&N!==D(x)&&Z(!1)}),[N,x]),s.useEffect((()=>{$(x?D(x):""),L(x?D(x):""),G(x),k([]),Z(!!x)}),[x]),s.useEffect((()=>{var e;const r=he(),t=null!==(e=null==W?void 0:W.length)&&void 0!==e?e:0;"loading"===r&&N.length>=j?X("Loading suggested results"):"fail"!==r?!M||B||A||X(0===t?N?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):X("Suggestions failed to load. Try again.")}),[W,N,A,B]),s.useEffect((()=>()=>{ae.cancel()}),[ae]);const ie=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),$(D(e)),L(e?D(e):""),Z(!0),G(e),z(!1),null==S||S(e,r)},le=()=>{K(!0)},oe=e=>{M||!ee.current||ee.current.contains(e.relatedTarget)||(K(!1),ue())},ne=()=>{z(!1),K(!1)},de=()=>{$(""),k([]),Z(!1),z(!1),null==S||S(void 0,void 0)},ue=()=>{if(!H)if(P){const e=D(P);$(e),z(!1)}else de()},ce=e=>{$(e.target.value),Z(!1)},pe=e=>{L(""),Z(!1),k([]),V(!0)},he=()=>A?"fail":B?"loading":"success";return r.jsx(o.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!g&&!q,isOpen:M,renderElement:()=>r.jsxs(u.InputWrapper,{className:p,"data-testid":h,ref:ee,tabIndex:-1,onFocus:le,onBlur:oe,$focused:J,$disabled:q,$readOnly:g,$error:w,children:[r.jsxs(a.VisuallyHidden,{id:Y,"aria-hidden":!0,children:["Type in ",j," or more characters for suggested results."]}),U&&r.jsx(a.VisuallyHidden,{"aria-live":"polite",children:U}),r.jsx(i.Input,Object.assign({role:"combobox",ref:re,id:Q,type:"text",value:N,onChange:ce,placeholder:f,readOnly:g,disabled:q,allowClear:!0,onClear:de,"aria-expanded":M,"aria-controls":Q,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:N.length<j?ue:void 0,styleType:"no-border","aria-describedby":a.concatIds(_,Y)},C))]}),renderDropdown:()=>r.jsx(r.Fragment,{children:r.jsx(l.DropdownList,{listboxId:Q,listItems:W,onSelectItem:ie,onDismiss:ne,valueExtractor:v,listExtractor:b,itemsLoadState:he(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>se(N),width:O,matchElementWidth:!0})}),onOpen:()=>{!H&&N.length>=j&&K(!0)},onClose:()=>{z(!1),K(!1),ue()},onDismiss:()=>{var e;z(!1),K(!1),ue(),null===(e=re.current)||void 0===e||e.focus()},clickToToggle:!1,offset:8,alignment:E,fitAvailableHeight:!0,customZIndex:T,rootNode:I})})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/lodash/debounce.js"),s=require("react"),i=require("../shared/accessibility/index.js"),a=require("../input/input.js");require("styled-components"),require("../theme/index.js"),require("../util/string-helper.js"),require("../shared/dropdown-list/dropdown-label.styles.js");var o=require("../shared/dropdown-list/dropdown-list.js"),l=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var n=require("../util/simple-id-generator.js");require("@react-aria/live-announcer");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list/dropdown-list.styles.js"),require("../shared/dropdown-list/dropdown-search.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/nested-dropdown-list.styles.js"),require("../shared/dropdown-list/virtuoso-components.js");var u=require("../shared/input-wrapper/input-wrapper.js");exports.PredictiveTextInput=c=>{var{className:p,"data-testid":h,selectedOption:x,minimumCharacters:j=3,fetchOptions:m,placeholder:f="Enter here...",readOnly:q=!1,disabled:g=!1,error:w,valueExtractor:v,listExtractor:b,displayValueExtractor:y,onSelectOption:S,alignment:E,dropdownZIndex:T,dropdownRootNode:I,dropdownWidth:O,"aria-describedby":_}=c,C=e.__rest(c,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const D=e=>e?y?y(e):e.toString():"",[N,$]=s.useState((()=>x?D(x):"")),[R,L]=s.useState((()=>x?D(x):"")),[W,k]=s.useState([]),[B,H]=s.useState(!0),[V,A]=s.useState(!1),[Z,F]=s.useState(!!x),[P,G]=s.useState(x),[M,z]=s.useState(!1),[J,K]=s.useState(!1),Q=n.useId(),[U,X]=s.useState(null),Y=`${Q}-instruction`,ee=s.useRef(null),re=s.useRef(null),te=s.useRef(m),se=s.useCallback((r=>e.__awaiter(void 0,void 0,void 0,(function*(){if(te.current){A(!1),H(!0);try{const e=yield te.current(r);L(r),k(null!=e?e:[]),H(!1)}catch(e){A(!0),H(!1)}}}))),[]),ie=s.useCallback(t.default((e=>{se(e)}),500),[se]);s.useEffect((()=>{te.current=m}),[m]),s.useEffect((()=>{N&&N.length>=j?Z?N!==R&&ie(N):(z(!0),ie(N)):ie.cancel(),""===N&&P&&(null==S||S(void 0,void 0),pe(),G(void 0)),x&&N!==D(x)&&F(!1)}),[N,x]),s.useEffect((()=>{$(x?D(x):""),L(x?D(x):""),G(x),F(!!x)}),[x]),s.useEffect((()=>{var e;const r=he(),t=null!==(e=null==W?void 0:W.length)&&void 0!==e?e:0;"loading"===r&&N.length>=j?X("Loading suggested results"):"fail"!==r?!M||B||V||X(0===t?N?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):X("Suggestions failed to load. Try again.")}),[W,N,V,B]),s.useEffect((()=>()=>{ie.cancel()}),[ie]);const ae=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),$(D(e)),L(e?D(e):""),F(!0),G(e),z(!1),null==S||S(e,r)},oe=()=>{K(!0)},le=e=>{M||!ee.current||ee.current.contains(e.relatedTarget)||(K(!1),ue())},ne=()=>{z(!1),K(!1)},de=()=>{$(""),F(!1),z(!1),null==S||S(void 0,void 0)},ue=()=>{if(!Z)if(P){const e=D(P);$(e),z(!1)}else de()},ce=e=>{$(e.target.value),F(!1)},pe=e=>{L(""),F(!1),H(!0)},he=()=>V?"fail":B?"loading":"success";return r.jsx(l.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!q&&!g,isOpen:M,renderElement:()=>r.jsxs(u.InputWrapper,{className:p,"data-testid":h,ref:ee,tabIndex:-1,onFocus:oe,onBlur:le,$focused:J,$disabled:g,$readOnly:q,$error:w,children:[r.jsxs(i.VisuallyHidden,{id:Y,"aria-hidden":!0,children:["Type in ",j," or more characters for suggested results."]}),U&&r.jsx(i.VisuallyHidden,{"aria-live":"polite",children:U}),r.jsx(a.Input,Object.assign({role:"combobox",ref:re,id:Q,type:"text",value:N,onChange:ce,placeholder:f,readOnly:q,disabled:g,allowClear:!0,onClear:de,"aria-expanded":M,"aria-controls":Q,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:N.length<j?ue:void 0,styleType:"no-border","aria-describedby":i.concatIds(_,Y)},C))]}),renderDropdown:()=>r.jsx(o.DropdownList,{listboxId:Q,listItems:W,onSelectItem:ae,onDismiss:ne,valueExtractor:v,listExtractor:b,itemsLoadState:he(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>se(N),width:O,matchElementWidth:!0}),onOpen:()=>{!Z&&N.length>=j&&K(!0)},onClose:()=>{z(!1),K(!1),ue()},onDismiss:()=>{var e;z(!1),K(!1),ue(),null===(e=re.current)||void 0===e||e.focus()},onHide:()=>{k([]),H(!0),A(!1)},clickToToggle:!1,offset:8,alignment:E,fitAvailableHeight:!0,customZIndex:T,rootNode:I})})};
 //# sourceMappingURL=predictive-text-input.js.map

package/cjs/predictive-text-input/predictive-text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"predictive-text-input.js","sources":["../../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { VisuallyHidden, concatIds } from \"src/shared/accessibility\";\nimport { Input } from \"../input\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n    className,\n    \"data-testid\": testId,\n    selectedOption,\n    minimumCharacters = 3,\n    fetchOptions,\n    placeholder = \"Enter here...\",\n    readOnly = false,\n    disabled = false,\n    error,\n    valueExtractor,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n    const getDisplayValue = (item: T | undefined): string => {\n        if (!item) return \"\";\n        return displayValueExtractor\n            ? displayValueExtractor(item)\n            : item.toString();\n    };\n\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const [input, setInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [searchedInput, setSearchedInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [options, setOptions] = useState<T[]>([]);\n    const [isLoading, setIsLoading] = useState<boolean>(true);\n    const [isError, setIsError] = useState<boolean>(false);\n    const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n        !!selectedOption\n    );\n    const [prevOptionSelected, setPrevOptionSelected] = useState<T | undefined>(\n        selectedOption\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const internalId = useId();\n    const [resultAnnouncement, setResultAnnouncement] = useState<string | null>(\n        null\n    );\n    const instructionId = `${internalId}-instruction`;\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const selectorRef = useRef<HTMLInputElement | null>(null);\n\n    const fetchOptionsRef = useRef(fetchOptions);\n\n    // =============================================================================\n    // DEBOUNCE FUNCTIONS\n    // =============================================================================\n    const handleFetchOptions = useCallback(async (input: string) => {\n        if (!fetchOptionsRef.current) return;\n        setIsError(false);\n        setIsLoading(true);\n        try {\n            const fetchedOptions = await fetchOptionsRef.current(input);\n            setSearchedInput(input);\n            setOptions(fetchedOptions ?? []);\n            setIsLoading(false);\n        } catch {\n            setIsError(true);\n            setIsLoading(false);\n        }\n    }, []);\n\n    const fetchOptionsDebounced = useCallback(\n        debounce((input: string) => {\n            handleFetchOptions(input);\n        }, 500),\n        [handleFetchOptions]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        fetchOptionsRef.current = fetchOptions;\n    }, [fetchOptions]);\n\n    useEffect(() => {\n        /***\n         * Should not fetch options for the following the scenario :\n         * 1. When input < minimumCharacters\n         * 2. When user selected option from dropdown becomes input\n         * 3. Initial selectedOption passed in as input\n         */\n        if (input && input.length >= minimumCharacters) {\n            if (!isOptionSelected) {\n                setIsOpen(true);\n                fetchOptionsDebounced(input);\n            } else if (input !== searchedInput) {\n                fetchOptionsDebounced(input);\n            }\n        } else {\n            fetchOptionsDebounced.cancel();\n        }\n\n        if (input === \"\" && prevOptionSelected) {\n            onSelectOption?.(undefined, undefined);\n            handleDropdownDismiss();\n            setPrevOptionSelected(undefined);\n        }\n\n        if (selectedOption && input !== getDisplayValue(selectedOption)) {\n            setIsOptionSelected(false);\n        }\n    }, [input, selectedOption]);\n\n    useEffect(() => {\n        setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setPrevOptionSelected(selectedOption);\n        setOptions([]);\n        setIsOptionSelected(!!selectedOption);\n    }, [selectedOption]);\n\n    useEffect(() => {\n        const state = getItemsLoadState();\n        const count = options?.length ?? 0;\n\n        if (state === \"loading\" && input.length >= minimumCharacters) {\n            setResultAnnouncement(\"Loading suggested results\");\n            return;\n        }\n\n        if (state === \"fail\") {\n            setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n            return;\n        }\n\n        if (isOpen && !isLoading && !isError) {\n            if (count === 0) {\n                setResultAnnouncement(input ? \"No results found.\" : null);\n            } else {\n                setResultAnnouncement(\n                    `${count} result${\n                        count > 1 ? \"s\" : \"\"\n                    } found. Press down arrow to scroll through the list.`\n                );\n            }\n        }\n    }, [options, input, isError, isLoading]);\n\n    // =============================================================================\n    // Cleanup: cancel debounce on unmount\n    // =============================================================================\n    useEffect(() => {\n        return () => {\n            fetchOptionsDebounced.cancel();\n        };\n    }, [fetchOptionsDebounced]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setInput(getDisplayValue(item));\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(true);\n        setPrevOptionSelected(item);\n        setIsOpen(false);\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleOpen = () => {\n        if (!isOptionSelected && input.length >= minimumCharacters) {\n            setIsFocused(true);\n        }\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n    };\n\n    const handleNodeFocus = () => {\n        setIsFocused(true);\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            !isOpen &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setIsFocused(false);\n            handleOnBlur();\n        }\n    };\n\n    const handleListDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n        selectorRef.current?.focus();\n    };\n\n    const handleOnClear = () => {\n        setInput(\"\");\n        setOptions([]);\n        setIsOptionSelected(false);\n        setIsOpen(false);\n        onSelectOption?.(undefined, undefined);\n    };\n\n    const handleOnBlur = () => {\n        if (!isOptionSelected) {\n            if (prevOptionSelected) {\n                const prevValue = getDisplayValue(prevOptionSelected);\n                setInput(prevValue);\n                setIsOpen(false);\n            } else {\n                handleOnClear();\n            }\n        }\n    };\n\n    const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setInput(e.target.value);\n        setIsOptionSelected(false);\n    };\n\n    const handleDropdownDismiss = (item?: T) => {\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(!!item);\n        setOptions([]);\n        setIsLoading(true);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTION\n    // =============================================================================\n    const getItemsLoadState = (): ItemsLoadStateType => {\n        if (isError) return \"fail\";\n        return isLoading ? \"loading\" : \"success\";\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputElement = () => {\n        return (\n            <InputWrapper\n                className={className}\n                data-testid={testId}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={isFocused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <VisuallyHidden id={instructionId} aria-hidden>\n                    Type in {minimumCharacters} or more characters for suggested\n                    results.\n                </VisuallyHidden>\n                {resultAnnouncement && (\n                    <VisuallyHidden aria-live=\"polite\">\n                        {resultAnnouncement}\n                    </VisuallyHidden>\n                )}\n                <Input\n                    role=\"combobox\"\n                    ref={selectorRef}\n                    id={internalId}\n                    type=\"text\"\n                    value={input}\n                    onChange={handleTyping}\n                    placeholder={placeholder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    allowClear\n                    onClear={handleOnClear}\n                    aria-expanded={isOpen}\n                    aria-controls={internalId}\n                    aria-autocomplete=\"list\"\n                    aria-haspopup=\"listbox\"\n                    onBlur={\n                        input.length < minimumCharacters\n                            ? handleOnBlur\n                            : undefined\n                    }\n                    styleType=\"no-border\"\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    {...otherProps}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <>\n                <DropdownList\n                    listboxId={internalId}\n                    listItems={options}\n                    onSelectItem={handleListItemClick}\n                    onDismiss={handleListDismiss}\n                    valueExtractor={valueExtractor}\n                    listExtractor={listExtractor}\n                    itemsLoadState={getItemsLoadState()}\n                    itemTruncationType={\"end\"}\n                    itemMaxLines={1}\n                    labelDisplayType={\"next-line\"}\n                    disableItemFocus\n                    onRetry={() => handleFetchOptions(input)}\n                    width={dropdownWidth}\n                    matchElementWidth\n                />\n            </>\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={isOpen}\n                renderElement={renderInputElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","useId","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","$focused","$readOnly","$error","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"predictive-text-input.js","sources":["../../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { VisuallyHidden, concatIds } from \"src/shared/accessibility\";\nimport { Input } from \"../input\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n    className,\n    \"data-testid\": testId,\n    selectedOption,\n    minimumCharacters = 3,\n    fetchOptions,\n    placeholder = \"Enter here...\",\n    readOnly = false,\n    disabled = false,\n    error,\n    valueExtractor,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n    const getDisplayValue = (item: T | undefined): string => {\n        if (!item) return \"\";\n        return displayValueExtractor\n            ? displayValueExtractor(item)\n            : item.toString();\n    };\n\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const [input, setInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [searchedInput, setSearchedInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [options, setOptions] = useState<T[]>([]);\n    const [isLoading, setIsLoading] = useState<boolean>(true);\n    const [isError, setIsError] = useState<boolean>(false);\n    const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n        !!selectedOption\n    );\n    const [prevOptionSelected, setPrevOptionSelected] = useState<T | undefined>(\n        selectedOption\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const internalId = useId();\n    const [resultAnnouncement, setResultAnnouncement] = useState<string | null>(\n        null\n    );\n    const instructionId = `${internalId}-instruction`;\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const selectorRef = useRef<HTMLInputElement | null>(null);\n\n    const fetchOptionsRef = useRef(fetchOptions);\n\n    // =============================================================================\n    // DEBOUNCE FUNCTIONS\n    // =============================================================================\n    const handleFetchOptions = useCallback(async (input: string) => {\n        if (!fetchOptionsRef.current) return;\n        setIsError(false);\n        setIsLoading(true);\n        try {\n            const fetchedOptions = await fetchOptionsRef.current(input);\n            setSearchedInput(input);\n            setOptions(fetchedOptions ?? []);\n            setIsLoading(false);\n        } catch {\n            setIsError(true);\n            setIsLoading(false);\n        }\n    }, []);\n\n    const fetchOptionsDebounced = useCallback(\n        debounce((input: string) => {\n            handleFetchOptions(input);\n        }, 500),\n        [handleFetchOptions]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        fetchOptionsRef.current = fetchOptions;\n    }, [fetchOptions]);\n\n    useEffect(() => {\n        /***\n         * Should not fetch options for the following the scenario :\n         * 1. When input < minimumCharacters\n         * 2. When user selected option from dropdown becomes input\n         * 3. Initial selectedOption passed in as input\n         */\n        if (input && input.length >= minimumCharacters) {\n            if (!isOptionSelected) {\n                setIsOpen(true);\n                fetchOptionsDebounced(input);\n            } else if (input !== searchedInput) {\n                fetchOptionsDebounced(input);\n            }\n        } else {\n            fetchOptionsDebounced.cancel();\n        }\n\n        if (input === \"\" && prevOptionSelected) {\n            onSelectOption?.(undefined, undefined);\n            handleDropdownDismiss();\n            setPrevOptionSelected(undefined);\n        }\n\n        if (selectedOption && input !== getDisplayValue(selectedOption)) {\n            setIsOptionSelected(false);\n        }\n    }, [input, selectedOption]);\n\n    useEffect(() => {\n        setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setPrevOptionSelected(selectedOption);\n        setIsOptionSelected(!!selectedOption);\n    }, [selectedOption]);\n\n    useEffect(() => {\n        const state = getItemsLoadState();\n        const count = options?.length ?? 0;\n\n        if (state === \"loading\" && input.length >= minimumCharacters) {\n            setResultAnnouncement(\"Loading suggested results\");\n            return;\n        }\n\n        if (state === \"fail\") {\n            setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n            return;\n        }\n\n        if (isOpen && !isLoading && !isError) {\n            if (count === 0) {\n                setResultAnnouncement(input ? \"No results found.\" : null);\n            } else {\n                setResultAnnouncement(\n                    `${count} result${\n                        count > 1 ? \"s\" : \"\"\n                    } found. Press down arrow to scroll through the list.`\n                );\n            }\n        }\n    }, [options, input, isError, isLoading]);\n\n    // =============================================================================\n    // Cleanup: cancel debounce on unmount\n    // =============================================================================\n    useEffect(() => {\n        return () => {\n            fetchOptionsDebounced.cancel();\n        };\n    }, [fetchOptionsDebounced]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setInput(getDisplayValue(item));\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(true);\n        setPrevOptionSelected(item);\n        setIsOpen(false);\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleOpen = () => {\n        if (!isOptionSelected && input.length >= minimumCharacters) {\n            setIsFocused(true);\n        }\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n    };\n\n    const handleNodeFocus = () => {\n        setIsFocused(true);\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            !isOpen &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setIsFocused(false);\n            handleOnBlur();\n        }\n    };\n\n    const handleListDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n        selectorRef.current?.focus();\n    };\n\n    const handleHide = () => {\n        // reset dropdown state once it fully closes\n        setOptions([]);\n        setIsLoading(true);\n        setIsError(false);\n    };\n\n    const handleOnClear = () => {\n        setInput(\"\");\n        setIsOptionSelected(false);\n        setIsOpen(false);\n        onSelectOption?.(undefined, undefined);\n    };\n\n    const handleOnBlur = () => {\n        if (!isOptionSelected) {\n            if (prevOptionSelected) {\n                const prevValue = getDisplayValue(prevOptionSelected);\n                setInput(prevValue);\n                setIsOpen(false);\n            } else {\n                handleOnClear();\n            }\n        }\n    };\n\n    const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setInput(e.target.value);\n        setIsOptionSelected(false);\n    };\n\n    const handleDropdownDismiss = (item?: T) => {\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(!!item);\n        setIsLoading(true);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTION\n    // =============================================================================\n    const getItemsLoadState = (): ItemsLoadStateType => {\n        if (isError) return \"fail\";\n        return isLoading ? \"loading\" : \"success\";\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputElement = () => {\n        return (\n            <InputWrapper\n                className={className}\n                data-testid={testId}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={isFocused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <VisuallyHidden id={instructionId} aria-hidden>\n                    Type in {minimumCharacters} or more characters for suggested\n                    results.\n                </VisuallyHidden>\n                {resultAnnouncement && (\n                    <VisuallyHidden aria-live=\"polite\">\n                        {resultAnnouncement}\n                    </VisuallyHidden>\n                )}\n                <Input\n                    role=\"combobox\"\n                    ref={selectorRef}\n                    id={internalId}\n                    type=\"text\"\n                    value={input}\n                    onChange={handleTyping}\n                    placeholder={placeholder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    allowClear\n                    onClear={handleOnClear}\n                    aria-expanded={isOpen}\n                    aria-controls={internalId}\n                    aria-autocomplete=\"list\"\n                    aria-haspopup=\"listbox\"\n                    onBlur={\n                        input.length < minimumCharacters\n                            ? handleOnBlur\n                            : undefined\n                    }\n                    styleType=\"no-border\"\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    {...otherProps}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={internalId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                itemsLoadState={getItemsLoadState()}\n                itemTruncationType={\"end\"}\n                itemMaxLines={1}\n                labelDisplayType={\"next-line\"}\n                disableItemFocus\n                onRetry={() => handleFetchOptions(input)}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={isOpen}\n                renderElement={renderInputElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                onHide={handleHide}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","useId","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","$focused","$readOnly","$error","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","onHide","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/cjs/shared/dropdown-wrapper/element-with-dropdown.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("react"),i=require("../../external/react-resize-detector/build/index.esm.js"),o=require("styled-components"),s=require("../../overlay/use-floating-context.js"),r=require("../../theme/index.js");const l=e=>"right"===e?"bottom-end":"bottom-start",a=n.createContext({elementWidth:0,styles:{},setFloatingRef:()=>{},getFloatingProps:()=>({})});exports.DropdownRenderContext=a,exports.ElementWithDropdown=({enabled:d,isOpen:u,onOpen:c,onClose:g,onDismiss:h,renderElement:p,renderDropdown:m,customZIndex:f,clickToToggle:x=!1,offset:y=0,alignment:b="left",fitAvailableHeight:w,rootNode:F,positionRef:j})=>{var v;const R=n.useContext(o.ThemeContext),C=r.Breakpoint["sm-max"]({theme:R}),P=n.useRef(null),{width:q=0}=i.useResizeDetector({targetRef:null!=j?j:P,handleHeight:!1}),D={name:"center",fn:({x:e,rects:t})=>{const n=0===e||e+t.floating.width===window.innerWidth,i=window.innerWidth<C;return{x:n&&i?(window.innerWidth-t.floating.width)/2:e}}},{refs:O,floatingStyles:W,context:k}=t.useFloating({open:u,onOpenChange:(e,t,n)=>{"escape-key"===n?null==h||h():e&&!u?null==c||c():!e&&u&&(null==g||g(n))},whileElementsMounted:t.autoUpdate,placement:l(b),middleware:[t.offset(y),t.flip(),t.shift({limiter:t.limitShift()}),t.size({apply({availableHeight:e,elements:t}){!w||e>=t.floating.scrollHeight?t.floating.style.setProperty("--available-height",""):t.floating.style.setProperty("--available-height",`${Math.max(0,e)}px`)}}),D]}),H=s.useFloatingChild(),{isMounted:z,styles:M}=t.useTransitionStyles(k,{initial:{opacity:0},open:{opacity:1},duration:300}),T=t.useClick(k,{enabled:d,toggle:x,keyboardHandlers:x}),E=t.useDismiss(k,{enabled:d}),{getReferenceProps:I,getFloatingProps:S}=t.useInteractions([T,E]),A={elementWidth:q,styles:Object.assign(Object.assign(Object.assign({},M),W),{zIndex:null!==(v=null!=f?f:H)&&void 0!==v?v:50}),setFloatingRef:O.setFloating,getFloatingProps:S};return e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({ref:e=>{P.current=e,O.setReference(e)}},I(),{children:p()})),z&&e.jsx(t.FloatingPortal,{root:F,children:e.jsx(t.FloatingFocusManager,{context:k,modal:!1,initialFocus:-1,returnFocus:!1,children:e.jsx(a.Provider,{value:A,children:m(A)})})})]})},exports.useDropdownRender=()=>n.useContext(a);
+"use strict";var e=require("react/jsx-runtime"),t=require("@floating-ui/react"),i=require("react"),n=require("../../external/react-resize-detector/build/index.esm.js"),r=require("styled-components"),s=require("../../overlay/use-floating-context.js"),l=require("../../theme/index.js");require("../../util/calendar-helper.js"),require("../../util/date-helper.js"),require("../../util/date-input-helper.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("../../util/use-event.js"),a=require("../../util/use-previous.js");const u=e=>"right"===e?"bottom-end":"bottom-start",d=i.createContext({elementWidth:0,styles:{},setFloatingRef:()=>{},getFloatingProps:()=>({})});exports.DropdownRenderContext=d,exports.ElementWithDropdown=({enabled:c,isOpen:g,onOpen:h,onClose:p,onDismiss:f,onHide:m,renderElement:x,renderDropdown:j,customZIndex:v,clickToToggle:y=!1,offset:b=0,alignment:q="left",fitAvailableHeight:w,rootNode:F,positionRef:R})=>{var C;const P=i.useContext(r.ThemeContext),D=l.Breakpoint["sm-max"]({theme:P}),O=i.useRef(null),{width:H=0}=n.useResizeDetector({targetRef:null!=R?R:O,handleHeight:!1}),W={name:"center",fn:({x:e,rects:t})=>{const i=0===e||e+t.floating.width===window.innerWidth,n=window.innerWidth<D;return{x:i&&n?(window.innerWidth-t.floating.width)/2:e}}},{refs:k,floatingStyles:E,context:z}=t.useFloating({open:g,onOpenChange:(e,t,i)=>{"escape-key"===i?null==f||f():e&&!g?null==h||h():!e&&g&&(null==p||p(i))},whileElementsMounted:t.autoUpdate,placement:u(q),middleware:[t.offset(b),t.flip(),t.shift({limiter:t.limitShift()}),t.size({apply({availableHeight:e,elements:t}){!w||e>=t.floating.scrollHeight?t.floating.style.setProperty("--available-height",""):t.floating.style.setProperty("--available-height",`${Math.max(0,e)}px`)}}),W]}),M=s.useFloatingChild(),{isMounted:T,styles:I}=t.useTransitionStyles(z,{initial:{opacity:0},open:{opacity:1},duration:300}),S=t.useClick(z,{enabled:c,toggle:y,keyboardHandlers:y}),A=t.useDismiss(z,{enabled:c}),{getReferenceProps:B,getFloatingProps:N}=t.useInteractions([S,A]),U=a.usePrevious(T),Z=o.useEvent((()=>null==m?void 0:m()));i.useEffect((()=>{U&&!T&&Z()}),[U,T,Z]);const $={elementWidth:H,styles:Object.assign(Object.assign(Object.assign({},I),E),{zIndex:null!==(C=null!=v?v:M)&&void 0!==C?C:50}),setFloatingRef:k.setFloating,getFloatingProps:N};return e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({ref:e=>{O.current=e,k.setReference(e)}},B(),{children:x()})),T&&e.jsx(t.FloatingPortal,{root:F,children:e.jsx(t.FloatingFocusManager,{context:z,modal:!1,initialFocus:-1,returnFocus:!1,children:e.jsx(d.Provider,{value:$,children:j($)})})})]})},exports.useDropdownRender=()=>i.useContext(d);
 //# sourceMappingURL=element-with-dropdown.js.map

package/cjs/shared/dropdown-wrapper/element-with-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"element-with-dropdown.js","sources":["../../../../src/shared/dropdown-wrapper/element-with-dropdown.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    FloatingPortal,\n    Middleware,\n    OpenChangeReason,\n    Placement,\n    autoUpdate,\n    flip,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport {\n    CSSProperties,\n    RefObject,\n    createContext,\n    useContext,\n    useRef,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport { Breakpoint } from \"../../theme\";\nimport { DropdownAlignmentType } from \"./types\";\n\nexport interface DropdownRenderProps {\n    elementWidth: number;\n    styles: CSSProperties;\n    setFloatingRef: (node: HTMLElement | null) => void;\n    getFloatingProps: (\n        userProps?: React.HTMLProps<HTMLElement>\n    ) => Record<string, unknown>;\n}\n\ninterface ElementWithDropdownProps {\n    enabled: boolean;\n    isOpen: boolean;\n    onOpen?: () => void | undefined;\n    onClose?: (reason: OpenChangeReason | undefined) => void | undefined;\n    onDismiss?: () => void | undefined;\n    renderElement: () => React.ReactNode;\n    renderDropdown: (props: DropdownRenderProps) => React.ReactNode;\n    customZIndex?: number | undefined;\n    clickToToggle?: boolean | undefined;\n    /* the distance between the reference element and the dropdown */\n    offset?: number | undefined;\n    /* the alignment of the dropdown to the left or right of the reference element */\n    alignment?: DropdownAlignmentType | undefined;\n    fitAvailableHeight?: boolean | undefined;\n    /**\n     * The root element that contains the popover element. Defaults to the document body.\n     *\n     * If the parent that contains the trigger element has a higher z-index than the popover,\n     * the popover may not be visible. Specify the parent element here instead\n     */\n    rootNode?: RefObject<HTMLElement> | undefined;\n    /** If set, the `elementWidth` refers to this instead of the reference element */\n    positionRef?: RefObject<HTMLElement> | undefined;\n}\n\nconst getFloatingPlacement = (alignment: DropdownAlignmentType): Placement => {\n    switch (alignment) {\n        case \"right\":\n            return \"bottom-end\";\n        case \"left\":\n        default:\n            return \"bottom-start\";\n    }\n};\n\nconst DEFAULT_Z_INDEX = 50;\n\nexport const DropdownRenderContext = createContext<DropdownRenderProps>({\n    elementWidth: 0,\n    styles: {},\n    setFloatingRef: () => {\n        // noop\n    },\n    getFloatingProps: () => ({}),\n});\n\nexport const useDropdownRender = () => {\n    return useContext(DropdownRenderContext);\n};\n\n/**\n * A wrapper to handle the common pattern of a field with a card-based dropdown\n * using Floating UI\n *\n * Usage:\n * - Specify `renderElement` for the main field\n * - Specify `renderDropdown` for the dropdown\n * - Use `isOpen` to control the visibility of the dropdown\n * - Handle changes in visibility with `onOpen`, `onClose` and `onDismiss`\n * - If your dropdown can resize, set the css like so: `max-height: var(--available-height);`\n * - If your dropdown has a preferred max-height, set the css like so:\n *   `max-height: min(100px, var(--available-height, infinity * 1px))`\n *\n * Pass the floating props to the dropdown:\n * ```\n * <DropdownContainer\n *   ref={setFloatingRef}\n *   style={styles}\n *   {...getFloatingProps()}\n * >\n * </DropdownContainer>\n * ```\n *\n * If you need event listeners, pass them to `getFloatingProps()`:\n * ```\n * getFloatingProps({\n *   onClick: handleOnClick\n * })\n * ```\n */\nexport const ElementWithDropdown = ({\n    enabled,\n    isOpen,\n    onOpen,\n    onClose,\n    onDismiss,\n    renderElement,\n    renderDropdown,\n    customZIndex,\n    clickToToggle = false,\n    offset: dropdownOffset = 0,\n    alignment = \"left\",\n    fitAvailableHeight,\n    rootNode,\n    positionRef,\n}: ElementWithDropdownProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = Breakpoint[\"sm-max\"]({ theme });\n    const elementRef = useRef<HTMLDivElement | null>(null);\n    const { width: referenceWidth = 0 } = useResizeDetector({\n        targetRef: positionRef ?? elementRef,\n        handleHeight: false,\n    });\n    const center: Middleware = {\n        name: \"center\",\n        fn: ({ x, rects }) => {\n            const noGapInBetween =\n                x === 0 || x + rects.floating.width === window.innerWidth;\n            const isMobileScreen = window.innerWidth < mobileBreakpoint;\n            return {\n                x:\n                    noGapInBetween && isMobileScreen\n                        ? (window.innerWidth - rects.floating.width) / 2\n                        : x,\n            };\n        },\n    };\n    const { refs, floatingStyles, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open, _event, reason) => {\n            if (reason === \"escape-key\") {\n                onDismiss?.();\n            } else if (open && !isOpen) {\n                onOpen?.();\n            } else if (!open && isOpen) {\n                onClose?.(reason);\n            }\n        },\n        whileElementsMounted: autoUpdate,\n        placement: getFloatingPlacement(alignment),\n        middleware: [\n            offset(dropdownOffset),\n            flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            size({\n                // shrink to fit available vertical space\n                apply({ availableHeight, elements }) {\n                    if (\n                        !fitAvailableHeight ||\n                        availableHeight >= elements.floating.scrollHeight\n                    ) {\n                        // reset this so that dropdown can expand as needed\n                        elements.floating.style.setProperty(\n                            \"--available-height\",\n                            \"\"\n                        );\n                        return;\n                    }\n\n                    elements.floating.style.setProperty(\n                        \"--available-height\",\n                        `${Math.max(0, availableHeight)}px`\n                    );\n                },\n            }),\n            center,\n        ],\n    });\n    const parentZIndex = useFloatingChild();\n\n    const { isMounted, styles } = useTransitionStyles(context, {\n        initial: { opacity: 0 },\n        open: { opacity: 1 },\n        duration: 300,\n    });\n\n    const click = useClick(context, {\n        enabled,\n        toggle: clickToToggle,\n        keyboardHandlers: clickToToggle,\n    });\n    const dismiss = useDismiss(context, { enabled });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n    ]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const dropdownRenderProps = {\n        elementWidth: referenceWidth,\n        styles: {\n            ...styles,\n            ...floatingStyles,\n            zIndex: customZIndex ?? parentZIndex ?? DEFAULT_Z_INDEX,\n        },\n        setFloatingRef: refs.setFloating,\n        getFloatingProps,\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    elementRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps()}\n            >\n                {renderElement()}\n            </div>\n            {isMounted && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                        returnFocus={false} // leads to focus trap. parent to handle the final focus state\n                    >\n                        <DropdownRenderContext.Provider\n                            value={dropdownRenderProps}\n                        >\n                            {renderDropdown(dropdownRenderProps)}\n                        </DropdownRenderContext.Provider>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","enabled","isOpen","onOpen","onClose","onDismiss","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","theme","useContext","ThemeContext","mobileBreakpoint","Breakpoint","elementRef","useRef","width","referenceWidth","useResizeDetector","targetRef","handleHeight","center","name","fn","x","rects","noGapInBetween","floating","window","innerWidth","isMobileScreen","refs","floatingStyles","context","useFloating","open","onOpenChange","_event","reason","whileElementsMounted","autoUpdate","placement","middleware","flip","shift","limiter","limitShift","size","apply","availableHeight","elements","scrollHeight","style","setProperty","Math","max","parentZIndex","useFloatingChild","isMounted","useTransitionStyles","initial","opacity","duration","click","useClick","toggle","keyboardHandlers","dismiss","useDismiss","getReferenceProps","useInteractions","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value"],"mappings":"4RAkEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAAA,cAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,iEAqCI,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBjB,YAAY,OACZkB,qBACAC,WACAC,wBAKA,MAAMC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,WAAW,UAAU,CAAEJ,UAC1CK,EAAaC,EAAAA,OAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAAA,kBAAkB,CACpDC,UAAWX,QAAAA,EAAeM,EAC1BM,cAAc,IAEZC,EAAqB,CACvBC,KAAM,SACNC,GAAI,EAAGC,IAAGC,YACN,MAAMC,EACI,IAANF,GAAWA,EAAIC,EAAME,SAASX,QAAUY,OAAOC,WAC7CC,EAAiBF,OAAOC,WAAajB,EAC3C,MAAO,CACHY,EACIE,GAAkBI,GACXF,OAAOC,WAAaJ,EAAME,SAASX,OAAS,EAC7CQ,EACb,IAGHO,KAAEA,EAAIC,eAAEA,EAAcC,QAAEA,GAAYC,EAAAA,YAAY,CAClDC,KAAMvC,EACNwC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAvC,SAAAA,IACOoC,IAASvC,EAChBC,SAAAA,KACQsC,GAAQvC,IAChBE,SAAAA,EAAUwC,GACd,EAEJC,qBAAsBC,EAAAA,WACtBC,UAAWtD,EAAqBC,GAChCsD,WAAY,CACRtC,EAAAA,OAAOC,GACPsC,SACAC,QAAM,CACFC,QAASC,EAAAA,eAEbC,OAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhB5C,GACD2C,GAAmBC,EAASvB,SAASwB,aAGrCD,EAASvB,SAASyB,MAAMC,YACpB,qBACA,IAKRH,EAASvB,SAASyB,MAAMC,YACpB,qBACA,GAAGC,KAAKC,IAAI,EAAGN,OAEvB,IAEJ5B,KAGFmC,EAAeC,EAAAA,oBAEfC,UAAEA,EAASlE,OAAEA,GAAWmE,EAAAA,oBAAoB1B,EAAS,CACvD2B,QAAS,CAAEC,QAAS,GACpB1B,KAAM,CAAE0B,QAAS,GACjBC,SAAU,MAGRC,EAAQC,EAAAA,SAAS/B,EAAS,CAC5BtC,UACAsE,OAAQ9D,EACR+D,iBAAkB/D,IAEhBgE,EAAUC,EAAAA,WAAWnC,EAAS,CAAEtC,aAEhC0E,kBAAEA,EAAiB3E,iBAAEA,GAAqB4E,kBAAgB,CAC5DP,EACAI,IAMEI,EAAsB,CACxBhF,aAAc0B,EACdzB,oDACOA,GACAwC,GAAc,CACjBwC,OAAoC,QAA5BC,EAAAvE,QAAAA,EAAgBsD,SAAY,IAAAiB,EAAAA,EA5JxB,KA8JhBhF,eAAgBsC,EAAK2C,YACrBhF,oBAGJ,OACIiF,6BACIC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFlE,EAAWmE,QAAUD,EACrBjD,EAAKmD,aAAaF,EAAK,GAEvBX,IAAmB,CAAAc,SAEtBnF,OAEJ0D,GACGkB,EAAAA,IAACQ,EAAAA,gBAAeC,KAAM9E,EAAQ4E,SAC1BP,EAAAA,IAACU,uBAAoB,CACjBrD,QAASA,EACTsD,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAAAA,IAACvF,EAAsBqG,SAAQ,CAC3BC,MAAOpB,EAAmBY,SAEzBlF,EAAesE,WAKjC,4BAlLsB,IACtB7D,EAAAA,WAAWrB"}
+{"version":3,"file":"element-with-dropdown.js","sources":["../../../../src/shared/dropdown-wrapper/element-with-dropdown.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    FloatingPortal,\n    Middleware,\n    OpenChangeReason,\n    Placement,\n    autoUpdate,\n    flip,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport {\n    CSSProperties,\n    RefObject,\n    createContext,\n    useContext,\n    useEffect,\n    useRef,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport { Breakpoint } from \"../../theme\";\nimport { useEvent, usePrevious } from \"../../util\";\nimport { DropdownAlignmentType } from \"./types\";\n\nexport interface DropdownRenderProps {\n    elementWidth: number;\n    styles: CSSProperties;\n    setFloatingRef: (node: HTMLElement | null) => void;\n    getFloatingProps: (\n        userProps?: React.HTMLProps<HTMLElement>\n    ) => Record<string, unknown>;\n}\n\ninterface ElementWithDropdownProps {\n    enabled: boolean;\n    isOpen: boolean;\n    onOpen?: (() => void) | undefined;\n    onClose?: ((reason: OpenChangeReason | undefined) => void) | undefined;\n    onDismiss?: (() => void) | undefined;\n    onHide?: (() => void) | undefined;\n    renderElement: () => React.ReactNode;\n    renderDropdown: (props: DropdownRenderProps) => React.ReactNode;\n    customZIndex?: number | undefined;\n    clickToToggle?: boolean | undefined;\n    /* the distance between the reference element and the dropdown */\n    offset?: number | undefined;\n    /* the alignment of the dropdown to the left or right of the reference element */\n    alignment?: DropdownAlignmentType | undefined;\n    fitAvailableHeight?: boolean | undefined;\n    /**\n     * The root element that contains the popover element. Defaults to the document body.\n     *\n     * If the parent that contains the trigger element has a higher z-index than the popover,\n     * the popover may not be visible. Specify the parent element here instead\n     */\n    rootNode?: RefObject<HTMLElement> | undefined;\n    /** If set, the `elementWidth` refers to this instead of the reference element */\n    positionRef?: RefObject<HTMLElement> | undefined;\n}\n\nconst getFloatingPlacement = (alignment: DropdownAlignmentType): Placement => {\n    switch (alignment) {\n        case \"right\":\n            return \"bottom-end\";\n        case \"left\":\n        default:\n            return \"bottom-start\";\n    }\n};\n\nconst DEFAULT_Z_INDEX = 50;\n\nexport const DropdownRenderContext = createContext<DropdownRenderProps>({\n    elementWidth: 0,\n    styles: {},\n    setFloatingRef: () => {\n        // noop\n    },\n    getFloatingProps: () => ({}),\n});\n\nexport const useDropdownRender = () => {\n    return useContext(DropdownRenderContext);\n};\n\n/**\n * A wrapper to handle the common pattern of a field with a card-based dropdown\n * using Floating UI\n *\n * Usage:\n * - Specify `renderElement` for the main field\n * - Specify `renderDropdown` for the dropdown\n * - Use `isOpen` to control the visibility of the dropdown\n * - Handle changes in visibility with `onOpen`, `onClose` and `onDismiss`\n * - If your dropdown can resize, set the css like so: `max-height: var(--available-height);`\n * - If your dropdown has a preferred max-height, set the css like so:\n *   `max-height: min(100px, var(--available-height, infinity * 1px))`\n *\n * Pass the floating props to the dropdown:\n * ```\n * <DropdownContainer\n *   ref={setFloatingRef}\n *   style={styles}\n *   {...getFloatingProps()}\n * >\n * </DropdownContainer>\n * ```\n *\n * If you need event listeners, pass them to `getFloatingProps()`:\n * ```\n * getFloatingProps({\n *   onClick: handleOnClick\n * })\n * ```\n */\nexport const ElementWithDropdown = ({\n    enabled,\n    isOpen,\n    onOpen,\n    onClose,\n    onDismiss,\n    onHide,\n    renderElement,\n    renderDropdown,\n    customZIndex,\n    clickToToggle = false,\n    offset: dropdownOffset = 0,\n    alignment = \"left\",\n    fitAvailableHeight,\n    rootNode,\n    positionRef,\n}: ElementWithDropdownProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = Breakpoint[\"sm-max\"]({ theme });\n    const elementRef = useRef<HTMLDivElement | null>(null);\n    const { width: referenceWidth = 0 } = useResizeDetector({\n        targetRef: positionRef ?? elementRef,\n        handleHeight: false,\n    });\n    const center: Middleware = {\n        name: \"center\",\n        fn: ({ x, rects }) => {\n            const noGapInBetween =\n                x === 0 || x + rects.floating.width === window.innerWidth;\n            const isMobileScreen = window.innerWidth < mobileBreakpoint;\n            return {\n                x:\n                    noGapInBetween && isMobileScreen\n                        ? (window.innerWidth - rects.floating.width) / 2\n                        : x,\n            };\n        },\n    };\n    const { refs, floatingStyles, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open, _event, reason) => {\n            if (reason === \"escape-key\") {\n                onDismiss?.();\n            } else if (open && !isOpen) {\n                onOpen?.();\n            } else if (!open && isOpen) {\n                onClose?.(reason);\n            }\n        },\n        whileElementsMounted: autoUpdate,\n        placement: getFloatingPlacement(alignment),\n        middleware: [\n            offset(dropdownOffset),\n            flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            size({\n                // shrink to fit available vertical space\n                apply({ availableHeight, elements }) {\n                    if (\n                        !fitAvailableHeight ||\n                        availableHeight >= elements.floating.scrollHeight\n                    ) {\n                        // reset this so that dropdown can expand as needed\n                        elements.floating.style.setProperty(\n                            \"--available-height\",\n                            \"\"\n                        );\n                        return;\n                    }\n\n                    elements.floating.style.setProperty(\n                        \"--available-height\",\n                        `${Math.max(0, availableHeight)}px`\n                    );\n                },\n            }),\n            center,\n        ],\n    });\n    const parentZIndex = useFloatingChild();\n\n    const { isMounted, styles } = useTransitionStyles(context, {\n        initial: { opacity: 0 },\n        open: { opacity: 1 },\n        duration: 300,\n    });\n\n    const click = useClick(context, {\n        enabled,\n        toggle: clickToToggle,\n        keyboardHandlers: clickToToggle,\n    });\n    const dismiss = useDismiss(context, { enabled });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n    ]);\n\n    // =========================================================================\n    // ON HIDE EFFECT\n    // =========================================================================\n    const prevIsMounted = usePrevious(isMounted);\n    const onHideEvent = useEvent(() => onHide?.());\n\n    useEffect(() => {\n        if (prevIsMounted && !isMounted) {\n            onHideEvent();\n        }\n    }, [prevIsMounted, isMounted, onHideEvent]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const dropdownRenderProps = {\n        elementWidth: referenceWidth,\n        styles: {\n            ...styles,\n            ...floatingStyles,\n            zIndex: customZIndex ?? parentZIndex ?? DEFAULT_Z_INDEX,\n        },\n        setFloatingRef: refs.setFloating,\n        getFloatingProps,\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    elementRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps()}\n            >\n                {renderElement()}\n            </div>\n            {isMounted && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                        returnFocus={false} // leads to focus trap. parent to handle the final focus state\n                    >\n                        <DropdownRenderContext.Provider\n                            value={dropdownRenderProps}\n                        >\n                            {renderDropdown(dropdownRenderProps)}\n                        </DropdownRenderContext.Provider>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","enabled","isOpen","onOpen","onClose","onDismiss","onHide","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","theme","useContext","ThemeContext","mobileBreakpoint","Breakpoint","elementRef","useRef","width","referenceWidth","useResizeDetector","targetRef","handleHeight","center","name","fn","x","rects","noGapInBetween","floating","window","innerWidth","isMobileScreen","refs","floatingStyles","context","useFloating","open","onOpenChange","_event","reason","whileElementsMounted","autoUpdate","placement","middleware","flip","shift","limiter","limitShift","size","apply","availableHeight","elements","scrollHeight","style","setProperty","Math","max","parentZIndex","useFloatingChild","isMounted","useTransitionStyles","initial","opacity","duration","click","useClick","toggle","keyboardHandlers","dismiss","useDismiss","getReferenceProps","useInteractions","prevIsMounted","usePrevious","onHideEvent","useEvent","useEffect","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value"],"mappings":"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"}

package/cjs/table/table.styles.js

@@ -3,13 +3,11 @@
     border: ${r.Border["width-010"]} ${r.Border.solid} ${t};
     border-radius: ${r.Radius.md};
 
-    // Hide scrollbar
+    /* Hide scrollbar */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
     &::-webkit-scrollbar {
-        display: none;
-    }
-    * {
-        -ms-overflow-style: none; /* IE and Edge */
-        scrollbar-width: none; /* Firefox */
+        display: none; /* Chrome/Safari/Webkit */
     }
 `;i.displayName="Table.Container";const l=d.default.table`
     text-align: left;

package/cjs/table/table.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.js","sources":["../../../src/table/table.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = Colour[\"border\"];\nconst fontColor = Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const TableWrapper = styled.div`\n    overflow: auto;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    border-radius: ${Radius[\"md\"]};\n\n    // Hide scrollbar\n    &::-webkit-scrollbar {\n        display: none;\n    }\n    * {\n        -ms-overflow-style: none; /* IE and Edge */\n        scrollbar-width: none; /* Firefox */\n    }\n`;\n\nTableWrapper.displayName = \"Table.Container\";\n\nexport const TableComponent = styled.table`\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\nTableComponent.displayName = \"Table.Table\";\n\nexport const TableBody = styled.tbody`\n    :where(tr:last-child) {\n        td {\n            border-bottom: none;\n        }\n    }\n`;\n\nexport const HeaderCell = styled.th`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${fontColor};\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n\nexport const BodyRow = styled.tr`\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const BodyCell = styled.td`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n"],"names":["borderColor","Colour","fontColor","TableWrapper","styled","div","Border","Radius","displayName","TableComponent","table","TableBody","tbody","HeaderCell","th","Spacing","BodyRow","tr","BodyCell","td"],"mappings":"kKAMA,MAAMA,EAAcC,EAAAA,OAAe,OAC7BC,EAAYD,EAAAA,OAAa,KAKlBE,EAAeC,EAAAA,QAAOC,GAAG;;cAExBC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKN;qBACnCO,EAAAA,OAAW;;;;;;;;;;EAYhCJ,EAAaK,YAAc,kBAEpB,MAAMC,EAAiBL,EAAAA,QAAOM,KAAK;;;;;EAO1CD,EAAeD,YAAc,cAEtB,MAAMG,EAAYP,EAAAA,QAAOQ,KAAK;;;;;;EAQxBC,EAAaT,EAAAA,QAAOU,EAAE;eACpBC,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;;aAInCb;wBACWD,EAAAA,OAAO;;qBAEVK,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKN;;;wBAGvCe,EAAAA,QAAQ;;;yBAGPA,EAAAA,QAAQ;;EAIpBC,EAAUZ,EAAAA,QAAOa,EAAE;wBACRhB,EAAAA,OAAW;kBACjBK,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKN;EAG/CkB,EAAWd,EAAAA,QAAOe,EAAE;eAClBJ,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;aAEnCb;qBACQI,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKN;;;wBAGvCe,EAAAA,QAAQ;;;yBAGPA,EAAAA,QAAQ;;"}
+{"version":3,"file":"table.styles.js","sources":["../../../src/table/table.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = Colour[\"border\"];\nconst fontColor = Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const TableWrapper = styled.div`\n    overflow: auto;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nTableWrapper.displayName = \"Table.Container\";\n\nexport const TableComponent = styled.table`\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\nTableComponent.displayName = \"Table.Table\";\n\nexport const TableBody = styled.tbody`\n    :where(tr:last-child) {\n        td {\n            border-bottom: none;\n        }\n    }\n`;\n\nexport const HeaderCell = styled.th`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${fontColor};\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n\nexport const BodyRow = styled.tr`\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const BodyCell = styled.td`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n"],"names":["borderColor","Colour","fontColor","TableWrapper","styled","div","Border","Radius","displayName","TableComponent","table","TableBody","tbody","HeaderCell","th","Spacing","BodyRow","tr","BodyCell","td"],"mappings":"kKAMA,MAAMA,EAAcC,EAAAA,OAAe,OAC7BC,EAAYD,EAAAA,OAAa,KAKlBE,EAAeC,EAAAA,QAAOC,GAAG;;cAExBC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKN;qBACnCO,EAAAA,OAAW;;;;;;;;EAUhCJ,EAAaK,YAAc,kBAEpB,MAAMC,EAAiBL,EAAAA,QAAOM,KAAK;;;;;EAO1CD,EAAeD,YAAc,cAEtB,MAAMG,EAAYP,EAAAA,QAAOQ,KAAK;;;;;;EAQxBC,EAAaT,EAAAA,QAAOU,EAAE;eACpBC,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;;aAInCb;wBACWD,EAAAA,OAAO;;qBAEVK,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKN;;;wBAGvCe,EAAAA,QAAQ;;;yBAGPA,EAAAA,QAAQ;;EAIpBC,EAAUZ,EAAAA,QAAOa,EAAE;wBACRhB,EAAAA,OAAW;kBACjBK,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKN;EAG/CkB,EAAWd,EAAAA,QAAOe,EAAE;eAClBJ,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;aAEnCb;qBACQI,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKN;;;wBAGvCe,EAAAA,QAAQ;;;yBAGPA,EAAAA,QAAQ;;"}

package/cjs/util/use-throttle.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react");exports.useThrottle=function(r,u){const t=e.useRef(r),n=e.useRef(0),c=e.useRef(null);return e.useEffect((()=>{t.current=r}),[r]),e.useEffect((()=>()=>{null!==c.current&&clearTimeout(c.current)}),[]),e.useCallback(((...e)=>{const r=Date.now(),l=r-n.current;null!==c.current&&(clearTimeout(c.current),c.current=null),l>=u?(n.current=r,t.current(...e)):c.current=setTimeout((()=>{n.current=Date.now(),c.current=null,t.current(...e)}),u-l)}),[u])};
+//# sourceMappingURL=use-throttle.js.map

package/cjs/util/use-throttle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-throttle.js","sources":["../../../src/util/use-throttle.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useThrottle<T extends (...args: any[]) => any>(\n    callback: T,\n    wait: number\n): T {\n    const callbackRef = useRef<T>(callback);\n    const lastCalledRef = useRef<number>(0);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        callbackRef.current = callback;\n    }, [callback]);\n\n    useEffect(() => {\n        return () => {\n            if (timeoutRef.current !== null) {\n                clearTimeout(timeoutRef.current);\n            }\n        };\n    }, []);\n\n    return useCallback(\n        (...args: Parameters<T>) => {\n            const now = Date.now();\n            const elapsed = now - lastCalledRef.current;\n\n            if (timeoutRef.current !== null) {\n                clearTimeout(timeoutRef.current);\n                timeoutRef.current = null;\n            }\n\n            if (elapsed >= wait) {\n                lastCalledRef.current = now;\n                callbackRef.current(...args);\n            } else {\n                timeoutRef.current = setTimeout(() => {\n                    lastCalledRef.current = Date.now();\n                    timeoutRef.current = null;\n                    callbackRef.current(...args);\n                }, wait - elapsed);\n            }\n        },\n        [wait]\n    ) as T;\n}\n"],"names":["callback","wait","callbackRef","useRef","lastCalledRef","timeoutRef","useEffect","current","clearTimeout","useCallback","args","now","Date","elapsed","setTimeout"],"mappings":"wDAGM,SACFA,EACAC,GAEA,MAAMC,EAAcC,EAAAA,OAAUH,GACxBI,EAAgBD,EAAAA,OAAe,GAC/BE,EAAaF,EAAAA,OAA6C,MAchE,OAZAG,EAAAA,WAAU,KACNJ,EAAYK,QAAUP,CAAQ,GAC/B,CAACA,IAEJM,EAAAA,WAAU,IACC,KACwB,OAAvBD,EAAWE,SACXC,aAAaH,EAAWE,QAC5B,GAEL,IAEIE,EAAAA,aACH,IAAIC,KACA,MAAMC,EAAMC,KAAKD,MACXE,EAAUF,EAAMP,EAAcG,QAET,OAAvBF,EAAWE,UACXC,aAAaH,EAAWE,SACxBF,EAAWE,QAAU,MAGrBM,GAAWZ,GACXG,EAAcG,QAAUI,EACxBT,EAAYK,WAAWG,IAEvBL,EAAWE,QAAUO,YAAW,KAC5BV,EAAcG,QAAUK,KAAKD,MAC7BN,EAAWE,QAAU,KACrBL,EAAYK,WAAWG,EAAK,GAC7BT,EAAOY,EACd,GAEJ,CAACZ,GAET"}

package/codemods/data.ts

@@ -1,4 +1,23 @@
-export const sizePropMapping = {
+export const textComponentMap = {
+    D1: "HeadingXXL",
+    D2: "HeadingXL",
+    D3: "HeadingMD",
+    D4: "HeadingSM",
+    H1: "HeadingLG",
+    H2: "HeadingMD",
+    H3: "HeadingSM",
+    H4: "HeadingXS",
+    H5: "BodyMD",
+    H6: "BodySM",
+    DBody: "HeadingSM",
+    Body: "BodyBL",
+    BodySmall: "BodyMD",
+    XSmall: "BodyXS",
+    "Hyperlink.Default": "LinkBL",
+    "Hyperlink.Small": "LinkMD",
+};
+
+export const textStyleFontMap = {
     D1: "heading-xxl",
     D2: "heading-xl",
     D3: "heading-md",
@@ -14,3 +33,16 @@ export const sizePropMapping = {
     BodySmall: "body-md",
     XSmall: "body-xs",
 };
+
+export const weightMap = {
+    regular: "regular",
+    semibold: "semibold",
+    bold: "bold",
+    light: "light",
+    black: "bold",
+    400: "regular",
+    600: "semibold",
+    700: "bold",
+    300: "light",
+    900: "bold",
+};