@vuu-ui/vuu-ui-controls 0.8.69 → 0.8.71
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/cjs/column-picker/ColumnPicker.js +19 -6
- package/cjs/column-picker/ColumnPicker.js.map +1 -1
- package/cjs/index.js +0 -2
- package/cjs/index.js.map +1 -1
- package/cjs/list/List.css.js +1 -1
- package/cjs/list/ListItem.js +2 -2
- package/cjs/list/ListItem.js.map +1 -1
- package/cjs/vuu-typeahead-input/VuuTypeaheadInput.css.js +1 -1
- package/esm/column-picker/ColumnPicker.js +20 -7
- package/esm/column-picker/ColumnPicker.js.map +1 -1
- package/esm/index.js +0 -1
- package/esm/index.js.map +1 -1
- package/esm/list/List.css.js +1 -1
- package/esm/list/ListItem.js +2 -2
- package/esm/list/ListItem.js.map +1 -1
- package/esm/vuu-typeahead-input/VuuTypeaheadInput.css.js +1 -1
- package/package.json +7 -7
- package/types/column-picker/ColumnPicker.d.ts +1 -0
- package/types/list/index.d.ts +0 -1
- package/cjs/list/CheckboxIcon.css.js +0 -6
- package/cjs/list/CheckboxIcon.css.js.map +0 -1
- package/cjs/list/CheckboxIcon.js +0 -33
- package/cjs/list/CheckboxIcon.js.map +0 -1
- package/esm/list/CheckboxIcon.css.js +0 -4
- package/esm/list/CheckboxIcon.css.js.map +0 -1
- package/esm/list/CheckboxIcon.js +0 -31
- package/esm/list/CheckboxIcon.js.map +0 -1
- package/types/list/CheckboxIcon.d.ts +0 -6
|
@@ -33,12 +33,19 @@ const FloatingColumnSearch = React.forwardRef(function FloatingColumnSearch2(pro
|
|
|
33
33
|
);
|
|
34
34
|
});
|
|
35
35
|
const ColumnPicker = React.forwardRef(
|
|
36
|
-
function ColumnPicker2({
|
|
36
|
+
function ColumnPicker2({
|
|
37
|
+
columns,
|
|
38
|
+
icon = "add",
|
|
39
|
+
iconSize,
|
|
40
|
+
onSelectionChange,
|
|
41
|
+
selected,
|
|
42
|
+
...htmlAttributes
|
|
43
|
+
}, forwardedRef) {
|
|
44
|
+
const [open, setOpen] = React.useState(false);
|
|
37
45
|
const listId = core.useIdMemo();
|
|
38
|
-
const { x, y, strategy, elements, floating, reference } = core.useFloatingUI({
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
// onOpenChange: handleOpenChange,
|
|
46
|
+
const { context, x, y, strategy, elements, floating, reference } = core.useFloatingUI({
|
|
47
|
+
open,
|
|
48
|
+
onOpenChange: setOpen,
|
|
42
49
|
placement: "bottom-start",
|
|
43
50
|
strategy: "fixed",
|
|
44
51
|
middleware: [
|
|
@@ -53,7 +60,10 @@ const ColumnPicker = React.forwardRef(
|
|
|
53
60
|
react.flip({ fallbackStrategy: "initialPlacement" })
|
|
54
61
|
]
|
|
55
62
|
});
|
|
56
|
-
const
|
|
63
|
+
const { getReferenceProps, getFloatingProps } = react.useInteractions([
|
|
64
|
+
react.useDismiss(context),
|
|
65
|
+
react.useClick(context, { keyboardHandlers: false, toggle: false })
|
|
66
|
+
]);
|
|
57
67
|
const handleButtonClick = () => {
|
|
58
68
|
setOpen((isOpen) => !isOpen);
|
|
59
69
|
};
|
|
@@ -69,7 +79,9 @@ const ColumnPicker = React.forwardRef(
|
|
|
69
79
|
IconButton.IconButton,
|
|
70
80
|
{
|
|
71
81
|
...htmlAttributes,
|
|
82
|
+
...getReferenceProps(),
|
|
72
83
|
icon,
|
|
84
|
+
size: iconSize,
|
|
73
85
|
onClick: handleButtonClick,
|
|
74
86
|
ref: forkedRef
|
|
75
87
|
}
|
|
@@ -77,6 +89,7 @@ const ColumnPicker = React.forwardRef(
|
|
|
77
89
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
78
90
|
FloatingColumnSearch,
|
|
79
91
|
{
|
|
92
|
+
...getFloatingProps(),
|
|
80
93
|
open,
|
|
81
94
|
collapsed: !open,
|
|
82
95
|
id: listId,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnPicker.js","sources":["../../src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ColumnPicker.js","sources":["../../src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import {\n flip,\n size,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport {\n FloatingComponentProps,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n useIdMemo,\n} from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { forwardRef, useState } from \"react\";\nimport { IconButton, IconButtonProps } from \"../icon-button\";\nimport { ColumnSearch, ColumnSearchProps } from \"./ColumnSearch\";\n\nconst classBase = \"vuuColumnPicker\";\n\ninterface FloatingColumnSearchProps extends FloatingComponentProps {\n collapsed?: boolean;\n}\n\nconst FloatingColumnSearch = forwardRef<\n HTMLDivElement,\n FloatingColumnSearchProps\n>(function FloatingColumnSearch(props, ref) {\n const { children, className, collapsed, open, ...rest } = props;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n return (\n <FloatingComponent\n className={cx(\n classBase,\n {\n [`${classBase}-collapsed`]: collapsed,\n },\n className\n )}\n role=\"listbox\"\n open={open}\n {...rest}\n ref={ref}\n >\n {children}\n </FloatingComponent>\n );\n});\n\nexport interface ColumnPickerProps\n extends Omit<IconButtonProps, \"icon\">,\n Pick<ColumnSearchProps, \"columns\" | \"onSelectionChange\" | \"selected\"> {\n icon?: string;\n iconSize?: number;\n}\n\nexport const ColumnPicker = forwardRef<HTMLButtonElement, ColumnPickerProps>(\n function ColumnPicker(\n {\n columns,\n icon = \"add\",\n iconSize,\n onSelectionChange,\n selected,\n ...htmlAttributes\n },\n forwardedRef\n ) {\n const [open, setOpen] = useState(false);\n\n const listId = useIdMemo();\n const { context, x, y, strategy, elements, floating, reference } =\n useFloatingUI({\n open,\n onOpenChange: setOpen,\n placement: \"bottom-start\",\n strategy: \"fixed\",\n middleware: [\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useClick(context, { keyboardHandlers: false, toggle: false }),\n ]);\n\n const handleButtonClick = () => {\n setOpen((isOpen) => !isOpen);\n };\n\n const forkedRef = useForkRef<HTMLButtonElement>(reference, forwardedRef);\n\n const handleChange = () => {\n console.log(\"handleChange\");\n };\n const handleMoveListItem = () => {\n console.log(\"handleMoveListItem\");\n };\n\n return (\n <>\n <IconButton\n {...htmlAttributes}\n {...getReferenceProps()}\n icon={icon}\n size={iconSize}\n onClick={handleButtonClick}\n ref={forkedRef}\n />\n <FloatingColumnSearch\n {...getFloatingProps()}\n open={open}\n collapsed={!open}\n id={listId}\n left={x}\n position={strategy}\n ref={floating}\n top={y}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n >\n <ColumnSearch\n columns={columns}\n onChange={handleChange}\n onMoveListItem={handleMoveListItem}\n onSelectionChange={onSelectionChange}\n selected={selected}\n style={{ width: 220, height: 300 }}\n />\n </FloatingColumnSearch>\n </>\n );\n }\n);\n"],"names":["forwardRef","FloatingColumnSearch","useFloatingComponent","jsx","ColumnPicker","useState","useIdMemo","useFloatingUI","size","elements","flip","useInteractions","useDismiss","useClick","useForkRef","jsxs","Fragment","IconButton","ColumnSearch"],"mappings":"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"}
|
package/cjs/index.js
CHANGED
|
@@ -50,7 +50,6 @@ var List = require('./list/List.js');
|
|
|
50
50
|
var ListItemHeader = require('./list/ListItemHeader.js');
|
|
51
51
|
var ListItemGroup = require('./list/ListItemGroup.js');
|
|
52
52
|
var useList = require('./list/useList.js');
|
|
53
|
-
var CheckboxIcon = require('./list/CheckboxIcon.js');
|
|
54
53
|
var RadioIcon = require('./list/RadioIcon.js');
|
|
55
54
|
var MeasuredContainer = require('./measured-container/MeasuredContainer.js');
|
|
56
55
|
var useMeasuredContainer = require('./measured-container/useMeasuredContainer.js');
|
|
@@ -190,7 +189,6 @@ exports.List = List.List;
|
|
|
190
189
|
exports.ListItemHeader = ListItemHeader.ListItemHeader;
|
|
191
190
|
exports.ListItemGroup = ListItemGroup.ListItemGroup;
|
|
192
191
|
exports.useList = useList.useList;
|
|
193
|
-
exports.CheckboxIcon = CheckboxIcon.CheckboxIcon;
|
|
194
192
|
exports.RadioIcon = RadioIcon.RadioIcon;
|
|
195
193
|
exports.MeasuredContainer = MeasuredContainer.MeasuredContainer;
|
|
196
194
|
exports.useMeasuredContainer = useMeasuredContainer.useMeasuredContainer;
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/cjs/list/List.css.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var listCss = ".vuuList {\n --list-background: var(--salt-container-primary-background);\n --list-borderStyle: var(\n --vuuList-borderStyle,\n var(--salt-container-borderStyle)\n );\n --list-borderWidth: var(--salt-size-border);\n --list-height: auto;\n --list-item-height: var(--salt-size-
|
|
3
|
+
var listCss = ".vuuList {\n --list-background: var(--salt-container-primary-background);\n --list-borderStyle: var(\n --vuuList-borderStyle,\n var(--salt-container-borderStyle)\n );\n --list-borderWidth: var(--salt-size-border);\n --list-height: auto;\n --list-item-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n --list-item-gap: 0px;\n --list-maxHeight: 100%;\n --vuuDraggable-display: block;\n --vuuDraggable-spacer-height: 0;\n --vuuDraggable-spacer-width: 100%;\n --vuuDraggable-transitionProp: height;\n --vuuMeasuredContainer-height: var(--computed-list-height);\n\n background: var(--list-background);\n border: var(--list-borderStyle) var(--list-borderWidth)\n var(--salt-container-primary-borderColor);\n height: var(--saltList-height, var(--list-height));\n max-height: var(--list-maxHeight);\n outline: none;\n position: relative;\n user-select: none;\n width: var(--saltList-width, auto);\n padding: 0 1px;\n}\n\n.vuuDraggable-list-item {\n --vuuList-item-background: var(--salt-selectable-background-hover);\n}\n\n.vuuList-contentSized {\n box-sizing: content-box;\n}\n\n.vuuList-borderless {\n --list-borderStyle: none;\n}\n\n/* virtualised list */\n.vuuList-viewport {\n height: var(--computed-list-height, var(--measured-px-height));\n overflow: auto;\n}\n\n.vuuListHeader {\n --saltList-item-background: var(--list-item-header-background);\n color: var(--list-item-header-color);\n font-weight: 600;\n}\n\n.vuuListHeader[data-sticky=\"true\"] {\n --saltList-item-background: var(--list-background);\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.vuuList-collapsible .vuuListItemHeader:after {\n border-width: var(--checkbox-borderWidth);\n border-color: var(--checkbox-borderColor);\n content: var(--list-item-header-twisty-content);\n -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n background: var(--list-item-header-twisty-color);\n height: 12px;\n left: var(--list-item-header-twisty-left);\n right: var(--list-item-header-twisty-right);\n margin-top: -8px;\n position: absolute;\n top: var(--list-item-header-twisty-top);\n transition: transform 0.3s;\n width: 12px;\n}\n.vuuListItemHeader[aria-expanded=\"false\"]:after {\n transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.vuuList-scrollingContentContainer {\n box-sizing: inherit;\n position: relative;\n}\n\n.vuuList-virtualized .vuuListItem {\n line-height: 30px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n will-change: transform;\n}\n.vuuList.saltFocusVisible:after {\n inset: 2px;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = listCss;
|
|
6
6
|
//# sourceMappingURL=List.css.js.map
|
package/cjs/list/ListItem.js
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var cx = require('clsx');
|
|
6
|
+
var core = require('@salt-ds/core');
|
|
6
7
|
var styles = require('@salt-ds/styles');
|
|
7
8
|
var window = require('@salt-ds/window');
|
|
8
9
|
var Highlighter = require('./Highlighter.js');
|
|
9
|
-
var CheckboxIcon = require('./CheckboxIcon.js');
|
|
10
10
|
var ListItem$1 = require('./ListItem.css.js');
|
|
11
11
|
|
|
12
12
|
const classBase = "vuuListItem";
|
|
@@ -65,7 +65,7 @@ const ListItem = React.forwardRef(
|
|
|
65
65
|
ref: forwardedRef,
|
|
66
66
|
style,
|
|
67
67
|
children: [
|
|
68
|
-
showCheckbox && /* @__PURE__ */ jsxRuntime.jsx(
|
|
68
|
+
showCheckbox && /* @__PURE__ */ jsxRuntime.jsx(core.Checkbox, { "aria-hidden": true, checked: selected }),
|
|
69
69
|
children && typeof children !== "string" ? children : itemTextHighlightPattern == null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-textWrapper`, children: label || children }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
70
70
|
Highlighter.Highlighter,
|
|
71
71
|
{
|
package/cjs/list/ListItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sources":["../../src/list/ListItem.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport {
|
|
1
|
+
{"version":3,"file":"ListItem.js","sources":["../../src/list/ListItem.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport { Checkbox } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ListItemProps, ListItemType } from \"./listTypes\";\nimport { Highlighter } from \"./Highlighter\";\n\nimport listItemCss from \"./ListItem.css\";\n\nconst classBase = \"vuuListItem\";\n\n// A dummy ListItem rendered once and not visible. We measure this to\n// determine height of ListItem and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nexport const ListItemProxy = forwardRef(function ListItemProxy(\n {\n height,\n ...htmlAttributes\n }: HTMLAttributes<HTMLDivElement> & {\n height?: number;\n },\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-list-item\",\n css: listItemCss,\n window: targetWindow,\n });\n\n return (\n <div\n {...htmlAttributes}\n aria-hidden\n className={cx(classBase, `${classBase}-proxy`)}\n ref={forwardedRef}\n style={{ height }}\n />\n );\n});\n\n// Note: the memo is effective if List label is passed as simple string\n// If children are used, it is the responsibility of caller to memoise\n// these if performance on highlight is perceived to be an issue.\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n function ListItem(\n {\n children,\n className: classNameProp,\n disabled,\n tabIndex,\n item,\n itemHeight,\n itemTextHighlightPattern,\n label,\n selectable: _notUsed,\n selected,\n showCheckbox,\n style: styleProp,\n ...props\n },\n forwardedRef\n ) {\n const className = cx(classBase, classNameProp, {\n vuuDisabled: disabled,\n [`${classBase}-checkbox`]: showCheckbox,\n });\n const style =\n itemHeight !== undefined\n ? {\n ...styleProp,\n height: itemHeight,\n }\n : styleProp;\n\n return (\n <div\n className={className}\n {...props}\n aria-disabled={disabled || undefined}\n aria-selected={selected || undefined}\n ref={forwardedRef}\n style={style}\n >\n {showCheckbox && <Checkbox aria-hidden checked={selected} />}\n {children && typeof children !== \"string\" ? (\n children\n ) : itemTextHighlightPattern == null ? (\n <span className={`${classBase}-textWrapper`}>\n {label || children}\n </span>\n ) : (\n <Highlighter\n matchPattern={itemTextHighlightPattern}\n text={label || (children as string)}\n />\n )}\n </div>\n );\n }\n) as ListItemType;\n"],"names":["forwardRef","ListItemProxy","useWindow","useComponentCssInjection","listItemCss","jsx","ListItem","jsxs","Checkbox","Highlighter"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,aAAA,CAAA;AAML,MAAA,aAAA,GAAgBA,gBAAW,CAAA,SAASC,cAC/C,CAAA;AAAA,EACE,MAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAA,EAGA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,aAAW,EAAA,IAAA;AAAA,MACX,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAQ,MAAA,CAAA,CAAA;AAAA,MAC7C,GAAK,EAAA,YAAA;AAAA,MACL,KAAA,EAAO,EAAE,MAAO,EAAA;AAAA,KAAA;AAAA,GAClB,CAAA;AAEJ,CAAC,EAAA;AAKM,MAAM,QAAW,GAAAL,gBAAA;AAAA,EACtB,SAASM,SACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,wBAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAY,EAAA,QAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,GAAG,KAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,MAC7C,WAAa,EAAA,QAAA;AAAA,MACb,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,YAAA;AAAA,KAC5B,CAAA,CAAA;AACD,IAAM,MAAA,KAAA,GACJ,eAAe,KACX,CAAA,GAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,MAAQ,EAAA,UAAA;AAAA,KAEV,GAAA,SAAA,CAAA;AAEN,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,QAC3B,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,QAC3B,GAAK,EAAA,YAAA;AAAA,QACL,KAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,YAAA,oBAAiBF,cAAA,CAAAG,aAAA,EAAA,EAAS,aAAW,EAAA,IAAA,EAAC,SAAS,QAAU,EAAA,CAAA;AAAA,UACzD,QAAY,IAAA,OAAO,QAAa,KAAA,QAAA,GAC/B,WACE,wBAA4B,IAAA,IAAA,mBAC7BH,cAAA,CAAA,MAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,CAC1B,YAAA,CAAA,EAAA,QAAA,EAAA,KAAA,IAAS,UACZ,CAEA,mBAAAA,cAAA;AAAA,YAACI,uBAAA;AAAA,YAAA;AAAA,cACC,YAAc,EAAA,wBAAA;AAAA,cACd,MAAM,KAAU,IAAA,QAAA;AAAA,aAAA;AAAA,WAClB;AAAA,SAAA;AAAA,OAAA;AAAA,KAEJ,CAAA;AAAA,GAEJ;AACF;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var vuuTypeaheadInputCss = ".vuuTypeaheadInput {\n .saltPillInput-activationIndicator {\n display: none;\n }\n\n .saltButton {\n height: 18px;\n width: 24px;\n }\n\n .saltButton:before {\n content: \"\";\n background-color: var(--salt-separable-secondary-borderColor);\n height: 100%;\n left: calc(-1 * var(--salt-spacing-100));\n position: absolute;\n width: 1px;\n }\n\n .saltButton:after {\n --vuu-icon-size: 19px;\n --vuu-icon-transform: rotate(90deg);\n\n content: \"\";\n background-color: var(--vuu-icon-color);\n height: var(--vuu-icon-size);\n mask: var(--vuu-svg-triangle-right) center center/var(--vuu-icon-size)\n var(--vuu-icon-size);\n mask-repeat: no-repeat;\n position: absolute;\n transform: var(--vuu-icon-transform, none);\n width: var(--vuu-icon-size);\n }\n}\n";
|
|
3
|
+
var vuuTypeaheadInputCss = ".vuuTypeaheadInput {\n .saltPillInput-activationIndicator {\n display: none;\n }\n\n .saltButton {\n height: 18px;\n width: 24px;\n }\n\n .saltButton:before {\n content: \"\";\n background-color: var(--salt-separable-secondary-borderColor);\n height: 100%;\n left: calc(-1 * var(--salt-spacing-100));\n position: absolute;\n width: 1px;\n }\n\n .saltButton:after {\n --vuu-icon-color: var(--salt-content-primary-foreground);\n --vuu-icon-size: 19px;\n --vuu-icon-transform: rotate(90deg);\n\n content: \"\";\n background-color: var(--vuu-icon-color);\n height: var(--vuu-icon-size);\n mask: var(--vuu-svg-triangle-right) center center/var(--vuu-icon-size)\n var(--vuu-icon-size);\n mask-repeat: no-repeat;\n position: absolute;\n transform: var(--vuu-icon-transform, none);\n width: var(--vuu-icon-size);\n }\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = vuuTypeaheadInputCss;
|
|
6
6
|
//# sourceMappingURL=VuuTypeaheadInput.css.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { size, flip } from '@floating-ui/react';
|
|
2
|
+
import { size, flip, useInteractions, useDismiss, useClick } from '@floating-ui/react';
|
|
3
3
|
import { useFloatingComponent, useIdMemo, useFloatingUI, useForkRef } from '@salt-ds/core';
|
|
4
4
|
import cx from 'clsx';
|
|
5
5
|
import { forwardRef, useState } from 'react';
|
|
@@ -31,12 +31,19 @@ const FloatingColumnSearch = forwardRef(function FloatingColumnSearch2(props, re
|
|
|
31
31
|
);
|
|
32
32
|
});
|
|
33
33
|
const ColumnPicker = forwardRef(
|
|
34
|
-
function ColumnPicker2({
|
|
34
|
+
function ColumnPicker2({
|
|
35
|
+
columns,
|
|
36
|
+
icon = "add",
|
|
37
|
+
iconSize,
|
|
38
|
+
onSelectionChange,
|
|
39
|
+
selected,
|
|
40
|
+
...htmlAttributes
|
|
41
|
+
}, forwardedRef) {
|
|
42
|
+
const [open, setOpen] = useState(false);
|
|
35
43
|
const listId = useIdMemo();
|
|
36
|
-
const { x, y, strategy, elements, floating, reference } = useFloatingUI({
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
// onOpenChange: handleOpenChange,
|
|
44
|
+
const { context, x, y, strategy, elements, floating, reference } = useFloatingUI({
|
|
45
|
+
open,
|
|
46
|
+
onOpenChange: setOpen,
|
|
40
47
|
placement: "bottom-start",
|
|
41
48
|
strategy: "fixed",
|
|
42
49
|
middleware: [
|
|
@@ -51,7 +58,10 @@ const ColumnPicker = forwardRef(
|
|
|
51
58
|
flip({ fallbackStrategy: "initialPlacement" })
|
|
52
59
|
]
|
|
53
60
|
});
|
|
54
|
-
const
|
|
61
|
+
const { getReferenceProps, getFloatingProps } = useInteractions([
|
|
62
|
+
useDismiss(context),
|
|
63
|
+
useClick(context, { keyboardHandlers: false, toggle: false })
|
|
64
|
+
]);
|
|
55
65
|
const handleButtonClick = () => {
|
|
56
66
|
setOpen((isOpen) => !isOpen);
|
|
57
67
|
};
|
|
@@ -67,7 +77,9 @@ const ColumnPicker = forwardRef(
|
|
|
67
77
|
IconButton,
|
|
68
78
|
{
|
|
69
79
|
...htmlAttributes,
|
|
80
|
+
...getReferenceProps(),
|
|
70
81
|
icon,
|
|
82
|
+
size: iconSize,
|
|
71
83
|
onClick: handleButtonClick,
|
|
72
84
|
ref: forkedRef
|
|
73
85
|
}
|
|
@@ -75,6 +87,7 @@ const ColumnPicker = forwardRef(
|
|
|
75
87
|
/* @__PURE__ */ jsx(
|
|
76
88
|
FloatingColumnSearch,
|
|
77
89
|
{
|
|
90
|
+
...getFloatingProps(),
|
|
78
91
|
open,
|
|
79
92
|
collapsed: !open,
|
|
80
93
|
id: listId,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnPicker.js","sources":["../../src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ColumnPicker.js","sources":["../../src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import {\n flip,\n size,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport {\n FloatingComponentProps,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n useIdMemo,\n} from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { forwardRef, useState } from \"react\";\nimport { IconButton, IconButtonProps } from \"../icon-button\";\nimport { ColumnSearch, ColumnSearchProps } from \"./ColumnSearch\";\n\nconst classBase = \"vuuColumnPicker\";\n\ninterface FloatingColumnSearchProps extends FloatingComponentProps {\n collapsed?: boolean;\n}\n\nconst FloatingColumnSearch = forwardRef<\n HTMLDivElement,\n FloatingColumnSearchProps\n>(function FloatingColumnSearch(props, ref) {\n const { children, className, collapsed, open, ...rest } = props;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n return (\n <FloatingComponent\n className={cx(\n classBase,\n {\n [`${classBase}-collapsed`]: collapsed,\n },\n className\n )}\n role=\"listbox\"\n open={open}\n {...rest}\n ref={ref}\n >\n {children}\n </FloatingComponent>\n );\n});\n\nexport interface ColumnPickerProps\n extends Omit<IconButtonProps, \"icon\">,\n Pick<ColumnSearchProps, \"columns\" | \"onSelectionChange\" | \"selected\"> {\n icon?: string;\n iconSize?: number;\n}\n\nexport const ColumnPicker = forwardRef<HTMLButtonElement, ColumnPickerProps>(\n function ColumnPicker(\n {\n columns,\n icon = \"add\",\n iconSize,\n onSelectionChange,\n selected,\n ...htmlAttributes\n },\n forwardedRef\n ) {\n const [open, setOpen] = useState(false);\n\n const listId = useIdMemo();\n const { context, x, y, strategy, elements, floating, reference } =\n useFloatingUI({\n open,\n onOpenChange: setOpen,\n placement: \"bottom-start\",\n strategy: \"fixed\",\n middleware: [\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useClick(context, { keyboardHandlers: false, toggle: false }),\n ]);\n\n const handleButtonClick = () => {\n setOpen((isOpen) => !isOpen);\n };\n\n const forkedRef = useForkRef<HTMLButtonElement>(reference, forwardedRef);\n\n const handleChange = () => {\n console.log(\"handleChange\");\n };\n const handleMoveListItem = () => {\n console.log(\"handleMoveListItem\");\n };\n\n return (\n <>\n <IconButton\n {...htmlAttributes}\n {...getReferenceProps()}\n icon={icon}\n size={iconSize}\n onClick={handleButtonClick}\n ref={forkedRef}\n />\n <FloatingColumnSearch\n {...getFloatingProps()}\n open={open}\n collapsed={!open}\n id={listId}\n left={x}\n position={strategy}\n ref={floating}\n top={y}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n >\n <ColumnSearch\n columns={columns}\n onChange={handleChange}\n onMoveListItem={handleMoveListItem}\n onSelectionChange={onSelectionChange}\n selected={selected}\n style={{ width: 220, height: 300 }}\n />\n </FloatingColumnSearch>\n </>\n );\n }\n);\n"],"names":["FloatingColumnSearch","ColumnPicker","elements"],"mappings":"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"}
|
package/esm/index.js
CHANGED
|
@@ -48,7 +48,6 @@ export { List } from './list/List.js';
|
|
|
48
48
|
export { ListItemHeader } from './list/ListItemHeader.js';
|
|
49
49
|
export { ListItemGroup } from './list/ListItemGroup.js';
|
|
50
50
|
export { useList } from './list/useList.js';
|
|
51
|
-
export { CheckboxIcon } from './list/CheckboxIcon.js';
|
|
52
51
|
export { RadioIcon } from './list/RadioIcon.js';
|
|
53
52
|
export { MeasuredContainer } from './measured-container/MeasuredContainer.js';
|
|
54
53
|
export { useMeasuredContainer } from './measured-container/useMeasuredContainer.js';
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/esm/list/List.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var listCss = ".vuuList {\n --list-background: var(--salt-container-primary-background);\n --list-borderStyle: var(\n --vuuList-borderStyle,\n var(--salt-container-borderStyle)\n );\n --list-borderWidth: var(--salt-size-border);\n --list-height: auto;\n --list-item-height: var(--salt-size-
|
|
1
|
+
var listCss = ".vuuList {\n --list-background: var(--salt-container-primary-background);\n --list-borderStyle: var(\n --vuuList-borderStyle,\n var(--salt-container-borderStyle)\n );\n --list-borderWidth: var(--salt-size-border);\n --list-height: auto;\n --list-item-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n --list-item-gap: 0px;\n --list-maxHeight: 100%;\n --vuuDraggable-display: block;\n --vuuDraggable-spacer-height: 0;\n --vuuDraggable-spacer-width: 100%;\n --vuuDraggable-transitionProp: height;\n --vuuMeasuredContainer-height: var(--computed-list-height);\n\n background: var(--list-background);\n border: var(--list-borderStyle) var(--list-borderWidth)\n var(--salt-container-primary-borderColor);\n height: var(--saltList-height, var(--list-height));\n max-height: var(--list-maxHeight);\n outline: none;\n position: relative;\n user-select: none;\n width: var(--saltList-width, auto);\n padding: 0 1px;\n}\n\n.vuuDraggable-list-item {\n --vuuList-item-background: var(--salt-selectable-background-hover);\n}\n\n.vuuList-contentSized {\n box-sizing: content-box;\n}\n\n.vuuList-borderless {\n --list-borderStyle: none;\n}\n\n/* virtualised list */\n.vuuList-viewport {\n height: var(--computed-list-height, var(--measured-px-height));\n overflow: auto;\n}\n\n.vuuListHeader {\n --saltList-item-background: var(--list-item-header-background);\n color: var(--list-item-header-color);\n font-weight: 600;\n}\n\n.vuuListHeader[data-sticky=\"true\"] {\n --saltList-item-background: var(--list-background);\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.vuuList-collapsible .vuuListItemHeader:after {\n border-width: var(--checkbox-borderWidth);\n border-color: var(--checkbox-borderColor);\n content: var(--list-item-header-twisty-content);\n -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n background: var(--list-item-header-twisty-color);\n height: 12px;\n left: var(--list-item-header-twisty-left);\n right: var(--list-item-header-twisty-right);\n margin-top: -8px;\n position: absolute;\n top: var(--list-item-header-twisty-top);\n transition: transform 0.3s;\n width: 12px;\n}\n.vuuListItemHeader[aria-expanded=\"false\"]:after {\n transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.vuuList-scrollingContentContainer {\n box-sizing: inherit;\n position: relative;\n}\n\n.vuuList-virtualized .vuuListItem {\n line-height: 30px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n will-change: transform;\n}\n.vuuList.saltFocusVisible:after {\n inset: 2px;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { listCss as default };
|
|
4
4
|
//# sourceMappingURL=List.css.js.map
|
package/esm/list/ListItem.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import cx from 'clsx';
|
|
4
|
+
import { Checkbox } from '@salt-ds/core';
|
|
4
5
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
5
6
|
import { useWindow } from '@salt-ds/window';
|
|
6
7
|
import { Highlighter } from './Highlighter.js';
|
|
7
|
-
import { CheckboxIcon } from './CheckboxIcon.js';
|
|
8
8
|
import listItemCss from './ListItem.css.js';
|
|
9
9
|
|
|
10
10
|
const classBase = "vuuListItem";
|
|
@@ -63,7 +63,7 @@ const ListItem = forwardRef(
|
|
|
63
63
|
ref: forwardedRef,
|
|
64
64
|
style,
|
|
65
65
|
children: [
|
|
66
|
-
showCheckbox && /* @__PURE__ */ jsx(
|
|
66
|
+
showCheckbox && /* @__PURE__ */ jsx(Checkbox, { "aria-hidden": true, checked: selected }),
|
|
67
67
|
children && typeof children !== "string" ? children : itemTextHighlightPattern == null ? /* @__PURE__ */ jsx("span", { className: `${classBase}-textWrapper`, children: label || children }) : /* @__PURE__ */ jsx(
|
|
68
68
|
Highlighter,
|
|
69
69
|
{
|
package/esm/list/ListItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sources":["../../src/list/ListItem.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport {
|
|
1
|
+
{"version":3,"file":"ListItem.js","sources":["../../src/list/ListItem.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport { Checkbox } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ListItemProps, ListItemType } from \"./listTypes\";\nimport { Highlighter } from \"./Highlighter\";\n\nimport listItemCss from \"./ListItem.css\";\n\nconst classBase = \"vuuListItem\";\n\n// A dummy ListItem rendered once and not visible. We measure this to\n// determine height of ListItem and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nexport const ListItemProxy = forwardRef(function ListItemProxy(\n {\n height,\n ...htmlAttributes\n }: HTMLAttributes<HTMLDivElement> & {\n height?: number;\n },\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-list-item\",\n css: listItemCss,\n window: targetWindow,\n });\n\n return (\n <div\n {...htmlAttributes}\n aria-hidden\n className={cx(classBase, `${classBase}-proxy`)}\n ref={forwardedRef}\n style={{ height }}\n />\n );\n});\n\n// Note: the memo is effective if List label is passed as simple string\n// If children are used, it is the responsibility of caller to memoise\n// these if performance on highlight is perceived to be an issue.\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n function ListItem(\n {\n children,\n className: classNameProp,\n disabled,\n tabIndex,\n item,\n itemHeight,\n itemTextHighlightPattern,\n label,\n selectable: _notUsed,\n selected,\n showCheckbox,\n style: styleProp,\n ...props\n },\n forwardedRef\n ) {\n const className = cx(classBase, classNameProp, {\n vuuDisabled: disabled,\n [`${classBase}-checkbox`]: showCheckbox,\n });\n const style =\n itemHeight !== undefined\n ? {\n ...styleProp,\n height: itemHeight,\n }\n : styleProp;\n\n return (\n <div\n className={className}\n {...props}\n aria-disabled={disabled || undefined}\n aria-selected={selected || undefined}\n ref={forwardedRef}\n style={style}\n >\n {showCheckbox && <Checkbox aria-hidden checked={selected} />}\n {children && typeof children !== \"string\" ? (\n children\n ) : itemTextHighlightPattern == null ? (\n <span className={`${classBase}-textWrapper`}>\n {label || children}\n </span>\n ) : (\n <Highlighter\n matchPattern={itemTextHighlightPattern}\n text={label || (children as string)}\n />\n )}\n </div>\n );\n }\n) as ListItemType;\n"],"names":["ListItemProxy","ListItem"],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,aAAA,CAAA;AAML,MAAA,aAAA,GAAgB,UAAW,CAAA,SAASA,cAC/C,CAAA;AAAA,EACE,MAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAA,EAGA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAA,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,aAAW,EAAA,IAAA;AAAA,MACX,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAQ,MAAA,CAAA,CAAA;AAAA,MAC7C,GAAK,EAAA,YAAA;AAAA,MACL,KAAA,EAAO,EAAE,MAAO,EAAA;AAAA,KAAA;AAAA,GAClB,CAAA;AAEJ,CAAC,EAAA;AAKM,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASC,SACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,wBAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAY,EAAA,QAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,GAAG,KAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,MAC7C,WAAa,EAAA,QAAA;AAAA,MACb,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,YAAA;AAAA,KAC5B,CAAA,CAAA;AACD,IAAM,MAAA,KAAA,GACJ,eAAe,KACX,CAAA,GAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,MAAQ,EAAA,UAAA;AAAA,KAEV,GAAA,SAAA,CAAA;AAEN,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,QAC3B,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,QAC3B,GAAK,EAAA,YAAA;AAAA,QACL,KAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,YAAA,oBAAiB,GAAA,CAAA,QAAA,EAAA,EAAS,aAAW,EAAA,IAAA,EAAC,SAAS,QAAU,EAAA,CAAA;AAAA,UACzD,QAAY,IAAA,OAAO,QAAa,KAAA,QAAA,GAC/B,WACE,wBAA4B,IAAA,IAAA,mBAC7B,GAAA,CAAA,MAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,CAC1B,YAAA,CAAA,EAAA,QAAA,EAAA,KAAA,IAAS,UACZ,CAEA,mBAAA,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,YAAc,EAAA,wBAAA;AAAA,cACd,MAAM,KAAU,IAAA,QAAA;AAAA,aAAA;AAAA,WAClB;AAAA,SAAA;AAAA,OAAA;AAAA,KAEJ,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var vuuTypeaheadInputCss = ".vuuTypeaheadInput {\n .saltPillInput-activationIndicator {\n display: none;\n }\n\n .saltButton {\n height: 18px;\n width: 24px;\n }\n\n .saltButton:before {\n content: \"\";\n background-color: var(--salt-separable-secondary-borderColor);\n height: 100%;\n left: calc(-1 * var(--salt-spacing-100));\n position: absolute;\n width: 1px;\n }\n\n .saltButton:after {\n --vuu-icon-size: 19px;\n --vuu-icon-transform: rotate(90deg);\n\n content: \"\";\n background-color: var(--vuu-icon-color);\n height: var(--vuu-icon-size);\n mask: var(--vuu-svg-triangle-right) center center/var(--vuu-icon-size)\n var(--vuu-icon-size);\n mask-repeat: no-repeat;\n position: absolute;\n transform: var(--vuu-icon-transform, none);\n width: var(--vuu-icon-size);\n }\n}\n";
|
|
1
|
+
var vuuTypeaheadInputCss = ".vuuTypeaheadInput {\n .saltPillInput-activationIndicator {\n display: none;\n }\n\n .saltButton {\n height: 18px;\n width: 24px;\n }\n\n .saltButton:before {\n content: \"\";\n background-color: var(--salt-separable-secondary-borderColor);\n height: 100%;\n left: calc(-1 * var(--salt-spacing-100));\n position: absolute;\n width: 1px;\n }\n\n .saltButton:after {\n --vuu-icon-color: var(--salt-content-primary-foreground);\n --vuu-icon-size: 19px;\n --vuu-icon-transform: rotate(90deg);\n\n content: \"\";\n background-color: var(--vuu-icon-color);\n height: var(--vuu-icon-size);\n mask: var(--vuu-svg-triangle-right) center center/var(--vuu-icon-size)\n var(--vuu-icon-size);\n mask-repeat: no-repeat;\n position: absolute;\n transform: var(--vuu-icon-transform, none);\n width: var(--vuu-icon-size);\n }\n}\n";
|
|
2
2
|
|
|
3
3
|
export { vuuTypeaheadInputCss as default };
|
|
4
4
|
//# sourceMappingURL=VuuTypeaheadInput.css.js.map
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.8.
|
|
2
|
+
"version": "0.8.71",
|
|
3
3
|
"description": "VUU UI Controls",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"devDependencies": {
|
|
7
|
-
"@vuu-ui/vuu-data-types": "0.8.
|
|
8
|
-
"@vuu-ui/vuu-table-types": "0.8.
|
|
7
|
+
"@vuu-ui/vuu-data-types": "0.8.71",
|
|
8
|
+
"@vuu-ui/vuu-table-types": "0.8.71"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@vuu-ui/vuu-layout": "0.8.
|
|
12
|
-
"@vuu-ui/vuu-popups": "0.8.
|
|
13
|
-
"@vuu-ui/vuu-table": "0.8.
|
|
14
|
-
"@vuu-ui/vuu-utils": "0.8.
|
|
11
|
+
"@vuu-ui/vuu-layout": "0.8.71",
|
|
12
|
+
"@vuu-ui/vuu-popups": "0.8.71",
|
|
13
|
+
"@vuu-ui/vuu-table": "0.8.71",
|
|
14
|
+
"@vuu-ui/vuu-utils": "0.8.71",
|
|
15
15
|
"@floating-ui/react": "0.26.5",
|
|
16
16
|
"@salt-ds/core": "1.27.1",
|
|
17
17
|
"@salt-ds/icons": "1.9.1",
|
|
@@ -3,5 +3,6 @@ import { IconButtonProps } from "../icon-button";
|
|
|
3
3
|
import { ColumnSearchProps } from "./ColumnSearch";
|
|
4
4
|
export interface ColumnPickerProps extends Omit<IconButtonProps, "icon">, Pick<ColumnSearchProps, "columns" | "onSelectionChange" | "selected"> {
|
|
5
5
|
icon?: string;
|
|
6
|
+
iconSize?: number;
|
|
6
7
|
}
|
|
7
8
|
export declare const ColumnPicker: import("react").ForwardRefExoticComponent<ColumnPickerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
package/types/list/index.d.ts
CHANGED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var checkboxIconCss = ".vuuCheckboxIcon {\n --vuu-icon-size: 12px;\n --vuu-icon-left: -1px;\n --vuu-icon-top: -1px;\n --vuu-icon-svg: var(--vuu-svg-tick);\n background: var(--salt-editable-primary-background);\n border-style: solid;\n border-color: var(\n --vuuCheckboxIcon-borderColor,\n var(--salt-selectable-borderColor)\n );\n border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);\n border-width: 1px;\n display: inline-block;\n height: var(--vuuCheckboxIcon-size, 12px);\n position: relative;\n width: var(--vuuCheckboxIcon-size, 12px);\n}\n\n.vuuCheckboxIcon-checked-enabled {\n background-color: var(\n --vuuCheckboxIcon-background-checked-enabled,\n var(--vuu-color-purple-10)\n );\n border-color: var(\n --vuuCheckboxIcon-borderColor-checked-enabled,\n var(--vuu-color-purple-10)\n );\n}\n\n.vuuCheckboxIcon-checked-disabled {\n background-color: var(\n --vuuCheckboxIcon-background-checked-disabled,\n var(--vuu-color-gray-35)\n );\n border-color: var(\n --vuuCheckboxIcon-borderColor-checked-disabled,\n var(--vuu-color-gray-35)\n );\n}\n\n.vuuCheckboxIcon-checked-enabled::after,\n.vuuCheckboxIcon-checked-disabled::after {\n content: \"\";\n background-color: white;\n left: var(--vuu-icon-left, auto);\n height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size)\n var(--vuu-icon-size);\n mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size)\n var(--vuu-icon-size);\n mask-repeat: no-repeat;\n -webkit-mask-repeat: no-repeat;\n position: absolute;\n top: var(--vuu-icon-top, auto);\n width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}\n\n.vuuCheckboxIcon-checked-disabled::after {\n background-color: var(\n --vuuCheckboxIcon-tick-checked-disabled,\n var(--vuu-color-gray-30)\n );\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = checkboxIconCss;
|
|
6
|
-
//# sourceMappingURL=CheckboxIcon.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxIcon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
package/cjs/list/CheckboxIcon.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var cx = require('clsx');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var CheckboxIcon$1 = require('./CheckboxIcon.css.js');
|
|
8
|
-
|
|
9
|
-
const classBase = "vuuCheckboxIcon";
|
|
10
|
-
const CheckboxIcon = ({
|
|
11
|
-
checked = false,
|
|
12
|
-
disabled = false,
|
|
13
|
-
...htmlAttributes
|
|
14
|
-
}) => {
|
|
15
|
-
const targetWindow = window.useWindow();
|
|
16
|
-
styles.useComponentCssInjection({
|
|
17
|
-
testId: "vuu-checkbox-icon",
|
|
18
|
-
css: CheckboxIcon$1,
|
|
19
|
-
window: targetWindow
|
|
20
|
-
});
|
|
21
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
22
|
-
"span",
|
|
23
|
-
{
|
|
24
|
-
...htmlAttributes,
|
|
25
|
-
className: cx(classBase, {
|
|
26
|
-
[`${classBase}-checked-${disabled ? "disabled" : "enabled"}`]: checked
|
|
27
|
-
})
|
|
28
|
-
}
|
|
29
|
-
);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
exports.CheckboxIcon = CheckboxIcon;
|
|
33
|
-
//# sourceMappingURL=CheckboxIcon.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxIcon.js","sources":["../../src/list/CheckboxIcon.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nconst classBase = \"vuuCheckboxIcon\";\n\nexport interface CheckboxIconProps extends HTMLAttributes<HTMLSpanElement> {\n checked?: boolean;\n disabled?: boolean;\n}\nexport const CheckboxIcon = ({\n checked = false,\n disabled = false,\n ...htmlAttributes\n}: CheckboxIconProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-checkbox-icon\",\n css: checkboxIconCss,\n window: targetWindow,\n });\n\n return (\n <span\n {...htmlAttributes}\n className={cx(classBase, {\n [`${classBase}-checked-${disabled ? \"disabled\" : \"enabled\"}`]: checked,\n })}\n />\n );\n};\n"],"names":["useWindow","useComponentCssInjection","checkboxIconCss","jsx"],"mappings":";;;;;;;;AAOA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAMX,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAU,GAAA,KAAA;AAAA,EACV,QAAW,GAAA,KAAA;AAAA,EACX,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,GAAG,SAAS,CAAA,SAAA,EAAY,WAAW,UAAa,GAAA,SAAS,EAAE,GAAG,OAAA;AAAA,OAChE,CAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var checkboxIconCss = ".vuuCheckboxIcon {\n --vuu-icon-size: 12px;\n --vuu-icon-left: -1px;\n --vuu-icon-top: -1px;\n --vuu-icon-svg: var(--vuu-svg-tick);\n background: var(--salt-editable-primary-background);\n border-style: solid;\n border-color: var(\n --vuuCheckboxIcon-borderColor,\n var(--salt-selectable-borderColor)\n );\n border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);\n border-width: 1px;\n display: inline-block;\n height: var(--vuuCheckboxIcon-size, 12px);\n position: relative;\n width: var(--vuuCheckboxIcon-size, 12px);\n}\n\n.vuuCheckboxIcon-checked-enabled {\n background-color: var(\n --vuuCheckboxIcon-background-checked-enabled,\n var(--vuu-color-purple-10)\n );\n border-color: var(\n --vuuCheckboxIcon-borderColor-checked-enabled,\n var(--vuu-color-purple-10)\n );\n}\n\n.vuuCheckboxIcon-checked-disabled {\n background-color: var(\n --vuuCheckboxIcon-background-checked-disabled,\n var(--vuu-color-gray-35)\n );\n border-color: var(\n --vuuCheckboxIcon-borderColor-checked-disabled,\n var(--vuu-color-gray-35)\n );\n}\n\n.vuuCheckboxIcon-checked-enabled::after,\n.vuuCheckboxIcon-checked-disabled::after {\n content: \"\";\n background-color: white;\n left: var(--vuu-icon-left, auto);\n height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size)\n var(--vuu-icon-size);\n mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size)\n var(--vuu-icon-size);\n mask-repeat: no-repeat;\n -webkit-mask-repeat: no-repeat;\n position: absolute;\n top: var(--vuu-icon-top, auto);\n width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}\n\n.vuuCheckboxIcon-checked-disabled::after {\n background-color: var(\n --vuuCheckboxIcon-tick-checked-disabled,\n var(--vuu-color-gray-30)\n );\n}\n";
|
|
2
|
-
|
|
3
|
-
export { checkboxIconCss as default };
|
|
4
|
-
//# sourceMappingURL=CheckboxIcon.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxIcon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/esm/list/CheckboxIcon.js
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import cx from 'clsx';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import checkboxIconCss from './CheckboxIcon.css.js';
|
|
6
|
-
|
|
7
|
-
const classBase = "vuuCheckboxIcon";
|
|
8
|
-
const CheckboxIcon = ({
|
|
9
|
-
checked = false,
|
|
10
|
-
disabled = false,
|
|
11
|
-
...htmlAttributes
|
|
12
|
-
}) => {
|
|
13
|
-
const targetWindow = useWindow();
|
|
14
|
-
useComponentCssInjection({
|
|
15
|
-
testId: "vuu-checkbox-icon",
|
|
16
|
-
css: checkboxIconCss,
|
|
17
|
-
window: targetWindow
|
|
18
|
-
});
|
|
19
|
-
return /* @__PURE__ */ jsx(
|
|
20
|
-
"span",
|
|
21
|
-
{
|
|
22
|
-
...htmlAttributes,
|
|
23
|
-
className: cx(classBase, {
|
|
24
|
-
[`${classBase}-checked-${disabled ? "disabled" : "enabled"}`]: checked
|
|
25
|
-
})
|
|
26
|
-
}
|
|
27
|
-
);
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export { CheckboxIcon };
|
|
31
|
-
//# sourceMappingURL=CheckboxIcon.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxIcon.js","sources":["../../src/list/CheckboxIcon.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nconst classBase = \"vuuCheckboxIcon\";\n\nexport interface CheckboxIconProps extends HTMLAttributes<HTMLSpanElement> {\n checked?: boolean;\n disabled?: boolean;\n}\nexport const CheckboxIcon = ({\n checked = false,\n disabled = false,\n ...htmlAttributes\n}: CheckboxIconProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-checkbox-icon\",\n css: checkboxIconCss,\n window: targetWindow,\n });\n\n return (\n <span\n {...htmlAttributes}\n className={cx(classBase, {\n [`${classBase}-checked-${disabled ? \"disabled\" : \"enabled\"}`]: checked,\n })}\n />\n );\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAMX,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAU,GAAA,KAAA;AAAA,EACV,QAAW,GAAA,KAAA;AAAA,EACX,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,GAAG,SAAS,CAAA,SAAA,EAAY,WAAW,UAAa,GAAA,SAAS,EAAE,GAAG,OAAA;AAAA,OAChE,CAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { HTMLAttributes } from "react";
|
|
2
|
-
export interface CheckboxIconProps extends HTMLAttributes<HTMLSpanElement> {
|
|
3
|
-
checked?: boolean;
|
|
4
|
-
disabled?: boolean;
|
|
5
|
-
}
|
|
6
|
-
export declare const CheckboxIcon: ({ checked, disabled, ...htmlAttributes }: CheckboxIconProps) => JSX.Element;
|