@wordpress/components 28.8.4 → 28.8.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +3 -0
- package/build/composite/group-label.js +7 -1
- package/build/composite/group-label.js.map +1 -1
- package/build/composite/group.js +7 -1
- package/build/composite/group.js.map +1 -1
- package/build/composite/hover.js +8 -2
- package/build/composite/hover.js.map +1 -1
- package/build/composite/index.js +5 -1
- package/build/composite/index.js.map +1 -1
- package/build/composite/item.js +16 -1
- package/build/composite/item.js.map +1 -1
- package/build/composite/row.js +7 -1
- package/build/composite/row.js.map +1 -1
- package/build/composite/typeahead.js +8 -2
- package/build/composite/typeahead.js.map +1 -1
- package/build/date-time/date/index.js +4 -2
- package/build/date-time/date/index.js.map +1 -1
- package/build-module/composite/group-label.js +7 -1
- package/build-module/composite/group-label.js.map +1 -1
- package/build-module/composite/group.js +7 -1
- package/build-module/composite/group.js.map +1 -1
- package/build-module/composite/hover.js +8 -2
- package/build-module/composite/hover.js.map +1 -1
- package/build-module/composite/index.js +5 -1
- package/build-module/composite/index.js.map +1 -1
- package/build-module/composite/item.js +16 -1
- package/build-module/composite/item.js.map +1 -1
- package/build-module/composite/row.js +7 -1
- package/build-module/composite/row.js.map +1 -1
- package/build-module/composite/typeahead.js +8 -2
- package/build-module/composite/typeahead.js.map +1 -1
- package/build-module/date-time/date/index.js +4 -2
- package/build-module/date-time/date/index.js.map +1 -1
- package/build-types/composite/group-label.d.ts.map +1 -1
- package/build-types/composite/index.d.ts.map +1 -1
- package/build-types/composite/item.d.ts.map +1 -1
- package/build-types/composite/test/index.d.ts +2 -0
- package/build-types/composite/test/index.d.ts.map +1 -0
- package/build-types/date-time/date/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/composite/group-label.tsx +7 -5
- package/src/composite/group.tsx +7 -7
- package/src/composite/hover.tsx +7 -7
- package/src/composite/index.tsx +6 -1
- package/src/composite/item.tsx +19 -1
- package/src/composite/row.tsx +7 -7
- package/src/composite/test/index.tsx +123 -0
- package/src/composite/typeahead.tsx +7 -7
- package/src/date-time/date/index.tsx +2 -0
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Ariakit","isRTL","useMemo","forwardRef","CompositeContext","CompositeGroup","CompositeGroupLabel","CompositeHover","CompositeItem","CompositeRow","CompositeTypeahead","jsx","_jsx","Composite","Object","assign","activeId","defaultActiveId","setActiveId","focusLoop","focusWrap","focusShift","virtualFocus","orientation","rtl","children","disabled","props","ref","store","useCompositeStore","contextValue","Provider","value","Group","displayName","GroupLabel","Item","Row","Hover","Typeahead","Context"],"sources":["@wordpress/components/src/composite/index.tsx"],"sourcesContent":["/**\n * Composite is a component that may contain navigable items represented by\n * Composite.Item. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * @see https://ariakit.org/components/composite\n */\n\n/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { CompositeContext } from './context';\nimport { CompositeGroup } from './group';\nimport { CompositeGroupLabel } from './group-label';\nimport { CompositeHover } from './hover';\nimport { CompositeItem } from './item';\nimport { CompositeRow } from './row';\nimport { CompositeTypeahead } from './typeahead';\nimport type { CompositeProps } from './types';\n\n/**\n * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)\n * role, which provides a single tab stop on the page and arrow key navigation\n * through the focusable descendants.\n *\n * @example\n * ```jsx\n * import { Composite } from '@wordpress/components';\n *\n * <Composite>\n * <Composite.Item>Item 1</Composite.Item>\n * <Composite.Item>Item 2</Composite.Item>\n * </Composite>\n * ```\n */\nexport const Composite = Object.assign(\n\tforwardRef<\n\t\tHTMLDivElement,\n\t\tWordPressComponentProps< CompositeProps, 'div', false >\n\t>( function Composite(\n\t\t{\n\t\t\t// Composite store props\n\t\t\tactiveId,\n\t\t\tdefaultActiveId,\n\t\t\tsetActiveId,\n\t\t\tfocusLoop = false,\n\t\t\tfocusWrap = false,\n\t\t\tfocusShift = false,\n\t\t\tvirtualFocus = false,\n\t\t\torientation = 'both',\n\t\t\trtl = isRTL(),\n\n\t\t\t// Composite component props\n\t\t\tchildren,\n\t\t\tdisabled = false,\n\n\t\t\t// Rest props\n\t\t\t...props\n\t\t},\n\t\tref\n\t) {\n\t\tconst store = Ariakit.useCompositeStore( {\n\t\t\tactiveId,\n\t\t\tdefaultActiveId,\n\t\t\tsetActiveId,\n\t\t\tfocusLoop,\n\t\t\tfocusWrap,\n\t\t\tfocusShift,\n\t\t\tvirtualFocus,\n\t\t\torientation,\n\t\t\trtl,\n\t\t} );\n\n\t\tconst contextValue = useMemo(\n\t\t\t() => ( {\n\t\t\t\tstore,\n\t\t\t} ),\n\t\t\t[ store ]\n\t\t);\n\n\t\treturn (\n\t\t\t<Ariakit.Composite\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tstore={ store }\n\t\t\t\t{ ...props }\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t<CompositeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CompositeContext.Provider>\n\t\t\t</Ariakit.Composite>\n\t\t);\n\t} ),\n\t{\n\t\t/**\n\t\t * Renders a group element for composite items.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t * <Composite.Group>\n\t\t * <Composite.GroupLabel>Label</Composite.GroupLabel>\n\t\t * <Composite.Item>Item 1</Composite.Item>\n\t\t * <Composite.Item>Item 2</Composite.Item>\n\t\t * </CompositeGroup>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tGroup: Object.assign( CompositeGroup, {\n\t\t\tdisplayName: 'Composite.Group',\n\t\t} ),\n\t\t/**\n\t\t * Renders a label in a composite group. This component must be wrapped with\n\t\t * `Composite.Group` so the `aria-labelledby` prop is properly set on the\n\t\t * composite group element.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t * <Composite.Group>\n\t\t * <Composite.GroupLabel>Label</Composite.GroupLabel>\n\t\t * <Composite.Item>Item 1</Composite.Item>\n\t\t * <Composite.Item>Item 2</Composite.Item>\n\t\t * </CompositeGroup>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tGroupLabel: Object.assign( CompositeGroupLabel, {\n\t\t\tdisplayName: 'Composite.GroupLabel',\n\t\t} ),\n\t\t/**\n\t\t * Renders a composite item.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t * <Composite.Item>Item 1</Composite.Item>\n\t\t * <Composite.Item>Item 2</Composite.Item>\n\t\t * <Composite.Item>Item 3</Composite.Item>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tItem: Object.assign( CompositeItem, { displayName: 'Composite.Item' } ),\n\t\t/**\n\t\t * Renders a composite row. Wrapping `Composite.Item` elements within\n\t\t * `Composite.Row` will create a two-dimensional composite widget, such as a\n\t\t * grid.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t * <Composite.Row>\n\t\t * <Composite.Item>Item 1.1</Composite.Item>\n\t\t * <Composite.Item>Item 1.2</Composite.Item>\n\t\t * <Composite.Item>Item 1.3</Composite.Item>\n\t\t * </Composite.Row>\n\t\t * <Composite.Row>\n\t\t * <Composite.Item>Item 2.1</Composite.Item>\n\t\t * <Composite.Item>Item 2.2</Composite.Item>\n\t\t * <Composite.Item>Item 2.3</Composite.Item>\n\t\t * </Composite.Row>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tRow: Object.assign( CompositeRow, { displayName: 'Composite.Row' } ),\n\t\t/**\n\t\t * Renders an element in a composite widget that receives focus on mouse move\n\t\t * and loses focus to the composite base element on mouse leave. This should\n\t\t * be combined with the `Composite.Item` component.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t * <Composite.Hover render={ <Composite.Item /> }>\n\t\t * Item 1\n\t\t * </Composite.Hover>\n\t\t * <Composite.Hover render={ <Composite.Item /> }>\n\t\t * Item 2\n\t\t * </Composite.Hover>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tHover: Object.assign( CompositeHover, {\n\t\t\tdisplayName: 'Composite.Hover',\n\t\t} ),\n\t\t/**\n\t\t * Renders a component that adds typeahead functionality to composite\n\t\t * components. Hitting printable character keys will move focus to the next\n\t\t * composite item that begins with the input characters.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite render={ <CompositeTypeahead /> }>\n\t\t * <Composite.Item>Item 1</Composite.Item>\n\t\t * <Composite.Item>Item 2</Composite.Item>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tTypeahead: Object.assign( CompositeTypeahead, {\n\t\t\tdisplayName: 'Composite.Typeahead',\n\t\t} ),\n\t\t/**\n\t\t * The React context used by the composite components. It can be used by\n\t\t * to access the composite store, and to forward the context when composite\n\t\t * sub-components are rendered across portals (ie. `SlotFill` components)\n\t\t * that would not otherwise forward the context to the `Fill` children.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t * import { useContext } from '@wordpress/element';\n\t\t *\n\t\t * const compositeContext = useContext( Composite.Context );\n\t\t * ```\n\t\t */\n\t\tContext: Object.assign( CompositeContext, {\n\t\t\tdisplayName: 'Composite.Context',\n\t\t} ),\n\t}\n);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,OAAO,EAAEC,UAAU,QAAQ,oBAAoB;;AAExD;AACA;AACA;;AAEA,SAASC,gBAAgB,QAAQ,WAAW;AAC5C,SAASC,cAAc,QAAQ,SAAS;AACxC,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,cAAc,QAAQ,SAAS;AACxC,SAASC,aAAa,QAAQ,QAAQ;AACtC,SAASC,YAAY,QAAQ,OAAO;AACpC,SAASC,kBAAkB,QAAQ,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAGC,MAAM,CAACC,MAAM,CACrCZ,UAAU,CAGP,SAASU,SAASA,CACpB;EACC;EACAG,QAAQ;EACRC,eAAe;EACfC,WAAW;EACXC,SAAS,GAAG,KAAK;EACjBC,SAAS,GAAG,KAAK;EACjBC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,KAAK;EACpBC,WAAW,GAAG,MAAM;EACpBC,GAAG,GAAGvB,KAAK,CAAC,CAAC;EAEb;EACAwB,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAEhB;EACA,GAAGC;AACJ,CAAC,EACDC,GAAG,EACF;EACD,MAAMC,KAAK,GAAG7B,OAAO,CAAC8B,iBAAiB,CAAE;IACxCd,QAAQ;IACRC,eAAe;IACfC,WAAW;IACXC,SAAS;IACTC,SAAS;IACTC,UAAU;IACVC,YAAY;IACZC,WAAW;IACXC;EACD,CAAE,CAAC;EAEH,MAAMO,YAAY,GAAG7B,OAAO,CAC3B,OAAQ;IACP2B;EACD,CAAC,CAAE,EACH,CAAEA,KAAK,CACR,CAAC;EAED,oBACCjB,IAAA,CAACZ,OAAO,CAACa,SAAS;IACjBa,QAAQ,EAAGA,QAAU;IACrBG,KAAK,EAAGA,KAAO;IAAA,GACVF,KAAK;IACVC,GAAG,EAAGA,GAAK;IAAAH,QAAA,eAEXb,IAAA,CAACR,gBAAgB,CAAC4B,QAAQ;MAACC,KAAK,EAAGF,YAAc;MAAAN,QAAA,EAC9CA;IAAQ,CACgB;EAAC,CACV,CAAC;AAEtB,CAAE,CAAC,EACH;EACC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACES,KAAK,EAAEpB,MAAM,CAACC,MAAM,CAAEV,cAAc,EAAE;IACrC8B,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEC,UAAU,EAAEtB,MAAM,CAACC,MAAM,CAAET,mBAAmB,EAAE;IAC/C6B,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEE,IAAI,EAAEvB,MAAM,CAACC,MAAM,CAAEP,aAAa,EAAE;IAAE2B,WAAW,EAAE;EAAiB,CAAE,CAAC;EACvE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEG,GAAG,EAAExB,MAAM,CAACC,MAAM,CAAEN,YAAY,EAAE;IAAE0B,WAAW,EAAE;EAAgB,CAAE,CAAC;EACpE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEI,KAAK,EAAEzB,MAAM,CAACC,MAAM,CAAER,cAAc,EAAE;IACrC4B,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEK,SAAS,EAAE1B,MAAM,CAACC,MAAM,CAAEL,kBAAkB,EAAE;IAC7CyB,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEM,OAAO,EAAE3B,MAAM,CAACC,MAAM,CAAEX,gBAAgB,EAAE;IACzC+B,WAAW,EAAE;EACd,CAAE;AACH,CACD,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["Ariakit","isRTL","useMemo","forwardRef","CompositeContext","CompositeGroup","CompositeGroupLabel","CompositeHover","CompositeItem","CompositeRow","CompositeTypeahead","jsx","_jsx","Composite","Object","assign","activeId","defaultActiveId","setActiveId","focusLoop","focusWrap","focusShift","virtualFocus","orientation","rtl","children","disabled","props","ref","storeProp","store","internalStore","useCompositeStore","contextValue","Provider","value","Group","displayName","GroupLabel","Item","Row","Hover","Typeahead","Context"],"sources":["@wordpress/components/src/composite/index.tsx"],"sourcesContent":["/**\n * Composite is a component that may contain navigable items represented by\n * Composite.Item. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * @see https://ariakit.org/components/composite\n */\n\n/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { CompositeContext } from './context';\nimport { CompositeGroup } from './group';\nimport { CompositeGroupLabel } from './group-label';\nimport { CompositeHover } from './hover';\nimport { CompositeItem } from './item';\nimport { CompositeRow } from './row';\nimport { CompositeTypeahead } from './typeahead';\nimport type { CompositeProps } from './types';\n\n/**\n * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)\n * role, which provides a single tab stop on the page and arrow key navigation\n * through the focusable descendants.\n *\n * @example\n * ```jsx\n * import { Composite } from '@wordpress/components';\n *\n * <Composite>\n * <Composite.Item>Item 1</Composite.Item>\n * <Composite.Item>Item 2</Composite.Item>\n * </Composite>\n * ```\n */\nexport const Composite = Object.assign(\n\tforwardRef<\n\t\tHTMLDivElement,\n\t\tWordPressComponentProps< CompositeProps, 'div', false >\n\t>( function Composite(\n\t\t{\n\t\t\t// Composite store props\n\t\t\tactiveId,\n\t\t\tdefaultActiveId,\n\t\t\tsetActiveId,\n\t\t\tfocusLoop = false,\n\t\t\tfocusWrap = false,\n\t\t\tfocusShift = false,\n\t\t\tvirtualFocus = false,\n\t\t\torientation = 'both',\n\t\t\trtl = isRTL(),\n\n\t\t\t// Composite component props\n\t\t\tchildren,\n\t\t\tdisabled = false,\n\n\t\t\t// Rest props\n\t\t\t...props\n\t\t},\n\t\tref\n\t) {\n\t\t// @ts-expect-error The store prop is undocumented and only used by the\n\t\t// legacy compat layer.\n\t\tconst storeProp = props.store as Ariakit.CompositeStore;\n\t\tconst internalStore = Ariakit.useCompositeStore( {\n\t\t\tactiveId,\n\t\t\tdefaultActiveId,\n\t\t\tsetActiveId,\n\t\t\tfocusLoop,\n\t\t\tfocusWrap,\n\t\t\tfocusShift,\n\t\t\tvirtualFocus,\n\t\t\torientation,\n\t\t\trtl,\n\t\t} );\n\n\t\tconst store = storeProp ?? internalStore;\n\n\t\tconst contextValue = useMemo(\n\t\t\t() => ( {\n\t\t\t\tstore,\n\t\t\t} ),\n\t\t\t[ store ]\n\t\t);\n\n\t\treturn (\n\t\t\t<Ariakit.Composite\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tstore={ store }\n\t\t\t\t{ ...props }\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t<CompositeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CompositeContext.Provider>\n\t\t\t</Ariakit.Composite>\n\t\t);\n\t} ),\n\t{\n\t\t/**\n\t\t * Renders a group element for composite items.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t * <Composite.Group>\n\t\t * <Composite.GroupLabel>Label</Composite.GroupLabel>\n\t\t * <Composite.Item>Item 1</Composite.Item>\n\t\t * <Composite.Item>Item 2</Composite.Item>\n\t\t * </CompositeGroup>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tGroup: Object.assign( CompositeGroup, {\n\t\t\tdisplayName: 'Composite.Group',\n\t\t} ),\n\t\t/**\n\t\t * Renders a label in a composite group. This component must be wrapped with\n\t\t * `Composite.Group` so the `aria-labelledby` prop is properly set on the\n\t\t * composite group element.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t * <Composite.Group>\n\t\t * <Composite.GroupLabel>Label</Composite.GroupLabel>\n\t\t * <Composite.Item>Item 1</Composite.Item>\n\t\t * <Composite.Item>Item 2</Composite.Item>\n\t\t * </CompositeGroup>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tGroupLabel: Object.assign( CompositeGroupLabel, {\n\t\t\tdisplayName: 'Composite.GroupLabel',\n\t\t} ),\n\t\t/**\n\t\t * Renders a composite item.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t * <Composite.Item>Item 1</Composite.Item>\n\t\t * <Composite.Item>Item 2</Composite.Item>\n\t\t * <Composite.Item>Item 3</Composite.Item>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tItem: Object.assign( CompositeItem, { displayName: 'Composite.Item' } ),\n\t\t/**\n\t\t * Renders a composite row. Wrapping `Composite.Item` elements within\n\t\t * `Composite.Row` will create a two-dimensional composite widget, such as a\n\t\t * grid.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t * <Composite.Row>\n\t\t * <Composite.Item>Item 1.1</Composite.Item>\n\t\t * <Composite.Item>Item 1.2</Composite.Item>\n\t\t * <Composite.Item>Item 1.3</Composite.Item>\n\t\t * </Composite.Row>\n\t\t * <Composite.Row>\n\t\t * <Composite.Item>Item 2.1</Composite.Item>\n\t\t * <Composite.Item>Item 2.2</Composite.Item>\n\t\t * <Composite.Item>Item 2.3</Composite.Item>\n\t\t * </Composite.Row>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tRow: Object.assign( CompositeRow, { displayName: 'Composite.Row' } ),\n\t\t/**\n\t\t * Renders an element in a composite widget that receives focus on mouse move\n\t\t * and loses focus to the composite base element on mouse leave. This should\n\t\t * be combined with the `Composite.Item` component.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t * <Composite.Hover render={ <Composite.Item /> }>\n\t\t * Item 1\n\t\t * </Composite.Hover>\n\t\t * <Composite.Hover render={ <Composite.Item /> }>\n\t\t * Item 2\n\t\t * </Composite.Hover>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tHover: Object.assign( CompositeHover, {\n\t\t\tdisplayName: 'Composite.Hover',\n\t\t} ),\n\t\t/**\n\t\t * Renders a component that adds typeahead functionality to composite\n\t\t * components. Hitting printable character keys will move focus to the next\n\t\t * composite item that begins with the input characters.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite render={ <CompositeTypeahead /> }>\n\t\t * <Composite.Item>Item 1</Composite.Item>\n\t\t * <Composite.Item>Item 2</Composite.Item>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tTypeahead: Object.assign( CompositeTypeahead, {\n\t\t\tdisplayName: 'Composite.Typeahead',\n\t\t} ),\n\t\t/**\n\t\t * The React context used by the composite components. It can be used by\n\t\t * to access the composite store, and to forward the context when composite\n\t\t * sub-components are rendered across portals (ie. `SlotFill` components)\n\t\t * that would not otherwise forward the context to the `Fill` children.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t * import { useContext } from '@wordpress/element';\n\t\t *\n\t\t * const compositeContext = useContext( Composite.Context );\n\t\t * ```\n\t\t */\n\t\tContext: Object.assign( CompositeContext, {\n\t\t\tdisplayName: 'Composite.Context',\n\t\t} ),\n\t}\n);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,OAAO,EAAEC,UAAU,QAAQ,oBAAoB;;AAExD;AACA;AACA;;AAEA,SAASC,gBAAgB,QAAQ,WAAW;AAC5C,SAASC,cAAc,QAAQ,SAAS;AACxC,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,cAAc,QAAQ,SAAS;AACxC,SAASC,aAAa,QAAQ,QAAQ;AACtC,SAASC,YAAY,QAAQ,OAAO;AACpC,SAASC,kBAAkB,QAAQ,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAGC,MAAM,CAACC,MAAM,CACrCZ,UAAU,CAGP,SAASU,SAASA,CACpB;EACC;EACAG,QAAQ;EACRC,eAAe;EACfC,WAAW;EACXC,SAAS,GAAG,KAAK;EACjBC,SAAS,GAAG,KAAK;EACjBC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,KAAK;EACpBC,WAAW,GAAG,MAAM;EACpBC,GAAG,GAAGvB,KAAK,CAAC,CAAC;EAEb;EACAwB,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAEhB;EACA,GAAGC;AACJ,CAAC,EACDC,GAAG,EACF;EACD;EACA;EACA,MAAMC,SAAS,GAAGF,KAAK,CAACG,KAA+B;EACvD,MAAMC,aAAa,GAAG/B,OAAO,CAACgC,iBAAiB,CAAE;IAChDhB,QAAQ;IACRC,eAAe;IACfC,WAAW;IACXC,SAAS;IACTC,SAAS;IACTC,UAAU;IACVC,YAAY;IACZC,WAAW;IACXC;EACD,CAAE,CAAC;EAEH,MAAMM,KAAK,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIE,aAAa;EAExC,MAAME,YAAY,GAAG/B,OAAO,CAC3B,OAAQ;IACP4B;EACD,CAAC,CAAE,EACH,CAAEA,KAAK,CACR,CAAC;EAED,oBACClB,IAAA,CAACZ,OAAO,CAACa,SAAS;IACjBa,QAAQ,EAAGA,QAAU;IACrBI,KAAK,EAAGA,KAAO;IAAA,GACVH,KAAK;IACVC,GAAG,EAAGA,GAAK;IAAAH,QAAA,eAEXb,IAAA,CAACR,gBAAgB,CAAC8B,QAAQ;MAACC,KAAK,EAAGF,YAAc;MAAAR,QAAA,EAC9CA;IAAQ,CACgB;EAAC,CACV,CAAC;AAEtB,CAAE,CAAC,EACH;EACC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEW,KAAK,EAAEtB,MAAM,CAACC,MAAM,CAAEV,cAAc,EAAE;IACrCgC,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEC,UAAU,EAAExB,MAAM,CAACC,MAAM,CAAET,mBAAmB,EAAE;IAC/C+B,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEE,IAAI,EAAEzB,MAAM,CAACC,MAAM,CAAEP,aAAa,EAAE;IAAE6B,WAAW,EAAE;EAAiB,CAAE,CAAC;EACvE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEG,GAAG,EAAE1B,MAAM,CAACC,MAAM,CAAEN,YAAY,EAAE;IAAE4B,WAAW,EAAE;EAAgB,CAAE,CAAC;EACpE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEI,KAAK,EAAE3B,MAAM,CAACC,MAAM,CAAER,cAAc,EAAE;IACrC8B,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEK,SAAS,EAAE5B,MAAM,CAACC,MAAM,CAAEL,kBAAkB,EAAE;IAC7C2B,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEM,OAAO,EAAE7B,MAAM,CAACC,MAAM,CAAEX,gBAAgB,EAAE;IACzCiC,WAAW,EAAE;EACd,CAAE;AACH,CACD,CAAC","ignoreList":[]}
|
|
@@ -15,9 +15,24 @@ import { forwardRef } from '@wordpress/element';
|
|
|
15
15
|
import { useCompositeContext } from './context';
|
|
16
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
17
|
export const CompositeItem = forwardRef(function CompositeItem(props, ref) {
|
|
18
|
+
var _props$store;
|
|
18
19
|
const context = useCompositeContext();
|
|
20
|
+
|
|
21
|
+
// @ts-expect-error The store prop is undocumented and only used by the
|
|
22
|
+
// legacy compat layer. The `store` prop is documented, but its type is
|
|
23
|
+
// obfuscated to discourage its use outside of the component's internals.
|
|
24
|
+
const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
|
|
25
|
+
|
|
26
|
+
// If the active item is not connected, Composite may end up in a state
|
|
27
|
+
// where none of the items are tabbable. In this case, we force all items to
|
|
28
|
+
// be tabbable, so that as soon as an item received focus, it becomes active
|
|
29
|
+
// and Composite goes back to working as expected.
|
|
30
|
+
const tabbable = Ariakit.useStoreState(store, state => {
|
|
31
|
+
return state?.activeId !== null && !store?.item(state?.activeId)?.element?.isConnected;
|
|
32
|
+
});
|
|
19
33
|
return /*#__PURE__*/_jsx(Ariakit.CompositeItem, {
|
|
20
|
-
store:
|
|
34
|
+
store: store,
|
|
35
|
+
tabbable: tabbable,
|
|
21
36
|
...props,
|
|
22
37
|
ref: ref
|
|
23
38
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Ariakit","forwardRef","useCompositeContext","jsx","_jsx","CompositeItem","props","ref","context","store"],"sources":["@wordpress/components/src/composite/item.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useCompositeContext } from './context';\nimport type { CompositeItemProps } from './types';\n\nexport const CompositeItem = forwardRef<\n\tHTMLButtonElement,\n\tWordPressComponentProps< CompositeItemProps, 'button', false >\n>( function CompositeItem( props, ref ) {\n\tconst context = useCompositeContext();\n\treturn (\n\t\t<Ariakit.CompositeItem\n\t\t\tstore={
|
|
1
|
+
{"version":3,"names":["Ariakit","forwardRef","useCompositeContext","jsx","_jsx","CompositeItem","props","ref","_props$store","context","store","tabbable","useStoreState","state","activeId","item","element","isConnected"],"sources":["@wordpress/components/src/composite/item.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useCompositeContext } from './context';\nimport type { CompositeItemProps } from './types';\n\nexport const CompositeItem = forwardRef<\n\tHTMLButtonElement,\n\tWordPressComponentProps< CompositeItemProps, 'button', false >\n>( function CompositeItem( props, ref ) {\n\tconst context = useCompositeContext();\n\n\t// @ts-expect-error The store prop is undocumented and only used by the\n\t// legacy compat layer. The `store` prop is documented, but its type is\n\t// obfuscated to discourage its use outside of the component's internals.\n\tconst store = ( props.store ?? context.store ) as Ariakit.CompositeStore;\n\n\t// If the active item is not connected, Composite may end up in a state\n\t// where none of the items are tabbable. In this case, we force all items to\n\t// be tabbable, so that as soon as an item received focus, it becomes active\n\t// and Composite goes back to working as expected.\n\tconst tabbable = Ariakit.useStoreState( store, ( state ) => {\n\t\treturn (\n\t\t\tstate?.activeId !== null &&\n\t\t\t! store?.item( state?.activeId )?.element?.isConnected\n\t\t);\n\t} );\n\n\treturn (\n\t\t<Ariakit.CompositeItem\n\t\t\tstore={ store }\n\t\t\ttabbable={ tabbable }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t/>\n\t);\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,mBAAmB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGhD,OAAO,MAAMC,aAAa,GAAGJ,UAAU,CAGpC,SAASI,aAAaA,CAAEC,KAAK,EAAEC,GAAG,EAAG;EAAA,IAAAC,YAAA;EACvC,MAAMC,OAAO,GAAGP,mBAAmB,CAAC,CAAC;;EAErC;EACA;EACA;EACA,MAAMQ,KAAK,IAAAF,YAAA,GAAKF,KAAK,CAACI,KAAK,cAAAF,YAAA,cAAAA,YAAA,GAAIC,OAAO,CAACC,KAAiC;;EAExE;EACA;EACA;EACA;EACA,MAAMC,QAAQ,GAAGX,OAAO,CAACY,aAAa,CAAEF,KAAK,EAAIG,KAAK,IAAM;IAC3D,OACCA,KAAK,EAAEC,QAAQ,KAAK,IAAI,IACxB,CAAEJ,KAAK,EAAEK,IAAI,CAAEF,KAAK,EAAEC,QAAS,CAAC,EAAEE,OAAO,EAAEC,WAAW;EAExD,CAAE,CAAC;EAEH,oBACCb,IAAA,CAACJ,OAAO,CAACK,aAAa;IACrBK,KAAK,EAAGA,KAAO;IACfC,QAAQ,EAAGA,QAAU;IAAA,GAChBL,KAAK;IACVC,GAAG,EAAGA;EAAK,CACX,CAAC;AAEJ,CAAE,CAAC","ignoreList":[]}
|
|
@@ -15,9 +15,15 @@ import { forwardRef } from '@wordpress/element';
|
|
|
15
15
|
import { useCompositeContext } from './context';
|
|
16
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
17
|
export const CompositeRow = forwardRef(function CompositeRow(props, ref) {
|
|
18
|
+
var _props$store;
|
|
18
19
|
const context = useCompositeContext();
|
|
20
|
+
|
|
21
|
+
// @ts-expect-error The store prop is undocumented and only used by the
|
|
22
|
+
// legacy compat layer. The `store` prop is documented, but its type is
|
|
23
|
+
// obfuscated to discourage its use outside of the component's internals.
|
|
24
|
+
const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
|
|
19
25
|
return /*#__PURE__*/_jsx(Ariakit.CompositeRow, {
|
|
20
|
-
store:
|
|
26
|
+
store: store,
|
|
21
27
|
...props,
|
|
22
28
|
ref: ref
|
|
23
29
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Ariakit","forwardRef","useCompositeContext","jsx","_jsx","CompositeRow","props","ref","context","store"],"sources":["@wordpress/components/src/composite/row.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useCompositeContext } from './context';\nimport type { CompositeRowProps } from './types';\n\nexport const CompositeRow = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< CompositeRowProps, 'div', false >\n>( function CompositeRow( props, ref ) {\n\tconst context = useCompositeContext();\n\
|
|
1
|
+
{"version":3,"names":["Ariakit","forwardRef","useCompositeContext","jsx","_jsx","CompositeRow","props","ref","_props$store","context","store"],"sources":["@wordpress/components/src/composite/row.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useCompositeContext } from './context';\nimport type { CompositeRowProps } from './types';\n\nexport const CompositeRow = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< CompositeRowProps, 'div', false >\n>( function CompositeRow( props, ref ) {\n\tconst context = useCompositeContext();\n\n\t// @ts-expect-error The store prop is undocumented and only used by the\n\t// legacy compat layer. The `store` prop is documented, but its type is\n\t// obfuscated to discourage its use outside of the component's internals.\n\tconst store = ( props.store ?? context.store ) as Ariakit.CompositeStore;\n\n\treturn <Ariakit.CompositeRow store={ store } { ...props } ref={ ref } />;\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,mBAAmB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGhD,OAAO,MAAMC,YAAY,GAAGJ,UAAU,CAGnC,SAASI,YAAYA,CAAEC,KAAK,EAAEC,GAAG,EAAG;EAAA,IAAAC,YAAA;EACtC,MAAMC,OAAO,GAAGP,mBAAmB,CAAC,CAAC;;EAErC;EACA;EACA;EACA,MAAMQ,KAAK,IAAAF,YAAA,GAAKF,KAAK,CAACI,KAAK,cAAAF,YAAA,cAAAA,YAAA,GAAIC,OAAO,CAACC,KAAiC;EAExE,oBAAON,IAAA,CAACJ,OAAO,CAACK,YAAY;IAACK,KAAK,EAAGA,KAAO;IAAA,GAAMJ,KAAK;IAAGC,GAAG,EAAGA;EAAK,CAAE,CAAC;AACzE,CAAE,CAAC","ignoreList":[]}
|
|
@@ -15,9 +15,15 @@ import { forwardRef } from '@wordpress/element';
|
|
|
15
15
|
import { useCompositeContext } from './context';
|
|
16
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
17
|
export const CompositeTypeahead = forwardRef(function CompositeTypeahead(props, ref) {
|
|
18
|
+
var _props$store;
|
|
18
19
|
const context = useCompositeContext();
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
|
|
21
|
+
// @ts-expect-error The store prop is undocumented and only used by the
|
|
22
|
+
// legacy compat layer. The `store` prop is documented, but its type is
|
|
23
|
+
// obfuscated to discourage its use outside of the component's internals.
|
|
24
|
+
const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
|
|
25
|
+
return /*#__PURE__*/_jsx(Ariakit.CompositeRow, {
|
|
26
|
+
store: store,
|
|
21
27
|
...props,
|
|
22
28
|
ref: ref
|
|
23
29
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Ariakit","forwardRef","useCompositeContext","jsx","_jsx","CompositeTypeahead","props","ref","context","store"],"sources":["@wordpress/components/src/composite/typeahead.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useCompositeContext } from './context';\nimport type { CompositeTypeaheadProps } from './types';\n\nexport const CompositeTypeahead = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< CompositeTypeaheadProps, 'div', false >\n>( function CompositeTypeahead( props, ref ) {\n\tconst context = useCompositeContext();\n\
|
|
1
|
+
{"version":3,"names":["Ariakit","forwardRef","useCompositeContext","jsx","_jsx","CompositeTypeahead","props","ref","_props$store","context","store","CompositeRow"],"sources":["@wordpress/components/src/composite/typeahead.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useCompositeContext } from './context';\nimport type { CompositeTypeaheadProps } from './types';\n\nexport const CompositeTypeahead = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< CompositeTypeaheadProps, 'div', false >\n>( function CompositeTypeahead( props, ref ) {\n\tconst context = useCompositeContext();\n\n\t// @ts-expect-error The store prop is undocumented and only used by the\n\t// legacy compat layer. The `store` prop is documented, but its type is\n\t// obfuscated to discourage its use outside of the component's internals.\n\tconst store = ( props.store ?? context.store ) as Ariakit.CompositeStore;\n\n\treturn <Ariakit.CompositeRow store={ store } { ...props } ref={ ref } />;\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,mBAAmB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGhD,OAAO,MAAMC,kBAAkB,GAAGJ,UAAU,CAGzC,SAASI,kBAAkBA,CAAEC,KAAK,EAAEC,GAAG,EAAG;EAAA,IAAAC,YAAA;EAC5C,MAAMC,OAAO,GAAGP,mBAAmB,CAAC,CAAC;;EAErC;EACA;EACA;EACA,MAAMQ,KAAK,IAAAF,YAAA,GAAKF,KAAK,CAACI,KAAK,cAAAF,YAAA,cAAAA,YAAA,GAAIC,OAAO,CAACC,KAAiC;EAExE,oBAAON,IAAA,CAACJ,OAAO,CAACW,YAAY;IAACD,KAAK,EAAGA,KAAO;IAAA,GAAMJ,KAAK;IAAGC,GAAG,EAAGA;EAAK,CAAE,CAAC;AACzE,CAAE,CAAC","ignoreList":[]}
|
|
@@ -93,7 +93,8 @@ export function DatePicker({
|
|
|
93
93
|
viewPreviousMonth();
|
|
94
94
|
setFocusable(subMonths(focusable, 1));
|
|
95
95
|
onMonthPreviewed?.(format(subMonths(viewing, 1), TIMEZONELESS_FORMAT));
|
|
96
|
-
}
|
|
96
|
+
},
|
|
97
|
+
size: "compact"
|
|
97
98
|
}), /*#__PURE__*/_jsxs(NavigatorHeading, {
|
|
98
99
|
level: 3,
|
|
99
100
|
children: [/*#__PURE__*/_jsx("strong", {
|
|
@@ -107,7 +108,8 @@ export function DatePicker({
|
|
|
107
108
|
viewNextMonth();
|
|
108
109
|
setFocusable(addMonths(focusable, 1));
|
|
109
110
|
onMonthPreviewed?.(format(addMonths(viewing, 1), TIMEZONELESS_FORMAT));
|
|
110
|
-
}
|
|
111
|
+
},
|
|
112
|
+
size: "compact"
|
|
111
113
|
})]
|
|
112
114
|
}), /*#__PURE__*/_jsxs(Calendar, {
|
|
113
115
|
onFocus: () => setIsFocusWithinCalendar(true),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["format","isSameDay","subMonths","addMonths","startOfDay","isEqual","addDays","subWeeks","addWeeks","isSameMonth","startOfWeek","endOfWeek","__","_n","sprintf","isRTL","arrowLeft","arrowRight","dateI18n","getSettings","useState","useRef","useEffect","useLilius","Wrapper","Navigator","NavigatorHeading","Calendar","DayOfWeek","DayButton","inputToDate","Button","TIMEZONELESS_FORMAT","jsx","_jsx","jsxs","_jsxs","DatePicker","currentDate","onChange","events","isInvalidDate","onMonthPreviewed","weekStartsOn","date","Date","calendar","viewing","setSelected","setViewing","isSelected","viewPreviousMonth","viewNextMonth","selected","focusable","setFocusable","isFocusWithinCalendar","setIsFocusWithinCalendar","prevCurrentDate","setPrevCurrentDate","className","role","children","icon","variant","onClick","level","getTimezoneOffset","onFocus","onBlur","map","day","toString","week","index","Day","column","isFocusable","isFocusAllowed","isToday","isInvalid","numEvents","filter","event","length","getFullYear","getMonth","getDate","getHours","getMinutes","getSeconds","getMilliseconds","onKeyDown","nextFocusable","key","preventDefault","ref","current","focus","disabled","tabIndex","getDayLabel","hasEvents","formats","localizedDate"],"sources":["@wordpress/components/src/date-time/date/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tformat,\n\tisSameDay,\n\tsubMonths,\n\taddMonths,\n\tstartOfDay,\n\tisEqual,\n\taddDays,\n\tsubWeeks,\n\taddWeeks,\n\tisSameMonth,\n\tstartOfWeek,\n\tendOfWeek,\n} from 'date-fns';\nimport type { KeyboardEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { arrowLeft, arrowRight } from '@wordpress/icons';\nimport { dateI18n, getSettings } from '@wordpress/date';\nimport { useState, useRef, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useLilius } from './use-lilius';\nimport type { DatePickerProps } from '../types';\nimport {\n\tWrapper,\n\tNavigator,\n\tNavigatorHeading,\n\tCalendar,\n\tDayOfWeek,\n\tDayButton,\n} from './styles';\nimport { inputToDate } from '../utils';\nimport Button from '../../button';\nimport { TIMEZONELESS_FORMAT } from '../constants';\n\n/**\n * DatePicker is a React component that renders a calendar for date selection.\n *\n * ```jsx\n * import { DatePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDatePicker = () => {\n * const [ date, setDate ] = useState( new Date() );\n *\n * return (\n * <DatePicker\n * currentDate={ date }\n * onChange={ ( newDate ) => setDate( newDate ) }\n * />\n * );\n * };\n * ```\n */\nexport function DatePicker( {\n\tcurrentDate,\n\tonChange,\n\tevents = [],\n\tisInvalidDate,\n\tonMonthPreviewed,\n\tstartOfWeek: weekStartsOn = 0,\n}: DatePickerProps ) {\n\tconst date = currentDate ? inputToDate( currentDate ) : new Date();\n\n\tconst {\n\t\tcalendar,\n\t\tviewing,\n\t\tsetSelected,\n\t\tsetViewing,\n\t\tisSelected,\n\t\tviewPreviousMonth,\n\t\tviewNextMonth,\n\t} = useLilius( {\n\t\tselected: [ startOfDay( date ) ],\n\t\tviewing: startOfDay( date ),\n\t\tweekStartsOn,\n\t} );\n\n\t// Used to implement a roving tab index. Tracks the day that receives focus\n\t// when the user tabs into the calendar.\n\tconst [ focusable, setFocusable ] = useState( startOfDay( date ) );\n\n\t// Allows us to only programmatically focus() a day when focus was already\n\t// within the calendar. This stops us stealing focus from e.g. a TimePicker\n\t// input.\n\tconst [ isFocusWithinCalendar, setIsFocusWithinCalendar ] =\n\t\tuseState( false );\n\n\t// Update internal state when currentDate prop changes.\n\tconst [ prevCurrentDate, setPrevCurrentDate ] = useState( currentDate );\n\tif ( currentDate !== prevCurrentDate ) {\n\t\tsetPrevCurrentDate( currentDate );\n\t\tsetSelected( [ startOfDay( date ) ] );\n\t\tsetViewing( startOfDay( date ) );\n\t\tsetFocusable( startOfDay( date ) );\n\t}\n\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName=\"components-datetime__date\"\n\t\t\trole=\"application\"\n\t\t\taria-label={ __( 'Calendar' ) }\n\t\t>\n\t\t\t<Navigator>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ isRTL() ? arrowRight : arrowLeft }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\taria-label={ __( 'View previous month' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tviewPreviousMonth();\n\t\t\t\t\t\tsetFocusable( subMonths( focusable, 1 ) );\n\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\tsubMonths( viewing, 1 ),\n\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t<NavigatorHeading level={ 3 }>\n\t\t\t\t\t<strong>\n\t\t\t\t\t\t{ dateI18n(\n\t\t\t\t\t\t\t'F',\n\t\t\t\t\t\t\tviewing,\n\t\t\t\t\t\t\t-viewing.getTimezoneOffset()\n\t\t\t\t\t\t) }\n\t\t\t\t\t</strong>{ ' ' }\n\t\t\t\t\t{ dateI18n( 'Y', viewing, -viewing.getTimezoneOffset() ) }\n\t\t\t\t</NavigatorHeading>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ isRTL() ? arrowLeft : arrowRight }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\taria-label={ __( 'View next month' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tviewNextMonth();\n\t\t\t\t\t\tsetFocusable( addMonths( focusable, 1 ) );\n\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\taddMonths( viewing, 1 ),\n\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</Navigator>\n\t\t\t<Calendar\n\t\t\t\tonFocus={ () => setIsFocusWithinCalendar( true ) }\n\t\t\t\tonBlur={ () => setIsFocusWithinCalendar( false ) }\n\t\t\t>\n\t\t\t\t{ calendar[ 0 ][ 0 ].map( ( day ) => (\n\t\t\t\t\t<DayOfWeek key={ day.toString() }>\n\t\t\t\t\t\t{ dateI18n( 'D', day, -day.getTimezoneOffset() ) }\n\t\t\t\t\t</DayOfWeek>\n\t\t\t\t) ) }\n\t\t\t\t{ calendar[ 0 ].map( ( week ) =>\n\t\t\t\t\tweek.map( ( day, index ) => {\n\t\t\t\t\t\tif ( ! isSameMonth( day, viewing ) ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Day\n\t\t\t\t\t\t\t\tkey={ day.toString() }\n\t\t\t\t\t\t\t\tday={ day }\n\t\t\t\t\t\t\t\tcolumn={ index + 1 }\n\t\t\t\t\t\t\t\tisSelected={ isSelected( day ) }\n\t\t\t\t\t\t\t\tisFocusable={ isEqual( day, focusable ) }\n\t\t\t\t\t\t\t\tisFocusAllowed={ isFocusWithinCalendar }\n\t\t\t\t\t\t\t\tisToday={ isSameDay( day, new Date() ) }\n\t\t\t\t\t\t\t\tisInvalid={\n\t\t\t\t\t\t\t\t\tisInvalidDate ? isInvalidDate( day ) : false\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tnumEvents={\n\t\t\t\t\t\t\t\t\tevents.filter( ( event ) =>\n\t\t\t\t\t\t\t\t\t\tisSameDay( event.date, day )\n\t\t\t\t\t\t\t\t\t).length\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tsetSelected( [ day ] );\n\t\t\t\t\t\t\t\t\tsetFocusable( day );\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\t\t\t\t// Don't change the selected date's time fields.\n\t\t\t\t\t\t\t\t\t\t\tnew Date(\n\t\t\t\t\t\t\t\t\t\t\t\tday.getFullYear(),\n\t\t\t\t\t\t\t\t\t\t\t\tday.getMonth(),\n\t\t\t\t\t\t\t\t\t\t\t\tday.getDate(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getHours(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getMinutes(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getSeconds(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getMilliseconds()\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\tlet nextFocusable;\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addDays(\n\t\t\t\t\t\t\t\t\t\t\tday,\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? 1 : -1\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowRight' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addDays(\n\t\t\t\t\t\t\t\t\t\t\tday,\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? -1 : 1\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowUp' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = subWeeks( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowDown' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addWeeks( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'PageUp' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = subMonths( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'PageDown' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addMonths( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'Home' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = startOfWeek( day );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'End' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = startOfDay(\n\t\t\t\t\t\t\t\t\t\t\tendOfWeek( day )\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( nextFocusable ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tsetFocusable( nextFocusable );\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t! isSameMonth(\n\t\t\t\t\t\t\t\t\t\t\t\tnextFocusable,\n\t\t\t\t\t\t\t\t\t\t\t\tviewing\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tsetViewing( nextFocusable );\n\t\t\t\t\t\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextFocusable,\n\t\t\t\t\t\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} )\n\t\t\t\t) }\n\t\t\t</Calendar>\n\t\t</Wrapper>\n\t);\n}\n\ntype DayProps = {\n\tday: Date;\n\tcolumn: number;\n\tisSelected: boolean;\n\tisFocusable: boolean;\n\tisFocusAllowed: boolean;\n\tisToday: boolean;\n\tnumEvents: number;\n\tisInvalid: boolean;\n\tonClick: () => void;\n\tonKeyDown: KeyboardEventHandler;\n};\n\nfunction Day( {\n\tday,\n\tcolumn,\n\tisSelected,\n\tisFocusable,\n\tisFocusAllowed,\n\tisToday,\n\tisInvalid,\n\tnumEvents,\n\tonClick,\n\tonKeyDown,\n}: DayProps ) {\n\tconst ref = useRef< HTMLButtonElement >();\n\n\t// Focus the day when it becomes focusable, e.g. because an arrow key is\n\t// pressed. Only do this if focus is allowed - this stops us stealing focus\n\t// from e.g. a TimePicker input.\n\tuseEffect( () => {\n\t\tif ( ref.current && isFocusable && isFocusAllowed ) {\n\t\t\tref.current.focus();\n\t\t}\n\t\t// isFocusAllowed is not a dep as there is no point calling focus() on\n\t\t// an already focused element.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ isFocusable ] );\n\n\treturn (\n\t\t<DayButton\n\t\t\tref={ ref }\n\t\t\tclassName=\"components-datetime__date__day\" // Unused, for backwards compatibility.\n\t\t\tdisabled={ isInvalid }\n\t\t\ttabIndex={ isFocusable ? 0 : -1 }\n\t\t\taria-label={ getDayLabel( day, isSelected, numEvents ) }\n\t\t\tcolumn={ column }\n\t\t\tisSelected={ isSelected }\n\t\t\tisToday={ isToday }\n\t\t\thasEvents={ numEvents > 0 }\n\t\t\tonClick={ onClick }\n\t\t\tonKeyDown={ onKeyDown }\n\t\t>\n\t\t\t{ dateI18n( 'j', day, -day.getTimezoneOffset() ) }\n\t\t</DayButton>\n\t);\n}\n\nfunction getDayLabel( date: Date, isSelected: boolean, numEvents: number ) {\n\tconst { formats } = getSettings();\n\tconst localizedDate = dateI18n(\n\t\tformats.date,\n\t\tdate,\n\t\t-date.getTimezoneOffset()\n\t);\n\tif ( isSelected && numEvents > 0 ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The calendar date. 2: Number of events on the calendar date.\n\t\t\t_n(\n\t\t\t\t'%1$s. Selected. There is %2$d event',\n\t\t\t\t'%1$s. Selected. There are %2$d events',\n\t\t\t\tnumEvents\n\t\t\t),\n\t\t\tlocalizedDate,\n\t\t\tnumEvents\n\t\t);\n\t} else if ( isSelected ) {\n\t\treturn sprintf(\n\t\t\t// translators: %s: The calendar date.\n\t\t\t__( '%1$s. Selected' ),\n\t\t\tlocalizedDate\n\t\t);\n\t} else if ( numEvents > 0 ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The calendar date. 2: Number of events on the calendar date.\n\t\t\t_n(\n\t\t\t\t'%1$s. There is %2$d event',\n\t\t\t\t'%1$s. There are %2$d events',\n\t\t\t\tnumEvents\n\t\t\t),\n\t\t\tlocalizedDate,\n\t\t\tnumEvents\n\t\t);\n\t}\n\treturn localizedDate;\n}\n\nexport default DatePicker;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["format","isSameDay","subMonths","addMonths","startOfDay","isEqual","addDays","subWeeks","addWeeks","isSameMonth","startOfWeek","endOfWeek","__","_n","sprintf","isRTL","arrowLeft","arrowRight","dateI18n","getSettings","useState","useRef","useEffect","useLilius","Wrapper","Navigator","NavigatorHeading","Calendar","DayOfWeek","DayButton","inputToDate","Button","TIMEZONELESS_FORMAT","jsx","_jsx","jsxs","_jsxs","DatePicker","currentDate","onChange","events","isInvalidDate","onMonthPreviewed","weekStartsOn","date","Date","calendar","viewing","setSelected","setViewing","isSelected","viewPreviousMonth","viewNextMonth","selected","focusable","setFocusable","isFocusWithinCalendar","setIsFocusWithinCalendar","prevCurrentDate","setPrevCurrentDate","className","role","children","icon","variant","onClick","size","level","getTimezoneOffset","onFocus","onBlur","map","day","toString","week","index","Day","column","isFocusable","isFocusAllowed","isToday","isInvalid","numEvents","filter","event","length","getFullYear","getMonth","getDate","getHours","getMinutes","getSeconds","getMilliseconds","onKeyDown","nextFocusable","key","preventDefault","ref","current","focus","disabled","tabIndex","getDayLabel","hasEvents","formats","localizedDate"],"sources":["@wordpress/components/src/date-time/date/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tformat,\n\tisSameDay,\n\tsubMonths,\n\taddMonths,\n\tstartOfDay,\n\tisEqual,\n\taddDays,\n\tsubWeeks,\n\taddWeeks,\n\tisSameMonth,\n\tstartOfWeek,\n\tendOfWeek,\n} from 'date-fns';\nimport type { KeyboardEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { arrowLeft, arrowRight } from '@wordpress/icons';\nimport { dateI18n, getSettings } from '@wordpress/date';\nimport { useState, useRef, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useLilius } from './use-lilius';\nimport type { DatePickerProps } from '../types';\nimport {\n\tWrapper,\n\tNavigator,\n\tNavigatorHeading,\n\tCalendar,\n\tDayOfWeek,\n\tDayButton,\n} from './styles';\nimport { inputToDate } from '../utils';\nimport Button from '../../button';\nimport { TIMEZONELESS_FORMAT } from '../constants';\n\n/**\n * DatePicker is a React component that renders a calendar for date selection.\n *\n * ```jsx\n * import { DatePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDatePicker = () => {\n * const [ date, setDate ] = useState( new Date() );\n *\n * return (\n * <DatePicker\n * currentDate={ date }\n * onChange={ ( newDate ) => setDate( newDate ) }\n * />\n * );\n * };\n * ```\n */\nexport function DatePicker( {\n\tcurrentDate,\n\tonChange,\n\tevents = [],\n\tisInvalidDate,\n\tonMonthPreviewed,\n\tstartOfWeek: weekStartsOn = 0,\n}: DatePickerProps ) {\n\tconst date = currentDate ? inputToDate( currentDate ) : new Date();\n\n\tconst {\n\t\tcalendar,\n\t\tviewing,\n\t\tsetSelected,\n\t\tsetViewing,\n\t\tisSelected,\n\t\tviewPreviousMonth,\n\t\tviewNextMonth,\n\t} = useLilius( {\n\t\tselected: [ startOfDay( date ) ],\n\t\tviewing: startOfDay( date ),\n\t\tweekStartsOn,\n\t} );\n\n\t// Used to implement a roving tab index. Tracks the day that receives focus\n\t// when the user tabs into the calendar.\n\tconst [ focusable, setFocusable ] = useState( startOfDay( date ) );\n\n\t// Allows us to only programmatically focus() a day when focus was already\n\t// within the calendar. This stops us stealing focus from e.g. a TimePicker\n\t// input.\n\tconst [ isFocusWithinCalendar, setIsFocusWithinCalendar ] =\n\t\tuseState( false );\n\n\t// Update internal state when currentDate prop changes.\n\tconst [ prevCurrentDate, setPrevCurrentDate ] = useState( currentDate );\n\tif ( currentDate !== prevCurrentDate ) {\n\t\tsetPrevCurrentDate( currentDate );\n\t\tsetSelected( [ startOfDay( date ) ] );\n\t\tsetViewing( startOfDay( date ) );\n\t\tsetFocusable( startOfDay( date ) );\n\t}\n\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName=\"components-datetime__date\"\n\t\t\trole=\"application\"\n\t\t\taria-label={ __( 'Calendar' ) }\n\t\t>\n\t\t\t<Navigator>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ isRTL() ? arrowRight : arrowLeft }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\taria-label={ __( 'View previous month' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tviewPreviousMonth();\n\t\t\t\t\t\tsetFocusable( subMonths( focusable, 1 ) );\n\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\tsubMonths( viewing, 1 ),\n\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<NavigatorHeading level={ 3 }>\n\t\t\t\t\t<strong>\n\t\t\t\t\t\t{ dateI18n(\n\t\t\t\t\t\t\t'F',\n\t\t\t\t\t\t\tviewing,\n\t\t\t\t\t\t\t-viewing.getTimezoneOffset()\n\t\t\t\t\t\t) }\n\t\t\t\t\t</strong>{ ' ' }\n\t\t\t\t\t{ dateI18n( 'Y', viewing, -viewing.getTimezoneOffset() ) }\n\t\t\t\t</NavigatorHeading>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ isRTL() ? arrowLeft : arrowRight }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\taria-label={ __( 'View next month' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tviewNextMonth();\n\t\t\t\t\t\tsetFocusable( addMonths( focusable, 1 ) );\n\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\taddMonths( viewing, 1 ),\n\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</Navigator>\n\t\t\t<Calendar\n\t\t\t\tonFocus={ () => setIsFocusWithinCalendar( true ) }\n\t\t\t\tonBlur={ () => setIsFocusWithinCalendar( false ) }\n\t\t\t>\n\t\t\t\t{ calendar[ 0 ][ 0 ].map( ( day ) => (\n\t\t\t\t\t<DayOfWeek key={ day.toString() }>\n\t\t\t\t\t\t{ dateI18n( 'D', day, -day.getTimezoneOffset() ) }\n\t\t\t\t\t</DayOfWeek>\n\t\t\t\t) ) }\n\t\t\t\t{ calendar[ 0 ].map( ( week ) =>\n\t\t\t\t\tweek.map( ( day, index ) => {\n\t\t\t\t\t\tif ( ! isSameMonth( day, viewing ) ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Day\n\t\t\t\t\t\t\t\tkey={ day.toString() }\n\t\t\t\t\t\t\t\tday={ day }\n\t\t\t\t\t\t\t\tcolumn={ index + 1 }\n\t\t\t\t\t\t\t\tisSelected={ isSelected( day ) }\n\t\t\t\t\t\t\t\tisFocusable={ isEqual( day, focusable ) }\n\t\t\t\t\t\t\t\tisFocusAllowed={ isFocusWithinCalendar }\n\t\t\t\t\t\t\t\tisToday={ isSameDay( day, new Date() ) }\n\t\t\t\t\t\t\t\tisInvalid={\n\t\t\t\t\t\t\t\t\tisInvalidDate ? isInvalidDate( day ) : false\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tnumEvents={\n\t\t\t\t\t\t\t\t\tevents.filter( ( event ) =>\n\t\t\t\t\t\t\t\t\t\tisSameDay( event.date, day )\n\t\t\t\t\t\t\t\t\t).length\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tsetSelected( [ day ] );\n\t\t\t\t\t\t\t\t\tsetFocusable( day );\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\t\t\t\t// Don't change the selected date's time fields.\n\t\t\t\t\t\t\t\t\t\t\tnew Date(\n\t\t\t\t\t\t\t\t\t\t\t\tday.getFullYear(),\n\t\t\t\t\t\t\t\t\t\t\t\tday.getMonth(),\n\t\t\t\t\t\t\t\t\t\t\t\tday.getDate(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getHours(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getMinutes(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getSeconds(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getMilliseconds()\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\tlet nextFocusable;\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addDays(\n\t\t\t\t\t\t\t\t\t\t\tday,\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? 1 : -1\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowRight' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addDays(\n\t\t\t\t\t\t\t\t\t\t\tday,\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? -1 : 1\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowUp' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = subWeeks( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowDown' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addWeeks( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'PageUp' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = subMonths( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'PageDown' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addMonths( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'Home' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = startOfWeek( day );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'End' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = startOfDay(\n\t\t\t\t\t\t\t\t\t\t\tendOfWeek( day )\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( nextFocusable ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tsetFocusable( nextFocusable );\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t! isSameMonth(\n\t\t\t\t\t\t\t\t\t\t\t\tnextFocusable,\n\t\t\t\t\t\t\t\t\t\t\t\tviewing\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tsetViewing( nextFocusable );\n\t\t\t\t\t\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextFocusable,\n\t\t\t\t\t\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} )\n\t\t\t\t) }\n\t\t\t</Calendar>\n\t\t</Wrapper>\n\t);\n}\n\ntype DayProps = {\n\tday: Date;\n\tcolumn: number;\n\tisSelected: boolean;\n\tisFocusable: boolean;\n\tisFocusAllowed: boolean;\n\tisToday: boolean;\n\tnumEvents: number;\n\tisInvalid: boolean;\n\tonClick: () => void;\n\tonKeyDown: KeyboardEventHandler;\n};\n\nfunction Day( {\n\tday,\n\tcolumn,\n\tisSelected,\n\tisFocusable,\n\tisFocusAllowed,\n\tisToday,\n\tisInvalid,\n\tnumEvents,\n\tonClick,\n\tonKeyDown,\n}: DayProps ) {\n\tconst ref = useRef< HTMLButtonElement >();\n\n\t// Focus the day when it becomes focusable, e.g. because an arrow key is\n\t// pressed. Only do this if focus is allowed - this stops us stealing focus\n\t// from e.g. a TimePicker input.\n\tuseEffect( () => {\n\t\tif ( ref.current && isFocusable && isFocusAllowed ) {\n\t\t\tref.current.focus();\n\t\t}\n\t\t// isFocusAllowed is not a dep as there is no point calling focus() on\n\t\t// an already focused element.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ isFocusable ] );\n\n\treturn (\n\t\t<DayButton\n\t\t\tref={ ref }\n\t\t\tclassName=\"components-datetime__date__day\" // Unused, for backwards compatibility.\n\t\t\tdisabled={ isInvalid }\n\t\t\ttabIndex={ isFocusable ? 0 : -1 }\n\t\t\taria-label={ getDayLabel( day, isSelected, numEvents ) }\n\t\t\tcolumn={ column }\n\t\t\tisSelected={ isSelected }\n\t\t\tisToday={ isToday }\n\t\t\thasEvents={ numEvents > 0 }\n\t\t\tonClick={ onClick }\n\t\t\tonKeyDown={ onKeyDown }\n\t\t>\n\t\t\t{ dateI18n( 'j', day, -day.getTimezoneOffset() ) }\n\t\t</DayButton>\n\t);\n}\n\nfunction getDayLabel( date: Date, isSelected: boolean, numEvents: number ) {\n\tconst { formats } = getSettings();\n\tconst localizedDate = dateI18n(\n\t\tformats.date,\n\t\tdate,\n\t\t-date.getTimezoneOffset()\n\t);\n\tif ( isSelected && numEvents > 0 ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The calendar date. 2: Number of events on the calendar date.\n\t\t\t_n(\n\t\t\t\t'%1$s. Selected. There is %2$d event',\n\t\t\t\t'%1$s. Selected. There are %2$d events',\n\t\t\t\tnumEvents\n\t\t\t),\n\t\t\tlocalizedDate,\n\t\t\tnumEvents\n\t\t);\n\t} else if ( isSelected ) {\n\t\treturn sprintf(\n\t\t\t// translators: %s: The calendar date.\n\t\t\t__( '%1$s. Selected' ),\n\t\t\tlocalizedDate\n\t\t);\n\t} else if ( numEvents > 0 ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The calendar date. 2: Number of events on the calendar date.\n\t\t\t_n(\n\t\t\t\t'%1$s. There is %2$d event',\n\t\t\t\t'%1$s. There are %2$d events',\n\t\t\t\tnumEvents\n\t\t\t),\n\t\t\tlocalizedDate,\n\t\t\tnumEvents\n\t\t);\n\t}\n\treturn localizedDate;\n}\n\nexport default DatePicker;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"group-label.d.ts","sourceRoot":"","sources":["../../src/composite/group-label.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,eAAO,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"group-label.d.ts","sourceRoot":"","sources":["../../src/composite/group-label.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,eAAO,MAAM,mBAAmB,mRAc7B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composite/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;GAEG;AACH,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAqB1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composite/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;GAEG;AACH,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAqB1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgEpB;;;;;;;;;;;;;;;OAeG;;;;IAIH;;;;;;;;;;;;;;;;;OAiBG;;;;IAIH;;;;;;;;;;;;;OAaG;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;OAsBG;;;;IAEH;;;;;;;;;;;;;;;;;;OAkBG;;;;IAIH;;;;;;;;;;;;;;OAcG;;;;IAIH;;;;;;;;;;;;;OAaG;;;;CAKJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../src/composite/item.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../src/composite/item.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,aAAa,sRA8BvB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composite/test/index.tsx"],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/date-time/date/index.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAahD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAE,EAC3B,WAAW,EACX,QAAQ,EACR,MAAW,EACX,aAAa,EACb,gBAAgB,EAChB,WAAW,EAAE,YAAgB,GAC7B,EAAE,eAAe,+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/date-time/date/index.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAahD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAE,EAC3B,WAAW,EACX,QAAQ,EACR,MAAW,EACX,aAAa,EACb,gBAAgB,EAChB,WAAW,EAAE,YAAgB,GAC7B,EAAE,eAAe,+BAoMjB;AAmGD,eAAe,UAAU,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/components",
|
|
3
|
-
"version": "28.8.
|
|
3
|
+
"version": "28.8.5",
|
|
4
4
|
"description": "UI components for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"publishConfig": {
|
|
85
85
|
"access": "public"
|
|
86
86
|
},
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "21b3c2e9abda74edab42455041edc6e82fccc388"
|
|
88
88
|
}
|
|
@@ -20,11 +20,13 @@ export const CompositeGroupLabel = forwardRef<
|
|
|
20
20
|
WordPressComponentProps< CompositeGroupLabelProps, 'div', false >
|
|
21
21
|
>( function CompositeGroupLabel( props, ref ) {
|
|
22
22
|
const context = useCompositeContext();
|
|
23
|
+
|
|
24
|
+
// @ts-expect-error The store prop is undocumented and only used by the
|
|
25
|
+
// legacy compat layer. The `store` prop is documented, but its type is
|
|
26
|
+
// obfuscated to discourage its use outside of the component's internals.
|
|
27
|
+
const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
|
|
28
|
+
|
|
23
29
|
return (
|
|
24
|
-
<Ariakit.CompositeGroupLabel
|
|
25
|
-
store={ context.store as Ariakit.CompositeStore }
|
|
26
|
-
{ ...props }
|
|
27
|
-
ref={ ref }
|
|
28
|
-
/>
|
|
30
|
+
<Ariakit.CompositeGroupLabel store={ store } { ...props } ref={ ref } />
|
|
29
31
|
);
|
|
30
32
|
} );
|
package/src/composite/group.tsx
CHANGED
|
@@ -20,11 +20,11 @@ export const CompositeGroup = forwardRef<
|
|
|
20
20
|
WordPressComponentProps< CompositeGroupProps, 'div', false >
|
|
21
21
|
>( function CompositeGroup( props, ref ) {
|
|
22
22
|
const context = useCompositeContext();
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
23
|
+
|
|
24
|
+
// @ts-expect-error The store prop is undocumented and only used by the
|
|
25
|
+
// legacy compat layer. The `store` prop is documented, but its type is
|
|
26
|
+
// obfuscated to discourage its use outside of the component's internals.
|
|
27
|
+
const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
|
|
28
|
+
|
|
29
|
+
return <Ariakit.CompositeGroup store={ store } { ...props } ref={ ref } />;
|
|
30
30
|
} );
|
package/src/composite/hover.tsx
CHANGED
|
@@ -20,11 +20,11 @@ export const CompositeHover = forwardRef<
|
|
|
20
20
|
WordPressComponentProps< CompositeHoverProps, 'div', false >
|
|
21
21
|
>( function CompositeHover( props, ref ) {
|
|
22
22
|
const context = useCompositeContext();
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
23
|
+
|
|
24
|
+
// @ts-expect-error The store prop is undocumented and only used by the
|
|
25
|
+
// legacy compat layer. The `store` prop is documented, but its type is
|
|
26
|
+
// obfuscated to discourage its use outside of the component's internals.
|
|
27
|
+
const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
|
|
28
|
+
|
|
29
|
+
return <Ariakit.CompositeGroup store={ store } { ...props } ref={ ref } />;
|
|
30
30
|
} );
|
package/src/composite/index.tsx
CHANGED
|
@@ -73,7 +73,10 @@ export const Composite = Object.assign(
|
|
|
73
73
|
},
|
|
74
74
|
ref
|
|
75
75
|
) {
|
|
76
|
-
|
|
76
|
+
// @ts-expect-error The store prop is undocumented and only used by the
|
|
77
|
+
// legacy compat layer.
|
|
78
|
+
const storeProp = props.store as Ariakit.CompositeStore;
|
|
79
|
+
const internalStore = Ariakit.useCompositeStore( {
|
|
77
80
|
activeId,
|
|
78
81
|
defaultActiveId,
|
|
79
82
|
setActiveId,
|
|
@@ -85,6 +88,8 @@ export const Composite = Object.assign(
|
|
|
85
88
|
rtl,
|
|
86
89
|
} );
|
|
87
90
|
|
|
91
|
+
const store = storeProp ?? internalStore;
|
|
92
|
+
|
|
88
93
|
const contextValue = useMemo(
|
|
89
94
|
() => ( {
|
|
90
95
|
store,
|
package/src/composite/item.tsx
CHANGED
|
@@ -20,9 +20,27 @@ export const CompositeItem = forwardRef<
|
|
|
20
20
|
WordPressComponentProps< CompositeItemProps, 'button', false >
|
|
21
21
|
>( function CompositeItem( props, ref ) {
|
|
22
22
|
const context = useCompositeContext();
|
|
23
|
+
|
|
24
|
+
// @ts-expect-error The store prop is undocumented and only used by the
|
|
25
|
+
// legacy compat layer. The `store` prop is documented, but its type is
|
|
26
|
+
// obfuscated to discourage its use outside of the component's internals.
|
|
27
|
+
const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
|
|
28
|
+
|
|
29
|
+
// If the active item is not connected, Composite may end up in a state
|
|
30
|
+
// where none of the items are tabbable. In this case, we force all items to
|
|
31
|
+
// be tabbable, so that as soon as an item received focus, it becomes active
|
|
32
|
+
// and Composite goes back to working as expected.
|
|
33
|
+
const tabbable = Ariakit.useStoreState( store, ( state ) => {
|
|
34
|
+
return (
|
|
35
|
+
state?.activeId !== null &&
|
|
36
|
+
! store?.item( state?.activeId )?.element?.isConnected
|
|
37
|
+
);
|
|
38
|
+
} );
|
|
39
|
+
|
|
23
40
|
return (
|
|
24
41
|
<Ariakit.CompositeItem
|
|
25
|
-
store={
|
|
42
|
+
store={ store }
|
|
43
|
+
tabbable={ tabbable }
|
|
26
44
|
{ ...props }
|
|
27
45
|
ref={ ref }
|
|
28
46
|
/>
|
package/src/composite/row.tsx
CHANGED
|
@@ -20,11 +20,11 @@ export const CompositeRow = forwardRef<
|
|
|
20
20
|
WordPressComponentProps< CompositeRowProps, 'div', false >
|
|
21
21
|
>( function CompositeRow( props, ref ) {
|
|
22
22
|
const context = useCompositeContext();
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
23
|
+
|
|
24
|
+
// @ts-expect-error The store prop is undocumented and only used by the
|
|
25
|
+
// legacy compat layer. The `store` prop is documented, but its type is
|
|
26
|
+
// obfuscated to discourage its use outside of the component's internals.
|
|
27
|
+
const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
|
|
28
|
+
|
|
29
|
+
return <Ariakit.CompositeRow store={ store } { ...props } ref={ ref } />;
|
|
30
30
|
} );
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
4
|
+
import { queryByAttribute, render, screen } from '@testing-library/react';
|
|
5
|
+
import { click, press, waitFor } from '@ariakit/test';
|
|
6
|
+
import type { ComponentProps } from 'react';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* WordPress dependencies
|
|
10
|
+
*/
|
|
11
|
+
import { useState } from '@wordpress/element';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Internal dependencies
|
|
15
|
+
*/
|
|
16
|
+
import { Composite } from '..';
|
|
17
|
+
|
|
18
|
+
// This is necessary because of how Ariakit calculates page up and
|
|
19
|
+
// page down. Without this, nothing has a height, and so paging up
|
|
20
|
+
// and down doesn't behave as expected in tests.
|
|
21
|
+
|
|
22
|
+
let clientHeightSpy: jest.SpiedGetter<
|
|
23
|
+
typeof HTMLElement.prototype.clientHeight
|
|
24
|
+
>;
|
|
25
|
+
|
|
26
|
+
beforeAll( () => {
|
|
27
|
+
clientHeightSpy = jest
|
|
28
|
+
.spyOn( HTMLElement.prototype, 'clientHeight', 'get' )
|
|
29
|
+
.mockImplementation( function getClientHeight( this: HTMLElement ) {
|
|
30
|
+
if ( this.tagName === 'BODY' ) {
|
|
31
|
+
return window.outerHeight;
|
|
32
|
+
}
|
|
33
|
+
return 50;
|
|
34
|
+
} );
|
|
35
|
+
} );
|
|
36
|
+
|
|
37
|
+
afterAll( () => {
|
|
38
|
+
clientHeightSpy?.mockRestore();
|
|
39
|
+
} );
|
|
40
|
+
|
|
41
|
+
async function renderAndValidate( ...args: Parameters< typeof render > ) {
|
|
42
|
+
const view = render( ...args );
|
|
43
|
+
await waitFor( () => {
|
|
44
|
+
const activeButton = queryByAttribute(
|
|
45
|
+
'data-active-item',
|
|
46
|
+
view.baseElement,
|
|
47
|
+
'true'
|
|
48
|
+
);
|
|
49
|
+
expect( activeButton ).not.toBeNull();
|
|
50
|
+
} );
|
|
51
|
+
return view;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function RemoveItemTest( props: ComponentProps< typeof Composite > ) {
|
|
55
|
+
const [ showThirdItem, setShowThirdItem ] = useState( true );
|
|
56
|
+
return (
|
|
57
|
+
<>
|
|
58
|
+
<button>Focus trap before composite</button>
|
|
59
|
+
<Composite { ...props }>
|
|
60
|
+
<Composite.Item>Item 1</Composite.Item>
|
|
61
|
+
<Composite.Item>Item 2</Composite.Item>
|
|
62
|
+
{ showThirdItem && <Composite.Item>Item 3</Composite.Item> }
|
|
63
|
+
</Composite>
|
|
64
|
+
<button onClick={ () => setShowThirdItem( ( value ) => ! value ) }>
|
|
65
|
+
Toggle third item
|
|
66
|
+
</button>
|
|
67
|
+
</>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
describe( 'Composite', () => {
|
|
72
|
+
it( 'should remain focusable even when there are no elements in the DOM associated with the currently active ID', async () => {
|
|
73
|
+
await renderAndValidate( <RemoveItemTest /> );
|
|
74
|
+
|
|
75
|
+
const toggleButton = screen.getByRole( 'button', {
|
|
76
|
+
name: 'Toggle third item',
|
|
77
|
+
} );
|
|
78
|
+
|
|
79
|
+
await press.Tab();
|
|
80
|
+
await press.Tab();
|
|
81
|
+
|
|
82
|
+
expect(
|
|
83
|
+
screen.getByRole( 'button', { name: 'Item 1' } )
|
|
84
|
+
).toHaveFocus();
|
|
85
|
+
|
|
86
|
+
await press.ArrowRight();
|
|
87
|
+
await press.ArrowRight();
|
|
88
|
+
|
|
89
|
+
expect(
|
|
90
|
+
screen.getByRole( 'button', { name: 'Item 3' } )
|
|
91
|
+
).toHaveFocus();
|
|
92
|
+
|
|
93
|
+
await click( toggleButton );
|
|
94
|
+
|
|
95
|
+
expect(
|
|
96
|
+
screen.queryByRole( 'button', { name: 'Item 3' } )
|
|
97
|
+
).not.toBeInTheDocument();
|
|
98
|
+
|
|
99
|
+
await press.ShiftTab();
|
|
100
|
+
|
|
101
|
+
expect(
|
|
102
|
+
screen.getByRole( 'button', { name: 'Item 2' } )
|
|
103
|
+
).toHaveFocus();
|
|
104
|
+
|
|
105
|
+
await click( toggleButton );
|
|
106
|
+
|
|
107
|
+
expect(
|
|
108
|
+
screen.getByRole( 'button', { name: 'Item 3' } )
|
|
109
|
+
).toBeVisible();
|
|
110
|
+
|
|
111
|
+
await press.ShiftTab();
|
|
112
|
+
|
|
113
|
+
expect(
|
|
114
|
+
screen.getByRole( 'button', { name: 'Item 2' } )
|
|
115
|
+
).toHaveFocus();
|
|
116
|
+
|
|
117
|
+
await press.ArrowRight();
|
|
118
|
+
|
|
119
|
+
expect(
|
|
120
|
+
screen.getByRole( 'button', { name: 'Item 3' } )
|
|
121
|
+
).toHaveFocus();
|
|
122
|
+
} );
|
|
123
|
+
} );
|
|
@@ -20,11 +20,11 @@ export const CompositeTypeahead = forwardRef<
|
|
|
20
20
|
WordPressComponentProps< CompositeTypeaheadProps, 'div', false >
|
|
21
21
|
>( function CompositeTypeahead( props, ref ) {
|
|
22
22
|
const context = useCompositeContext();
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
23
|
+
|
|
24
|
+
// @ts-expect-error The store prop is undocumented and only used by the
|
|
25
|
+
// legacy compat layer. The `store` prop is documented, but its type is
|
|
26
|
+
// obfuscated to discourage its use outside of the component's internals.
|
|
27
|
+
const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
|
|
28
|
+
|
|
29
|
+
return <Ariakit.CompositeRow store={ store } { ...props } ref={ ref } />;
|
|
30
30
|
} );
|
|
@@ -125,6 +125,7 @@ export function DatePicker( {
|
|
|
125
125
|
)
|
|
126
126
|
);
|
|
127
127
|
} }
|
|
128
|
+
size="compact"
|
|
128
129
|
/>
|
|
129
130
|
<NavigatorHeading level={ 3 }>
|
|
130
131
|
<strong>
|
|
@@ -150,6 +151,7 @@ export function DatePicker( {
|
|
|
150
151
|
)
|
|
151
152
|
);
|
|
152
153
|
} }
|
|
154
|
+
size="compact"
|
|
153
155
|
/>
|
|
154
156
|
</Navigator>
|
|
155
157
|
<Calendar
|