@vuu-ui/vuu-layout 0.8.91 → 0.8.92

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.
@@ -55,7 +55,6 @@ const Drawer = ({
55
55
  name: "Drawer",
56
56
  state: "open"
57
57
  });
58
- console.log(`Drawer sizeOpen ${sizeOpen} sizeClosed ${sizeClosed}`);
59
58
  const className = cx(classBase, classNameProp, `${classBase}-${position}`, {
60
59
  [`${classBase}-open`]: open,
61
60
  [`${classBase}-inline`]: inline,
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.js","sources":["../../src/dock-layout/Drawer.tsx"],"sourcesContent":["import { Button, useControlled } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties, HTMLAttributes, useCallback } from \"react\";\n\nimport drawerCss from \"./Drawer.css\";\n\nconst classBase = \"vuuDrawer\";\n\nconst sizeAttribute = (value: string | number) => {\n return typeof value === \"string\" ? value : value + \"px\";\n};\n\nconst getStyle = (\n styleProp?: CSSProperties,\n sizeOpen?: number,\n sizeClosed?: number\n) => {\n const hasSizeOpen = sizeOpen !== undefined;\n const hasSizeClosed = sizeClosed !== undefined;\n\n if (!styleProp && !hasSizeClosed && !hasSizeOpen) {\n return undefined;\n }\n\n if (!hasSizeClosed && !hasSizeOpen) {\n return styleProp;\n }\n\n return {\n ...styleProp,\n \"--drawer-size\": hasSizeOpen ? sizeAttribute(sizeOpen) : undefined,\n \"--drawer-peek-size\": hasSizeClosed ? sizeAttribute(sizeClosed) : undefined,\n };\n};\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n clickToOpen?: boolean;\n defaultOpen?: boolean;\n inline?: boolean;\n open?: boolean;\n peekaboo?: boolean;\n position?: \"left\" | \"right\" | \"top\" | \"bottom\";\n sizeOpen?: number;\n sizeClosed?: number;\n toggleButton?: \"start\" | \"end\";\n}\nconst Drawer = ({\n children,\n className: classNameProp,\n clickToOpen,\n defaultOpen,\n sizeOpen,\n sizeClosed,\n style: styleProp,\n open: openProp,\n position = \"left\",\n inline,\n onClick,\n peekaboo = false,\n toggleButton,\n ...props\n}: DrawerProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: defaultOpen ?? false,\n name: \"Drawer\",\n state: \"open\",\n });\n\n console.log(`Drawer sizeOpen ${sizeOpen} sizeClosed ${sizeClosed}`);\n\n const className = cx(classBase, classNameProp, `${classBase}-${position}`, {\n [`${classBase}-open`]: open,\n [`${classBase}-inline`]: inline,\n [`${classBase}-over`]: !inline,\n [`${classBase}-peekaboo`]: peekaboo,\n });\n\n const toggleDrawer = useCallback(() => {\n setOpen(!open);\n }, [open, setOpen]);\n\n const style = getStyle(styleProp, sizeOpen, sizeClosed);\n\n const handleClick = clickToOpen ? toggleDrawer : onClick;\n\n const renderToggleButton = () => (\n <div className={cx(\"vuuToggleButton-container\")}>\n {open ? (\n <Button\n aria-label=\"close\"\n onClick={toggleDrawer}\n data-icon=\"close\"\n variant=\"secondary\"\n />\n ) : (\n <Button\n aria-label=\"open\"\n onClick={toggleDrawer}\n data-icon=\"close\"\n variant=\"secondary\"\n />\n )}\n </div>\n );\n\n return (\n <div {...props} className={className} onClick={handleClick} style={style}>\n {toggleButton == \"start\" ? renderToggleButton() : null}\n <div className={`${classBase}-liner`}>\n <div className={`${classBase}-content`}>{children}</div>\n </div>\n {toggleButton == \"end\" ? renderToggleButton() : null}\n </div>\n );\n};\nDrawer.displayName = \"Drawer\";\n\nexport default Drawer;\n"],"names":["useWindow","useComponentCssInjection","drawerCss","useControlled","useCallback","jsx","Button"],"mappings":"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"}
1
+ {"version":3,"file":"Drawer.js","sources":["../../src/dock-layout/Drawer.tsx"],"sourcesContent":["import { Button, useControlled } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties, HTMLAttributes, useCallback } from \"react\";\n\nimport drawerCss from \"./Drawer.css\";\n\nconst classBase = \"vuuDrawer\";\n\nconst sizeAttribute = (value: string | number) => {\n return typeof value === \"string\" ? value : value + \"px\";\n};\n\nconst getStyle = (\n styleProp?: CSSProperties,\n sizeOpen?: number,\n sizeClosed?: number,\n) => {\n const hasSizeOpen = sizeOpen !== undefined;\n const hasSizeClosed = sizeClosed !== undefined;\n\n if (!styleProp && !hasSizeClosed && !hasSizeOpen) {\n return undefined;\n }\n\n if (!hasSizeClosed && !hasSizeOpen) {\n return styleProp;\n }\n\n return {\n ...styleProp,\n \"--drawer-size\": hasSizeOpen ? sizeAttribute(sizeOpen) : undefined,\n \"--drawer-peek-size\": hasSizeClosed ? sizeAttribute(sizeClosed) : undefined,\n };\n};\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n clickToOpen?: boolean;\n defaultOpen?: boolean;\n inline?: boolean;\n open?: boolean;\n peekaboo?: boolean;\n position?: \"left\" | \"right\" | \"top\" | \"bottom\";\n sizeOpen?: number;\n sizeClosed?: number;\n toggleButton?: \"start\" | \"end\";\n}\nconst Drawer = ({\n children,\n className: classNameProp,\n clickToOpen,\n defaultOpen,\n sizeOpen,\n sizeClosed,\n style: styleProp,\n open: openProp,\n position = \"left\",\n inline,\n onClick,\n peekaboo = false,\n toggleButton,\n ...props\n}: DrawerProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: defaultOpen ?? false,\n name: \"Drawer\",\n state: \"open\",\n });\n\n const className = cx(classBase, classNameProp, `${classBase}-${position}`, {\n [`${classBase}-open`]: open,\n [`${classBase}-inline`]: inline,\n [`${classBase}-over`]: !inline,\n [`${classBase}-peekaboo`]: peekaboo,\n });\n\n const toggleDrawer = useCallback(() => {\n setOpen(!open);\n }, [open, setOpen]);\n\n const style = getStyle(styleProp, sizeOpen, sizeClosed);\n\n const handleClick = clickToOpen ? toggleDrawer : onClick;\n\n const renderToggleButton = () => (\n <div className={cx(\"vuuToggleButton-container\")}>\n {open ? (\n <Button\n aria-label=\"close\"\n onClick={toggleDrawer}\n data-icon=\"close\"\n variant=\"secondary\"\n />\n ) : (\n <Button\n aria-label=\"open\"\n onClick={toggleDrawer}\n data-icon=\"close\"\n variant=\"secondary\"\n />\n )}\n </div>\n );\n\n return (\n <div {...props} className={className} onClick={handleClick} style={style}>\n {toggleButton == \"start\" ? renderToggleButton() : null}\n <div className={`${classBase}-liner`}>\n <div className={`${classBase}-content`}>{children}</div>\n </div>\n {toggleButton == \"end\" ? renderToggleButton() : null}\n </div>\n );\n};\nDrawer.displayName = \"Drawer\";\n\nexport default Drawer;\n"],"names":["useWindow","useComponentCssInjection","drawerCss","useControlled","useCallback","jsx","Button"],"mappings":"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"}
@@ -53,7 +53,6 @@ const Drawer = ({
53
53
  name: "Drawer",
54
54
  state: "open"
55
55
  });
56
- console.log(`Drawer sizeOpen ${sizeOpen} sizeClosed ${sizeClosed}`);
57
56
  const className = cx(classBase, classNameProp, `${classBase}-${position}`, {
58
57
  [`${classBase}-open`]: open,
59
58
  [`${classBase}-inline`]: inline,
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.js","sources":["../../src/dock-layout/Drawer.tsx"],"sourcesContent":["import { Button, useControlled } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties, HTMLAttributes, useCallback } from \"react\";\n\nimport drawerCss from \"./Drawer.css\";\n\nconst classBase = \"vuuDrawer\";\n\nconst sizeAttribute = (value: string | number) => {\n return typeof value === \"string\" ? value : value + \"px\";\n};\n\nconst getStyle = (\n styleProp?: CSSProperties,\n sizeOpen?: number,\n sizeClosed?: number\n) => {\n const hasSizeOpen = sizeOpen !== undefined;\n const hasSizeClosed = sizeClosed !== undefined;\n\n if (!styleProp && !hasSizeClosed && !hasSizeOpen) {\n return undefined;\n }\n\n if (!hasSizeClosed && !hasSizeOpen) {\n return styleProp;\n }\n\n return {\n ...styleProp,\n \"--drawer-size\": hasSizeOpen ? sizeAttribute(sizeOpen) : undefined,\n \"--drawer-peek-size\": hasSizeClosed ? sizeAttribute(sizeClosed) : undefined,\n };\n};\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n clickToOpen?: boolean;\n defaultOpen?: boolean;\n inline?: boolean;\n open?: boolean;\n peekaboo?: boolean;\n position?: \"left\" | \"right\" | \"top\" | \"bottom\";\n sizeOpen?: number;\n sizeClosed?: number;\n toggleButton?: \"start\" | \"end\";\n}\nconst Drawer = ({\n children,\n className: classNameProp,\n clickToOpen,\n defaultOpen,\n sizeOpen,\n sizeClosed,\n style: styleProp,\n open: openProp,\n position = \"left\",\n inline,\n onClick,\n peekaboo = false,\n toggleButton,\n ...props\n}: DrawerProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: defaultOpen ?? false,\n name: \"Drawer\",\n state: \"open\",\n });\n\n console.log(`Drawer sizeOpen ${sizeOpen} sizeClosed ${sizeClosed}`);\n\n const className = cx(classBase, classNameProp, `${classBase}-${position}`, {\n [`${classBase}-open`]: open,\n [`${classBase}-inline`]: inline,\n [`${classBase}-over`]: !inline,\n [`${classBase}-peekaboo`]: peekaboo,\n });\n\n const toggleDrawer = useCallback(() => {\n setOpen(!open);\n }, [open, setOpen]);\n\n const style = getStyle(styleProp, sizeOpen, sizeClosed);\n\n const handleClick = clickToOpen ? toggleDrawer : onClick;\n\n const renderToggleButton = () => (\n <div className={cx(\"vuuToggleButton-container\")}>\n {open ? (\n <Button\n aria-label=\"close\"\n onClick={toggleDrawer}\n data-icon=\"close\"\n variant=\"secondary\"\n />\n ) : (\n <Button\n aria-label=\"open\"\n onClick={toggleDrawer}\n data-icon=\"close\"\n variant=\"secondary\"\n />\n )}\n </div>\n );\n\n return (\n <div {...props} className={className} onClick={handleClick} style={style}>\n {toggleButton == \"start\" ? renderToggleButton() : null}\n <div className={`${classBase}-liner`}>\n <div className={`${classBase}-content`}>{children}</div>\n </div>\n {toggleButton == \"end\" ? renderToggleButton() : null}\n </div>\n );\n};\nDrawer.displayName = \"Drawer\";\n\nexport default Drawer;\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Drawer.js","sources":["../../src/dock-layout/Drawer.tsx"],"sourcesContent":["import { Button, useControlled } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties, HTMLAttributes, useCallback } from \"react\";\n\nimport drawerCss from \"./Drawer.css\";\n\nconst classBase = \"vuuDrawer\";\n\nconst sizeAttribute = (value: string | number) => {\n return typeof value === \"string\" ? value : value + \"px\";\n};\n\nconst getStyle = (\n styleProp?: CSSProperties,\n sizeOpen?: number,\n sizeClosed?: number,\n) => {\n const hasSizeOpen = sizeOpen !== undefined;\n const hasSizeClosed = sizeClosed !== undefined;\n\n if (!styleProp && !hasSizeClosed && !hasSizeOpen) {\n return undefined;\n }\n\n if (!hasSizeClosed && !hasSizeOpen) {\n return styleProp;\n }\n\n return {\n ...styleProp,\n \"--drawer-size\": hasSizeOpen ? sizeAttribute(sizeOpen) : undefined,\n \"--drawer-peek-size\": hasSizeClosed ? sizeAttribute(sizeClosed) : undefined,\n };\n};\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n clickToOpen?: boolean;\n defaultOpen?: boolean;\n inline?: boolean;\n open?: boolean;\n peekaboo?: boolean;\n position?: \"left\" | \"right\" | \"top\" | \"bottom\";\n sizeOpen?: number;\n sizeClosed?: number;\n toggleButton?: \"start\" | \"end\";\n}\nconst Drawer = ({\n children,\n className: classNameProp,\n clickToOpen,\n defaultOpen,\n sizeOpen,\n sizeClosed,\n style: styleProp,\n open: openProp,\n position = \"left\",\n inline,\n onClick,\n peekaboo = false,\n toggleButton,\n ...props\n}: DrawerProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: defaultOpen ?? false,\n name: \"Drawer\",\n state: \"open\",\n });\n\n const className = cx(classBase, classNameProp, `${classBase}-${position}`, {\n [`${classBase}-open`]: open,\n [`${classBase}-inline`]: inline,\n [`${classBase}-over`]: !inline,\n [`${classBase}-peekaboo`]: peekaboo,\n });\n\n const toggleDrawer = useCallback(() => {\n setOpen(!open);\n }, [open, setOpen]);\n\n const style = getStyle(styleProp, sizeOpen, sizeClosed);\n\n const handleClick = clickToOpen ? toggleDrawer : onClick;\n\n const renderToggleButton = () => (\n <div className={cx(\"vuuToggleButton-container\")}>\n {open ? (\n <Button\n aria-label=\"close\"\n onClick={toggleDrawer}\n data-icon=\"close\"\n variant=\"secondary\"\n />\n ) : (\n <Button\n aria-label=\"open\"\n onClick={toggleDrawer}\n data-icon=\"close\"\n variant=\"secondary\"\n />\n )}\n </div>\n );\n\n return (\n <div {...props} className={className} onClick={handleClick} style={style}>\n {toggleButton == \"start\" ? renderToggleButton() : null}\n <div className={`${classBase}-liner`}>\n <div className={`${classBase}-content`}>{children}</div>\n </div>\n {toggleButton == \"end\" ? renderToggleButton() : null}\n </div>\n );\n};\nDrawer.displayName = \"Drawer\";\n\nexport default Drawer;\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,22 +1,22 @@
1
1
  {
2
- "version": "0.8.91",
2
+ "version": "0.8.92",
3
3
  "description": "VUU Layout Components",
4
4
  "author": "heswell",
5
5
  "license": "Apache-2.0",
6
6
  "types": "types/index.d.ts",
7
7
  "devDependencies": {
8
- "@vuu-ui/vuu-data-types": "0.8.91",
9
- "@vuu-ui/vuu-filter-types": "0.8.91"
8
+ "@vuu-ui/vuu-data-types": "0.8.92",
9
+ "@vuu-ui/vuu-filter-types": "0.8.92"
10
10
  },
11
11
  "dependencies": {
12
12
  "@salt-ds/core": "1.34.0",
13
13
  "@salt-ds/styles": "0.2.1",
14
14
  "@salt-ds/window": "0.1.1",
15
- "@vuu-ui/vuu-filters": "0.8.91",
16
- "@vuu-ui/vuu-popups": "0.8.91",
17
- "@vuu-ui/vuu-table": "0.8.91",
18
- "@vuu-ui/vuu-ui-controls": "0.8.91",
19
- "@vuu-ui/vuu-utils": "0.8.91"
15
+ "@vuu-ui/vuu-filters": "0.8.92",
16
+ "@vuu-ui/vuu-popups": "0.8.92",
17
+ "@vuu-ui/vuu-table": "0.8.92",
18
+ "@vuu-ui/vuu-ui-controls": "0.8.92",
19
+ "@vuu-ui/vuu-utils": "0.8.92"
20
20
  },
21
21
  "peerDependencies": {
22
22
  "clsx": "^2.0.0",