@preply/ds-docs 11.4.0 → 11.5.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/dist/assets/{00.LayoutFlex.stories-BPok5Gmm.js → 00.LayoutFlex.stories-BqNKOxzc.js} +1 -1
- package/dist/assets/{00.applications-BGZaoKgL.js → 00.applications-CyJAiQf3.js} +1 -1
- package/dist/assets/{00.favicons.guide-D5wPncOn.js → 00.favicons.guide-BwKV7LgZ.js} +1 -1
- package/dist/assets/{00.token-explorer-BDLlwhc6.js → 00.token-explorer-D3HQJ3dy.js} +1 -1
- package/dist/assets/{00.using-responsive-props-BRxnFd5i.js → 00.using-responsive-props-CCkI1Tld.js} +1 -1
- package/dist/assets/{01.semantic-tokens-CFudZ7pc.js → 01.semantic-tokens-BK7BLZcq.js} +1 -1
- package/dist/assets/{01.using-shorthand-props-DchZCZhq.js → 01.using-shorthand-props-CBbf3XxB.js} +1 -1
- package/dist/assets/{10.Combinations.stories-BN4qNVGI.js → 10.Combinations.stories-TKz5kBVj.js} +1 -1
- package/dist/assets/{10.fonts.guide-BWS-fMyC.js → 10.fonts.guide-UdXB_iOK.js} +1 -1
- package/dist/assets/{10.ssr-DFhHeGSZ.js → 10.ssr-C1u7dvjT.js} +1 -1
- package/dist/assets/{11.fonts.explorer-BS1XxSRj.js → 11.fonts.explorer-CDjnXfid.js} +1 -1
- package/dist/assets/{11.ssr.app-router-CWuMPO3g.js → 11.ssr.app-router-Cs4FOPhH.js} +1 -1
- package/dist/assets/{20.libraries-J4C2b4WP.js → 20.libraries-ioSyK1LY.js} +1 -1
- package/dist/assets/{2025-q4-ds-cleanup-DzhmHakd.js → 2025-q4-ds-cleanup-DbXMK8WZ.js} +1 -1
- package/dist/assets/30.icons.explorer-6cQPOSNU.js +72 -0
- package/dist/assets/{30.storybook-1O5EtrKp.js → 30.storybook-DlAnWMKK.js} +1 -1
- package/dist/assets/{40.illustrations.explorer-C_NqekHv.js → 40.illustrations.explorer-B7_S_GNn.js} +1 -1
- package/dist/assets/{60.components-CxzcTHHY.js → 60.components-jfwjYYtD.js} +1 -1
- package/dist/assets/{90.advanced-J2ehdLM6.js → 90.advanced-Do_Wb8pV.js} +1 -1
- package/dist/assets/{Accordion-CWMWW-O5.js → Accordion-DlAp8KmP.js} +1 -1
- package/dist/assets/{Accordion.stories-DDqM6MXv.js → Accordion.stories-C12F7sjW.js} +1 -1
- package/dist/assets/{Accordion.tests.stories-DN9L-q3H.js → Accordion.tests.stories-CE9oHsW9.js} +1 -1
- package/dist/assets/{AlertBanner.primitives.stories-mKVHs8FF.js → AlertBanner.primitives.stories-WvY-_iZh.js} +1 -1
- package/dist/assets/{AlertBanner.stories-BV3lnGPY.js → AlertBanner.stories-F7Vn8C02.js} +1 -1
- package/dist/assets/{AlertBannerAction-DU-Yr-4k.js → AlertBannerAction-BYa4kXiw.js} +11 -11
- package/dist/assets/{AlertDialog-CFUnhRAx.js → AlertDialog-D7FoU9Mo.js} +1 -1
- package/dist/assets/{AlertDialog.stories-DovmfFOJ.js → AlertDialog.stories-DKp7VN29.js} +1 -1
- package/dist/assets/{Badge-DeL8OM1F.js → Badge-DWIG0IOC.js} +2 -2
- package/dist/assets/{Badge.stories-BemzPh97.js → Badge.stories-BMAaOyYW.js} +1 -1
- package/dist/assets/{Box-CcR4H93c.js → Box-C3D0dCXP.js} +1 -1
- package/dist/assets/{Box.stories-B4Kkg_Wz.js → Box.stories-BYLL5FQs.js} +1 -1
- package/dist/assets/{BubbleCounter-CfdjWlAV.js → BubbleCounter-C02fRH2E.js} +1 -1
- package/dist/assets/{BubbleCounter.stories-DRq0-Or2.js → BubbleCounter.stories-DMwREIgs.js} +1 -1
- package/dist/assets/{Button--WTUF97E.js → Button-_0pS2khJ.js} +2 -2
- package/dist/assets/{Button.stories-B5ddris9.js → Button.stories-DxmLSlgT.js} +1 -1
- package/dist/assets/{ButtonBase-CMQthdSK.js → ButtonBase-CMUecywM.js} +1 -1
- package/dist/assets/{CalloutBanner.stories-C60JgqC0.js → CalloutBanner.stories-YHmPUMKD.js} +1 -1
- package/dist/assets/{CalloutBannerText-DDPb7LsF.js → CalloutBannerText-BcIjTCPR.js} +4 -4
- package/dist/assets/{Checkbox.stories-D6wUFMNN.js → Checkbox.stories-DMh-0H-W.js} +1 -1
- package/dist/assets/{Checkbox.tests.stories-FLl_ZNDM.js → Checkbox.tests.stories-BwjQYoFK.js} +1 -1
- package/dist/assets/{Chips.stories-BfLNlLSh.js → Chips.stories-_gpuOeIw.js} +1 -1
- package/dist/assets/{Color-6BZIO3FS-CcuLIbdP.js → Color-6BZIO3FS-D9fH_9BP.js} +1 -1
- package/dist/assets/{ComposingDialogs.stories-Bwtla9z9.js → ComposingDialogs.stories-BtoJMTfu.js} +1 -1
- package/dist/assets/{ComposingPopovers.stories-BdgYJQKE.js → ComposingPopovers.stories-CBbifa2e.js} +1 -1
- package/dist/assets/CountryFlag-CqhLpgul.js +3 -0
- package/dist/assets/{CountryFlag.stories-B0_35WJ9.js → CountryFlag.stories-DCh8nQ3R.js} +1 -1
- package/dist/assets/{CountryFlag.test.stories-DGoCByQP.js → CountryFlag.test.stories-KdCwJQaC.js} +1 -1
- package/dist/assets/{Dialog-BT0Kd0KN.js → Dialog-DJ_22m-M.js} +1 -1
- package/dist/assets/Dialog.primitives.stories-_LjNw1Aq.js +193 -0
- package/dist/assets/{Dialog.stories-C0BUsh4I.js → Dialog.stories-BgLYxxSl.js} +1 -1
- package/dist/assets/{Dialog.test.stories-BapfC0Yd.js → Dialog.test.stories-CCA5_y47.js} +1 -1
- package/dist/assets/{DialogActions-BDIzA8PJ.js → DialogActions-D5TuMAHt.js} +1 -1
- package/dist/assets/{DialogCloseButton-CAY9jDgH.js → DialogCloseButton-V4tiko9-.js} +3 -3
- package/dist/assets/DismissibleChips-DIxEewPp.js +1 -0
- package/dist/assets/{DismissibleChips.stories-D8vGzcJU.js → DismissibleChips.stories-DTC-zjPX.js} +1 -1
- package/dist/assets/{DocsRenderer-LL677BLK-DZVr0WqC.js → DocsRenderer-LL677BLK-4u1YXi13.js} +1 -1
- package/dist/assets/{DropdownMenu-DJWxVTCB.js → DropdownMenu-L_qQlJsT.js} +9 -9
- package/dist/assets/{DropdownMenu.stories-CejSoUQc.js → DropdownMenu.stories-CS1tMRg_.js} +1 -1
- package/dist/assets/{FormControl-DoNLVcw2.js → FormControl-B3jdXz5i.js} +1 -1
- package/dist/assets/{FormControl.stories-CM0O-z49.js → FormControl.stories-D7X11Qhj.js} +1 -1
- package/dist/assets/{Heading-B3jb_-J8.js → Heading-DX-HCDkx.js} +1 -1
- package/dist/assets/{Heading.stories-DjrU1PaC.js → Heading.stories-DhvMfSFQ.js} +1 -1
- package/dist/assets/{Icon-Dqr2b6tP.js → Icon-BItN7xKl.js} +1 -1
- package/dist/assets/{Icon-RSC-CIkzpnfO.js → Icon-RSC-DjKuVLz1.js} +1 -1
- package/dist/assets/{Icon.stories-1leYoSZM.js → Icon.stories-FXAqY7I2.js} +1 -1
- package/dist/assets/IconButton-sZZtNos_.js +9 -0
- package/dist/assets/{IconTile.stories-C3MYzhR1.js → IconTile.stories-IpimMCpQ.js} +1 -1
- package/dist/assets/{IntegrationWithReactHookForm.stories-7-TsLOR4.js → IntegrationWithReactHookForm.stories-DsGQ7mGb.js} +1 -1
- package/dist/assets/{IntlFormattedCurrency.stories-C_afrVTI.js → IntlFormattedCurrency.stories-D53a5bAt.js} +1 -1
- package/dist/assets/{IntlFormattedDateTime.stories-DAllZCk9.js → IntlFormattedDateTime.stories-BjHGvxyx.js} +1 -1
- package/dist/assets/{LayoutFlex-BlWwmFhv.js → LayoutFlex-CEOcocT6.js} +1 -1
- package/dist/assets/{LayoutFlexItem-Ck-D8viJ.js → LayoutFlexItem-DJZHfd4G.js} +1 -1
- package/dist/assets/{LayoutGrid-BCMSACUf.js → LayoutGrid-Ce9ffWmL.js} +1 -1
- package/dist/assets/{LayoutGrid.stories-Dg8aAm6_.js → LayoutGrid.stories-CsbKauS5.js} +1 -1
- package/dist/assets/{LayoutGridItem-BbJwYcHo.js → LayoutGridItem-BtGWBhGr.js} +1 -1
- package/dist/assets/{Link-DbeaGxmu.js → Link-DLL8OonN.js} +1 -1
- package/dist/assets/{Link.stories-HNRLDW5Y.js → Link.stories-DlsXh361.js} +1 -1
- package/dist/assets/MultiSelectChips-BvRx5YLq.js +2 -0
- package/dist/assets/{MultiSelectChips.stories-0xhNcMZn.js → MultiSelectChips.stories-2TW7F44B.js} +1 -1
- package/dist/assets/{NativeSelectField.stories-D27xdDZT.js → NativeSelectField.stories-DmBdDAYW.js} +2 -2
- package/dist/assets/{NumberField-WzHWHpwG.js → NumberField-DW7lG9mg.js} +1 -1
- package/dist/assets/{NumberField.stories-CKWwzkFc.js → NumberField.stories-oR8Gegez.js} +1 -1
- package/dist/assets/{ObserveIntersection-zL3YLMv6.js → ObserveIntersection-Jf71_G5v.js} +1 -1
- package/dist/assets/{ObserveIntersection.stories-BXlW-mL4.js → ObserveIntersection.stories-C3o8aTAg.js} +1 -1
- package/dist/assets/{OnboardingTooltip-BzkMbW-Q.js → OnboardingTooltip-ANaVB8Qh.js} +1 -1
- package/dist/assets/{OnboardingTooltip.stories-DpuZirIf.js → OnboardingTooltip.stories-B2P2loQ_.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-DVqN90Ec.js → OnboardingTooltip.tests.stories-zXUt0NJE.js} +1 -1
- package/dist/assets/{OnboardingTour-Ba_vMjzP.js → OnboardingTour-ChdI2m_S.js} +1 -1
- package/dist/assets/{OnboardingTour.stories-CU5yOTSQ.js → OnboardingTour.stories-Bs8xxSkO.js} +3 -3
- package/dist/assets/{OnboardingTour.tests.stories-CPyK1i_w.js → OnboardingTour.tests.stories-9KaTQw8J.js} +1 -1
- package/dist/assets/{PasswordField-D3gN_VbU.js → PasswordField-CneYVFFH.js} +2 -2
- package/dist/assets/{PasswordField.stories-B_DbiPEY.js → PasswordField.stories-COup04RY.js} +1 -1
- package/dist/assets/{PreplyLogo-EsNyTV4m.js → PreplyLogo-Bu4ez8nc.js} +1 -1
- package/dist/assets/{PreplyLogo.stories-Bm6-o3h8.js → PreplyLogo.stories-BobbXEzY.js} +1 -1
- package/dist/assets/{ProgressBar.stories-BVBwLJ_h.js → ProgressBar.stories-Bib8wp9b.js} +1 -1
- package/dist/assets/{ProgressSteps.stories-DpVfrFPk.js → ProgressSteps.stories-D8soXV_p.js} +1 -1
- package/dist/assets/{PromoDialog-BpgSaMl7.js → PromoDialog-De2gYvXV.js} +1 -1
- package/dist/assets/{RangeSlider-CQsn2ggM.js → RangeSlider-BczA6Et9.js} +1 -1
- package/dist/assets/{RangeSlider.stories-B16rODmY.js → RangeSlider.stories-BfKXCzjC.js} +1 -1
- package/dist/assets/{Rating-CAaFjEvZ.js → Rating-RqfgDO9d.js} +1 -1
- package/dist/assets/{Rating.stories-8F2e8UDj.js → Rating.stories-CAB3TU9p.js} +1 -1
- package/dist/assets/{RatingInput-BNKHainW.js → RatingInput-BZjnrURY.js} +1 -1
- package/dist/assets/{RatingInput.stories-D07FYTPA.js → RatingInput.stories-BumN1i78.js} +1 -1
- package/dist/assets/{SelectField-CtnC30IK.js → SelectField-Ci40lkHJ.js} +2 -2
- package/dist/assets/{SelectField.stories-cV1joVTk.js → SelectField.stories-BzbCicRv.js} +1 -1
- package/dist/assets/{ShowOnIntersection-hAmOOTIR.js → ShowOnIntersection-BiVPS7mQ.js} +2 -2
- package/dist/assets/{ShowOnIntersection.stories-VS4hG4Et.js → ShowOnIntersection.stories-Cq68GulS.js} +1 -1
- package/dist/assets/SingleSelectChips-Dgw0qYjB.js +2 -0
- package/dist/assets/{SingleSelectChips.stories-Du0LL0gN.js → SingleSelectChips.stories-CTaYA6Yk.js} +1 -1
- package/dist/assets/{Slider-BgB4xT6m.js → Slider-DZQBnl2S.js} +1 -1
- package/dist/assets/{Slider.stories-B0uFs4_2.js → Slider.stories-D0ZL0kqe.js} +1 -1
- package/dist/assets/{Steps-Ny6Xdpfg.js → Steps-D3cRQC3d.js} +1 -1
- package/dist/assets/{Steps.stories-y16vX2RP.js → Steps.stories-DiKBPx9F.js} +1 -1
- package/dist/assets/{Switch.stories-D0M0AXLP.js → Switch.stories-wpsXwv-p.js} +1 -1
- package/dist/assets/{Text-Cy08WP3t.js → Text-BiCO96_r.js} +1 -1
- package/dist/assets/{Text.stories-kbD1oPtH.js → Text.stories-Dn10lUJM.js} +1 -1
- package/dist/assets/{TextField-DtzGGo-n.js → TextField-C5bFUM0q.js} +2 -2
- package/dist/assets/{TextField.stories-BfnbdAlj.js → TextField.stories-Dk6xmaqf.js} +1 -1
- package/dist/assets/{TextHighlighted-BLFuNeOz.js → TextHighlighted-Dau-4kMW.js} +1 -1
- package/dist/assets/{TextHighlighted.stories--iY-wUQl.js → TextHighlighted.stories-CP88FiIa.js} +1 -1
- package/dist/assets/{TextInline-kNMy4GiU.js → TextInline-Cx8xE15e.js} +1 -1
- package/dist/assets/{TextInline.stories-B4fTBAXp.js → TextInline.stories-5LuYQY-N.js} +1 -1
- package/dist/assets/{TextareaField-BAawMK2x.js → TextareaField-1Q9FqsHc.js} +1 -1
- package/dist/assets/{TextareaField.stories-uB9XCMh4.js → TextareaField.stories-Bs7pC0n_.js} +1 -1
- package/dist/assets/{Toast-DtwiCXf7.js → Toast-BZjsurC1.js} +1 -1
- package/dist/assets/{Toast.stories-DaMiazCZ.js → Toast.stories-uzy2Iqxo.js} +1 -1
- package/dist/assets/{Tooltip-BKkZoXDV.js → Tooltip-CX8T37NP.js} +1 -1
- package/dist/assets/{Tooltip.stories-wUZg70QA.js → Tooltip.stories-GnmHp_bX.js} +1 -1
- package/dist/assets/{Tooltip.tests.stories-CJYW12Q0.js → Tooltip.tests.stories-CoxZ2Mzn.js} +1 -1
- package/dist/assets/{ai-integration-CmKZr_5q.js → ai-integration-qIUPfaJz.js} +1 -1
- package/dist/assets/{breakpoints-BL8wVg74.js → breakpoints-BHIftKDH.js} +1 -1
- package/dist/assets/{breakpoints-vEwFHkjC.js → breakpoints-BO0KD_ym.js} +1 -1
- package/dist/assets/{breakpoints-BSvP6IHz.js → breakpoints-BoWDpBQq.js} +1 -1
- package/dist/assets/{changelog-wnfuTaGI.js → changelog-DMSLa5gf.js} +10 -1
- package/dist/assets/{constants-BRk8fyp8.js → constants-FY3oqVHd.js} +1 -1
- package/dist/assets/{createRequiredContext-BQNdOBzE.js → createRequiredContext-9tmtQKcI.js} +2 -2
- package/dist/assets/{dist-dJR9l15z.js → dist-CxlmHSsk.js} +1 -1
- package/dist/assets/{esm-QYJ12Nr4.js → esm-raxNxvJf.js} +1 -1
- package/dist/assets/{fonts-explorer.stories-DLPdV7wh.js → fonts-explorer.stories-i_p7YItV.js} +1 -1
- package/dist/assets/{getTokenVar-lvBbQceM.js → getTokenVar-4EmFJzte.js} +1 -1
- package/dist/assets/{gradientBorders-DODVBPY0.js → gradientBorders-DJrc2s0y.js} +1 -1
- package/dist/assets/{hover-DgEYlXBi.js → hover-DNtNop2y.js} +1 -1
- package/dist/assets/{hover-yxmGi-zx.js → hover-fkMFUnk3.js} +1 -1
- package/dist/assets/{hover-Cc8ZlfuU.js → hover-glItH_Lr.js} +1 -1
- package/dist/assets/{iframe-BuOXI2w6.js → iframe-Czcvpvgg.js} +4 -4
- package/dist/assets/{intro-B-CaE2_E.js → intro-CyzFu4JY.js} +1 -1
- package/dist/assets/{migrating-from-less-ClH17s_P.js → migrating-from-less-2bmmx-e1.js} +1 -1
- package/dist/assets/{tokens-DOxuMF98.js → tokens-DW7LgqLI.js} +1 -1
- package/dist/assets/{tokens-DLKIEc5T.js → tokens-DxS0cNj0.js} +1 -1
- package/dist/assets/{tokens-BF6xltNI.js → tokens-iE0hKajS.js} +1 -1
- package/dist/assets/{usePortalElement-Cqy1sSsS.js → usePortalElement-BUBRjIYT.js} +1 -1
- package/dist/assets/{welcome-CA82uuQ9.js → welcome-BIdOz8Yn.js} +1 -1
- package/dist/assets/{zeroheight-BZmC6gtY.js → zeroheight-BX9Z_BVr.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/index.json +1 -1
- package/dist/preview-stats.json +15372 -15348
- package/dist/project.json +1 -1
- package/package.json +5 -5
- package/pages/30.guides/70.assets/constants/icon-imports.ts +4 -0
- package/dist/assets/30.icons.explorer-DkBObzh_.js +0 -72
- package/dist/assets/CountryFlag-D1d90EPT.js +0 -3
- package/dist/assets/Dialog.primitives.stories-DNe9f6uf.js +0 -237
- package/dist/assets/DismissibleChips-CMpz1ljr.js +0 -1
- package/dist/assets/IconButton-CQGXuX8O.js +0 -9
- package/dist/assets/MultiSelectChips-Bs8MJsJe.js +0 -2
- package/dist/assets/SingleSelectChips-lT5C7a2D.js +0 -2
|
@@ -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-_0pS2khJ.js";import{n as s,t as c}from"./FormControl-B3jdXz5i.js";import{n as l,t as u}from"./RatingInput-BZjnrURY.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?``:`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,pt as i,t as a,w as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{A as c,D as l,F as u,I as d,L as f,M as p,N as m,O as h,P as g,R as _,_ as v,g as y,j as b,k as ee,m as x}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,pt as i,t as a,w as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{A as c,D as l,F as u,I as d,L as f,M as p,N as m,O as h,P as g,R as _,_ as v,g as y,j as b,k as ee,m as x}from"./iframe-Czcvpvgg.js";import{n as S,t as te}from"./TokyoUIChevronDown-CS0lTt7n.js";import{n as C,t as w}from"./dist-Cc1j9Pjk.js";import{n as T,t as E}from"./Icon-BItN7xKl.js";import{n as D,t as O}from"./FormControl-B3jdXz5i.js";import{n as k,t as A}from"./TokyoUICheckmark-BgAaFb6V.js";var j,M,N,P,F,I,L,R,z,B=t((()=>{j=`trigger__XRceG`,M=`chevron__ENwnv`,N=`content__NHVeq`,P=`viewport__aqXUS`,F=`item__7lwGu`,I=`indicator__NkOzD`,L=`group__feJjZ`,R=`groupLabel__VdJlH`,z={trigger:j,chevron:M,content:N,viewport:P,item:F,indicator:I,group:L,groupLabel:R,"mobile-content-show":`mobile-content-show__1QhLc`,"mobile-content-hide":`mobile-content-hide__Rqzas`,"fade-in":`fade-in__Xw3bI`,"fade-out":`fade-out__4u9tF`}}));function V(e){let t=`(min-width: ${i[e]}px)`,[n,r]=(0,H.useState)(!1);return(0,H.useEffect)(()=>{let e=window.matchMedia(t);r(e.matches);let n=e=>{r(e.matches)};return e.addEventListener(`change`,n),()=>{e.removeEventListener(`change`,n)}},[t]),n}var H,U=t((()=>{o(),H=e(n(),1)}));function W({value:e,disabled:t,children:n,leadingIcon:i,dataset:a}){return(0,q.jsxs)(c,{value:e,disabled:t,className:z.item,...r(a,{preplyDsComponent:C.SelectFieldOption}),children:[i,(0,q.jsx)(p,{children:n}),(0,q.jsx)(b,{className:z.indicator,children:(0,q.jsx)(E,{svg:A})})]})}function G({children:e,label:t}){return(0,q.jsxs)(h,{className:z.group,children:[(0,q.jsx)(m,{className:z.groupLabel,children:t}),e]})}var K,q,J,ne=t((()=>{K=e(n(),1),v(),a(),x(),w(),S(),k(),T(),B(),U(),q=s(),J=(0,K.forwardRef)(function({value:e,defaultValue:t,placeholder:n,disabled:i,onValueChange:a,children:o,dataset:s,icon:c,name:p,id:m,required:h,onFocus:v,onBlur:b,onKeyDown:x,onKeyUp:S,"aria-label":w,"aria-labelledby":T,"aria-describedby":D,"aria-invalid":O,"aria-errormessage":k},A){let[j,M]=(0,K.useState)(!1),N=y(),P=r(s,{preplyDsComponent:C.Select}),F=V(`medium-s`);return(0,q.jsxs)(u,{value:e,defaultValue:t,onValueChange:e=>{a?.(e)},disabled:i,name:p,open:j,onOpenChange:M,required:h,children:[(0,q.jsxs)(d,{ref:A,id:m,className:z.trigger,onFocus:v,onBlur:b,onKeyDown:x,onKeyUp:S,"aria-label":w,"aria-labelledby":T,"aria-describedby":D,"aria-invalid":O,"aria-errormessage":k,...P,children:[c,(0,q.jsx)(f,{placeholder:n}),(0,q.jsx)(ee,{className:z.chevron,children:(0,q.jsx)(E,{svg:te})})]}),(0,q.jsx)(g,{container:N,children:(0,q.jsx)(l,{position:F?`popper`:void 0,sideOffset:F?5:void 0,className:z.content,children:(0,q.jsx)(_,{className:z.viewport,role:`group`,tabIndex:0,children:o})})})]})});try{W.displayName=`SelectOption`,W.__docgenInfo={description:``,displayName:`SelectOption`,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`}]}},leadingIcon:{defaultValue:null,description:``,name:`leadingIcon`,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`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}try{G.displayName=`SelectGroup`,G.__docgenInfo={description:``,displayName:`SelectGroup`,props:{label:{defaultValue:null,description:``,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`}]}}}}}catch{}try{J.displayName=`Select`,J.__docgenInfo={description:``,displayName:`Select`,props:{value:{defaultValue:null,description:`Controlled value of the select`,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},defaultValue:{defaultValue:null,description:`Default value when uncontrolled`,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},placeholder:{defaultValue:null,description:`Placeholder text when no value is selected`,name:`placeholder`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},disabled:{defaultValue:null,description:`Whether the select is disabled`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onValueChange:{defaultValue:null,description:`Callback when value changes`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}},children:{defaultValue:null,description:`Items to display in the select`,name:`children`,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`}]}},dataset:{defaultValue:null,description:`Dataset for the trigger element`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},icon:{defaultValue:null,description:`Icon to display on the left side`,name:`icon`,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`}]}},name:{defaultValue:null,description:`HTML name attribute`,name:`name`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},required:{defaultValue:null,description:`Whether the select is required`,name:`required`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}}}}}catch{}})),Y,X,Z,Q,$,re=t((()=>{Y=e(n(),1),w(),D(),ne(),X=s(),Z=(0,Y.forwardRef)(function({id:e,label:t,description:n,error:r,required:i,dataset:a,hideLabel:o,hasError:s,useLegacyRequiredLabel:c,inputDataset:l,...u},d){return(0,X.jsx)(O,{id:e,label:t,description:n,error:r,hasError:s,required:i,dataset:a,hideLabel:o,useLegacyRequiredLabel:c,preplyDsComponent:C.SelectField,children:(0,X.jsx)(J,{ref:d,dataset:l,...u})})}),Q=W,$=G;try{Z.displayName=`SelectField`,Z.__docgenInfo={description:``,displayName:`SelectField`,props:{id:{defaultValue:null,description:`The id to be passed to the input element.
|
|
2
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
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
4
|
indicator next to the label.
|
|
5
5
|
Whether the select is required`,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>`}]}},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
|
-
@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`}]}},children:{defaultValue:null,description:`Items to display in the select`,name:`children`,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`}]}},
|
|
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`}]}},children:{defaultValue:null,description:`Items to display in the select`,name:`children`,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:`Whether the select is disabled`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},name:{defaultValue:null,description:`HTML name attribute`,name:`name`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},value:{defaultValue:null,description:`Controlled value of the select`,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},defaultValue:{defaultValue:null,description:`Default value when uncontrolled`,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},icon:{defaultValue:null,description:`Icon to display on the left side`,name:`icon`,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`}]}},onValueChange:{defaultValue:null,description:`Callback when value changes`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}},placeholder:{defaultValue:null,description:`Placeholder text when no value is selected`,name:`placeholder`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},inputDataset:{defaultValue:null,description:`Dataset for the input element`,name:`inputDataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}try{Q.displayName=`SelectFieldOption`,Q.__docgenInfo={description:``,displayName:`SelectFieldOption`,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`}]}},leadingIcon:{defaultValue:null,description:``,name:`leadingIcon`,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`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}try{$.displayName=`SelectFieldGroup`,$.__docgenInfo={description:``,displayName:`SelectFieldGroup`,props:{label:{defaultValue:null,description:``,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`}]}}}}}catch{}}));export{re as i,$ as n,Q as r,Z 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-Dqr2b6tP.js";import{n as o,t as s}from"./Button--WTUF97E.js";import{n as c,t as l}from"./CountryFlag-D1d90EPT.js";import{n as u,t as d}from"./Dialog-BT0Kd0KN.js";import{i as f,n as p,r as m,t as h}from"./SelectField-CtnC30IK.js";import{n as g,t as _}from"./TokyoUILanguage-DxmG-CNh.js";var v,y,b,x,S,C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K;t((()=>{v=e(n(),1),g(),i(),f(),u(),o(),c(),y=r(),{expect:b,userEvent:x,within:S,fn:C,waitFor:w}=__STORYBOOK_MODULE_TEST__,T={title:`components/SelectField`,component:h,subcomponents:{SelectFieldOption:m,SelectFieldGroup:p},parameters:{layout:`padded`},decorators:[e=>(0,y.jsx)(`div`,{style:{width:`min(300px, 100%)`,height:`300px`},children:(0,y.jsx)(e,{})})],args:{name:`language`,label:`Language`,placeholder:`Select a language`,defaultValue:``,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onValueChange:C(),onBlur:C(),onFocus:C(),onClick:C(),onKeyDown:C(),onKeyUp:C(),children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{value:`french`,children:`French`})]})}},E={a11y:{config:{rules:[{id:`aria-hidden-focus`,enabled:!1}]}}},D={parameters:E,play:async({canvasElement:e,step:t,args:n})=>{let r=S(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{b(S(i).getByTestId(`label`)).toHaveTextContent(`Language • Optional`),b(a).toHaveAccessibleName(`Language`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),b(n.onFocus).toHaveBeenCalled()}),await t(`it should open the menu`,async()=>{await x.keyboard(`{Enter}`),await w(()=>{b(r.getByRole(`listbox`)).toBeInTheDocument()},{timeout:3e3})}),await t(`it should call callback when the value changes`,async()=>{await x.keyboard(`{Enter}`),b(n.onValueChange).toHaveBeenCalledWith(`english`),b(n.onBlur).toHaveBeenCalledTimes(1)}),await t(`it should call onBlur when the input is blurred`,async()=>{await x.keyboard(`{tab}`),b(n.onBlur).toHaveBeenCalledTimes(2)}),await t(`it should render the dataset props`,async()=>{b(i).toHaveAttribute(`data-testid`,`field`),b(i).toHaveAttribute(`data-foo`,`bar`),b(a).toHaveAttribute(`data-testid`,`input`),b(a).toHaveAttribute(`data-foo`,`bar`)}),await t(`it should render all options`,async()=>{a.focus(),await x.keyboard(`{Enter}`),await w(()=>{b(r.getByRole(`listbox`)).toBeInTheDocument()},{timeout:3e3});let e=r.getByRole(`option`,{name:`English`}),t=r.getByRole(`option`,{name:`Spanish`}),n=r.getByRole(`option`,{name:`French`});b(e).toBeInTheDocument(),b(t).toBeInTheDocument(),b(n).toBeInTheDocument()})}},O={render:function(e){let[t,n]=(0,v.useState)(e.value);return(0,y.jsxs)(h,{...e,value:t,onValueChange:n,children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{value:`french`,children:`French`})]})},args:{label:`Language`,placeholder:`Select a language...`,value:`spanish`,defaultValue:void 0},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await b(e.getByTestId(`input`)).toHaveTextContent(`Spanish`)}),await t(`it should update the value when the user selects`,async()=>{let t=e.getByTestId(`input`);t.focus(),await x.keyboard(`{Enter}`),await x.keyboard(`{ArrowDown}`),await x.keyboard(`{Enter}`),b(t).toHaveTextContent(`French`)})}},k={args:{icon:(0,y.jsx)(a,{svg:_,dataset:{testid:`icon`}})},play:async({canvas:e,step:t})=>{await t(`it should render the icon`,async()=>{b(e.getByTestId(`icon`)).toBeInTheDocument()})}},A={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()=>{b(n).toHaveAccessibleDescription(`We will use this to get a personalized choice of tutors`),b(r).toHaveTextContent(`We will use this to get a personalized choice of tutors`)})}},j={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()=>{b(n).toHaveAccessibleName(`Language`),b(r).toHaveTextContent(`Language`)}),await t(`it should render required attribute`,async()=>{b(n).toHaveAttribute(`aria-required`)})}},M={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{b(e.getByTestId(`input`)).toHaveAccessibleName(`Language`)})}},N={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()=>{b(n).toHaveAccessibleErrorMessage(`This is an error message`),b(r).toHaveTextContent(`This is an error message`)})}},P={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{b(n).toHaveAttribute(`disabled`)})}},F={tags:[`!autodocs`],parameters:{...E,viewport:{defaultViewport:`narrow-l`}},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},I={parameters:{...E,viewport:{defaultViewport:`narrow-l`},chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-s":{viewport:`medium-s`},"medium-l":{viewport:`medium-l`}}}},render:function(e){let[t,n]=(0,v.useState)(!1);return(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(s,{onClick:()=>n(!0),children:`Open`}),(0,y.jsx)(d,{title:`Dialog With Select`,description:void 0,open:t,onClose:()=>n(!1),children:(0,y.jsx)(h,{...e})})]})},play:async({canvas:e})=>{let t=e.getByRole(`button`,{name:`Open`});await x.click(t);let n=await e.findByRole(`combobox`);await x.click(n)}},L={parameters:E,args:{label:`Language with icons`,placeholder:`Select a language...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`english`,leadingIcon:(0,y.jsx)(a,{svg:_}),children:`English`}),(0,y.jsx)(m,{value:`spanish`,leadingIcon:(0,y.jsx)(a,{svg:_}),children:`Spanish`}),(0,y.jsx)(m,{value:`french`,leadingIcon:(0,y.jsx)(a,{svg:_}),children:`French`})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},R={parameters:E,args:{label:`Language with country flags`,placeholder:`Select a language...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`english`,leadingIcon:(0,y.jsx)(l,{code:`gb`,alt:`English`,size:`medium`}),children:`English`}),(0,y.jsx)(m,{value:`spanish`,leadingIcon:(0,y.jsx)(l,{code:`es`,alt:`Spanish`,size:`medium`}),children:`Spanish`}),(0,y.jsx)(m,{value:`french`,leadingIcon:(0,y.jsx)(l,{code:`fr`,alt:`French`,size:`medium`}),children:`French`})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},z={parameters:E,args:{label:`Languages by region`,placeholder:`Select a language...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsxs)(p,{label:`European Languages`,children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{value:`french`,children:`French`}),(0,y.jsx)(m,{value:`german`,children:`German`})]}),(0,y.jsxs)(p,{label:`Asian Languages`,children:[(0,y.jsx)(m,{value:`mandarin`,children:`Mandarin`}),(0,y.jsx)(m,{value:`japanese`,children:`Japanese`}),(0,y.jsx)(m,{value:`korean`,children:`Korean`}),(0,y.jsx)(m,{value:`hindi`,children:`Hindi`})]})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},B={parameters:E,args:{label:`Languages by region`,placeholder:`Select a language...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsxs)(p,{label:`European Languages`,children:[(0,y.jsx)(m,{value:`english`,leadingIcon:(0,y.jsx)(l,{code:`gb`,alt:`English`,size:`medium`}),children:`English`}),(0,y.jsx)(m,{value:`spanish`,leadingIcon:(0,y.jsx)(l,{code:`es`,alt:`Spanish`,size:`medium`}),children:`Spanish`}),(0,y.jsx)(m,{value:`french`,leadingIcon:(0,y.jsx)(l,{code:`fr`,alt:`French`,size:`medium`}),children:`French`}),(0,y.jsx)(m,{value:`german`,leadingIcon:(0,y.jsx)(l,{code:`de`,alt:`German`,size:`medium`}),children:`German`})]}),(0,y.jsxs)(p,{label:`Asian Languages`,children:[(0,y.jsx)(m,{value:`mandarin`,leadingIcon:(0,y.jsx)(l,{code:`cn`,alt:`Mandarin`,size:`medium`}),children:`Mandarin`}),(0,y.jsx)(m,{value:`japanese`,leadingIcon:(0,y.jsx)(l,{code:`jp`,alt:`Japanese`,size:`medium`}),children:`Japanese`}),(0,y.jsx)(m,{value:`korean`,leadingIcon:(0,y.jsx)(l,{code:`kr`,alt:`Korean`,size:`medium`}),children:`Korean`}),(0,y.jsx)(m,{value:`hindi`,leadingIcon:(0,y.jsx)(l,{code:`in`,alt:`Hindi`,size:`medium`}),children:`Hindi`})]})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},V={parameters:E,args:{label:`Select from many options`,placeholder:`Choose a number...`,children:(0,y.jsx)(y.Fragment,{children:Array.from({length:100},(e,t)=>(0,y.jsxs)(m,{value:String(t+1),children:[`Option `,t+1]},t+1))})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},H={args:{label:`Select from long options`,placeholder:`Choose an option...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`one`,children:`Path unlocks frontend development`}),(0,y.jsx)(m,{value:`two`,children:`Path unlocks rapid, high-quality frontend development`}),(0,y.jsx)(m,{value:`three`,children:`Path unlocks rapid, high-quality frontend development and prototyping`})]})},play:async({canvas:e})=>{let t=e.getByRole(`combobox`);await x.click(t);let n=e.getByRole(`option`,{name:`Path unlocks rapid, high-quality frontend development and prototyping`});await x.click(n)}},U={parameters:E,decorators:[e=>(0,y.jsx)(`div`,{style:{width:`fit-content`},children:(0,y.jsx)(e,{})})],args:{label:`Options`,placeholder:`Select an option...`,defaultValue:`a`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`a`,children:`A`}),(0,y.jsx)(m,{value:`b`,children:`BCDEFGHIJKLMNOPQRSTUVWXYZ`})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},W={render:function(){return(0,v.useEffect)(()=>(document.body.style.setProperty(`--ds-select-z-index-override`,`20`),()=>{document.body.style.removeProperty(`--ds-select-z-index-override`)}),[]),(0,y.jsxs)(y.Fragment,{children:[(0,y.jsxs)(h,{label:`Language`,placeholder:`Select a language..`,children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{value:`french`,children:`French`})]}),(0,y.jsx)(`div`,{style:{position:`fixed`,zIndex:10,inset:`0`,backgroundColor:`lightgray`,pointerEvents:`none`,opacity:.5}})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},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,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{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,y.jsx)(a,{svg:_,label:`Student with a hat`})},control:`select`},children:{control:!1},hasError:{table:{disable:!0}}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
|
|
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-BItN7xKl.js";import{n as o,t as s}from"./Button-_0pS2khJ.js";import{n as c,t as l}from"./CountryFlag-CqhLpgul.js";import{n as u,t as d}from"./Dialog-DJ_22m-M.js";import{i as f,n as p,r as m,t as h}from"./SelectField-Ci40lkHJ.js";import{n as g,t as _}from"./TokyoUILanguage-DxmG-CNh.js";var v,y,b,x,S,C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K;t((()=>{v=e(n(),1),g(),i(),f(),u(),o(),c(),y=r(),{expect:b,userEvent:x,within:S,fn:C,waitFor:w}=__STORYBOOK_MODULE_TEST__,T={title:`components/SelectField`,component:h,subcomponents:{SelectFieldOption:m,SelectFieldGroup:p},parameters:{layout:`padded`},decorators:[e=>(0,y.jsx)(`div`,{style:{width:`min(300px, 100%)`,height:`300px`},children:(0,y.jsx)(e,{})})],args:{name:`language`,label:`Language`,placeholder:`Select a language`,defaultValue:``,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onValueChange:C(),onBlur:C(),onFocus:C(),onClick:C(),onKeyDown:C(),onKeyUp:C(),children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{value:`french`,children:`French`})]})}},E={a11y:{config:{rules:[{id:`aria-hidden-focus`,enabled:!1}]}}},D={parameters:E,play:async({canvasElement:e,step:t,args:n})=>{let r=S(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{b(S(i).getByTestId(`label`)).toHaveTextContent(`Language • Optional`),b(a).toHaveAccessibleName(`Language`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),b(n.onFocus).toHaveBeenCalled()}),await t(`it should open the menu`,async()=>{await x.keyboard(`{Enter}`),await w(()=>{b(r.getByRole(`listbox`)).toBeInTheDocument()},{timeout:3e3})}),await t(`it should call callback when the value changes`,async()=>{await x.keyboard(`{Enter}`),b(n.onValueChange).toHaveBeenCalledWith(`english`),b(n.onBlur).toHaveBeenCalledTimes(1)}),await t(`it should call onBlur when the input is blurred`,async()=>{await x.keyboard(`{tab}`),b(n.onBlur).toHaveBeenCalledTimes(2)}),await t(`it should render the dataset props`,async()=>{b(i).toHaveAttribute(`data-testid`,`field`),b(i).toHaveAttribute(`data-foo`,`bar`),b(a).toHaveAttribute(`data-testid`,`input`),b(a).toHaveAttribute(`data-foo`,`bar`)}),await t(`it should render all options`,async()=>{a.focus(),await x.keyboard(`{Enter}`),await w(()=>{b(r.getByRole(`listbox`)).toBeInTheDocument()},{timeout:3e3});let e=r.getByRole(`option`,{name:`English`}),t=r.getByRole(`option`,{name:`Spanish`}),n=r.getByRole(`option`,{name:`French`});b(e).toBeInTheDocument(),b(t).toBeInTheDocument(),b(n).toBeInTheDocument()})}},O={render:function(e){let[t,n]=(0,v.useState)(e.value);return(0,y.jsxs)(h,{...e,value:t,onValueChange:n,children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{value:`french`,children:`French`})]})},args:{label:`Language`,placeholder:`Select a language...`,value:`spanish`,defaultValue:void 0},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await b(e.getByTestId(`input`)).toHaveTextContent(`Spanish`)}),await t(`it should update the value when the user selects`,async()=>{let t=e.getByTestId(`input`);t.focus(),await x.keyboard(`{Enter}`),await x.keyboard(`{ArrowDown}`),await x.keyboard(`{Enter}`),b(t).toHaveTextContent(`French`)})}},k={args:{icon:(0,y.jsx)(a,{svg:_,dataset:{testid:`icon`}})},play:async({canvas:e,step:t})=>{await t(`it should render the icon`,async()=>{b(e.getByTestId(`icon`)).toBeInTheDocument()})}},A={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()=>{b(n).toHaveAccessibleDescription(`We will use this to get a personalized choice of tutors`),b(r).toHaveTextContent(`We will use this to get a personalized choice of tutors`)})}},j={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()=>{b(n).toHaveAccessibleName(`Language`),b(r).toHaveTextContent(`Language`)}),await t(`it should render required attribute`,async()=>{b(n).toHaveAttribute(`aria-required`)})}},M={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{b(e.getByTestId(`input`)).toHaveAccessibleName(`Language`)})}},N={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()=>{b(n).toHaveAccessibleErrorMessage(`This is an error message`),b(r).toHaveTextContent(`This is an error message`)})}},P={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{b(n).toHaveAttribute(`disabled`)})}},F={tags:[`!autodocs`],parameters:{...E,viewport:{defaultViewport:`narrow-l`}},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},I={parameters:{...E,viewport:{defaultViewport:`narrow-l`},chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-s":{viewport:`medium-s`},"medium-l":{viewport:`medium-l`}}}},render:function(e){let[t,n]=(0,v.useState)(!1);return(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(s,{onClick:()=>n(!0),children:`Open`}),(0,y.jsx)(d,{title:`Dialog With Select`,description:void 0,open:t,onClose:()=>n(!1),children:(0,y.jsx)(h,{...e})})]})},play:async({canvas:e})=>{let t=e.getByRole(`button`,{name:`Open`});await x.click(t);let n=await e.findByRole(`combobox`);await x.click(n)}},L={parameters:E,args:{label:`Language with icons`,placeholder:`Select a language...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`english`,leadingIcon:(0,y.jsx)(a,{svg:_}),children:`English`}),(0,y.jsx)(m,{value:`spanish`,leadingIcon:(0,y.jsx)(a,{svg:_}),children:`Spanish`}),(0,y.jsx)(m,{value:`french`,leadingIcon:(0,y.jsx)(a,{svg:_}),children:`French`})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},R={parameters:E,args:{label:`Language with country flags`,placeholder:`Select a language...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`english`,leadingIcon:(0,y.jsx)(l,{code:`gb`,alt:`English`,size:`medium`}),children:`English`}),(0,y.jsx)(m,{value:`spanish`,leadingIcon:(0,y.jsx)(l,{code:`es`,alt:`Spanish`,size:`medium`}),children:`Spanish`}),(0,y.jsx)(m,{value:`french`,leadingIcon:(0,y.jsx)(l,{code:`fr`,alt:`French`,size:`medium`}),children:`French`})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},z={parameters:E,args:{label:`Languages by region`,placeholder:`Select a language...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsxs)(p,{label:`European Languages`,children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{value:`french`,children:`French`}),(0,y.jsx)(m,{value:`german`,children:`German`})]}),(0,y.jsxs)(p,{label:`Asian Languages`,children:[(0,y.jsx)(m,{value:`mandarin`,children:`Mandarin`}),(0,y.jsx)(m,{value:`japanese`,children:`Japanese`}),(0,y.jsx)(m,{value:`korean`,children:`Korean`}),(0,y.jsx)(m,{value:`hindi`,children:`Hindi`})]})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},B={parameters:E,args:{label:`Languages by region`,placeholder:`Select a language...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsxs)(p,{label:`European Languages`,children:[(0,y.jsx)(m,{value:`english`,leadingIcon:(0,y.jsx)(l,{code:`gb`,alt:`English`,size:`medium`}),children:`English`}),(0,y.jsx)(m,{value:`spanish`,leadingIcon:(0,y.jsx)(l,{code:`es`,alt:`Spanish`,size:`medium`}),children:`Spanish`}),(0,y.jsx)(m,{value:`french`,leadingIcon:(0,y.jsx)(l,{code:`fr`,alt:`French`,size:`medium`}),children:`French`}),(0,y.jsx)(m,{value:`german`,leadingIcon:(0,y.jsx)(l,{code:`de`,alt:`German`,size:`medium`}),children:`German`})]}),(0,y.jsxs)(p,{label:`Asian Languages`,children:[(0,y.jsx)(m,{value:`mandarin`,leadingIcon:(0,y.jsx)(l,{code:`cn`,alt:`Mandarin`,size:`medium`}),children:`Mandarin`}),(0,y.jsx)(m,{value:`japanese`,leadingIcon:(0,y.jsx)(l,{code:`jp`,alt:`Japanese`,size:`medium`}),children:`Japanese`}),(0,y.jsx)(m,{value:`korean`,leadingIcon:(0,y.jsx)(l,{code:`kr`,alt:`Korean`,size:`medium`}),children:`Korean`}),(0,y.jsx)(m,{value:`hindi`,leadingIcon:(0,y.jsx)(l,{code:`in`,alt:`Hindi`,size:`medium`}),children:`Hindi`})]})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},V={parameters:E,args:{label:`Select from many options`,placeholder:`Choose a number...`,children:(0,y.jsx)(y.Fragment,{children:Array.from({length:100},(e,t)=>(0,y.jsxs)(m,{value:String(t+1),children:[`Option `,t+1]},t+1))})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},H={args:{label:`Select from long options`,placeholder:`Choose an option...`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`one`,children:`Path unlocks frontend development`}),(0,y.jsx)(m,{value:`two`,children:`Path unlocks rapid, high-quality frontend development`}),(0,y.jsx)(m,{value:`three`,children:`Path unlocks rapid, high-quality frontend development and prototyping`})]})},play:async({canvas:e})=>{let t=e.getByRole(`combobox`);await x.click(t);let n=e.getByRole(`option`,{name:`Path unlocks rapid, high-quality frontend development and prototyping`});await x.click(n)}},U={parameters:E,decorators:[e=>(0,y.jsx)(`div`,{style:{width:`fit-content`},children:(0,y.jsx)(e,{})})],args:{label:`Options`,placeholder:`Select an option...`,defaultValue:`a`,children:(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`a`,children:`A`}),(0,y.jsx)(m,{value:`b`,children:`BCDEFGHIJKLMNOPQRSTUVWXYZ`})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},W={render:function(){return(0,v.useEffect)(()=>(document.body.style.setProperty(`--ds-select-z-index-override`,`20`),()=>{document.body.style.removeProperty(`--ds-select-z-index-override`)}),[]),(0,y.jsxs)(y.Fragment,{children:[(0,y.jsxs)(h,{label:`Language`,placeholder:`Select a language..`,children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{value:`french`,children:`French`})]}),(0,y.jsx)(`div`,{style:{position:`fixed`,zIndex:10,inset:`0`,backgroundColor:`lightgray`,pointerEvents:`none`,opacity:.5}})]})},play:async({canvas:e})=>{e.getByRole(`combobox`).click()}},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,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{value:`english`,children:`English`}),(0,y.jsx)(m,{value:`spanish`,children:`Spanish`}),(0,y.jsx)(m,{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,y.jsx)(a,{svg:_,label:`Student with a hat`})},control:`select`},children:{control:!1},hasError:{table:{disable:!0}}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
parameters: disableA11yFocus,
|
|
3
3
|
play: async ({
|
|
4
4
|
canvasElement,
|
|
@@ -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-Jf71_G5v.js";var o,s,c,l=t((()=>{o=e(n(),1),i(),s=r(),c=({onIntersect:e,once:t,threshold:n,tag:r,dataset:i,children:c})=>{let[l,u]=(0,o.useState)(!1);return(0,s.jsx)(a,{onIntersect:(0,o.useCallback)(()=>{l||u(!0),e?.()},[l,e]),once:e?t:!0,threshold:n,tag:r,dataset:i,children:l&&c})};try{c.displayName=`ShowOnIntersection`,c.__docgenInfo={description:`Only renders the wrapped components once it intersects with the viewport.
|
|
2
2
|
|
|
3
3
|
Note that elements will not be detached from the DOM if the component is
|
|
4
4
|
scrolled out of view again.
|
|
@@ -8,4 +8,4 @@ You can use \`React.lazy\` to lazy-load the wrapped components.
|
|
|
8
8
|
Additionally, an \`onIntersect\` callback can be provided. As with
|
|
9
9
|
\`ObserveIntersection\`, this callback will be called every time the component
|
|
10
10
|
intersects with the viewport, or only the first time if \`once\` is set to
|
|
11
|
-
\`true\`.`,displayName:`ShowOnIntersection`,props:{onIntersect:{defaultValue:null,description:``,name:`onIntersect`,required:!1,type:{name:`enum`,value:[{value:`() => 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:`"
|
|
11
|
+
\`true\`.`,displayName:`ShowOnIntersection`,props:{onIntersect:{defaultValue:null,description:``,name:`onIntersect`,required:!1,type:{name:`enum`,value:[{value:`() => 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:`"td"`},{value:`"li"`},{value:`"th"`},{value:`"tr"`},{value:`"article"`},{value:`"figure"`},{value:`"main"`},{value:`"table"`},{value:`"div"`},{value:`"caption"`},{value:`"fieldset"`},{value:`"figcaption"`},{value:`"footer"`},{value:`"header"`},{value:`"ol"`},{value:`"p"`},{value:`"section"`},{value:`"span"`},{value:`"tbody"`},{value:`"tfoot"`},{value:`"thead"`},{value:`"ul"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{l as n,c 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"./ShowOnIntersection-
|
|
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"./ShowOnIntersection-BiVPS7mQ.js";var o,s,c,l;t((()=>{e(n(),1),i(),o=r(),s={title:`components/ShowOnIntersection`,component:a,parameters:{tags:[`!test`],chromatic:{disableSnapshot:!0}}},c=()=>(0,o.jsx)(`div`,{style:{height:`200px`,overflowY:`scroll`,position:`relative`},children:(0,o.jsx)(`div`,{style:{height:`400px`,display:`flex`,alignItems:`end`},children:(0,o.jsx)(a,{children:(0,o.jsx)(`p`,{children:`Intersected`})})})}),c.storyName=`ShowOnIntersection`,c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`() => {
|
|
2
2
|
return <div style={{
|
|
3
3
|
height: '200px',
|
|
4
4
|
overflowY: 'scroll',
|
|
@@ -0,0 +1,2 @@
|
|
|
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"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as u,t as d}from"./useControllableState-B6dCOM10.js";import{a as f,c as p,i as m,l as h,n as g,o as _,r as v,s as y,t as b}from"./createRequiredContext-9tmtQKcI.js";var x,S,C,w,T,E,D=t((()=>{x=e(n(),1),d(),h(),i(),s(),c(),g(),S=a(),[C,w]=b(`SingleSelectChips`),T=(0,x.forwardRef)(function({items:e,children:t,orientation:n=p,"aria-label":i,"aria-controls":a,value:s,onValueChange:c,defaultValue:d,dataset:f,...m},h){let[g,v]=u({value:s,onValueChange:c,defaultValue:d??null}),b=e?e.map(({label:e,value:t,...n})=>(0,S.jsx)(E,{value:t,...n,children:e},t)):t;return(0,S.jsx)(C,{value:{value:g,onValueChange:v},children:(0,S.jsx)(y,{orientation:n,children:(0,S.jsx)(_,{...l(m),ref:h,orientation:n,"aria-orientation":n,"aria-label":i,"aria-controls":a,role:`listbox`,"aria-multiselectable":`false`,...r(f,{preplyDsComponent:o.SingleSelectChips}),children:b})})})}),E=(0,x.forwardRef)(function({value:e,children:t,icon:n,countryFlagCode:i,disabled:a,counter:s,dataset:c,...u},d){let{value:p,onValueChange:h}=w(),g=p===e;return(0,S.jsx)(f,{role:`presentation`,children:(0,S.jsx)(v,{...l(u),ref:d,role:`option`,"aria-selected":g,onClick:()=>h(g?null:e),icon:n,countryFlagCode:i,disabled:a,...r(c,{preplyDsComponent:o.SingleSelectChipsItem}),children:(0,S.jsx)(m,{counter:s,children:t})})})});try{T.displayName=`SingleSelectChips`,T.__docgenInfo={description:`A chips component that allows selection of a single option from a group.
|
|
2
|
+
Users can select one chip at a time, and clicking a selected chip will deselect it.`,displayName:`SingleSelectChips`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},value:{defaultValue:null,description:`Current value of the chips. When provided, the component operates in controlled mode`,name:`value`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`}]}},defaultValue:{defaultValue:null,description:"Default value for uncontrolled usage. Will be ignored if `value` is provided",name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`}]}},"aria-controls":{defaultValue:null,description:"If the chips control other elements on the page, use `aria-controls` with the target element's ID.",name:`aria-controls`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-label":{defaultValue:null,description:`Accessible label for the chips group. Required for screen reader users`,name:`aria-label`,required:!0,type:{name:`string`}},onValueChange:{defaultValue:null,description:`Callback fired when the value changes. Receives the new value as an argument`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: T | null) => void`}]}},orientation:{defaultValue:{value:`'horizontal'`},description:`Layout orientation of the chips group.`,name:`orientation`,required:!1,type:{name:`enum`,value:[{value:`"horizontal"`},{value:`"vertical"`}]}},items:{defaultValue:null,description:``,name:`items`,required:!1,type:{name:`enum`,value:[{value:`(Omit<ChipsItemProps, "children" | "value"> & { value: T extends unknown[] ? NonNullable<T[number]> : NonNullable<T>; label: ReactNode; })[]`}]}},ref:{defaultValue:null,description:``,name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`(instance: HTMLUListElement | null) => void`},{value:`RefObject<HTMLUListElement>`}]}}}}}catch{}try{E.displayName=`SingleSelectChipsItem`,E.__docgenInfo={description:`Individual chip item for use within SingleSelectChips.`,displayName:`SingleSelectChipsItem`,props:{icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},countryFlagCode:{defaultValue:null,description:``,name:`countryFlagCode`,required:!1,type:{name:`enum`,value:[{value:`"id"`},{value:`"at"`},{value:`"is"`},{value:`"af"`},{value:`"ax"`},{value:`"al"`},{value:`"dz"`},{value:`"as"`},{value:`"ad"`},{value:`"ao"`},{value:`"ai"`},{value:`"aq"`},{value:`"ag"`},{value:`"ar"`},{value:`"am"`},{value:`"aw"`},{value:`"sh-ac"`},{value:`"asean"`},{value:`"au"`},{value:`"az"`},{value:`"bs"`},{value:`"bh"`},{value:`"bd"`},{value:`"bb"`},{value:`"es-pv"`},{value:`"by"`},{value:`"be"`},{value:`"bz"`},{value:`"bj"`},{value:`"bm"`},{value:`"bt"`},{value:`"bo"`},{value:`"bq"`},{value:`"ba"`},{value:`"bw"`},{value:`"bv"`},{value:`"br"`},{value:`"io"`},{value:`"bn"`},{value:`"bg"`},{value:`"bf"`},{value:`"bi"`},{value:`"cv"`},{value:`"kh"`},{value:`"cm"`},{value:`"ca"`},{value:`"ic"`},{value:`"es-ct"`},{value:`"ky"`},{value:`"cf"`},{value:`"cefta"`},{value:`"td"`},{value:`"cl"`},{value:`"cn"`},{value:`"cx"`},{value:`"cp"`},{value:`"cc"`},{value:`"co"`},{value:`"km"`},{value:`"ck"`},{value:`"cr"`},{value:`"hr"`},{value:`"cu"`},{value:`"cw"`},{value:`"cy"`},{value:`"cz"`},{value:`"ci"`},{value:`"cd"`},{value:`"dk"`},{value:`"dg"`},{value:`"dj"`},{value:`"dm"`},{value:`"do"`},{value:`"eac"`},{value:`"ec"`},{value:`"eg"`},{value:`"sv"`},{value:`"gb-eng"`},{value:`"gq"`},{value:`"er"`},{value:`"ee"`},{value:`"sz"`},{value:`"et"`},{value:`"eu"`},{value:`"fk"`},{value:`"fo"`},{value:`"fm"`},{value:`"fj"`},{value:`"fi"`},{value:`"fr"`},{value:`"gf"`},{value:`"pf"`},{value:`"tf"`},{value:`"ga"`},{value:`"es-ga"`},{value:`"gm"`},{value:`"ge"`},{value:`"de"`},{value:`"gh"`},{value:`"gi"`},{value:`"gr"`},{value:`"gl"`},{value:`"gd"`},{value:`"gp"`},{value:`"gu"`},{value:`"gt"`},{value:`"gg"`},{value:`"gn"`},{value:`"gw"`},{value:`"gy"`},{value:`"ht"`},{value:`"hm"`},{value:`"va"`},{value:`"hn"`},{value:`"hk"`},{value:`"hu"`},{value:`"in"`},{value:`"ir"`},{value:`"iq"`},{value:`"ie"`},{value:`"im"`},{value:`"il"`},{value:`"it"`},{value:`"jm"`},{value:`"jp"`},{value:`"je"`},{value:`"jo"`},{value:`"kz"`},{value:`"ke"`},{value:`"ki"`},{value:`"xk"`},{value:`"kw"`},{value:`"kg"`},{value:`"la"`},{value:`"lv"`},{value:`"arab"`},{value:`"lb"`},{value:`"ls"`},{value:`"lr"`},{value:`"ly"`},{value:`"li"`},{value:`"lt"`},{value:`"lu"`},{value:`"mo"`},{value:`"mg"`},{value:`"mw"`},{value:`"my"`},{value:`"mv"`},{value:`"ml"`},{value:`"mt"`},{value:`"mh"`},{value:`"mq"`},{value:`"mr"`},{value:`"mu"`},{value:`"yt"`},{value:`"mx"`},{value:`"md"`},{value:`"mc"`},{value:`"mn"`},{value:`"me"`},{value:`"ms"`},{value:`"ma"`},{value:`"mz"`},{value:`"mm"`},{value:`"na"`},{value:`"nr"`},{value:`"np"`},{value:`"nl"`},{value:`"nc"`},{value:`"nz"`},{value:`"ni"`},{value:`"ne"`},{value:`"ng"`},{value:`"nu"`},{value:`"nf"`},{value:`"kp"`},{value:`"mk"`},{value:`"gb-nir"`},{value:`"mp"`},{value:`"no"`},{value:`"om"`},{value:`"pc"`},{value:`"pk"`},{value:`"pw"`},{value:`"pa"`},{value:`"pg"`},{value:`"py"`},{value:`"pe"`},{value:`"ph"`},{value:`"pn"`},{value:`"pl"`},{value:`"pt"`},{value:`"pr"`},{value:`"qa"`},{value:`"cg"`},{value:`"ro"`},{value:`"ru"`},{value:`"rw"`},{value:`"re"`},{value:`"bl"`},{value:`"sh-hl"`},{value:`"sh"`},{value:`"kn"`},{value:`"lc"`},{value:`"mf"`},{value:`"pm"`},{value:`"vc"`},{value:`"ws"`},{value:`"sm"`},{value:`"st"`},{value:`"sa"`},{value:`"gb-sct"`},{value:`"sn"`},{value:`"rs"`},{value:`"sc"`},{value:`"sl"`},{value:`"sg"`},{value:`"sx"`},{value:`"sk"`},{value:`"si"`},{value:`"sb"`},{value:`"so"`},{value:`"za"`},{value:`"gs"`},{value:`"kr"`},{value:`"ss"`},{value:`"es"`},{value:`"lk"`},{value:`"ps"`},{value:`"sd"`},{value:`"sr"`},{value:`"sj"`},{value:`"se"`},{value:`"ch"`},{value:`"sy"`},{value:`"tw"`},{value:`"tj"`},{value:`"tz"`},{value:`"th"`},{value:`"tl"`},{value:`"tg"`},{value:`"tk"`},{value:`"to"`},{value:`"tt"`},{value:`"sh-ta"`},{value:`"tn"`},{value:`"tm"`},{value:`"tc"`},{value:`"tv"`},{value:`"tr"`},{value:`"ug"`},{value:`"ua"`},{value:`"ae"`},{value:`"gb"`},{value:`"un"`},{value:`"um"`},{value:`"us"`},{value:`"uy"`},{value:`"uz"`},{value:`"vu"`},{value:`"ve"`},{value:`"vn"`},{value:`"vg"`},{value:`"vi"`},{value:`"gb-wls"`},{value:`"wf"`},{value:`"eh"`},{value:`"ye"`},{value:`"zm"`},{value:`"zw"`}]}},value:{defaultValue:null,description:`Unique identifier for this chip. Used for selection tracking`,name:`value`,required:!0,type:{name:`string`}},children:{defaultValue:null,description:`Content to display inside the chip`,name:`children`,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`}]}},counter:{defaultValue:null,description:`Optional numeric counter to display alongside the chip label`,name:`counter`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{E as n,D as r,T as t};
|
package/dist/assets/{SingleSelectChips.stories-Du0LL0gN.js → SingleSelectChips.stories-CTaYA6Yk.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-Cy08WP3t.js";import{n as o,t as s}from"./Heading-B3jb_-J8.js";import{n as c,t as ee}from"./Button--WTUF97E.js";import{r as l,t as te}from"./lib-8ue2PVWI.js";import{r as ne,t as re}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as u,r as ie,t as d}from"./SingleSelectChips-lT5C7a2D.js";import{n as f,t as p}from"./LayoutFlex-BlWwmFhv.js";import{n as ae,t as oe}from"./Link-DbeaGxmu.js";import{n as m,t as h}from"./Tooltip-BKkZoXDV.js";import{a as g,c as _,i as v,n as y,o as b,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),ie(),_(),b(),v(),y(),ce(),l(),f(),i(),ne(),ae(),o(),m(),c(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/SingleSelectChips`,component:d,subcomponents:{SingleSelectChipsItem:u},parameters:{layout:`padded`},args:{"aria-label":`Choose a skill`,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(`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(`Click on the chip to deselect it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith(null),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`false`),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)(d,{...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(`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(`Click on the chip to deselect it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith(null),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Change the value externally`,async()=>{k(),N(`vocabulary`),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`,`false`)})})}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`},{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`),T(i).toHaveAttribute(`aria-selected`,`false`)})}},I={args:{"aria-label":`Choose an availability`,defaultValue:`morning`,items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(g,{})},{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":`Choose a language 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":`Choose a country`,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":`Choose a time slot`,defaultValue:B[0],items:B.map(e=>({value:`${e}`,label:(0,w.jsx)(te,{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:`Choose a time slot`}),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)(p,{gap:`12`,children:[(0,w.jsx)(d,{...e}),(0,w.jsx)(ee,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`just-starting`,label:`I’m just starting`},{value:`basics`,label:`I know the basics`},{value:`dont-know`,label:`I don’t know`}],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`},{value:`dont-know`,label:`I don’t know`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(x,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(se,{})},{value:`dont-know`,label:`I don’t know`}],K={render:function(e){return(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What’s your current English level?`}),(0,w.jsx)(d,{"aria-label":`Selected English level`,items:U})]}),(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`When can you take lessons?`}),(0,w.jsx)(d,{"aria-label":`Selected day of the week`,items:W})]}),(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What time of day works for you?`}),(0,w.jsx)(d,{"aria-label":`Selected time of day`,items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=E(n.getByRole(`listbox`,{name:`Selected English level`})),i=E(n.getByRole(`listbox`,{name:`Selected day of the week`})),a=r.getByRole(`option`,{name:`I’m just starting`}),o=r.getByRole(`option`,{name:`I know the basics`}),s=r.getByRole(`option`,{name:`I don’t know`}),c=i.getByRole(`option`,{name:`Monday`});await t(`Tab once to enter first chips group`,async()=>{await O.tab(),T(a).toHaveFocus()}),await t(`Next tab should focus second chips group`,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=[{id:1,title:`Building Your First Vocabulary List`,skills:[`vocabulary`]},{id:2,title:`Effective Speaking Practice Techniques`,skills:[`speaking`]},{id:3,title:`Active Listening Strategies`,skills:[`listening`]},{id:4,title:`Speed Reading Methods`,skills:[`reading`]},{id:5,title:`Grammar Rules Made Simple`,skills:[`grammar`]},{id:6,title:`Combining Speaking and Vocabulary`,skills:[`speaking`,`vocabulary`]},{id:7,title:`Reading Comprehension and Vocabulary Building`,skills:[`reading`,`vocabulary`]},{id:8,title:`Listening and Speaking Integration`,skills:[`listening`,`speaking`]}],J=re.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-BiCO96_r.js";import{n as o,t as s}from"./Heading-DX-HCDkx.js";import{n as c,t as ee}from"./Button-_0pS2khJ.js";import{r as l,t as te}from"./lib-8ue2PVWI.js";import{r as ne,t as re}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as u,r as ie,t as d}from"./SingleSelectChips-Dgw0qYjB.js";import{n as f,t as p}from"./LayoutFlex-CEOcocT6.js";import{n as ae,t as oe}from"./Link-DLL8OonN.js";import{n as m,t as h}from"./Tooltip-CX8T37NP.js";import{a as g,c as _,i as v,n as y,o as b,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),ie(),_(),b(),v(),y(),ce(),l(),f(),i(),ne(),ae(),o(),m(),c(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/SingleSelectChips`,component:d,subcomponents:{SingleSelectChipsItem:u},parameters:{layout:`padded`},args:{"aria-label":`Choose a skill`,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(`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(`Click on the chip to deselect it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith(null),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`false`),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)(d,{...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(`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(`Click on the chip to deselect it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith(null),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Change the value externally`,async()=>{k(),N(`vocabulary`),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`,`false`)})})}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`},{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`),T(i).toHaveAttribute(`aria-selected`,`false`)})}},I={args:{"aria-label":`Choose an availability`,defaultValue:`morning`,items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(g,{})},{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":`Choose a language 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":`Choose a country`,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":`Choose a time slot`,defaultValue:B[0],items:B.map(e=>({value:`${e}`,label:(0,w.jsx)(te,{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:`Choose a time slot`}),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)(p,{gap:`12`,children:[(0,w.jsx)(d,{...e}),(0,w.jsx)(ee,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`just-starting`,label:`I’m just starting`},{value:`basics`,label:`I know the basics`},{value:`dont-know`,label:`I don’t know`}],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`},{value:`dont-know`,label:`I don’t know`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(x,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(se,{})},{value:`dont-know`,label:`I don’t know`}],K={render:function(e){return(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What’s your current English level?`}),(0,w.jsx)(d,{"aria-label":`Selected English level`,items:U})]}),(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`When can you take lessons?`}),(0,w.jsx)(d,{"aria-label":`Selected day of the week`,items:W})]}),(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What time of day works for you?`}),(0,w.jsx)(d,{"aria-label":`Selected time of day`,items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=E(n.getByRole(`listbox`,{name:`Selected English level`})),i=E(n.getByRole(`listbox`,{name:`Selected day of the week`})),a=r.getByRole(`option`,{name:`I’m just starting`}),o=r.getByRole(`option`,{name:`I know the basics`}),s=r.getByRole(`option`,{name:`I don’t know`}),c=i.getByRole(`option`,{name:`Monday`});await t(`Tab once to enter first chips group`,async()=>{await O.tab(),T(a).toHaveFocus()}),await t(`Next tab should focus second chips group`,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=[{id:1,title:`Building Your First Vocabulary List`,skills:[`vocabulary`]},{id:2,title:`Effective Speaking Practice Techniques`,skills:[`speaking`]},{id:3,title:`Active Listening Strategies`,skills:[`listening`]},{id:4,title:`Speed Reading Methods`,skills:[`reading`]},{id:5,title:`Grammar Rules Made Simple`,skills:[`grammar`]},{id:6,title:`Combining Speaking and Vocabulary`,skills:[`speaking`,`vocabulary`]},{id:7,title:`Reading Comprehension and Vocabulary Building`,skills:[`reading`,`vocabulary`]},{id:8,title:`Listening and Speaking Integration`,skills:[`listening`,`speaking`]}],J=re.ul`
|
|
2
2
|
all: unset;
|
|
3
3
|
list-style: none;
|
|
4
4
|
display: flex;
|
|
@@ -1,2 +1,2 @@
|
|
|
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-Czcvpvgg.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";var p,m,h,g,_,v=t((()=>{p=`root__Eki38`,m=`track__zosW2`,h=`range__Awc-3`,g=`thumb__IV11l`,_={root:p,track:m,range:h,thumb:g}}));function y(e){let t={};return Object.entries(e).forEach(([e,n])=>{switch(e){case`id`:case`aria-label`:case`aria-labelledby`:case`aria-describedby`:case`aria-invalid`:case`aria-errormessage`:t[e]=n}}),t}var b,x,S,C=t((()=>{b=e(n(),1),l(),v(),i(),f(),x=a(),S=(0,b.forwardRef)(function({value:e,defaultValue:t=0,onValueChange:n,onValueCommit:i,min:a=0,max:l=100,step:f=1,dataset:p,...m},h){let g=r(p,{preplyDsComponent:d.Slider}),v=n?e=>n(e[0]):void 0,b=i?e=>i(e[0]):void 0;return(0,x.jsxs)(u,{ref:h,...g,className:_.root,value:e===void 0?void 0:[e],defaultValue:t===void 0?void 0:[t],onValueChange:v,onValueCommit:b,min:a,max:l,step:f,children:[(0,x.jsx)(s,{className:_.track,children:(0,x.jsx)(o,{className:_.range})}),(0,x.jsx)(c,{...y(m),className:_.thumb})]})});try{y.displayName=`filterThumbProps`,y.__docgenInfo={description:``,displayName:`filterThumbProps`,props:{}}}catch{}try{S.displayName=`Slider`,S.__docgenInfo={description:`A slider input that allows users to select a single value from a range.`,displayName:`Slider`,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 slider.\nMust be used in conjunction with `onValueChange`.",name:`value`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},defaultValue:{defaultValue:{value:`0`},description:`The value of the slider when initially rendered.
|
|
2
2
|
Use when you do not need to control the state of the slider.`,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},onValueChange:{defaultValue:null,description:`Event handler called when the value changes.`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: number) => 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: number) => void`}]}},name:{defaultValue:null,description:`The name of the 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 slider.`,name:`min`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},max:{defaultValue:{value:`100`},description:`The maximum value for the 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`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{v as a,_ as i,y as n,C as r,S 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{r as i,t as a}from"./Slider-
|
|
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"./Slider-DZQBnl2S.js";var o,s,c,l,u,d,f,p,m,h,g,_,v,y;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`,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=f(e).getByRole(`slider`);await t(`Initial state`,async()=>{l(n).toBeInTheDocument(),l(n).toHaveAttribute(`aria-valuemin`,`0`),l(n).toHaveAttribute(`aria-valuemax`,`100`),l(n).toHaveAttribute(`aria-valuenow`,`0`)}),await t(`Move thumb via keyboard interactions`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`1`),l(p).toBeCalledWith(1),l(m).toBeCalledWith(1)})}},_={args:{defaultValue:50},play:async({canvasElement:e,step:t})=>{let n=f(e).getByRole(`slider`);await t(`Initial state`,async()=>{l(n).toBeInTheDocument(),l(n).toHaveAttribute(`aria-valuemin`,`0`),l(n).toHaveAttribute(`aria-valuemax`,`100`),l(n).toHaveAttribute(`aria-valuenow`,`50`)}),await t(`Move thumb via keyboard interactions`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`51`),l(p).toBeCalledWith(51),l(m).toBeCalledWith(51)})}},v={render:function(e){let[t,n]=(0,o.useState)(50);return(0,s.jsx)(a,{...e,value:t,onValueChange:t=>{n(t),e.onValueChange?.(t)}})},play:async({canvasElement:e,step:t})=>{let n=f(e).getByRole(`slider`);await t(`Initial controlled state`,async()=>{l(n).toBeInTheDocument(),l(n).toHaveAttribute(`aria-valuenow`,`50`)}),await t(`Move thumb and verify value updates`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`51`),l(p).toBeCalledWith(51),l(m).toBeCalledWith(51)})}},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}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"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./Text-
|
|
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"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./Text-BiCO96_r.js";import{n as u,t as d}from"./Heading-DX-HCDkx.js";import{n as f,t as p}from"./Button-_0pS2khJ.js";import{i as m,r as h}from"./lib-8ue2PVWI.js";import{n as g,t as _}from"./ProgressSteps-B2AXEKFJ.js";var v,y,b,x=t((()=>{v=`steps__6mN2m`,y=`header__hCorO`,b={steps:v,header:y}})),S,C,w,T,E,D,O,k,A,j=t((()=>{S=e(n(),1),f(),x(),h(),i(),s(),u(),g(),c(),C=a(),w=(0,S.createContext)(void 0),T=()=>{let e=(0,S.useContext)(w);if(e===void 0)throw Error(`Steps navigation components must be used within a Steps component`);return e||{}},E=(0,S.forwardRef)(function({onClick:e,disabled:t,variant:n=`ghost`,...r},i){let{goToPreviousStep:a,currentStep:o,isNavigating:s,contentId:c}=T();return(0,C.jsx)(p,{...r,ref:i,size:`medium`,variant:n,onClick:t=>{e?.(t),!t.defaultPrevented&&a()},disabled:o===1||s||t,"aria-controls":c,children:r.children||(0,C.jsx)(m,{id:`preply-ds.steps.previous`,defaultMessage:`Previous`,description:`Button used to navigate to the previous step`})})}),D=(0,S.forwardRef)(function({onClick:e,disabled:t,variant:n=`primary`,...r},i){let{goToNextStep:a,currentStep:o,totalSteps:s,isNavigating:c,contentId:l}=T();return(0,C.jsx)(p,{...r,ref:i,size:`medium`,variant:n,onClick:t=>{e?.(t),!t.defaultPrevented&&a()},disabled:o===s||c||t,"aria-controls":l,children:r.children||(0,C.jsx)(m,{id:`preply-ds.steps.next`,defaultMessage:`Next`,description:`Button used to navigate to the next step`})})}),O=({children:e,"aria-label":t,initialStep:n=1,onStepChange:i,dataset:a})=>{let s=(0,S.useId)(),[c,l]=(0,S.useState)(n),[u,d]=(0,S.useState)(!1),f=[],p=[];e?.forEach(e=>{(0,S.isValidElement)(e)&&e.type===k?f.push(e):p.push(e)});let m=f.length,h=r(a,{preplyDsComponent:o.Steps}),g=async e=>{let t=Math.min(Math.max(e,1),m);if(!i){l(t);return}d(!0);try{l(await i(c,t)??t)}finally{d(!1)}},v={goToPreviousStep:()=>g(c-1),goToNextStep:()=>g(c+1),goToStep:e=>g(e),currentStep:c,totalSteps:m,isNavigating:u,contentId:s};return(0,C.jsxs)(`div`,{...h,className:b.steps,id:s,"aria-live":`polite`,"aria-busy":u,children:[(0,C.jsx)(_,{currentStep:c,totalSteps:m,"aria-label":t}),(0,C.jsx)(`div`,{className:b.content,children:(0,C.jsxs)(w.Provider,{value:v,children:[f[c-1],p]})})]})},k=({title:e,description:t,children:n,hideHeader:r})=>(0,C.jsxs)(C.Fragment,{children:[(0,C.jsxs)(`hgroup`,{className:b.header,hidden:r,children:[(0,C.jsx)(d,{tag:`h3`,variant:{_:`medium`,"medium-l":`large`},children:e}),t&&(0,C.jsx)(l,{variant:`default-regular`,accent:`secondary`,children:t})]}),n]}),A=Object.assign(O,{Step:k,Previous:E,Next:D});try{A.displayName=`Steps`,A.__docgenInfo={description:"This component allows users to navigate through a series of steps, providing\na structured way to complete tasks or forms. It will also handle screen reader\nannouncements and progress indicators.\n\nTo create a step, wrap the content of each step in a `Steps.Step` component.\nAny non-`Steps.Step` children will be rendered outside of the steps flow,\nright after the currently active step.\n\nTo navigate between steps, use the `Steps.Previous` and `Steps.Next` components.\nAlternatively, you can use the `StepsContext` directly to call\n`goToPreviousStep`, `goToNextStep`, or `goToStep`.",displayName:`Steps`,props:{"aria-label":{defaultValue:null,description:`A description of the step flow and its content for screen readers.
|
|
2
2
|
@example 'Onboarding Steps', 'Checkout Steps', 'Survey Steps', etc.`,name:`aria-label`,required:!0,type:{name:`string`}},initialStep:{defaultValue:{value:`1`},description:"The initial step to start at (from `1` to `children.length`).",name:`initialStep`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},onStepChange:{defaultValue:null,description:`Optional callback to control navigation between steps.
|
|
3
3
|
|
|
4
4
|
This is triggered either by using the \`Steps.Previous\` and \`Steps.Next\`
|
|
@@ -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,t as o}from"./Steps-
|
|
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,t as o}from"./Steps-D3cRQC3d.js";import{n as s,t as c}from"./LayoutFlex-CEOcocT6.js";var l,u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T;t((()=>{l=e(n(),1),i(),s(),u=r(),{expect:d,userEvent:f,waitFor:p}=__STORYBOOK_MODULE_TEST__,m={title:`Components/Steps`,component:o,decorators:[e=>(0,u.jsx)(`div`,{style:{padding:`32px`},children:(0,u.jsx)(e,{})})]},h=(0,u.jsx)(`div`,{style:{width:`100%`,height:`300px`,backgroundColor:`#e0e0e0`,marginBottom:`16px`}}),g={parameters:{docs:{description:{story:`Basic usage with header, controls, and content per step.`}}},render:()=>(0,u.jsxs)(o,{dataset:{testid:`steps`},"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,description:`This is the description for step 1.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,description:`This is the description for step 2.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,description:`This is the description for step 3.`,children:h}),(0,u.jsxs)(c,{justifyContent:`space-between`,children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]}),play:async({canvas:e})=>{d(e.getByText(`Step 1`)).toBeVisible(),await f.click(e.getByText(`Next`)),await p(()=>{d(e.getByText(`Step 2`)).toBeVisible()}),await f.click(e.getByText(`Previous`)),await p(()=>{d(e.getByText(`Step 1`)).toBeVisible()})}},_={parameters:{docs:{description:{story:`Example with hidden headers and only content per step.`}}},render:()=>(0,u.jsxs)(o,{"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,hideHeader:!0,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,hideHeader:!0,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,hideHeader:!0,children:h}),(0,u.jsxs)(c,{justifyContent:`space-between`,children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]})},v={parameters:{docs:{description:{story:"Example demonstrating the use of a custom `initialStep`."}}},render:()=>(0,u.jsxs)(o,{initialStep:2,"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,description:`Step 1 is skipped.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,description:`Starting at step 2.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,description:`This is the third step.`,children:h})]})},y={parameters:{docs:{description:{story:`Example with only navigation controls, no headers or content.`}}},render:()=>(0,u.jsxs)(o,{"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,children:h}),(0,u.jsxs)(c,{justifyContent:`space-between`,children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]})},b={parameters:{docs:{description:{story:`Example with a 1-second async delay between steps.
|
|
2
2
|
|
|
3
3
|
Navigation controls are disabled during transitions, with a cursor loading indicator.`}}},render:()=>(0,u.jsxs)(o,{onStepChange:async(e,t)=>(await new Promise(e=>setTimeout(e,1e3)),t),dataset:{testid:`steps`},"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,description:`Navigation has a 1s delay`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,description:`Each navigation has async validation`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,description:`Buttons are disabled during validation`,children:h}),(0,u.jsx)(o.Step,{title:`Step 4`,description:`Final step`,children:h}),(0,u.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`},children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]}),play:async({canvas:e})=>{let t=e.getByTestId(`steps`);d(e.getByText(`Step 1`)).toBeVisible(),await f.click(e.getByText(`Next`)),await p(()=>{d(t).toHaveAttribute(`aria-busy`,`true`)},{timeout:500}),await p(()=>{d(t).toHaveAttribute(`aria-busy`,`false`)},{timeout:3e3}),d(e.getByText(`Step 2`)).toBeVisible()}},x={parameters:{docs:{description:{story:`You can override the navigation flow using \`onStepChange\`.
|
|
4
4
|
|
|
@@ -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-BiCO96_r.js";import{n as o,t as s}from"./LayoutFlex-CEOcocT6.js";import{n as c,t as l}from"./Switch-DyKTsO1c.js";var u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T;t((()=>{u=e(n(),1),c(),o(),i(),d=r(),{expect:f,fn:p,userEvent:m,within:h}=__STORYBOOK_MODULE_TEST__,g={title:`Components/Switch`,component:l,args:{onCheckedChange:p(),"aria-label":`Switch`},parameters:{layout:`padded`}},_={async play({args:e,canvasElement:t,step:n}){let r=h(t).getByRole(`switch`);await n(`Switch on via click`,async()=>{await m.click(r),f(e.onCheckedChange).toHaveBeenNthCalledWith(1,!0),f(r).toHaveAttribute(`aria-checked`,`true`)}),await n(`Switch off via click`,async()=>{await m.click(r),f(e.onCheckedChange).toHaveBeenNthCalledWith(2,!1),f(r).toHaveAttribute(`aria-checked`,`false`)}),await n(`Switch on via Enter key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Enter]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(3,!0),f(r).toHaveAttribute(`aria-checked`,`true`)}),await n(`Switch off via Enter key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Enter]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(4,!1),f(r).toHaveAttribute(`aria-checked`,`false`)}),await n(`Switch on via Space key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Space]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(5,!0),f(r).toHaveAttribute(`aria-checked`,`true`)}),await n(`Switch off via Space key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Space]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(6,!1),f(r).toHaveAttribute(`aria-checked`,`false`)})}},v={render:function(e){return(0,d.jsxs)(s,{gap:`12`,children:[(0,d.jsx)(l,{...e}),(0,d.jsx)(l,{...e,defaultChecked:!0}),(0,d.jsx)(l,{...e,defaultChecked:!1})]})}},y={render:function(e){let t=({checked:e,...t})=>{let[n,r]=(0,u.useState)(e);return(0,d.jsx)(l,{...t,checked:n,onCheckedChange:r})};return(0,d.jsxs)(s,{gap:`12`,children:[(0,d.jsx)(t,{...e}),(0,d.jsx)(t,{...e,checked:!0}),(0,d.jsx)(t,{...e,checked:!1})]})}},b={args:{checked:!1},async play({canvasElement:e,step:t}){let n=h(e).getByRole(`switch`);await t(`switch does not change state`,async()=>{await m.click(n),f(n).toHaveAttribute(`aria-checked`,`false`)})}},x={args:{disabled:!0},render:function(e){return(0,d.jsxs)(s,{gap:`12`,children:[(0,d.jsx)(l,{...e,disabled:!0}),(0,d.jsx)(l,{...e,defaultChecked:!0,disabled:!0})]})},async play({args:e,canvasElement:t,step:n}){let r=h(t).getAllByRole(`switch`)[0];await n(`switch cannot be focused`,()=>{r.focus(),f(r).not.toHaveFocus()}),await n(`switch cannot be checked`,async()=>{await m.click(r),f(e.onCheckedChange).not.toHaveBeenCalled(),f(r).toHaveAttribute(`aria-checked`,`false`)})}},S={parameters:{chromatic:{modes:{TouchDevice:{hasTouch:!0}}}}},C={tags:[`!autodocs`],async play({canvasElement:e}){let t=h(e).getByRole(`switch`);t.focus(),f(t).toHaveFocus()}},w={render:function(e){return(0,d.jsx)(`div`,{style:{width:`500px`},children:(0,d.jsxs)(s,{nowrap:!0,gap:`8`,direction:`row`,alignItems:`center`,justifyContent:`space-between`,children:[(0,d.jsx)(a,{variant:`default-regular`,children:`Allow Preply to use your answers to improve your learning experience.`}),(0,d.jsx)(l,{...e})]})})}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
async play({
|
|
3
3
|
args,
|
|
4
4
|
canvasElement,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{_ as r,ht as i,t as a,w as o,x as s,y as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";import{n as u,t as d}from"./dist-Cc1j9Pjk.js";import{n as f,t as p}from"./text-accent-CfNKCcRq.js";import{n as m,t as h}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as g,t as _}from"./text-centered-D7Kg4Wt0.js";var v,y,b=t((()=>{v=`Text__BD7-C`,y={Text:v,"Text--variant-caption-regular":`Text--variant-caption-regular__-ndGs`,"Text--variant-caption-semibold":`Text--variant-caption-semibold__-q81F`,"Text--variant-small-regular":`Text--variant-small-regular__V98UM`,"Text--variant-small-regular-italic":`Text--variant-small-regular-italic__Ii9YT`,"Text--variant-small-semibold":`Text--variant-small-semibold__mTXWU`,"Text--variant-small-semibold-italic":`Text--variant-small-semibold-italic__N2bGq`,"Text--variant-default-regular":`Text--variant-default-regular__GBkvP`,"Text--variant-default-regular-italic":`Text--variant-default-regular-italic__h8iGC`,"Text--variant-default-semibold":`Text--variant-default-semibold__BREV0`,"Text--variant-default-semibold-italic":`Text--variant-default-semibold-italic__0qH9S`,"Text--variant-large-regular":`Text--variant-large-regular__IFXFs`,"Text--variant-large-regular-italic":`Text--variant-large-regular-italic__PBExC`,"Text--variant-large-semibold":`Text--variant-large-semibold__iyV1O`,"Text--variant-large-semibold-italic":`Text--variant-large-semibold-italic__wKF6g`,"Text--narrow-l--variant-caption-regular":`Text--narrow-l--variant-caption-regular__nznL0`,"Text--narrow-l--variant-caption-semibold":`Text--narrow-l--variant-caption-semibold__l0VQQ`,"Text--narrow-l--variant-small-regular":`Text--narrow-l--variant-small-regular__VMmD6`,"Text--narrow-l--variant-small-regular-italic":`Text--narrow-l--variant-small-regular-italic__nGADF`,"Text--narrow-l--variant-small-semibold":`Text--narrow-l--variant-small-semibold__BQ1W4`,"Text--narrow-l--variant-small-semibold-italic":`Text--narrow-l--variant-small-semibold-italic__7UUeq`,"Text--narrow-l--variant-default-regular":`Text--narrow-l--variant-default-regular__pVzcT`,"Text--narrow-l--variant-default-regular-italic":`Text--narrow-l--variant-default-regular-italic__RPEsW`,"Text--narrow-l--variant-default-semibold":`Text--narrow-l--variant-default-semibold__AHeOG`,"Text--narrow-l--variant-default-semibold-italic":`Text--narrow-l--variant-default-semibold-italic__Dhmq4`,"Text--narrow-l--variant-large-regular":`Text--narrow-l--variant-large-regular__vY6mg`,"Text--narrow-l--variant-large-regular-italic":`Text--narrow-l--variant-large-regular-italic__Jypdh`,"Text--narrow-l--variant-large-semibold":`Text--narrow-l--variant-large-semibold__XaN0f`,"Text--narrow-l--variant-large-semibold-italic":`Text--narrow-l--variant-large-semibold-italic__5DrpP`,"Text--medium-s--variant-caption-regular":`Text--medium-s--variant-caption-regular__QIFIm`,"Text--medium-s--variant-caption-semibold":`Text--medium-s--variant-caption-semibold__qA3XV`,"Text--medium-s--variant-small-regular":`Text--medium-s--variant-small-regular__Fujae`,"Text--medium-s--variant-small-regular-italic":`Text--medium-s--variant-small-regular-italic__jaDXd`,"Text--medium-s--variant-small-semibold":`Text--medium-s--variant-small-semibold__9pYQr`,"Text--medium-s--variant-small-semibold-italic":`Text--medium-s--variant-small-semibold-italic__-ac-Q`,"Text--medium-s--variant-default-regular":`Text--medium-s--variant-default-regular__jyyg6`,"Text--medium-s--variant-default-regular-italic":`Text--medium-s--variant-default-regular-italic__FzmWH`,"Text--medium-s--variant-default-semibold":`Text--medium-s--variant-default-semibold__zfein`,"Text--medium-s--variant-default-semibold-italic":`Text--medium-s--variant-default-semibold-italic__pwAKv`,"Text--medium-s--variant-large-regular":`Text--medium-s--variant-large-regular__UQstF`,"Text--medium-s--variant-large-regular-italic":`Text--medium-s--variant-large-regular-italic__BGPjz`,"Text--medium-s--variant-large-semibold":`Text--medium-s--variant-large-semibold__ZTsh3`,"Text--medium-s--variant-large-semibold-italic":`Text--medium-s--variant-large-semibold-italic__QsDHO`,"Text--medium-l--variant-caption-regular":`Text--medium-l--variant-caption-regular__neFtF`,"Text--medium-l--variant-caption-semibold":`Text--medium-l--variant-caption-semibold__96Bxj`,"Text--medium-l--variant-small-regular":`Text--medium-l--variant-small-regular__q832t`,"Text--medium-l--variant-small-regular-italic":`Text--medium-l--variant-small-regular-italic__rh-C-`,"Text--medium-l--variant-small-semibold":`Text--medium-l--variant-small-semibold__NyQYA`,"Text--medium-l--variant-small-semibold-italic":`Text--medium-l--variant-small-semibold-italic__D8qtH`,"Text--medium-l--variant-default-regular":`Text--medium-l--variant-default-regular__AZhpM`,"Text--medium-l--variant-default-regular-italic":`Text--medium-l--variant-default-regular-italic__zLCku`,"Text--medium-l--variant-default-semibold":`Text--medium-l--variant-default-semibold__3FVwk`,"Text--medium-l--variant-default-semibold-italic":`Text--medium-l--variant-default-semibold-italic__dmKNV`,"Text--medium-l--variant-large-regular":`Text--medium-l--variant-large-regular__4JxNh`,"Text--medium-l--variant-large-regular-italic":`Text--medium-l--variant-large-regular-italic__wwnsG`,"Text--medium-l--variant-large-semibold":`Text--medium-l--variant-large-semibold__WR7vo`,"Text--medium-l--variant-large-semibold-italic":`Text--medium-l--variant-large-semibold-italic__lLaF0`,"Text--wide-s--variant-caption-regular":`Text--wide-s--variant-caption-regular__tfrra`,"Text--wide-s--variant-caption-semibold":`Text--wide-s--variant-caption-semibold__pcHWg`,"Text--wide-s--variant-small-regular":`Text--wide-s--variant-small-regular__qVuSz`,"Text--wide-s--variant-small-regular-italic":`Text--wide-s--variant-small-regular-italic__paUwS`,"Text--wide-s--variant-small-semibold":`Text--wide-s--variant-small-semibold__--T3V`,"Text--wide-s--variant-small-semibold-italic":`Text--wide-s--variant-small-semibold-italic__YLx3p`,"Text--wide-s--variant-default-regular":`Text--wide-s--variant-default-regular__7nbdM`,"Text--wide-s--variant-default-regular-italic":`Text--wide-s--variant-default-regular-italic__ohsSu`,"Text--wide-s--variant-default-semibold":`Text--wide-s--variant-default-semibold__-Q2Gu`,"Text--wide-s--variant-default-semibold-italic":`Text--wide-s--variant-default-semibold-italic__v6oao`,"Text--wide-s--variant-large-regular":`Text--wide-s--variant-large-regular__lrWEc`,"Text--wide-s--variant-large-regular-italic":`Text--wide-s--variant-large-regular-italic__v55x9`,"Text--wide-s--variant-large-semibold":`Text--wide-s--variant-large-semibold__FV1hE`,"Text--wide-s--variant-large-semibold-italic":`Text--wide-s--variant-large-semibold-italic__8Xjhy`,"Text--wide-l--variant-caption-regular":`Text--wide-l--variant-caption-regular__RmVMU`,"Text--wide-l--variant-caption-semibold":`Text--wide-l--variant-caption-semibold__nWA4i`,"Text--wide-l--variant-small-regular":`Text--wide-l--variant-small-regular__jofJW`,"Text--wide-l--variant-small-regular-italic":`Text--wide-l--variant-small-regular-italic__vt9vP`,"Text--wide-l--variant-small-semibold":`Text--wide-l--variant-small-semibold__jSimt`,"Text--wide-l--variant-small-semibold-italic":`Text--wide-l--variant-small-semibold-italic__CPy01`,"Text--wide-l--variant-default-regular":`Text--wide-l--variant-default-regular__zGDH3`,"Text--wide-l--variant-default-regular-italic":`Text--wide-l--variant-default-regular-italic__pj89w`,"Text--wide-l--variant-default-semibold":`Text--wide-l--variant-default-semibold__AzL9L`,"Text--wide-l--variant-default-semibold-italic":`Text--wide-l--variant-default-semibold-italic__4AXL6`,"Text--wide-l--variant-large-regular":`Text--wide-l--variant-large-regular__iIUQK`,"Text--wide-l--variant-large-regular-italic":`Text--wide-l--variant-large-regular-italic__OtyLZ`,"Text--wide-l--variant-large-semibold":`Text--wide-l--variant-large-semibold__ZTrU9`,"Text--wide-l--variant-large-semibold-italic":`Text--wide-l--variant-large-semibold-italic__UNwvX`,"Text--strong":`Text--strong__ig9qo`}})),x,S,C,w=t((()=>{o(),d(),a(),x=e(n(),1),f(),g(),m(),b(),S=l(),C=(0,x.forwardRef)(function({children:e,variant:t,tag:n=`p`,accent:a,strong:o,centered:l,dataset:d,className:f,...m},g){let v=t||`small-regular`,b=t?void 0:o,x=c(y,u.Text,[s(`variant`,v),r(`strong`,void 0,b)]),C=p(!a,a),w=_(l),T=[...x,...C,...w,f];return(0,S.jsx)(n,{...h(m),ref:g,className:T.join(` `),...i(d,{preplyDsComponent:u.Text}),children:e})});try{C.displayName=`Text`,C.__docgenInfo={description:``,displayName:`Text`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"caption-regular"`},{value:`"caption-semibold"`},{value:`"small-regular"`},{value:`"small-regular-italic"`},{value:`"small-semibold"`},{value:`"small-semibold-italic"`},{value:`"default-regular"`},{value:`"default-regular-italic"`},{value:`"default-semibold"`},{value:`"default-semibold-italic"`},{value:`"large-regular"`},{value:`"large-regular-italic"`},{value:`"large-semibold"`},{value:`"large-semibold-italic"`},{value:`ResponsiveProp<TextVariant>`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"placeholder"`},{value:`"accentDark"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"critical"`},{value:`"inverted"`},{value:`"positive"`},{value:`"warning"`},{value:`"info"`}]}},strong:{defaultValue:null,description:``,name:`strong`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},centered:{defaultValue:null,description:``,name:`centered`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},tag:{defaultValue:{value:`p`},description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"div"`},{value:`"p"`},{value:`"span"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}}));export{w as n,C as t};
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{_ as r,ht as i,t as a,w as o,x as s,y as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";import{n as u,t as d}from"./dist-Cc1j9Pjk.js";import{n as f,t as p}from"./text-accent-CfNKCcRq.js";import{n as m,t as h}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as g,t as _}from"./text-centered-D7Kg4Wt0.js";var v,y,b=t((()=>{v=`Text__BD7-C`,y={Text:v,"Text--variant-caption-regular":`Text--variant-caption-regular__-ndGs`,"Text--variant-caption-semibold":`Text--variant-caption-semibold__-q81F`,"Text--variant-small-regular":`Text--variant-small-regular__V98UM`,"Text--variant-small-regular-italic":`Text--variant-small-regular-italic__Ii9YT`,"Text--variant-small-semibold":`Text--variant-small-semibold__mTXWU`,"Text--variant-small-semibold-italic":`Text--variant-small-semibold-italic__N2bGq`,"Text--variant-default-regular":`Text--variant-default-regular__GBkvP`,"Text--variant-default-regular-italic":`Text--variant-default-regular-italic__h8iGC`,"Text--variant-default-semibold":`Text--variant-default-semibold__BREV0`,"Text--variant-default-semibold-italic":`Text--variant-default-semibold-italic__0qH9S`,"Text--variant-large-regular":`Text--variant-large-regular__IFXFs`,"Text--variant-large-regular-italic":`Text--variant-large-regular-italic__PBExC`,"Text--variant-large-semibold":`Text--variant-large-semibold__iyV1O`,"Text--variant-large-semibold-italic":`Text--variant-large-semibold-italic__wKF6g`,"Text--narrow-l--variant-caption-regular":`Text--narrow-l--variant-caption-regular__nznL0`,"Text--narrow-l--variant-caption-semibold":`Text--narrow-l--variant-caption-semibold__l0VQQ`,"Text--narrow-l--variant-small-regular":`Text--narrow-l--variant-small-regular__VMmD6`,"Text--narrow-l--variant-small-regular-italic":`Text--narrow-l--variant-small-regular-italic__nGADF`,"Text--narrow-l--variant-small-semibold":`Text--narrow-l--variant-small-semibold__BQ1W4`,"Text--narrow-l--variant-small-semibold-italic":`Text--narrow-l--variant-small-semibold-italic__7UUeq`,"Text--narrow-l--variant-default-regular":`Text--narrow-l--variant-default-regular__pVzcT`,"Text--narrow-l--variant-default-regular-italic":`Text--narrow-l--variant-default-regular-italic__RPEsW`,"Text--narrow-l--variant-default-semibold":`Text--narrow-l--variant-default-semibold__AHeOG`,"Text--narrow-l--variant-default-semibold-italic":`Text--narrow-l--variant-default-semibold-italic__Dhmq4`,"Text--narrow-l--variant-large-regular":`Text--narrow-l--variant-large-regular__vY6mg`,"Text--narrow-l--variant-large-regular-italic":`Text--narrow-l--variant-large-regular-italic__Jypdh`,"Text--narrow-l--variant-large-semibold":`Text--narrow-l--variant-large-semibold__XaN0f`,"Text--narrow-l--variant-large-semibold-italic":`Text--narrow-l--variant-large-semibold-italic__5DrpP`,"Text--medium-s--variant-caption-regular":`Text--medium-s--variant-caption-regular__QIFIm`,"Text--medium-s--variant-caption-semibold":`Text--medium-s--variant-caption-semibold__qA3XV`,"Text--medium-s--variant-small-regular":`Text--medium-s--variant-small-regular__Fujae`,"Text--medium-s--variant-small-regular-italic":`Text--medium-s--variant-small-regular-italic__jaDXd`,"Text--medium-s--variant-small-semibold":`Text--medium-s--variant-small-semibold__9pYQr`,"Text--medium-s--variant-small-semibold-italic":`Text--medium-s--variant-small-semibold-italic__-ac-Q`,"Text--medium-s--variant-default-regular":`Text--medium-s--variant-default-regular__jyyg6`,"Text--medium-s--variant-default-regular-italic":`Text--medium-s--variant-default-regular-italic__FzmWH`,"Text--medium-s--variant-default-semibold":`Text--medium-s--variant-default-semibold__zfein`,"Text--medium-s--variant-default-semibold-italic":`Text--medium-s--variant-default-semibold-italic__pwAKv`,"Text--medium-s--variant-large-regular":`Text--medium-s--variant-large-regular__UQstF`,"Text--medium-s--variant-large-regular-italic":`Text--medium-s--variant-large-regular-italic__BGPjz`,"Text--medium-s--variant-large-semibold":`Text--medium-s--variant-large-semibold__ZTsh3`,"Text--medium-s--variant-large-semibold-italic":`Text--medium-s--variant-large-semibold-italic__QsDHO`,"Text--medium-l--variant-caption-regular":`Text--medium-l--variant-caption-regular__neFtF`,"Text--medium-l--variant-caption-semibold":`Text--medium-l--variant-caption-semibold__96Bxj`,"Text--medium-l--variant-small-regular":`Text--medium-l--variant-small-regular__q832t`,"Text--medium-l--variant-small-regular-italic":`Text--medium-l--variant-small-regular-italic__rh-C-`,"Text--medium-l--variant-small-semibold":`Text--medium-l--variant-small-semibold__NyQYA`,"Text--medium-l--variant-small-semibold-italic":`Text--medium-l--variant-small-semibold-italic__D8qtH`,"Text--medium-l--variant-default-regular":`Text--medium-l--variant-default-regular__AZhpM`,"Text--medium-l--variant-default-regular-italic":`Text--medium-l--variant-default-regular-italic__zLCku`,"Text--medium-l--variant-default-semibold":`Text--medium-l--variant-default-semibold__3FVwk`,"Text--medium-l--variant-default-semibold-italic":`Text--medium-l--variant-default-semibold-italic__dmKNV`,"Text--medium-l--variant-large-regular":`Text--medium-l--variant-large-regular__4JxNh`,"Text--medium-l--variant-large-regular-italic":`Text--medium-l--variant-large-regular-italic__wwnsG`,"Text--medium-l--variant-large-semibold":`Text--medium-l--variant-large-semibold__WR7vo`,"Text--medium-l--variant-large-semibold-italic":`Text--medium-l--variant-large-semibold-italic__lLaF0`,"Text--wide-s--variant-caption-regular":`Text--wide-s--variant-caption-regular__tfrra`,"Text--wide-s--variant-caption-semibold":`Text--wide-s--variant-caption-semibold__pcHWg`,"Text--wide-s--variant-small-regular":`Text--wide-s--variant-small-regular__qVuSz`,"Text--wide-s--variant-small-regular-italic":`Text--wide-s--variant-small-regular-italic__paUwS`,"Text--wide-s--variant-small-semibold":`Text--wide-s--variant-small-semibold__--T3V`,"Text--wide-s--variant-small-semibold-italic":`Text--wide-s--variant-small-semibold-italic__YLx3p`,"Text--wide-s--variant-default-regular":`Text--wide-s--variant-default-regular__7nbdM`,"Text--wide-s--variant-default-regular-italic":`Text--wide-s--variant-default-regular-italic__ohsSu`,"Text--wide-s--variant-default-semibold":`Text--wide-s--variant-default-semibold__-Q2Gu`,"Text--wide-s--variant-default-semibold-italic":`Text--wide-s--variant-default-semibold-italic__v6oao`,"Text--wide-s--variant-large-regular":`Text--wide-s--variant-large-regular__lrWEc`,"Text--wide-s--variant-large-regular-italic":`Text--wide-s--variant-large-regular-italic__v55x9`,"Text--wide-s--variant-large-semibold":`Text--wide-s--variant-large-semibold__FV1hE`,"Text--wide-s--variant-large-semibold-italic":`Text--wide-s--variant-large-semibold-italic__8Xjhy`,"Text--wide-l--variant-caption-regular":`Text--wide-l--variant-caption-regular__RmVMU`,"Text--wide-l--variant-caption-semibold":`Text--wide-l--variant-caption-semibold__nWA4i`,"Text--wide-l--variant-small-regular":`Text--wide-l--variant-small-regular__jofJW`,"Text--wide-l--variant-small-regular-italic":`Text--wide-l--variant-small-regular-italic__vt9vP`,"Text--wide-l--variant-small-semibold":`Text--wide-l--variant-small-semibold__jSimt`,"Text--wide-l--variant-small-semibold-italic":`Text--wide-l--variant-small-semibold-italic__CPy01`,"Text--wide-l--variant-default-regular":`Text--wide-l--variant-default-regular__zGDH3`,"Text--wide-l--variant-default-regular-italic":`Text--wide-l--variant-default-regular-italic__pj89w`,"Text--wide-l--variant-default-semibold":`Text--wide-l--variant-default-semibold__AzL9L`,"Text--wide-l--variant-default-semibold-italic":`Text--wide-l--variant-default-semibold-italic__4AXL6`,"Text--wide-l--variant-large-regular":`Text--wide-l--variant-large-regular__iIUQK`,"Text--wide-l--variant-large-regular-italic":`Text--wide-l--variant-large-regular-italic__OtyLZ`,"Text--wide-l--variant-large-semibold":`Text--wide-l--variant-large-semibold__ZTrU9`,"Text--wide-l--variant-large-semibold-italic":`Text--wide-l--variant-large-semibold-italic__UNwvX`,"Text--strong":`Text--strong__ig9qo`}})),x,S,C,w=t((()=>{o(),d(),a(),x=e(n(),1),f(),g(),m(),b(),S=l(),C=(0,x.forwardRef)(function({children:e,variant:t,tag:n=`p`,accent:a,strong:o,centered:l,dataset:d,className:f,...m},g){let v=t||`small-regular`,b=t?void 0:o,x=c(y,u.Text,[s(`variant`,v),r(`strong`,void 0,b)]),C=p(!a,a),w=_(l),T=[...x,...C,...w,f];return(0,S.jsx)(n,{...h(m),ref:g,className:T.join(` `),...i(d,{preplyDsComponent:u.Text}),children:e})});try{C.displayName=`Text`,C.__docgenInfo={description:``,displayName:`Text`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"caption-regular"`},{value:`"caption-semibold"`},{value:`"small-regular"`},{value:`"small-regular-italic"`},{value:`"small-semibold"`},{value:`"small-semibold-italic"`},{value:`"default-regular"`},{value:`"default-regular-italic"`},{value:`"default-semibold"`},{value:`"default-semibold-italic"`},{value:`"large-regular"`},{value:`"large-regular-italic"`},{value:`"large-semibold"`},{value:`"large-semibold-italic"`},{value:`ResponsiveProp<TextVariant>`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"inverted"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"placeholder"`},{value:`"primary"`},{value:`"secondary"`},{value:`"accentDark"`}]}},strong:{defaultValue:null,description:``,name:`strong`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},centered:{defaultValue:null,description:``,name:`centered`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},tag:{defaultValue:{value:`p`},description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"div"`},{value:`"p"`},{value:`"span"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}}));export{w as n,C 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{C as r,J as i,K as a,Y as o,n as s,t as c,tt as l,w as u}from"./dist-DtfJeYQK.js";import{t as d}from"./jsx-runtime-C2wGStra.js";import{n as f,t as p}from"./Text-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,J as i,K as a,Y as o,n as s,t as c,tt as l,w as u}from"./dist-DtfJeYQK.js";import{t as d}from"./jsx-runtime-C2wGStra.js";import{n as f,t as p}from"./Text-BiCO96_r.js";import{r as m,t as h}from"./storybook-utils-BfrlMSeG.js";function g({variant:e}){let[t,n]=e.split(`-`),r=s(l[t][n].body.fontSize);return(0,_.jsxs)(`tr`,{children:[(0,_.jsx)(`td`,{style:{paddingRight:16,whiteSpace:`nowrap`,textAlign:`right`},children:(0,_.jsx)(p,{variant:e,children:e},e)}),(0,_.jsx)(`td`,{children:r})]})}var _,v,y,b,x,S,C;t((()=>{u(),c(),e(n(),1),f(),h(),_=d(),v={title:`components/Text`,component:p,argTypes:{variant:{description:m},centered:{description:m}}},y=()=>(0,_.jsx)(p,{children:`Lorem ipsum`}),y.tags=[`!test`],y.parameters={chromatic:{disableSnapshot:!0}},b=()=>{let e=r(o.background.primaryInverted);return(0,_.jsx)(_.Fragment,{children:a.map(({id:t})=>(0,_.jsx)(`div`,{style:{backgroundColor:[`inverted`,`branded`,`selected`].includes(t)?e:void 0},children:(0,_.jsx)(p,{accent:t,children:t})},t))})},x=()=>(0,_.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,_.jsx)(`thead`,{children:(0,_.jsxs)(`tr`,{children:[(0,_.jsx)(`th`,{children:`Variant`}),(0,_.jsx)(`th`,{children:`font-size`})]})}),i.map(({id:e})=>(0,_.jsx)(g,{variant:e},e))]}),S={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(e,{args:t})=>(0,_.jsx)(`div`,{style:{backgroundColor:t.accent===`inverted`?`black`:void 0},children:e()})],args:{children:`Lorem ipsum dolor sit amet`,variant:`default-regular`,dataset:{qaid:`text`}},argTypes:{dataset:{control:`object`},children:{control:`text`},variant:{control:`select`},accent:{control:`select`},centered:{control:`boolean`},strong:{table:{disable:!0}}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`() => <Text>Lorem ipsum</Text>`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`() => {
|
|
2
2
|
const grey = getTokenVar(color.background.primaryInverted);
|
|
3
3
|
return <>
|
|
4
4
|
{TEXT_ACCENT_OPTIONS.map(({
|
|
@@ -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-
|
|
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-B3jdXz5i.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,type:o=`text`,inputDataset:l,dataset:u,hideLabel:f,onClick:p,hasError:m,useLegacyRequiredLabel:h,className:g,style:_,...v},y){return(0,d.jsx)(s,{id:e,label:t,description:n,error:r,hasError:m,required:a,dataset:u,hideLabel:f,onClick:p,useLegacyRequiredLabel:h,preplyDsComponent:i.TextField,children:(0,d.jsx)(c,{...v,type:o,ref:y,dataset:l})})});try{f.displayName=`TextField`,f.__docgenInfo={description:``,displayName:`TextField`,props:{id:{defaultValue:null,description:`The id to be passed to the input element.
|
|
2
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
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
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
|
-
@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`}]}},
|
|
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>>`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}},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:`string`}]}},defaultValue:{defaultValue:null,description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},type:{defaultValue:{value:`text`},description:``,name:`type`,required:!1,type:{name:`enum`,value:[{value:`"text"`},{value:`"search"`},{value:`"tel"`},{value:`"url"`},{value:`"email"`}]}},autoComplete:{defaultValue:null,description:``,name:`autoComplete`,required:!1,type:{name:`enum`,value:[{value:`"name"`},{value:`"off"`},{value:`"on"`},{value:`"tel"`},{value:`"url"`},{value:`"email"`},{value:`"username"`},{value:`"language"`}]}},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-BItN7xKl.js";import{n as o,t as s}from"./FieldButton-SkKd22gq.js";import{n as c,t as l}from"./TextField-C5bFUM0q.js";import{n as u,t as d}from"./TokyoUIAttach-jKVaxnL7.js";import{n as f,t as p}from"./TokyoUIUser-dpK4hO2N.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),c(),f(),u(),i(),o(),h=r(),{action:g}=__STORYBOOK_MODULE_ACTIONS__,{expect:_,userEvent:v,within:y,fn:b}=__STORYBOOK_MODULE_TEST__,x={title:`components/TextField`,component:l,args:{name:`fullName`,label:`Full name`,defaultValue:``,placeholder:`John Doe`,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(`Full name • Optional`),_(a).toHaveAccessibleName(`Full name`)}),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,`John Doe`),_(n.onValueChange).toHaveBeenCalledWith(`John Doe`),_(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(t.target.value),e.onChange?.(t)}})},args:{label:`Controlled TextField`,placeholder:`Type something...`,value:`Initial value`,defaultValue:void 0},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await _(e.getByTestId(`input`)).toHaveValue(`Initial value`)}),await t(`it should update the value when the user types`,async()=>{let t=e.getByTestId(`input`);await v.type(t,` - New controlled value`),_(t).toHaveValue(`Initial value - New controlled value`)})}},w={args:{icon:(0,h.jsx)(a,{svg:p,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 your full legal name`},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 your full legal name`),_(r).toHaveTextContent(`Enter your full legal name`)})}},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(`Full name`),_(r).toHaveTextContent(`Full name`)}),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(`Full name`)})}},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:`Full name`,placeholder:`John Doe`,description:`Enter your full legal name`},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":p},control:`select`},button:{options:[`None`,`With Button`],mapping:{None:void 0,"With Button":(0,h.jsx)(s,{svg:d,assistiveText:`Do the thing`,onClick:g(`field button clicked`)})},control:`select`},readOnly:{control:`boolean`},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,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,lt as i,t as a,ut as o,w as s,x as c,y as l}from"./dist-DtfJeYQK.js";import{t as u}from"./jsx-runtime-C2wGStra.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";import{n as p,t as m}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";var h,g,_=t((()=>{h=`TextHighlighted__ErxU-`,g={TextHighlighted:h,"TextHighlighted--highlight-blue":`TextHighlighted--highlight-blue__3H-tS`,"TextHighlighted--highlight-green":`TextHighlighted--highlight-green__PXiKm`,"TextHighlighted--highlight-primary":`TextHighlighted--highlight-primary__cKWhc`,"TextHighlighted--highlight-secondary":`TextHighlighted--highlight-secondary__24A04`,"TextHighlighted--highlight-tertiary":`TextHighlighted--highlight-tertiary__gkbLj`,"TextHighlighted--highlight-accent":`TextHighlighted--highlight-accent__DsZKF`,"TextHighlighted--highlight-positive":`TextHighlighted--highlight-positive__Tag8x`,"TextHighlighted--highlight-info":`TextHighlighted--highlight-info__Qqv0l`,"TextHighlighted--highlight-warning":`TextHighlighted--highlight-warning__--U9g`,"TextHighlighted--highlight-critical":`TextHighlighted--highlight-critical__D9jbb`}})),v,y,b,x=t((()=>{s(),f(),a(),v=e(n(),1),p(),_(),y=u(),b=(0,v.forwardRef)(function({children:e,highlight:t=i,tag:n=o,dataset:a,...s},u){let f=l(g,d.TextHighlighted,[c(`highlight`,t)]);return(0,y.jsx)(n,{...m(s),ref:u,className:f.join(` `),...r(a,{preplyDsComponent:d.TextHighlighted}),children:e})});try{b.displayName=`TextHighlighted`,b.__docgenInfo={description:``,displayName:`TextHighlighted`,props:{highlight:{defaultValue:{value:`green`},description:``,name:`highlight`,required:!1,type:{name:`enum`,value:[{value:`"
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,lt as i,t as a,ut as o,w as s,x as c,y as l}from"./dist-DtfJeYQK.js";import{t as u}from"./jsx-runtime-C2wGStra.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";import{n as p,t as m}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";var h,g,_=t((()=>{h=`TextHighlighted__ErxU-`,g={TextHighlighted:h,"TextHighlighted--highlight-blue":`TextHighlighted--highlight-blue__3H-tS`,"TextHighlighted--highlight-green":`TextHighlighted--highlight-green__PXiKm`,"TextHighlighted--highlight-primary":`TextHighlighted--highlight-primary__cKWhc`,"TextHighlighted--highlight-secondary":`TextHighlighted--highlight-secondary__24A04`,"TextHighlighted--highlight-tertiary":`TextHighlighted--highlight-tertiary__gkbLj`,"TextHighlighted--highlight-accent":`TextHighlighted--highlight-accent__DsZKF`,"TextHighlighted--highlight-positive":`TextHighlighted--highlight-positive__Tag8x`,"TextHighlighted--highlight-info":`TextHighlighted--highlight-info__Qqv0l`,"TextHighlighted--highlight-warning":`TextHighlighted--highlight-warning__--U9g`,"TextHighlighted--highlight-critical":`TextHighlighted--highlight-critical__D9jbb`}})),v,y,b,x=t((()=>{s(),f(),a(),v=e(n(),1),p(),_(),y=u(),b=(0,v.forwardRef)(function({children:e,highlight:t=i,tag:n=o,dataset:a,...s},u){let f=l(g,d.TextHighlighted,[c(`highlight`,t)]);return(0,y.jsx)(n,{...m(s),ref:u,className:f.join(` `),...r(a,{preplyDsComponent:d.TextHighlighted}),children:e})});try{b.displayName=`TextHighlighted`,b.__docgenInfo={description:``,displayName:`TextHighlighted`,props:{highlight:{defaultValue:{value:`green`},description:``,name:`highlight`,required:!1,type:{name:`enum`,value:[{value:`"accent"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"primary"`},{value:`"secondary"`},{value:`"blue"`},{value:`"green"`}]}},tag:{defaultValue:{value:`span`},description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"em"`},{value:`"span"`},{value:`"strong"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{x as n,b as t};
|