@preply/ds-docs 11.3.0 → 11.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.storybook/main.ts +8 -0
- package/dist/assets/{00.LayoutFlex.stories-oDygdYoI.js → 00.LayoutFlex.stories-BPok5Gmm.js} +1 -1
- package/dist/assets/{00.applications-CYsULPew.js → 00.applications-BGZaoKgL.js} +1 -1
- package/dist/assets/{00.favicons.guide-CH6Gi2mg.js → 00.favicons.guide-D5wPncOn.js} +1 -1
- package/dist/assets/{00.token-explorer-C_Go53CA.js → 00.token-explorer-BDLlwhc6.js} +1 -1
- package/dist/assets/{00.using-responsive-props-JIrga6ab.js → 00.using-responsive-props-BRxnFd5i.js} +1 -1
- package/dist/assets/{01.semantic-tokens-3BaDr39t.js → 01.semantic-tokens-CFudZ7pc.js} +1 -1
- package/dist/assets/{01.using-shorthand-props-BXu4Nck4.js → 01.using-shorthand-props-DchZCZhq.js} +1 -1
- package/dist/assets/{10.Combinations.stories-SaJOx9D-.js → 10.Combinations.stories-BN4qNVGI.js} +1 -1
- package/dist/assets/{10.fonts.guide-DkOyZCNQ.js → 10.fonts.guide-BWS-fMyC.js} +1 -1
- package/dist/assets/{10.ssr-D-0bM4ee.js → 10.ssr-DFhHeGSZ.js} +1 -1
- package/dist/assets/{11.fonts.explorer-D6KIcb2q.js → 11.fonts.explorer-BS1XxSRj.js} +1 -1
- package/dist/assets/{11.ssr.app-router-DWtYqFlx.js → 11.ssr.app-router-CWuMPO3g.js} +1 -1
- package/dist/assets/{20.libraries-BlqbfWjy.js → 20.libraries-J4C2b4WP.js} +1 -1
- package/dist/assets/{2025-q4-ds-cleanup-BUrvo7oQ.js → 2025-q4-ds-cleanup-DzhmHakd.js} +1 -1
- package/dist/assets/30.icons.explorer-DkBObzh_.js +72 -0
- package/dist/assets/{30.storybook-CNvYWdc7.js → 30.storybook-1O5EtrKp.js} +1 -1
- package/dist/assets/{40.illustrations.explorer-CAYAdo7r.js → 40.illustrations.explorer-C_NqekHv.js} +1 -1
- package/dist/assets/{60.components-odtQau37.js → 60.components-CxzcTHHY.js} +1 -1
- package/dist/assets/{90.advanced-nCsVunZT.js → 90.advanced-J2ehdLM6.js} +1 -1
- package/dist/assets/{Accordion-grHCnfbZ.js → Accordion-CWMWW-O5.js} +1 -1
- package/dist/assets/{Accordion.stories-CTbvRFnt.js → Accordion.stories-DDqM6MXv.js} +1 -1
- package/dist/assets/{Accordion.tests.stories-B6g6Kr6m.js → Accordion.tests.stories-DN9L-q3H.js} +1 -1
- package/dist/assets/{AlertBanner.primitives.stories-D4-bo1JS.js → AlertBanner.primitives.stories-mKVHs8FF.js} +1 -1
- package/dist/assets/{AlertBanner.stories-BrNGGvfj.js → AlertBanner.stories-BV3lnGPY.js} +1 -1
- package/dist/assets/{AlertBannerAction-DvbUWtiW.js → AlertBannerAction-DU-Yr-4k.js} +9 -9
- package/dist/assets/{AlertDialog-Da2sPT1D.js → AlertDialog-CFUnhRAx.js} +1 -1
- package/dist/assets/{AlertDialog.stories-D7ALUucQ.js → AlertDialog.stories-DovmfFOJ.js} +1 -1
- package/dist/assets/{AvatarWithStatus-D02yNzQm.js → AvatarWithStatus-D83AKEVT.js} +2 -2
- package/dist/assets/{AvatarWithStatus.stories-CxBQAt3x.js → AvatarWithStatus.stories-D-ttnLWy.js} +1 -1
- package/dist/assets/{Badge-Ba7-qf6a.js → Badge-DeL8OM1F.js} +2 -2
- package/dist/assets/{Badge.stories-Dzxsvo2o.js → Badge.stories-BemzPh97.js} +1 -1
- package/dist/assets/{Box--iQMFWAl.js → Box-CcR4H93c.js} +1 -1
- package/dist/assets/{Box.stories-D0JGgXyX.js → Box.stories-B4Kkg_Wz.js} +1 -1
- package/dist/assets/{BubbleCounter-C7jrl0BR.js → BubbleCounter-CfdjWlAV.js} +1 -1
- package/dist/assets/{BubbleCounter.stories-C28ZYRgB.js → BubbleCounter.stories-DRq0-Or2.js} +1 -1
- package/dist/assets/{Button-DagS5hxP.js → Button--WTUF97E.js} +2 -2
- package/dist/assets/{Button.stories-CTvHtk-S.js → Button.stories-B5ddris9.js} +1 -1
- package/dist/assets/{ButtonBase-CMR6iWFG.js → ButtonBase-CMQthdSK.js} +1 -1
- package/dist/assets/{CalloutBanner.stories-BbHi-g9a.js → CalloutBanner.stories-C60JgqC0.js} +1 -1
- package/dist/assets/{CalloutBannerText-DP2O2LqI.js → CalloutBannerText-DDPb7LsF.js} +4 -4
- package/dist/assets/{Checkbox.stories-BWfWlkM3.js → Checkbox.stories-D6wUFMNN.js} +1 -1
- package/dist/assets/{Checkbox.tests.stories-iLD_cClo.js → Checkbox.tests.stories-FLl_ZNDM.js} +1 -1
- package/dist/assets/{Chips.stories-BikTAQab.js → Chips.stories-BfLNlLSh.js} +1 -1
- package/dist/assets/{Color-6BZIO3FS-BqH2EFjf.js → Color-6BZIO3FS-CcuLIbdP.js} +1 -1
- package/dist/assets/{ComposingDialogs.stories-ei_TWBhw.js → ComposingDialogs.stories-Bwtla9z9.js} +1 -1
- package/dist/assets/{ComposingPopovers.stories-DEmACL7_.js → ComposingPopovers.stories-BdgYJQKE.js} +1 -1
- package/dist/assets/{CountryFlag-DXTijnBa.js → CountryFlag-D1d90EPT.js} +1 -1
- package/dist/assets/{CountryFlag.stories-r9szKDdv.js → CountryFlag.stories-B0_35WJ9.js} +1 -1
- package/dist/assets/{CountryFlag.test.stories-DS8v3a4U.js → CountryFlag.test.stories-DGoCByQP.js} +1 -1
- package/dist/assets/{Dialog-a74MpEoC.js → Dialog-BT0Kd0KN.js} +1 -1
- package/dist/assets/{Dialog.primitives.stories-CkKykon1.js → Dialog.primitives.stories-DNe9f6uf.js} +1 -1
- package/dist/assets/{Dialog.stories-CoTCFYpz.js → Dialog.stories-C0BUsh4I.js} +1 -1
- package/dist/assets/{Dialog.test.stories-aF_5M6-z.js → Dialog.test.stories-BapfC0Yd.js} +1 -1
- package/dist/assets/{DialogActions-BsCqS7W7.js → DialogActions-BDIzA8PJ.js} +1 -1
- package/dist/assets/{DialogCloseButton-Df1XDsMW.js → DialogCloseButton-CAY9jDgH.js} +3 -3
- package/dist/assets/{DismissibleChips-QUmF1DlO.js → DismissibleChips-CMpz1ljr.js} +1 -1
- package/dist/assets/{DismissibleChips.stories-BbLkTYXP.js → DismissibleChips.stories-D8vGzcJU.js} +1 -1
- package/dist/assets/{DocsRenderer-LL677BLK-D55zMWRu.js → DocsRenderer-LL677BLK-DZVr0WqC.js} +1 -1
- package/dist/assets/{DropdownMenu-CEFQwkft.js → DropdownMenu-DJWxVTCB.js} +9 -9
- package/dist/assets/{DropdownMenu.stories-Bwd2yU64.js → DropdownMenu.stories-CejSoUQc.js} +1 -1
- package/dist/assets/{FormControl-C_Mh5dfi.js → FormControl-DoNLVcw2.js} +1 -1
- package/dist/assets/{FormControl.stories-Bs2ISm2I.js → FormControl.stories-CM0O-z49.js} +1 -1
- package/dist/assets/{Heading-Xmy4HTvU.js → Heading-B3jb_-J8.js} +1 -1
- package/dist/assets/{Heading.stories-6Dgn_J8U.js → Heading.stories-DjrU1PaC.js} +1 -1
- package/dist/assets/{Icon-C-oDFSRH.js → Icon-Dqr2b6tP.js} +1 -1
- package/dist/assets/{Icon-RSC-Ch-QtBFc.js → Icon-RSC-CIkzpnfO.js} +1 -1
- package/dist/assets/{Icon.stories-DA2UaTGv.js → Icon.stories-1leYoSZM.js} +1 -1
- package/dist/assets/IconButton-CQGXuX8O.js +9 -0
- package/dist/assets/{IconTile.stories-C4MpGbZs.js → IconTile.stories-C3MYzhR1.js} +1 -1
- package/dist/assets/{IntegrationWithReactHookForm.stories-6kdmvmQr.js → IntegrationWithReactHookForm.stories-7-TsLOR4.js} +1 -1
- package/dist/assets/{IntlFormattedCurrency.stories-DFdfoYCv.js → IntlFormattedCurrency.stories-C_afrVTI.js} +1 -1
- package/dist/assets/{IntlFormattedDateTime.stories-CHRJCN68.js → IntlFormattedDateTime.stories-DAllZCk9.js} +1 -1
- package/dist/assets/{LayoutFlex-CpktYRVX.js → LayoutFlex-BlWwmFhv.js} +1 -1
- package/dist/assets/{LayoutFlexItem-Dvv_cK8l.js → LayoutFlexItem-Ck-D8viJ.js} +1 -1
- package/dist/assets/{LayoutGrid-DvHLpq-e.js → LayoutGrid-BCMSACUf.js} +1 -1
- package/dist/assets/{LayoutGrid.stories-DCTuVuVw.js → LayoutGrid.stories-Dg8aAm6_.js} +1 -1
- package/dist/assets/{LayoutGridItem-n0bW9yG3.js → LayoutGridItem-BbJwYcHo.js} +1 -1
- package/dist/assets/{Link-DLL8OonN.js → Link-DbeaGxmu.js} +1 -1
- package/dist/assets/{Link.stories-D_FvQngK.js → Link.stories-HNRLDW5Y.js} +1 -1
- package/dist/assets/{MultiSelectChips-DSeV2AIy.js → MultiSelectChips-Bs8MJsJe.js} +2 -2
- package/dist/assets/{MultiSelectChips.stories-CKax5hXL.js → MultiSelectChips.stories-0xhNcMZn.js} +1 -1
- package/dist/assets/{NativeSelectField.stories-D3-RNzbp.js → NativeSelectField.stories-D27xdDZT.js} +4 -4
- package/dist/assets/{NumberField-CNBfsJCY.js → NumberField-WzHWHpwG.js} +4 -4
- package/dist/assets/{NumberField.stories-CHVQ_b9k.js → NumberField.stories-CKWwzkFc.js} +1 -1
- package/dist/assets/{ObserveIntersection-CR4IhuYz.js → ObserveIntersection-zL3YLMv6.js} +1 -1
- package/dist/assets/{ObserveIntersection.stories-D1FkxcMY.js → ObserveIntersection.stories-BXlW-mL4.js} +1 -1
- package/dist/assets/{OnboardingTooltip-BNwId6Jx.js → OnboardingTooltip-BzkMbW-Q.js} +1 -1
- package/dist/assets/{OnboardingTooltip.stories-npBmAhu4.js → OnboardingTooltip.stories-DpuZirIf.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-oxLHDwgd.js → OnboardingTooltip.tests.stories-DVqN90Ec.js} +1 -1
- package/dist/assets/{OnboardingTour-RWyquFZd.js → OnboardingTour-Ba_vMjzP.js} +1 -1
- package/dist/assets/{OnboardingTour.stories-CsdqirC3.js → OnboardingTour.stories-CU5yOTSQ.js} +1 -1
- package/dist/assets/{OnboardingTour.tests.stories-DkBfD2kH.js → OnboardingTour.tests.stories-CPyK1i_w.js} +1 -1
- package/dist/assets/{PasswordField-B2PnHIH1.js → PasswordField-D3gN_VbU.js} +4 -4
- package/dist/assets/{PasswordField.stories-CcnDrvIB.js → PasswordField.stories-B_DbiPEY.js} +1 -1
- package/dist/assets/{ProgressBar.stories-DtKBuyeU.js → ProgressBar.stories-BVBwLJ_h.js} +1 -1
- package/dist/assets/{ProgressSteps.stories-CCDOfqG3.js → ProgressSteps.stories-DpVfrFPk.js} +1 -1
- package/dist/assets/{PromoDialog-CdaXJHkH.js → PromoDialog-BpgSaMl7.js} +1 -1
- package/dist/assets/{RangeSlider-Eo2dw_WW.js → RangeSlider-CQsn2ggM.js} +1 -1
- package/dist/assets/{RangeSlider.stories-DAd-xGsP.js → RangeSlider.stories-B16rODmY.js} +1 -1
- package/dist/assets/{RatingInput.stories-0bwrwiHs.js → RatingInput.stories-D07FYTPA.js} +1 -1
- package/dist/assets/{SelectField-qBhGOYdK.js → SelectField-CtnC30IK.js} +5 -5
- package/dist/assets/{SelectField.stories-Iz2YZ_Bs.js → SelectField.stories-cV1joVTk.js} +1 -1
- package/dist/assets/{ShowOnIntersection-BMR5nazA.js → ShowOnIntersection-hAmOOTIR.js} +2 -2
- package/dist/assets/{ShowOnIntersection.stories-CSSgxbfv.js → ShowOnIntersection.stories-VS4hG4Et.js} +1 -1
- package/dist/assets/{SingleSelectChips-CFj7aR84.js → SingleSelectChips-lT5C7a2D.js} +2 -2
- package/dist/assets/{SingleSelectChips.stories-CJ3zaafZ.js → SingleSelectChips.stories-Du0LL0gN.js} +1 -1
- package/dist/assets/{Slider-Bxzp79ts.js → Slider-BgB4xT6m.js} +1 -1
- package/dist/assets/{Slider.stories-C872-jZV.js → Slider.stories-B0uFs4_2.js} +1 -1
- package/dist/assets/{Steps-CNOQ424q.js → Steps-Ny6Xdpfg.js} +1 -1
- package/dist/assets/{Steps.stories-GHgF9EAg.js → Steps.stories-y16vX2RP.js} +1 -1
- package/dist/assets/{Switch.stories-Dz3BYhCT.js → Switch.stories-D0M0AXLP.js} +1 -1
- package/dist/assets/{Text-Bj49UVGS.js → Text-Cy08WP3t.js} +1 -1
- package/dist/assets/{Text.stories-DjSvZaCW.js → Text.stories-kbD1oPtH.js} +1 -1
- package/dist/assets/{TextField-B4F8szIu.js → TextField-DtzGGo-n.js} +5 -5
- package/dist/assets/{TextField.stories-ZNn7FBmC.js → TextField.stories-BfnbdAlj.js} +1 -1
- package/dist/assets/{TextHighlighted-DPLkdIhv.js → TextHighlighted-BLFuNeOz.js} +1 -1
- package/dist/assets/{TextHighlighted.stories-CEPLsjw4.js → TextHighlighted.stories--iY-wUQl.js} +1 -1
- package/dist/assets/{TextInline-DVOlWF4R.js → TextInline-kNMy4GiU.js} +1 -1
- package/dist/assets/{TextInline.stories-DVE70fjR.js → TextInline.stories-B4fTBAXp.js} +1 -1
- package/dist/assets/{TextareaField-G733luKs.js → TextareaField-BAawMK2x.js} +4 -4
- package/dist/assets/{TextareaField.stories-Bqzxd-3e.js → TextareaField.stories-uB9XCMh4.js} +1 -1
- package/dist/assets/{Toast-CTlQ5Kx4.js → Toast-DtwiCXf7.js} +1 -1
- package/dist/assets/{Toast.stories-DcPkMFFv.js → Toast.stories-DaMiazCZ.js} +1 -1
- package/dist/assets/{Tooltip-DCzQmBi_.js → Tooltip-BKkZoXDV.js} +1 -1
- package/dist/assets/{Tooltip.stories-duE4AOVl.js → Tooltip.stories-wUZg70QA.js} +1 -1
- package/dist/assets/{Tooltip.tests.stories-BsQ0I33Q.js → Tooltip.tests.stories-CJYW12Q0.js} +1 -1
- package/dist/assets/{ai-integration-CUld8nBB.js → ai-integration-CmKZr_5q.js} +1 -1
- package/dist/assets/{breakpoints-CDLTCEqT.js → breakpoints-BL8wVg74.js} +1 -1
- package/dist/assets/{breakpoints-DyVmNUf9.js → breakpoints-BSvP6IHz.js} +1 -1
- package/dist/assets/{breakpoints-D3C_qtqX.js → breakpoints-vEwFHkjC.js} +1 -1
- package/dist/assets/{changelog-CY7pOlLk.js → changelog-wnfuTaGI.js} +11 -1
- package/dist/assets/{constants-Ce2rgJrk.js → constants-BRk8fyp8.js} +1 -5
- package/dist/assets/{createRequiredContext-dSBuii-4.js → createRequiredContext-BQNdOBzE.js} +2 -2
- package/dist/assets/{dist-nghRgjCb.js → dist-dJR9l15z.js} +1 -1
- package/dist/assets/{esm-BYGpffIq.js → esm-QYJ12Nr4.js} +1 -1
- package/dist/assets/{fonts-explorer.stories-DpO5HxZ3.js → fonts-explorer.stories-DLPdV7wh.js} +1 -1
- package/dist/assets/{getTokenVar-DG0TGXYc.js → getTokenVar-lvBbQceM.js} +1 -1
- package/dist/assets/{gradientBorders-C2jt5p-C.js → gradientBorders-DODVBPY0.js} +1 -1
- package/dist/assets/{hover-D6mzisaD.js → hover-Cc8ZlfuU.js} +1 -1
- package/dist/assets/{hover-DfbppVmU.js → hover-DgEYlXBi.js} +1 -1
- package/dist/assets/{hover-BCzGbPFV.js → hover-yxmGi-zx.js} +1 -1
- package/dist/assets/{iframe-kBDSpxRI.js → iframe-BuOXI2w6.js} +4 -4
- package/dist/assets/{intro-DQpyhoTG.js → intro-B-CaE2_E.js} +1 -1
- package/dist/assets/{migrating-from-less-V1oeKlSf.js → migrating-from-less-ClH17s_P.js} +1 -1
- package/dist/assets/{tokens-Bw3658eU.js → tokens-BF6xltNI.js} +1 -1
- package/dist/assets/{tokens-Yf07x_wA.js → tokens-DLKIEc5T.js} +1 -1
- package/dist/assets/{tokens-D1eOr0iV.js → tokens-DOxuMF98.js} +1 -1
- package/dist/assets/{usePortalElement-CzAPYwMj.js → usePortalElement-Cqy1sSsS.js} +1 -1
- package/dist/assets/{welcome-CCU104Dv.js → welcome-CA82uuQ9.js} +1 -1
- package/dist/assets/{zeroheight-I34niHYD.js → zeroheight-BZmC6gtY.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/preview-stats.json +15479 -15467
- package/dist/project.json +1 -1
- package/package.json +5 -5
- package/pages/30.guides/70.assets/constants/icon-imports.ts +2 -0
- package/dist/assets/30.icons.explorer-BKujlrNJ.js +0 -72
- package/dist/assets/IconButton-Qo4r7KAR.js +0 -9
package/dist/assets/{MultiSelectChips.stories-CKax5hXL.js → MultiSelectChips.stories-0xhNcMZn.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-Bj49UVGS.js";import{n as o,t as s}from"./Heading-Xmy4HTvU.js";import{n as c,t as l}from"./Button-DagS5hxP.js";import{r as u,t as d}from"./lib-8ue2PVWI.js";import{r as f,t as p}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as m,r as h,t as g}from"./MultiSelectChips-DSeV2AIy.js";import{n as ee,t as _}from"./LayoutFlex-CpktYRVX.js";import{n as v,t as te}from"./Link-DLL8OonN.js";import{n as ne,t as y}from"./Tooltip-DCzQmBi_.js";import{a as b,c as re,i as ie,n as ae,o as oe,r as x,s as S,t as se}from"./TokyoUIAvailability7LateNight-Bho17X1G.js";import{n as ce,t as le}from"./TokyoUIEmojiFrowning-rSnD4TX2.js";var C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{C=e(n(),1),h(),re(),oe(),ie(),ae(),ce(),u(),ee(),i(),v(),f(),o(),ne(),c(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/MultiSelectChips`,component:g,subcomponents:{MultiSelectChipsItem:m},parameters:{layout:`padded`},args:{"aria-label":`Select skills`,defaultValue:[`vocabulary`],onValueChange:D(),items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`}]},beforeEach:()=>{k()}},M={play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`vocabulary`,`speaking`]),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`]),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)})}},P={render:function({defaultValue:e,...t}){let[n,r]=(0,C.useState)(e);N=r;let i=e=>{r(e),t.onValueChange?.(e)};return(0,w.jsx)(g,{...t,value:n,onValueChange:i})},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`vocabulary`,`speaking`]),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`]),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Change the value externally`,async()=>{k(),N([`vocabulary`,`reading`]),await A(()=>{T(n.onValueChange).not.toHaveBeenCalled(),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`true`)})})}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`,disabled:!0},{value:`reading`,label:`Reading`}]},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Speaking`}),a=r.getByRole(`option`,{name:`Vocabulary`});await t(`Disabled chip must have disabled attribute`,async()=>{T(i).toBeDisabled()}),await t(`Disabled chip must not be selectable`,async()=>{await O.click(i),T(n.onValueChange).not.toHaveBeenCalled(),T(a).toHaveAttribute(`aria-selected`,`true`)})}},I={args:{"aria-label":`Select availabilities`,defaultValue:[`morning`],items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(b,{})},{value:`evening`,label:`Evening`,icon:(0,w.jsx)(x,{})}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Morning`})).getByTestId(`chip-icon`);await t("Chip should render an icon when `icon` prop is passed",async()=>{T(n).toBeVisible()})}},L={args:{"aria-label":`Select languages to learn`,defaultValue:[`english`],items:[{value:`english`,label:`English`,counter:1247},{value:`spanish`,label:`Spanish`,counter:892},{value:`french`,label:`French`,counter:534},{value:`german`,label:`German`,counter:421},{value:`italian`,label:`Italian`,counter:287},{value:`portuguese`,label:`Portuguese`,counter:156}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:/^English/})).getByTestId(`chip-counter`);await t("Chip should render a counter when `counter` prop is passed",async()=>{T(n).toBeVisible(),T(n).toHaveTextContent(`1247`)})}},R={args:{"aria-label":`Select countries`,defaultValue:[`ua`],items:[{value:`ua`,label:`Ukraine`,countryFlagCode:`ua`},{value:`gb`,label:`United Kingdom`,countryFlagCode:`gb`},{value:`it`,label:`Italy`,countryFlagCode:`it`},{value:`es`,label:`Spain`,countryFlagCode:`es`},{value:`au`,label:`Australia`,countryFlagCode:`au`},{value:`br`,label:`Brazil`,countryFlagCode:`br`},{value:`eg`,label:`Egypt`,countryFlagCode:`eg`}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Ukraine`})).getByTestId(`chip-country-flag`);await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{T(n).toBeVisible()})}},z={args:{"aria-label":`Fancy chips`,items:[{value:`counter+icon`,label:`Icon + Counter`,icon:(0,w.jsx)(S,{}),counter:1247},{value:`counter+flag`,label:`Flag + Counter`,countryFlagCode:`ua`,counter:1247},{value:`icon+flag`,label:`Icon + Flag`,icon:(0,w.jsx)(S,{}),countryFlagCode:`ua`}]},play:async({canvasElement:e})=>{let t=E(E(e).getByRole(`option`,{name:`Icon + Flag`}));T(t.getByTestId(`chip-icon`)).toBeVisible(),T(t.queryByTestId(`chip-country-flag`)).not.toBeInTheDocument()}},B=[`2025-08-15T10:00Z`,`2025-08-16T12:00Z`,`2025-08-17T14:00Z`],V={args:{orientation:`vertical`,"aria-label":`Select time slots`,defaultValue:B,items:B.map(e=>({value:e,label:(0,w.jsx)(d,{weekday:`short`,day:`numeric`,month:`short`,hour:`2-digit`,minute:`2-digit`,value:e}),dataset:{testid:e}}))},decorators:[e=>(0,w.jsx)(`div`,{style:{width:300,margin:`0 auto`},children:(0,w.jsx)(e,{})})],play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByRole(`listbox`,{name:`Select time slots`}),i=n.getByTestId(B[0]),a=n.getByTestId(B[1]),o=n.getByTestId(B[2]);await t('Vertical chips should have `aria-orientation="vertical"`',async()=>{T(r).toHaveAttribute(`aria-orientation`,`vertical`)}),await t(`Focus first chip`,async()=>{i.focus()}),await t(`Arrow down should focus second chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(a).toHaveFocus()}),await t(`Arrow down should focus third chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(o).toHaveFocus()}),await t(`Arrow down should focus first chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(i).toHaveFocus()}),await t(`Arrow up should focus third chip`,async()=>{await O.keyboard(`{ArrowUp}`),T(o).toHaveFocus()})}},H={render:e=>(0,w.jsxs)(_,{gap:`12`,children:[(0,w.jsx)(g,{...e}),(0,w.jsx)(l,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`},{value:`writing`,label:`Writing`},{value:`grammar`,label:`Grammar`}],W=[{value:`monday`,label:`Monday`},{value:`tuesday`,label:`Tuesday`},{value:`wednesday`,label:`Wednesday`},{value:`thursday`,label:`Thursday`},{value:`friday`,label:`Friday`},{value:`saturday`,label:`Saturday`},{value:`sunday`,label:`Sunday`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(b,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(x,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(se,{})}],K={render:function(e){return(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What skills do you want to focus on?`}),(0,w.jsx)(g,{"aria-label":`Selected skills`,items:U})]}),(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`Which days work best for you?`}),(0,w.jsx)(g,{"aria-label":`Selected days of the week`,items:W})]}),(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What times of day work for you?`}),(0,w.jsx)(g,{"aria-label":`Selected times of day`,items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=E(n.getByRole(`listbox`,{name:`Selected skills`})),i=E(n.getByRole(`listbox`,{name:`Selected days of the week`})),a=r.getByRole(`option`,{name:`Vocabulary`}),o=r.getByRole(`option`,{name:`Speaking`}),s=r.getByRole(`option`,{name:`Grammar`}),c=i.getByRole(`option`,{name:`Monday`});await t(`Tab once to enter the component`,async()=>{await O.tab(),T(a).toHaveFocus()}),await t(`Next tab should focus second chip`,async()=>{await O.tab(),T(c).toHaveFocus()}),await t(`Shift+Tab should focus first chips group again`,async()=>{await O.tab({shift:!0}),T(a).toHaveFocus()}),await t(`Right arrow should focus next chip in the group`,async()=>{await O.keyboard(`{ArrowRight}`),T(o).toHaveFocus()}),await t(`Left arrow should focus previous chip in the group`,async()=>{await O.keyboard(`{ArrowLeft}`),T(a).toHaveFocus()}),await t(`Left arrow should focus last chip if first chip is focused`,async()=>{await O.keyboard(`{ArrowLeft}`),T(s).toHaveFocus()}),await t(`Right arrow should focus first chip if last chip is focused`,async()=>{await O.keyboard(`{ArrowRight}`),T(a).toHaveFocus()}),await t(`Focus last chip`,async()=>{await O.keyboard(`{ArrowLeft}`)}),await t(`Tab to the next group`,async()=>{await O.tab()}),await t(`Shift+Tab to return to the first group, the last focused chip should be focused`,async()=>{await O.tab({shift:!0}),T(s).toHaveFocus()})}},q=p.ul`
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-Cy08WP3t.js";import{n as o,t as s}from"./Heading-B3jb_-J8.js";import{n as c,t as l}from"./Button--WTUF97E.js";import{r as u,t as d}from"./lib-8ue2PVWI.js";import{r as f,t as p}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as m,r as h,t as g}from"./MultiSelectChips-Bs8MJsJe.js";import{n as ee,t as _}from"./LayoutFlex-BlWwmFhv.js";import{n as v,t as te}from"./Link-DbeaGxmu.js";import{n as ne,t as y}from"./Tooltip-BKkZoXDV.js";import{a as b,c as re,i as ie,n as ae,o as oe,r as x,s as S,t as se}from"./TokyoUIAvailability7LateNight-Bho17X1G.js";import{n as ce,t as le}from"./TokyoUIEmojiFrowning-rSnD4TX2.js";var C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{C=e(n(),1),h(),re(),oe(),ie(),ae(),ce(),u(),ee(),i(),v(),f(),o(),ne(),c(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/MultiSelectChips`,component:g,subcomponents:{MultiSelectChipsItem:m},parameters:{layout:`padded`},args:{"aria-label":`Select skills`,defaultValue:[`vocabulary`],onValueChange:D(),items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`}]},beforeEach:()=>{k()}},M={play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`vocabulary`,`speaking`]),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`]),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)})}},P={render:function({defaultValue:e,...t}){let[n,r]=(0,C.useState)(e);N=r;let i=e=>{r(e),t.onValueChange?.(e)};return(0,w.jsx)(g,{...t,value:n,onValueChange:i})},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`vocabulary`,`speaking`]),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`]),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Change the value externally`,async()=>{k(),N([`vocabulary`,`reading`]),await A(()=>{T(n.onValueChange).not.toHaveBeenCalled(),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`true`)})})}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`,disabled:!0},{value:`reading`,label:`Reading`}]},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Speaking`}),a=r.getByRole(`option`,{name:`Vocabulary`});await t(`Disabled chip must have disabled attribute`,async()=>{T(i).toBeDisabled()}),await t(`Disabled chip must not be selectable`,async()=>{await O.click(i),T(n.onValueChange).not.toHaveBeenCalled(),T(a).toHaveAttribute(`aria-selected`,`true`)})}},I={args:{"aria-label":`Select availabilities`,defaultValue:[`morning`],items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(b,{})},{value:`evening`,label:`Evening`,icon:(0,w.jsx)(x,{})}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Morning`})).getByTestId(`chip-icon`);await t("Chip should render an icon when `icon` prop is passed",async()=>{T(n).toBeVisible()})}},L={args:{"aria-label":`Select languages to learn`,defaultValue:[`english`],items:[{value:`english`,label:`English`,counter:1247},{value:`spanish`,label:`Spanish`,counter:892},{value:`french`,label:`French`,counter:534},{value:`german`,label:`German`,counter:421},{value:`italian`,label:`Italian`,counter:287},{value:`portuguese`,label:`Portuguese`,counter:156}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:/^English/})).getByTestId(`chip-counter`);await t("Chip should render a counter when `counter` prop is passed",async()=>{T(n).toBeVisible(),T(n).toHaveTextContent(`1247`)})}},R={args:{"aria-label":`Select countries`,defaultValue:[`ua`],items:[{value:`ua`,label:`Ukraine`,countryFlagCode:`ua`},{value:`gb`,label:`United Kingdom`,countryFlagCode:`gb`},{value:`it`,label:`Italy`,countryFlagCode:`it`},{value:`es`,label:`Spain`,countryFlagCode:`es`},{value:`au`,label:`Australia`,countryFlagCode:`au`},{value:`br`,label:`Brazil`,countryFlagCode:`br`},{value:`eg`,label:`Egypt`,countryFlagCode:`eg`}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Ukraine`})).getByTestId(`chip-country-flag`);await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{T(n).toBeVisible()})}},z={args:{"aria-label":`Fancy chips`,items:[{value:`counter+icon`,label:`Icon + Counter`,icon:(0,w.jsx)(S,{}),counter:1247},{value:`counter+flag`,label:`Flag + Counter`,countryFlagCode:`ua`,counter:1247},{value:`icon+flag`,label:`Icon + Flag`,icon:(0,w.jsx)(S,{}),countryFlagCode:`ua`}]},play:async({canvasElement:e})=>{let t=E(E(e).getByRole(`option`,{name:`Icon + Flag`}));T(t.getByTestId(`chip-icon`)).toBeVisible(),T(t.queryByTestId(`chip-country-flag`)).not.toBeInTheDocument()}},B=[`2025-08-15T10:00Z`,`2025-08-16T12:00Z`,`2025-08-17T14:00Z`],V={args:{orientation:`vertical`,"aria-label":`Select time slots`,defaultValue:B,items:B.map(e=>({value:e,label:(0,w.jsx)(d,{weekday:`short`,day:`numeric`,month:`short`,hour:`2-digit`,minute:`2-digit`,value:e}),dataset:{testid:e}}))},decorators:[e=>(0,w.jsx)(`div`,{style:{width:300,margin:`0 auto`},children:(0,w.jsx)(e,{})})],play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByRole(`listbox`,{name:`Select time slots`}),i=n.getByTestId(B[0]),a=n.getByTestId(B[1]),o=n.getByTestId(B[2]);await t('Vertical chips should have `aria-orientation="vertical"`',async()=>{T(r).toHaveAttribute(`aria-orientation`,`vertical`)}),await t(`Focus first chip`,async()=>{i.focus()}),await t(`Arrow down should focus second chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(a).toHaveFocus()}),await t(`Arrow down should focus third chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(o).toHaveFocus()}),await t(`Arrow down should focus first chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(i).toHaveFocus()}),await t(`Arrow up should focus third chip`,async()=>{await O.keyboard(`{ArrowUp}`),T(o).toHaveFocus()})}},H={render:e=>(0,w.jsxs)(_,{gap:`12`,children:[(0,w.jsx)(g,{...e}),(0,w.jsx)(l,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`},{value:`writing`,label:`Writing`},{value:`grammar`,label:`Grammar`}],W=[{value:`monday`,label:`Monday`},{value:`tuesday`,label:`Tuesday`},{value:`wednesday`,label:`Wednesday`},{value:`thursday`,label:`Thursday`},{value:`friday`,label:`Friday`},{value:`saturday`,label:`Saturday`},{value:`sunday`,label:`Sunday`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(b,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(x,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(se,{})}],K={render:function(e){return(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What skills do you want to focus on?`}),(0,w.jsx)(g,{"aria-label":`Selected skills`,items:U})]}),(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`Which days work best for you?`}),(0,w.jsx)(g,{"aria-label":`Selected days of the week`,items:W})]}),(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What times of day work for you?`}),(0,w.jsx)(g,{"aria-label":`Selected times of day`,items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=E(n.getByRole(`listbox`,{name:`Selected skills`})),i=E(n.getByRole(`listbox`,{name:`Selected days of the week`})),a=r.getByRole(`option`,{name:`Vocabulary`}),o=r.getByRole(`option`,{name:`Speaking`}),s=r.getByRole(`option`,{name:`Grammar`}),c=i.getByRole(`option`,{name:`Monday`});await t(`Tab once to enter the component`,async()=>{await O.tab(),T(a).toHaveFocus()}),await t(`Next tab should focus second chip`,async()=>{await O.tab(),T(c).toHaveFocus()}),await t(`Shift+Tab should focus first chips group again`,async()=>{await O.tab({shift:!0}),T(a).toHaveFocus()}),await t(`Right arrow should focus next chip in the group`,async()=>{await O.keyboard(`{ArrowRight}`),T(o).toHaveFocus()}),await t(`Left arrow should focus previous chip in the group`,async()=>{await O.keyboard(`{ArrowLeft}`),T(a).toHaveFocus()}),await t(`Left arrow should focus last chip if first chip is focused`,async()=>{await O.keyboard(`{ArrowLeft}`),T(s).toHaveFocus()}),await t(`Right arrow should focus first chip if last chip is focused`,async()=>{await O.keyboard(`{ArrowRight}`),T(a).toHaveFocus()}),await t(`Focus last chip`,async()=>{await O.keyboard(`{ArrowLeft}`)}),await t(`Tab to the next group`,async()=>{await O.tab()}),await t(`Shift+Tab to return to the first group, the last focused chip should be focused`,async()=>{await O.tab({shift:!0}),T(s).toHaveFocus()})}},q=p.ul`
|
|
2
2
|
all: unset;
|
|
3
3
|
list-style: none;
|
|
4
4
|
display: flex;
|
package/dist/assets/{NativeSelectField.stories-D3-RNzbp.js → NativeSelectField.stories-D27xdDZT.js}
RENAMED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./TokyoUIChevronDown-CS0lTt7n.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./Icon-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./TokyoUIChevronDown-CS0lTt7n.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./Icon-Dqr2b6tP.js";import{n as f,t as p}from"./FormControl-DoNLVcw2.js";import{i as m,n as h,r as g,t as _}from"./InputContainer-xfDpQQNl.js";import{n as v,t as y}from"./TokyoUILanguage-DxmG-CNh.js";var b,x,S,C=t((()=>{b=e(n(),1),i(),o(),m(),h(),u(),x=a(),S=(0,b.forwardRef)(function({dataset:e,onChange:t,onValueChange:n,icon:i,children:a,placeholder:o,...c},l){let[u,f]=(0,b.useState)(!c.value&&!c.defaultValue),p=r(e),m=c.value===void 0?{defaultValue:c.defaultValue||``}:{value:c.value},h=e=>{t?.(e),n?.(e.target.value),f(!e.target.value)};return(0,x.jsx)(_,{icon:i,trailingIcon:(0,x.jsx)(d,{svg:s}),children:(0,x.jsxs)(`select`,{...p,...c,...m,onChange:h,ref:l,className:g.input,"data-empty":u,children:[typeof o==`string`&&(0,x.jsx)(`option`,{value:``,disabled:c.required,children:o}),a]})})});try{S.displayName=`NativeSelect`,S.__docgenInfo={description:`A component to render a select with optional icon.
|
|
2
2
|
For internal use only.`,displayName:`NativeSelect`,props:{icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},placeholder:{defaultValue:null,description:``,name:`placeholder`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}}}}}catch{}}));function w(e){return(0,E.jsx)(`option`,{...e,...r(void 0,{preplyDsComponent:c.SelectFieldOption})})}var T,E,D,O,k=t((()=>{T=e(n(),1),i(),l(),f(),C(),E=a(),D=(0,T.forwardRef)(function({id:e,label:t,description:n,error:r,required:i,inputDataset:a,dataset:o,hideLabel:s,onClick:l,children:u,hasError:d,useLegacyRequiredLabel:f,className:m,style:h,...g},_){return(0,E.jsx)(p,{id:e,label:t,description:n,error:r,hasError:d,required:i,dataset:o,hideLabel:s,onClick:l,useLegacyRequiredLabel:f,preplyDsComponent:c.SelectField,children:(0,E.jsx)(S,{...g,ref:_,dataset:a,children:u})})}),D.Option=w,O=D;try{w.displayName=`NativeSelectFieldOption`,w.__docgenInfo={description:``,displayName:`NativeSelectFieldOption`,props:{value:{defaultValue:null,description:``,name:`value`,required:!0,type:{name:`string`}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}}}}}catch{}try{O.displayName=`NativeSelectField`,O.__docgenInfo={description:``,displayName:`NativeSelectField`,props:{id:{defaultValue:null,description:`The id to be passed to the input element.
|
|
3
|
-
If not provided, will be generated for accessibility purposes.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
If not provided, will be generated for accessibility purposes.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:`label`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:`hideLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
|
|
4
|
+
to provide more context or instructions to the user.`,name:`description`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},error:{defaultValue:null,description:`Error message to display when the field has an invalid value.`,name:`error`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly describe the error to users",name:`hasError`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
|
|
5
|
+
indicator next to the label.`,name:`required`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLSelectElement>`}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
|
|
6
6
|
When false, adds a "Optional" indicator next to the label for the optional fields instead.
|
|
7
7
|
@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:`useLegacyRequiredLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}},icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},value:{defaultValue:null,description:``,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},defaultValue:{defaultValue:null,description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},placeholder:{defaultValue:null,description:``,name:`placeholder`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},inputDataset:{defaultValue:null,description:``,name:`inputDataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K;t((()=>{A=e(n(),1),v(),u(),k(),j=a(),{expect:M,userEvent:N,within:P,fn:F}=__STORYBOOK_MODULE_TEST__,I={title:`components/SelectField/NativeSelectField (deprecated)`,component:O,subcomponents:{NativeSelectFieldOption:O.Option},args:{name:`language`,label:`Language`,placeholder:`Select a language`,defaultValue:``,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onChange:F(),onValueChange:F(),onBlur:F(),onFocus:F(),onClick:F(),onCopy:F(),onKeyDown:F(),onKeyUp:F(),onPaste:F(),children:(0,j.jsxs)(j.Fragment,{children:[(0,j.jsx)(O.Option,{value:`english`,children:`English`}),(0,j.jsx)(O.Option,{value:`spanish`,children:`Spanish`}),(0,j.jsx)(O.Option,{value:`french`,children:`French`})]})}},L={play:async({canvasElement:e,step:t,args:n})=>{let r=P(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{M(P(i).getByTestId(`label`)).toHaveTextContent(`Language • Optional`),M(a).toHaveAccessibleName(`Language`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),M(n.onFocus).toHaveBeenCalled()}),await t(`it should call callback when the value changes`,async()=>{await N.selectOptions(a,`spanish`),M(n.onValueChange).toHaveBeenCalledWith(`spanish`),M(n.onChange).toHaveBeenCalled()}),await t(`it should call onBlur when the input is blurred`,async()=>{await N.keyboard(`{tab}`),M(n.onBlur).toHaveBeenCalled()}),await t(`it should render the dataset props`,async()=>{M(i).toHaveAttribute(`data-testid`,`field`),M(i).toHaveAttribute(`data-foo`,`bar`),M(a).toHaveAttribute(`data-testid`,`input`),M(a).toHaveAttribute(`data-foo`,`bar`)}),await t(`it should render all options`,async()=>{let e=r.getByRole(`option`,{name:`English`}),t=r.getByRole(`option`,{name:`Spanish`}),n=r.getByRole(`option`,{name:`French`});M(e).toBeInTheDocument(),M(t).toBeInTheDocument(),M(n).toBeInTheDocument()})}},R={render:function(e){let[t,n]=(0,A.useState)(e.value);return(0,j.jsxs)(O,{...e,value:t,onChange:t=>{n(t.target.value),e.onChange?.(t)},children:[(0,j.jsx)(O.Option,{value:`english`,children:`English`}),(0,j.jsx)(O.Option,{value:`spanish`,children:`Spanish`}),(0,j.jsx)(O.Option,{value:`french`,children:`French`})]})},args:{label:`Controlled SelectField`,placeholder:`Select a language...`,value:`spanish`},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await M(e.getByTestId(`input`)).toHaveValue(`spanish`)}),await t(`it should update the value when the user selects`,async()=>{let t=e.getByTestId(`input`);await N.selectOptions(t,`french`),M(t).toHaveValue(`french`)})}},z={args:{icon:(0,j.jsx)(d,{svg:y,dataset:{testid:`icon`}})},play:async({canvas:e,step:t})=>{await t(`it should render the icon`,async()=>{M(e.getByTestId(`icon`)).toBeInTheDocument()})}},B={args:{description:`We will use this to get a personalized choice of tutors`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{M(n).toHaveAccessibleDescription(`We will use this to get a personalized choice of tutors`),M(r).toHaveTextContent(`We will use this to get a personalized choice of tutors`)})}},V={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{M(n).toHaveAccessibleName(`Language`),M(r).toHaveTextContent(`Language`)}),await t(`it should render required attribute`,async()=>{M(n).toHaveAttribute(`required`)})}},H={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{M(e.getByTestId(`input`)).toHaveAccessibleName(`Language`)})}},U={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{M(n).toHaveAccessibleErrorMessage(`This is an error message`),M(r).toHaveTextContent(`This is an error message`)})}},W={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{M(n).toHaveAttribute(`disabled`)})}},G={parameters:{chromatic:{disableSnapshot:!0}},args:{label:`Language`,placeholder:`Select a subject`,description:`We will use this to get a personalized choice of tutors`,children:(0,j.jsxs)(j.Fragment,{children:[(0,j.jsx)(O.Option,{value:`english`,children:`English`}),(0,j.jsx)(O.Option,{value:`spanish`,children:`Spanish`}),(0,j.jsx)(O.Option,{value:`french`,children:`French`})]})},argTypes:{label:{control:`text`},placeholder:{control:`text`},description:{control:`text`},error:{control:`text`},value:{control:`text`},defaultValue:{control:`text`},inputDataset:{control:`object`},dataset:{control:`object`},id:{control:`text`},required:{control:`boolean`},hideLabel:{control:`boolean`},name:{control:`text`},disabled:{control:`boolean`},icon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":(0,j.jsx)(d,{svg:y,label:`Student with a hat`})},control:`select`},children:{control:!1},hasError:{table:{disable:!0}}}},L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`{
|
|
8
8
|
play: async ({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./dist-Cc1j9Pjk.js";import{n as o,t as s}from"./FormControl-
|
|
2
|
-
If not provided, will be generated for accessibility purposes.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./dist-Cc1j9Pjk.js";import{n as o,t as s}from"./FormControl-DoNLVcw2.js";import{r as c,t as l}from"./Input-D6_jI5Uh.js";var u,d,f,p=t((()=>{u=e(n(),1),o(),l(),a(),d=r(),f=(0,u.forwardRef)(function({id:e,label:t,description:n,error:r,required:a,inputDataset:o,dataset:l,hideLabel:u,onClick:f,onValueChange:p,onChange:m,hasError:h,useLegacyRequiredLabel:g,className:_,style:v,...y},b){let x=e=>{m?.(e);let t=e.target.value;p?.(t?Number(t):void 0)};return(0,d.jsx)(s,{id:e,label:t,description:n,error:r,hasError:h,required:a,dataset:l,hideLabel:u,onClick:f,useLegacyRequiredLabel:g,preplyDsComponent:i.NumberField,children:(0,d.jsx)(c,{...y,type:`number`,ref:b,dataset:o,onChange:x})})});try{f.displayName=`NumberField`,f.__docgenInfo={description:``,displayName:`NumberField`,props:{id:{defaultValue:null,description:`The id to be passed to the input element.
|
|
2
|
+
If not provided, will be generated for accessibility purposes.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:`label`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:`hideLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
|
|
3
|
+
to provide more context or instructions to the user.`,name:`description`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},error:{defaultValue:null,description:`Error message to display when the field has an invalid value.`,name:`error`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly describe the error to users",name:`hasError`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
|
|
4
|
+
indicator next to the label.`,name:`required`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLInputElement>`}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
|
|
5
5
|
When false, adds a "Optional" indicator next to the label for the optional fields instead.
|
|
6
6
|
@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:`useLegacyRequiredLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},button:{defaultValue:null,description:``,name:`button`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},value:{defaultValue:null,description:``,name:`value`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},defaultValue:{defaultValue:null,description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: number | undefined) => void`}]}},min:{defaultValue:null,description:``,name:`min`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},max:{defaultValue:null,description:``,name:`max`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},step:{defaultValue:null,description:``,name:`step`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},inputDataset:{defaultValue:null,description:``,name:`inputDataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{p as n,f as t};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-Dqr2b6tP.js";import{n as o,t as s}from"./FieldButton-SkKd22gq.js";import{n as c,t as l}from"./NumberField-WzHWHpwG.js";import{n as u,t as d}from"./TokyoUIPhone-DgmsXXbh.js";import{n as f,t as p}from"./TokyoUIAttach-jKVaxnL7.js";var m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k,A,j,M;t((()=>{m=e(n(),1),u(),f(),i(),c(),o(),h=r(),{action:g}=__STORYBOOK_MODULE_ACTIONS__,{expect:_,userEvent:v,within:y,fn:b}=__STORYBOOK_MODULE_TEST__,x={title:`components/NumberField`,component:l,args:{name:`number`,label:`Number`,defaultValue:void 0,placeholder:`Enter a number`,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onChange:b(),onValueChange:b(),onBlur:b(),onFocus:b(),onClick:b(),onCopy:b(),onKeyDown:b(),onKeyUp:b(),onPaste:b()}},S={play:async({canvasElement:e,step:t,args:n})=>{let r=y(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{_(y(i).getByTestId(`label`)).toHaveTextContent(`Number • Optional`),_(a).toHaveAccessibleName(`Number`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),_(n.onFocus).toHaveBeenCalled()}),await t(`it should call callback when the value changes`,async()=>{await v.type(a,`42`),_(n.onValueChange).toHaveBeenCalledWith(42),_(n.onChange).toHaveBeenCalled()}),await t(`it should call onBlur when the input is blurred`,async()=>{await v.keyboard(`{tab}`),_(n.onBlur).toHaveBeenCalled()}),await t(`it should render the dataset props`,async()=>{_(i).toHaveAttribute(`data-testid`,`field`),_(i).toHaveAttribute(`data-foo`,`bar`),_(a).toHaveAttribute(`data-testid`,`input`),_(a).toHaveAttribute(`data-foo`,`bar`)})}},C={render:function(e){let[t,n]=(0,m.useState)(e.value);return(0,h.jsx)(l,{...e,value:t,onChange:t=>{n(Number(t.target.value)),e.onChange?.(t)}})},args:{label:`Controlled NumberField`,placeholder:`Enter a number...`,value:42},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await _(e.getByTestId(`input`)).toHaveValue(42)}),await t(`it should update the value when the user types`,async()=>{let t=e.getByTestId(`input`);await v.clear(t),await v.type(t,`100`),_(t).toHaveValue(100)})}},w={args:{icon:(0,h.jsx)(a,{svg:d,dataset:{testid:`icon`}})},play:async({canvas:e,step:t})=>{await t(`it should render the icon`,async()=>{_(e.getByTestId(`icon`)).toBeInTheDocument()})}},T={args:{description:`Enter a valid number`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{_(n).toHaveAccessibleDescription(`Enter a valid number`),_(r).toHaveTextContent(`Enter a valid number`)})}},E={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{_(n).toHaveAccessibleName(`Number`),_(r).toHaveTextContent(`Number`)}),await t(`it should render required attribute`,async()=>{_(n).toHaveAttribute(`required`)})}},D={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{_(e.getByTestId(`input`)).toHaveAccessibleName(`Number`)})}},O={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{_(n).toHaveAccessibleErrorMessage(`This is an error message`),_(r).toHaveTextContent(`This is an error message`)})}},k={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{_(n).toHaveAttribute(`disabled`)})}},A={args:{readOnly:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the read only input`,async()=>{_(n).toHaveAttribute(`readonly`)})}},j={parameters:{chromatic:{disableSnapshot:!0}},args:{label:`Number of lessons`,placeholder:`How about 3?`,description:`These lessons will be scheduled automatically`},argTypes:{label:{control:`text`},placeholder:{control:`text`},description:{control:`text`},error:{control:`text`},value:{control:`number`},defaultValue:{control:`number`},inputDataset:{control:`object`},dataset:{control:`object`},id:{control:`text`},required:{control:`boolean`},hideLabel:{control:`boolean`},name:{control:`text`},disabled:{control:`boolean`},readOnly:{control:`boolean`},min:{control:`number`},max:{control:`number`},step:{control:`number`},icon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":(0,h.jsx)(a,{svg:d})},control:`select`},button:{options:[`None`,`With Button`],mapping:{None:void 0,"With Button":(0,h.jsx)(s,{svg:p,assistiveText:`Do the thing`,onClick:g(`field button clicked`)})},control:`select`},maxLength:{control:`number`},hasError:{table:{disable:!0}}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
play: async ({
|
|
3
3
|
canvasElement,
|
|
4
4
|
step,
|
|
@@ -5,4 +5,4 @@ Triggers a callback when the wrapped component intersects with the viewport.
|
|
|
5
5
|
This can be useful in several use cases. Examples:
|
|
6
6
|
|
|
7
7
|
- Track an experiment, once a certain component scrolls into view.
|
|
8
|
-
- Trigger an animation, or a feature (e.g.: onboarding instructions).`,displayName:`ObserveIntersection`,props:{onIntersect:{defaultValue:null,description:``,name:`onIntersect`,required:!0,type:{name:`() => void`}},once:{defaultValue:null,description:``,name:`once`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},threshold:{defaultValue:null,description:``,name:`threshold`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},tag:{defaultValue:null,description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"
|
|
8
|
+
- Trigger an animation, or a feature (e.g.: onboarding instructions).`,displayName:`ObserveIntersection`,props:{onIntersect:{defaultValue:null,description:``,name:`onIntersect`,required:!0,type:{name:`() => void`}},once:{defaultValue:null,description:``,name:`once`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},threshold:{defaultValue:null,description:``,name:`threshold`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},tag:{defaultValue:null,description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"article"`},{value:`"caption"`},{value:`"div"`},{value:`"fieldset"`},{value:`"figcaption"`},{value:`"figure"`},{value:`"footer"`},{value:`"header"`},{value:`"li"`},{value:`"main"`},{value:`"ol"`},{value:`"p"`},{value:`"section"`},{value:`"span"`},{value:`"table"`},{value:`"tbody"`},{value:`"td"`},{value:`"tfoot"`},{value:`"th"`},{value:`"thead"`},{value:`"tr"`},{value:`"ul"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{f as n,d as t};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./ObserveIntersection-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./ObserveIntersection-zL3YLMv6.js";var o,s,c,l,u;t((()=>{o=e(n(),1),i(),s=r(),c={title:`components/ObserveIntersection`,component:a,parameters:{tags:[`!test`],chromatic:{disableSnapshot:!0}}},l=()=>{let[e,t]=(0,o.useState)(!1);return(0,s.jsxs)(`div`,{tabIndex:0,style:{height:`200px`,overflowY:`scroll`,position:`relative`},children:[(0,s.jsx)(`div`,{style:{position:`sticky`,top:`2px`},children:e?`Intersected`:`Scroll down to intersect`}),(0,s.jsx)(`div`,{style:{height:`400px`,display:`flex`,alignItems:`end`},children:(0,s.jsx)(a,{onIntersect:()=>t(!0),children:`Observer`})})]})},l.storyName=`ObserveIntersection`,l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`() => {
|
|
2
2
|
const [isIntersecting, setIsIntersecting] = useState(false);
|
|
3
3
|
return (
|
|
4
4
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- This element is interactive; it's scrollable.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{B as o,H as s,St as c,U as l,V as u,W as d,_ as f,g as p,m,z as h}from"./iframe-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{B as o,H as s,St as c,U as l,V as u,W as d,_ as f,g as p,m,z as h}from"./iframe-BuOXI2w6.js";import{n as g,t as _}from"./dist-Cc1j9Pjk.js";import{n as v,t as y}from"./Icon-Dqr2b6tP.js";import{n as b,t as x}from"./Text-Cy08WP3t.js";import{n as S,t as C}from"./Heading-B3jb_-J8.js";import{n as w,t as T}from"./Button--WTUF97E.js";import{n as E,t as D}from"./TokyoUIClose-BsMsQk2w.js";import{i as O,o as k,r as A}from"./lib-8ue2PVWI.js";import{n as j,t as M}from"./shared-strings-BFfhcoGp.js";var N,P,F,I,L,R,z,B,V=t((()=>{N=`content__KHgp9`,P=`appear__G8agi`,F=`disappear__OWVSJ`,I=`header__CaLti`,L=`close__3s-VD`,R=`footer__X5qXF`,z=`arrow__0pg-s`,B={content:N,appear:P,disappear:F,header:I,close:L,footer:R,arrow:z}})),H,U,W,G,K,q=t((()=>{H=e(n(),1),f(),E(),V(),m(),v(),b(),w(),S(),i(),_(),A(),j(),U=a(),W=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:`auto`,block:`nearest`,inline:`nearest`})},G=(0,H.forwardRef)(function({open:e,onOpenChange:t,disabled:n,title:i,text:a,children:f,side:m,dataset:_,actionLabel:v=(0,U.jsx)(O,{id:`preply-ds.onboardingTooltip.actionLabel`,defaultMessage:`Got it`,description:`Default onboarding tooltip action label. Used to acknowledge and close the tooltip.`}),actionOnClick:b,actionHref:S,counter:w,autoScroll:E=!0,...A},j){let{formatMessage:N}=k(),P=p(),F=(0,H.useId)(),I=(0,H.useId)(),L=(0,H.useId)(),R=(0,H.useRef)(null);return(0,H.useEffect)(()=>{e&&R.current&&E&&W(R.current)},[E,e]),n?f:(0,U.jsxs)(d,{open:e,onOpenChange:t,children:[(0,U.jsx)(c,{ref:j,...A,children:(0,U.jsx)(h,{ref:R,id:L,asChild:!0,children:f})}),(0,U.jsx)(l,{container:P,children:(0,U.jsxs)(s,{onInteractOutside:e=>{e.preventDefault()},side:m,className:B.content,"aria-labelledby":F,"aria-describedby":`${L} ${I}`,...r(_,{preplyDsComponent:g.OnboardingTooltip}),children:[(0,U.jsxs)(`div`,{className:B.header,children:[(0,U.jsx)(u,{className:B.close,"aria-label":N(M.close),"data-testid":`close`,children:(0,U.jsx)(y,{accent:`inverted`,svg:D})}),(0,U.jsx)(C,{tag:`h1`,variant:`small`,accent:`inverted`,id:F,"aria-describedby":L,children:i})]}),(0,U.jsx)(x,{variant:`default-regular`,accent:`inverted`,className:B.text,children:a}),(0,U.jsxs)(`div`,{className:B.footer,children:[w,(0,U.jsx)(T,{variant:`inverted`,size:`small`,onClick:b,href:S,dataset:{testid:`action`},wrap:!0,children:v})]}),(0,U.jsx)(o,{"aria-hidden":!0,className:B.arrow,width:18,height:11})]})})]})}),K=(0,H.forwardRef)(function(e,t){let[n,r]=(0,H.useState)(!0),i=t=>{t||e.onClose?.(),r(t)},a=()=>{e.actionOnClick?.(),r(!1),e.onClose?.()};return(0,U.jsx)(G,{...e,open:n,onOpenChange:i,actionOnClick:a,ref:t})});try{G.displayName=`InternalOnboardingTooltip`,G.__docgenInfo={description:``,displayName:`InternalOnboardingTooltip`,props:{title:{defaultValue:null,description:``,name:`title`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},text:{defaultValue:null,description:``,name:`text`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},disabled:{defaultValue:null,description:`Disables tooltip completely`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onClose:{defaultValue:null,description:`Called when the tooltip is closed`,name:`onClose`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},actionLabel:{defaultValue:{value:`(
|
|
2
2
|
<FormattedMessage
|
|
3
3
|
id="preply-ds.onboardingTooltip.actionLabel"
|
|
4
4
|
defaultMessage="Got it"
|
package/dist/assets/{OnboardingTooltip.stories-npBmAhu4.js → OnboardingTooltip.stories-DpuZirIf.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,r as a}from"./OnboardingTooltip-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,r as a}from"./OnboardingTooltip-BzkMbW-Q.js";import{n as o,t as s}from"./IconButton-CQGXuX8O.js";import{n as c,t as l}from"./TokyoUIFav-B1g1wYYK.js";var u,d,f,p,m,h,g,_,v;t((()=>{u=e(n(),1),a(),o(),c(),d=r(),f={title:`Components/OnboardingTooltip`,component:i,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:250},description:{component:`Are you looking for a step-by-step tour? Check out [OnboardingTour](/docs/components-onboardingtour--docs).
|
|
2
2
|
|
|
3
3
|
Also see [Composing Popovers](/docs/guides-composing-popovers--docs) for usage with other popovers.`}}},decorators:[e=>(0,d.jsx)(`div`,{style:{margin:`auto`,width:`max-content`},children:e()})]},p=e=>[!1,!1],m=e=>e=>{},h=()=>{let[e,t]=p(`new-feature`),n=m(`new-feature`);return(0,d.jsx)(i,{title:`New Feature Available!`,text:`We've added an exciting new feature to enhance your experience.`,disabled:t||e,onClose:()=>n(!0),children:(0,d.jsx)(s,{variant:`ghost`,svg:(0,d.jsx)(l,{}),assistiveText:`Favorite`})})},h.storyName=`OnboardingTooltip`,g={parameters:{chromatic:{disableSnapshot:!0},docs:{source:{type:`dynamic`}}},render:()=>(0,d.jsx)(i,{title:`New Feature Available!`,text:`We've added an exciting new feature to enhance your experience.`,children:(0,d.jsx)((0,u.forwardRef)(function(e,t){return(0,d.jsx)(`button`,{...e,ref:t})}),{children:`Custom child`})})},_={tags:[`!autodocs`],args:{title:`New Feature Available!`,text:`We've added an exciting new feature to enhance your experience.`,disabled:!1,onClose:()=>{},children:(0,d.jsx)(s,{variant:`ghost`,svg:(0,d.jsx)(l,{}),assistiveText:`Favorite`})},argTypes:{title:{control:`text`},text:{control:`text`},actionLabel:{control:`text`},actionOnClick:{control:!1},actionHref:{control:`text`},disabled:{control:`boolean`},dataset:{control:`object`},onClose:{control:!1},children:{control:!1}},parameters:{docs:{story:{height:450}},chromatic:{disableSnapshot:!0}},decorators:[e=>(0,d.jsx)(`div`,{style:{minHeight:`100vh`,display:`flex`},children:(0,d.jsx)(`div`,{style:{margin:`auto`,width:`max-content`},children:e()})})]},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`() => {
|
|
4
4
|
const [wasTooltipSeen, loading] = useIsFeatureActive('new-feature');
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Button
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Button--WTUF97E.js";import{n as o,r as s}from"./OnboardingTooltip-BzkMbW-Q.js";import{n as c,t as l}from"./IconButton-CQGXuX8O.js";import{n as u,t as d}from"./LayoutFlex-BlWwmFhv.js";import{n as f,t as p}from"./TokyoUIFav-B1g1wYYK.js";function m(e){return new Promise(t=>setTimeout(t,e))}var h,g,_,v,y,b,x,S,C,w;t((()=>{e(n(),1),s(),c(),f(),i(),u(),h=r(),{within:g,userEvent:_,waitFor:v,expect:y}=__STORYBOOK_MODULE_TEST__,b={title:`Components/OnboardingTooltip/Tests`,component:o,parameters:{layout:`centered`,controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:[`!autodocs`,`!a11y-test`,`test`],decorators:[e=>(0,h.jsx)(`div`,{style:{margin:`100px 0`},children:e()})],args:{title:`Title`,text:`Body text`,actionLabel:`Action label`,disabled:!1,onClose:()=>{},dataset:{testid:`tooltip`},children:(0,h.jsx)(l,{svg:(0,h.jsx)(p,{}),assistiveText:`Favorite`})}},x={play:async({canvasElement:e,step:t})=>{let n=g(e);await t(`wait for tooltip to be visible`,async()=>{await v(()=>y(n.getByTestId(`tooltip`)).toBeVisible())}),await t(`close the tooltip`,()=>{let e=g(n.getByTestId(`tooltip`)).getByTestId(`close`);return _.click(e)}),await t(`wait for tooltip to be hidden`,async()=>{await v(()=>y(n.queryByTestId(`tooltip`)).toBeNull())})}},S={play:async({canvasElement:e,step:t})=>{let n=g(e);await t(`wait for tooltip to be visible`,async()=>{await v(()=>y(n.getByTestId(`tooltip`)).toBeVisible())}),await t(`close the tooltip`,()=>{let e=g(n.getByTestId(`tooltip`)).getByTestId(`action`);return _.click(e)}),await t(`wait for tooltip to be hidden`,async()=>{await v(()=>y(n.queryByTestId(`tooltip`)).toBeNull())})}},C={render:e=>(0,h.jsxs)(d,{gap:`24`,direction:`column`,children:[(0,h.jsx)(a,{children:`Click outside the tooltip`}),(0,h.jsx)(o,{...e,children:(0,h.jsx)(l,{svg:(0,h.jsx)(p,{}),assistiveText:`Favorite`})})]}),play:async({canvasElement:e,step:t})=>{let n=g(e);await t(`wait for tooltip to be visible`,async()=>{await v(()=>y(n.getByTestId(`tooltip`)).toBeVisible())}),await t(`click outside the tooltip`,()=>{let e=n.getByText(`Click outside the tooltip`);return _.click(e)}),await t(`check the tooltip remain open`,async()=>{await m(1e3),await y(n.getByTestId(`tooltip`)).toBeVisible()})}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
play: async ({
|
|
3
3
|
canvasElement,
|
|
4
4
|
step
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{r as i,t as a}from"./OnboardingTooltip-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{r as i,t as a}from"./OnboardingTooltip-BzkMbW-Q.js";import{i as o,r as s}from"./lib-8ue2PVWI.js";var c,l,u=t((()=>{c=`counter__ArBS-`,l={counter:c}})),d,f,p,m,h,g=t((()=>{d=e(n(),1),i(),u(),s(),f=r(),p=({totalSteps:e,nextActionLabel:t=(0,f.jsx)(o,{id:`preply-ds.onboardingTour.nextActionLabel`,defaultMessage:`Next`,description:`Onboarding tour next action label`}),completeActionLabel:n=(0,f.jsx)(o,{id:`preply-ds.onboardingTour.completeActionLabel`,defaultMessage:`Got it`,description:`Onboarding tour complete action label`}),onClose:r,onComplete:i,onStepChange:a,disabled:s,children:c,ctx:l})=>{let[u,p]=(0,d.useState)(!0),[m,h]=(0,d.useState)(0),g={totalSteps:e,nextActionLabel:t,completeActionLabel:n,onClose:()=>{p(!1),r?.()},active:!s&&u,currentStep:m,onActionClick:()=>{if(m===e-1)i?.(),p(!1);else{let e=m+1;h(e),a?.(e)}}};return(0,f.jsx)(l.Provider,{value:g,children:c})},m=(0,d.forwardRef)(function({ctx:e,...t},n){let r=(0,d.useContext)(e);if(!r)throw Error(`OnboardingTourContext not found`);let{currentStep:i,totalSteps:s,onActionClick:c,onClose:u,active:p,nextActionLabel:m,completeActionLabel:h}=r,g=t.step===s-1,_=t.step===i,v=g?h:m,y=()=>{t.actionOnClick?.(),c()},b=e=>{e||u?.()};return(0,f.jsx)(a,{...t,counter:(0,f.jsx)(`p`,{className:l.counter,children:(0,f.jsx)(o,{id:`preply-ds.onboardingTour.counter`,defaultMessage:`{currentStep} of {totalSteps}`,description:`Onboarding tour step counter, e.g. '1 of 3'`,values:{currentStep:i+1,totalSteps:s}})}),open:p&&_,onOpenChange:b,actionLabel:v,actionOnClick:y,ref:n})}),h=()=>{let e=(0,d.createContext)(null);return{Provider:t=>(0,f.jsx)(p,{...t,ctx:e}),Step:(0,d.forwardRef)(function(t,n){return(0,f.jsx)(m,{...t,ctx:e,ref:n})})}};try{h.displayName=`createOnboardingTour`,h.__docgenInfo={description:`Creates a new onboarding tour.
|
|
2
2
|
|
|
3
3
|
This factory pattern allows multiple independent tours to be nested within each other
|
|
4
4
|
without context conflicts, as each tour maintains its own separate context and state.`,displayName:`createOnboardingTour`,props:{}}}catch{}}));export{g as n,h as t};
|
package/dist/assets/{OnboardingTour.stories-CsdqirC3.js → OnboardingTour.stories-CU5yOTSQ.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-Cy08WP3t.js";import{n as o,t as s}from"./OnboardingTour-Ba_vMjzP.js";import{n as c,t as l}from"./LayoutFlex-BlWwmFhv.js";var u,d,f=t((()=>{u=e=>null,d=e=>null;try{u.displayName=`OnboardingTourProvider`,u.__docgenInfo={description:`For some reason, storybook fails to render arg tables for the components
|
|
2
2
|
when they're created with the \`createOnboardingTour\` function.
|
|
3
3
|
|
|
4
4
|
As a workaround, we're manually defining fake components with the same
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-Cy08WP3t.js";import{n as o,t as s}from"./Button--WTUF97E.js";import{n as c,t as l}from"./OnboardingTour-Ba_vMjzP.js";import{n as u,t as d}from"./LayoutFlex-BlWwmFhv.js";function f(e){return new Promise(t=>setTimeout(t,e))}var p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k;t((()=>{p=e(n(),1),c(),i(),o(),u(),m=r(),{within:h,userEvent:g,waitFor:_,expect:v,fn:y}=__STORYBOOK_MODULE_TEST__,b=l(),x={title:`Components/OnboardingTour/Tests`,parameters:{layout:`centered`,controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:[`!autodocs`,`!a11y-test`,`test`],decorators:[e=>(0,m.jsx)(`div`,{style:{margin:`100px 0`},children:e()})],args:{onComplete:y(),onClose:y(),onStepChange:y()}},S={render:({onComplete:e,onStepChange:t})=>(0,m.jsx)(b.Provider,{totalSteps:3,nextActionLabel:`Next`,completeActionLabel:`Got it`,onComplete:e,onStepChange:t,children:(0,m.jsxs)(d,{gap:`24`,direction:`column`,children:[(0,m.jsx)(b.Step,{step:0,title:`Title`,text:`Text`,dataset:{testid:`step-1`},children:(0,m.jsx)(a,{children:`Step 1 Content`})}),(0,m.jsx)(b.Step,{step:1,title:`Title`,text:`Text`,dataset:{testid:`step-2`},children:(0,m.jsx)(a,{children:`Step 2 Content`})}),(0,m.jsx)(b.Step,{step:2,title:`Title`,text:`Text`,dataset:{testid:`step-3`},children:(0,m.jsx)(a,{children:`Step 3 Content`})})]})}),play:async({canvasElement:e,step:t,args:n})=>{let r=h(e);await t(`First step should be visible initially`,async()=>{await _(()=>{v(r.getByTestId(`step-1`)).toBeVisible()})}),await t(`Click Next to advance to second step`,async()=>{let e=h(r.getByTestId(`step-1`)).getByTestId(`action`);await g.click(e),await _(()=>{v(r.getByTestId(`step-2`)).toBeVisible(),v(n.onStepChange).toHaveBeenCalledWith(1)})}),await t(`Click Next to advance to final step`,async()=>{let e=h(r.getByTestId(`step-2`)).getByTestId(`action`);await g.click(e),await _(()=>{v(r.getByTestId(`step-3`)).toBeVisible(),v(n.onStepChange).toHaveBeenCalledWith(2)})}),await t(`Complete tour`,async()=>{let e=h(r.getByTestId(`step-3`)).getByTestId(`action`);await g.click(e),await _(()=>{v(r.queryByTestId(`step`,{exact:!1})).toBeNull(),v(n.onComplete).toHaveBeenCalled()})})}},C={render:({onClose:e})=>(0,m.jsx)(b.Provider,{totalSteps:2,nextActionLabel:`Next`,completeActionLabel:`Got it`,onClose:e,children:(0,m.jsx)(b.Step,{step:0,title:`First step`,text:`Try closing this step`,dataset:{testid:`step-1`},children:(0,m.jsx)(a,{children:`Step 1 Content`})})}),play:async({canvasElement:e,step:t})=>{let n=h(e);await t(`Step should be initially visible`,async()=>{await _(()=>{v(n.getByTestId(`step-1`)).toBeVisible()})}),await t(`Click close button to close tour`,async({args:e})=>{let t=h(n.getByTestId(`step-1`)).getByTestId(`close`);await g.click(t),await _(()=>{v(n.queryByTestId(`step`,{exact:!1})).toBeNull(),v(e.onClose).toHaveBeenCalled()})})}},w={render:function(){let[e,t]=(0,p.useState)(!0);return(0,m.jsxs)(d,{gap:`24`,direction:`column`,children:[(0,m.jsx)(s,{onClick:()=>t(!e),dataset:{testid:`toggle-button`},children:e?`Enable Tour`:`Disable Tour`}),(0,m.jsx)(b.Provider,{totalSteps:2,nextActionLabel:`Next`,completeActionLabel:`Got it`,disabled:e,children:(0,m.jsx)(b.Step,{step:0,title:`First step`,text:`This step should be hidden when disabled`,dataset:{testid:`step-1`},children:(0,m.jsx)(a,{children:`Step 1 Content`})})})]})},play:async({canvasElement:e,step:t})=>{let n=h(e);await t(`Tour should be initially disabled`,async()=>{v(n.queryByTestId(`step-1`)).toBeNull()}),await t(`Click enable button to show tour`,async()=>{let e=n.getByTestId(`toggle-button`);await g.click(e),await _(()=>{v(n.getByTestId(`step-1`)).toBeVisible()})})}},T=l(),E=l(),D={render:function(){let[e,t]=(0,p.useState)(!1),[n,r]=(0,p.useState)(!1);return(0,m.jsxs)(T.Provider,{totalSteps:2,disabled:!e,nextActionLabel:`Next`,completeActionLabel:`Got it`,children:[(0,m.jsx)(T.Step,{step:0,title:`Title`,text:`Text`,dataset:{testid:`outer-step-1`},children:(0,m.jsx)(s,{onClick:()=>t(!0),dataset:{testid:`start-outer-tour`},children:`Start outer tour`})}),(0,m.jsxs)(E.Provider,{totalSteps:2,disabled:!n,nextActionLabel:`Next`,completeActionLabel:`Done`,children:[(0,m.jsx)(T.Step,{step:1,title:`Title`,text:`Text`,dataset:{testid:`outer-step-2`},children:(0,m.jsx)(a,{children:`Outer Tour Step`})}),(0,m.jsx)(E.Step,{step:0,title:`Title`,text:`Text`,dataset:{testid:`inner-step-1`},children:(0,m.jsx)(s,{onClick:()=>r(!0),dataset:{testid:`start-inner-tour`},children:`Start inner tour`})}),(0,m.jsx)(E.Step,{step:1,title:`Title`,text:`Text`,dataset:{testid:`inner-step-2`},children:(0,m.jsx)(a,{children:`Inner Tour Step`})})]})]})},play:async({canvasElement:e,step:t})=>{let n=h(e);await t(`Start inner tour, step 1 should be visible`,async()=>{let e=n.getByTestId(`start-inner-tour`);await g.click(e),await _(async()=>{v(n.queryByTestId(`inner-step-1`)).toBeVisible()})}),await t(`Advance inner tour, step 2 should be visible`,async()=>{let e=h(n.getByTestId(`inner-step-1`)).getByTestId(`action`);await g.click(e),await _(async()=>{v(n.queryByTestId(`inner-step-2`)).toBeVisible()})}),await t(`Complete inner tour`,async()=>{let e=h(n.getByTestId(`inner-step-2`)).getByTestId(`action`);await g.click(e),await _(async()=>{v(n.queryByTestId(`inner-step-1`,{exact:!1})).toBeNull()})}),await t(`Start outer tour, step 1 should be visible`,async()=>{let e=n.getByTestId(`start-outer-tour`);await g.click(e),await _(async()=>{v(n.queryByTestId(`outer-step-1`)).toBeVisible()})}),await t(`Advance outer tour, step 2 should be visible`,async()=>{let e=h(n.getByTestId(`outer-step-1`)).getByTestId(`action`);await g.click(e),await _(async()=>{v(n.queryByTestId(`outer-step-2`)).toBeVisible()})}),await t(`Complete outer tour`,async()=>{let e=h(n.getByTestId(`outer-step-2`)).getByTestId(`action`);await g.click(e),await _(async()=>{v(n.queryByTestId(`-step-`,{exact:!1})).toBeNull()})})}},O={render:()=>(0,m.jsxs)(d,{gap:`24`,direction:`column`,children:[(0,m.jsx)(s,{children:`Click outside the tooltip`}),(0,m.jsx)(b.Provider,{totalSteps:1,nextActionLabel:`Next`,completeActionLabel:`Got it`,children:(0,m.jsx)(b.Step,{step:0,title:`Title`,text:`Text`,dataset:{testid:`step-1`},children:(0,m.jsx)(a,{children:`Step 1 Content`})})})]}),play:async({canvasElement:e,step:t})=>{let n=h(e);await t(`Step should be initially visible`,async()=>{await _(()=>{v(n.getByTestId(`step-1`)).toBeVisible()})}),await t(`Click outside the tooltip`,()=>{let e=n.getByText(`Click outside the tooltip`);return g.click(e)}),await t(`Wait for tooltip to be hidden`,async()=>{await f(1e3),v(n.getByTestId(`step-1`)).toBeVisible()})}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
render: ({
|
|
3
3
|
onComplete,
|
|
4
4
|
onStepChange
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{T as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,o as l,r as u}from"./lib-8ue2PVWI.js";import{n as d,t as f}from"./FieldButton-SkKd22gq.js";import{n as p,t as m}from"./FormControl-
|
|
2
|
-
If not provided, will be generated for accessibility purposes.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{T as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,o as l,r as u}from"./lib-8ue2PVWI.js";import{n as d,t as f}from"./FieldButton-SkKd22gq.js";import{n as p,t as m}from"./FormControl-DoNLVcw2.js";import{r as h,t as g}from"./Input-D6_jI5Uh.js";import{i as _,n as v,r as y,t as b}from"./TokyoUIEye-B3okJSKv.js";var x,S,C,w,T=t((()=>{x=e(n(),1),p(),g(),i(),s(),_(),v(),d(),u(),S=a(),C=c({reveal:{id:`preply-ds.password-field.reveal.button`,defaultMessage:`Reveal password`,description:`A11y label for the "reveal password" button. Will be announced by screen reader.`},conceal:{id:`preply-ds.password-field.conceal.button`,defaultMessage:`Conceal password`,description:`A11y label for the "conceal password" button. Will be announced by screen reader.`}}),w=(0,x.forwardRef)(function({id:e,label:t,description:n,error:i,required:a,inputDataset:s,dataset:c,hideLabel:u,onClick:d,hasError:p,useLegacyRequiredLabel:g,className:_,style:v,...w},T){let{formatMessage:E}=l(),[D,O]=(0,x.useState)(!1),k=(0,x.useRef)(null),A=r(k,T),j=D?`text`:`password`,M=()=>{O(!D),k.current?.focus()};return(0,S.jsx)(m,{id:e,label:t,description:n,error:i,hasError:p,required:a,dataset:c,hideLabel:u,onClick:d,useLegacyRequiredLabel:g,preplyDsComponent:o.PasswordField,children:(0,S.jsx)(h,{...w,type:j,ref:A,dataset:s,button:(0,S.jsx)(f,{onClick:M,svg:D?y:b,assistiveText:E(D?C.conceal:C.reveal),dataset:{testid:`toggle-password-button`}})})})});try{w.displayName=`PasswordField`,w.__docgenInfo={description:``,displayName:`PasswordField`,props:{id:{defaultValue:null,description:`The id to be passed to the input element.
|
|
2
|
+
If not provided, will be generated for accessibility purposes.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:`label`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:`hideLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
|
|
3
|
+
to provide more context or instructions to the user.`,name:`description`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},error:{defaultValue:null,description:`Error message to display when the field has an invalid value.`,name:`error`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly describe the error to users",name:`hasError`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
|
|
4
|
+
indicator next to the label.`,name:`required`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLInputElement>`}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
|
|
5
5
|
When false, adds a "Optional" indicator next to the label for the optional fields instead.
|
|
6
6
|
@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:`useLegacyRequiredLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}},icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},value:{defaultValue:null,description:``,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},defaultValue:{defaultValue:null,description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},autoComplete:{defaultValue:null,description:``,name:`autoComplete`,required:!1,type:{name:`enum`,value:[{value:`"off"`},{value:`"new-password"`},{value:`"current-password"`}]}},inputDataset:{defaultValue:null,description:``,name:`inputDataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{T as n,w as t};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-Dqr2b6tP.js";import{n as o,t as s}from"./PasswordField-D3gN_VbU.js";import{n as c,t as l}from"./TokyoUILock-BHcTJZZm.js";var u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T,E;t((()=>{u=e(n(),1),o(),c(),i(),d=r(),{expect:f,userEvent:p,within:m,fn:h}=__STORYBOOK_MODULE_TEST__,g={title:`components/PasswordField`,component:s,args:{name:`password`,label:`Password`,placeholder:`Enter a password`,defaultValue:``,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onChange:h(),onValueChange:h(),onBlur:h(),onFocus:h(),onClick:h(),onCopy:h(),onKeyDown:h(),onKeyUp:h(),onPaste:h()}},_={play:async({canvasElement:e,step:t,args:n})=>{let r=m(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{f(m(i).getByTestId(`label`)).toHaveTextContent(`Password • Optional`),f(a).toHaveAccessibleName(`Password`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),f(n.onFocus).toHaveBeenCalled()}),await t(`it should call callback when the value changes`,async()=>{await p.type(a,`secret123`),f(n.onValueChange).toHaveBeenCalledWith(`secret123`),f(n.onChange).toHaveBeenCalled()}),await t(`it should call onBlur when the input is blurred`,async()=>{await p.keyboard(`{tab}`),f(n.onBlur).toHaveBeenCalled()}),await t(`it should render the dataset props`,async()=>{f(i).toHaveAttribute(`data-testid`,`field`),f(i).toHaveAttribute(`data-foo`,`bar`),f(a).toHaveAttribute(`data-testid`,`input`),f(a).toHaveAttribute(`data-foo`,`bar`)}),await t(`it should have password type by default`,async()=>{f(a).toHaveAttribute(`type`,`password`)})}},v={render:function(e){let[t,n]=(0,u.useState)(e.value);return(0,d.jsx)(s,{...e,value:t,onChange:t=>{n(t.target.value),e.onChange?.(t)}})},args:{label:`Controlled PasswordField`,placeholder:`Enter your password...`,value:`secret123`,defaultValue:void 0},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await f(e.getByTestId(`input`)).toHaveValue(`secret123`)}),await t(`it should update the value when the user types`,async()=>{let t=e.getByTestId(`input`);await p.clear(t),await p.type(t,`newpassword`),f(t).toHaveValue(`newpassword`)})}},y={args:{description:`Include letters, numbers and symbols`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{f(n).toHaveAccessibleDescription(`Include letters, numbers and symbols`),f(r).toHaveTextContent(`Include letters, numbers and symbols`)})}},b={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{f(n).toHaveAccessibleName(`Password`),f(r).toHaveTextContent(`Password`)}),await t(`it should render required attribute`,async()=>{f(n).toHaveAttribute(`required`)})}},x={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{f(e.getByTestId(`input`)).toHaveAccessibleName(`Password`)})}},S={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{f(n).toHaveAccessibleErrorMessage(`This is an error message`),f(r).toHaveTextContent(`This is an error message`)})}},C={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{f(n).toHaveAttribute(`disabled`)})}},w={args:{readOnly:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the read only input`,async()=>{f(n).toHaveAttribute(`readonly`)})}},T={parameters:{chromatic:{disableSnapshot:!0}},args:{label:`Password`,placeholder:`e.g.: abc123%pt0!`,description:`Include letters, numbers and symbols`},argTypes:{label:{control:`text`},placeholder:{control:`text`},description:{control:`text`},error:{control:`text`},value:{control:`text`},defaultValue:{control:`text`},inputDataset:{control:`object`},dataset:{control:`object`},id:{control:`text`},required:{control:`boolean`},hideLabel:{control:`boolean`},name:{control:`text`},disabled:{control:`boolean`},readOnly:{control:`boolean`},maxLength:{control:`number`},icon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":(0,d.jsx)(a,{svg:l})},control:`select`},autoComplete:{control:`select`},hasError:{table:{disable:!0}}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
play: async ({
|
|
3
3
|
canvasElement,
|
|
4
4
|
step,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./IconButton-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./IconButton-CQGXuX8O.js";import{n as o,t as s}from"./LayoutFlex-BlWwmFhv.js";import{n as c,t as l}from"./ProgressBar-CRitEeQk.js";import{i as u,n as d,r as f,t as p}from"./TokyoUIMinus-D-ZU-zJ8.js";var m,h,g,_,v,y,b,x;t((()=>{m=e(n(),1),c(),i(),o(),u(),d(),h=r(),g={title:`Components/ProgressBar`,component:l,parameters:{docs:{description:{component:`A component that visually indicates progress through a range of values.`}}},decorators:[e=>(0,h.jsx)(`div`,{style:{padding:`32px`,width:`500px`},children:(0,h.jsx)(e,{})})],args:{"aria-label":`Story`}},_={tags:[`!test`],args:{value:10,min:0,max:100},render:function({value:e,...t}){let[n,r]=(0,m.useState)(e),i=()=>r(Math.min(n+10,100));return(0,h.jsxs)(s,{alignItems:`center`,gap:`12`,children:[(0,h.jsx)(a,{svg:p,assistiveText:`Subtract`,onClick:()=>r(Math.max(n-10,0))}),(0,h.jsx)(`div`,{style:{width:150},children:(0,h.jsx)(l,{...t,value:n})}),(0,h.jsx)(a,{svg:f,assistiveText:`Add`,onClick:i})]})}},v={args:{value:0,min:0,max:100}},y={args:{value:100,min:0,max:100}},b={args:{value:2,min:1,max:5}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
tags: ['!test'],
|
|
3
3
|
args: {
|
|
4
4
|
value: 10,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./IconButton-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./IconButton-CQGXuX8O.js";import{n as o,t as s}from"./ProgressSteps-B2AXEKFJ.js";import{n as c,t as l}from"./LayoutFlex-BlWwmFhv.js";import{i as u,n as d,r as f,t as p}from"./TokyoUIMinus-D-ZU-zJ8.js";var m,h,g,_,v,y,b;t((()=>{m=e(n(),1),o(),c(),i(),u(),d(),h=r(),g={title:`Components/ProgressSteps`,component:s,decorators:[e=>(0,h.jsx)(`div`,{style:{padding:`32px`,width:`500px`},children:(0,h.jsx)(e,{})})],args:{"aria-label":`Story`}},_={tags:[`!test`],args:{currentStep:6,totalSteps:6},render:function({currentStep:e,totalSteps:t,...n}){let[r,i]=(0,m.useState)(e),o=()=>i(Math.min(r+1,t));return(0,h.jsxs)(l,{alignItems:`center`,gap:`12`,children:[(0,h.jsx)(a,{svg:p,assistiveText:`Subtract`,onClick:()=>i(Math.max(r-1,1))}),(0,h.jsx)(s,{...n,currentStep:r,totalSteps:t}),(0,h.jsx)(a,{svg:f,assistiveText:`Add`,onClick:o})]})}},v={args:{currentStep:1,totalSteps:6}},y={args:{currentStep:6,totalSteps:6}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
tags: ['!test'],
|
|
3
3
|
args: {
|
|
4
4
|
currentStep: 6,
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-
|
|
1
|
+
import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-BuOXI2w6.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,p:`p`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Components/Dialog/PromoDialog`}),`
|
|
2
2
|
`,(0,c.jsx)(t.h1,{id:`promodialog`,children:`PromoDialog`}),`
|
|
3
3
|
`,(0,c.jsxs)(t.p,{children:[`PromoDialog component is temporarily located in `,(0,c.jsx)(t.code,{children:`@preply/shared`}),`, check its stories in the `,(0,c.jsx)(t.a,{href:`https://apollo-storybook.preply.org/?path=/docs/design-system-promodialog--docs`,rel:`nofollow`,children:`apollo storybook`})]})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{C as o,E as s,T as c,_ as l,w as u}from"./iframe-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{C as o,E as s,T as c,_ as l,w as u}from"./iframe-BuOXI2w6.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";import{o as p,r as m}from"./lib-8ue2PVWI.js";import{a as h,i as g,n as _,r as v}from"./Slider-BgB4xT6m.js";var y,b,x,S=t((()=>{y=e(n(),1),l(),h(),i(),f(),m(),v(),b=a(),x=(0,y.forwardRef)(function({value:e,defaultValue:t=[0,100],onValueChange:n,onValueCommit:i,min:a=0,max:l=100,step:f=1,minStepsBetweenThumbs:m=0,dataset:h,"aria-label":v,...y},x){let{formatMessage:S}=p(),C=r(h,{preplyDsComponent:d.Slider}),w=n?e=>n([e[0],e[1]]):void 0,T=i?e=>i([e[0],e[1]]):void 0;return(0,b.jsxs)(u,{ref:x,...C,className:g.root,value:e,defaultValue:t,onValueChange:w,onValueCommit:T,min:a,max:l,step:f,minStepsBetweenThumbs:m,children:[(0,b.jsx)(s,{className:g.track,children:(0,b.jsx)(o,{className:g.range})}),(0,b.jsx)(c,{..._(y),className:g.thumb,"aria-label":S({id:`preply-ds.slider-field.accessibility-label.minimum`,defaultMessage:`Minimum {label}`,description:`A label for a slider input's minimum value.
|
|
2
2
|
For example: 'Minimum Price'.`},{label:v})}),(0,b.jsx)(c,{..._(y),className:g.thumb,"aria-label":S({id:`preply-ds.slider-field.accessibility-label.maximum`,defaultMessage:`Maximum {label}`,description:`A label for a slider input's maximum value.
|
|
3
3
|
For example: 'Maximum Price'.`},{label:v})})]})});try{x.displayName=`RangeSlider`,x.__docgenInfo={description:`A slider input that allows users to select a range between two values.`,displayName:`RangeSlider`,props:{id:{defaultValue:null,description:`The unique identifier for the range slider element.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-label":{defaultValue:null,description:`Accessible label for the range slider.`,name:`aria-label`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-labelledby":{defaultValue:null,description:`ID of the element that labels the range slider.`,name:`aria-labelledby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-describedby":{defaultValue:null,description:`ID of the element that describes the range slider.`,name:`aria-describedby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-invalid":{defaultValue:null,description:`Indicates whether the range slider value is invalid.`,name:`aria-invalid`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},"aria-errormessage":{defaultValue:null,description:`ID of the element that describes the error, if any.`,name:`aria-errormessage`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},value:{defaultValue:null,description:"The controlled value of the range slider.\nMust be used in conjunction with `onValueChange`.",name:`value`,required:!1,type:{name:`enum`,value:[{value:`RangeSliderValue`}]}},defaultValue:{defaultValue:{value:`[0, 100]`},description:`The value of the range slider when initially rendered.
|
|
4
4
|
Use when you do not need to control the state of the range slider.`,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`RangeSliderValue`}]}},onValueChange:{defaultValue:null,description:`Event handler called when the value changes.`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: RangeSliderValue) => void`}]}},onValueCommit:{defaultValue:null,description:`Event handler called when the value is committed (e.g. on pointer up or Enter key).`,name:`onValueCommit`,required:!1,type:{name:`enum`,value:[{value:`(value: RangeSliderValue) => void`}]}},name:{defaultValue:null,description:`The name of the range slider. Submitted with its owning form as part of a name/value pair.`,name:`name`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},min:{defaultValue:{value:`0`},description:`The minimum value for the range slider.`,name:`min`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},max:{defaultValue:{value:`100`},description:`The maximum value for the range slider.`,name:`max`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},step:{defaultValue:{value:`1`},description:`The slider stepping interval.`,name:`step`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},minStepsBetweenThumbs:{defaultValue:{value:`0`},description:`The minimum permitted steps between thumbs.`,name:`minStepsBetweenThumbs`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{S as n,x as t};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./RangeSlider-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./RangeSlider-CQsn2ggM.js";var o,s,c,l,u,d,f,p,m,h,g,_,v,y,b;t((()=>{o=e(n(),1),i(),s=r(),{action:c}=__STORYBOOK_MODULE_ACTIONS__,{expect:l,fn:u,userEvent:d,within:f}=__STORYBOOK_MODULE_TEST__,p=u(c(`change`)),m=u(c(`commit`)),h={title:`Components/Slider/RangeSlider`,component:a,decorators:[e=>(0,s.jsx)(`div`,{style:{padding:`32px`,maxWidth:`400px`},children:(0,s.jsx)(e,{})})],args:{"aria-label":`Sample`,onValueChange:p,onValueCommit:m}},g={play:async({canvasElement:e,step:t})=>{let[n,r]=f(e).getAllByRole(`slider`);l(n).not.toBeNull(),l(r).not.toBeNull(),await t(`Initial state`,async()=>{l(n).toHaveAttribute(`aria-valuenow`,`0`),l(r).toHaveAttribute(`aria-valuenow`,`100`)}),await t(`Move first thumb and verify value updates`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`1`),l(p).toBeCalledWith([1,100]),l(m).toBeCalledWith([1,100])}),await t(`Move second thumb and verify value updates`,async()=>{r.focus(),await d.keyboard(`{ArrowLeft}`),l(r).toHaveAttribute(`aria-valuenow`,`99`),l(p).toBeCalledWith([1,99]),l(m).toBeCalledWith([1,99])})}},_={args:{defaultValue:[25,75]},play:async({canvasElement:e,step:t})=>{let[n,r]=f(e).getAllByRole(`slider`);l(n).not.toBeNull(),l(r).not.toBeNull(),await t(`Initial state`,async()=>{l(n).toHaveAttribute(`aria-valuenow`,`25`),l(r).toHaveAttribute(`aria-valuenow`,`75`)}),await t(`Move first thumb and verify value updates`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`26`),l(p).toBeCalledWith([26,75]),l(m).toBeCalledWith([26,75])}),await t(`Move second thumb and verify value updates`,async()=>{r.focus(),await d.keyboard(`{ArrowLeft}`),l(r).toHaveAttribute(`aria-valuenow`,`74`),l(p).toBeCalledWith([26,74]),l(m).toBeCalledWith([26,74])})}},v={render:function(e){let[t,n]=(0,o.useState)([25,75]);return(0,s.jsx)(a,{...e,value:t,onValueChange:t=>{n(t),e.onValueChange?.(t)}})},play:async({canvasElement:e,step:t})=>{let[n,r]=f(e).getAllByRole(`slider`);l(n).not.toBeNull(),l(r).not.toBeNull(),await t(`Initial state`,async()=>{l(n).toHaveAttribute(`aria-valuenow`,`25`),l(r).toHaveAttribute(`aria-valuenow`,`75`)}),await t(`Move first thumb and verify value updates`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`26`),l(p).toBeCalledWith([26,75]),l(m).toBeCalledWith([26,75])}),await t(`Move second thumb and verify value updates`,async()=>{r.focus(),await d.keyboard(`{ArrowLeft}`),l(r).toHaveAttribute(`aria-valuenow`,`74`),l(p).toBeCalledWith([26,74]),l(m).toBeCalledWith([26,74])})}},y={args:{defaultValue:[1,4],minStepsBetweenThumbs:2,step:1},play:async({canvasElement:e,step:t})=>{let[n,r]=f(e).getAllByRole(`slider`);await l(n).not.toBeNull(),await l(r).not.toBeNull(),await t(`Initial state with minimum steps`,async()=>{await l(n).toHaveAttribute(`aria-valuenow`,`1`),await l(r).toHaveAttribute(`aria-valuenow`,`4`)}),await t(`Verify minimum steps constraint`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`.repeat(3)),await l(n).toHaveAttribute(`aria-valuenow`,`2`),r.focus(),await d.keyboard(`{ArrowLeft}`),await l(r).toHaveAttribute(`aria-valuenow`,`4`),await l(p).toHaveBeenNthCalledWith(1,[2,4])})}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
play: async ({
|
|
3
3
|
canvasElement,
|
|
4
4
|
step
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t,t as n}from"./chunk-BneVvdWh.js";import{t as r}from"./react-C7IZe2D1.js";import{t as i}from"./jsx-runtime-C2wGStra.js";import{n as a,t as o}from"./Button
|
|
1
|
+
import{a as e,n as t,t as n}from"./chunk-BneVvdWh.js";import{t as r}from"./react-C7IZe2D1.js";import{t as i}from"./jsx-runtime-C2wGStra.js";import{n as a,t as o}from"./Button--WTUF97E.js";import{n as s,t as c}from"./FormControl-DoNLVcw2.js";import{n as l,t as u}from"./RatingInput-BNKHainW.js";import{n as d,t as f}from"./Switch-DyKTsO1c.js";var p=n(((e,t)=>{var n=10,r=(e=0)=>t=>`\u001B[${38+e};5;${t}m`,i=(e=0)=>(t,n,r)=>`\u001B[${38+e};2;${t};${n};${r}m`;function a(){let e=new Map,t={modifier:{reset:[0,0],bold:[1,22],dim:[2,22],italic:[3,23],underline:[4,24],overline:[53,55],inverse:[7,27],hidden:[8,28],strikethrough:[9,29]},color:{black:[30,39],red:[31,39],green:[32,39],yellow:[33,39],blue:[34,39],magenta:[35,39],cyan:[36,39],white:[37,39],blackBright:[90,39],redBright:[91,39],greenBright:[92,39],yellowBright:[93,39],blueBright:[94,39],magentaBright:[95,39],cyanBright:[96,39],whiteBright:[97,39]},bgColor:{bgBlack:[40,49],bgRed:[41,49],bgGreen:[42,49],bgYellow:[43,49],bgBlue:[44,49],bgMagenta:[45,49],bgCyan:[46,49],bgWhite:[47,49],bgBlackBright:[100,49],bgRedBright:[101,49],bgGreenBright:[102,49],bgYellowBright:[103,49],bgBlueBright:[104,49],bgMagentaBright:[105,49],bgCyanBright:[106,49],bgWhiteBright:[107,49]}};t.color.gray=t.color.blackBright,t.bgColor.bgGray=t.bgColor.bgBlackBright,t.color.grey=t.color.blackBright,t.bgColor.bgGrey=t.bgColor.bgBlackBright;for(let[n,r]of Object.entries(t)){for(let[n,i]of Object.entries(r))t[n]={open:`\u001B[${i[0]}m`,close:`\u001B[${i[1]}m`},r[n]=t[n],e.set(i[0],i[1]);Object.defineProperty(t,n,{value:r,enumerable:!1})}return Object.defineProperty(t,`codes`,{value:e,enumerable:!1}),t.color.close=`\x1B[39m`,t.bgColor.close=`\x1B[49m`,t.color.ansi256=r(),t.color.ansi16m=i(),t.bgColor.ansi256=r(n),t.bgColor.ansi16m=i(n),Object.defineProperties(t,{rgbToAnsi256:{value:(e,t,n)=>e===t&&t===n?e<8?16:e>248?231:Math.round((e-8)/247*24)+232:16+36*Math.round(e/255*5)+6*Math.round(t/255*5)+Math.round(n/255*5),enumerable:!1},hexToRgb:{value:e=>{let t=/(?<colorString>[a-f\d]{6}|[a-f\d]{3})/i.exec(e.toString(16));if(!t)return[0,0,0];let{colorString:n}=t.groups;n.length===3&&(n=n.split(``).map(e=>e+e).join(``));let r=Number.parseInt(n,16);return[r>>16&255,r>>8&255,r&255]},enumerable:!1},hexToAnsi256:{value:e=>t.rgbToAnsi256(...t.hexToRgb(e)),enumerable:!1}}),t}Object.defineProperty(t,`exports`,{enumerable:!0,get:a})})),m=n((e=>{Object.defineProperty(e,`__esModule`,{value:!0}),e.printIteratorEntries=n,e.printIteratorValues=r,e.printListItems=i,e.printObjectProperties=a;var t=(e,t)=>{let n=Object.keys(e).sort(t);return Object.getOwnPropertySymbols&&Object.getOwnPropertySymbols(e).forEach(t=>{Object.getOwnPropertyDescriptor(e,t).enumerable&&n.push(t)}),n};function n(e,t,n,r,i,a,o=`: `){let s=``,c=e.next();if(!c.done){s+=t.spacingOuter;let l=n+t.indent;for(;!c.done;){let n=a(c.value[0],t,l,r,i),u=a(c.value[1],t,l,r,i);s+=l+n+o+u,c=e.next(),c.done?t.min||(s+=`,`):s+=`,`+t.spacingInner}s+=t.spacingOuter+n}return s}function r(e,t,n,r,i,a){let o=``,s=e.next();if(!s.done){o+=t.spacingOuter;let c=n+t.indent;for(;!s.done;)o+=c+a(s.value,t,c,r,i),s=e.next(),s.done?t.min||(o+=`,`):o+=`,`+t.spacingInner;o+=t.spacingOuter+n}return o}function i(e,t,n,r,i,a){let o=``;if(e.length){o+=t.spacingOuter;let s=n+t.indent;for(let n=0;n<e.length;n++)o+=s,n in e&&(o+=a(e[n],t,s,r,i)),n<e.length-1?o+=`,`+t.spacingInner:t.min||(o+=`,`);o+=t.spacingOuter+n}return o}function a(e,n,r,i,a,o){let s=``,c=t(e,n.compareKeys);if(c.length){s+=n.spacingOuter;let t=r+n.indent;for(let r=0;r<c.length;r++){let l=c[r],u=o(l,n,t,i,a),d=o(e[l],n,t,i,a);s+=t+u+`: `+d,r<c.length-1?s+=`,`+n.spacingInner:n.min||(s+=`,`)}s+=n.spacingOuter+r}return s}})),h=n((e=>{Object.defineProperty(e,`__esModule`,{value:!0}),e.test=e.serialize=e.default=void 0;var t=m(),n=(function(){return typeof globalThis<`u`?globalThis:n===void 0?typeof self<`u`?self:typeof window<`u`?window:Function(`return this`)():n})(),r=n[`jest-symbol-do-not-touch`]||n.Symbol,i=typeof r==`function`&&r.for?r.for(`jest.asymmetricMatcher`):1267621,a=` `,o=(e,n,r,i,o,s)=>{let c=e.toString();return c===`ArrayContaining`||c===`ArrayNotContaining`?++i>n.maxDepth?`[`+c+`]`:c+a+`[`+(0,t.printListItems)(e.sample,n,r,i,o,s)+`]`:c===`ObjectContaining`||c===`ObjectNotContaining`?++i>n.maxDepth?`[`+c+`]`:c+a+`{`+(0,t.printObjectProperties)(e.sample,n,r,i,o,s)+`}`:c===`StringMatching`||c===`StringNotMatching`||c===`StringContaining`||c===`StringNotContaining`?c+a+s(e.sample,n,r,i,o):e.toAsymmetricMatcher()};e.serialize=o;var s=e=>e&&e.$$typeof===i;e.test=s,e.default={serialize:o,test:s}})),g=n(((e,t)=>{t.exports=({onlyFirst:e=!1}={})=>{let t=[`[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)`,`(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-ntqry=><~]))`].join(`|`);return new RegExp(t,e?void 0:`g`)}})),_=n((e=>{Object.defineProperty(e,`__esModule`,{value:!0}),e.test=e.serialize=e.default=void 0;var t=r(g()),n=r(p());function r(e){return e&&e.__esModule?e:{default:e}}var i=e=>e.replace((0,t.default)(),e=>{switch(e){case n.default.red.close:case n.default.green.close:case n.default.cyan.close:case n.default.gray.close:case n.default.white.close:case n.default.yellow.close:case n.default.bgRed.close:case n.default.bgGreen.close:case n.default.bgYellow.close:case n.default.inverse.close:case n.default.dim.close:case n.default.bold.close:case n.default.reset.open:case n.default.reset.close:return`</>`;case n.default.red.open:return`<red>`;case n.default.green.open:return`<green>`;case n.default.cyan.open:return`<cyan>`;case n.default.gray.open:return`<gray>`;case n.default.white.open:return`<white>`;case n.default.yellow.open:return`<yellow>`;case n.default.bgRed.open:return`<bgRed>`;case n.default.bgGreen.open:return`<bgGreen>`;case n.default.bgYellow.open:return`<bgYellow>`;case n.default.inverse.open:return`<inverse>`;case n.default.dim.open:return`<dim>`;case n.default.bold.open:return`<bold>`;default:return``}}),a=e=>typeof e==`string`&&!!e.match((0,t.default)());e.test=a;var o=(e,t,n,r,a,o)=>o(i(e),t,n,r,a);e.serialize=o,e.default={serialize:o,test:a}})),v=n((e=>{Object.defineProperty(e,`__esModule`,{value:!0}),e.test=e.serialize=e.default=void 0;var t=m(),n=` `,r=[`DOMStringMap`,`NamedNodeMap`],i=/^(HTML\w*Collection|NodeList)$/,a=e=>r.indexOf(e)!==-1||i.test(e),o=e=>e&&e.constructor&&!!e.constructor.name&&a(e.constructor.name);e.test=o;var s=e=>e.constructor.name===`NamedNodeMap`,c=(e,i,a,o,c,l)=>{let u=e.constructor.name;return++o>i.maxDepth?`[`+u+`]`:(i.min?``:u+n)+(r.indexOf(u)===-1?`[`+(0,t.printListItems)(Array.from(e),i,a,o,c,l)+`]`:`{`+(0,t.printObjectProperties)(s(e)?Array.from(e).reduce((e,t)=>(e[t.name]=t.value,e),{}):{...e},i,a,o,c,l)+`}`)};e.serialize=c,e.default={serialize:c,test:o}})),y=n((e=>{Object.defineProperty(e,`__esModule`,{value:!0}),e.default=t;function t(e){return e.replace(/</g,`<`).replace(/>/g,`>`)}})),b=n((e=>{Object.defineProperty(e,`__esModule`,{value:!0}),e.printText=e.printProps=e.printElementAsLeaf=e.printElement=e.printComment=e.printChildren=void 0;var t=n(y());function n(e){return e&&e.__esModule?e:{default:e}}e.printProps=(e,t,n,r,i,a,o)=>{let s=r+n.indent,c=n.colors;return e.map(e=>{let l=t[e],u=o(l,n,s,i,a);return typeof l!=`string`&&(u.indexOf(`
|
|
2
2
|
`)!==-1&&(u=n.spacingOuter+s+u+n.spacingOuter+r),u=`{`+u+`}`),n.spacingInner+r+c.prop.open+e+c.prop.close+`=`+c.value.open+u+c.value.close}).join(``)},e.printChildren=(e,t,n,i,a,o)=>e.map(e=>t.spacingOuter+n+(typeof e==`string`?r(e,t):o(e,t,n,i,a))).join(``);var r=(e,n)=>{let r=n.colors.content;return r.open+(0,t.default)(e)+r.close};e.printText=r,e.printComment=(e,n)=>{let r=n.colors.comment;return r.open+`<!--`+(0,t.default)(e)+`-->`+r.close},e.printElement=(e,t,n,r,i)=>{let a=r.colors.tag;return a.open+`<`+e+(t&&a.close+t+r.spacingOuter+i+a.open)+(n?`>`+a.close+n+r.spacingOuter+i+a.open+`</`+e:(t&&!r.min?``:` `)+`/`)+`>`+a.close},e.printElementAsLeaf=(e,t)=>{let n=t.colors.tag;return n.open+`<`+e+n.close+` …`+n.open+` />`+n.close}})),x=n((e=>{Object.defineProperty(e,`__esModule`,{value:!0}),e.test=e.serialize=e.default=void 0;var t=b(),n=1,r=3,i=8,a=11,o=/^((HTML|SVG)\w*)?Element$/,s=e=>{try{return typeof e.hasAttribute==`function`&&e.hasAttribute(`is`)}catch{return!1}},c=e=>{let t=e.constructor.name,{nodeType:c,tagName:l}=e,u=typeof l==`string`&&l.includes(`-`)||s(e);return c===n&&(o.test(t)||u)||c===r&&t===`Text`||c===i&&t===`Comment`||c===a&&t===`DocumentFragment`},l=e=>e?.constructor?.name&&c(e);e.test=l;function u(e){return e.nodeType===r}function d(e){return e.nodeType===i}function f(e){return e.nodeType===a}var p=(e,n,r,i,a,o)=>{if(u(e))return(0,t.printText)(e.data,n);if(d(e))return(0,t.printComment)(e.data,n);let s=f(e)?`DocumentFragment`:e.tagName.toLowerCase();return++i>n.maxDepth?(0,t.printElementAsLeaf)(s,n):(0,t.printElement)(s,(0,t.printProps)(f(e)?[]:Array.from(e.attributes).map(e=>e.name).sort(),f(e)?{}:Array.from(e.attributes).reduce((e,t)=>(e[t.name]=t.value,e),{}),n,r+n.indent,i,a,o),(0,t.printChildren)(Array.prototype.slice.call(e.childNodes||e.children),n,r+n.indent,i,a,o),n,r)};e.serialize=p,e.default={serialize:p,test:l}})),ee=n((e=>{Object.defineProperty(e,`__esModule`,{value:!0}),e.test=e.serialize=e.default=void 0;var t=m(),n=`@@__IMMUTABLE_ITERABLE__@@`,r=`@@__IMMUTABLE_LIST__@@`,i=`@@__IMMUTABLE_KEYED__@@`,a=`@@__IMMUTABLE_MAP__@@`,o=`@@__IMMUTABLE_ORDERED__@@`,s=`@@__IMMUTABLE_RECORD__@@`,c=`@@__IMMUTABLE_SEQ__@@`,l=`@@__IMMUTABLE_SET__@@`,u=`@@__IMMUTABLE_STACK__@@`,d=e=>`Immutable.`+e,f=e=>`[`+e+`]`,p=` `,h=`…`,g=(e,n,r,i,a,o,s)=>++i>n.maxDepth?f(d(s)):d(s)+p+`{`+(0,t.printIteratorEntries)(e.entries(),n,r,i,a,o)+`}`;function _(e){let t=0;return{next(){if(t<e._keys.length){let n=e._keys[t++];return{done:!1,value:[n,e.get(n)]}}return{done:!0,value:void 0}}}}var v=(e,n,r,i,a,o)=>{let s=d(e._name||`Record`);return++i>n.maxDepth?f(s):s+p+`{`+(0,t.printIteratorEntries)(_(e),n,r,i,a,o)+`}`},y=(e,n,r,a,o,s)=>{let c=d(`Seq`);return++a>n.maxDepth?f(c):e[i]?c+p+`{`+(e._iter||e._object?(0,t.printIteratorEntries)(e.entries(),n,r,a,o,s):h)+`}`:c+p+`[`+(e._iter||e._array||e._collection||e._iterable?(0,t.printIteratorValues)(e.values(),n,r,a,o,s):h)+`]`},b=(e,n,r,i,a,o,s)=>++i>n.maxDepth?f(d(s)):d(s)+p+`[`+(0,t.printIteratorValues)(e.values(),n,r,i,a,o)+`]`,x=(e,t,n,i,s,d)=>e[a]?g(e,t,n,i,s,d,e[o]?`OrderedMap`:`Map`):e[r]?b(e,t,n,i,s,d,`List`):e[l]?b(e,t,n,i,s,d,e[o]?`OrderedSet`:`Set`):e[u]?b(e,t,n,i,s,d,`Stack`):e[c]?y(e,t,n,i,s,d):v(e,t,n,i,s,d);e.serialize=x;var ee=e=>e&&(e[n]===!0||e[s]===!0);e.test=ee,e.default={serialize:x,test:ee}})),te=n((e=>{var t=60103,n=60106,r=60107,i=60108,a=60114,o=60109,s=60110,c=60112,l=60113,u=60120,d=60115,f=60116,p=60121,m=60122,h=60117,g=60129,_=60131;if(typeof Symbol==`function`&&Symbol.for){var v=Symbol.for;t=v(`react.element`),n=v(`react.portal`),r=v(`react.fragment`),i=v(`react.strict_mode`),a=v(`react.profiler`),o=v(`react.provider`),s=v(`react.context`),c=v(`react.forward_ref`),l=v(`react.suspense`),u=v(`react.suspense_list`),d=v(`react.memo`),f=v(`react.lazy`),p=v(`react.block`),m=v(`react.server.block`),h=v(`react.fundamental`),g=v(`react.debug_trace_mode`),_=v(`react.legacy_hidden`)}function y(e){if(typeof e==`object`&&e){var p=e.$$typeof;switch(p){case t:switch(e=e.type,e){case r:case a:case i:case l:case u:return e;default:switch(e&&=e.$$typeof,e){case s:case c:case f:case d:case o:return e;default:return p}}case n:return p}}}var b=o,x=t,ee=c,te=r,ne=f,re=d,ie=n,ae=a,S=i,oe=l;e.ContextConsumer=s,e.ContextProvider=b,e.Element=x,e.ForwardRef=ee,e.Fragment=te,e.Lazy=ne,e.Memo=re,e.Portal=ie,e.Profiler=ae,e.StrictMode=S,e.Suspense=oe,e.isAsyncMode=function(){return!1},e.isConcurrentMode=function(){return!1},e.isContextConsumer=function(e){return y(e)===s},e.isContextProvider=function(e){return y(e)===o},e.isElement=function(e){return typeof e==`object`&&!!e&&e.$$typeof===t},e.isForwardRef=function(e){return y(e)===c},e.isFragment=function(e){return y(e)===r},e.isLazy=function(e){return y(e)===f},e.isMemo=function(e){return y(e)===d},e.isPortal=function(e){return y(e)===n},e.isProfiler=function(e){return y(e)===a},e.isStrictMode=function(e){return y(e)===i},e.isSuspense=function(e){return y(e)===l},e.isValidElementType=function(e){return!!(typeof e==`string`||typeof e==`function`||e===r||e===a||e===g||e===i||e===l||e===u||e===_||typeof e==`object`&&e&&(e.$$typeof===f||e.$$typeof===d||e.$$typeof===o||e.$$typeof===s||e.$$typeof===c||e.$$typeof===h||e.$$typeof===p||e[0]===m))},e.typeOf=y})),ne=n(((e,t)=>{t.exports=te()})),re=n((e=>{Object.defineProperty(e,`__esModule`,{value:!0}),e.test=e.serialize=e.default=void 0;var t=i(ne()),n=b();function r(e){if(typeof WeakMap!=`function`)return null;var t=new WeakMap,n=new WeakMap;return(r=function(e){return e?n:t})(e)}function i(e,t){if(!t&&e&&e.__esModule)return e;if(e===null||typeof e!=`object`&&typeof e!=`function`)return{default:e};var n=r(t);if(n&&n.has(e))return n.get(e);var i={},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(o!==`default`&&Object.prototype.hasOwnProperty.call(e,o)){var s=a?Object.getOwnPropertyDescriptor(e,o):null;s&&(s.get||s.set)?Object.defineProperty(i,o,s):i[o]=e[o]}return i.default=e,n&&n.set(e,i),i}var a=(e,t=[])=>(Array.isArray(e)?e.forEach(e=>{a(e,t)}):e!=null&&e!==!1&&t.push(e),t),o=e=>{let n=e.type;if(typeof n==`string`)return n;if(typeof n==`function`)return n.displayName||n.name||`Unknown`;if(t.isFragment(e))return`React.Fragment`;if(t.isSuspense(e))return`React.Suspense`;if(typeof n==`object`&&n){if(t.isContextProvider(e))return`Context.Provider`;if(t.isContextConsumer(e))return`Context.Consumer`;if(t.isForwardRef(e)){if(n.displayName)return n.displayName;let e=n.render.displayName||n.render.name||``;return e===``?`ForwardRef`:`ForwardRef(`+e+`)`}if(t.isMemo(e)){let e=n.displayName||n.type.displayName||n.type.name||``;return e===``?`Memo`:`Memo(`+e+`)`}}return`UNDEFINED`},s=e=>{let{props:t}=e;return Object.keys(t).filter(e=>e!==`children`&&t[e]!==void 0).sort()},c=(e,t,r,i,c,l)=>++i>t.maxDepth?(0,n.printElementAsLeaf)(o(e),t):(0,n.printElement)(o(e),(0,n.printProps)(s(e),e.props,t,r+t.indent,i,c,l),(0,n.printChildren)(a(e.props.children),t,r+t.indent,i,c,l),t,r);e.serialize=c;var l=e=>e!=null&&t.isElement(e);e.test=l,e.default={serialize:c,test:l}})),ie=n((e=>{Object.defineProperty(e,`__esModule`,{value:!0}),e.test=e.serialize=e.default=void 0;var t=b(),n=(function(){return typeof globalThis<`u`?globalThis:n===void 0?typeof self<`u`?self:typeof window<`u`?window:Function(`return this`)():n})(),r=n[`jest-symbol-do-not-touch`]||n.Symbol,i=typeof r==`function`&&r.for?r.for(`react.test.json`):245830487,a=e=>{let{props:t}=e;return t?Object.keys(t).filter(e=>t[e]!==void 0).sort():[]},o=(e,n,r,i,o,s)=>++i>n.maxDepth?(0,t.printElementAsLeaf)(e.type,n):(0,t.printElement)(e.type,e.props?(0,t.printProps)(a(e),e.props,n,r+n.indent,i,o,s):``,e.children?(0,t.printChildren)(e.children,n,r+n.indent,i,o,s):``,n,r);e.serialize=o;var s=e=>e&&e.$$typeof===i;e.test=s,e.default={serialize:o,test:s}})),ae=n((e=>{Object.defineProperty(e,`__esModule`,{value:!0}),e.default=e.DEFAULT_OPTIONS=void 0,e.format=we,e.plugins=void 0;var t=u(p()),n=m(),r=u(h()),i=u(_()),a=u(v()),o=u(x()),s=u(ee()),c=u(re()),l=u(ie());function u(e){return e&&e.__esModule?e:{default:e}}var d=Object.prototype.toString,f=Date.prototype.toISOString,g=Error.prototype.toString,y=RegExp.prototype.toString,b=e=>typeof e.constructor==`function`&&e.constructor.name||`Object`,te=e=>typeof window<`u`&&e===window,ne=/^Symbol\((.*)\)(.*)$/,ae=/\n/gi,S=class extends Error{constructor(e,t){super(e),this.stack=t,this.name=this.constructor.name}};function oe(e){return e===`[object Array]`||e===`[object ArrayBuffer]`||e===`[object DataView]`||e===`[object Float32Array]`||e===`[object Float64Array]`||e===`[object Int8Array]`||e===`[object Int16Array]`||e===`[object Int32Array]`||e===`[object Uint8Array]`||e===`[object Uint8ClampedArray]`||e===`[object Uint16Array]`||e===`[object Uint32Array]`}function se(e){return Object.is(e,-0)?`-0`:String(e)}function C(e){return String(`${e}n`)}function ce(e,t){return t?`[Function `+(e.name||`anonymous`)+`]`:`[Function]`}function le(e){return String(e).replace(ne,`Symbol($1)`)}function ue(e){return`[`+g.call(e)+`]`}function w(e,t,n,r){if(e===!0||e===!1)return``+e;if(e===void 0)return`undefined`;if(e===null)return`null`;let i=typeof e;if(i===`number`)return se(e);if(i===`bigint`)return C(e);if(i===`string`)return r?`"`+e.replace(/"|\\/g,`\\$&`)+`"`:`"`+e+`"`;if(i===`function`)return ce(e,t);if(i===`symbol`)return le(e);let a=d.call(e);return a===`[object WeakMap]`?`WeakMap {}`:a===`[object WeakSet]`?`WeakSet {}`:a===`[object Function]`||a===`[object GeneratorFunction]`?ce(e,t):a===`[object Symbol]`?le(e):a===`[object Date]`?isNaN(+e)?`Date { NaN }`:f.call(e):a===`[object Error]`?ue(e):a===`[object RegExp]`?n?y.call(e).replace(/[\\^$*+?.()|[\]{}]/g,`\\$&`):y.call(e):e instanceof Error?ue(e):null}function de(e,t,r,i,a,o){if(a.indexOf(e)!==-1)return`[Circular]`;a=a.slice(),a.push(e);let s=++i>t.maxDepth,c=t.min;if(t.callToJSON&&!s&&e.toJSON&&typeof e.toJSON==`function`&&!o)return T(e.toJSON(),t,r,i,a,!0);let l=d.call(e);return l===`[object Arguments]`?s?`[Arguments]`:(c?``:`Arguments `)+`[`+(0,n.printListItems)(e,t,r,i,a,T)+`]`:oe(l)?s?`[`+e.constructor.name+`]`:(c||!t.printBasicPrototype&&e.constructor.name===`Array`?``:e.constructor.name+` `)+`[`+(0,n.printListItems)(e,t,r,i,a,T)+`]`:l===`[object Map]`?s?`[Map]`:`Map {`+(0,n.printIteratorEntries)(e.entries(),t,r,i,a,T,` => `)+`}`:l===`[object Set]`?s?`[Set]`:`Set {`+(0,n.printIteratorValues)(e.values(),t,r,i,a,T)+`}`:s||te(e)?`[`+b(e)+`]`:(c||!t.printBasicPrototype&&b(e)===`Object`?``:b(e)+` `)+`{`+(0,n.printObjectProperties)(e,t,r,i,a,T)+`}`}function fe(e){return e.serialize!=null}function pe(e,t,n,r,i,a){let o;try{o=fe(e)?e.serialize(t,n,r,i,a,T):e.print(t,e=>T(e,n,r,i,a),e=>{let t=r+n.indent;return t+e.replace(ae,`
|
|
3
3
|
`+t)},{edgeSpacing:n.spacingOuter,min:n.min,spacing:n.spacingInner},n.colors)}catch(e){throw new S(e.message,e.stack)}if(typeof o!=`string`)throw Error(`pretty-format: Plugin must return type "string" but instead returned "${typeof o}".`);return o}function me(e,t){for(let n=0;n<e.length;n++)try{if(e[n].test(t))return e[n]}catch(e){throw new S(e.message,e.stack)}return null}function T(e,t,n,r,i,a){let o=me(t.plugins,e);if(o!==null)return pe(o,e,t,n,r,i);let s=w(e,t.printFunctionName,t.escapeRegex,t.escapeString);return s===null?de(e,t,n,r,i,a):s}var he={comment:`gray`,content:`reset`,prop:`yellow`,tag:`cyan`,value:`green`},ge=Object.keys(he),E={callToJSON:!0,compareKeys:void 0,escapeRegex:!1,escapeString:!0,highlight:!1,indent:2,maxDepth:1/0,min:!1,plugins:[],printBasicPrototype:!0,printFunctionName:!0,theme:he};e.DEFAULT_OPTIONS=E;function _e(e){if(Object.keys(e).forEach(e=>{if(!E.hasOwnProperty(e))throw Error(`pretty-format: Unknown option "${e}".`)}),e.min&&e.indent!==void 0&&e.indent!==0)throw Error(`pretty-format: Options "min" and "indent" cannot be used together.`);if(e.theme!==void 0){if(e.theme===null)throw Error(`pretty-format: Option "theme" must not be null.`);if(typeof e.theme!=`object`)throw Error(`pretty-format: Option "theme" must be of type "object" but instead received "${typeof e.theme}".`)}}var D=e=>ge.reduce((n,r)=>{let i=e.theme&&e.theme[r]!==void 0?e.theme[r]:he[r],a=i&&t.default[i];if(a&&typeof a.close==`string`&&typeof a.open==`string`)n[r]=a;else throw Error(`pretty-format: Option "theme" has a key "${r}" whose value "${i}" is undefined in ansi-styles.`);return n},Object.create(null)),ve=()=>ge.reduce((e,t)=>(e[t]={close:``,open:``},e),Object.create(null)),ye=e=>e&&e.printFunctionName!==void 0?e.printFunctionName:E.printFunctionName,be=e=>e&&e.escapeRegex!==void 0?e.escapeRegex:E.escapeRegex,xe=e=>e&&e.escapeString!==void 0?e.escapeString:E.escapeString,Se=e=>({callToJSON:e&&e.callToJSON!==void 0?e.callToJSON:E.callToJSON,colors:e&&e.highlight?D(e):ve(),compareKeys:e&&typeof e.compareKeys==`function`?e.compareKeys:E.compareKeys,escapeRegex:be(e),escapeString:xe(e),indent:e&&e.min?``:Ce(e&&e.indent!==void 0?e.indent:E.indent),maxDepth:e&&e.maxDepth!==void 0?e.maxDepth:E.maxDepth,min:e&&e.min!==void 0?e.min:E.min,plugins:e&&e.plugins!==void 0?e.plugins:E.plugins,printBasicPrototype:e?.printBasicPrototype??!0,printFunctionName:ye(e),spacingInner:e&&e.min?` `:`
|
|
4
4
|
`,spacingOuter:e&&e.min?``:`
|