no-frills-ui 0.0.14-alpha.8 → 0.0.14-rc.1
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/README.md +3 -3
- package/dist/index.js +847 -718
- package/dist/index.js.map +1 -1
- package/lib-esm/components/Accordion/Accordion.d.ts +9 -13
- package/lib-esm/components/Accordion/Accordion.js +13 -11
- package/lib-esm/components/Accordion/Accordion.js.map +1 -1
- package/lib-esm/components/Accordion/AccordionStep.d.ts +22 -22
- package/lib-esm/components/Accordion/AccordionStep.js +34 -29
- package/lib-esm/components/Accordion/AccordionStep.js.map +1 -1
- package/lib-esm/components/Badge/Badge.d.ts +13 -16
- package/lib-esm/components/Badge/Badge.js +10 -20
- package/lib-esm/components/Badge/Badge.js.map +1 -1
- package/lib-esm/components/Button/ActionButton.d.ts +9 -5
- package/lib-esm/components/Button/ActionButton.js +18 -3
- package/lib-esm/components/Button/ActionButton.js.map +1 -1
- package/lib-esm/components/Button/Button.d.ts +9 -5
- package/lib-esm/components/Button/Button.js +17 -5
- package/lib-esm/components/Button/Button.js.map +1 -1
- package/lib-esm/components/Button/IconButton.d.ts +9 -5
- package/lib-esm/components/Button/IconButton.js +18 -3
- package/lib-esm/components/Button/IconButton.js.map +1 -1
- package/lib-esm/components/Button/LinkButton.d.ts +9 -5
- package/lib-esm/components/Button/LinkButton.js +18 -3
- package/lib-esm/components/Button/LinkButton.js.map +1 -1
- package/lib-esm/components/Button/RaisedButton.d.ts +9 -5
- package/lib-esm/components/Button/RaisedButton.js +18 -3
- package/lib-esm/components/Button/RaisedButton.js.map +1 -1
- package/lib-esm/components/Card/Card.d.ts +4 -6
- package/lib-esm/components/Card/Card.js +16 -3
- package/lib-esm/components/Card/Card.js.map +1 -1
- package/lib-esm/components/Chip/Chip.d.ts +2 -2
- package/lib-esm/components/Chip/Chip.js +14 -8
- package/lib-esm/components/Chip/Chip.js.map +1 -1
- package/lib-esm/components/ChipInput/ChipInput.d.ts +28 -39
- package/lib-esm/components/ChipInput/ChipInput.js +37 -37
- package/lib-esm/components/ChipInput/ChipInput.js.map +1 -1
- package/lib-esm/components/Dialog/AlertDialog.d.ts +11 -12
- package/lib-esm/components/Dialog/AlertDialog.js +4 -11
- package/lib-esm/components/Dialog/AlertDialog.js.map +1 -1
- package/lib-esm/components/Dialog/ConfirmDialog.d.ts +13 -14
- package/lib-esm/components/Dialog/ConfirmDialog.js +4 -12
- package/lib-esm/components/Dialog/ConfirmDialog.js.map +1 -1
- package/lib-esm/components/Dialog/Dialog.d.ts +8 -14
- package/lib-esm/components/Dialog/Dialog.js +11 -9
- package/lib-esm/components/Dialog/Dialog.js.map +1 -1
- package/lib-esm/components/Dialog/PromptDialog.d.ts +18 -19
- package/lib-esm/components/Dialog/PromptDialog.js +10 -18
- package/lib-esm/components/Dialog/PromptDialog.js.map +1 -1
- package/lib-esm/components/DragAndDrop/DragAndDrop.d.ts +37 -59
- package/lib-esm/components/DragAndDrop/DragAndDrop.js +23 -26
- package/lib-esm/components/DragAndDrop/DragAndDrop.js.map +1 -1
- package/lib-esm/components/DragAndDrop/DragItem.d.ts +2 -2
- package/lib-esm/components/DragAndDrop/DragItem.js +40 -38
- package/lib-esm/components/DragAndDrop/DragItem.js.map +1 -1
- package/lib-esm/components/DragAndDrop/types.d.ts +3 -3
- package/lib-esm/components/DragAndDrop/types.js.map +1 -1
- package/lib-esm/components/Drawer/Drawer.d.ts +24 -31
- package/lib-esm/components/Drawer/Drawer.js +49 -45
- package/lib-esm/components/Drawer/Drawer.js.map +1 -1
- package/lib-esm/components/Groups/Group.d.ts +6 -8
- package/lib-esm/components/Groups/Group.js +12 -10
- package/lib-esm/components/Groups/Group.js.map +1 -1
- package/lib-esm/components/Input/Checkbox.d.ts +12 -15
- package/lib-esm/components/Input/Checkbox.js +30 -26
- package/lib-esm/components/Input/Checkbox.js.map +1 -1
- package/lib-esm/components/Input/Dropdown.d.ts +8 -18
- package/lib-esm/components/Input/Dropdown.js +42 -17
- package/lib-esm/components/Input/Dropdown.js.map +1 -1
- package/lib-esm/components/Input/Input.d.ts +8 -3
- package/lib-esm/components/Input/Input.js +20 -19
- package/lib-esm/components/Input/Input.js.map +1 -1
- package/lib-esm/components/Input/Radio.d.ts +4 -8
- package/lib-esm/components/Input/Radio.js +16 -13
- package/lib-esm/components/Input/Radio.js.map +1 -1
- package/lib-esm/components/Input/RadioButton.d.ts +4 -8
- package/lib-esm/components/Input/RadioButton.js +15 -12
- package/lib-esm/components/Input/RadioButton.js.map +1 -1
- package/lib-esm/components/Input/Select.d.ts +6 -13
- package/lib-esm/components/Input/Select.js +21 -18
- package/lib-esm/components/Input/Select.js.map +1 -1
- package/lib-esm/components/Input/TextArea.d.ts +6 -13
- package/lib-esm/components/Input/TextArea.js +29 -24
- package/lib-esm/components/Input/TextArea.js.map +1 -1
- package/lib-esm/components/Input/Toggle.d.ts +4 -9
- package/lib-esm/components/Input/Toggle.js +12 -10
- package/lib-esm/components/Input/Toggle.js.map +1 -1
- package/lib-esm/components/Menu/Menu.d.ts +4 -14
- package/lib-esm/components/Menu/Menu.js +24 -16
- package/lib-esm/components/Menu/Menu.js.map +1 -1
- package/lib-esm/components/Menu/MenuContext.d.ts +4 -4
- package/lib-esm/components/Menu/MenuContext.js +1 -0
- package/lib-esm/components/Menu/MenuContext.js.map +1 -1
- package/lib-esm/components/Menu/MenuItem.d.ts +10 -4
- package/lib-esm/components/Menu/MenuItem.js +19 -5
- package/lib-esm/components/Menu/MenuItem.js.map +1 -1
- package/lib-esm/components/Modal/Modal.d.ts +17 -23
- package/lib-esm/components/Modal/Modal.js +37 -34
- package/lib-esm/components/Modal/Modal.js.map +1 -1
- package/lib-esm/components/Notification/Notification.d.ts +39 -34
- package/lib-esm/components/Notification/Notification.js +16 -39
- package/lib-esm/components/Notification/Notification.js.map +1 -1
- package/lib-esm/components/Notification/NotificationManager.d.ts +4 -4
- package/lib-esm/components/Notification/NotificationManager.js +18 -14
- package/lib-esm/components/Notification/NotificationManager.js.map +1 -1
- package/lib-esm/components/Notification/index.d.ts +1 -0
- package/lib-esm/components/Notification/style.d.ts +2 -3
- package/lib-esm/components/Notification/style.js +11 -11
- package/lib-esm/components/Notification/style.js.map +1 -1
- package/lib-esm/components/Popover/Popover.d.ts +21 -20
- package/lib-esm/components/Popover/Popover.js +42 -44
- package/lib-esm/components/Popover/Popover.js.map +1 -1
- package/lib-esm/components/Spinner/Spinner.d.ts +14 -15
- package/lib-esm/components/Spinner/Spinner.js +12 -13
- package/lib-esm/components/Spinner/Spinner.js.map +1 -1
- package/lib-esm/components/Stepper/Step.d.ts +15 -12
- package/lib-esm/components/Stepper/Step.js +10 -8
- package/lib-esm/components/Stepper/Step.js.map +1 -1
- package/lib-esm/components/Stepper/Stepper.d.ts +11 -17
- package/lib-esm/components/Stepper/Stepper.js +25 -23
- package/lib-esm/components/Stepper/Stepper.js.map +1 -1
- package/lib-esm/components/Tabs/Tab.d.ts +10 -16
- package/lib-esm/components/Tabs/Tab.js +0 -8
- package/lib-esm/components/Tabs/Tab.js.map +1 -1
- package/lib-esm/components/Tabs/Tabs.d.ts +11 -22
- package/lib-esm/components/Tabs/Tabs.js +39 -31
- package/lib-esm/components/Tabs/Tabs.js.map +1 -1
- package/lib-esm/components/Toast/Toast.d.ts +7 -7
- package/lib-esm/components/Toast/Toast.js +13 -12
- package/lib-esm/components/Toast/Toast.js.map +1 -1
- package/lib-esm/components/Toast/ToastStory.d.ts +21 -24
- package/lib-esm/components/Tooltip/Tooltip.d.ts +11 -14
- package/lib-esm/components/Tooltip/Tooltip.js +11 -21
- package/lib-esm/components/Tooltip/Tooltip.js.map +1 -1
- package/lib-esm/icons/CheckCircle.js +2 -2
- package/lib-esm/icons/CheckCircle.js.map +1 -1
- package/lib-esm/icons/ErrorOutline.js +2 -2
- package/lib-esm/icons/ErrorOutline.js.map +1 -1
- package/lib-esm/icons/Info.js +2 -2
- package/lib-esm/icons/Info.js.map +1 -1
- package/lib-esm/icons/ReportProblem.js +2 -2
- package/lib-esm/icons/ReportProblem.js.map +1 -1
- package/lib-esm/index.js +43 -0
- package/lib-esm/shared/LayerManager.d.ts +5 -4
- package/lib-esm/shared/LayerManager.js +111 -111
- package/lib-esm/shared/LayerManager.js.map +1 -1
- package/lib-esm/shared/styles.d.ts +1 -1
- package/lib-esm/shared/styles.js +9 -9
- package/lib-esm/shared/styles.js.map +1 -1
- package/package.json +66 -31
- package/lib-esm/components/index.js +0 -43
- /package/lib-esm/{components/index.js.map → index.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayerManager.js","sources":["../../src/shared/LayerManager.tsx"],"sourcesContent":["import React, { ReactPortal, useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from './constants';\n\n/** Enums for layer position on screen. */\nexport enum LAYER_POSITION {\n TOP_LEFT,\n TOP_CENTER,\n TOP_RIGHT,\n BOTTOM_LEFT,\n BOTTOM_CENTER,\n BOTTOM_RIGHT,\n DIALOG,\n}\n\ninterface LayerConfig {\n /** Show an overlay */\n overlay?: boolean;\n /** Element to render inside the layer. */\n component: JSX.Element;\n /** Position of the layer */\n position?: LAYER_POSITION;\n /** Delay for exit */\n exitDelay?: number;\n /** Close layer on `esc` key press. */\n closeOnEsc?: boolean;\n /** Close layer overlay is clicked. */\n closeOnOverlayClick?: boolean;\n /** Callback called when modal closes */\n closeCallback?: <T>(resp: T) => void;\n /** Layer is created with max z-index */\n alwaysOnTop?: boolean;\n}\n\n/** Default value of config */\nconst defaultConfig: LayerConfig = {\n closeOnEsc: true,\n overlay: false,\n position: LAYER_POSITION.TOP_LEFT,\n component: null,\n exitDelay: 0,\n closeOnOverlayClick: true,\n alwaysOnTop: false,\n};\n\n/** Metadata of each layer */\ninterface Layer {\n id: string;\n config: LayerConfig;\n element: HTMLDivElement;\n}\n\n/** Styles for each position */\nconst POSITION_STYLE = {\n [LAYER_POSITION.TOP_LEFT]: 'top: 0; left: 0;',\n [LAYER_POSITION.TOP_CENTER]: 'top: 0; left: 50%; justify-content: center;',\n [LAYER_POSITION.TOP_RIGHT]: 'top: 0; right: 0; justify-content: flex-end;',\n [LAYER_POSITION.BOTTOM_LEFT]: 'bottom: 0; left: 0;',\n [LAYER_POSITION.BOTTOM_CENTER]: 'bottom: 0; left: 50%; justify-content: center;',\n [LAYER_POSITION.BOTTOM_RIGHT]: 'bottom: 0; right: 0; justify-content: flex-end;',\n [LAYER_POSITION.DIALOG]: 'top: 0; left: 0; justify-content: center; align-items: center;',\n};\n\n/** Layer container component. */\nconst Container = styled.div<LayerConfig & { zIndex: number }>`\n position: fixed;\n display: flex;\n opacity: 0;\n transition: opacity 0.3s ease;\n ${(props) => POSITION_STYLE[props.position]}\n ${(props) =>\n props.overlay &&\n `\n width: 100%;\n height: 100vh;\n background-color: ${getThemeValue(THEME_NAME.BACKDROP_COLOR)};\n backdrop-filter: blur(0px);\n pointer-events: all;\n `}\n z-index: ${(props) => props.zIndex};\n\n .nf-layer-enter & {\n opacity: 1;\n ${(props) =>\n props.overlay &&\n `\n backdrop-filter: blur(3px);\n `}\n }\n`;\n\n/** Key code for different keys. */\nconst KEY_CODES = {\n ESC: 27,\n};\n\n/**\n * This is a shared helper class which manages the z-index of each layer.\n * If a component needs to be rendered in a different layer then this class\n * should be used. It internally maintains the stack of opened layer and each\n * `renderLayer` call will push a new layer in stack.\n *\n * This way we need not worry about the z-index and can freely keep on creating\n * new layers. The staring layer z-index is 10000. Leaving enough z-index for the\n * user if they desires so.\n *\n * @important Usage Pattern\n * To avoid creating duplicate layers (especially in React Strict Mode or Next.js),\n * always call `renderLayer` only once - either in a lifecycle method (like `componentDidUpdate`)\n * or in an imperative method (like `open()`).\n *\n * @example\n * // ❌ Don't call renderLayer in render() method\n * render() {\n * if (this.state.show) {\n * const [Component, closeFn] = LayerManager.renderLayer({ ... }); // Creates new layer on every render\n * return <Component />;\n * }\n * }\n *\n * @example\n * // ✅ Do call renderLayer once in a method and store the component\n * open() {\n * const [Component, closeFn] = LayerManager.renderLayer({ ... });\n * this.setState({ LayerComponent: Component });\n * }\n *\n * render() {\n * const { LayerComponent } = this.state;\n * return LayerComponent ? <LayerComponent /> : null;\n * }\n */\nclass LayerManager {\n /** Layer stack */\n private layers: Layer[] = [];\n /** z-index of the next layer */\n private nextIndex = 10000;\n private keyupHandler: (e: KeyboardEvent) => void;\n private timeoutIds = new Map<string, number>(); // Track timeouts\n\n /**\n * Constructor simply registers a event listener on body to\n * react to esc key press.\n */\n constructor() {\n if (typeof document !== 'undefined') {\n // Store handler reference for cleanup\n this.keyupHandler = (e) => {\n if (this.layers.length && e.keyCode === KEY_CODES.ESC) {\n const lastLayer = this.layers.slice(-1)[0];\n if (lastLayer.config.closeOnEsc !== false) {\n this.unmount(lastLayer);\n }\n }\n };\n document.body.addEventListener('keyup', this.keyupHandler);\n }\n }\n\n // Add cleanup method\n public destroy = () => {\n if (typeof document !== 'undefined' && this.keyupHandler) {\n document.body.removeEventListener('keyup', this.keyupHandler);\n }\n // Clear all pending timeouts\n this.timeoutIds.forEach((id) => clearTimeout(id));\n this.timeoutIds.clear();\n // Clean up remaining layers\n this.layers.forEach((layer) => {\n if (document.body.contains(layer.element)) {\n document.body.removeChild(layer.element);\n }\n });\n this.layers = [];\n };\n\n /**\n * Un-mounts a layer.\n *\n * It first adds a class 'nf-layer-exit' and then un-mounts the\n * layer after the `exitDelay` mentioned in the layer config.\n * This class will help component in triggering the entry animation.\n *\n * @param layer\n */\n private unmount = (layer: Layer, resp?: unknown) => {\n layer.element.setAttribute('class', 'nf-layer-exit');\n const index = this.layers.findIndex((item) => item === layer);\n if (index !== -1) {\n this.layers.splice(index, 1);\n }\n\n const timeoutId = window.setTimeout(() => {\n this.timeoutIds.delete(layer.id);\n try {\n layer.config.closeCallback?.(resp);\n } catch (e) {\n console.warn(e.message);\n }\n // Clear reference to help GC\n layer.config.component = null;\n }, layer.config.exitDelay);\n\n this.timeoutIds.set(layer.id, timeoutId);\n };\n\n /**\n * Renders a layer.\n * @param config\n */\n public renderLayer = (\n config: LayerConfig,\n ): [() => React.ReactPortal | null, (resp?: unknown) => void] => {\n // SSR guard\n if (typeof document === 'undefined') {\n return [() => null, () => {}];\n }\n\n // Merge default config with the provided config.\n const layerConfig = {\n ...defaultConfig,\n ...config,\n };\n\n // Get the z-index for the new layer\n const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : this.nextIndex++;\n const className = layerConfig.alwaysOnTop ? 'nf-layer-manager-top' : 'nf-layer-manager';\n\n // Create a unique ID for tracking this layer\n const layerId = `nf-layer-manager-${currentIndex}`;\n\n const overlayClickHandler = () => {\n const layer = this.layers.find((l) => l.id === layerId);\n if (layer && layer.config.closeOnOverlayClick !== false) {\n this.unmount(layer);\n }\n };\n\n const closeFn = (resp?: unknown) => {\n const layer = this.layers.find((l) => l.id === layerId);\n if (layer) {\n this.unmount(layer, resp);\n }\n };\n\n // Return callback which will trigger the un-mount.\n return [\n (): ReactPortal | null => {\n const [divElement, setDivElement] = React.useState<HTMLDivElement | null>(null);\n\n useEffect(() => {\n // Create the div element only once when component mounts\n const div = document.createElement('div');\n div.setAttribute('class', className);\n div.setAttribute('id', layerId);\n document.body.appendChild(div);\n\n // Add layer to stack\n const currentLayer = {\n id: layerId,\n config: layerConfig,\n element: div,\n };\n this.layers.push(currentLayer);\n\n setDivElement(div);\n // Add entry animation class after a short delay\n setTimeout(() => {\n div.setAttribute('class', 'nf-layer-enter');\n }, 10);\n\n // Track elements modified for accessibility\n const modifiedElements: Array<{\n element: Element;\n hadAriaHidden: boolean;\n previousValue: string | null;\n }> = [];\n let originalBodyOverflow: string | null = null;\n let originalBodyPosition: string | null = null;\n let originalBodyWidth: string | null = null;\n let originalBodyTop: string | null = null;\n let scrollY = 0;\n\n // Apply aria-hidden to siblings and body scroll lock for overlay modals\n if (layerConfig.overlay) {\n // Hide all body children except this layer portal, scripts, and styles\n const bodyChildren = Array.from(document.body.children);\n bodyChildren.forEach((child) => {\n if (\n child !== div &&\n child.className !== 'nf-layer-manager-top' &&\n child.tagName !== 'SCRIPT' &&\n child.tagName !== 'STYLE'\n ) {\n const hadAriaHidden = child.hasAttribute('aria-hidden');\n const previousValue = child.getAttribute('aria-hidden');\n\n // Only set aria-hidden if not already hidden\n if (previousValue !== 'true') {\n child.setAttribute('aria-hidden', 'true');\n modifiedElements.push({\n element: child,\n hadAriaHidden,\n previousValue,\n });\n }\n }\n });\n\n // Prevent body scroll on iOS\n scrollY = window.scrollY;\n originalBodyOverflow = document.body.style.overflow;\n originalBodyPosition = document.body.style.position;\n originalBodyWidth = document.body.style.width;\n originalBodyTop = document.body.style.top;\n\n document.body.style.overflow = 'hidden';\n document.body.style.position = 'fixed';\n document.body.style.width = '100%';\n document.body.style.top = `-${scrollY}px`;\n }\n\n // Cleanup function - remove div when component unmounts\n return () => {\n // Restore aria-hidden attributes\n modifiedElements.forEach(({ element, hadAriaHidden, previousValue }) => {\n if (document.body.contains(element)) {\n if (hadAriaHidden && previousValue !== null) {\n element.setAttribute('aria-hidden', previousValue);\n } else {\n element.removeAttribute('aria-hidden');\n }\n }\n });\n\n // Restore body scroll\n if (layerConfig.overlay) {\n document.body.style.overflow = originalBodyOverflow || '';\n document.body.style.position = originalBodyPosition || '';\n document.body.style.width = originalBodyWidth || '';\n document.body.style.top = originalBodyTop || '';\n window.scrollTo(0, scrollY);\n }\n\n if (document.body.contains(div)) {\n document.body.removeChild(div);\n }\n // Remove from layers array\n const index = this.layers.findIndex((layer) => layer.id === layerId);\n if (index !== -1) {\n this.layers.splice(index, 1);\n }\n };\n }, []); // Empty dependency array - run only once\n\n if (!divElement) {\n return null;\n }\n\n return ReactDOM.createPortal(\n <Container onClick={overlayClickHandler} zIndex={currentIndex} {...layerConfig}>\n {layerConfig.component}\n </Container>,\n divElement,\n );\n },\n closeFn,\n ];\n };\n}\n\n// Return the instance of the class to create a Singleton.\nexport default new LayerManager();\n"],"names":["LAYER_POSITION","defaultConfig","closeOnEsc","overlay","position","component","exitDelay","closeOnOverlayClick","alwaysOnTop","POSITION_STYLE","Container","styled","props","getThemeValue","THEME_NAME","BACKDROP_COLOR","zIndex","KEY_CODES","ESC","LayerManager","layers","nextIndex","timeoutIds","Map","destroy","document","keyupHandler","body","removeEventListener","forEach","id","clearTimeout","clear","layer","contains","element","removeChild","unmount","resp","setAttribute","index","findIndex","item","splice","timeoutId","window","setTimeout","delete","config","closeCallback","e","console","warn","message","set","renderLayer","layerConfig","currentIndex","className","layerId","overlayClickHandler","find","l","closeFn","divElement","setDivElement","React","useState","useEffect","div","createElement","appendChild","currentLayer","push","modifiedElements","originalBodyOverflow","originalBodyPosition","originalBodyWidth","originalBodyTop","scrollY","bodyChildren","Array","from","children","child","tagName","hadAriaHidden","hasAttribute","previousValue","getAttribute","style","overflow","width","top","removeAttribute","scrollTo","ReactDOM","createPortal","_jsx","onClick","length","keyCode","lastLayer","slice","addEventListener"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LayerManager.js","sources":["../../src/shared/LayerManager.tsx"],"sourcesContent":["import React, { ForwardRefExoticComponent, RefAttributes, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from './constants';\n\n/** Enums for layer position on screen. */\nexport enum LAYER_POSITION {\n TOP_LEFT,\n TOP_CENTER,\n TOP_RIGHT,\n BOTTOM_LEFT,\n BOTTOM_CENTER,\n BOTTOM_RIGHT,\n DIALOG,\n}\n\ninterface LayerConfig {\n /** Show an overlay */\n overlay?: boolean;\n /** Element to render inside the layer. */\n component: React.JSX.Element | null;\n /** Position of the layer */\n position?: LAYER_POSITION;\n /** Delay for exit */\n exitDelay?: number;\n /** Close layer on `esc` key press. */\n closeOnEsc?: boolean;\n /** Close layer overlay is clicked. */\n closeOnOverlayClick?: boolean;\n /** Callback called when modal closes */\n closeCallback?: (resp?: unknown) => void;\n /** Layer is created with max z-index */\n alwaysOnTop?: boolean;\n}\n\n/** Default value of config */\nconst defaultConfig: LayerConfig = {\n closeOnEsc: true,\n overlay: false,\n position: LAYER_POSITION.TOP_LEFT,\n component: null,\n exitDelay: 0,\n closeOnOverlayClick: true,\n alwaysOnTop: false,\n};\n\n/** Metadata of each layer */\ninterface Layer {\n id: string;\n config: LayerConfig;\n element: HTMLDivElement;\n}\n\n/** Styles for each position */\nconst POSITION_STYLE: Record<LAYER_POSITION, string> = {\n [LAYER_POSITION.TOP_LEFT]: 'top: 0; left: 0;',\n [LAYER_POSITION.TOP_CENTER]: 'top: 0; left: 50%; justify-content: center;',\n [LAYER_POSITION.TOP_RIGHT]: 'top: 0; right: 0; justify-content: flex-end;',\n [LAYER_POSITION.BOTTOM_LEFT]: 'bottom: 0; left: 0;',\n [LAYER_POSITION.BOTTOM_CENTER]: 'bottom: 0; left: 50%; justify-content: center;',\n [LAYER_POSITION.BOTTOM_RIGHT]: 'bottom: 0; right: 0; justify-content: flex-end;',\n [LAYER_POSITION.DIALOG]: 'top: 0; left: 0; justify-content: center; align-items: center;',\n};\n\n/** Layer container component. */\nconst Container = styled.div<LayerConfig & { zIndex: number }>`\n position: fixed;\n display: flex;\n opacity: 0;\n transition: opacity 0.3s ease;\n ${(props) => POSITION_STYLE[props.position as LAYER_POSITION]}\n ${(props) =>\n props.overlay &&\n `\n width: 100%;\n height: 100vh;\n background-color: ${getThemeValue(THEME_NAME.BACKDROP_COLOR)};\n backdrop-filter: blur(0px);\n pointer-events: all;\n `}\n z-index: ${(props) => props.zIndex};\n\n .nf-layer-enter & {\n opacity: 1;\n ${(props) =>\n props.overlay &&\n `\n backdrop-filter: blur(3px);\n `}\n }\n`;\n\n/** Key code for different keys. */\nconst KEY_CODES = {\n ESC: 27,\n};\n\n/**\n * This is a shared helper class which manages the z-index of each layer.\n * If a component needs to be rendered in a different layer then this class\n * should be used. It internally maintains the stack of opened layer and each\n * `renderLayer` call will push a new layer in stack.\n *\n * This way we need not worry about the z-index and can freely keep on creating\n * new layers. The staring layer z-index is 10000. Leaving enough z-index for the\n * user if they desires so.\n *\n * @important Usage Pattern\n * To avoid creating duplicate layers (especially in React Strict Mode or Next.js),\n * always call `renderLayer` only once - either in a lifecycle method (like `componentDidUpdate`)\n * or in an imperative method (like `open()`).\n *\n * @example\n * // ❌ Don't call renderLayer in render() method\n * render() {\n * if (this.state.show) {\n * const [Component, closeFn] = LayerManager.renderLayer({ ... }); // Creates new layer on every render\n * return <Component />;\n * }\n * }\n *\n * @example\n * // ✅ Do call renderLayer once in a method and store the component\n * open() {\n * const [Component, closeFn] = LayerManager.renderLayer({ ... });\n * this.setState({ LayerComponent: Component });\n * }\n *\n * render() {\n * const { LayerComponent } = this.state;\n * return LayerComponent ? <LayerComponent /> : null;\n * }\n */\nclass LayerManager {\n /** Layer stack */\n private layers: Layer[] = [];\n /** z-index of the next layer */\n private nextIndex = 0;\n private keyupHandler!: (e: KeyboardEvent) => void;\n private timeoutIds = new Map<string, number>(); // Track timeouts\n\n /**\n * Constructor simply registers a event listener on body to\n * react to esc key press.\n */\n constructor() {\n if (typeof document !== 'undefined') {\n // Store handler reference for cleanup\n this.keyupHandler = (e) => {\n if (this.layers.length && e.keyCode === KEY_CODES.ESC) {\n const lastLayer = this.layers.slice(-1)[0];\n if (lastLayer.config.closeOnEsc !== false) {\n this.unmount(lastLayer);\n }\n }\n };\n document.body.addEventListener('keyup', this.keyupHandler);\n }\n }\n\n // Add cleanup method\n public destroy = () => {\n if (typeof document !== 'undefined' && this.keyupHandler) {\n document.body.removeEventListener('keyup', this.keyupHandler);\n }\n // Clear all pending timeouts\n this.timeoutIds.forEach((id) => clearTimeout(id));\n this.timeoutIds.clear();\n // Clean up remaining layers\n this.layers.forEach((layer) => {\n if (document.body.contains(layer.element)) {\n document.body.removeChild(layer.element);\n }\n });\n this.layers = [];\n };\n\n /**\n * Un-mounts a layer.\n *\n * It first adds a class 'nf-layer-exit' and then un-mounts the\n * layer after the `exitDelay` mentioned in the layer config.\n * This class will help component in triggering the entry animation.\n *\n * @param layer\n */\n private unmount = (layer: Layer, resp?: unknown) => {\n layer.element.setAttribute('class', 'nf-layer-exit');\n const index = this.layers.findIndex((item) => item === layer);\n if (index !== -1) {\n this.layers.splice(index, 1);\n }\n\n const timeoutId = window.setTimeout(() => {\n this.timeoutIds.delete(layer.id);\n try {\n layer.config.closeCallback?.(resp);\n } catch (err) {\n if (err instanceof Error) {\n console.warn(err.message);\n } else {\n console.warn(err);\n }\n }\n // Clear reference to help GC\n layer.config.component = null;\n }, layer.config.exitDelay);\n\n this.timeoutIds.set(layer.id, timeoutId);\n };\n\n private Empty = () => {\n return null;\n };\n\n /**\n * Renders a layer.\n * @param config\n */\n public renderLayer = (\n config: LayerConfig,\n ): [ForwardRefExoticComponent<RefAttributes<HTMLDivElement>>, (resp?: unknown) => void] => {\n // SSR guard\n if (typeof document === 'undefined') {\n return [React.forwardRef(this.Empty), () => {}];\n }\n\n // Merge default config with the provided config.\n const layerConfig = {\n ...defaultConfig,\n ...config,\n };\n\n // Get the z-index for the new layer\n const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : 10000 + this.nextIndex;\n const className = layerConfig.alwaysOnTop ? 'nf-layer-manager-top' : 'nf-layer-manager';\n\n // Create a unique ID for tracking this layer\n const layerId = `${className}-${currentIndex + this.nextIndex}`;\n\n // Always increment for next layer\n this.nextIndex += 1;\n\n const overlayClickHandler = () => {\n const layer = this.layers.find((l) => l.id === layerId);\n if (layer && layer.config.closeOnOverlayClick !== false) {\n this.unmount(layer);\n }\n };\n\n const closeFn = (resp?: unknown) => {\n const layer = this.layers.find((l) => l.id === layerId);\n if (layer) {\n this.unmount(layer, resp);\n }\n };\n\n const LayerContainer = (\n props: React.HTMLAttributes<HTMLDivElement>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const [divElement, setDivElement] = React.useState<HTMLDivElement | null>(null);\n\n useEffect(() => {\n // Create the div element only once when component mounts\n const div = document.createElement('div');\n div.setAttribute('class', className);\n div.setAttribute('id', layerId);\n document.body.appendChild(div);\n\n // Add layer to stack\n const currentLayer = {\n id: layerId,\n config: layerConfig,\n element: div,\n };\n this.layers.push(currentLayer);\n\n setDivElement(div);\n // Add entry animation class after a short delay\n setTimeout(() => {\n div.setAttribute('class', 'nf-layer-enter');\n }, 10);\n\n // Track elements modified for accessibility\n const modifiedElements: Array<{\n element: Element;\n hadAriaHidden: boolean;\n previousValue: string | null;\n }> = [];\n let originalBodyOverflow: string | null = null;\n let scrollY = 0;\n\n // Apply aria-hidden to siblings and body scroll lock for overlay modals\n if (layerConfig.overlay) {\n // Hide all body children except this layer portal, scripts, and styles\n const bodyChildren = Array.from(document.body.children);\n bodyChildren.forEach((child) => {\n if (\n child !== div &&\n child.className !== 'nf-layer-manager-top' &&\n child.tagName !== 'SCRIPT' &&\n child.tagName !== 'STYLE'\n ) {\n const hadAriaHidden = child.hasAttribute('aria-hidden');\n const previousValue = child.getAttribute('aria-hidden');\n\n // Only set aria-hidden if not already hidden\n if (previousValue !== 'true') {\n child.setAttribute('aria-hidden', 'true');\n modifiedElements.push({\n element: child,\n hadAriaHidden,\n previousValue,\n });\n }\n }\n });\n\n // Prevent body scroll on iOS\n scrollY = window.scrollY;\n originalBodyOverflow = document.body.style.overflow;\n\n document.body.style.overflow = 'hidden';\n }\n\n // Cleanup function - remove div when component unmounts\n return () => {\n // Restore aria-hidden attributes\n modifiedElements.forEach(({ element, hadAriaHidden, previousValue }) => {\n if (document.body.contains(element)) {\n if (hadAriaHidden && previousValue !== null) {\n element.setAttribute('aria-hidden', previousValue);\n } else {\n element.removeAttribute('aria-hidden');\n }\n }\n });\n\n // Restore body scroll\n if (layerConfig.overlay) {\n document.body.style.overflow = originalBodyOverflow || '';\n window.scrollTo(0, scrollY);\n }\n\n if (document.body.contains(div)) {\n document.body.removeChild(div);\n }\n // Remove from layers array\n const index = this.layers.findIndex((layer) => layer.id === layerId);\n if (index !== -1) {\n this.layers.splice(index, 1);\n }\n };\n }, []); // Empty dependency array - run only once\n\n if (!divElement) {\n return null;\n }\n\n return createPortal(\n <Container\n {...props}\n ref={ref}\n onClick={overlayClickHandler}\n zIndex={currentIndex}\n {...layerConfig}\n >\n {layerConfig.component}\n </Container>,\n divElement,\n );\n };\n\n // Return callback which will trigger the un-mount.\n return [\n React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(LayerContainer),\n closeFn,\n ];\n };\n}\n\n// Return the instance of the class to create a Singleton.\nexport default new LayerManager();\n"],"names":["LAYER_POSITION","defaultConfig","closeOnEsc","overlay","position","component","exitDelay","closeOnOverlayClick","alwaysOnTop","POSITION_STYLE","Container","styled","props","getThemeValue","THEME_NAME","BACKDROP_COLOR","zIndex","KEY_CODES","ESC","LayerManager","layers","nextIndex","timeoutIds","Map","destroy","document","keyupHandler","body","removeEventListener","forEach","id","clearTimeout","clear","layer","contains","element","removeChild","unmount","resp","setAttribute","index","findIndex","item","splice","timeoutId","window","setTimeout","delete","config","closeCallback","err","Error","console","warn","message","set","Empty","renderLayer","React","forwardRef","layerConfig","currentIndex","className","layerId","overlayClickHandler","find","l","closeFn","LayerContainer","ref","divElement","setDivElement","useState","useEffect","div","createElement","appendChild","currentLayer","push","modifiedElements","originalBodyOverflow","scrollY","bodyChildren","Array","from","children","child","tagName","hadAriaHidden","hasAttribute","previousValue","getAttribute","style","overflow","removeAttribute","scrollTo","createPortal","_jsx","onClick","e","length","keyCode","lastLayer","slice","addEventListener"],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ export declare const Ellipsis: import("@emotion/styled").StyledComponent<{
|
|
|
5
5
|
export declare const Header: import("@emotion/styled").StyledComponent<{
|
|
6
6
|
theme?: import("@emotion/react").Theme;
|
|
7
7
|
as?: React.ElementType;
|
|
8
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<
|
|
8
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
9
9
|
export declare const Body: import("@emotion/styled").StyledComponent<{
|
|
10
10
|
theme?: import("@emotion/react").Theme;
|
|
11
11
|
as?: React.ElementType;
|
package/lib-esm/shared/styles.js
CHANGED
|
@@ -2,21 +2,21 @@ import styled from '@emotion/styled';
|
|
|
2
2
|
import { getThemeValue, THEME_NAME } from './constants.js';
|
|
3
3
|
|
|
4
4
|
const Ellipsis = /*#__PURE__*/ styled("span", {
|
|
5
|
-
target: "
|
|
5
|
+
target: "e3amiur0",
|
|
6
6
|
label: "Ellipsis"
|
|
7
7
|
})("white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;");
|
|
8
|
-
const Header = /*#__PURE__*/ styled("
|
|
9
|
-
target: "
|
|
8
|
+
const Header$1 = /*#__PURE__*/ styled("div", {
|
|
9
|
+
target: "e3amiur1",
|
|
10
10
|
label: "Header"
|
|
11
11
|
})("padding:10px 15px;line-height:26px;border-bottom:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";font-size:16px;font-weight:bold;");
|
|
12
|
-
const Body = /*#__PURE__*/ styled("div", {
|
|
13
|
-
target: "
|
|
12
|
+
const Body$1 = /*#__PURE__*/ styled("div", {
|
|
13
|
+
target: "e3amiur2",
|
|
14
14
|
label: "Body"
|
|
15
|
-
})("padding:
|
|
16
|
-
const Footer = /*#__PURE__*/ styled("div", {
|
|
17
|
-
target: "
|
|
15
|
+
})("padding:0 15px;margin:20px 0;flex:1;overflow:auto;");
|
|
16
|
+
const Footer$1 = /*#__PURE__*/ styled("div", {
|
|
17
|
+
target: "e3amiur3",
|
|
18
18
|
label: "Footer"
|
|
19
19
|
})("padding:10px 15px;border-top:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";display:flex;justify-content:flex-end;");
|
|
20
20
|
|
|
21
|
-
export { Body, Ellipsis, Footer, Header };
|
|
21
|
+
export { Body$1 as Body, Ellipsis, Footer$1 as Footer, Header$1 as Header };
|
|
22
22
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../src/shared/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from './constants';\n\nexport const Ellipsis = styled.span`\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n flex: 1;\n`;\n\nexport const Header = styled.
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../src/shared/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from './constants';\n\nexport const Ellipsis = styled.span`\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n flex: 1;\n`;\n\nexport const Header = styled.div`\n padding: 10px 15px;\n line-height: 26px;\n border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n font-size: 16px;\n font-weight: bold;\n`;\n\nexport const Body = styled.div`\n padding: 0 15px;\n margin: 20px 0;\n flex: 1;\n overflow: auto;\n`;\n\nexport const Footer = styled.div`\n padding: 10px 15px;\n border-top: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n display: flex;\n justify-content: flex-end;\n`;\n"],"names":["Ellipsis","styled","Header","getThemeValue","THEME_NAME","BORDER_LIGHT_COLOR","Body","Footer"],"mappings":";;;MAGaA,QAAAA,iBAAWC,MAAAA,CAAAA,MAAAA,EAAAA;;;AAKtB,CAAA,CAAA,CAAA,mEAAA;MAEWC,QAAAA,iBAASD,MAAAA,CAAAA,KAAAA,EAAAA;;;kEAGSE,aAAAA,CAAcC,UAAAA,CAAWC,kBAAkB,CAAA,EAAA,mCAAA;MAK7DC,MAAAA,iBAAOL,MAAAA,CAAAA,KAAAA,EAAAA;;;AAKlB,CAAA,CAAA,CAAA,oDAAA;MAEWM,QAAAA,iBAASN,MAAAA,CAAAA,KAAAA,EAAAA;;;8CAEME,aAAAA,CAAcC,UAAAA,CAAWC,kBAAkB,CAAA,EAAA,yCAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "no-frills-ui",
|
|
3
|
-
"version": "0.0.14-
|
|
3
|
+
"version": "0.0.14-rc.1",
|
|
4
4
|
"description": "React components that are made of styled native components. Mostly!",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
|
-
"module": "lib-esm/
|
|
7
|
-
"jsnext:main": "lib-esm/
|
|
8
|
-
"types": "lib-esm/
|
|
6
|
+
"module": "lib-esm/index.js",
|
|
7
|
+
"jsnext:main": "lib-esm/index.js",
|
|
8
|
+
"types": "lib-esm/index.d.ts",
|
|
9
9
|
"sideEffects": false,
|
|
10
10
|
"exports": {
|
|
11
11
|
".": {
|
|
12
|
-
"types": "./lib-esm/
|
|
13
|
-
"import": "./lib-esm/
|
|
12
|
+
"types": "./lib-esm/index.d.ts",
|
|
13
|
+
"import": "./lib-esm/index.js",
|
|
14
14
|
"require": "./dist/index.js"
|
|
15
15
|
}
|
|
16
16
|
},
|
|
@@ -22,15 +22,48 @@
|
|
|
22
22
|
"clean": "shx rm -rf dist lib-esm",
|
|
23
23
|
"build": "NODE_ENV=production tsc --emitDeclarationOnly && rollup -c",
|
|
24
24
|
"build:dev": "NODE_ENV=development tsc --emitDeclarationOnly && rollup -c",
|
|
25
|
-
"
|
|
25
|
+
"build:storybook": "storybook build",
|
|
26
|
+
"test": "jest",
|
|
27
|
+
"test:watch": "jest --watch",
|
|
28
|
+
"test:coverage": "jest --coverage",
|
|
29
|
+
"size": "size-limit",
|
|
30
|
+
"size:why": "size-limit --why",
|
|
26
31
|
"lint": "eslint . --ext .js,.jsx,.mjs,.ts,.tsx",
|
|
27
32
|
"lint:fix": "eslint . --ext .js,.jsx,.mjs,.ts,.tsx --fix",
|
|
28
33
|
"format": "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,html,json,md,mdx,yml,yaml}\"",
|
|
29
34
|
"format:check": "prettier --check \"**/*.{js,jsx,mjs,ts,tsx,html,json,md,mdx,yml,yaml}\"",
|
|
30
35
|
"storybook": "storybook dev -p 6006",
|
|
31
|
-
"build-storybook": "storybook build",
|
|
32
36
|
"prepare": "husky && npm run clean && npm run build"
|
|
33
37
|
},
|
|
38
|
+
"size-limit": [
|
|
39
|
+
{
|
|
40
|
+
"name": "Full Bundle (CJS)",
|
|
41
|
+
"path": "dist/index.js",
|
|
42
|
+
"limit": "25 KB",
|
|
43
|
+
"gzip": true
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"name": "Tree-shaking - Single Component (Button)",
|
|
47
|
+
"path": "lib-esm/index.js",
|
|
48
|
+
"import": "{ Button }",
|
|
49
|
+
"limit": "5 KB",
|
|
50
|
+
"gzip": true
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"name": "Tree-shaking - Multiple Components",
|
|
54
|
+
"path": "lib-esm/index.js",
|
|
55
|
+
"import": "{ Button, Card, Input }",
|
|
56
|
+
"limit": "10 KB",
|
|
57
|
+
"gzip": true
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"name": "Tree-shaking - All exports",
|
|
61
|
+
"path": "lib-esm/index.js",
|
|
62
|
+
"import": "*",
|
|
63
|
+
"limit": "25 KB",
|
|
64
|
+
"gzip": true
|
|
65
|
+
}
|
|
66
|
+
],
|
|
34
67
|
"repository": {
|
|
35
68
|
"type": "git",
|
|
36
69
|
"url": "git+https://github.com/pushkar8723/no-frills-ui.git"
|
|
@@ -54,17 +87,29 @@
|
|
|
54
87
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
55
88
|
},
|
|
56
89
|
"devDependencies": {
|
|
57
|
-
"@
|
|
90
|
+
"@axe-core/react": "^4.11.0",
|
|
91
|
+
"@emotion/react": "^11.0.0",
|
|
92
|
+
"@emotion/styled": "^11.0.0",
|
|
93
|
+
"@rollup/plugin-commonjs": "^29.0.0",
|
|
94
|
+
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
58
95
|
"@rollup/plugin-swc": "^0.4.0",
|
|
59
96
|
"@rollup/plugin-terser": "^0.4.4",
|
|
97
|
+
"@size-limit/preset-small-lib": "^12.0.0",
|
|
60
98
|
"@storybook/addon-docs": "^10.0.2",
|
|
61
99
|
"@storybook/addon-links": "^10.0.2",
|
|
62
100
|
"@storybook/addon-webpack5-compiler-swc": "^4.0.1",
|
|
63
101
|
"@storybook/cli": "^10.0.2",
|
|
64
102
|
"@storybook/react-webpack5": "^10.0.2",
|
|
65
|
-
"@swc/
|
|
66
|
-
"@
|
|
67
|
-
"@
|
|
103
|
+
"@swc/core": "^1.15.4",
|
|
104
|
+
"@swc/plugin-emotion": "^14.0.1",
|
|
105
|
+
"@testing-library/dom": "^10.4.1",
|
|
106
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
107
|
+
"@testing-library/react": "^16.3.1",
|
|
108
|
+
"@types/jest": "^30.0.0",
|
|
109
|
+
"@types/jest-axe": "^3.5.9",
|
|
110
|
+
"@types/node": "^25.0.2",
|
|
111
|
+
"@types/react": "^19.2.7",
|
|
112
|
+
"@types/react-dom": "^19.2.3",
|
|
68
113
|
"@typescript-eslint/eslint-plugin": "^8",
|
|
69
114
|
"@typescript-eslint/parser": "^8",
|
|
70
115
|
"eslint": "^8",
|
|
@@ -75,32 +120,22 @@
|
|
|
75
120
|
"eslint-plugin-react": "^7",
|
|
76
121
|
"eslint-plugin-react-hooks": "^4",
|
|
77
122
|
"husky": "^9",
|
|
123
|
+
"jest": "^30.2.0",
|
|
124
|
+
"jest-axe": "^10.0.0",
|
|
125
|
+
"jest-environment-jsdom": "^30.2.0",
|
|
78
126
|
"lint-staged": "^15",
|
|
79
127
|
"prettier": "^3",
|
|
80
|
-
"react": "^
|
|
81
|
-
"react-dom": "^
|
|
128
|
+
"react": "^19.2.3",
|
|
129
|
+
"react-dom": "^19.2.3",
|
|
82
130
|
"remark-gfm": "^4.0.1",
|
|
83
131
|
"rollup": "^4.52.5",
|
|
84
|
-
"rollup-plugin-commonjs": "^10.1.0",
|
|
85
|
-
"rollup-plugin-node-resolve": "^5.2.0",
|
|
86
132
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
87
|
-
"
|
|
88
|
-
"
|
|
133
|
+
"shx": "^0.4.0",
|
|
134
|
+
"size-limit": "^12.0.0",
|
|
89
135
|
"storybook": "^10.0.2",
|
|
136
|
+
"ts-jest": "^29.4.6",
|
|
90
137
|
"tslib": "^2.0.0",
|
|
91
138
|
"typescript": "^5.7.2"
|
|
92
139
|
},
|
|
93
|
-
"
|
|
94
|
-
"@emotion/react": "^11.13.5",
|
|
95
|
-
"@emotion/styled": "^11.13.5",
|
|
96
|
-
"prop-types": "^15.7.2"
|
|
97
|
-
},
|
|
98
|
-
"bit": {
|
|
99
|
-
"env": {
|
|
100
|
-
"compiler": "bit.envs/compilers/react-typescript@3.1.53"
|
|
101
|
-
},
|
|
102
|
-
"componentsDefaultDirectory": "components/{name}",
|
|
103
|
-
"packageManager": "npm"
|
|
104
|
-
},
|
|
105
|
-
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
|
140
|
+
"packageManager": "yarn@4.12.0"
|
|
106
141
|
}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
export { default as Accordion } from './Accordion/Accordion.js';
|
|
2
|
-
export { default as AccordionStep, AccordionStepBody, AccordionStepFooter } from './Accordion/AccordionStep.js';
|
|
3
|
-
export { BADGE_TYPE, default as Badge } from './Badge/Badge.js';
|
|
4
|
-
export { default as Button } from './Button/Button.js';
|
|
5
|
-
export { default as Card } from './Card/Card.js';
|
|
6
|
-
export { default as Chip } from './Chip/Chip.js';
|
|
7
|
-
export { default as ChipInput } from './ChipInput/ChipInput.js';
|
|
8
|
-
export { default as Dialog } from './Dialog/Dialog.js';
|
|
9
|
-
export { default as DragAndDrop } from './DragAndDrop/DragAndDrop.js';
|
|
10
|
-
export { default as Group } from './Groups/Group.js';
|
|
11
|
-
export { default as Input } from './Input/Input.js';
|
|
12
|
-
export { default as TextArea } from './Input/TextArea.js';
|
|
13
|
-
export { default as Select } from './Input/Select.js';
|
|
14
|
-
export { default as Checkbox } from './Input/Checkbox.js';
|
|
15
|
-
export { default as Toggle } from './Input/Toggle.js';
|
|
16
|
-
export { default as Radio } from './Input/Radio.js';
|
|
17
|
-
export { default as RadioButton, RadioGroup } from './Input/RadioButton.js';
|
|
18
|
-
export { default as Dropdown } from './Input/Dropdown.js';
|
|
19
|
-
export { default as Menu } from './Menu/Menu.js';
|
|
20
|
-
export { default as MenuItem } from './Menu/MenuItem.js';
|
|
21
|
-
export { POPOVER_POSITION, default as Popover } from './Popover/Popover.js';
|
|
22
|
-
export { default as Spinner } from './Spinner/Spinner.js';
|
|
23
|
-
export { default as Stepper } from './Stepper/Stepper.js';
|
|
24
|
-
export { default as Step } from './Stepper/Step.js';
|
|
25
|
-
export { default as Tabs } from './Tabs/Tabs.js';
|
|
26
|
-
export { default as Tab } from './Tabs/Tab.js';
|
|
27
|
-
export { TOOLTIP_POSITION, default as Tooltip } from './Tooltip/Tooltip.js';
|
|
28
|
-
export { default as LinkButton } from './Button/LinkButton.js';
|
|
29
|
-
export { default as RaisedButton } from './Button/RaisedButton.js';
|
|
30
|
-
export { default as ActionButton } from './Button/ActionButton.js';
|
|
31
|
-
export { default as IconButton } from './Button/IconButton.js';
|
|
32
|
-
export { Body as CardBody, Footer as CardFooter, Header as CardHeader, Body as DialogBody, Footer as DialogFooter, Header as DialogHeader, Body as DrawerBody, Footer as DrawerFooter, Header as DrawerHeader, Body as ModalBody, Footer as ModalFooter, Header as ModalHeader, Body as StepBody, Footer as StepFooter } from '../shared/styles.js';
|
|
33
|
-
export { default as AlertDialog } from './Dialog/AlertDialog.js';
|
|
34
|
-
export { default as ConfirmDialog } from './Dialog/ConfirmDialog.js';
|
|
35
|
-
export { default as PromptDialog } from './Dialog/PromptDialog.js';
|
|
36
|
-
export { ORIENTATION } from './DragAndDrop/types.js';
|
|
37
|
-
export { DRAWER_POSITION, default as Drawer } from './Drawer/Drawer.js';
|
|
38
|
-
export { default as GroupLabel } from './Groups/GroupLabel.js';
|
|
39
|
-
export { default as Modal } from './Modal/Modal.js';
|
|
40
|
-
export { default as Notification } from './Notification/Notification.js';
|
|
41
|
-
export { NOTIFICATION_POSITION, NOTIFICATION_TYPE } from './Notification/types.js';
|
|
42
|
-
export { TOAST_TYPE, default as Toast } from './Toast/Toast.js';
|
|
43
|
-
//# sourceMappingURL=index.js.map
|
|
File without changes
|