@webiny/ui 0.0.0-unstable.496cf268ac → 0.0.0-unstable.606fc9c866
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.
|
@@ -41,7 +41,7 @@ var DataListModalWrapper = /*#__PURE__*/(0, _styled.default)("div", {
|
|
|
41
41
|
height: "auto",
|
|
42
42
|
maxWidth: "426px",
|
|
43
43
|
maxHeight: "520px",
|
|
44
|
-
overflow: "
|
|
44
|
+
overflow: "visible",
|
|
45
45
|
backgroundColor: "var(--mdc-theme-surface)",
|
|
46
46
|
boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.12)",
|
|
47
47
|
borderRadius: "0px 0px 4px 4px",
|
|
@@ -89,7 +89,8 @@ var DataListModalOverlay = function DataListModalOverlay(_ref3) {
|
|
|
89
89
|
},
|
|
90
90
|
showOverlay: isOpen
|
|
91
91
|
}), /*#__PURE__*/_react.default.createElement(DataListModalWrapper, {
|
|
92
|
-
showOverlay: isOpen
|
|
92
|
+
showOverlay: isOpen,
|
|
93
|
+
"data-id": "data-list-modal-wrapper"
|
|
93
94
|
}, children));
|
|
94
95
|
};
|
|
95
96
|
exports.DataListModalOverlay = DataListModalOverlay;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["SimpleOverlay","styled","showOverlay","width","height","position","top","left","backgroundColor","transition","pointerEvents","zIndex","opacity","DataListModalWrapper","maxWidth","maxHeight","overflow","boxShadow","borderRadius","transform","paddingBottom","padding","display","justifyContent","color","border","DataListModalOverlay","onDismiss","children","useContext","DataListModalOverlayContext","isOpen","setIsOpen","e","stopPropagation"],"sources":["DataListModalOverlay.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport type SimpleOverlayProps = { showOverlay: boolean };\nexport const SimpleOverlay = styled.div<SimpleOverlayProps>(({ showOverlay }) => ({\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: 0,\n backgroundColor: showOverlay ? \"rgba(0, 0, 0, 0.32)\" : \"transparent\",\n transition: \"150ms all ease-in-out\",\n pointerEvents: showOverlay ? \"auto\" : \"none\",\n zIndex: showOverlay ? 5 : -1,\n opacity: showOverlay ? 1 : 0\n}));\n\nexport interface DataListModalWrapperProps {\n showOverlay: boolean;\n}\n\nexport const DataListModalWrapper = styled.div<DataListModalWrapperProps>(({ showOverlay }) => ({\n position: \"absolute\",\n top: \"0px\",\n left: \"50%\",\n width: \"90%\",\n height: \"auto\",\n maxWidth: \"426px\",\n maxHeight: \"520px\",\n overflow: \"
|
|
1
|
+
{"version":3,"names":["SimpleOverlay","styled","showOverlay","width","height","position","top","left","backgroundColor","transition","pointerEvents","zIndex","opacity","DataListModalWrapper","maxWidth","maxHeight","overflow","boxShadow","borderRadius","transform","paddingBottom","padding","display","justifyContent","color","border","DataListModalOverlay","onDismiss","children","useContext","DataListModalOverlayContext","isOpen","setIsOpen","e","stopPropagation"],"sources":["DataListModalOverlay.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport type SimpleOverlayProps = { showOverlay: boolean };\nexport const SimpleOverlay = styled.div<SimpleOverlayProps>(({ showOverlay }) => ({\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: 0,\n backgroundColor: showOverlay ? \"rgba(0, 0, 0, 0.32)\" : \"transparent\",\n transition: \"150ms all ease-in-out\",\n pointerEvents: showOverlay ? \"auto\" : \"none\",\n zIndex: showOverlay ? 5 : -1,\n opacity: showOverlay ? 1 : 0\n}));\n\nexport interface DataListModalWrapperProps {\n showOverlay: boolean;\n}\n\nexport const DataListModalWrapper = styled.div<DataListModalWrapperProps>(({ showOverlay }) => ({\n position: \"absolute\",\n top: \"0px\",\n left: \"50%\",\n width: \"90%\",\n height: \"auto\",\n maxWidth: \"426px\",\n maxHeight: \"520px\",\n overflow: \"visible\",\n backgroundColor: \"var(--mdc-theme-surface)\",\n boxShadow: \"0px 1px 5px rgba(0, 0, 0, 0.12)\",\n borderRadius: \"0px 0px 4px 4px\",\n transition: \"150ms opacity ease-in-out\",\n pointerEvents: showOverlay ? \"auto\" : \"none\",\n zIndex: showOverlay ? 5 : -1,\n opacity: showOverlay ? 1 : 0,\n transform: showOverlay ? \"translateX(-50%)\" : \"translateX(-1000px)\",\n\n \"& .input-wrapper\": {\n paddingBottom: \"16px\"\n },\n\n \"& .datalist-modal__footer\": {\n padding: \"24px\",\n display: \"flex\",\n justifyContent: \"space-between\",\n \"& .mdc-button\": {\n borderRadius: 4,\n padding: \"0px 32px\"\n },\n \"& .datalist-modal__footer__action--secondary\": {\n color: \"var(--mdc-theme-text-primary-on-background)\",\n border: \"1px solid var(--mdc-theme-on-background)\"\n },\n \"& .datalist-modal__footer__action--primary\": {\n backgroundColor: \"var(--mdc-theme-secondary)\"\n }\n }\n}));\n\nexport interface DataListModalOverlayProps {\n /*\n * This function is called after closing the modal overlay.\n */\n onDismiss?: (event?: React.SyntheticEvent) => void;\n}\n\nexport const DataListModalOverlay: React.FC<DataListModalOverlayProps> = ({\n onDismiss,\n children\n}) => {\n const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);\n return (\n <React.Fragment>\n <SimpleOverlay\n onClick={e => {\n e.stopPropagation();\n // Close the modal.\n setIsOpen(false);\n\n if (typeof onDismiss === \"function\") {\n onDismiss();\n }\n }}\n showOverlay={isOpen}\n />\n <DataListModalWrapper showOverlay={isOpen} data-id={\"data-list-modal-wrapper\"}>\n {children}\n </DataListModalWrapper>\n </React.Fragment>\n );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAGO,IAAMA,aAAa,oBAAGC,eAAM;EAAA;EAAA;AAAA,GAAyB;EAAA,IAAGC,WAAW,QAAXA,WAAW;EAAA,OAAQ;IAC9EC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,eAAe,EAAEN,WAAW,GAAG,qBAAqB,GAAG,aAAa;IACpEO,UAAU,EAAE,uBAAuB;IACnCC,aAAa,EAAER,WAAW,GAAG,MAAM,GAAG,MAAM;IAC5CS,MAAM,EAAET,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5BU,OAAO,EAAEV,WAAW,GAAG,CAAC,GAAG;EAC/B,CAAC;AAAA,CAAC,CAAC;AAAC;AAMG,IAAMW,oBAAoB,oBAAGZ,eAAM;EAAA;EAAA;AAAA,GAAgC;EAAA,IAAGC,WAAW,SAAXA,WAAW;EAAA,OAAQ;IAC5FG,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,KAAK;IACVC,IAAI,EAAE,KAAK;IACXJ,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,MAAM;IACdU,QAAQ,EAAE,OAAO;IACjBC,SAAS,EAAE,OAAO;IAClBC,QAAQ,EAAE,SAAS;IACnBR,eAAe,EAAE,0BAA0B;IAC3CS,SAAS,EAAE,iCAAiC;IAC5CC,YAAY,EAAE,iBAAiB;IAC/BT,UAAU,EAAE,2BAA2B;IACvCC,aAAa,EAAER,WAAW,GAAG,MAAM,GAAG,MAAM;IAC5CS,MAAM,EAAET,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5BU,OAAO,EAAEV,WAAW,GAAG,CAAC,GAAG,CAAC;IAC5BiB,SAAS,EAAEjB,WAAW,GAAG,kBAAkB,GAAG,qBAAqB;IAEnE,kBAAkB,EAAE;MAChBkB,aAAa,EAAE;IACnB,CAAC;IAED,2BAA2B,EAAE;MACzBC,OAAO,EAAE,MAAM;MACfC,OAAO,EAAE,MAAM;MACfC,cAAc,EAAE,eAAe;MAC/B,eAAe,EAAE;QACbL,YAAY,EAAE,CAAC;QACfG,OAAO,EAAE;MACb,CAAC;MACD,8CAA8C,EAAE;QAC5CG,KAAK,EAAE,6CAA6C;QACpDC,MAAM,EAAE;MACZ,CAAC;MACD,4CAA4C,EAAE;QAC1CjB,eAAe,EAAE;MACrB;IACJ;EACJ,CAAC;AAAA,CAAC,CAAC;AAAC;AASG,IAAMkB,oBAAyD,GAAG,SAA5DA,oBAAyD,QAGhE;EAAA,IAFFC,SAAS,SAATA,SAAS;IACTC,QAAQ,SAARA,QAAQ;EAER,kBAA8B,IAAAC,iBAAU,EAACC,wDAA2B,CAAC;IAA7DC,MAAM,eAANA,MAAM;IAAEC,SAAS,eAATA,SAAS;EACzB,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,aAAa;IACV,OAAO,EAAE,iBAAAC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,EAAE;MACnB;MACAF,SAAS,CAAC,KAAK,CAAC;MAEhB,IAAI,OAAOL,SAAS,KAAK,UAAU,EAAE;QACjCA,SAAS,EAAE;MACf;IACJ,CAAE;IACF,WAAW,EAAEI;EAAO,EACtB,eACF,6BAAC,oBAAoB;IAAC,WAAW,EAAEA,MAAO;IAAC,WAAS;EAA0B,GACzEH,QAAQ,CACU,CACV;AAEzB,CAAC;AAAC"}
|
package/Menu/Menu.js
CHANGED
|
@@ -70,7 +70,8 @@ var Menu = /*#__PURE__*/function (_React$Component) {
|
|
|
70
70
|
var children = _this.props.children;
|
|
71
71
|
return /*#__PURE__*/_react.default.createElement(_menu.MenuSurface, {
|
|
72
72
|
open: _this.state.menuIsOpen,
|
|
73
|
-
onClose: _this.closeMenu
|
|
73
|
+
onClose: _this.closeMenu,
|
|
74
|
+
renderToPortal: _this.props.renderToPortal
|
|
74
75
|
}, typeof children === "function" ? children({
|
|
75
76
|
closeMenu: _this.closeMenu
|
|
76
77
|
}) : children);
|
package/Menu/Menu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["style","disabledMenuItem","css","opacity","pointerEvents","Menu","menuIsOpen","setState","props","onOpen","onClose","anchor","state","className","closeMenu","onSelect","zIndex","children","Array","isArray","renderMenuWithPortal","renderCustomContent","renderMenuContent","handle","React","cloneElement","onClick","openMenu","Component","MenuDivider","MenuItem","disabled","rest","classNames"],"sources":["Menu.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Menu as BaseMenu,\n MenuProps as RmwcMenuProps,\n MenuItem as BaseMenuItem,\n MenuItemProps as BaseMenuItemProps,\n MenuSurface,\n MenuSurfaceAnchor\n} from \"@rmwc/menu\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nconst style = {\n disabledMenuItem: css({\n opacity: 0.5,\n pointerEvents: \"none\"\n })\n};\n\ntype MenuProps = RmwcMenuProps & {\n // One or more MenuItem components.\n children: React.ReactNode;\n\n // A handler which triggers the menu, eg. button or link.\n handle?: React.ReactElement;\n\n // Position the menu to one of anchor corners.\n // 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart'\n anchor?:\n | \"bottomEnd\"\n | \"bottomLeft\"\n | \"bottomRight\"\n | \"bottomStart\"\n | \"topEnd\"\n | \"topLeft\"\n | \"topRight\"\n | \"topStart\";\n\n // Class that will be added to the Menu element.\n className?: string;\n\n onOpen?: () => void;\n onClose?: () => void;\n\n // For testing purposes.\n \"data-testid\"?: string;\n};\n\ninterface MenuState {\n menuIsOpen: boolean;\n}\n\n/**\n * Use Menu component to display a list of choices, once the handler is triggered.\n */\nclass Menu extends React.Component<MenuProps, MenuState> {\n static defaultProps: Partial<MenuProps> = {\n anchor: \"topStart\"\n };\n\n public override state: MenuState = {\n menuIsOpen: false\n };\n\n private readonly openMenu = () => {\n this.setState({ menuIsOpen: true }, () => this.props.onOpen && this.props.onOpen());\n };\n\n private readonly closeMenu = () => {\n this.setState({ menuIsOpen: false }, () => this.props.onClose && this.props.onClose());\n };\n\n private readonly renderMenuWithPortal = () => {\n return (\n <BaseMenu\n anchorCorner={this.props.anchor}\n open={this.state.menuIsOpen}\n className={this.props.className}\n onClose={this.closeMenu}\n onSelect={this.props.onSelect}\n renderToPortal={true}\n style={{ zIndex: 99 }} // Fixes Menu in Drawers\n >\n {this.props.children}\n </BaseMenu>\n );\n };\n\n private readonly renderCustomContent = () => {\n const { children } = this.props;\n return (\n <MenuSurface
|
|
1
|
+
{"version":3,"names":["style","disabledMenuItem","css","opacity","pointerEvents","Menu","menuIsOpen","setState","props","onOpen","onClose","anchor","state","className","closeMenu","onSelect","zIndex","children","renderToPortal","Array","isArray","renderMenuWithPortal","renderCustomContent","renderMenuContent","handle","React","cloneElement","onClick","openMenu","Component","MenuDivider","MenuItem","disabled","rest","classNames"],"sources":["Menu.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Menu as BaseMenu,\n MenuProps as RmwcMenuProps,\n MenuItem as BaseMenuItem,\n MenuItemProps as BaseMenuItemProps,\n MenuSurface,\n MenuSurfaceAnchor\n} from \"@rmwc/menu\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nconst style = {\n disabledMenuItem: css({\n opacity: 0.5,\n pointerEvents: \"none\"\n })\n};\n\ntype MenuProps = RmwcMenuProps & {\n // One or more MenuItem components.\n children: React.ReactNode;\n\n // A handler which triggers the menu, eg. button or link.\n handle?: React.ReactElement;\n\n // Position the menu to one of anchor corners.\n // 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart'\n anchor?:\n | \"bottomEnd\"\n | \"bottomLeft\"\n | \"bottomRight\"\n | \"bottomStart\"\n | \"topEnd\"\n | \"topLeft\"\n | \"topRight\"\n | \"topStart\";\n\n // Class that will be added to the Menu element.\n className?: string;\n\n onOpen?: () => void;\n onClose?: () => void;\n\n // For testing purposes.\n \"data-testid\"?: string;\n};\n\ninterface MenuState {\n menuIsOpen: boolean;\n}\n\n/**\n * Use Menu component to display a list of choices, once the handler is triggered.\n */\nclass Menu extends React.Component<MenuProps, MenuState> {\n static defaultProps: Partial<MenuProps> = {\n anchor: \"topStart\"\n };\n\n public override state: MenuState = {\n menuIsOpen: false\n };\n\n private readonly openMenu = () => {\n this.setState({ menuIsOpen: true }, () => this.props.onOpen && this.props.onOpen());\n };\n\n private readonly closeMenu = () => {\n this.setState({ menuIsOpen: false }, () => this.props.onClose && this.props.onClose());\n };\n\n private readonly renderMenuWithPortal = () => {\n return (\n <BaseMenu\n anchorCorner={this.props.anchor}\n open={this.state.menuIsOpen}\n className={this.props.className}\n onClose={this.closeMenu}\n onSelect={this.props.onSelect}\n renderToPortal={true}\n style={{ zIndex: 99 }} // Fixes Menu in Drawers\n >\n {this.props.children}\n </BaseMenu>\n );\n };\n\n private readonly renderCustomContent = () => {\n const { children } = this.props;\n return (\n <MenuSurface\n open={this.state.menuIsOpen}\n onClose={this.closeMenu}\n renderToPortal={this.props.renderToPortal}\n >\n {typeof children === \"function\"\n ? children({ closeMenu: this.closeMenu })\n : children}\n </MenuSurface>\n );\n };\n\n private readonly renderMenuContent = () => {\n return Array.isArray(this.props.children)\n ? this.renderMenuWithPortal()\n : this.renderCustomContent();\n };\n\n public override render(): React.ReactNode {\n return (\n <MenuSurfaceAnchor data-testid={this.props[\"data-testid\"]}>\n {this.renderMenuContent()}\n {this.props.handle &&\n React.cloneElement(this.props.handle, { onClick: this.openMenu })}\n </MenuSurfaceAnchor>\n );\n }\n}\n\nconst MenuDivider: React.FC = () => {\n return <li className=\"mdc-list-divider\" role=\"separator\" />;\n};\n\ninterface MenuItemProps extends BaseMenuItemProps {\n children: React.ReactNode;\n className?: string;\n onClick?: (event: React.MouseEvent) => void;\n \"data-testid\"?: string;\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({ disabled, className, ...rest }) => {\n return (\n <BaseMenuItem\n {...rest}\n className={classNames(className, { [style.disabledMenuItem]: disabled })}\n />\n );\n};\n\nexport { Menu, MenuItem, MenuDivider };\n"],"mappings":"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"}
|
package/Tabs/Tabs.js
CHANGED
|
@@ -75,7 +75,13 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
75
75
|
}
|
|
76
76
|
}, tabs.map(function (item) {
|
|
77
77
|
if (!item.visible) {
|
|
78
|
-
return
|
|
78
|
+
return /*#__PURE__*/_react.default.createElement(_tabs.Tab, {
|
|
79
|
+
tag: "div",
|
|
80
|
+
style: {
|
|
81
|
+
display: "none"
|
|
82
|
+
},
|
|
83
|
+
key: item.id
|
|
84
|
+
});
|
|
79
85
|
}
|
|
80
86
|
var style = item.style || {};
|
|
81
87
|
if (item.disabled) {
|
package/Tabs/Tabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["disabledStyles","opacity","pointerEvents","TabsContext","createContext","undefined","Tabs","forwardRef","props","ref","useState","activeTabIndex","setActiveIndex","tabs","setTabs","activeIndex","value","activateTabIndex","useCallback","index","updateValue","useImperativeHandle","getActiveIndex","switchTab","tabIndex","useEffect","disabled","tabBar","map","tab","id","join","evt","detail","onActivate","item","visible","style","Object","assign","icon","label","content","filter","Boolean","children","
|
|
1
|
+
{"version":3,"names":["disabledStyles","opacity","pointerEvents","TabsContext","createContext","undefined","Tabs","forwardRef","props","ref","useState","activeTabIndex","setActiveIndex","tabs","setTabs","activeIndex","value","activateTabIndex","useCallback","index","updateValue","useImperativeHandle","getActiveIndex","switchTab","tabIndex","useEffect","disabled","tabBar","map","tab","id","join","evt","detail","onActivate","item","visible","display","style","Object","assign","icon","label","content","filter","Boolean","children","context","useMemo","addTab","existingIndex","findIndex","slice","removeTab","classNames","className","displayName"],"sources":["Tabs.tsx"],"sourcesContent":["import React, {\n createContext,\n forwardRef,\n PropsWithChildren,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState\n} from \"react\";\nimport classNames from \"classnames\";\nimport { TabBar, Tab as RmwcTab } from \"@rmwc/tabs\";\nimport { TabProps } from \"./Tab\";\n\nexport type TabsProps = PropsWithChildren<{\n /**\n * Append a class name.\n */\n className?: string;\n\n /**\n * Callback to execute when a tab is changed.\n */\n onActivate?: (index: number) => void;\n\n /**\n * Active tab index value.\n */\n value?: number;\n\n /**\n * Function to change active tab.\n */\n updateValue?: (index: number) => void;\n /**\n * Tab ID for the testing.\n */\n \"data-testid\"?: string;\n}>;\n\nconst disabledStyles: Record<string, string | number> = {\n opacity: 0.5,\n pointerEvents: \"none\"\n};\n\ninterface TabItem extends TabProps {\n id: string;\n}\n\ninterface TabsContext {\n addTab(props: TabItem): void;\n removeTab(id: string): void;\n}\n\nexport const TabsContext = createContext<TabsContext | undefined>(undefined);\n\nexport interface TabsImperativeApi {\n switchTab(index: number): void;\n getActiveIndex(): number;\n}\n/**\n * Use Tabs component to display a list of choices, once the handler is triggered.\n */\nexport const Tabs = forwardRef<TabsImperativeApi | undefined, TabsProps>((props, ref) => {\n const [activeTabIndex, setActiveIndex] = useState(0);\n const [tabs, setTabs] = useState<TabItem[]>([]);\n\n const activeIndex = props.value !== undefined ? props.value : activeTabIndex;\n\n const activateTabIndex = useCallback((index: number) => {\n if (typeof props.updateValue === \"function\") {\n props.updateValue(index);\n return;\n }\n\n setActiveIndex(index);\n }, []);\n\n useImperativeHandle(ref, () => ({\n getActiveIndex() {\n return activeIndex;\n },\n switchTab(tabIndex: number) {\n activateTabIndex(tabIndex);\n }\n }));\n\n /**\n * This effect will make sure that disabled tabs automatically switch to the first tab.\n */\n useEffect(() => {\n if (tabs[activeIndex]?.disabled) {\n activateTabIndex(0);\n }\n });\n\n /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */\n const tabBar = (\n <TabBar\n key={tabs.map(tab => tab.id).join(\";\")}\n className=\"webiny-ui-tabs__tab-bar\"\n activeTabIndex={activeIndex}\n onActivate={evt => {\n if (typeof props.updateValue === \"function\") {\n props.updateValue(evt.detail.index);\n } else {\n setActiveIndex(evt.detail.index);\n }\n props.onActivate && props.onActivate(evt.detail.index);\n }}\n >\n {tabs.map(item => {\n if (!item.visible) {\n return <RmwcTab tag={\"div\"} style={{ display: \"none\" }} key={item.id} />;\n }\n\n const style = item.style || {};\n if (item.disabled) {\n Object.assign(style, disabledStyles);\n }\n\n return (\n <RmwcTab\n tag={\"div\"}\n style={style}\n key={item.id}\n data-testid={item[\"data-testid\"]}\n {...(item.icon ? { icon: item.icon } : {})}\n >\n {item.label}\n </RmwcTab>\n );\n })}\n </TabBar>\n );\n\n const content = tabs.filter(Boolean).map((tab, index) => {\n if (activeIndex === index) {\n return <div key={index}>{tab.children}</div>;\n } else {\n return (\n <div key={index} style={{ display: \"none\" }}>\n {tab.children}\n </div>\n );\n }\n });\n\n const context: TabsContext = useMemo(\n () => ({\n addTab(props) {\n setTabs(tabs => {\n const existingIndex = tabs.findIndex(tab => tab.id === props.id);\n if (existingIndex > -1) {\n return [\n ...tabs.slice(0, existingIndex),\n props,\n ...tabs.slice(existingIndex + 1)\n ];\n }\n return [...tabs, props];\n });\n },\n removeTab(id) {\n setTabs(tabs => tabs.filter(tab => tab.id === id));\n }\n }),\n [setTabs]\n );\n\n return (\n <div className={classNames(\"webiny-ui-tabs\", props.className)}>\n {tabBar}\n <div className={\"webiny-ui-tabs__content mdc-tab-content\"}>{content}</div>\n <TabsContext.Provider value={context}>{props.children}</TabsContext.Provider>\n </div>\n );\n});\n\nTabs.displayName = \"Tabs\";\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/ui",
|
|
3
|
-
"version": "0.0.0-unstable.
|
|
3
|
+
"version": "0.0.0-unstable.606fc9c866",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@babel/runtime": "7.20.13",
|
|
18
18
|
"@editorjs/editorjs": "2.26.5",
|
|
19
|
-
"@emotion/react": "11.10.
|
|
19
|
+
"@emotion/react": "11.10.8",
|
|
20
20
|
"@emotion/styled": "11.10.6",
|
|
21
21
|
"@material-design-icons/svg": "0.14.2",
|
|
22
22
|
"@rmwc/button": "7.0.3",
|
|
@@ -82,11 +82,11 @@
|
|
|
82
82
|
"@types/react-custom-scrollbars": "^4.0.10",
|
|
83
83
|
"@types/react-transition-group": "^4.4.4",
|
|
84
84
|
"@types/shortid": "^0.0.29",
|
|
85
|
-
"@webiny/cli": "^0.0.0-unstable.
|
|
86
|
-
"@webiny/form": "^0.0.0-unstable.
|
|
87
|
-
"@webiny/project-utils": "^0.0.0-unstable.
|
|
88
|
-
"@webiny/storybook-utils": "^0.0.0-unstable.
|
|
89
|
-
"@webiny/validation": "^0.0.0-unstable.
|
|
85
|
+
"@webiny/cli": "^0.0.0-unstable.606fc9c866",
|
|
86
|
+
"@webiny/form": "^0.0.0-unstable.606fc9c866",
|
|
87
|
+
"@webiny/project-utils": "^0.0.0-unstable.606fc9c866",
|
|
88
|
+
"@webiny/storybook-utils": "^0.0.0-unstable.606fc9c866",
|
|
89
|
+
"@webiny/validation": "^0.0.0-unstable.606fc9c866",
|
|
90
90
|
"babel-loader": "^8.0.0-beta.6",
|
|
91
91
|
"babel-plugin-emotion": "^9.2.8",
|
|
92
92
|
"execa": "^5.0.0",
|
|
@@ -133,5 +133,5 @@
|
|
|
133
133
|
]
|
|
134
134
|
}
|
|
135
135
|
},
|
|
136
|
-
"gitHead": "
|
|
136
|
+
"gitHead": "606fc9c866aec436f24983abc9bdaf02af2b8746"
|
|
137
137
|
}
|