@wordpress/components 22.0.0 → 23.0.0

package/build/range-control/styles/range-control-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/range-control/styles/range-control-styles.ts"],"names":["rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","COLORS","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","backgroundDisabled","Rail","gray","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","MarkLabel","thumbColor","css","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","InputNumber","NumberControl","ActionRightWrapper"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;AACA;;AACA;;;;AAWA,MAAMA,gBAAgB,GAAG,EAAzB;AACA,MAAMC,UAAU,GAAG,CAAnB;;AACA,MAAMC,WAAW,GAAG,mBACnB,gBAAK;AAAEC,EAAAA,MAAM,EAAEH,gBAAV;AAA4BI,EAAAA,SAAS,EAAEJ;AAAvC,CAAL,ipTADD;;AAEA,MAAMK,SAAS,GAAG,EAAlB;AAEO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV;;;AAWP,MAAMC,YAAY,GAAG;AAAA,MAAE;AAAEC,IAAAA,KAAK,GAAGC,cAAOC,EAAP,CAAUC;AAApB,GAAF;AAAA,sBACpB,gBAAK;AAAEH,IAAAA;AAAF,GAAL,kpTADoB;AAAA,CAArB;;AAGA,MAAMI,aAAa,GAAG,SAAwD;AAAA,MAAtD;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAsD;;AAC7E,MAAK,CAAEA,uBAAP,EAAiC;AAChC,wBAAO,gBAAK;AAAEC,MAAAA,YAAY,EAAEF,KAAK,GAAG,EAAH,GAAQG;AAA7B,KAAL,mpTAAP;AACA;;AACD,SAAO,EAAP;AACA,CALD;;AAOO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,yDAMhBV,YANgB,OAOhBL,WAPgB,OAQhBU,aARgB,qlTAAb;;AAWA,MAAMM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,+BAEdjB,UAFc,SAI1B,gBAAK;AAAEkB,EAAAA,WAAW,EAAE;AAAf,CAAL,CAJ0B,qlTAAvB;;AAOA,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,+BAEbnB,UAFa,SAIzB,gBAAK;AAAEoB,EAAAA,UAAU,EAAE;AAAd,CAAL,CAJyB,qlTAAtB;;;AAOP,MAAMC,mBAAmB,GAAG,SAA0C;AAAA,MAAxC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAwC;AACrE,MAAIC,UAAU,GAAGD,SAAS,IAAI,EAA9B;;AAEA,MAAKD,QAAL,EAAgB;AACfE,IAAAA,UAAU,GAAGhB,cAAOC,EAAP,CAAUgB,kBAAvB;AACA;;AAED,sBAAO,gBAAK;AAAED,IAAAA;AAAF,GAAL,ypTAAP;AACA,CARD;;AAUO,MAAME,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,wBACKlB,cAAOmB,IAAP,CAAa,GAAb,CADL,+DAML3B,UANK,sCAQD,CAAED,gBAAgB,GAAGC,UAArB,IAAoC,CARnC,6BAUEA,UAVF,SAYbqB,mBAZa,qlTAAV;;;AAeP,MAAMO,oBAAoB,GAAG,SAA4C;AAAA,MAA1C;AAAEN,IAAAA,QAAF;AAAYO,IAAAA;AAAZ,GAA0C;AACxE,MAAIL,UAAU,GAAGK,UAAU,IAAI,cAA/B;;AAEA,MAAKP,QAAL,EAAgB;AACfE,IAAAA,UAAU,GAAGhB,cAAOmB,IAAP,CAAa,GAAb,CAAb;AACA;;AAED,sBAAO,gBAAK;AAAEH,IAAAA;AAAF,GAAL,0pTAAP;AACA,CARD;;AAUO,MAAMM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,mDAEC9B,UAFD,gBAGNA,UAHM,wEAOF,CAAED,gBAAgB,GAAGC,UAArB,IAAoC,CAPlC,eAUd4B,oBAVc,qlTAAX;;AAaA,MAAMG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;;AAQP,MAAMC,QAAQ,GAAG,SAA8C;AAAA,MAA5C;AAAEV,IAAAA,QAAF;AAAYW,IAAAA;AAAZ,GAA4C;AAC9D,MAAIC,eAAe,GAAGD,QAAQ,GAAG,cAAH,GAAoBzB,cAAOmB,IAAP,CAAa,GAAb,CAAlD;;AAEA,MAAKL,QAAL,EAAgB;AACfY,IAAAA,eAAe,GAAG1B,cAAOmB,IAAP,CAAa,GAAb,CAAlB;AACA;;AAED,sBAAO,gBAAK;AACXO,IAAAA;AADW,GAAL,8oTAAP;AAGA,CAVD;;AAYO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,cACL/B,SADK,qDAOb4B,QAPa,qlTAAV;;;AAUP,MAAMI,aAAa,GAAG,SAAoC;AAAA,MAAlC;AAAEH,IAAAA;AAAF,GAAkC;AACzD,sBAAO,gBAAK;AACX1B,IAAAA,KAAK,EAAE0B,QAAQ,GAAGzB,cAAOmB,IAAP,CAAa,GAAb,CAAH,GAAwBnB,cAAOmB,IAAP,CAAa,GAAb;AAD5B,GAAL,mpTAAP;AAGA,CAJD;;AAMO,MAAMU,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,aACX7B,cAAOmB,IAAP,CAAa,GAAb,CADW,wGASlBS,aATkB,qlTAAf;;;;;;;;;;;;;AAYP,MAAME,UAAU,GAAG;AAAA,MAAE;AAAEhB,IAAAA;AAAF,GAAF;AAAA,SAClBA,QAAQ,oBACLiB,UADK,uBAEgB/B,cAAOmB,IAAP,CAAa,GAAb,CAFhB,gqTADU;AAAA,CAAnB;;AASO,MAAMa,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,8CAGbpC,SAHa,2CAKT,CAAEL,gBAAgB,GAAGK,SAArB,IAAmC,CAL1B,sFAWdA,SAXc,2BAcrBkC,UAdqB,OAerB,gBAAK;AAAElB,EAAAA,UAAU,EAAE,CAAC;AAAf,CAAL,CAfqB,OAgBrB,gBACF;AAAEqB,EAAAA,SAAS,EAAE;AAAb,CADE,EAEF;AAAEA,EAAAA,SAAS,EAAE;AAAb,CAFE,CAhBqB,qlTAAlB;;;AAsBP,MAAMC,UAAU,GAAG,UAAiC;AAAA,MAA/B;AAAEC,IAAAA;AAAF,GAA+B;AACnD,SAAOA,SAAS,oBACbJ,UADa,kIAQDnC,SAAS,GAAG,CARX,eASFA,SAAS,GAAG,CATV,irTAcb,EAdH;AAeA,CAhBD;;AAkBO,MAAMwC,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,gHASdN,UATc,OAUdI,UAVc,qlTAAX;;AAaA,MAAMG,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,uFAMRzC,SAAS,GAAG,CANJ,mFAYCA,SAZD,ylTAAhB;;;AAeP,MAAM0C,WAAW,GAAG,UAA8B;AAAA,MAA5B;AAAEC,IAAAA;AAAF,GAA4B;AACjD,sBAAO,gBAAK;AACXC,IAAAA,OAAO,EAAED,IAAI,GAAG,CAAH,GAAO;AADT,GAAL,ipTAAP;AAGA,CAJD;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAME,eAAe,GAAG,UAAkC;AAAA,MAAhC;AAAEC,IAAAA;AAAF,GAAgC;AACzD,QAAMC,QAAQ,GAAGD,QAAQ,KAAK,QAA9B;;AAEA,MAAKC,QAAL,EAAgB;AACf;AAGA;;AAED;AAGA,CAZD;;AAcO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,yQAgBhBN,WAhBgB,OAiBhBG,eAjBgB,OAkBhB,yBAAc,YAAd,CAlBgB,OAmBhB,gBACF;AAAER,EAAAA,SAAS,EAAE;AAAb,CADE,EAEF;AAAEA,EAAAA,SAAS,EAAE;AAAb,CAFE,CAnBgB,qlTAAb,C,CAyBP;AACA;;;AACO,MAAMY,WAAW,GAAG,iCAAQC,sBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,4DAIb,kBAAO,EAAP,CAJa,uCAOnBrD,WAPmB,QAUpB,gBAAK;AAAEmB,EAAAA,UAAU,EAAG,GAAG,kBAAO,CAAP,CAAY;AAA9B,CAAL,CAVoB,qlTAAjB;;AAaA,MAAMmC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,uEAO1BtD,WAP0B,QAU3B,gBAAK;AAAEmB,EAAAA,UAAU,EAAE;AAAd,CAAL,CAV2B,qlTAAxB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport NumberControl from '../../number-control';\nimport { COLORS, reduceMotion, rtl } from '../../utils';\nimport { space } from '../../ui/utils/space';\n\nimport type {\n\tRangeMarkProps,\n\tRailProps,\n\tThumbProps,\n\tTooltipProps,\n\tTrackProps,\n\tWrapperProps,\n} from '../types';\n\nconst rangeHeightValue = 30;\nconst railHeight = 4;\nconst rangeHeight = () =>\n\tcss( { height: rangeHeightValue, minHeight: rangeHeightValue } );\nconst thumbSize = 12;\n\nexport const Root = styled.div`\n\t-webkit-tap-highlight-color: transparent;\n\talign-items: flex-start;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n`;\n\nconst wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>\n\tcss( { color } );\n\nconst wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\treturn css( { marginBottom: marks ? 16 : undefined } );\n\t}\n\treturn '';\n};\n\nexport const Wrapper = styled.div< WrapperProps >`\n\tdisplay: block;\n\tflex: 1;\n\tposition: relative;\n\twidth: 100%;\n\n\t${ wrapperColor };\n\t${ rangeHeight };\n\t${ wrapperMargin };\n`;\n\nexport const BeforeIconWrapper = styled.span`\n\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 6 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor }: RailProps ) => {\n\tlet background = railColor || '';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.ui.backgroundDisabled;\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.gray[ 300 ] };\n\tleft: 0;\n\tpointer-events: none;\n\tright: 0;\n\tdisplay: block;\n\theight: ${ railHeight }px;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\tborder-radius: ${ railHeight }px;\n\n\t${ railBackgroundColor };\n`;\n\nconst trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {\n\tlet background = trackColor || 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ railHeight }px;\n\theight: ${ railHeight }px;\n\tpointer-events: none;\n\tdisplay: block;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\n\t${ trackBackgroundColor };\n`;\n\nexport const MarksWrapper = styled.span`\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled }: RangeMarkProps ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\n\theight: ${ thumbSize }px;\n\tleft: 0;\n\tposition: absolute;\n\ttop: -4px;\n\twidth: 1px;\n\n\t${ markFill };\n`;\n\nconst markLabelFill = ( { isFilled }: RangeMarkProps ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.gray[ 700 ] : COLORS.gray[ 300 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tcolor: ${ COLORS.gray[ 300 ] };\n\tleft: 0;\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 12px;\n\ttransform: translateX( -50% );\n\twhite-space: nowrap;\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled }: ThumbProps ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.gray[ 400 ] };\n\t\t  `\n\t\t: css`\n\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t  `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\n\tdisplay: flex;\n\theight: ${ thumbSize }px;\n\tjustify-content: center;\n\tmargin-top: ${ ( rangeHeightValue - thumbSize ) / 2 }px;\n\toutline: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 0;\n\tuser-select: none;\n\twidth: ${ thumbSize }px;\n\tborder-radius: 50%;\n\n\t${ thumbColor };\n\t${ rtl( { marginLeft: -10 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( 4.5px )' },\n\t\t{ transform: 'translateX( -4.5px )' }\n\t) };\n`;\n\nconst thumbFocus = ( { isFocused }: ThumbProps ) => {\n\treturn isFocused\n\t\t? css`\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: ' ';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\theight: ${ thumbSize + 8 }px;\n\t\t\t\t\twidth: ${ thumbSize + 8 }px;\n\t\t\t\t\ttop: -4px;\n\t\t\t\t\tleft: -4px;\n\t\t\t\t}\n\t\t  `\n\t\t: '';\n};\n\nexport const Thumb = styled.span< ThumbProps >`\n\talign-items: center;\n\tborder-radius: 50%;\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\n\t${ thumbColor };\n\t${ thumbFocus };\n`;\n\nexport const InputRange = styled.input`\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0 -${ thumbSize / 2 }px;\n\topacity: 0;\n\toutline: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: calc( 100% + ${ thumbSize }px );\n`;\n\nconst tooltipShow = ( { show }: TooltipProps ) => {\n\treturn css( {\n\t\topacity: show ? 1 : 0,\n\t} );\n};\n\nconst tooltipPosition = ( { position }: TooltipProps ) => {\n\tconst isBottom = position === 'bottom';\n\n\tif ( isBottom ) {\n\t\treturn css`\n\t\t\tbottom: -80%;\n\t\t`;\n\t}\n\n\treturn css`\n\t\ttop: -80%;\n\t`;\n};\n\nexport const Tooltip = styled.span< TooltipProps >`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\topacity: 0;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: opacity 120ms ease;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\n\t${ reduceMotion( 'transition' ) };\n\t${ rtl(\n\t\t{ transform: 'translateX(-50%)' },\n\t\t{ transform: 'translateX(50%)' }\n\t) }\n`;\n\n// @todo: Refactor RangeControl with latest HStack configuration\n// @wordpress/components/ui/hstack.\nexport const InputNumber = styled( NumberControl )`\n\tdisplay: inline-block;\n\tfont-size: 13px;\n\tmargin-top: 0;\n\twidth: ${ space( 16 ) } !important;\n\n\tinput[type='number']& {\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: `${ space( 4 ) } !important` } ) }\n`;\n\nexport const ActionRightWrapper = styled.span`\n\tdisplay: block;\n\tmargin-top: 0;\n\n\tbutton,\n\tbutton.is-small {\n\t\tmargin-left: 0;\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: 8 } ) }\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/range-control/styles/range-control-styles.ts"],"names":["rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","COLORS","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","backgroundDisabled","Rail","gray","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","MarkLabel","thumbColor","css","theme","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","InputNumber","NumberControl","ActionRightWrapper"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;AACA;;AACA;;;;AAWA,MAAMA,gBAAgB,GAAG,EAAzB;AACA,MAAMC,UAAU,GAAG,CAAnB;;AACA,MAAMC,WAAW,GAAG,mBACnB,gBAAK;AAAEC,EAAAA,MAAM,EAAEH,gBAAV;AAA4BI,EAAAA,SAAS,EAAEJ;AAAvC,CAAL,ynTADD;;AAEA,MAAMK,SAAS,GAAG,EAAlB;AAEO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV;;;AAWP,MAAMC,YAAY,GAAG;AAAA,MAAE;AAAEC,IAAAA,KAAK,GAAGC,cAAOC,EAAP,CAAUC;AAApB,GAAF;AAAA,sBACpB,gBAAK;AAAEH,IAAAA;AAAF,GAAL,0nTADoB;AAAA,CAArB;;AAGA,MAAMI,aAAa,GAAG,SAAwD;AAAA,MAAtD;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAsD;;AAC7E,MAAK,CAAEA,uBAAP,EAAiC;AAChC,wBAAO,gBAAK;AAAEC,MAAAA,YAAY,EAAEF,KAAK,GAAG,EAAH,GAAQG;AAA7B,KAAL,2nTAAP;AACA;;AACD,SAAO,EAAP;AACA,CALD;;AAOO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,yDAMhBV,YANgB,OAOhBL,WAPgB,OAQhBU,aARgB,6jTAAb;;AAWA,MAAMM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,+BAEdjB,UAFc,SAI1B,gBAAK;AAAEkB,EAAAA,WAAW,EAAE;AAAf,CAAL,CAJ0B,6jTAAvB;;AAOA,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,+BAEbnB,UAFa,SAIzB,gBAAK;AAAEoB,EAAAA,UAAU,EAAE;AAAd,CAAL,CAJyB,6jTAAtB;;;AAOP,MAAMC,mBAAmB,GAAG,SAA0C;AAAA,MAAxC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAwC;AACrE,MAAIC,UAAU,GAAGD,SAAS,IAAI,EAA9B;;AAEA,MAAKD,QAAL,EAAgB;AACfE,IAAAA,UAAU,GAAGhB,cAAOC,EAAP,CAAUgB,kBAAvB;AACA;;AAED,sBAAO,gBAAK;AAAED,IAAAA;AAAF,GAAL,ioTAAP;AACA,CARD;;AAUO,MAAME,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,wBACKlB,cAAOmB,IAAP,CAAa,GAAb,CADL,+DAML3B,UANK,sCAQD,CAAED,gBAAgB,GAAGC,UAArB,IAAoC,CARnC,6BAUEA,UAVF,SAYbqB,mBAZa,6jTAAV;;;AAeP,MAAMO,oBAAoB,GAAG,SAA4C;AAAA,MAA1C;AAAEN,IAAAA,QAAF;AAAYO,IAAAA;AAAZ,GAA0C;AACxE,MAAIL,UAAU,GAAGK,UAAU,IAAI,cAA/B;;AAEA,MAAKP,QAAL,EAAgB;AACfE,IAAAA,UAAU,GAAGhB,cAAOmB,IAAP,CAAa,GAAb,CAAb;AACA;;AAED,sBAAO,gBAAK;AAAEH,IAAAA;AAAF,GAAL,koTAAP;AACA,CARD;;AAUO,MAAMM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,mDAEC9B,UAFD,gBAGNA,UAHM,wEAOF,CAAED,gBAAgB,GAAGC,UAArB,IAAoC,CAPlC,eAUd4B,oBAVc,6jTAAX;;AAaA,MAAMG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;;AAQP,MAAMC,QAAQ,GAAG,SAA8C;AAAA,MAA5C;AAAEV,IAAAA,QAAF;AAAYW,IAAAA;AAAZ,GAA4C;AAC9D,MAAIC,eAAe,GAAGD,QAAQ,GAAG,cAAH,GAAoBzB,cAAOmB,IAAP,CAAa,GAAb,CAAlD;;AAEA,MAAKL,QAAL,EAAgB;AACfY,IAAAA,eAAe,GAAG1B,cAAOmB,IAAP,CAAa,GAAb,CAAlB;AACA;;AAED,sBAAO,gBAAK;AACXO,IAAAA;AADW,GAAL,snTAAP;AAGA,CAVD;;AAYO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,cACL/B,SADK,qDAOb4B,QAPa,6jTAAV;;;AAUP,MAAMI,aAAa,GAAG,SAAoC;AAAA,MAAlC;AAAEH,IAAAA;AAAF,GAAkC;AACzD,sBAAO,gBAAK;AACX1B,IAAAA,KAAK,EAAE0B,QAAQ,GAAGzB,cAAOmB,IAAP,CAAa,GAAb,CAAH,GAAwBnB,cAAOmB,IAAP,CAAa,GAAb;AAD5B,GAAL,2nTAAP;AAGA,CAJD;;AAMO,MAAMU,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,aACX7B,cAAOmB,IAAP,CAAa,GAAb,CADW,wGASlBS,aATkB,6jTAAf;;;AAYP,MAAME,UAAU,GAAG;AAAA,MAAE;AAAEhB,IAAAA;AAAF,GAAF;AAAA,SAClBA,QAAQ,oBACLiB,UADK,uBAEgB/B,cAAOmB,IAAP,CAAa,GAAb,CAFhB,opTAILY,UAJK,uBAKgB/B,cAAOC,EAAP,CAAU+B,KAL1B,goTADU;AAAA,CAAnB;;AASO,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,8CAGbrC,SAHa,2CAKT,CAAEL,gBAAgB,GAAGK,SAArB,IAAmC,CAL1B,sFAWdA,SAXc,2BAcrBkC,UAdqB,OAerB,gBAAK;AAAElB,EAAAA,UAAU,EAAE,CAAC;AAAf,CAAL,CAfqB,OAgBrB,gBACF;AAAEsB,EAAAA,SAAS,EAAE;AAAb,CADE,EAEF;AAAEA,EAAAA,SAAS,EAAE;AAAb,CAFE,CAhBqB,6jTAAlB;;;AAsBP,MAAMC,UAAU,GAAG,UAAiC;AAAA,MAA/B;AAAEC,IAAAA;AAAF,GAA+B;AACnD,SAAOA,SAAS,oBACbL,UADa,+DAKS/B,cAAOC,EAAP,CAAU+B,KALnB,4CAQDpC,SAAS,GAAG,CARX,eASFA,SAAS,GAAG,CATV,ypTAcb,EAdH;AAeA,CAhBD;;AAkBO,MAAMyC,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,gHASdP,UATc,OAUdK,UAVc,6jTAAX;;AAaA,MAAMG,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,uFAMR1C,SAAS,GAAG,CANJ,mFAYCA,SAZD,ikTAAhB;;;AAeP,MAAM2C,WAAW,GAAG,UAA8B;AAAA,MAA5B;AAAEC,IAAAA;AAAF,GAA4B;AACjD,sBAAO,gBAAK;AACXC,IAAAA,OAAO,EAAED,IAAI,GAAG,CAAH,GAAO;AADT,GAAL,ynTAAP;AAGA,CAJD;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAME,eAAe,GAAG,UAAkC;AAAA,MAAhC;AAAEC,IAAAA;AAAF,GAAgC;AACzD,QAAMC,QAAQ,GAAGD,QAAQ,KAAK,QAA9B;;AAEA,MAAKC,QAAL,EAAgB;AACf;AAGA;;AAED;AAGA,CAZD;;AAcO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,yQAgBhBN,WAhBgB,OAiBhBG,eAjBgB,OAkBhB,yBAAc,YAAd,CAlBgB,OAmBhB,gBACF;AAAER,EAAAA,SAAS,EAAE;AAAb,CADE,EAEF;AAAEA,EAAAA,SAAS,EAAE;AAAb,CAFE,CAnBgB,6jTAAb,C,CAyBP;AACA;;;AACO,MAAMY,WAAW,GAAG,iCAAQC,sBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,4DAIb,kBAAO,EAAP,CAJa,uCAOnBtD,WAPmB,QAUpB,gBAAK;AAAEmB,EAAAA,UAAU,EAAG,GAAG,kBAAO,CAAP,CAAY;AAA9B,CAAL,CAVoB,6jTAAjB;;AAaA,MAAMoC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,uEAO1BvD,WAP0B,QAU3B,gBAAK;AAAEmB,EAAAA,UAAU,EAAE;AAAd,CAAL,CAV2B,6jTAAxB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport NumberControl from '../../number-control';\nimport { COLORS, reduceMotion, rtl } from '../../utils';\nimport { space } from '../../ui/utils/space';\n\nimport type {\n\tRangeMarkProps,\n\tRailProps,\n\tThumbProps,\n\tTooltipProps,\n\tTrackProps,\n\tWrapperProps,\n} from '../types';\n\nconst rangeHeightValue = 30;\nconst railHeight = 4;\nconst rangeHeight = () =>\n\tcss( { height: rangeHeightValue, minHeight: rangeHeightValue } );\nconst thumbSize = 12;\n\nexport const Root = styled.div`\n\t-webkit-tap-highlight-color: transparent;\n\talign-items: flex-start;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n`;\n\nconst wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>\n\tcss( { color } );\n\nconst wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\treturn css( { marginBottom: marks ? 16 : undefined } );\n\t}\n\treturn '';\n};\n\nexport const Wrapper = styled.div< WrapperProps >`\n\tdisplay: block;\n\tflex: 1;\n\tposition: relative;\n\twidth: 100%;\n\n\t${ wrapperColor };\n\t${ rangeHeight };\n\t${ wrapperMargin };\n`;\n\nexport const BeforeIconWrapper = styled.span`\n\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 6 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor }: RailProps ) => {\n\tlet background = railColor || '';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.ui.backgroundDisabled;\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.gray[ 300 ] };\n\tleft: 0;\n\tpointer-events: none;\n\tright: 0;\n\tdisplay: block;\n\theight: ${ railHeight }px;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\tborder-radius: ${ railHeight }px;\n\n\t${ railBackgroundColor };\n`;\n\nconst trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {\n\tlet background = trackColor || 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ railHeight }px;\n\theight: ${ railHeight }px;\n\tpointer-events: none;\n\tdisplay: block;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\n\t${ trackBackgroundColor };\n`;\n\nexport const MarksWrapper = styled.span`\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled }: RangeMarkProps ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\n\theight: ${ thumbSize }px;\n\tleft: 0;\n\tposition: absolute;\n\ttop: -4px;\n\twidth: 1px;\n\n\t${ markFill };\n`;\n\nconst markLabelFill = ( { isFilled }: RangeMarkProps ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.gray[ 700 ] : COLORS.gray[ 300 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tcolor: ${ COLORS.gray[ 300 ] };\n\tleft: 0;\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 12px;\n\ttransform: translateX( -50% );\n\twhite-space: nowrap;\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled }: ThumbProps ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.gray[ 400 ] };\n\t\t  `\n\t\t: css`\n\t\t\t\tbackground-color: ${ COLORS.ui.theme };\n\t\t  `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\n\tdisplay: flex;\n\theight: ${ thumbSize }px;\n\tjustify-content: center;\n\tmargin-top: ${ ( rangeHeightValue - thumbSize ) / 2 }px;\n\toutline: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 0;\n\tuser-select: none;\n\twidth: ${ thumbSize }px;\n\tborder-radius: 50%;\n\n\t${ thumbColor };\n\t${ rtl( { marginLeft: -10 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( 4.5px )' },\n\t\t{ transform: 'translateX( -4.5px )' }\n\t) };\n`;\n\nconst thumbFocus = ( { isFocused }: ThumbProps ) => {\n\treturn isFocused\n\t\t? css`\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: ' ';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tbackground-color: ${ COLORS.ui.theme };\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\theight: ${ thumbSize + 8 }px;\n\t\t\t\t\twidth: ${ thumbSize + 8 }px;\n\t\t\t\t\ttop: -4px;\n\t\t\t\t\tleft: -4px;\n\t\t\t\t}\n\t\t  `\n\t\t: '';\n};\n\nexport const Thumb = styled.span< ThumbProps >`\n\talign-items: center;\n\tborder-radius: 50%;\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\n\t${ thumbColor };\n\t${ thumbFocus };\n`;\n\nexport const InputRange = styled.input`\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0 -${ thumbSize / 2 }px;\n\topacity: 0;\n\toutline: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: calc( 100% + ${ thumbSize }px );\n`;\n\nconst tooltipShow = ( { show }: TooltipProps ) => {\n\treturn css( {\n\t\topacity: show ? 1 : 0,\n\t} );\n};\n\nconst tooltipPosition = ( { position }: TooltipProps ) => {\n\tconst isBottom = position === 'bottom';\n\n\tif ( isBottom ) {\n\t\treturn css`\n\t\t\tbottom: -80%;\n\t\t`;\n\t}\n\n\treturn css`\n\t\ttop: -80%;\n\t`;\n};\n\nexport const Tooltip = styled.span< TooltipProps >`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\topacity: 0;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: opacity 120ms ease;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\n\t${ reduceMotion( 'transition' ) };\n\t${ rtl(\n\t\t{ transform: 'translateX(-50%)' },\n\t\t{ transform: 'translateX(50%)' }\n\t) }\n`;\n\n// @todo: Refactor RangeControl with latest HStack configuration\n// @wordpress/components/ui/hstack.\nexport const InputNumber = styled( NumberControl )`\n\tdisplay: inline-block;\n\tfont-size: 13px;\n\tmargin-top: 0;\n\twidth: ${ space( 16 ) } !important;\n\n\tinput[type='number']& {\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: `${ space( 4 ) } !important` } ) }\n`;\n\nexport const ActionRightWrapper = styled.span`\n\tdisplay: block;\n\tmargin-top: 0;\n\n\tbutton,\n\tbutton.is-small {\n\t\tmargin-left: 0;\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: 8 } ) }\n`;\n"]}

package/build/snackbar/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Snackbar = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -17,7 +17,7 @@ var _i18n = require("@wordpress/i18n");
 
 var _warning = _interopRequireDefault(require("@wordpress/warning"));
 
-var _ = require("../");
+var _button = _interopRequireDefault(require("../button"));
 
 /**
  * External dependencies
@@ -30,17 +30,13 @@ var _ = require("../");
 /**
  * Internal dependencies
  */
-const noop = () => {};
-
 const NOTICE_TIMEOUT = 10000;
-/** @typedef {import('@wordpress/element').WPElement} WPElement */
-
 /**
  * Custom hook which announces the message with the given politeness, if a
  * valid message is provided.
  *
- * @param {string|WPElement}     [message]  Message to announce.
- * @param {'polite'|'assertive'} politeness Politeness to announce.
+ * @param  message    Message to announce.
+ * @param  politeness Politeness to announce.
  */
 
 function useSpokenMessage(message, politeness) {
@@ -52,38 +48,39 @@ function useSpokenMessage(message, politeness) {
   }, [spokenMessage, politeness]);
 }
 
-function Snackbar(_ref, ref) {
+function UnforwardedSnackbar(_ref, ref) {
   let {
     className,
     children,
     spokenMessage = children,
     politeness = 'polite',
     actions = [],
-    onRemove = noop,
+    onRemove,
     icon = null,
     explicitDismiss = false,
     // onDismiss is a callback executed when the snackbar is dismissed.
     // It is distinct from onRemove, which _looks_ like a callback but is
     // actually the function to call to remove the snackbar from the UI.
-    onDismiss = noop,
+    onDismiss,
     listRef
   } = _ref;
-  onDismiss = onDismiss || noop;
 
   function dismissMe(event) {
+    var _listRef$current;
+
     if (event && event.preventDefault) {
       event.preventDefault();
     } // Prevent focus loss by moving it to the list element.
 
 
-    listRef.current.focus();
-    onDismiss();
-    onRemove();
+    listRef === null || listRef === void 0 ? void 0 : (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.focus();
+    onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    onRemove === null || onRemove === void 0 ? void 0 : onRemove();
   }
 
   function onActionClick(event, onClick) {
     event.stopPropagation();
-    onRemove();
+    onRemove === null || onRemove === void 0 ? void 0 : onRemove();
 
     if (onClick) {
       onClick(event);
@@ -95,8 +92,8 @@ function Snackbar(_ref, ref) {
   (0, _element.useEffect)(() => {
     const timeoutHandle = setTimeout(() => {
       if (!explicitDismiss) {
-        onDismiss();
-        onRemove();
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        onRemove === null || onRemove === void 0 ? void 0 : onRemove();
       }
     }, NOTICE_TIMEOUT);
     return () => clearTimeout(timeoutHandle);
@@ -118,10 +115,10 @@ function Snackbar(_ref, ref) {
   return (0, _element.createElement)("div", {
     ref: ref,
     className: classes,
-    onClick: !explicitDismiss ? dismissMe : noop,
-    tabIndex: "0",
+    onClick: !explicitDismiss ? dismissMe : undefined,
+    tabIndex: 0,
     role: !explicitDismiss ? 'button' : '',
-    onKeyPress: !explicitDismiss ? dismissMe : noop,
+    onKeyPress: !explicitDismiss ? dismissMe : undefined,
     "aria-label": !explicitDismiss ? (0, _i18n.__)('Dismiss this notice') : ''
   }, (0, _element.createElement)("div", {
     className: snackbarContentClassnames
@@ -133,7 +130,7 @@ function Snackbar(_ref, ref) {
       onClick,
       url
     } = _ref2;
-    return (0, _element.createElement)(_.Button, {
+    return (0, _element.createElement)(_button.default, {
       key: index,
       href: url,
       variant: "tertiary",
@@ -143,14 +140,28 @@ function Snackbar(_ref, ref) {
   }), explicitDismiss && (0, _element.createElement)("span", {
     role: "button",
     "aria-label": "Dismiss this notice",
-    tabIndex: "0",
+    tabIndex: 0,
     className: "components-snackbar__dismiss-button",
     onClick: dismissMe,
     onKeyPress: dismissMe
   }, "\u2715")));
 }
+/**
+ * A Snackbar displays a succinct message that is cleared out after a small delay.
+ *
+ * It can also offer the user options, like viewing a published post.
+ * But these options should also be available elsewhere in the UI.
+ *
+ * ```jsx
+ * const MySnackbarNotice = () => (
+ *   <Snackbar>Post published successfully.</Snackbar>
+ * );
+ * ```
+ */
 
-var _default = (0, _element.forwardRef)(Snackbar);
 
+const Snackbar = (0, _element.forwardRef)(UnforwardedSnackbar);
+exports.Snackbar = Snackbar;
+var _default = Snackbar;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/build/snackbar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/snackbar/index.js"],"names":["noop","NOTICE_TIMEOUT","useSpokenMessage","message","politeness","spokenMessage","Snackbar","ref","className","children","actions","onRemove","icon","explicitDismiss","onDismiss","listRef","dismissMe","event","preventDefault","current","focus","onActionClick","onClick","stopPropagation","timeoutHandle","setTimeout","clearTimeout","classes","length","snackbarContentClassnames","map","index","label","url"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../';\n\nconst noop = () => {};\nconst NOTICE_TIMEOUT = 10000;\n\n/** @typedef {import('@wordpress/element').WPElement} WPElement */\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param {string|WPElement}     [message]  Message to announce.\n * @param {'polite'|'assertive'} politeness Politeness to announce.\n */\nfunction useSpokenMessage( message, politeness ) {\n\tconst spokenMessage =\n\t\ttypeof message === 'string' ? message : renderToString( message );\n\n\tuseEffect( () => {\n\t\tif ( spokenMessage ) {\n\t\t\tspeak( spokenMessage, politeness );\n\t\t}\n\t}, [ spokenMessage, politeness ] );\n}\n\nfunction Snackbar(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tspokenMessage = children,\n\t\tpoliteness = 'polite',\n\t\tactions = [],\n\t\tonRemove = noop,\n\t\ticon = null,\n\t\texplicitDismiss = false,\n\t\t// onDismiss is a callback executed when the snackbar is dismissed.\n\t\t// It is distinct from onRemove, which _looks_ like a callback but is\n\t\t// actually the function to call to remove the snackbar from the UI.\n\t\tonDismiss = noop,\n\t\tlistRef,\n\t},\n\tref\n) {\n\tonDismiss = onDismiss || noop;\n\n\tfunction dismissMe( event ) {\n\t\tif ( event && event.preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\t// Prevent focus loss by moving it to the list element.\n\t\tlistRef.current.focus();\n\n\t\tonDismiss();\n\t\tonRemove();\n\t}\n\n\tfunction onActionClick( event, onClick ) {\n\t\tevent.stopPropagation();\n\n\t\tonRemove();\n\n\t\tif ( onClick ) {\n\t\t\tonClick( event );\n\t\t}\n\t}\n\n\tuseSpokenMessage( spokenMessage, politeness );\n\n\t// Only set up the timeout dismiss if we're not explicitly dismissing.\n\tuseEffect( () => {\n\t\tconst timeoutHandle = setTimeout( () => {\n\t\t\tif ( ! explicitDismiss ) {\n\t\t\t\tonDismiss();\n\t\t\t\tonRemove();\n\t\t\t}\n\t\t}, NOTICE_TIMEOUT );\n\n\t\treturn () => clearTimeout( timeoutHandle );\n\t}, [ onDismiss, onRemove, explicitDismiss ] );\n\n\tconst classes = classnames( className, 'components-snackbar', {\n\t\t'components-snackbar-explicit-dismiss': !! explicitDismiss,\n\t} );\n\tif ( actions && actions.length > 1 ) {\n\t\t// We need to inform developers that snackbar only accepts 1 action.\n\t\twarning(\n\t\t\t'Snackbar can only have 1 action, use Notice if your message require many messages'\n\t\t);\n\t\t// return first element only while keeping it inside an array\n\t\tactions = [ actions[ 0 ] ];\n\t}\n\n\tconst snackbarContentClassnames = classnames(\n\t\t'components-snackbar__content',\n\t\t{\n\t\t\t'components-snackbar__content-with-icon': !! icon,\n\t\t}\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classes }\n\t\t\tonClick={ ! explicitDismiss ? dismissMe : noop }\n\t\t\ttabIndex=\"0\"\n\t\t\trole={ ! explicitDismiss ? 'button' : '' }\n\t\t\tonKeyPress={ ! explicitDismiss ? dismissMe : noop }\n\t\t\taria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }\n\t\t>\n\t\t\t<div className={ snackbarContentClassnames }>\n\t\t\t\t{ icon && (\n\t\t\t\t\t<div className=\"components-snackbar__icon\">{ icon }</div>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ actions.map( ( { label, onClick, url }, index ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\thref={ url }\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ ( event ) =>\n\t\t\t\t\t\t\t\tonActionClick( event, onClick )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclassName=\"components-snackbar__action\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ explicitDismiss && (\n\t\t\t\t\t<span\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\taria-label=\"Dismiss this notice\"\n\t\t\t\t\t\ttabIndex=\"0\"\n\t\t\t\t\t\tclassName=\"components-snackbar__dismiss-button\"\n\t\t\t\t\t\tonClick={ dismissMe }\n\t\t\t\t\t\tonKeyPress={ dismissMe }\n\t\t\t\t\t>\n\t\t\t\t\t\t&#x2715;\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( Snackbar );\n"]}
+{"version":3,"sources":["@wordpress/components/src/snackbar/index.tsx"],"names":["NOTICE_TIMEOUT","useSpokenMessage","message","politeness","spokenMessage","UnforwardedSnackbar","ref","className","children","actions","onRemove","icon","explicitDismiss","onDismiss","listRef","dismissMe","event","preventDefault","current","focus","onActionClick","onClick","stopPropagation","timeoutHandle","setTimeout","clearTimeout","classes","length","snackbarContentClassnames","undefined","map","index","label","url","Snackbar"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { NoticeAction, SnackbarProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst NOTICE_TIMEOUT = 10000;\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param  message    Message to announce.\n * @param  politeness Politeness to announce.\n */\nfunction useSpokenMessage(\n\tmessage: SnackbarProps[ 'spokenMessage' ],\n\tpoliteness: NonNullable< SnackbarProps[ 'politeness' ] >\n) {\n\tconst spokenMessage =\n\t\ttypeof message === 'string' ? message : renderToString( message );\n\n\tuseEffect( () => {\n\t\tif ( spokenMessage ) {\n\t\t\tspeak( spokenMessage, politeness );\n\t\t}\n\t}, [ spokenMessage, politeness ] );\n}\n\nfunction UnforwardedSnackbar(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tspokenMessage = children,\n\t\tpoliteness = 'polite',\n\t\tactions = [],\n\t\tonRemove,\n\t\ticon = null,\n\t\texplicitDismiss = false,\n\t\t// onDismiss is a callback executed when the snackbar is dismissed.\n\t\t// It is distinct from onRemove, which _looks_ like a callback but is\n\t\t// actually the function to call to remove the snackbar from the UI.\n\t\tonDismiss,\n\t\tlistRef,\n\t}: WordPressComponentProps< SnackbarProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tfunction dismissMe( event: KeyboardEvent | MouseEvent ) {\n\t\tif ( event && event.preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\t// Prevent focus loss by moving it to the list element.\n\t\tlistRef?.current?.focus();\n\n\t\tonDismiss?.();\n\t\tonRemove?.();\n\t}\n\n\tfunction onActionClick(\n\t\tevent: MouseEvent,\n\t\tonClick: NoticeAction[ 'onClick' ]\n\t) {\n\t\tevent.stopPropagation();\n\n\t\tonRemove?.();\n\n\t\tif ( onClick ) {\n\t\t\tonClick( event );\n\t\t}\n\t}\n\n\tuseSpokenMessage( spokenMessage, politeness );\n\n\t// Only set up the timeout dismiss if we're not explicitly dismissing.\n\tuseEffect( () => {\n\t\tconst timeoutHandle = setTimeout( () => {\n\t\t\tif ( ! explicitDismiss ) {\n\t\t\t\tonDismiss?.();\n\t\t\t\tonRemove?.();\n\t\t\t}\n\t\t}, NOTICE_TIMEOUT );\n\n\t\treturn () => clearTimeout( timeoutHandle );\n\t}, [ onDismiss, onRemove, explicitDismiss ] );\n\n\tconst classes = classnames( className, 'components-snackbar', {\n\t\t'components-snackbar-explicit-dismiss': !! explicitDismiss,\n\t} );\n\tif ( actions && actions.length > 1 ) {\n\t\t// We need to inform developers that snackbar only accepts 1 action.\n\t\twarning(\n\t\t\t'Snackbar can only have 1 action, use Notice if your message require many messages'\n\t\t);\n\t\t// return first element only while keeping it inside an array\n\t\tactions = [ actions[ 0 ] ];\n\t}\n\n\tconst snackbarContentClassnames = classnames(\n\t\t'components-snackbar__content',\n\t\t{\n\t\t\t'components-snackbar__content-with-icon': !! icon,\n\t\t}\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classes }\n\t\t\tonClick={ ! explicitDismiss ? dismissMe : undefined }\n\t\t\ttabIndex={ 0 }\n\t\t\trole={ ! explicitDismiss ? 'button' : '' }\n\t\t\tonKeyPress={ ! explicitDismiss ? dismissMe : undefined }\n\t\t\taria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }\n\t\t>\n\t\t\t<div className={ snackbarContentClassnames }>\n\t\t\t\t{ icon && (\n\t\t\t\t\t<div className=\"components-snackbar__icon\">{ icon }</div>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ actions.map( ( { label, onClick, url }, index ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\thref={ url }\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ ( event: MouseEvent ) =>\n\t\t\t\t\t\t\t\tonActionClick( event, onClick )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclassName=\"components-snackbar__action\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ explicitDismiss && (\n\t\t\t\t\t<span\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\taria-label=\"Dismiss this notice\"\n\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\tclassName=\"components-snackbar__dismiss-button\"\n\t\t\t\t\t\tonClick={ dismissMe }\n\t\t\t\t\t\tonKeyPress={ dismissMe }\n\t\t\t\t\t>\n\t\t\t\t\t\t&#x2715;\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n/**\n * A Snackbar displays a succinct message that is cleared out after a small delay.\n *\n * It can also offer the user options, like viewing a published post.\n * But these options should also be available elsewhere in the UI.\n *\n * ```jsx\n * const MySnackbarNotice = () => (\n *   <Snackbar>Post published successfully.</Snackbar>\n * );\n * ```\n */\nexport const Snackbar = forwardRef( UnforwardedSnackbar );\n\nexport default Snackbar;\n"]}

package/build/snackbar/list.js

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.SnackbarList = SnackbarList;
 exports.default = void 0;
 
 var _element = require("@wordpress/element");
@@ -15,7 +16,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _compose = require("@wordpress/compose");
 
-var _ = _interopRequireDefault(require("./"));
+var _ = _interopRequireDefault(require("."));
 
 var _animation = require("../animation");
 
@@ -30,8 +31,6 @@ var _animation = require("../animation");
 /**
  * Internal dependencies
  */
-const noop = () => {};
-
 const SNACKBAR_VARIANTS = {
   init: {
     height: 0,
@@ -54,21 +53,17 @@ const SNACKBAR_VARIANTS = {
     }
   }
 };
-const SNACKBAR_REDUCE_MOTION_VARIANTS = {
-  init: false,
-  open: false,
-  exit: false
-};
 /**
  * Renders a list of notices.
  *
- * @param {Object}   $0           Props passed to the component.
- * @param {Array}    $0.notices   Array of notices to render.
- * @param {Function} $0.onRemove  Function called when a notice should be removed / dismissed.
- * @param {Object}   $0.className Name of the class used by the component.
- * @param {Object}   $0.children  Array of children to be rendered inside the notice list.
- *
- * @return {Object} The rendered notices list.
+ * ```jsx
+ * const MySnackbarListNotice = () => (
+ *   <SnackbarList
+ *     notices={ notices }
+ *     onRemove={ removeNotice }
+ *   />
+ * );
+ * ```
  */
 
 function SnackbarList(_ref) {
@@ -76,13 +71,13 @@ function SnackbarList(_ref) {
     notices,
     className,
     children,
-    onRemove = noop
+    onRemove
   } = _ref;
-  const listRef = (0, _element.useRef)();
+  const listRef = (0, _element.useRef)(null);
   const isReducedMotion = (0, _compose.useReducedMotion)();
   className = (0, _classnames.default)('components-snackbar-list', className);
 
-  const removeNotice = notice => () => onRemove(notice.id);
+  const removeNotice = notice => () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(notice.id);
 
   return (0, _element.createElement)("div", {
     className: className,
@@ -100,7 +95,7 @@ function SnackbarList(_ref) {
       animate: 'open',
       exit: 'exit',
       key: notice.id,
-      variants: isReducedMotion ? SNACKBAR_REDUCE_MOTION_VARIANTS : SNACKBAR_VARIANTS
+      variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS
     }, (0, _element.createElement)("div", {
       className: "components-snackbar-list__notice-container"
     }, (0, _element.createElement)(_.default, (0, _extends2.default)({}, restNotice, {

package/build/snackbar/list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/snackbar/list.js"],"names":["noop","SNACKBAR_VARIANTS","init","height","opacity","open","transition","stiffness","velocity","exit","duration","SNACKBAR_REDUCE_MOTION_VARIANTS","SnackbarList","notices","className","children","onRemove","listRef","isReducedMotion","removeNotice","notice","id","map","content","restNotice"],"mappings":";;;;;;;;;AASA;;;;AANA;;AAKA;;AAMA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAOA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AACA,MAAMC,iBAAiB,GAAG;AACzBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,MAAM,EAAE,CADH;AAELC,IAAAA,OAAO,EAAE;AAFJ,GADmB;AAKzBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,MAAM,EAAE,MADH;AAELC,IAAAA,OAAO,EAAE,CAFJ;AAGLE,IAAAA,UAAU,EAAE;AACXH,MAAAA,MAAM,EAAE;AAAEI,QAAAA,SAAS,EAAE,IAAb;AAAmBC,QAAAA,QAAQ,EAAE,CAAC;AAA9B;AADG;AAHP,GALmB;AAYzBC,EAAAA,IAAI,EAAE;AACLL,IAAAA,OAAO,EAAE,CADJ;AAELE,IAAAA,UAAU,EAAE;AACXI,MAAAA,QAAQ,EAAE;AADC;AAFP;AAZmB,CAA1B;AAoBA,MAAMC,+BAA+B,GAAG;AACvCT,EAAAA,IAAI,EAAE,KADiC;AAEvCG,EAAAA,IAAI,EAAE,KAFiC;AAGvCI,EAAAA,IAAI,EAAE;AAHiC,CAAxC;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASG,YAAT,OAA2E;AAAA,MAApD;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,SAAX;AAAsBC,IAAAA,QAAtB;AAAgCC,IAAAA,QAAQ,GAAGhB;AAA3C,GAAoD;AAC1E,QAAMiB,OAAO,GAAG,sBAAhB;AACA,QAAMC,eAAe,GAAG,gCAAxB;AACAJ,EAAAA,SAAS,GAAG,yBAAY,0BAAZ,EAAwCA,SAAxC,CAAZ;;AACA,QAAMK,YAAY,GAAKC,MAAF,IAAc,MAAMJ,QAAQ,CAAEI,MAAM,CAACC,EAAT,CAAjD;;AACA,SACC;AAAK,IAAA,SAAS,EAAGP,SAAjB;AAA6B,IAAA,QAAQ,EAAG,CAAC,CAAzC;AAA6C,IAAA,GAAG,EAAGG;AAAnD,KACGF,QADH,EAEC,4BAAC,oCAAD,QACGF,OAAO,CAACS,GAAR,CAAeF,MAAF,IAAc;AAC5B,UAAM;AAAEG,MAAAA,OAAF;AAAW,SAAGC;AAAd,QAA6BJ,MAAnC;AAEA,WACC,4BAAC,2BAAD,CAAQ,GAAR;AACC,MAAA,MAAM,EAAG,CAAEF,eADZ,CAC8B;AAD9B;AAEC,MAAA,OAAO,EAAG,MAFX;AAGC,MAAA,OAAO,EAAG,MAHX;AAIC,MAAA,IAAI,EAAG,MAJR;AAKC,MAAA,GAAG,EAAGE,MAAM,CAACC,EALd;AAMC,MAAA,QAAQ,EACPH,eAAe,GACZP,+BADY,GAEZV;AATL,OAYC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,4BAAC,SAAD,6BACMuB,UADN;AAEC,MAAA,QAAQ,EAAGL,YAAY,CAAEC,MAAF,CAFxB;AAGC,MAAA,OAAO,EAAGH;AAHX,QAKGG,MAAM,CAACG,OALV,CADD,CAZD,CADD;AAwBA,GA3BC,CADH,CAFD,CADD;AAmCA;;eAEcX,Y","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Snackbar from './';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '../animation';\n\nconst noop = () => {};\nconst SNACKBAR_VARIANTS = {\n\tinit: {\n\t\theight: 0,\n\t\topacity: 0,\n\t},\n\topen: {\n\t\theight: 'auto',\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\theight: { stiffness: 1000, velocity: -100 },\n\t\t},\n\t},\n\texit: {\n\t\topacity: 0,\n\t\ttransition: {\n\t\t\tduration: 0.5,\n\t\t},\n\t},\n};\n\nconst SNACKBAR_REDUCE_MOTION_VARIANTS = {\n\tinit: false,\n\topen: false,\n\texit: false,\n};\n\n/**\n * Renders a list of notices.\n *\n * @param {Object}   $0           Props passed to the component.\n * @param {Array}    $0.notices   Array of notices to render.\n * @param {Function} $0.onRemove  Function called when a notice should be removed / dismissed.\n * @param {Object}   $0.className Name of the class used by the component.\n * @param {Object}   $0.children  Array of children to be rendered inside the notice list.\n *\n * @return {Object} The rendered notices list.\n */\nfunction SnackbarList( { notices, className, children, onRemove = noop } ) {\n\tconst listRef = useRef();\n\tconst isReducedMotion = useReducedMotion();\n\tclassName = classnames( 'components-snackbar-list', className );\n\tconst removeNotice = ( notice ) => () => onRemove( notice.id );\n\treturn (\n\t\t<div className={ className } tabIndex={ -1 } ref={ listRef }>\n\t\t\t{ children }\n\t\t\t<AnimatePresence>\n\t\t\t\t{ notices.map( ( notice ) => {\n\t\t\t\t\tconst { content, ...restNotice } = notice;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tlayout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations\n\t\t\t\t\t\t\tinitial={ 'init' }\n\t\t\t\t\t\t\tanimate={ 'open' }\n\t\t\t\t\t\t\texit={ 'exit' }\n\t\t\t\t\t\t\tkey={ notice.id }\n\t\t\t\t\t\t\tvariants={\n\t\t\t\t\t\t\t\tisReducedMotion\n\t\t\t\t\t\t\t\t\t? SNACKBAR_REDUCE_MOTION_VARIANTS\n\t\t\t\t\t\t\t\t\t: SNACKBAR_VARIANTS\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"components-snackbar-list__notice-container\">\n\t\t\t\t\t\t\t\t<Snackbar\n\t\t\t\t\t\t\t\t\t{ ...restNotice }\n\t\t\t\t\t\t\t\t\tonRemove={ removeNotice( notice ) }\n\t\t\t\t\t\t\t\t\tlistRef={ listRef }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ notice.content }\n\t\t\t\t\t\t\t\t</Snackbar>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n\nexport default SnackbarList;\n"]}
+{"version":3,"sources":["@wordpress/components/src/snackbar/list.tsx"],"names":["SNACKBAR_VARIANTS","init","height","opacity","open","transition","stiffness","velocity","exit","duration","SnackbarList","notices","className","children","onRemove","listRef","isReducedMotion","removeNotice","notice","id","map","content","restNotice","undefined"],"mappings":";;;;;;;;;;AASA;;;;AANA;;AAKA;;AAMA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AASA,MAAMA,iBAAiB,GAAG;AACzBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,MAAM,EAAE,CADH;AAELC,IAAAA,OAAO,EAAE;AAFJ,GADmB;AAKzBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,MAAM,EAAE,MADH;AAELC,IAAAA,OAAO,EAAE,CAFJ;AAGLE,IAAAA,UAAU,EAAE;AACXH,MAAAA,MAAM,EAAE;AAAEI,QAAAA,SAAS,EAAE,IAAb;AAAmBC,QAAAA,QAAQ,EAAE,CAAC;AAA9B;AADG;AAHP,GALmB;AAYzBC,EAAAA,IAAI,EAAE;AACLL,IAAAA,OAAO,EAAE,CADJ;AAELE,IAAAA,UAAU,EAAE;AACXI,MAAAA,QAAQ,EAAE;AADC;AAFP;AAZmB,CAA1B;AAoBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,YAAT,OAKkD;AAAA,MAL3B;AAC7BC,IAAAA,OAD6B;AAE7BC,IAAAA,SAF6B;AAG7BC,IAAAA,QAH6B;AAI7BC,IAAAA;AAJ6B,GAK2B;AACxD,QAAMC,OAAO,GAAG,qBAAiC,IAAjC,CAAhB;AACA,QAAMC,eAAe,GAAG,gCAAxB;AACAJ,EAAAA,SAAS,GAAG,yBAAY,0BAAZ,EAAwCA,SAAxC,CAAZ;;AACA,QAAMK,YAAY,GAAKC,MAAF,IAAsB,MAAMJ,QAAN,aAAMA,QAAN,uBAAMA,QAAQ,CAAII,MAAM,CAACC,EAAX,CAAzD;;AACA,SACC;AAAK,IAAA,SAAS,EAAGP,SAAjB;AAA6B,IAAA,QAAQ,EAAG,CAAC,CAAzC;AAA6C,IAAA,GAAG,EAAGG;AAAnD,KACGF,QADH,EAEC,4BAAC,oCAAD,QACGF,OAAO,CAACS,GAAR,CAAeF,MAAF,IAAc;AAC5B,UAAM;AAAEG,MAAAA,OAAF;AAAW,SAAGC;AAAd,QAA6BJ,MAAnC;AAEA,WACC,4BAAC,2BAAD,CAAQ,GAAR;AACC,MAAA,MAAM,EAAG,CAAEF,eADZ,CAC8B;AAD9B;AAEC,MAAA,OAAO,EAAG,MAFX;AAGC,MAAA,OAAO,EAAG,MAHX;AAIC,MAAA,IAAI,EAAG,MAJR;AAKC,MAAA,GAAG,EAAGE,MAAM,CAACC,EALd;AAMC,MAAA,QAAQ,EACPH,eAAe,GAAGO,SAAH,GAAevB;AAPhC,OAUC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,4BAAC,SAAD,6BACMsB,UADN;AAEC,MAAA,QAAQ,EAAGL,YAAY,CAAEC,MAAF,CAFxB;AAGC,MAAA,OAAO,EAAGH;AAHX,QAKGG,MAAM,CAACG,OALV,CADD,CAVD,CADD;AAsBA,GAzBC,CADH,CAFD,CADD;AAiCA;;eAEcX,Y","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Snackbar from '.';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '../animation';\nimport type { Notice, SnackbarListProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst SNACKBAR_VARIANTS = {\n\tinit: {\n\t\theight: 0,\n\t\topacity: 0,\n\t},\n\topen: {\n\t\theight: 'auto',\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\theight: { stiffness: 1000, velocity: -100 },\n\t\t},\n\t},\n\texit: {\n\t\topacity: 0,\n\t\ttransition: {\n\t\t\tduration: 0.5,\n\t\t},\n\t},\n};\n\n/**\n * Renders a list of notices.\n *\n * ```jsx\n * const MySnackbarListNotice = () => (\n *   <SnackbarList\n *     notices={ notices }\n *     onRemove={ removeNotice }\n *   />\n * );\n * ```\n */\nexport function SnackbarList( {\n\tnotices,\n\tclassName,\n\tchildren,\n\tonRemove,\n}: WordPressComponentProps< SnackbarListProps, 'div' > ) {\n\tconst listRef = useRef< HTMLDivElement | null >( null );\n\tconst isReducedMotion = useReducedMotion();\n\tclassName = classnames( 'components-snackbar-list', className );\n\tconst removeNotice = ( notice: Notice ) => () => onRemove?.( notice.id );\n\treturn (\n\t\t<div className={ className } tabIndex={ -1 } ref={ listRef }>\n\t\t\t{ children }\n\t\t\t<AnimatePresence>\n\t\t\t\t{ notices.map( ( notice ) => {\n\t\t\t\t\tconst { content, ...restNotice } = notice;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tlayout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations\n\t\t\t\t\t\t\tinitial={ 'init' }\n\t\t\t\t\t\t\tanimate={ 'open' }\n\t\t\t\t\t\t\texit={ 'exit' }\n\t\t\t\t\t\t\tkey={ notice.id }\n\t\t\t\t\t\t\tvariants={\n\t\t\t\t\t\t\t\tisReducedMotion ? undefined : SNACKBAR_VARIANTS\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"components-snackbar-list__notice-container\">\n\t\t\t\t\t\t\t\t<Snackbar\n\t\t\t\t\t\t\t\t\t{ ...restNotice }\n\t\t\t\t\t\t\t\t\tonRemove={ removeNotice( notice ) }\n\t\t\t\t\t\t\t\t\tlistRef={ listRef }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ notice.content }\n\t\t\t\t\t\t\t\t</Snackbar>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n\nexport default SnackbarList;\n"]}

package/build/snackbar/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/build/snackbar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build/spinner/styles.js

@@ -28,7 +28,7 @@ const StyledSpinner = (0, _base.default)("svg", process.env.NODE_ENV === "produc
 } : {
   target: "ea4tfvq2",
   label: "StyledSpinner"
-})("width:", _utils.CONFIG.spinnerSize, "px;height:", _utils.CONFIG.spinnerSize, "px;display:inline-block;margin:5px 11px 0;position:relative;color:var( --wp-admin-theme-color );overflow:visible;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0J1QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6IHZhciggLS13cC1hZG1pbi10aGVtZS1jb2xvciApO1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
+})("width:", _utils.CONFIG.spinnerSize, "px;height:", _utils.CONFIG.spinnerSize, "px;display:inline-block;margin:5px 11px 0;position:relative;color:", _utils.COLORS.ui.theme, ";overflow:visible;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0J1QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
 exports.StyledSpinner = StyledSpinner;
 const commonPathProps = process.env.NODE_ENV === "production" ? {
   name: "9s4963",
@@ -36,7 +36,7 @@ const commonPathProps = process.env.NODE_ENV === "production" ? {
 } : {
   name: "o2zng0-commonPathProps",
   styles: "fill:transparent;stroke-width:1.5px;label:commonPathProps;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEIyQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6IHZhciggLS13cC1hZG1pbi10aGVtZS1jb2xvciApO1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEIyQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 const SpinnerTrack = (0, _base.default)("circle", process.env.NODE_ENV === "production" ? {
@@ -44,13 +44,13 @@ const SpinnerTrack = (0, _base.default)("circle", process.env.NODE_ENV === "prod
 } : {
   target: "ea4tfvq1",
   label: "SpinnerTrack"
-})(commonPathProps, ";stroke:", _utils.COLORS.gray[300], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUN5QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6IHZhciggLS13cC1hZG1pbi10aGVtZS1jb2xvciApO1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
+})(commonPathProps, ";stroke:", _utils.COLORS.gray[300], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUN5QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
 exports.SpinnerTrack = SpinnerTrack;
 const SpinnerIndicator = (0, _base.default)("path", process.env.NODE_ENV === "production" ? {
   target: "ea4tfvq0"
 } : {
   target: "ea4tfvq0",
   label: "SpinnerIndicator"
-})(commonPathProps, ";stroke:currentColor;stroke-linecap:round;transform-origin:50% 50%;animation:1.4s linear infinite both ", spinAnimation, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0MyQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6IHZhciggLS13cC1hZG1pbi10aGVtZS1jb2xvciApO1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
+})(commonPathProps, ";stroke:currentColor;stroke-linecap:round;transform-origin:50% 50%;animation:1.4s linear infinite both ", spinAnimation, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0MyQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
 exports.SpinnerIndicator = SpinnerIndicator;
 //# sourceMappingURL=styles.js.map

package/build/spinner/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/spinner/styles.ts"],"names":["spinAnimation","StyledSpinner","CONFIG","spinnerSize","commonPathProps","SpinnerTrack","COLORS","gray","SpinnerIndicator"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;;;AAEA,MAAMA,aAAa,GAAG,qBAAU;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,EAPA;AASO,MAAMC,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,aACfC,cAAOC,WADQ,gBAEdD,cAAOC,WAFO,yxDAAnB;;AAUP,MAAMC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAArB;AAKO,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,GACrBD,eADqB,cAEbE,cAAOC,IAAP,CAAa,GAAb,CAFa,yqDAAlB;;AAKA,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,GACzBJ,eADyB,6GAKYJ,aALZ,yqDAAtB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\n\nconst spinAnimation = keyframes`\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n `;\n\nexport const StyledSpinner = styled.svg`\n\twidth: ${ CONFIG.spinnerSize }px;\n\theight: ${ CONFIG.spinnerSize }px;\n\tdisplay: inline-block;\n\tmargin: 5px 11px 0;\n\tposition: relative;\n\tcolor: var( --wp-admin-theme-color );\n\toverflow: visible;\n`;\n\nconst commonPathProps = css`\n\tfill: transparent;\n\tstroke-width: 1.5px;\n`;\n\nexport const SpinnerTrack = styled.circle`\n\t${ commonPathProps };\n\tstroke: ${ COLORS.gray[ 300 ] };\n`;\n\nexport const SpinnerIndicator = styled.path`\n\t${ commonPathProps };\n\tstroke: currentColor;\n\tstroke-linecap: round;\n\ttransform-origin: 50% 50%;\n\tanimation: 1.4s linear infinite both ${ spinAnimation };\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/spinner/styles.ts"],"names":["spinAnimation","StyledSpinner","CONFIG","spinnerSize","COLORS","ui","theme","commonPathProps","SpinnerTrack","gray","SpinnerIndicator"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;;;AAEA,MAAMA,aAAa,GAAG,qBAAU;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,EAPA;AASO,MAAMC,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,aACfC,cAAOC,WADQ,gBAEdD,cAAOC,WAFO,wEAMfC,cAAOC,EAAP,CAAUC,KANK,8qDAAnB;;AAUP,MAAMC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAArB;AAKO,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,GACrBD,eADqB,cAEbH,cAAOK,IAAP,CAAa,GAAb,CAFa,6pDAAlB;;AAKA,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,GACzBH,eADyB,6GAKYP,aALZ,6pDAAtB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\n\nconst spinAnimation = keyframes`\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n `;\n\nexport const StyledSpinner = styled.svg`\n\twidth: ${ CONFIG.spinnerSize }px;\n\theight: ${ CONFIG.spinnerSize }px;\n\tdisplay: inline-block;\n\tmargin: 5px 11px 0;\n\tposition: relative;\n\tcolor: ${ COLORS.ui.theme };\n\toverflow: visible;\n`;\n\nconst commonPathProps = css`\n\tfill: transparent;\n\tstroke-width: 1.5px;\n`;\n\nexport const SpinnerTrack = styled.circle`\n\t${ commonPathProps };\n\tstroke: ${ COLORS.gray[ 300 ] };\n`;\n\nexport const SpinnerIndicator = styled.path`\n\t${ commonPathProps };\n\tstroke: currentColor;\n\tstroke-linecap: round;\n\ttransform-origin: 50% 50%;\n\tanimation: 1.4s linear infinite both ${ spinAnimation };\n`;\n"]}

package/build/tab-panel/index.js

@@ -94,6 +94,7 @@ function TabPanel(_ref2) {
     className,
     children,
     tabs,
+    selectOnMove = true,
     initialTabName,
     orientation = 'horizontal',
     activeClass = 'is-active',
@@ -101,13 +102,13 @@ function TabPanel(_ref2) {
   } = _ref2;
   const instanceId = (0, _compose.useInstanceId)(TabPanel, 'tab-panel');
   const [selected, setSelected] = (0, _element.useState)();
-
-  const handleTabSelection = tabKey => {
+  const handleTabSelection = (0, _element.useCallback)(tabKey => {
     setSelected(tabKey);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(tabKey);
-  };
+  }, [onSelect]); // Simulate a click on the newly focused tab, which causes the component
+  // to show the `tab-panel` associated with the clicked tab.
 
-  const onNavigate = (_childIndex, child) => {
+  const activateTabAutomatically = (_childIndex, child) => {
     child.click();
   };
 
@@ -119,13 +120,13 @@ function TabPanel(_ref2) {
     if (!(selectedTab !== null && selectedTab !== void 0 && selectedTab.name) && tabs.length > 0) {
       handleTabSelection(initialTabName || tabs[0].name);
     }
-  }, [tabs, selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name, initialTabName]);
+  }, [tabs, selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name, initialTabName, handleTabSelection]);
   return (0, _element.createElement)("div", {
     className: className
   }, (0, _element.createElement)(_navigableContainer.NavigableMenu, {
     role: "tablist",
     orientation: orientation,
-    onNavigate: onNavigate,
+    onNavigate: selectOnMove ? activateTabAutomatically : undefined,
     className: "components-tab-panel__tabs"
   }, tabs.map(tab => (0, _element.createElement)(TabButton, {
     className: (0, _classnames.default)('components-tab-panel__tabs-item', tab.className, {
@@ -135,8 +136,11 @@ function TabPanel(_ref2) {
     "aria-controls": `${instanceId}-${tab.name}-view`,
     selected: tab.name === selected,
     key: tab.name,
-    onClick: () => handleTabSelection(tab.name)
-  }, tab.title))), selectedTab && (0, _element.createElement)("div", {
+    onClick: () => handleTabSelection(tab.name),
+    label: tab.icon && tab.title,
+    icon: tab.icon,
+    showTooltip: !!tab.icon
+  }, !tab.icon && tab.title))), selectedTab && (0, _element.createElement)("div", {
     key: selectedId,
     "aria-labelledby": selectedId,
     role: "tabpanel",

package/build/tab-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","onNavigate","_childIndex","child","click","selectedTab","name","selectedId","length","map","tab","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { find } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tonClick,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? null : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\tonClick={ onClick }\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = ( tabKey: string ) => {\n\t\tsetSelected( tabKey );\n\t\tonSelect?.( tabKey );\n\t};\n\n\tconst onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = find( tabs, { name: selected } );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tif ( ! selectedTab?.name && tabs.length > 0 ) {\n\t\t\thandleTabSelection( initialTabName || tabs[ 0 ].name );\n\t\t}\n\t}, [ tabs, selectedTab?.name, initialTabName ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={ onNavigate }\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","selectOnMove","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","activateTabAutomatically","_childIndex","child","click","selectedTab","name","selectedId","length","undefined","map","tab","icon","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { find } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useCallback } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tonClick,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? null : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\tonClick={ onClick }\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tselectOnMove = true,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = useCallback(\n\t\t( tabKey: string ) => {\n\t\t\tsetSelected( tabKey );\n\t\t\tonSelect?.( tabKey );\n\t\t},\n\t\t[ onSelect ]\n\t);\n\n\t// Simulate a click on the newly focused tab, which causes the component\n\t// to show the `tab-panel` associated with the clicked tab.\n\tconst activateTabAutomatically = (\n\t\t_childIndex: number,\n\t\tchild: HTMLButtonElement\n\t) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = find( tabs, { name: selected } );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tif ( ! selectedTab?.name && tabs.length > 0 ) {\n\t\t\thandleTabSelection( initialTabName || tabs[ 0 ].name );\n\t\t}\n\t}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={\n\t\t\t\t\tselectOnMove ? activateTabAutomatically : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t\tlabel={ tab.icon && tab.title }\n\t\t\t\t\t\ticon={ tab.icon }\n\t\t\t\t\t\tshowTooltip={ !! tab.icon }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! tab.icon && tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}