@redsift/pickers 12.5.3-alpha.5 → 12.5.3-alpha.6
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { a as _extends, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import React, { forwardRef, useContext } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
-
import { getContainerProps, AppContainerContext, FocusWithinGroupContext, ListboxContext, useTheme, partitionComponents, isComponent, Flexbox } from '@redsift/design-system';
|
|
4
|
+
import { getContainerProps, AppContainerContext, FocusWithinGroupContext, ListboxContext, useTheme, warnOnUnknownChildren, partitionComponents, isComponent, Flexbox } from '@redsift/design-system';
|
|
5
5
|
import { usePopoverContext, useMergeRefs, FloatingPortal, StyledPopoverContent, PopoverContent } from '@redsift/popovers';
|
|
6
6
|
import { C as ComboboxContentListbox } from './ComboboxContentListbox.js';
|
|
7
7
|
import { b as ComboboxContext } from './types.js';
|
|
@@ -10,6 +10,7 @@ import { C as ComboboxContentFooter } from './ComboboxContentFooter.js';
|
|
|
10
10
|
|
|
11
11
|
const COMPONENT_NAME = 'ComboboxContent';
|
|
12
12
|
const CLASSNAME = 'redsift-combobox-content';
|
|
13
|
+
const ALLOWED_CHILDREN = new Set(['ComboboxContentHeader', 'ComboboxContentListbox', 'ComboboxContentFooter']);
|
|
13
14
|
|
|
14
15
|
/**
|
|
15
16
|
* The ComboboxContent component.
|
|
@@ -36,6 +37,9 @@ const BaseComboboxContent = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
36
37
|
const focusContext = useContext(FocusWithinGroupContext);
|
|
37
38
|
const listboxState = useContext(ListboxContext);
|
|
38
39
|
const theme = useTheme();
|
|
40
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
41
|
+
warnOnUnknownChildren(children, 'ComboboxContent', ALLOWED_CHILDREN);
|
|
42
|
+
}
|
|
39
43
|
const [[header], [listbox], [footer]] = partitionComponents(React.Children.toArray(children), [isComponent('ComboboxContentHeader'), isComponent('ComboboxContentListbox'), isComponent('ComboboxContentFooter')]);
|
|
40
44
|
return /*#__PURE__*/React.createElement(FloatingPortal, {
|
|
41
45
|
root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxContent.js","sources":["../../src/components/combobox-content/ComboboxContent.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport classNames from 'classnames';\n\nimport {\n AppContainerContext,\n Comp,\n Flexbox,\n FocusWithinGroupContext,\n ListboxContext,\n getContainerProps,\n isComponent,\n partitionComponents,\n useTheme,\n} from '@redsift/design-system';\nimport { ComboboxContentProps } from './types';\nimport {\n FloatingPortal,\n PopoverContent,\n usePopoverContext,\n StyledPopoverContent,\n useMergeRefs,\n} from '@redsift/popovers';\nimport { ComboboxContentHeader } from '../combobox-content-header';\nimport { ComboboxContentFooter } from '../combobox-content-footer';\nimport { ComboboxContentListbox } from '../combobox-content-listbox/ComboboxContentListbox';\nimport { ComboboxContext } from '../combobox/context';\n\nconst COMPONENT_NAME = 'ComboboxContent';\nconst CLASSNAME = 'redsift-combobox-content';\n\n/**\n * The ComboboxContent component.\n */\nexport const BaseComboboxContent: Comp<ComboboxContentProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, style } = props;\n const containerProps = getContainerProps(props);\n\n const { getFloatingProps, isOpen, refs, strategy, x, y } = usePopoverContext();\n const popoverRef = useMergeRefs([refs.setFloating, ref]);\n\n const appContainerState = useContext(AppContainerContext);\n const comboboxState = useContext(ComboboxContext);\n const focusContext = useContext(FocusWithinGroupContext);\n const listboxState = useContext(ListboxContext);\n const theme = useTheme();\n\n const [[header], [listbox], [footer]] = partitionComponents(React.Children.toArray(children), [\n isComponent('ComboboxContentHeader'),\n isComponent('ComboboxContentListbox'),\n isComponent('ComboboxContentFooter'),\n ]);\n\n return (\n <FloatingPortal root={appContainerState?.appContainerRef.current}>\n {isOpen && (\n <StyledPopoverContent\n $theme={theme!}\n ref={popoverRef}\n {...getFloatingProps(props)}\n style={{\n position: strategy,\n top: y ?? 0,\n left: x ?? 0,\n ...style,\n ...(comboboxState?.inputValue?.length && focusContext.state.tabStops.length === 0\n ? { display: 'none' }\n : {}),\n }}\n className={classNames(PopoverContent.className, BaseComboboxContent.className, className)}\n aria-disabled={listboxState.state.isDisabled}\n >\n <Flexbox flexDirection=\"column\" gap=\"0px\" width=\"100%\" {...containerProps}>\n {header}\n {listbox}\n {footer}\n </Flexbox>\n </StyledPopoverContent>\n )}\n </FloatingPortal>\n );\n});\nBaseComboboxContent.className = CLASSNAME;\nBaseComboboxContent.displayName = COMPONENT_NAME;\n\nexport const ComboboxContent = Object.assign(BaseComboboxContent, {\n Header: ComboboxContentHeader,\n Listbox: ComboboxContentListbox,\n Footer: ComboboxContentFooter,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","BaseComboboxContent","forwardRef","props","ref","_comboboxState$inputV","children","className","style","containerProps","getContainerProps","getFloatingProps","isOpen","refs","strategy","x","y","usePopoverContext","popoverRef","useMergeRefs","setFloating","appContainerState","useContext","AppContainerContext","comboboxState","ComboboxContext","focusContext","FocusWithinGroupContext","listboxState","ListboxContext","theme","useTheme","header","listbox","footer","partitionComponents","React","Children","toArray","isComponent","createElement","FloatingPortal","root","appContainerRef","current","StyledPopoverContent","_extends","$theme","_objectSpread","position","top","left","inputValue","length","state","tabStops","display","classNames","PopoverContent","isDisabled","Flexbox","flexDirection","gap","width","displayName","ComboboxContent","Object","assign","Header","ComboboxContentHeader","Listbox","ComboboxContentListbox","Footer","ComboboxContentFooter"],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ComboboxContent.js","sources":["../../src/components/combobox-content/ComboboxContent.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport classNames from 'classnames';\n\nimport {\n AppContainerContext,\n Comp,\n Flexbox,\n FocusWithinGroupContext,\n ListboxContext,\n getContainerProps,\n isComponent,\n partitionComponents,\n useTheme,\n warnOnUnknownChildren,\n} from '@redsift/design-system';\nimport { ComboboxContentProps } from './types';\nimport {\n FloatingPortal,\n PopoverContent,\n usePopoverContext,\n StyledPopoverContent,\n useMergeRefs,\n} from '@redsift/popovers';\nimport { ComboboxContentHeader } from '../combobox-content-header';\nimport { ComboboxContentFooter } from '../combobox-content-footer';\nimport { ComboboxContentListbox } from '../combobox-content-listbox/ComboboxContentListbox';\nimport { ComboboxContext } from '../combobox/context';\n\nconst COMPONENT_NAME = 'ComboboxContent';\nconst CLASSNAME = 'redsift-combobox-content';\nconst ALLOWED_CHILDREN = new Set(['ComboboxContentHeader', 'ComboboxContentListbox', 'ComboboxContentFooter']);\n\n/**\n * The ComboboxContent component.\n */\nexport const BaseComboboxContent: Comp<ComboboxContentProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, style } = props;\n const containerProps = getContainerProps(props);\n\n const { getFloatingProps, isOpen, refs, strategy, x, y } = usePopoverContext();\n const popoverRef = useMergeRefs([refs.setFloating, ref]);\n\n const appContainerState = useContext(AppContainerContext);\n const comboboxState = useContext(ComboboxContext);\n const focusContext = useContext(FocusWithinGroupContext);\n const listboxState = useContext(ListboxContext);\n const theme = useTheme();\n\n if (process.env.NODE_ENV !== 'production') {\n warnOnUnknownChildren(children, 'ComboboxContent', ALLOWED_CHILDREN);\n }\n\n const [[header], [listbox], [footer]] = partitionComponents(React.Children.toArray(children), [\n isComponent('ComboboxContentHeader'),\n isComponent('ComboboxContentListbox'),\n isComponent('ComboboxContentFooter'),\n ]);\n\n return (\n <FloatingPortal root={appContainerState?.appContainerRef.current}>\n {isOpen && (\n <StyledPopoverContent\n $theme={theme!}\n ref={popoverRef}\n {...getFloatingProps(props)}\n style={{\n position: strategy,\n top: y ?? 0,\n left: x ?? 0,\n ...style,\n ...(comboboxState?.inputValue?.length && focusContext.state.tabStops.length === 0\n ? { display: 'none' }\n : {}),\n }}\n className={classNames(PopoverContent.className, BaseComboboxContent.className, className)}\n aria-disabled={listboxState.state.isDisabled}\n >\n <Flexbox flexDirection=\"column\" gap=\"0px\" width=\"100%\" {...containerProps}>\n {header}\n {listbox}\n {footer}\n </Flexbox>\n </StyledPopoverContent>\n )}\n </FloatingPortal>\n );\n});\nBaseComboboxContent.className = CLASSNAME;\nBaseComboboxContent.displayName = COMPONENT_NAME;\n\nexport const ComboboxContent = Object.assign(BaseComboboxContent, {\n Header: ComboboxContentHeader,\n Listbox: ComboboxContentListbox,\n Footer: ComboboxContentFooter,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","ALLOWED_CHILDREN","Set","BaseComboboxContent","forwardRef","props","ref","_comboboxState$inputV","children","className","style","containerProps","getContainerProps","getFloatingProps","isOpen","refs","strategy","x","y","usePopoverContext","popoverRef","useMergeRefs","setFloating","appContainerState","useContext","AppContainerContext","comboboxState","ComboboxContext","focusContext","FocusWithinGroupContext","listboxState","ListboxContext","theme","useTheme","process","env","NODE_ENV","warnOnUnknownChildren","header","listbox","footer","partitionComponents","React","Children","toArray","isComponent","createElement","FloatingPortal","root","appContainerRef","current","StyledPopoverContent","_extends","$theme","_objectSpread","position","top","left","inputValue","length","state","tabStops","display","classNames","PopoverContent","isDisabled","Flexbox","flexDirection","gap","width","displayName","ComboboxContent","Object","assign","Header","ComboboxContentHeader","Listbox","ComboboxContentListbox","Footer","ComboboxContentFooter"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { a as _extends, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import React, { forwardRef, useContext } from 'react';
|
|
3
|
-
import { getContainerProps, AppContainerContext, useTheme, partitionComponents, isComponent, Flexbox } from '@redsift/design-system';
|
|
3
|
+
import { getContainerProps, AppContainerContext, useTheme, warnOnUnknownChildren, partitionComponents, isComponent, Flexbox } from '@redsift/design-system';
|
|
4
4
|
import { usePopoverContext, useMergeRefs, FloatingPortal, StyledPopoverContent, PopoverContent } from '@redsift/popovers';
|
|
5
5
|
import classNames from 'classnames';
|
|
6
6
|
import { M as MenuButtonContentMenu } from './MenuButtonContentMenu.js';
|
|
@@ -9,6 +9,7 @@ import { M as MenuButtonContentFooter } from './MenuButtonContentFooter.js';
|
|
|
9
9
|
|
|
10
10
|
const COMPONENT_NAME = 'MenuButtonContent';
|
|
11
11
|
const CLASSNAME = 'redsift-menu-button-content';
|
|
12
|
+
const ALLOWED_CHILDREN = new Set(['MenuButtonContentHeader', 'MenuButtonContentMenu', 'MenuButtonContentFooter']);
|
|
12
13
|
|
|
13
14
|
/**
|
|
14
15
|
* The MenuButtonContent component.
|
|
@@ -32,6 +33,9 @@ const BaseMenuButtonContent = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
32
33
|
const popoverRef = useMergeRefs([refs.setFloating, ref]);
|
|
33
34
|
const appContainerState = useContext(AppContainerContext);
|
|
34
35
|
const theme = useTheme();
|
|
36
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
37
|
+
warnOnUnknownChildren(children, 'MenuButtonContent', ALLOWED_CHILDREN);
|
|
38
|
+
}
|
|
35
39
|
const [[header], [menu], [footer]] = partitionComponents(React.Children.toArray(children), [isComponent('MenuButtonContentHeader'), isComponent('MenuButtonContentMenu'), isComponent('MenuButtonContentFooter')]);
|
|
36
40
|
return /*#__PURE__*/React.createElement(FloatingPortal, {
|
|
37
41
|
root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuButtonContent.js","sources":["../../src/components/menu-button-content/MenuButtonContent.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\n\nimport {\n AppContainerContext,\n Comp,\n Flexbox,\n getContainerProps,\n isComponent,\n partitionComponents,\n useTheme,\n} from '@redsift/design-system';\nimport { MenuButtonContentProps } from './types';\nimport {\n FloatingPortal,\n PopoverContent,\n StyledPopoverContent,\n useMergeRefs,\n usePopoverContext,\n} from '@redsift/popovers';\nimport classNames from 'classnames';\nimport { MenuButtonContentFooter } from '../menu-button-content-footer';\nimport { MenuButtonContentHeader } from '../menu-button-content-header';\nimport { MenuButtonContentMenu } from '../menu-button-content-menu';\n\nconst COMPONENT_NAME = 'MenuButtonContent';\nconst CLASSNAME = 'redsift-menu-button-content';\n\n/**\n * The MenuButtonContent component.\n */\nexport const BaseMenuButtonContent: Comp<MenuButtonContentProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, style } = props;\n const containerProps = getContainerProps(props);\n\n const { getFloatingProps, isOpen, refs, strategy, x, y, hideInsteadOfClose } = usePopoverContext();\n const popoverRef = useMergeRefs([refs.setFloating, ref]);\n\n const appContainerState = useContext(AppContainerContext);\n const theme = useTheme();\n\n const [[header], [menu], [footer]] = partitionComponents(React.Children.toArray(children), [\n isComponent('MenuButtonContentHeader'),\n isComponent('MenuButtonContentMenu'),\n isComponent('MenuButtonContentFooter'),\n ]);\n\n return (\n <FloatingPortal root={appContainerState?.appContainerRef.current}>\n {isOpen || hideInsteadOfClose ? (\n <StyledPopoverContent\n $theme={theme!}\n ref={popoverRef}\n {...getFloatingProps(props)}\n style={{\n position: strategy,\n top: y ?? 0,\n left: x ?? 0,\n display: hideInsteadOfClose && !isOpen ? 'none' : 'flex',\n ...style,\n }}\n className={classNames(PopoverContent.className, BaseMenuButtonContent.className, className)}\n >\n {!header && !menu && !footer ? (\n <Flexbox flexDirection=\"column\" gap=\"0px\" width=\"100%\" {...containerProps}>\n <MenuButtonContentMenu>{children}</MenuButtonContentMenu>\n </Flexbox>\n ) : (\n <Flexbox flexDirection=\"column\" gap=\"0px\" width=\"100%\" {...containerProps}>\n {header}\n {menu}\n {footer}\n </Flexbox>\n )}\n </StyledPopoverContent>\n ) : null}\n </FloatingPortal>\n );\n});\nBaseMenuButtonContent.className = CLASSNAME;\nBaseMenuButtonContent.displayName = COMPONENT_NAME;\n\nexport const MenuButtonContent = Object.assign(BaseMenuButtonContent, {\n Header: MenuButtonContentHeader,\n Menu: MenuButtonContentMenu,\n Footer: MenuButtonContentFooter,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","BaseMenuButtonContent","forwardRef","props","ref","children","className","style","containerProps","getContainerProps","getFloatingProps","isOpen","refs","strategy","x","y","hideInsteadOfClose","usePopoverContext","popoverRef","useMergeRefs","setFloating","appContainerState","useContext","AppContainerContext","theme","useTheme","header","menu","footer","partitionComponents","React","Children","toArray","isComponent","createElement","FloatingPortal","root","appContainerRef","current","StyledPopoverContent","_extends","$theme","_objectSpread","position","top","left","display","classNames","PopoverContent","Flexbox","flexDirection","gap","width","MenuButtonContentMenu","displayName","MenuButtonContent","Object","assign","Header","MenuButtonContentHeader","Menu","Footer","MenuButtonContentFooter"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"MenuButtonContent.js","sources":["../../src/components/menu-button-content/MenuButtonContent.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\n\nimport {\n AppContainerContext,\n Comp,\n Flexbox,\n getContainerProps,\n isComponent,\n partitionComponents,\n useTheme,\n warnOnUnknownChildren,\n} from '@redsift/design-system';\nimport { MenuButtonContentProps } from './types';\nimport {\n FloatingPortal,\n PopoverContent,\n StyledPopoverContent,\n useMergeRefs,\n usePopoverContext,\n} from '@redsift/popovers';\nimport classNames from 'classnames';\nimport { MenuButtonContentFooter } from '../menu-button-content-footer';\nimport { MenuButtonContentHeader } from '../menu-button-content-header';\nimport { MenuButtonContentMenu } from '../menu-button-content-menu';\n\nconst COMPONENT_NAME = 'MenuButtonContent';\nconst CLASSNAME = 'redsift-menu-button-content';\nconst ALLOWED_CHILDREN = new Set(['MenuButtonContentHeader', 'MenuButtonContentMenu', 'MenuButtonContentFooter']);\n\n/**\n * The MenuButtonContent component.\n */\nexport const BaseMenuButtonContent: Comp<MenuButtonContentProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, style } = props;\n const containerProps = getContainerProps(props);\n\n const { getFloatingProps, isOpen, refs, strategy, x, y, hideInsteadOfClose } = usePopoverContext();\n const popoverRef = useMergeRefs([refs.setFloating, ref]);\n\n const appContainerState = useContext(AppContainerContext);\n const theme = useTheme();\n\n if (process.env.NODE_ENV !== 'production') {\n warnOnUnknownChildren(children, 'MenuButtonContent', ALLOWED_CHILDREN);\n }\n\n const [[header], [menu], [footer]] = partitionComponents(React.Children.toArray(children), [\n isComponent('MenuButtonContentHeader'),\n isComponent('MenuButtonContentMenu'),\n isComponent('MenuButtonContentFooter'),\n ]);\n\n return (\n <FloatingPortal root={appContainerState?.appContainerRef.current}>\n {isOpen || hideInsteadOfClose ? (\n <StyledPopoverContent\n $theme={theme!}\n ref={popoverRef}\n {...getFloatingProps(props)}\n style={{\n position: strategy,\n top: y ?? 0,\n left: x ?? 0,\n display: hideInsteadOfClose && !isOpen ? 'none' : 'flex',\n ...style,\n }}\n className={classNames(PopoverContent.className, BaseMenuButtonContent.className, className)}\n >\n {!header && !menu && !footer ? (\n <Flexbox flexDirection=\"column\" gap=\"0px\" width=\"100%\" {...containerProps}>\n <MenuButtonContentMenu>{children}</MenuButtonContentMenu>\n </Flexbox>\n ) : (\n <Flexbox flexDirection=\"column\" gap=\"0px\" width=\"100%\" {...containerProps}>\n {header}\n {menu}\n {footer}\n </Flexbox>\n )}\n </StyledPopoverContent>\n ) : null}\n </FloatingPortal>\n );\n});\nBaseMenuButtonContent.className = CLASSNAME;\nBaseMenuButtonContent.displayName = COMPONENT_NAME;\n\nexport const MenuButtonContent = Object.assign(BaseMenuButtonContent, {\n Header: MenuButtonContentHeader,\n Menu: MenuButtonContentMenu,\n Footer: MenuButtonContentFooter,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","ALLOWED_CHILDREN","Set","BaseMenuButtonContent","forwardRef","props","ref","children","className","style","containerProps","getContainerProps","getFloatingProps","isOpen","refs","strategy","x","y","hideInsteadOfClose","usePopoverContext","popoverRef","useMergeRefs","setFloating","appContainerState","useContext","AppContainerContext","theme","useTheme","process","env","NODE_ENV","warnOnUnknownChildren","header","menu","footer","partitionComponents","React","Children","toArray","isComponent","createElement","FloatingPortal","root","appContainerRef","current","StyledPopoverContent","_extends","$theme","_objectSpread","position","top","left","display","classNames","PopoverContent","Flexbox","flexDirection","gap","width","MenuButtonContentMenu","displayName","MenuButtonContent","Object","assign","Header","MenuButtonContentHeader","Menu","Footer","MenuButtonContentFooter"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -30,11 +30,11 @@
|
|
|
30
30
|
"test": "yarn test:unit && yarn test:storybook"
|
|
31
31
|
},
|
|
32
32
|
"types": "index.d.ts",
|
|
33
|
-
"version": "12.5.3-alpha.
|
|
33
|
+
"version": "12.5.3-alpha.6",
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@redsift/design-system": "^12.5.3-alpha.
|
|
36
|
-
"@redsift/icons": "^12.5.3-alpha.
|
|
37
|
-
"@redsift/popovers": "^12.5.3-alpha.
|
|
35
|
+
"@redsift/design-system": "^12.5.3-alpha.6",
|
|
36
|
+
"@redsift/icons": "^12.5.3-alpha.6",
|
|
37
|
+
"@redsift/popovers": "^12.5.3-alpha.6",
|
|
38
38
|
"classnames": "^2.3.1",
|
|
39
39
|
"styled-components": "6.1.19"
|
|
40
40
|
},
|
|
@@ -94,5 +94,5 @@
|
|
|
94
94
|
"react-dom": ">=17",
|
|
95
95
|
"styled-components": "6.1.19"
|
|
96
96
|
},
|
|
97
|
-
"gitHead": "
|
|
97
|
+
"gitHead": "95c1f792fd599240c067448455dc883acb48db6a"
|
|
98
98
|
}
|