npm - @wordpress/components - Versions diffs - 20.0.0 → 21.0.0 - Mend

@wordpress/components 20.0.0 → 21.0.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.

Files changed (1021) hide show

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

	@@ -1 +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","lightGray","Rail","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","darkGray","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,6rTADD;;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,8rTADoB;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,+rTAAP;AACA;;AACD,SAAO,EAAP;AACA,CALD;;AAOO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,yDAMhBV,YANgB,OAOhBL,WAPgB,OAQhBU,aARgB,qoTAAb;;AAWA,MAAMM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,+BAEdjB,UAFc,SAI1B,gBAAK;AAAEkB,EAAAA,WAAW,EAAE;AAAf,CAAL,CAJ0B,qoTAAvB;;AAOA,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,+BAEbnB,UAFa,SAIzB,gBAAK;AAAEoB,EAAAA,UAAU,EAAE;AAAd,CAAL,CAJyB,qoTAAtB;;;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,cAAOiB,SAAP,CAAkB,GAAlB,CAAb;AACA;;AAED,sBAAO,gBAAK;AAAED,IAAAA;AAAF,GAAL,qsTAAP;AACA,CARD;;AAUO,MAAME,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,wBACKlB,cAAOiB,SAAP,CAAkB,GAAlB,CADL,+DAMLzB,UANK,sCAQD,CAAED,gBAAgB,GAAGC,UAArB,IAAoC,CARnC,6BAUEA,UAVF,SAYbqB,mBAZa,qoTAAV;;;AAeP,MAAMM,oBAAoB,GAAG,SAA4C;AAAA,MAA1C;AAAEL,IAAAA,QAAF;AAAYM,IAAAA;AAAZ,GAA0C;AACxE,MAAIJ,UAAU,GAAGI,UAAU,IAAI,cAA/B;;AAEA,MAAKN,QAAL,EAAgB;AACfE,IAAAA,UAAU,GAAGhB,cAAOiB,SAAP,CAAkB,GAAlB,CAAb;AACA;;AAED,sBAAO,gBAAK;AAAED,IAAAA;AAAF,GAAL,ssTAAP;AACA,CARD;;AAUO,MAAMK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,mDAEC7B,UAFD,gBAGNA,UAHM,wEAOF,CAAED,gBAAgB,GAAGC,UAArB,IAAoC,CAPlC,eAUd2B,oBAVc,qoTAAX;;AAaA,MAAMG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;;AAQP,MAAMC,QAAQ,GAAG,SAA8C;AAAA,MAA5C;AAAET,IAAAA,QAAF;AAAYU,IAAAA;AAAZ,GAA4C;AAC9D,MAAIC,eAAe,GAAGD,QAAQ,GAAG,cAAH,GAAoBxB,cAAOiB,SAAP,CAAkB,GAAlB,CAAlD;;AAEA,MAAKH,QAAL,EAAgB;AACfW,IAAAA,eAAe,GAAGzB,cAAOiB,SAAP,CAAkB,GAAlB,CAAlB;AACA;;AAED,sBAAO,gBAAK;AACXQ,IAAAA;AADW,GAAL,0rTAAP;AAGA,CAVD;;AAYO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,cACL9B,SADK,qDAOb2B,QAPa,qoTAAV;;;AAUP,MAAMI,aAAa,GAAG,SAAoC;AAAA,MAAlC;AAAEH,IAAAA;AAAF,GAAkC;AACzD,sBAAO,gBAAK;AACXzB,IAAAA,KAAK,EAAEyB,QAAQ,GAAGxB,cAAO4B,QAAP,CAAiB,GAAjB,CAAH,GAA4B5B,cAAOiB,SAAP,CAAkB,GAAlB;AADhC,GAAL,+rTAAP;AAGA,CAJD;;AAMO,MAAMY,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,aACX7B,cAAOiB,SAAP,CAAkB,GAAlB,CADW,wGASlBU,aATkB,qoTAAf;;;;;;;;;;;;;AAYP,MAAMG,UAAU,GAAG;AAAA,MAAE;AAAEhB,IAAAA;AAAF,GAAF;AAAA,SAClBA,QAAQ,oBACLiB,UADK,uBAEgB/B,cAAOiB,SAAP,CAAkB,GAAlB,CAFhB,4sTADU;AAAA,CAAnB;;AASO,MAAMe,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,qoTAAlB;;;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,6tTAcb,EAdH;AAeA,CAhBD;;AAkBO,MAAMwC,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,gHASdN,UATc,OAUdI,UAVc,qoTAAX;;AAaA,MAAMG,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,uFAMRzC,SAAS,GAAG,CANJ,mFAYCA,SAZD,yoTAAhB;;;AAeP,MAAM0C,WAAW,GAAG,UAA8B;AAAA,MAA5B;AAAEC,IAAAA;AAAF,GAA4B;AACjD,sBAAO,gBAAK;AACXC,IAAAA,OAAO,EAAED,IAAI,GAAG,CAAH,GAAO;AADT,GAAL,6rTAAP;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,qoTAAb,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,qoTAAjB;;AAaA,MAAMmC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,uEAO1BtD,WAP0B,QAU3B,gBAAK;AAAEmB,EAAAA,UAAU,EAAE;AAAd,CAAL,CAV2B,qoTAAxB","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.lightGray[ 400 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.lightGray[ 600 ] };\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.lightGray[ 800 ];\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.lightGray[ 600 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.lightGray[ 800 ];\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.darkGray[ 300 ] : COLORS.lightGray[ 600 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tcolor: ${ COLORS.lightGray[ 600 ] };\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.lightGray[ 800 ] };\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"]}
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":"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","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"]}

package/build/sandbox/index.js CHANGED Viewed

@@ -76,14 +76,14 @@ const style = `
 	}
 	html,
 	body,
-	body > div,
-	body > div iframe {
+	body > div {
 		width: 100%;
 	}
 	html.wp-has-aspect-ratio,
 	body.wp-has-aspect-ratio,
 	body.wp-has-aspect-ratio > div,
 	body.wp-has-aspect-ratio > div iframe {
+		width: 100%;
 		height: 100%;
 		overflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */
 	}

package/build/sandbox/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/sandbox/index.js"],"names":["observeAndResizeJS","style","Sandbox","html","title","type","styles","scripts","onFocus","ref","width","setWidth","height","setHeight","isFrameAccessible","current","contentDocument","body","e","trySandbox","forceRerender","ownerDocument","getAttribute","htmlDoc","documentElement","lang","__html","map","rules","i","src","open","write","close","tryNoForceSandbox","checkMessageForResize","event","iframe","contentWindow","source","data","JSON","parse","action","defaultView","addEventListener","removeEventListener","Math","ceil"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\trenderToString,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useFocusableIframe, useMergeRefs } from '@wordpress/compose';\n\nconst observeAndResizeJS = `\n\t( function() {\n\t\tvar observer;\n\n\t\tif ( ! window.MutationObserver \|\| ! document.body \|\| ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tvar clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\twindow.parent.postMessage( {\n\t\t\t\taction: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n\t\t\t}, '' );\n\t\t}\n\n\t\tobserver = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {\n\t\t\t\t\tif ( /^\\\\d+(vmin\|vmax\|vh\|vw)$/.test( ruleOrNode.style[ style ] ) ) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );\n\t\tArray.prototype.forEach.call( document.styleSheets, function( stylesheet ) {\n\t\t\tArray.prototype.forEach.call( stylesheet.cssRules \|\| stylesheet.rules, removeViewportStyles );\n\t\t} );\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n} )();`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\n\t}\n\thtml.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio > div,\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. /\n\t}\n\tbody > div > {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n`;\n\nexport default function Sandbox( {\n\thtml = '',\n\ttitle = '',\n\ttype,\n\tstyles = [],\n\tscripts = [],\n\tonFocus,\n} ) {\n\tconst ref = useRef();\n\tconst [ width, setWidth ] = useState( 0 );\n\tconst [ height, setHeight ] = useState( 0 );\n\n\tfunction isFrameAccessible() {\n\t\ttry {\n\t\t\treturn !! ref.current.contentDocument.body;\n\t\t} catch ( e ) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\tfunction trySandbox( forceRerender = false ) {\n\t\tif ( ! isFrameAccessible() ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { contentDocument, ownerDocument } = ref.current;\n\t\tconst { body } = contentDocument;\n\n\t\tif (\n\t\t\t! forceRerender &&\n\t\t\tnull !== body.getAttribute( 'data-resizable-iframe-connected' )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Put the html snippet into a html document, and then write it to the iframe's document\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\t\tconst htmlDoc = (\n\t\t\t<html\n\t\t\t\tlang={ ownerDocument.documentElement.lang }\n\t\t\t\tclassName={ type }\n\t\t\t>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t<script\n\t\t\t\t\t\ttype=\"text/javascript\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: observeAndResizeJS,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\n\t\t// Writing the document like this makes it act in the same way as if it was\n\t\t// loaded over the network, so DOM creation and mutation, script execution, etc.\n\t\t// all work as expected.\n\t\tcontentDocument.open();\n\t\tcontentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );\n\t\tcontentDocument.close();\n\t}\n\n\tuseEffect( () => {\n\t\ttrySandbox();\n\n\t\tfunction tryNoForceSandbox() {\n\t\t\ttrySandbox( false );\n\t\t}\n\n\t\tfunction checkMessageForResize( event ) {\n\t\t\tconst iframe = ref.current;\n\n\t\t\t// Verify that the mounted element is the source of the message.\n\t\t\tif ( ! iframe \|\| iframe.contentWindow !== event.source ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Attempt to parse the message data as JSON if passed as string.\n\t\t\tlet data = event.data \|\| {};\n\n\t\t\tif ( 'string' === typeof data ) {\n\t\t\t\ttry {\n\t\t\t\t\tdata = JSON.parse( data );\n\t\t\t\t} catch ( e ) {}\n\t\t\t}\n\n\t\t\t// Update the state only if the message is formatted as we expect,\n\t\t\t// i.e. as an object with a 'resize' action.\n\t\t\tif ( 'resize' !== data.action ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetWidth( data.width );\n\t\t\tsetHeight( data.height );\n\t\t}\n\n\t\tconst { ownerDocument } = ref.current;\n\t\tconst { defaultView } = ownerDocument;\n\n\t\t// This used to be registered using <iframe onLoad={} />, but it made the iframe blank\n\t\t// after reordering the containing block. See these two issues for more details:\n\t\t// https://github.com/WordPress/gutenberg/issues/6146\n\t\t// https://github.com/facebook/react/issues/18752\n\t\tref.current.addEventListener( 'load', tryNoForceSandbox, false );\n\t\tdefaultView.addEventListener( 'message', checkMessageForResize );\n\n\t\treturn () => {\n\t\t\tref.current?.removeEventListener(\n\t\t\t\t'load',\n\t\t\t\ttryNoForceSandbox,\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tdefaultView.addEventListener( 'message', checkMessageForResize );\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\ttrySandbox();\n\t}, [ title, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\ttrySandbox( true );\n\t}, [ html, type ] );\n\n\treturn (\n\t\t<iframe\n\t\t\tref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }\n\t\t\ttitle={ title }\n\t\t\tclassName=\"components-sandbox\"\n\t\t\tsandbox=\"allow-scripts allow-same-origin allow-presentation\"\n\t\t\tonFocus={ onFocus }\n\t\t\twidth={ Math.ceil( width ) }\n\t\t\theight={ Math.ceil( height ) }\n\t\t/>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/sandbox/index.js"],"names":["observeAndResizeJS","style","Sandbox","html","title","type","styles","scripts","onFocus","ref","width","setWidth","height","setHeight","isFrameAccessible","current","contentDocument","body","e","trySandbox","forceRerender","ownerDocument","getAttribute","htmlDoc","documentElement","lang","__html","map","rules","i","src","open","write","close","tryNoForceSandbox","checkMessageForResize","event","iframe","contentWindow","source","data","JSON","parse","action","defaultView","addEventListener","removeEventListener","Math","ceil"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\trenderToString,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useFocusableIframe, useMergeRefs } from '@wordpress/compose';\n\nconst observeAndResizeJS = `\n\t( function() {\n\t\tvar observer;\n\n\t\tif ( ! window.MutationObserver \|\| ! document.body \|\| ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tvar clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\twindow.parent.postMessage( {\n\t\t\t\taction: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n\t\t\t}, '' );\n\t\t}\n\n\t\tobserver = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {\n\t\t\t\t\tif ( /^\\\\d+(vmin\|vmax\|vh\|vw)$/.test( ruleOrNode.style[ style ] ) ) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );\n\t\tArray.prototype.forEach.call( document.styleSheets, function( stylesheet ) {\n\t\t\tArray.prototype.forEach.call( stylesheet.cssRules \|\| stylesheet.rules, removeViewportStyles );\n\t\t} );\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n} )();`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div {\n\t\twidth: 100%;\n\t}\n\thtml.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio > div,\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. /\n\t}\n\tbody > div > {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n`;\n\nexport default function Sandbox( {\n\thtml = '',\n\ttitle = '',\n\ttype,\n\tstyles = [],\n\tscripts = [],\n\tonFocus,\n} ) {\n\tconst ref = useRef();\n\tconst [ width, setWidth ] = useState( 0 );\n\tconst [ height, setHeight ] = useState( 0 );\n\n\tfunction isFrameAccessible() {\n\t\ttry {\n\t\t\treturn !! ref.current.contentDocument.body;\n\t\t} catch ( e ) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\tfunction trySandbox( forceRerender = false ) {\n\t\tif ( ! isFrameAccessible() ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { contentDocument, ownerDocument } = ref.current;\n\t\tconst { body } = contentDocument;\n\n\t\tif (\n\t\t\t! forceRerender &&\n\t\t\tnull !== body.getAttribute( 'data-resizable-iframe-connected' )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Put the html snippet into a html document, and then write it to the iframe's document\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\t\tconst htmlDoc = (\n\t\t\t<html\n\t\t\t\tlang={ ownerDocument.documentElement.lang }\n\t\t\t\tclassName={ type }\n\t\t\t>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t<script\n\t\t\t\t\t\ttype=\"text/javascript\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: observeAndResizeJS,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\n\t\t// Writing the document like this makes it act in the same way as if it was\n\t\t// loaded over the network, so DOM creation and mutation, script execution, etc.\n\t\t// all work as expected.\n\t\tcontentDocument.open();\n\t\tcontentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );\n\t\tcontentDocument.close();\n\t}\n\n\tuseEffect( () => {\n\t\ttrySandbox();\n\n\t\tfunction tryNoForceSandbox() {\n\t\t\ttrySandbox( false );\n\t\t}\n\n\t\tfunction checkMessageForResize( event ) {\n\t\t\tconst iframe = ref.current;\n\n\t\t\t// Verify that the mounted element is the source of the message.\n\t\t\tif ( ! iframe \|\| iframe.contentWindow !== event.source ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Attempt to parse the message data as JSON if passed as string.\n\t\t\tlet data = event.data \|\| {};\n\n\t\t\tif ( 'string' === typeof data ) {\n\t\t\t\ttry {\n\t\t\t\t\tdata = JSON.parse( data );\n\t\t\t\t} catch ( e ) {}\n\t\t\t}\n\n\t\t\t// Update the state only if the message is formatted as we expect,\n\t\t\t// i.e. as an object with a 'resize' action.\n\t\t\tif ( 'resize' !== data.action ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetWidth( data.width );\n\t\t\tsetHeight( data.height );\n\t\t}\n\n\t\tconst { ownerDocument } = ref.current;\n\t\tconst { defaultView } = ownerDocument;\n\n\t\t// This used to be registered using <iframe onLoad={} />, but it made the iframe blank\n\t\t// after reordering the containing block. See these two issues for more details:\n\t\t// https://github.com/WordPress/gutenberg/issues/6146\n\t\t// https://github.com/facebook/react/issues/18752\n\t\tref.current.addEventListener( 'load', tryNoForceSandbox, false );\n\t\tdefaultView.addEventListener( 'message', checkMessageForResize );\n\n\t\treturn () => {\n\t\t\tref.current?.removeEventListener(\n\t\t\t\t'load',\n\t\t\t\ttryNoForceSandbox,\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tdefaultView.addEventListener( 'message', checkMessageForResize );\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\ttrySandbox();\n\t}, [ title, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\ttrySandbox( true );\n\t}, [ html, type ] );\n\n\treturn (\n\t\t<iframe\n\t\t\tref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }\n\t\t\ttitle={ title }\n\t\t\tclassName=\"components-sandbox\"\n\t\t\tsandbox=\"allow-scripts allow-same-origin allow-presentation\"\n\t\t\tonFocus={ onFocus }\n\t\t\twidth={ Math.ceil( width ) }\n\t\t\theight={ Math.ceil( height ) }\n\t\t/>\n\t);\n}\n"]}

package/build/search-control/index.js CHANGED Viewed

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.SearchControl = void 0;
 var _element = require("@wordpress/element");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _compose = require("@wordpress/compose");
@@ -17,7 +19,7 @@ var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
-var _ = require("../");
+var _button = _interopRequireDefault(require("../button"));
 var _baseControl = _interopRequireDefault(require("../base-control"));
@@ -32,8 +34,9 @@ var _baseControl = _interopRequireDefault(require("../base-control"));
 /**
  * Internal dependencies
  */
-function SearchControl(_ref, forwardedRef) {
+function UnforwardedSearchControl(_ref, forwardedRef) {
   let {
+    __nextHasNoMarginBottom,
     className,
     onChange,
     onKeyDown,
@@ -42,7 +45,8 @@ function SearchControl(_ref, forwardedRef) {
     placeholder = (0, _i18n.__)('Search'),
     hideLabelFromVision = true,
     help,
-    onClose
+    onClose,
+    ...restProps
   } = _ref;
   const searchRef = (0, _element.useRef)();
   const instanceId = (0, _compose.useInstanceId)(SearchControl);
@@ -50,7 +54,7 @@ function SearchControl(_ref, forwardedRef) {
   const renderRightButton = () => {
     if (onClose) {
-      return (0, _element.createElement)(_.Button, {
+      return (0, _element.createElement)(_button.default, {
         icon: _icons.closeSmall,
         label: (0, _i18n.__)('Close search'),
         onClick: onClose
@@ -58,12 +62,14 @@ function SearchControl(_ref, forwardedRef) {
     }
     if (!!value) {
-      return (0, _element.createElement)(_.Button, {
+      return (0, _element.createElement)(_button.default, {
         icon: _icons.closeSmall,
         label: (0, _i18n.__)('Reset search'),
         onClick: () => {
+          var _searchRef$current;
           onChange('');
-          searchRef.current.focus();
+          (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.focus();
         }
       });
     }
@@ -74,6 +80,7 @@ function SearchControl(_ref, forwardedRef) {
   };
   return (0, _element.createElement)(_baseControl.default, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: label,
     id: id,
     hideLabelFromVision: hideLabelFromVision,
@@ -81,7 +88,7 @@ function SearchControl(_ref, forwardedRef) {
     className: (0, _classnames.default)(className, 'components-search-control')
   }, (0, _element.createElement)("div", {
     className: "components-search-control__input-wrapper"
-  }, (0, _element.createElement)("input", {
+  }, (0, _element.createElement)("input", (0, _extends2.default)({}, restProps, {
     ref: (0, _compose.useMergeRefs)([searchRef, forwardedRef]),
     className: "components-search-control__input",
     id: id,
@@ -91,12 +98,33 @@ function SearchControl(_ref, forwardedRef) {
     onKeyDown: onKeyDown,
     autoComplete: "off",
     value: value || ''
-  }), (0, _element.createElement)("div", {
+  })), (0, _element.createElement)("div", {
     className: "components-search-control__icon"
   }, renderRightButton())));
 }
+/**
+ * SearchControl components let users display a search control.
+ *
+ * ```jsx
+ * import { SearchControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * function MySearchControl( { className, setState } ) {
+ *   const [ searchInput, setSearchInput ] = useState( '' );
+ *
+ *   return (
+ *     <SearchControl
+ *       value={ searchInput }
+ *       onChange={ setSearchInput }
+ *     />
+ *   );
+ * }
+ * ```
+ */
-var _default = (0, _element.forwardRef)(SearchControl);
+const SearchControl = (0, _element.forwardRef)(UnforwardedSearchControl);
+exports.SearchControl = SearchControl;
+var _default = SearchControl;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/build/search-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/search-control/index.js"],"names":["~~SearchControl~~","forwardedRef","className","onChange","onKeyDown","value","label","placeholder","hideLabelFromVision","help","onClose","searchRef","instanceId","id","renderRightButton","closeSmall","current","focus","search","event","target"],"mappings":";;;;;;;;;AAWA;;AARA;;AAKA;;AACA;;AACA;;AAMA;;AACA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;~~AAIA~~,SAASA,~~aAAT~~,~~OAYCC~~,~~YAZD~~,~~EAaE~~;AAAA,~~MAZD~~;AACCC,IAAAA,~~SADD~~;AAECC,IAAAA,~~QAFD~~;AAGCC,IAAAA,~~SAHD~~;AAICC,IAAAA,~~KAJD~~;AAKCC,IAAAA,KALD;AAMCC,IAAAA,WAAW,GAAG,cAAI,QAAJ,~~CANf~~;~~AAOCC~~,IAAAA,mBAAmB,GAAG,~~IAPvB~~;~~AAQCC~~,IAAAA,~~IARD~~;~~AASCC~~,IAAAA;~~AATD~~,~~GAYC~~;AACD,QAAMC,SAAS,GAAG,sBAAlB;AACA,QAAMC,UAAU,GAAG,~~4BAAeZ~~,aAAf,CAAnB;AACA,~~QAAMa~~,EAAE,GAAI,~~6BAA6BD~~,UAAY,EAArD;;AAEA,~~QAAME~~,iBAAiB,GAAG,MAAM;AAC/B,~~QAAKJ~~,OAAL,EAAe;AACd,aACC,4BAAC,~~QAAD~~;AACC,QAAA,IAAI,~~EAAGK~~,iBADR;AAEC,QAAA,KAAK,EAAG,cAAI,cAAJ,CAFT;AAGC,QAAA,OAAO,~~EAAGL~~;AAHX,QADD;AAOA;;AAED,QAAK,CAAC,CAAEL,KAAR,EAAgB;AACf,aACC,4BAAC,~~QAAD~~;AACC,QAAA,IAAI,~~EAAGU~~,iBADR;AAEC,QAAA,KAAK,EAAG,cAAI,cAAJ,CAFT;AAGC,QAAA,OAAO,EAAG,MAAM;~~AACfZ~~,UAAAA,QAAQ,CAAE,EAAF,CAAR;~~AACAQ~~,~~UAAAA~~,SAAS,~~CAACK~~,OAAV,~~CAAkBC~~,~~KAAlB~~;AACA;AANF,QADD;AAUA;;AAED,WAAO,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAGC;AAAb,MAAP;AACA,GAzBD;;AA2BA,SACC,4BAAC,oBAAD;AACC,IAAA,~~KAAK~~,~~EAAGZ~~,~~KADT~~;AAEC,IAAA,~~EAAE~~,~~EAAGO~~,~~EAFN~~;AAGC,IAAA,~~mBAAmB~~,~~EAAGL~~,~~mBAHvB~~;AAIC,IAAA,IAAI,EAAGC,~~IAJR~~;~~AAKC~~,IAAA,SAAS,EAAG,yBAAYP,SAAZ,EAAuB,2BAAvB;~~AALb~~,~~KAOC~~;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;~~AACC~~,IAAA,GAAG,EAAG,2BAAc,~~CAAES~~,SAAF,~~EAAaV~~,YAAb,CAAd,~~CADP~~;~~AAEC~~,IAAA,SAAS,EAAC,~~kCAFX~~;~~AAGC~~,IAAA,EAAE,~~EAAGY~~,~~EAHN~~;~~AAIC~~,IAAA,IAAI,EAAC,~~QAJN~~;~~AAKC~~,IAAA,WAAW,~~EAAGN~~,~~WALf~~;~~AAMC~~,IAAA,QAAQ,~~EAAKY~~,KAAF,~~IAAahB~~,QAAQ,~~CAAEgB~~,KAAK,CAACC,MAAN,~~CAAaf~~,KAAf,~~CANjC~~;~~AAOC~~,IAAA,SAAS,EAAGD,~~SAPb~~;~~AAQC~~,IAAA,YAAY,EAAC,~~KARd~~;~~AASC~~,IAAA,KAAK,EAAGC,KAAK,IAAI;~~AATlB~~,~~IADD~~,~~EAYC~~;AAAK,IAAA,SAAS,EAAC;AAAf,~~KACGS~~,iBAAiB,EADpB,~~CAZD~~,~~CAPD~~,CADD;~~AA0BA;;eAEc~~,~~yBAAYd~~,~~aAAZ~~,C","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { Icon, search, closeSmall } from '@wordpress/icons';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport { Button } from '../';\nimport BaseControl from '../base-control';\n\nfunction ~~SearchControl~~(\n\t{\n\t\tclassName,\n\t\tonChange,\n\t\tonKeyDown,\n\t\tvalue,\n\t\tlabel,\n\t\tplaceholder = __( 'Search' ),\n\t\thideLabelFromVision = true,\n\t\thelp,\n\t\tonClose,\n\t},\n\tforwardedRef\n) {\n\tconst searchRef = useRef();\n\tconst instanceId = useInstanceId( SearchControl );\n\tconst id = `components-search-control-${ instanceId }`;\n\n\tconst renderRightButton = () => {\n\t\tif ( onClose ) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close search' ) }\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\tif ( !! value ) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Reset search' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonChange( '' );\n\t\t\t\t\t\tsearchRef.current.focus();\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn <Icon icon={ search } />;\n\t};\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( className, 'components-search-control' ) }\n\t\t>\n\t\t\t<div className=\"components-search-control__input-wrapper\">\n\t\t\t\t<input\n\t\t\t\t\tref={ useMergeRefs( [ searchRef, forwardedRef ] ) }\n\t\t\t\t\tclassName=\"components-search-control__input\"\n\t\t\t\t\tid={ id }\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tonChange={ ( event ) => onChange( event.target.value ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\tvalue={ value \|\| '' }\n\t\t\t\t/>\n\t\t\t\t<div className=\"components-search-control__icon\">\n\t\t\t\t\t{ renderRightButton() }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</BaseControl>\n\t);\n}\n\nexport ~~default~~ forwardRef( ~~SearchControl~~ );\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/search-control/index.tsx"],"names":["UnforwardedSearchControl","forwardedRef","__nextHasNoMarginBottom","className","onChange","onKeyDown","value","label","placeholder","hideLabelFromVision","help","onClose","restProps","searchRef","instanceId","SearchControl","id","renderRightButton","closeSmall","current","focus","search","event","target"],"mappings":";;;;;;;;;AAWA;;;;AARA;;AAKA;;AACA;;AACA;;AAMA;;AACA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AAOA,SAASA,wBAAT,OAcCC,YAdD,EAeE;AAAA,MAdD;AACCC,IAAAA,uBADD;AAECC,IAAAA,SAFD;AAGCC,IAAAA,QAHD;AAICC,IAAAA,SAJD;AAKCC,IAAAA,KALD;AAMCC,IAAAA,KAND;AAOCC,IAAAA,WAAW,GAAG,cAAI,QAAJ,CAPf;AAQCC,IAAAA,mBAAmB,GAAG,IARvB;AASCC,IAAAA,IATD;AAUCC,IAAAA,OAVD;AAWC,OAAGC;AAXJ,GAcC;AACD,QAAMC,SAAS,GAAG,sBAAlB;AACA,QAAMC,UAAU,GAAG,4BAAeC,aAAf,CAAnB;AACA,QAAMC,EAAE,GAAI,6BAA6BF,UAAY,EAArD;;AAEA,QAAMG,iBAAiB,GAAG,MAAM;AAC/B,QAAKN,OAAL,EAAe;AACd,aACC,4BAAC,eAAD;AACC,QAAA,IAAI,EAAGO,iBADR;AAEC,QAAA,KAAK,EAAG,cAAI,cAAJ,CAFT;AAGC,QAAA,OAAO,EAAGP;AAHX,QADD;AAOA;;AAED,QAAK,CAAC,CAAEL,KAAR,EAAgB;AACf,aACC,4BAAC,eAAD;AACC,QAAA,IAAI,EAAGY,iBADR;AAEC,QAAA,KAAK,EAAG,cAAI,cAAJ,CAFT;AAGC,QAAA,OAAO,EAAG,MAAM;AAAA;;AACfd,UAAAA,QAAQ,CAAE,EAAF,CAAR;AACA,gCAAAS,SAAS,CAACM,OAAV,0EAAmBC,KAAnB;AACA;AANF,QADD;AAUA;;AAED,WAAO,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAGC;AAAb,MAAP;AACA,GAzBD;;AA2BA,SACC,4BAAC,oBAAD;AACC,IAAA,uBAAuB,EAAGnB,uBAD3B;AAEC,IAAA,KAAK,EAAGK,KAFT;AAGC,IAAA,EAAE,EAAGS,EAHN;AAIC,IAAA,mBAAmB,EAAGP,mBAJvB;AAKC,IAAA,IAAI,EAAGC,IALR;AAMC,IAAA,SAAS,EAAG,yBAAYP,SAAZ,EAAuB,2BAAvB;AANb,KAQC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,gEACMS,SADN;AAEC,IAAA,GAAG,EAAG,2BAAc,CAAEC,SAAF,EAAaZ,YAAb,CAAd,CAFP;AAGC,IAAA,SAAS,EAAC,kCAHX;AAIC,IAAA,EAAE,EAAGe,EAJN;AAKC,IAAA,IAAI,EAAC,QALN;AAMC,IAAA,WAAW,EAAGR,WANf;AAOC,IAAA,QAAQ,EAAKc,KAAF,IAAalB,QAAQ,CAAEkB,KAAK,CAACC,MAAN,CAAajB,KAAf,CAPjC;AAQC,IAAA,SAAS,EAAGD,SARb;AASC,IAAA,YAAY,EAAC,KATd;AAUC,IAAA,KAAK,EAAGC,KAAK,IAAI;AAVlB,KADD,EAaC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGW,iBAAiB,EADpB,CAbD,CARD,CADD;AA4BA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMF,aAAa,GAAG,yBAAYf,wBAAZ,CAAtB;;eAEQe,a","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { Icon, search, closeSmall } from '@wordpress/icons';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\nimport type { SearchControlProps } from './types';\nimport type { ForwardedRef } from 'react';\n\nfunction UnforwardedSearchControl(\n\t{\n\t\t__nextHasNoMarginBottom,\n\t\tclassName,\n\t\tonChange,\n\t\tonKeyDown,\n\t\tvalue,\n\t\tlabel,\n\t\tplaceholder = __( 'Search' ),\n\t\thideLabelFromVision = true,\n\t\thelp,\n\t\tonClose,\n\t\t...restProps\n\t}: WordPressComponentProps< SearchControlProps, 'input', false >,\n\tforwardedRef: ForwardedRef< HTMLInputElement >\n) {\n\tconst searchRef = useRef< HTMLInputElement >();\n\tconst instanceId = useInstanceId( SearchControl );\n\tconst id = `components-search-control-${ instanceId }`;\n\n\tconst renderRightButton = () => {\n\t\tif ( onClose ) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close search' ) }\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\tif ( !! value ) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Reset search' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonChange( '' );\n\t\t\t\t\t\tsearchRef.current?.focus();\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn <Icon icon={ search } />;\n\t};\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( className, 'components-search-control' ) }\n\t\t>\n\t\t\t<div className=\"components-search-control__input-wrapper\">\n\t\t\t\t<input\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tref={ useMergeRefs( [ searchRef, forwardedRef ] ) }\n\t\t\t\t\tclassName=\"components-search-control__input\"\n\t\t\t\t\tid={ id }\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tonChange={ ( event ) => onChange( event.target.value ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\tvalue={ value \|\| '' }\n\t\t\t\t/>\n\t\t\t\t<div className=\"components-search-control__icon\">\n\t\t\t\t\t{ renderRightButton() }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</BaseControl>\n\t);\n}\n\n/\n SearchControl components let users display a search control.\n \n ```jsx\n * import { SearchControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n function MySearchControl( { className, setState } ) {\n * const [ searchInput, setSearchInput ] = useState( '' );\n \n return (\n * <SearchControl\n * value={ searchInput }\n * onChange={ setSearchInput }\n * />\n * );\n * }\n * ```\n */\nexport const SearchControl = forwardRef( UnforwardedSearchControl );\n\nexport default SearchControl;\n"]}

package/build/search-control/types.js ADDED Viewed

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

package/build/search-control/types.js.map ADDED Viewed

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

package/build/select-control/index.native.js CHANGED Viewed

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.SelectControl = void 0;
 var _element = require("@wordpress/element");
@@ -45,6 +45,7 @@ const SelectControl = (0, _element.memo)(_ref => {
     options: options
   }, props));
 });
+exports.SelectControl = SelectControl;
 var _default = SelectControl;
 exports.default = _default;
 //# sourceMappingURL=index.native.js.map

package/build/select-control/index.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/select-control/index.native.js"],"names":["SelectControl","help","instanceId","label","multiple","onChange","options","className","hideLabelFromVision","props","id","undefined"],"mappings":";;;;;;;;;AAGA;;;;AAIA;;AAPA;AACA;AACA;;AAEA;AACA;AACA;~~AAGA~~,MAAMA,aAAa,GAAG,~~mBACrB~~,QAUO;AAAA,MAVL;AACDC,IAAAA,IADC;AAEDC,IAAAA,UAFC;AAGDC,IAAAA,KAHC;AAIDC,IAAAA,QAAQ,GAAG,KAJV;AAKDC,IAAAA,QALC;AAMDC,IAAAA,OAAO,GAAG,EANT;AAODC,IAAAA,SAPC;AAQDC,IAAAA,mBARC;AASD,OAAGC;AATF,GAUK;AACN,QAAMC,EAAE,GAAI,4BAA4BR,UAAY,EAApD;AAEA,SACC,4BAAC,mBAAD;AACC,IAAA,KAAK,EAAGC,KADT;AAEC,IAAA,mBAAmB,EAAGK,mBAFvB;AAGC,IAAA,EAAE,EAAGE,EAHN;AAIC,IAAA,IAAI,EAAGT,IAJR;AAKC,IAAA,SAAS,EAAGM,SALb;AAMC,IAAA,aAAa,EAAGF,QANjB;AAOC,wBAAmB,CAAC,CAAEJ,IAAH,GAAW,GAAGS,EAAI,QAAlB,GAA4BC,SAPhD;AAQC,IAAA,QAAQ,EAAGP,QARZ;AASC,IAAA,OAAO,EAAGE;AATX,KAUMG,KAVN,EADD;AAcA,~~CA5BoB~~,CAAtB;eA+~~BeT~~,a","sourcesContent":["/*\n WordPress dependencies\n /\nimport { memo } from '@wordpress/element';\n/\n Internal dependencies\n */\nimport PickerCell from '../mobile/bottom-sheet/picker-cell';\n\~~nconst~~ SelectControl = memo(\n\t( {\n\t\thelp,\n\t\tinstanceId,\n\t\tlabel,\n\t\tmultiple = false,\n\t\tonChange,\n\t\toptions = [],\n\t\tclassName,\n\t\thideLabelFromVision,\n\t\t...props\n\t} ) => {\n\t\tconst id = `inspector-select-control-${ instanceId }`;\n\n\t\treturn (\n\t\t\t<PickerCell\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ help }\n\t\t\t\tclassName={ className }\n\t\t\t\tonChangeValue={ onChange }\n\t\t\t\taria-describedby={ !! help ? `${ id }__help` : undefined }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\toptions={ options }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport default SelectControl;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/select-control/index.native.js"],"names":["SelectControl","help","instanceId","label","multiple","onChange","options","className","hideLabelFromVision","props","id","undefined"],"mappings":";;;;;;;;;AAGA;;;;AAIA;;AAPA;AACA;AACA;;AAEA;AACA;AACA;AAGO,MAAMA,aAAa,GAAG,mBAC5B,QAUO;AAAA,MAVL;AACDC,IAAAA,IADC;AAEDC,IAAAA,UAFC;AAGDC,IAAAA,KAHC;AAIDC,IAAAA,QAAQ,GAAG,KAJV;AAKDC,IAAAA,QALC;AAMDC,IAAAA,OAAO,GAAG,EANT;AAODC,IAAAA,SAPC;AAQDC,IAAAA,mBARC;AASD,OAAGC;AATF,GAUK;AACN,QAAMC,EAAE,GAAI,4BAA4BR,UAAY,EAApD;AAEA,SACC,4BAAC,mBAAD;AACC,IAAA,KAAK,EAAGC,KADT;AAEC,IAAA,mBAAmB,EAAGK,mBAFvB;AAGC,IAAA,EAAE,EAAGE,EAHN;AAIC,IAAA,IAAI,EAAGT,IAJR;AAKC,IAAA,SAAS,EAAGM,SALb;AAMC,IAAA,aAAa,EAAGF,QANjB;AAOC,wBAAmB,CAAC,CAAEJ,IAAH,GAAW,GAAGS,EAAI,QAAlB,GAA4BC,SAPhD;AAQC,IAAA,QAAQ,EAAGP,QARZ;AASC,IAAA,OAAO,EAAGE;AATX,KAUMG,KAVN,EADD;AAcA,CA5B2B,CAAtB;;eA+BQT,a","sourcesContent":["/*\n WordPress dependencies\n /\nimport { memo } from '@wordpress/element';\n/\n Internal dependencies\n */\nimport PickerCell from '../mobile/bottom-sheet/picker-cell';\n\nexport const SelectControl = memo(\n\t( {\n\t\thelp,\n\t\tinstanceId,\n\t\tlabel,\n\t\tmultiple = false,\n\t\tonChange,\n\t\toptions = [],\n\t\tclassName,\n\t\thideLabelFromVision,\n\t\t...props\n\t} ) => {\n\t\tconst id = `inspector-select-control-${ instanceId }`;\n\n\t\treturn (\n\t\t\t<PickerCell\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ help }\n\t\t\t\tclassName={ className }\n\t\t\t\tonChangeValue={ onChange }\n\t\t\t\taria-describedby={ !! help ? `${ id }__help` : undefined }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\toptions={ options }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport default SelectControl;\n"]}

package/build/tab-panel/index.js CHANGED Viewed

@@ -5,7 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = TabPanel;
+exports.TabPanel = TabPanel;
+exports.default = void 0;
 var _element = require("@wordpress/element");
@@ -32,8 +33,6 @@ var _button = _interopRequireDefault(require("../button"));
 /**
  * Internal dependencies
  */
-const noop = () => {};
 const TabButton = _ref => {
   let {
     tabId,
@@ -50,6 +49,43 @@ const TabButton = _ref => {
     onClick: onClick
   }, rest), children);
 };
+/**
+ * TabPanel is an ARIA-compliant tabpanel.
+ *
+ * TabPanels organize content across different screens, data sets, and interactions.
+ * It has two sections: a list of tabs, and the view to show when tabs are chosen.
+ *
+ * ```jsx
+ * import { TabPanel } from '@wordpress/components';
+ *
+ * const onSelect = ( tabName ) => {
+ *   console.log( 'Selecting tab', tabName );
+ * };
+ *
+ * const MyTabPanel = () => (
+ *   <TabPanel
+ *     className="my-tab-panel"
+ *     activeClass="active-tab"
+ *     onSelect={ onSelect }
+ *     tabs={ [
+ *       {
+ *         name: 'tab1',
+ *         title: 'Tab 1',
+ *         className: 'tab-one',
+ *       },
+ *       {
+ *         name: 'tab2',
+ *         title: 'Tab 2',
+ *         className: 'tab-two',
+ *       },
+ *     ] }
+ *   >
+ *     { ( tab ) => <p>{ tab.title }</p> }
+ *   </TabPanel>
+ * );
+ * ```
+ */
 function TabPanel(_ref2) {
   var _selectedTab$name;
@@ -61,17 +97,17 @@ function TabPanel(_ref2) {
     initialTabName,
     orientation = 'horizontal',
     activeClass = 'is-active',
-    onSelect = noop
+    onSelect
   } = _ref2;
   const instanceId = (0, _compose.useInstanceId)(TabPanel, 'tab-panel');
-  const [selected, setSelected] = (0, _element.useState)(null);
+  const [selected, setSelected] = (0, _element.useState)();
   const handleClick = tabKey => {
     setSelected(tabKey);
-    onSelect(tabKey);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(tabKey);
   };
-  const onNavigate = (childIndex, child) => {
+  const onNavigate = (_childIndex, child) => {
     child.click();
   };
@@ -85,7 +121,7 @@ function TabPanel(_ref2) {
     });
     if (!newSelectedTab) {
-      setSelected(initialTabName || (tabs.length > 0 ? tabs[0].name : null));
+      setSelected(initialTabName || (tabs.length > 0 ? tabs[0].name : undefined));
     }
   }, [tabs]);
   return (0, _element.createElement)("div", {
@@ -103,7 +139,7 @@ function TabPanel(_ref2) {
     "aria-controls": `${instanceId}-${tab.name}-view`,
     selected: tab.name === selected,
     key: tab.name,
-    onClick: (0, _lodash.partial)(handleClick, tab.name)
+    onClick: () => handleClick(tab.name)
   }, tab.title))), selectedTab && (0, _element.createElement)("div", {
     key: selectedId,
     "aria-labelledby": selectedId,
@@ -112,4 +148,7 @@ function TabPanel(_ref2) {
     className: "components-tab-panel__tab-content"
   }, children(selectedTab)));
 }
+var _default = TabPanel;
+exports.default = _default;
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/tab-panel/index.js"],"names":["~~noop","~~TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleClick","tabKey","onNavigate","~~childIndex~~","child","click","selectedTab","name","selectedId","newSelectedTab","length","map","tab","title"],"mappings":"~~;;;;;;;;;~~AASA;;;;AANA;;AACA;;AAMA;;AAKA;;AACA;;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;~~AAIA~~,MAAMA,~~IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,MAAMC,~~SAAS,GAAG;AAAA,MAAE;~~AAAEC~~,IAAAA,~~KAAF~~;~~AAASC~~,IAAAA,~~OAAT~~;~~AAAkBC~~,IAAAA,~~QAAlB~~;~~AAA4BC~~,IAAAA,~~QAA5B~~;~~AAAsC~~,OAAGC;~~AAAzC~~,GAAF;AAAA,~~SACjB~~,4BAAC,eAAD;AACC,IAAA,IAAI,EAAC,KADN;AAEC,IAAA,QAAQ,EAAGD,QAAQ,GAAG,IAAH,GAAU,CAAC,CAF/B;AAGC,qBAAgBA,QAHjB;AAIC,IAAA,EAAE,EAAGH,KAJN;AAKC,IAAA,OAAO,EAAGC;AALX,KAMMG,IANN,GAQGF,QARH,~~CADiB~~;AAAA,CAAlB~~;;AAae~~,SAASG,QAAT,~~QAQX~~;AAAA;;AAAA,~~MAR8B~~;~~AACjCC~~,IAAAA,~~SADiC~~;~~AAEjCJ~~,IAAAA,~~QAFiC~~;~~AAGjCK~~,IAAAA,~~IAHiC~~;~~AAIjCC~~,IAAAA,~~cAJiC~~;~~AAKjCC~~,IAAAA,WAAW,GAAG,~~YALmB~~;~~AAMjCC~~,IAAAA,WAAW,GAAG,~~WANmB~~;~~AAOjCC~~,IAAAA~~,QAAQ,GAAGb~~;~~AAPsB~~,~~GAQ9B~~;~~AACH~~,~~QAAMc~~,UAAU,GAAG,4BAAeP,QAAf,EAAyB,WAAzB,CAAnB;AACA,QAAM,CAAEF,QAAF,EAAYU,WAAZ,IAA4B,~~uBAAU,IAAV,CAAlC~~;;AAEA,QAAMC,WAAW,GAAKC,MAAF,~~IAAc~~;~~AACjCF~~,IAAAA,WAAW,CAAEE,MAAF,CAAX;AACAJ,IAAAA,QAAQ,~~CAAEI~~,~~MAAF~~,CAAR;AACA,GAHD;;AAKA,QAAMC,UAAU,GAAG,CAAEC,~~UAAF~~,~~EAAcC~~,~~KAAd~~,~~KAAyB~~;~~AAC3CA~~,IAAAA,KAAK,CAACC,KAAN;AACA,GAFD;;AAGA,QAAMC,WAAW,GAAG,kBAAMb,IAAN,EAAY;AAAEc,IAAAA,IAAI,EAAElB;AAAR,GAAZ,CAApB;AACA,QAAMmB,UAAU,GAAI,GAAGV,UAAY,IAAhB,qBAAoBQ,WAApB,aAAoBA,WAApB,uBAAoBA,WAAW,CAAEC,IAAjC,iEAAyC,MAAQ,EAApE;AAEA,0BAAW,MAAM;AAChB,UAAME,cAAc,GAAG,kBAAMhB,IAAN,EAAY;AAAEc,MAAAA,IAAI,EAAElB;AAAR,KAAZ,CAAvB;;AACA,QAAK,CAAEoB,cAAP,EAAwB;AACvBV,MAAAA,WAAW,CACVL,cAAc,~~KAAMD~~,IAAI,CAACiB,MAAL,GAAc,CAAd,GAAkBjB,IAAI,CAAE,CAAF,CAAJ,CAAUc,IAA5B,~~GAAmC~~,~~IAAzC~~,CADJ,CAAX;~~AAGA~~;AACD,~~GAPD~~,~~EAOG~~,~~CAAEd~~,IAAF,~~CAPH~~;~~AASA~~,SACC;AAAK,IAAA,SAAS,EAAGD;AAAjB,KACC,4BAAC,iCAAD;AACC,IAAA,IAAI,EAAC,SADN;AAEC,IAAA,WAAW,EAAGG,WAFf;AAGC,IAAA,UAAU,EAAGO,UAHd;AAIC,IAAA,SAAS,EAAC;AAJX,KAMGT,IAAI,~~CAACkB~~,GAAL,CAAYC,GAAF,IACX,4BAAC,SAAD;AACC,IAAA,SAAS,EAAG,yBACX,iCADW,EAEXA,GAAG,~~CAACpB~~,SAFO,EAGX;AACC,OAAEI,WAAF,~~GAAiBgB~~,GAAG,~~CAACL~~,IAAJ,KAAalB;AAD/B,KAHW,CADb;AAQC,IAAA,KAAK,EAAI,GAAGS,UAAY,~~IAAIc~~,GAAG,~~CAACL~~,IAAM,EARvC;AASC,qBAAiB,GAAGT,UAAY,~~IAAIc~~,GAAG,~~CAACL~~,IAAM,OAT/C;AAUC,IAAA,QAAQ,~~EAAGK~~,GAAG,~~CAACL~~,IAAJ,KAAalB,QAVzB;AAWC,IAAA,GAAG,~~EAAGuB~~,GAAG,~~CAACL~~,IAXX;AAYC,IAAA,OAAO,EAAG,~~qBAASP~~,~~WAAT~~,~~EAAsBY~~,GAAG,~~CAACL~~,~~IAA1B~~;~~AAZX~~,~~KAcGK~~,GAAG,CAACC,KAdP,CADC,CANH,CADD,~~EA0BGP~~,WAAW,IACZ;AACC,IAAA,GAAG,EAAGE,UADP;AAEC,uBAAkBA,UAFnB;AAGC,IAAA,IAAI,EAAC,UAHN;AAIC,IAAA,EAAE,EAAI,GAAGA,UAAY,OAJtB;AAKC,IAAA,SAAS,EAAC;AALX,KAOGpB,QAAQ,CAAEkB,WAAF,CAPX,CA3BF,CADD;AAwCA","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { ~~partial,~~ 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';\~~n\nconst~~ ~~noop~~ = () => {};\n\nconst TabButton = ( { ~~tabId, onClick, children, selected,~~ ...rest } ) => (\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\nexport ~~default~~ function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect ~~= noop~~,\n} ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState( ~~null~~ );\n\n\tconst handleClick = ( tabKey ) => {\n\t\tsetSelected( tabKey );\n\t\tonSelect( tabKey );\n\t};\n\n\tconst onNavigate = ( ~~childIndex~~, child ) => {\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\tconst newSelectedTab = find( tabs, { name: selected } );\n\t\tif ( ! newSelectedTab ) {\n\t\t\tsetSelected(\n\t\t\t\tinitialTabName \|\| ( tabs.length > 0 ? tabs[ 0 ].name : ~~null~~ )\n\t\t\t);\n\t\t}\n\t}, [ tabs ] );\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={ ~~partial~~( handleClick, 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"]}
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","handleClick","tabKey","onNavigate","_childIndex","child","click","selectedTab","name","selectedId","newSelectedTab","length","undefined","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 handleClick = ( 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\tconst newSelectedTab = find( tabs, { name: selected } );\n\t\tif ( ! newSelectedTab ) {\n\t\t\tsetSelected(\n\t\t\t\tinitialTabName \|\|\n\t\t\t\t\t( tabs.length > 0 ? tabs[ 0 ].name : undefined )\n\t\t\t);\n\t\t}\n\t}, [ tabs ] );\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={ () => handleClick( 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"]}

package/build/tab-panel/types.js ADDED Viewed

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

package/build/tab-panel/types.js.map ADDED Viewed

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

package/build/text-control/index.js CHANGED Viewed

@@ -28,6 +28,7 @@ var _baseControl = _interopRequireDefault(require("../base-control"));
  */
 function UnforwardedTextControl(props, ref) {
   const {
+    __nextHasNoMarginBottom,
     label,
     hideLabelFromVision,
     value,
@@ -43,6 +44,7 @@ function UnforwardedTextControl(props, ref) {
   const onChangeValue = event => onChange(event.target.value);
   return (0, _element.createElement)(_baseControl.default, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: label,
     hideLabelFromVision: hideLabelFromVision,
     id: id,

package/build/text-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/text-control/index.tsx"],"names":["UnforwardedTextControl","props","ref","label","hideLabelFromVision","value","help","className","onChange","type","additionalProps","instanceId","TextControl","id","onChangeValue","event","target","undefined"],"mappings":";;;;;;;;;AASA;;;;AADA;;AAMA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAKA,SAASA,sBAAT,CACCC,KADD,EAECC,GAFD,EAGE;AACD,QAAM;AACLC,IAAAA,~~KADK~~;AAELC,IAAAA,~~mBAFK~~;AAGLC,IAAAA,~~KAHK~~;AAILC,IAAAA,~~IAJK~~;AAKLC,IAAAA,~~SALK~~;AAMLC,IAAAA,~~QANK~~;AAOLC,IAAAA,IAAI,GAAG,~~MAPF~~;~~AAQL~~,OAAGC;~~AARE~~,~~MASFT~~,~~KATJ~~;~~AAUA~~,~~QAAMU~~,UAAU,GAAG,4BAAeC,WAAf,CAAnB;AACA,QAAMC,EAAE,GAAI,0BAA0BF,UAAY,EAAlD;;AACA,QAAMG,aAAa,GAAKC,KAAF,IACrBP,QAAQ,CAAEO,KAAK,CAACC,MAAN,CAAaX,KAAf,CADT;;AAGA,SACC,4BAAC,oBAAD;AACC,IAAA,~~KAAK~~,~~EAAGF~~,~~KADT~~;AAEC,IAAA,~~mBAAmB~~,EAAGC,~~mBAFvB~~;AAGC,IAAA,EAAE,EAAGS,~~EAHN~~;~~AAIC~~,IAAA,IAAI,EAAGP,~~IAJR~~;~~AAKC~~,IAAA,SAAS,EAAGC;~~AALb~~,~~KAOC~~;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,IAAA,IAAI,EAAGE,IAFR;AAGC,IAAA,EAAE,EAAGI,EAHN;AAIC,IAAA,KAAK,EAAGR,KAJT;AAKC,IAAA,QAAQ,EAAGS,aALZ;AAMC,wBAAmB,CAAC,CAAER,IAAH,GAAUO,EAAE,GAAG,QAAf,GAA0BI,SAN9C;AAOC,IAAA,GAAG,~~EAAGf~~;AAPP,~~KAQMQ~~,eARN,~~EAPD~~,CADD;~~AAoBA~~;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,WAAW,GAAG,~~yBAAYZ~~,sBAAZ,CAApB;;~~eAEQY~~,W","sourcesContent":["/*\n External dependencies\n /\nimport type { ChangeEvent, ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { TextControlProps } from './types';\n\nfunction UnforwardedTextControl(\n\tprops: WordPressComponentProps< TextControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tclassName,\n\t\tonChange,\n\t\ttype = 'text',\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextControl );\n\tconst id = `inspector-text-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<input\n\t\t\t\tclassName=\"components-text-control__input\"\n\t\t\t\ttype={ type }\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/\n TextControl components let users enter and edit text.\n \n \n * @example\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyTextControl = () => {\n * const [ className, setClassName ] = useState( '' );\n \n return (\n * <TextControl\n * label=\"Additional CSS Class\"\n * value={ className }\n * onChange={ ( value ) => setClassName( value ) }\n * />\n * );\n * };\n * ```\n */\nexport const TextControl = forwardRef( UnforwardedTextControl );\n\nexport default TextControl;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/text-control/index.tsx"],"names":["UnforwardedTextControl","props","ref","__nextHasNoMarginBottom","label","hideLabelFromVision","value","help","className","onChange","type","additionalProps","instanceId","TextControl","id","onChangeValue","event","target","undefined"],"mappings":";;;;;;;;;AASA;;;;AADA;;AAMA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAKA,SAASA,sBAAT,CACCC,KADD,EAECC,GAFD,EAGE;AACD,QAAM;AACLC,IAAAA,uBADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,mBAHK;AAILC,IAAAA,KAJK;AAKLC,IAAAA,IALK;AAMLC,IAAAA,SANK;AAOLC,IAAAA,QAPK;AAQLC,IAAAA,IAAI,GAAG,MARF;AASL,OAAGC;AATE,MAUFV,KAVJ;AAWA,QAAMW,UAAU,GAAG,4BAAeC,WAAf,CAAnB;AACA,QAAMC,EAAE,GAAI,0BAA0BF,UAAY,EAAlD;;AACA,QAAMG,aAAa,GAAKC,KAAF,IACrBP,QAAQ,CAAEO,KAAK,CAACC,MAAN,CAAaX,KAAf,CADT;;AAGA,SACC,4BAAC,oBAAD;AACC,IAAA,uBAAuB,EAAGH,uBAD3B;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,mBAAmB,EAAGC,mBAHvB;AAIC,IAAA,EAAE,EAAGS,EAJN;AAKC,IAAA,IAAI,EAAGP,IALR;AAMC,IAAA,SAAS,EAAGC;AANb,KAQC;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,IAAA,IAAI,EAAGE,IAFR;AAGC,IAAA,EAAE,EAAGI,EAHN;AAIC,IAAA,KAAK,EAAGR,KAJT;AAKC,IAAA,QAAQ,EAAGS,aALZ;AAMC,wBAAmB,CAAC,CAAER,IAAH,GAAUO,EAAE,GAAG,QAAf,GAA0BI,SAN9C;AAOC,IAAA,GAAG,EAAGhB;AAPP,KAQMS,eARN,EARD,CADD;AAqBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,WAAW,GAAG,yBAAYb,sBAAZ,CAApB;;eAEQa,W","sourcesContent":["/*\n External dependencies\n /\nimport type { ChangeEvent, ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { TextControlProps } from './types';\n\nfunction UnforwardedTextControl(\n\tprops: WordPressComponentProps< TextControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tclassName,\n\t\tonChange,\n\t\ttype = 'text',\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextControl );\n\tconst id = `inspector-text-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<input\n\t\t\t\tclassName=\"components-text-control__input\"\n\t\t\t\ttype={ type }\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/\n TextControl components let users enter and edit text.\n \n \n * @example\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyTextControl = () => {\n * const [ className, setClassName ] = useState( '' );\n \n return (\n * <TextControl\n * label=\"Additional CSS Class\"\n * value={ className }\n * onChange={ ( value ) => setClassName( value ) }\n * />\n * );\n * };\n * ```\n */\nexport const TextControl = forwardRef( UnforwardedTextControl );\n\nexport default TextControl;\n"]}

package/build/text-highlight/index.js CHANGED Viewed

@@ -7,14 +7,14 @@ exports.default = exports.TextHighlight = void 0;
 var _element = require("@wordpress/element");
-var _lodash = require("lodash");
+var _strings = require("../utils/strings");
 /**
- * External dependencies
+ * WordPress dependencies
  */
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
 /**
@@ -43,7 +43,7 @@ const TextHighlight = props => {
     return (0, _element.createElement)(_element.Fragment, null, text);
   }
-  const regex = new RegExp(`(${(0, _lodash.escapeRegExp)(trimmedHighlightText)})`, 'gi');
+  const regex = new RegExp(`(${(0, _strings.escapeRegExp)(trimmedHighlightText)})`, 'gi');
   return (0, _element.createInterpolateElement)(text.replace(regex, '<mark>$&</mark>'), {
     mark: (0, _element.createElement)("mark", null)
   });

package/build/text-highlight/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/text-highlight/index.tsx"],"names":["TextHighlight","props","text","highlight","trimmedHighlightText","trim","regex","RegExp","replace","mark"],"mappings":";;;;;;;~~AAQA~~;;~~AALA~~;;~~AAHA~~;AACA;AACA;;AAGA;AACA;AACA;;~~AAQA~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAKC,KAAF,IAAiC;AAC7D,QAAM;AAAEC,IAAAA,IAAI,GAAG,EAAT;AAAaC,IAAAA,SAAS,GAAG;AAAzB,MAAgCF,KAAtC;AACA,QAAMG,oBAAoB,GAAGD,SAAS,CAACE,IAAV,EAA7B;;AAEA,MAAK,CAAED,oBAAP,EAA8B;AAC7B,WAAO,qDAAIF,IAAJ,CAAP;AACA;;AAED,QAAMI,KAAK,GAAG,IAAIC,MAAJ,CACZ,IAAI,~~0BAAcH~~,oBAAd,CAAsC,GAD9B,EAEb,IAFa,CAAd;AAKA,SAAO,uCAA0BF,IAAI,CAACM,OAAL,CAAcF,KAAd,EAAqB,iBAArB,CAA1B,EAAoE;AAC1EG,IAAAA,IAAI,EAAE;AADoE,GAApE,CAAP;AAGA,CAhBM;;;eAkBQT,a","sourcesContent":["/*\n ~~External~~ dependencies\n /\nimport { ~~escapeRegExp~~ } from '~~lodash~~';\n\n/\n ~~WordPress~~ dependencies\n /\nimport { ~~createInterpolateElement~~ } from '~~@wordpress~~/~~element~~';\~~n\n/\n Internal dependencies\n /\~~nimport type { TextHighlightProps } from './types';\n\n/\n Highlights occurrences of a given string within another string of text. Wraps\n * each match with a `<mark>` tag which provides browser default styling.\n \n ```jsx\n * import { TextHighlight } from '@wordpress/components';\n \n const MyTextHighlight = () => (\n * <TextHighlight\n * text=\"Why do we like Gutenberg? Because Gutenberg is the best!\"\n * highlight=\"Gutenberg\"\n * />\n * );\n * ```\n */\nexport const TextHighlight = ( props: TextHighlightProps ) => {\n\tconst { text = '', highlight = '' } = props;\n\tconst trimmedHighlightText = highlight.trim();\n\n\tif ( ! trimmedHighlightText ) {\n\t\treturn <>{ text }</>;\n\t}\n\n\tconst regex = new RegExp(\n\t\t`(${ escapeRegExp( trimmedHighlightText ) })`,\n\t\t'gi'\n\t);\n\n\treturn createInterpolateElement( text.replace( regex, '<mark>$&</mark>' ), {\n\t\tmark: <mark />,\n\t} );\n};\n\nexport default TextHighlight;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/text-highlight/index.tsx"],"names":["TextHighlight","props","text","highlight","trimmedHighlightText","trim","regex","RegExp","replace","mark"],"mappings":";;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAKC,KAAF,IAAiC;AAC7D,QAAM;AAAEC,IAAAA,IAAI,GAAG,EAAT;AAAaC,IAAAA,SAAS,GAAG;AAAzB,MAAgCF,KAAtC;AACA,QAAMG,oBAAoB,GAAGD,SAAS,CAACE,IAAV,EAA7B;;AAEA,MAAK,CAAED,oBAAP,EAA8B;AAC7B,WAAO,qDAAIF,IAAJ,CAAP;AACA;;AAED,QAAMI,KAAK,GAAG,IAAIC,MAAJ,CACZ,IAAI,2BAAcH,oBAAd,CAAsC,GAD9B,EAEb,IAFa,CAAd;AAKA,SAAO,uCAA0BF,IAAI,CAACM,OAAL,CAAcF,KAAd,EAAqB,iBAArB,CAA1B,EAAoE;AAC1EG,IAAAA,IAAI,EAAE;AADoE,GAApE,CAAP;AAGA,CAhBM;;;eAkBQT,a","sourcesContent":["/*\n WordPress dependencies\n /\nimport { createInterpolateElement } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { escapeRegExp } from '../utils/strings';\nimport type { TextHighlightProps } from './types';\n\n/\n Highlights occurrences of a given string within another string of text. Wraps\n * each match with a `<mark>` tag which provides browser default styling.\n \n ```jsx\n * import { TextHighlight } from '@wordpress/components';\n \n const MyTextHighlight = () => (\n * <TextHighlight\n * text=\"Why do we like Gutenberg? Because Gutenberg is the best!\"\n * highlight=\"Gutenberg\"\n * />\n * );\n * ```\n */\nexport const TextHighlight = ( props: TextHighlightProps ) => {\n\tconst { text = '', highlight = '' } = props;\n\tconst trimmedHighlightText = highlight.trim();\n\n\tif ( ! trimmedHighlightText ) {\n\t\treturn <>{ text }</>;\n\t}\n\n\tconst regex = new RegExp(\n\t\t`(${ escapeRegExp( trimmedHighlightText ) })`,\n\t\t'gi'\n\t);\n\n\treturn createInterpolateElement( text.replace( regex, '<mark>$&</mark>' ), {\n\t\tmark: <mark />,\n\t} );\n};\n\nexport default TextHighlight;\n"]}

package/build/textarea-control/index.js CHANGED Viewed

@@ -53,10 +53,9 @@ var _textareaControlStyles = require("./styles/textarea-control-styles");
  * };
  * ```
  */
-function TextareaControl( // ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
-// ref forwarding to TextareaControl.
-props) {
+function TextareaControl(props) {
   const {
+    __nextHasNoMarginBottom,
     label,
     hideLabelFromVision,
     value,
@@ -72,6 +71,7 @@ props) {
   const onChangeValue = event => onChange(event.target.value);
   return (0, _element.createElement)(_baseControl.default, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: label,
     hideLabelFromVision: hideLabelFromVision,
     id: id,

package/build/textarea-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/textarea-control/index.tsx"],"names":["TextareaControl","props","label","hideLabelFromVision","value","help","onChange","rows","className","additionalProps","instanceId","id","onChangeValue","event","target","undefined"],"mappings":";;;;;;;;;;;;;;AAQA;;AAKA;;AACA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,eAAT,~~EACN;AACA;AACAC~~,~~KAHM~~,~~EAOL~~;AACD,QAAM;AACLC,IAAAA,~~KADK~~;AAELC,IAAAA,~~mBAFK~~;AAGLC,IAAAA,~~KAHK~~;AAILC,IAAAA,~~IAJK~~;AAKLC,IAAAA,~~QALK~~;AAMLC,IAAAA,IAAI,GAAG,~~CANF~~;~~AAOLC~~,IAAAA,~~SAPK~~;~~AAQL~~,OAAGC;~~AARE~~,~~MASFR~~,~~KATJ~~;~~AAUA~~,~~QAAMS~~,UAAU,GAAG,~~4BAAeV~~,eAAf,CAAnB;AACA,~~QAAMW~~,EAAE,GAAI,8BAA8BD,UAAY,EAAtD;;AACA,QAAME,aAAa,GAAKC,KAAF,IACrBP,QAAQ,CAAEO,KAAK,CAACC,MAAN,CAAaV,KAAf,CADT;;AAGA,SACC,4BAAC,oBAAD;AACC,IAAA,~~KAAK~~,~~EAAGF~~,~~KADT~~;AAEC,IAAA,~~mBAAmB~~,EAAGC,~~mBAFvB~~;AAGC,IAAA,EAAE,EAAGQ,~~EAHN~~;~~AAIC~~,IAAA,IAAI,EAAGN,~~IAJR~~;~~AAKC~~,IAAA,SAAS,EAAGG;~~AALb~~,~~KAOC~~,4BAAC,qCAAD;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,EAAE,EAAGG,EAFN;AAGC,IAAA,IAAI,EAAGJ,IAHR;AAIC,IAAA,QAAQ,EAAGK,aAJZ;AAKC,wBAAmB,CAAC,CAAEP,IAAH,GAAUM,EAAE,GAAG,QAAf,GAA0BI,SAL9C;AAMC,IAAA,KAAK,EAAGX;AANT,KAOMK,eAPN,~~EAPD~~,CADD;~~AAmBA~~;;~~eAEcT~~,e","sourcesContent":["/*\n External dependencies\n /\nimport type { ChangeEvent } from 'react';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport BaseControl from '../base-control';\nimport { StyledTextarea } from './styles/textarea-control-styles';\nimport type { TextareaControlProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\n/\n TextareaControls are TextControls that allow for multiple lines of text, and\n * wrap overflow text onto a new line. They are a fixed height and scroll\n * vertically when the cursor reaches the bottom of the field.\n \n ```jsx\n * import { TextareaControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyTextareaControl = () => {\n * const [ text, setText ] = useState( '' );\n \n return (\n * <TextareaControl\n * label=\"Text\"\n * help=\"Enter some text\"\n * value={ text }\n * onChange={ ( value ) => setText( value ) }\n * />\n * );\n * };\n * ```\n */\nexport function TextareaControl(\n\~~t// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add\n\t// ref forwarding to TextareaControl.\n\~~tprops: ~~Omit<\n\t\tWordPressComponentProps~~< TextareaControlProps, 'textarea', false ~~>,\n\t\t'ref'\n\t~~>\n) {\n\tconst {\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tonChange,\n\t\trows = 4,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextareaControl );\n\tconst id = `inspector-textarea-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLTextAreaElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<StyledTextarea\n\t\t\t\tclassName=\"components-textarea-control__input\"\n\t\t\t\tid={ id }\n\t\t\t\trows={ rows }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tvalue={ value }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default TextareaControl;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/textarea-control/index.tsx"],"names":["TextareaControl","props","__nextHasNoMarginBottom","label","hideLabelFromVision","value","help","onChange","rows","className","additionalProps","instanceId","id","onChangeValue","event","target","undefined"],"mappings":";;;;;;;;;;;;;;AAQA;;AAKA;;AACA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,eAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,uBADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,mBAHK;AAILC,IAAAA,KAJK;AAKLC,IAAAA,IALK;AAMLC,IAAAA,QANK;AAOLC,IAAAA,IAAI,GAAG,CAPF;AAQLC,IAAAA,SARK;AASL,OAAGC;AATE,MAUFT,KAVJ;AAWA,QAAMU,UAAU,GAAG,4BAAeX,eAAf,CAAnB;AACA,QAAMY,EAAE,GAAI,8BAA8BD,UAAY,EAAtD;;AACA,QAAME,aAAa,GAAKC,KAAF,IACrBP,QAAQ,CAAEO,KAAK,CAACC,MAAN,CAAaV,KAAf,CADT;;AAGA,SACC,4BAAC,oBAAD;AACC,IAAA,uBAAuB,EAAGH,uBAD3B;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,mBAAmB,EAAGC,mBAHvB;AAIC,IAAA,EAAE,EAAGQ,EAJN;AAKC,IAAA,IAAI,EAAGN,IALR;AAMC,IAAA,SAAS,EAAGG;AANb,KAQC,4BAAC,qCAAD;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,EAAE,EAAGG,EAFN;AAGC,IAAA,IAAI,EAAGJ,IAHR;AAIC,IAAA,QAAQ,EAAGK,aAJZ;AAKC,wBAAmB,CAAC,CAAEP,IAAH,GAAUM,EAAE,GAAG,QAAf,GAA0BI,SAL9C;AAMC,IAAA,KAAK,EAAGX;AANT,KAOMK,eAPN,EARD,CADD;AAoBA;;eAEcV,e","sourcesContent":["/*\n External dependencies\n /\nimport type { ChangeEvent } from 'react';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport BaseControl from '../base-control';\nimport { StyledTextarea } from './styles/textarea-control-styles';\nimport type { TextareaControlProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\n/\n TextareaControls are TextControls that allow for multiple lines of text, and\n * wrap overflow text onto a new line. They are a fixed height and scroll\n * vertically when the cursor reaches the bottom of the field.\n \n ```jsx\n * import { TextareaControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyTextareaControl = () => {\n * const [ text, setText ] = useState( '' );\n \n return (\n * <TextareaControl\n * label=\"Text\"\n * help=\"Enter some text\"\n * value={ text }\n * onChange={ ( value ) => setText( value ) }\n * />\n * );\n * };\n * ```\n */\nexport function TextareaControl(\n\tprops: WordPressComponentProps< TextareaControlProps, 'textarea', false >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tonChange,\n\t\trows = 4,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextareaControl );\n\tconst id = `inspector-textarea-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLTextAreaElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<StyledTextarea\n\t\t\t\tclassName=\"components-textarea-control__input\"\n\t\t\t\tid={ id }\n\t\t\t\trows={ rows }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tvalue={ value }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default TextareaControl;\n"]}