@vuu-ui/vuu-ui-controls 0.8.65 → 0.8.67
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/editable-label/EditableLabel.css.js +1 -1
- package/cjs/editable-label/EditableLabel.js +2 -2
- package/cjs/editable-label/EditableLabel.js.map +1 -1
- package/cjs/expando-input/ExpandoInput.css.js +1 -1
- package/cjs/tabstrip/Tab.js +1 -0
- package/cjs/tabstrip/Tab.js.map +1 -1
- package/cjs/tabstrip/TabMenu.js +1 -1
- package/cjs/tabstrip/TabMenu.js.map +1 -1
- package/esm/editable-label/EditableLabel.css.js +1 -1
- package/esm/editable-label/EditableLabel.js +2 -2
- package/esm/editable-label/EditableLabel.js.map +1 -1
- package/esm/expando-input/ExpandoInput.css.js +1 -1
- package/esm/tabstrip/Tab.js +1 -0
- package/esm/tabstrip/Tab.js.map +1 -1
- package/esm/tabstrip/TabMenu.js +1 -1
- package/esm/tabstrip/TabMenu.js.map +1 -1
- package/package.json +7 -7
- package/types/editable-label/EditableLabel.d.ts +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var editableLabelCss = ".vuuEditableLabel {\n --editableLabel-padding: var(--vuuEditableLabel-padding, 6px);\n --editableLabel-height: var(--vuuEditableLabel-height, 26px);\n --saltInput-background: transparent;\n --saltInput-height: calc(var(--editableLabel-height) - 4px);\n --saltInput-minWidth: 14px;\n\n color: inherit;\n cursor: default;\n display: flex;\n flex-direction: column;\n font-size: var(--salt-text-fontSize);\n height: var(--editableLabel-height);\n justify-content: center;\n letter-spacing: normal;\n\n /* max-width: 170px; */\n
|
|
3
|
+
var editableLabelCss = ".vuuEditableLabel {\n --editableLabel-padding: var(--vuuEditableLabel-padding, 6px);\n --editableLabel-height: var(--vuuEditableLabel-height, 26px);\n --saltInput-background: transparent;\n --saltInput-height: calc(var(--editableLabel-height) - 4px);\n --saltInput-minWidth: 14px;\n\n color: inherit;\n cursor: default;\n display: flex;\n flex-direction: column;\n font-size: var(--salt-text-fontSize);\n height: var(--editableLabel-height);\n justify-content: center;\n letter-spacing: normal;\n\n /* max-width: 170px; */\n overflow: hidden;\n padding: 0 var(--editableLabel-padding);\n position: relative;\n text-overflow: ellipsis;\n white-space: nowrap;\n z-index: var(--salt-zIndex-default);\n\n &:focus,\n &:focus-within {\n outline: var(--salt-focused-outline);\n }\n\n &[data-embedded] {\n outline: none;\n }\n}\n\n.vuuEditableLabel:before {\n content: attr(data-text);\n display: block;\n height: 0px;\n visibility: hidden;\n white-space: pre-wrap;\n}\n\n.vuuEditableLabel .saltInput {\n font-weight: var(--salt-text-fontWeight);\n left: var(--editableLabel-padding, 0);\n padding: 0;\n outline-style: none;\n position: absolute;\n right: var(--editableLabel-padding, 0);\n top: var(--saltEditableLabel-top, 1px);\n width: auto;\n}\n\n.vuuEditableLabel .saltInput-activationIndicator {\n display: none;\n}\n\n.vuuEditableLabel-input {\n background-color: transparent;\n border: none;\n box-sizing: content-box;\n color: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 20px;\n margin: 0;\n min-width: 0;\n outline: none;\n padding: 0;\n}\n\n.vuuEditableLabel-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = editableLabelCss;
|
|
6
6
|
//# sourceMappingURL=EditableLabel.css.js.map
|
|
@@ -97,10 +97,10 @@ const EditableLabel = React.forwardRef(function EditableLabel2({
|
|
|
97
97
|
onChange && onChange(value2);
|
|
98
98
|
};
|
|
99
99
|
const handleBlur = React.useCallback(() => {
|
|
100
|
-
if (
|
|
100
|
+
if (editingRef.current) {
|
|
101
101
|
exitEditMode({ allowDeactivation: true });
|
|
102
102
|
}
|
|
103
|
-
}, [
|
|
103
|
+
}, [exitEditMode]);
|
|
104
104
|
const handleKeyDown = (evt) => {
|
|
105
105
|
if (editing && evt.key === "Enter") {
|
|
106
106
|
evt.stopPropagation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableLabel.js","sources":["../../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {\n ChangeEvent,\n KeyboardEvent,\n useCallback,\n useLayoutEffect,\n forwardRef,\n ForwardedRef,\n ReactElement,\n useRef,\n HTMLAttributes,\n useImperativeHandle,\n} from \"react\";\nimport { Input, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"vuuEditableLabel\";\n\nexport type ExitEditModeHandler = (\n originalLabel: string | undefined,\n editedLabel: string | undefined,\n allowDeactivation?: boolean,\n editCancelled?: boolean\n) => void;\n\nexport interface EditAPI {\n beginEdit: () => void;\n}\n\nexport const NullEditAPI: EditAPI = {\n beginEdit: () => undefined,\n};\n\nexport interface EditableLabelProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n className?: string;\n defaultEditing?: boolean;\n defaultValue?: string;\n editLabelApiRef?: ForwardedRef<EditAPI>;\n editing?: boolean;\n onEnterEditMode
|
|
1
|
+
{"version":3,"file":"EditableLabel.js","sources":["../../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {\n ChangeEvent,\n KeyboardEvent,\n useCallback,\n useLayoutEffect,\n forwardRef,\n ForwardedRef,\n ReactElement,\n useRef,\n HTMLAttributes,\n useImperativeHandle,\n} from \"react\";\nimport { Input, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"vuuEditableLabel\";\n\nexport type ExitEditModeHandler = (\n originalLabel: string | undefined,\n editedLabel: string | undefined,\n allowDeactivation?: boolean,\n editCancelled?: boolean\n) => void;\n\nexport interface EditAPI {\n beginEdit: () => void;\n}\n\nexport const NullEditAPI: EditAPI = {\n beginEdit: () => undefined,\n};\n\nexport interface EditableLabelProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n className?: string;\n defaultEditing?: boolean;\n defaultValue?: string;\n editLabelApiRef?: ForwardedRef<EditAPI>;\n editing?: boolean;\n onEnterEditMode?: () => void;\n onChange?: (value: string) => void;\n onExitEditMode: ExitEditModeHandler;\n defaultIsEditing?: boolean;\n value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n {\n className: classNameProp,\n defaultEditing,\n defaultValue,\n editLabelApiRef,\n editing: editingProp,\n onChange,\n onEnterEditMode,\n onExitEditMode,\n value: valueProp,\n ...restProps\n }: EditableLabelProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-editable-label\",\n css: editableLabelCss,\n window: targetWindow,\n });\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const editingRef = useRef<boolean>(false);\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue ?? \"\",\n name: \"EditableLabel\",\n state: \"value\",\n });\n\n const [editing, _setEditing] = useControlled({\n controlled: editingProp,\n default: defaultEditing ?? false,\n name: \"EditableLabel\",\n state: \"editing\",\n });\n\n const setEditing = useCallback(\n (value: boolean) => {\n _setEditing((editingRef.current = value));\n },\n [_setEditing]\n );\n\n const initialValue = useRef(value);\n\n useLayoutEffect(() => {\n if (editing) {\n if (inputRef.current !== null) {\n inputRef.current.select();\n inputRef.current.focus();\n }\n }\n }, [editing, inputRef]);\n\n const beginEdit = useCallback(() => {\n setEditing(true);\n onEnterEditMode?.();\n }, [onEnterEditMode, setEditing]);\n\n useImperativeHandle(\n editLabelApiRef,\n () => ({\n beginEdit,\n }),\n [beginEdit]\n );\n\n const exitEditMode = useCallback(\n ({ cancelEdit = false, allowDeactivation = false } = {}) => {\n setEditing(false);\n const originalValue = initialValue.current;\n if (cancelEdit || originalValue === value) {\n if (originalValue !== value) {\n setValue(originalValue);\n }\n onExitEditMode?.(\n originalValue,\n originalValue,\n allowDeactivation,\n cancelEdit\n );\n } else {\n initialValue.current = value;\n onExitEditMode?.(originalValue, value, allowDeactivation, cancelEdit);\n }\n },\n [onExitEditMode, setEditing, setValue, value]\n );\n\n const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n const { value } = evt.target;\n setValue(value);\n onChange && onChange(value);\n };\n\n // We need the ref here as the blur fires before setEditing has taken effect,\n // so we get a double call to exitEditMode if edit is cancelled.\n const handleBlur = useCallback(() => {\n if (editingRef.current) {\n exitEditMode({ allowDeactivation: true });\n }\n }, [exitEditMode]);\n\n const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n if (editing && evt.key === \"Enter\") {\n evt.stopPropagation();\n // we are likely to lose focus as a consequence of user response\n // to exitEdit transition, don't want it to trigger another\n //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n exitEditMode();\n } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n evt.stopPropagation();\n } else if (evt.key === \"Escape\") {\n exitEditMode({ cancelEdit: true });\n }\n };\n\n const className = cx(classBase, classNameProp, {\n [`${classBase}-editing`]: editing,\n });\n return (\n <div\n {...restProps}\n className={className}\n data-text={value}\n ref={forwardedRef}\n >\n {editing ? (\n <Input\n inputProps={{ className: `${classBase}-input`, spellCheck: false }}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n inputRef={inputRef}\n style={{ padding: 0 }}\n textAlign=\"left\"\n variant=\"secondary\"\n />\n ) : (\n <span className={`${classBase}-label`}>{value}</span>\n )}\n </div>\n );\n});\n"],"names":["forwardRef","EditableLabel","useWindow","useComponentCssInjection","editableLabelCss","useRef","useControlled","useCallback","value","useLayoutEffect","useImperativeHandle","jsx","Input"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var expandoInputCss = ".vuuExpandoInput {\n
|
|
3
|
+
var expandoInputCss = ".vuuExpandoInput {\n --salt-editable-secondary-background: white;\n --expandoInput-height: var(--vuuExpandoInput-height, 26px);\n --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);\n\n --saltInput-height: calc(var(--expandoInput-height) - 2px);\n --saltInput-minHeight: var(--saltInput-height);\n --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);\n\n border: var(--vuuExpandoInput-border, none);\n border-radius: var(--vuuExpandoInput-borderRadius, 0);\n color: inherit;\n cursor: default;\n display: inline-block;\n font-size: var(--salt-text-fontSize);\n height: var(--expandoInput-height);\n min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));\n outline: none;\n padding: 0 var(--expandoInput-padding);\n position: relative;\n}\n\n.vuuExpandoInput:before {\n content: attr(data-text);\n display: block;\n height: 0px;\n visibility: hidden;\n white-space: pre-wrap;\n}\n.vuuExpandoInput-error {\n border-color: var(--vuu-color-red-50);\n}\n\n.vuuExpandoInput .saltInput {\n font-weight: var(--salt-text-fontWeight);\n left: var(--expandoInput-padding, 0);\n padding: 0;\n outline-style: none;\n position: absolute;\n right: var(--expandoInput-padding, 0);\n width: auto;\n}\n\n.vuuExpandoInput .saltInput-activationIndicator {\n display: none;\n}\n\n.vuuExpandoInput-input {\n background-color: transparent;\n border: none;\n box-sizing: content-box;\n display: block;\n flex: 1;\n font: inherit;\n height: 20px;\n margin: 0;\n min-width: 0;\n outline: none;\n padding: 0;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = expandoInputCss;
|
|
6
6
|
//# sourceMappingURL=ExpandoInput.css.js.map
|
package/cjs/tabstrip/Tab.js
CHANGED
package/cjs/tabstrip/Tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sources":["../../src/tabstrip/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n FocusEvent,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n useCallback,\n useRef,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabMenu } from \"./TabMenu\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst classBase = \"vuuTab\";\n\nconst noop = () => undefined;\n\nexport const Tab = forwardRef(function Tab(\n {\n ariaControls,\n children,\n className,\n closeable = false,\n dragging,\n editable = false,\n editing,\n focusVisible,\n index = -1,\n label,\n location,\n onClick,\n onClose,\n onEnterEditMode = noop,\n onExitEditMode = noop,\n onFocus: onFocusProp,\n onKeyUp,\n onMenuAction,\n onMenuClose,\n orientation,\n selected,\n showMenuButton = closeable || editable || Boolean(location),\n tabIndex,\n ...props\n }: TabProps,\n ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n if (showMenuButton && typeof onMenuAction !== \"function\") {\n throw Error(\"Tab onMenuAction must be provided if showMenuButton is set\");\n }\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-tabstrip-tab\",\n css: tabCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLDivElement>(null);\n const editableRef = useRef<HTMLDivElement>(null);\n const setForkRef = useForkRef(ref, rootRef);\n const handleClick = useCallback(\n (e: MouseEvent<HTMLElement>) => {\n if (!editing) {\n e.preventDefault();\n onClick?.(e, index);\n }\n },\n [editing, index, onClick]\n );\n\n const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n originalValue = \"\",\n editedValue = \"\",\n allowDeactivation = true\n ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n const handleKeyUp = (e: KeyboardEvent) => {\n switch (e.key) {\n case \"Backspace\":\n case \"Delete\":\n if (closeable) {\n e.stopPropagation();\n onClose && onClose(index);\n }\n break;\n default:\n onKeyUp && onKeyUp(e, index);\n }\n };\n\n const getLabel = () => {\n if (editable) {\n return (\n <EditableLabel\n editing={editing}\n defaultValue={label}\n // Create a fresh instance after each edit, so it can be uncontrolled ...\n key={label}\n onEnterEditMode={onEnterEditMode}\n onExitEditMode={handleOnExitEditMode}\n ref={editableRef}\n />\n );\n } else {\n return label;\n }\n };\n\n const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n if (editableRef.current) {\n const editable = editableRef.current as HTMLElement;\n const input = editable.querySelector(\n \".vuuEditableLabel-input\"\n ) as HTMLInputElement;\n input?.focus();\n }\n onFocusProp?.(evt);\n };\n\n return (\n <div\n {...props}\n aria-controls={ariaControls}\n aria-label={label}\n aria-selected={selected}\n className={cx(classBase, className, {\n [`${classBase}-closeable`]: closeable,\n \"vuuDraggable-dragAway\": dragging,\n [`${classBase}-editing`]: editing,\n [`${classBase}-selected`]: selected || undefined,\n [`${classBase}-vertical`]: orientation === \"vertical\",\n [`vuuFocusVisible`]: focusVisible,\n })}\n onClick={handleClick}\n onFocus={handleFocus}\n onKeyUp={handleKeyUp}\n ref={setForkRef}\n role=\"tab\"\n tabIndex={tabIndex}\n >\n <div className={`${classBase}-main`}>\n <span\n className={`${classBase}-text`}\n // data-text is important, it determines the width of the tab. A pseudo\n // element assigns data-text as content. This is styled as selected tab\n // text. That means width of tab always corresponds to its selected state,\n // so tabs do not change size when selected (ie when the text is bolded).\n // Do not include if we have editable content, EditableLabel will determine\n // the width\n data-text={editable ? undefined : label}\n >\n {children ?? getLabel()}\n </span>\n </div>\n {showMenuButton ? (\n <TabMenu\n allowClose={closeable}\n allowRename={editable}\n controlledComponentId={ariaControls}\n controlledComponentTitle={label}\n location={location}\n onMenuAction={onMenuAction as MenuActionHandler}\n onMenuClose={onMenuClose}\n index={index}\n />\n ) : null}\n </div>\n );\n});\n"],"names":["forwardRef","Tab","useWindow","useComponentCssInjection","tabCss","useRef","useForkRef","useCallback","jsx","EditableLabel","editable","jsxs","TabMenu"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tab.js","sources":["../../src/tabstrip/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n FocusEvent,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n useCallback,\n useRef,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabMenu } from \"./TabMenu\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst classBase = \"vuuTab\";\n\nconst noop = () => undefined;\n\nexport const Tab = forwardRef(function Tab(\n {\n ariaControls,\n children,\n className,\n closeable = false,\n dragging,\n editable = false,\n editing,\n focusVisible,\n index = -1,\n label,\n location,\n onClick,\n onClose,\n onEnterEditMode = noop,\n onExitEditMode = noop,\n onFocus: onFocusProp,\n onKeyUp,\n onMenuAction,\n onMenuClose,\n orientation,\n selected,\n showMenuButton = closeable || editable || Boolean(location),\n tabIndex,\n ...props\n }: TabProps,\n ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n if (showMenuButton && typeof onMenuAction !== \"function\") {\n throw Error(\"Tab onMenuAction must be provided if showMenuButton is set\");\n }\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-tabstrip-tab\",\n css: tabCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLDivElement>(null);\n const editableRef = useRef<HTMLDivElement>(null);\n const setForkRef = useForkRef(ref, rootRef);\n const handleClick = useCallback(\n (e: MouseEvent<HTMLElement>) => {\n if (!editing) {\n e.preventDefault();\n onClick?.(e, index);\n }\n },\n [editing, index, onClick]\n );\n\n const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n originalValue = \"\",\n editedValue = \"\",\n allowDeactivation = true\n ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n const handleKeyUp = (e: KeyboardEvent) => {\n switch (e.key) {\n case \"Backspace\":\n case \"Delete\":\n if (closeable) {\n e.stopPropagation();\n onClose && onClose(index);\n }\n break;\n default:\n onKeyUp && onKeyUp(e, index);\n }\n };\n\n const getLabel = () => {\n if (editable) {\n return (\n <EditableLabel\n data-embedded\n editing={editing}\n defaultValue={label}\n // Create a fresh instance after each edit, so it can be uncontrolled ...\n key={label}\n onEnterEditMode={onEnterEditMode}\n onExitEditMode={handleOnExitEditMode}\n ref={editableRef}\n />\n );\n } else {\n return label;\n }\n };\n\n const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n if (editableRef.current) {\n const editable = editableRef.current as HTMLElement;\n const input = editable.querySelector(\n \".vuuEditableLabel-input\"\n ) as HTMLInputElement;\n input?.focus();\n }\n onFocusProp?.(evt);\n };\n\n return (\n <div\n {...props}\n aria-controls={ariaControls}\n aria-label={label}\n aria-selected={selected}\n className={cx(classBase, className, {\n [`${classBase}-closeable`]: closeable,\n \"vuuDraggable-dragAway\": dragging,\n [`${classBase}-editing`]: editing,\n [`${classBase}-selected`]: selected || undefined,\n [`${classBase}-vertical`]: orientation === \"vertical\",\n [`vuuFocusVisible`]: focusVisible,\n })}\n onClick={handleClick}\n onFocus={handleFocus}\n onKeyUp={handleKeyUp}\n ref={setForkRef}\n role=\"tab\"\n tabIndex={tabIndex}\n >\n <div className={`${classBase}-main`}>\n <span\n className={`${classBase}-text`}\n // data-text is important, it determines the width of the tab. A pseudo\n // element assigns data-text as content. This is styled as selected tab\n // text. That means width of tab always corresponds to its selected state,\n // so tabs do not change size when selected (ie when the text is bolded).\n // Do not include if we have editable content, EditableLabel will determine\n // the width\n data-text={editable ? undefined : label}\n >\n {children ?? getLabel()}\n </span>\n </div>\n {showMenuButton ? (\n <TabMenu\n allowClose={closeable}\n allowRename={editable}\n controlledComponentId={ariaControls}\n controlledComponentTitle={label}\n location={location}\n onMenuAction={onMenuAction as MenuActionHandler}\n onMenuClose={onMenuClose}\n index={index}\n />\n ) : null}\n </div>\n );\n});\n"],"names":["forwardRef","Tab","useWindow","useComponentCssInjection","tabCss","useRef","useForkRef","useCallback","jsx","EditableLabel","editable","jsxs","TabMenu"],"mappings":"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"}
|
package/cjs/tabstrip/TabMenu.js
CHANGED
|
@@ -4,8 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var vuuPopups = require('@vuu-ui/vuu-popups');
|
|
5
5
|
var styles = require('@salt-ds/styles');
|
|
6
6
|
var window = require('@salt-ds/window');
|
|
7
|
-
var React = require('react');
|
|
8
7
|
var cx = require('clsx');
|
|
8
|
+
var React = require('react');
|
|
9
9
|
var TabMenuOptions = require('./TabMenuOptions.js');
|
|
10
10
|
var TabMenu$1 = require('./TabMenu.css.js');
|
|
11
11
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabMenu.js","sources":["../../src/tabstrip/TabMenu.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"TabMenu.js","sources":["../../src/tabstrip/TabMenu.tsx"],"sourcesContent":["import {\n ContextMenuItemDescriptor,\n MenuActionHandler,\n MenuBuilder,\n} from \"@vuu-ui/vuu-data-types\";\nimport { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { MenuOptions, closeCommand, renameCommand } from \"./TabMenuOptions\";\n\nimport tabMenuCss from \"./TabMenu.css\";\n\nconst classBase = \"vuuTabMenu\";\n\nexport interface TabMenuProps {\n allowClose: boolean;\n allowRename: boolean;\n index: number;\n location?: string;\n onMenuAction: MenuActionHandler;\n onMenuClose?: () => void;\n /**\n * The id of associated component, if available\n */\n controlledComponentId?: string;\n /**\n * The label of Tab, if available\n */\n controlledComponentTitle?: string;\n}\n\nexport const TabMenu = ({\n allowClose,\n allowRename,\n controlledComponentId,\n controlledComponentTitle,\n location,\n onMenuAction,\n onMenuClose,\n index,\n}: TabMenuProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-tab-menu\",\n css: tabMenuCss,\n window: targetWindow,\n });\n\n const [menuBuilder, menuOptions] = useMemo(\n (): [MenuBuilder, MenuOptions] => [\n (_location, options) => {\n const menuItems: ContextMenuItemDescriptor[] = [];\n if (allowRename) {\n menuItems.push(renameCommand(options as MenuOptions));\n }\n if (allowClose) {\n menuItems.push(closeCommand(options as MenuOptions));\n }\n return menuItems;\n },\n {\n controlledComponentId,\n controlledComponentTitle,\n tabIndex: index,\n },\n ],\n [\n allowClose,\n allowRename,\n controlledComponentId,\n controlledComponentTitle,\n index,\n ]\n );\n\n return (\n <PopupMenu\n aria-label=\"context menu\"\n className={classBase}\n data-embedded\n menuBuilder={menuBuilder}\n menuActionHandler={onMenuAction}\n menuLocation={cx(\"tab\", location)}\n menuOptions={menuOptions}\n onMenuClose={onMenuClose}\n tabIndex={-1}\n />\n );\n};\n"],"names":["useWindow","useComponentCssInjection","tabMenuCss","useMemo","renameCommand","closeCommand","jsx","PopupMenu"],"mappings":";;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,YAAA,CAAA;AAmBX,MAAM,UAAU,CAAC;AAAA,EACtB,UAAA;AAAA,EACA,WAAA;AAAA,EACA,qBAAA;AAAA,EACA,wBAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AACF,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,CAAC,WAAa,EAAA,WAAW,CAAI,GAAAC,aAAA;AAAA,IACjC,MAAkC;AAAA,MAChC,CAAC,WAAW,OAAY,KAAA;AACtB,QAAA,MAAM,YAAyC,EAAC,CAAA;AAChD,QAAA,IAAI,WAAa,EAAA;AACf,UAAU,SAAA,CAAA,IAAA,CAAKC,4BAAc,CAAA,OAAsB,CAAC,CAAA,CAAA;AAAA,SACtD;AACA,QAAA,IAAI,UAAY,EAAA;AACd,UAAU,SAAA,CAAA,IAAA,CAAKC,2BAAa,CAAA,OAAsB,CAAC,CAAA,CAAA;AAAA,SACrD;AACA,QAAO,OAAA,SAAA,CAAA;AAAA,OACT;AAAA,MACA;AAAA,QACE,qBAAA;AAAA,QACA,wBAAA;AAAA,QACA,QAAU,EAAA,KAAA;AAAA,OACZ;AAAA,KACF;AAAA,IACA;AAAA,MACE,UAAA;AAAA,MACA,WAAA;AAAA,MACA,qBAAA;AAAA,MACA,wBAAA;AAAA,MACA,KAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,cAAA;AAAA,MACX,SAAW,EAAA,SAAA;AAAA,MACX,eAAa,EAAA,IAAA;AAAA,MACb,WAAA;AAAA,MACA,iBAAmB,EAAA,YAAA;AAAA,MACnB,YAAA,EAAc,EAAG,CAAA,KAAA,EAAO,QAAQ,CAAA;AAAA,MAChC,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAU,EAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GACZ,CAAA;AAEJ;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var editableLabelCss = ".vuuEditableLabel {\n --editableLabel-padding: var(--vuuEditableLabel-padding, 6px);\n --editableLabel-height: var(--vuuEditableLabel-height, 26px);\n --saltInput-background: transparent;\n --saltInput-height: calc(var(--editableLabel-height) - 4px);\n --saltInput-minWidth: 14px;\n\n color: inherit;\n cursor: default;\n display: flex;\n flex-direction: column;\n font-size: var(--salt-text-fontSize);\n height: var(--editableLabel-height);\n justify-content: center;\n letter-spacing: normal;\n\n /* max-width: 170px; */\n
|
|
1
|
+
var editableLabelCss = ".vuuEditableLabel {\n --editableLabel-padding: var(--vuuEditableLabel-padding, 6px);\n --editableLabel-height: var(--vuuEditableLabel-height, 26px);\n --saltInput-background: transparent;\n --saltInput-height: calc(var(--editableLabel-height) - 4px);\n --saltInput-minWidth: 14px;\n\n color: inherit;\n cursor: default;\n display: flex;\n flex-direction: column;\n font-size: var(--salt-text-fontSize);\n height: var(--editableLabel-height);\n justify-content: center;\n letter-spacing: normal;\n\n /* max-width: 170px; */\n overflow: hidden;\n padding: 0 var(--editableLabel-padding);\n position: relative;\n text-overflow: ellipsis;\n white-space: nowrap;\n z-index: var(--salt-zIndex-default);\n\n &:focus,\n &:focus-within {\n outline: var(--salt-focused-outline);\n }\n\n &[data-embedded] {\n outline: none;\n }\n}\n\n.vuuEditableLabel:before {\n content: attr(data-text);\n display: block;\n height: 0px;\n visibility: hidden;\n white-space: pre-wrap;\n}\n\n.vuuEditableLabel .saltInput {\n font-weight: var(--salt-text-fontWeight);\n left: var(--editableLabel-padding, 0);\n padding: 0;\n outline-style: none;\n position: absolute;\n right: var(--editableLabel-padding, 0);\n top: var(--saltEditableLabel-top, 1px);\n width: auto;\n}\n\n.vuuEditableLabel .saltInput-activationIndicator {\n display: none;\n}\n\n.vuuEditableLabel-input {\n background-color: transparent;\n border: none;\n box-sizing: content-box;\n color: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 20px;\n margin: 0;\n min-width: 0;\n outline: none;\n padding: 0;\n}\n\n.vuuEditableLabel-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { editableLabelCss as default };
|
|
4
4
|
//# sourceMappingURL=EditableLabel.css.js.map
|
|
@@ -95,10 +95,10 @@ const EditableLabel = forwardRef(function EditableLabel2({
|
|
|
95
95
|
onChange && onChange(value2);
|
|
96
96
|
};
|
|
97
97
|
const handleBlur = useCallback(() => {
|
|
98
|
-
if (
|
|
98
|
+
if (editingRef.current) {
|
|
99
99
|
exitEditMode({ allowDeactivation: true });
|
|
100
100
|
}
|
|
101
|
-
}, [
|
|
101
|
+
}, [exitEditMode]);
|
|
102
102
|
const handleKeyDown = (evt) => {
|
|
103
103
|
if (editing && evt.key === "Enter") {
|
|
104
104
|
evt.stopPropagation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableLabel.js","sources":["../../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {\n ChangeEvent,\n KeyboardEvent,\n useCallback,\n useLayoutEffect,\n forwardRef,\n ForwardedRef,\n ReactElement,\n useRef,\n HTMLAttributes,\n useImperativeHandle,\n} from \"react\";\nimport { Input, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"vuuEditableLabel\";\n\nexport type ExitEditModeHandler = (\n originalLabel: string | undefined,\n editedLabel: string | undefined,\n allowDeactivation?: boolean,\n editCancelled?: boolean\n) => void;\n\nexport interface EditAPI {\n beginEdit: () => void;\n}\n\nexport const NullEditAPI: EditAPI = {\n beginEdit: () => undefined,\n};\n\nexport interface EditableLabelProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n className?: string;\n defaultEditing?: boolean;\n defaultValue?: string;\n editLabelApiRef?: ForwardedRef<EditAPI>;\n editing?: boolean;\n onEnterEditMode
|
|
1
|
+
{"version":3,"file":"EditableLabel.js","sources":["../../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {\n ChangeEvent,\n KeyboardEvent,\n useCallback,\n useLayoutEffect,\n forwardRef,\n ForwardedRef,\n ReactElement,\n useRef,\n HTMLAttributes,\n useImperativeHandle,\n} from \"react\";\nimport { Input, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"vuuEditableLabel\";\n\nexport type ExitEditModeHandler = (\n originalLabel: string | undefined,\n editedLabel: string | undefined,\n allowDeactivation?: boolean,\n editCancelled?: boolean\n) => void;\n\nexport interface EditAPI {\n beginEdit: () => void;\n}\n\nexport const NullEditAPI: EditAPI = {\n beginEdit: () => undefined,\n};\n\nexport interface EditableLabelProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n className?: string;\n defaultEditing?: boolean;\n defaultValue?: string;\n editLabelApiRef?: ForwardedRef<EditAPI>;\n editing?: boolean;\n onEnterEditMode?: () => void;\n onChange?: (value: string) => void;\n onExitEditMode: ExitEditModeHandler;\n defaultIsEditing?: boolean;\n value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n {\n className: classNameProp,\n defaultEditing,\n defaultValue,\n editLabelApiRef,\n editing: editingProp,\n onChange,\n onEnterEditMode,\n onExitEditMode,\n value: valueProp,\n ...restProps\n }: EditableLabelProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-editable-label\",\n css: editableLabelCss,\n window: targetWindow,\n });\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const editingRef = useRef<boolean>(false);\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue ?? \"\",\n name: \"EditableLabel\",\n state: \"value\",\n });\n\n const [editing, _setEditing] = useControlled({\n controlled: editingProp,\n default: defaultEditing ?? false,\n name: \"EditableLabel\",\n state: \"editing\",\n });\n\n const setEditing = useCallback(\n (value: boolean) => {\n _setEditing((editingRef.current = value));\n },\n [_setEditing]\n );\n\n const initialValue = useRef(value);\n\n useLayoutEffect(() => {\n if (editing) {\n if (inputRef.current !== null) {\n inputRef.current.select();\n inputRef.current.focus();\n }\n }\n }, [editing, inputRef]);\n\n const beginEdit = useCallback(() => {\n setEditing(true);\n onEnterEditMode?.();\n }, [onEnterEditMode, setEditing]);\n\n useImperativeHandle(\n editLabelApiRef,\n () => ({\n beginEdit,\n }),\n [beginEdit]\n );\n\n const exitEditMode = useCallback(\n ({ cancelEdit = false, allowDeactivation = false } = {}) => {\n setEditing(false);\n const originalValue = initialValue.current;\n if (cancelEdit || originalValue === value) {\n if (originalValue !== value) {\n setValue(originalValue);\n }\n onExitEditMode?.(\n originalValue,\n originalValue,\n allowDeactivation,\n cancelEdit\n );\n } else {\n initialValue.current = value;\n onExitEditMode?.(originalValue, value, allowDeactivation, cancelEdit);\n }\n },\n [onExitEditMode, setEditing, setValue, value]\n );\n\n const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n const { value } = evt.target;\n setValue(value);\n onChange && onChange(value);\n };\n\n // We need the ref here as the blur fires before setEditing has taken effect,\n // so we get a double call to exitEditMode if edit is cancelled.\n const handleBlur = useCallback(() => {\n if (editingRef.current) {\n exitEditMode({ allowDeactivation: true });\n }\n }, [exitEditMode]);\n\n const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n if (editing && evt.key === \"Enter\") {\n evt.stopPropagation();\n // we are likely to lose focus as a consequence of user response\n // to exitEdit transition, don't want it to trigger another\n //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n exitEditMode();\n } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n evt.stopPropagation();\n } else if (evt.key === \"Escape\") {\n exitEditMode({ cancelEdit: true });\n }\n };\n\n const className = cx(classBase, classNameProp, {\n [`${classBase}-editing`]: editing,\n });\n return (\n <div\n {...restProps}\n className={className}\n data-text={value}\n ref={forwardedRef}\n >\n {editing ? (\n <Input\n inputProps={{ className: `${classBase}-input`, spellCheck: false }}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n inputRef={inputRef}\n style={{ padding: 0 }}\n textAlign=\"left\"\n variant=\"secondary\"\n />\n ) : (\n <span className={`${classBase}-label`}>{value}</span>\n )}\n </div>\n );\n});\n"],"names":["EditableLabel","value"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var expandoInputCss = ".vuuExpandoInput {\n
|
|
1
|
+
var expandoInputCss = ".vuuExpandoInput {\n --salt-editable-secondary-background: white;\n --expandoInput-height: var(--vuuExpandoInput-height, 26px);\n --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);\n\n --saltInput-height: calc(var(--expandoInput-height) - 2px);\n --saltInput-minHeight: var(--saltInput-height);\n --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);\n\n border: var(--vuuExpandoInput-border, none);\n border-radius: var(--vuuExpandoInput-borderRadius, 0);\n color: inherit;\n cursor: default;\n display: inline-block;\n font-size: var(--salt-text-fontSize);\n height: var(--expandoInput-height);\n min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));\n outline: none;\n padding: 0 var(--expandoInput-padding);\n position: relative;\n}\n\n.vuuExpandoInput:before {\n content: attr(data-text);\n display: block;\n height: 0px;\n visibility: hidden;\n white-space: pre-wrap;\n}\n.vuuExpandoInput-error {\n border-color: var(--vuu-color-red-50);\n}\n\n.vuuExpandoInput .saltInput {\n font-weight: var(--salt-text-fontWeight);\n left: var(--expandoInput-padding, 0);\n padding: 0;\n outline-style: none;\n position: absolute;\n right: var(--expandoInput-padding, 0);\n width: auto;\n}\n\n.vuuExpandoInput .saltInput-activationIndicator {\n display: none;\n}\n\n.vuuExpandoInput-input {\n background-color: transparent;\n border: none;\n box-sizing: content-box;\n display: block;\n flex: 1;\n font: inherit;\n height: 20px;\n margin: 0;\n min-width: 0;\n outline: none;\n padding: 0;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { expandoInputCss as default };
|
|
4
4
|
//# sourceMappingURL=ExpandoInput.css.js.map
|
package/esm/tabstrip/Tab.js
CHANGED
package/esm/tabstrip/Tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sources":["../../src/tabstrip/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n FocusEvent,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n useCallback,\n useRef,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabMenu } from \"./TabMenu\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst classBase = \"vuuTab\";\n\nconst noop = () => undefined;\n\nexport const Tab = forwardRef(function Tab(\n {\n ariaControls,\n children,\n className,\n closeable = false,\n dragging,\n editable = false,\n editing,\n focusVisible,\n index = -1,\n label,\n location,\n onClick,\n onClose,\n onEnterEditMode = noop,\n onExitEditMode = noop,\n onFocus: onFocusProp,\n onKeyUp,\n onMenuAction,\n onMenuClose,\n orientation,\n selected,\n showMenuButton = closeable || editable || Boolean(location),\n tabIndex,\n ...props\n }: TabProps,\n ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n if (showMenuButton && typeof onMenuAction !== \"function\") {\n throw Error(\"Tab onMenuAction must be provided if showMenuButton is set\");\n }\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-tabstrip-tab\",\n css: tabCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLDivElement>(null);\n const editableRef = useRef<HTMLDivElement>(null);\n const setForkRef = useForkRef(ref, rootRef);\n const handleClick = useCallback(\n (e: MouseEvent<HTMLElement>) => {\n if (!editing) {\n e.preventDefault();\n onClick?.(e, index);\n }\n },\n [editing, index, onClick]\n );\n\n const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n originalValue = \"\",\n editedValue = \"\",\n allowDeactivation = true\n ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n const handleKeyUp = (e: KeyboardEvent) => {\n switch (e.key) {\n case \"Backspace\":\n case \"Delete\":\n if (closeable) {\n e.stopPropagation();\n onClose && onClose(index);\n }\n break;\n default:\n onKeyUp && onKeyUp(e, index);\n }\n };\n\n const getLabel = () => {\n if (editable) {\n return (\n <EditableLabel\n editing={editing}\n defaultValue={label}\n // Create a fresh instance after each edit, so it can be uncontrolled ...\n key={label}\n onEnterEditMode={onEnterEditMode}\n onExitEditMode={handleOnExitEditMode}\n ref={editableRef}\n />\n );\n } else {\n return label;\n }\n };\n\n const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n if (editableRef.current) {\n const editable = editableRef.current as HTMLElement;\n const input = editable.querySelector(\n \".vuuEditableLabel-input\"\n ) as HTMLInputElement;\n input?.focus();\n }\n onFocusProp?.(evt);\n };\n\n return (\n <div\n {...props}\n aria-controls={ariaControls}\n aria-label={label}\n aria-selected={selected}\n className={cx(classBase, className, {\n [`${classBase}-closeable`]: closeable,\n \"vuuDraggable-dragAway\": dragging,\n [`${classBase}-editing`]: editing,\n [`${classBase}-selected`]: selected || undefined,\n [`${classBase}-vertical`]: orientation === \"vertical\",\n [`vuuFocusVisible`]: focusVisible,\n })}\n onClick={handleClick}\n onFocus={handleFocus}\n onKeyUp={handleKeyUp}\n ref={setForkRef}\n role=\"tab\"\n tabIndex={tabIndex}\n >\n <div className={`${classBase}-main`}>\n <span\n className={`${classBase}-text`}\n // data-text is important, it determines the width of the tab. A pseudo\n // element assigns data-text as content. This is styled as selected tab\n // text. That means width of tab always corresponds to its selected state,\n // so tabs do not change size when selected (ie when the text is bolded).\n // Do not include if we have editable content, EditableLabel will determine\n // the width\n data-text={editable ? undefined : label}\n >\n {children ?? getLabel()}\n </span>\n </div>\n {showMenuButton ? (\n <TabMenu\n allowClose={closeable}\n allowRename={editable}\n controlledComponentId={ariaControls}\n controlledComponentTitle={label}\n location={location}\n onMenuAction={onMenuAction as MenuActionHandler}\n onMenuClose={onMenuClose}\n index={index}\n />\n ) : null}\n </div>\n );\n});\n"],"names":["Tab","editable"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tab.js","sources":["../../src/tabstrip/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n FocusEvent,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n useCallback,\n useRef,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabMenu } from \"./TabMenu\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst classBase = \"vuuTab\";\n\nconst noop = () => undefined;\n\nexport const Tab = forwardRef(function Tab(\n {\n ariaControls,\n children,\n className,\n closeable = false,\n dragging,\n editable = false,\n editing,\n focusVisible,\n index = -1,\n label,\n location,\n onClick,\n onClose,\n onEnterEditMode = noop,\n onExitEditMode = noop,\n onFocus: onFocusProp,\n onKeyUp,\n onMenuAction,\n onMenuClose,\n orientation,\n selected,\n showMenuButton = closeable || editable || Boolean(location),\n tabIndex,\n ...props\n }: TabProps,\n ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n if (showMenuButton && typeof onMenuAction !== \"function\") {\n throw Error(\"Tab onMenuAction must be provided if showMenuButton is set\");\n }\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-tabstrip-tab\",\n css: tabCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLDivElement>(null);\n const editableRef = useRef<HTMLDivElement>(null);\n const setForkRef = useForkRef(ref, rootRef);\n const handleClick = useCallback(\n (e: MouseEvent<HTMLElement>) => {\n if (!editing) {\n e.preventDefault();\n onClick?.(e, index);\n }\n },\n [editing, index, onClick]\n );\n\n const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n originalValue = \"\",\n editedValue = \"\",\n allowDeactivation = true\n ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n const handleKeyUp = (e: KeyboardEvent) => {\n switch (e.key) {\n case \"Backspace\":\n case \"Delete\":\n if (closeable) {\n e.stopPropagation();\n onClose && onClose(index);\n }\n break;\n default:\n onKeyUp && onKeyUp(e, index);\n }\n };\n\n const getLabel = () => {\n if (editable) {\n return (\n <EditableLabel\n data-embedded\n editing={editing}\n defaultValue={label}\n // Create a fresh instance after each edit, so it can be uncontrolled ...\n key={label}\n onEnterEditMode={onEnterEditMode}\n onExitEditMode={handleOnExitEditMode}\n ref={editableRef}\n />\n );\n } else {\n return label;\n }\n };\n\n const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n if (editableRef.current) {\n const editable = editableRef.current as HTMLElement;\n const input = editable.querySelector(\n \".vuuEditableLabel-input\"\n ) as HTMLInputElement;\n input?.focus();\n }\n onFocusProp?.(evt);\n };\n\n return (\n <div\n {...props}\n aria-controls={ariaControls}\n aria-label={label}\n aria-selected={selected}\n className={cx(classBase, className, {\n [`${classBase}-closeable`]: closeable,\n \"vuuDraggable-dragAway\": dragging,\n [`${classBase}-editing`]: editing,\n [`${classBase}-selected`]: selected || undefined,\n [`${classBase}-vertical`]: orientation === \"vertical\",\n [`vuuFocusVisible`]: focusVisible,\n })}\n onClick={handleClick}\n onFocus={handleFocus}\n onKeyUp={handleKeyUp}\n ref={setForkRef}\n role=\"tab\"\n tabIndex={tabIndex}\n >\n <div className={`${classBase}-main`}>\n <span\n className={`${classBase}-text`}\n // data-text is important, it determines the width of the tab. A pseudo\n // element assigns data-text as content. This is styled as selected tab\n // text. That means width of tab always corresponds to its selected state,\n // so tabs do not change size when selected (ie when the text is bolded).\n // Do not include if we have editable content, EditableLabel will determine\n // the width\n data-text={editable ? undefined : label}\n >\n {children ?? getLabel()}\n </span>\n </div>\n {showMenuButton ? (\n <TabMenu\n allowClose={closeable}\n allowRename={editable}\n controlledComponentId={ariaControls}\n controlledComponentTitle={label}\n location={location}\n onMenuAction={onMenuAction as MenuActionHandler}\n onMenuClose={onMenuClose}\n index={index}\n />\n ) : null}\n </div>\n );\n});\n"],"names":["Tab","editable"],"mappings":"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"}
|
package/esm/tabstrip/TabMenu.js
CHANGED
|
@@ -2,8 +2,8 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { PopupMenu } from '@vuu-ui/vuu-popups';
|
|
3
3
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
4
|
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { useMemo } from 'react';
|
|
6
5
|
import cx from 'clsx';
|
|
6
|
+
import { useMemo } from 'react';
|
|
7
7
|
import { renameCommand, closeCommand } from './TabMenuOptions.js';
|
|
8
8
|
import tabMenuCss from './TabMenu.css.js';
|
|
9
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabMenu.js","sources":["../../src/tabstrip/TabMenu.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"TabMenu.js","sources":["../../src/tabstrip/TabMenu.tsx"],"sourcesContent":["import {\n ContextMenuItemDescriptor,\n MenuActionHandler,\n MenuBuilder,\n} from \"@vuu-ui/vuu-data-types\";\nimport { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { MenuOptions, closeCommand, renameCommand } from \"./TabMenuOptions\";\n\nimport tabMenuCss from \"./TabMenu.css\";\n\nconst classBase = \"vuuTabMenu\";\n\nexport interface TabMenuProps {\n allowClose: boolean;\n allowRename: boolean;\n index: number;\n location?: string;\n onMenuAction: MenuActionHandler;\n onMenuClose?: () => void;\n /**\n * The id of associated component, if available\n */\n controlledComponentId?: string;\n /**\n * The label of Tab, if available\n */\n controlledComponentTitle?: string;\n}\n\nexport const TabMenu = ({\n allowClose,\n allowRename,\n controlledComponentId,\n controlledComponentTitle,\n location,\n onMenuAction,\n onMenuClose,\n index,\n}: TabMenuProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-tab-menu\",\n css: tabMenuCss,\n window: targetWindow,\n });\n\n const [menuBuilder, menuOptions] = useMemo(\n (): [MenuBuilder, MenuOptions] => [\n (_location, options) => {\n const menuItems: ContextMenuItemDescriptor[] = [];\n if (allowRename) {\n menuItems.push(renameCommand(options as MenuOptions));\n }\n if (allowClose) {\n menuItems.push(closeCommand(options as MenuOptions));\n }\n return menuItems;\n },\n {\n controlledComponentId,\n controlledComponentTitle,\n tabIndex: index,\n },\n ],\n [\n allowClose,\n allowRename,\n controlledComponentId,\n controlledComponentTitle,\n index,\n ]\n );\n\n return (\n <PopupMenu\n aria-label=\"context menu\"\n className={classBase}\n data-embedded\n menuBuilder={menuBuilder}\n menuActionHandler={onMenuAction}\n menuLocation={cx(\"tab\", location)}\n menuOptions={menuOptions}\n onMenuClose={onMenuClose}\n tabIndex={-1}\n />\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAcA,MAAM,SAAY,GAAA,YAAA,CAAA;AAmBX,MAAM,UAAU,CAAC;AAAA,EACtB,UAAA;AAAA,EACA,WAAA;AAAA,EACA,qBAAA;AAAA,EACA,wBAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AACF,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,CAAC,WAAa,EAAA,WAAW,CAAI,GAAA,OAAA;AAAA,IACjC,MAAkC;AAAA,MAChC,CAAC,WAAW,OAAY,KAAA;AACtB,QAAA,MAAM,YAAyC,EAAC,CAAA;AAChD,QAAA,IAAI,WAAa,EAAA;AACf,UAAU,SAAA,CAAA,IAAA,CAAK,aAAc,CAAA,OAAsB,CAAC,CAAA,CAAA;AAAA,SACtD;AACA,QAAA,IAAI,UAAY,EAAA;AACd,UAAU,SAAA,CAAA,IAAA,CAAK,YAAa,CAAA,OAAsB,CAAC,CAAA,CAAA;AAAA,SACrD;AACA,QAAO,OAAA,SAAA,CAAA;AAAA,OACT;AAAA,MACA;AAAA,QACE,qBAAA;AAAA,QACA,wBAAA;AAAA,QACA,QAAU,EAAA,KAAA;AAAA,OACZ;AAAA,KACF;AAAA,IACA;AAAA,MACE,UAAA;AAAA,MACA,WAAA;AAAA,MACA,qBAAA;AAAA,MACA,wBAAA;AAAA,MACA,KAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,cAAA;AAAA,MACX,SAAW,EAAA,SAAA;AAAA,MACX,eAAa,EAAA,IAAA;AAAA,MACb,WAAA;AAAA,MACA,iBAAmB,EAAA,YAAA;AAAA,MACnB,YAAA,EAAc,EAAG,CAAA,KAAA,EAAO,QAAQ,CAAA;AAAA,MAChC,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAU,EAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GACZ,CAAA;AAEJ;;;;"}
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.8.
|
|
2
|
+
"version": "0.8.67",
|
|
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.67",
|
|
8
|
+
"@vuu-ui/vuu-table-types": "0.8.67"
|
|
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.67",
|
|
12
|
+
"@vuu-ui/vuu-popups": "0.8.67",
|
|
13
|
+
"@vuu-ui/vuu-table": "0.8.67",
|
|
14
|
+
"@vuu-ui/vuu-utils": "0.8.67",
|
|
15
15
|
"@floating-ui/react": "0.26.5",
|
|
16
16
|
"@salt-ds/core": "1.27.1",
|
|
17
17
|
"@salt-ds/icons": "1.9.1",
|
|
@@ -10,7 +10,7 @@ export interface EditableLabelProps extends Omit<HTMLAttributes<HTMLDivElement>,
|
|
|
10
10
|
defaultValue?: string;
|
|
11
11
|
editLabelApiRef?: ForwardedRef<EditAPI>;
|
|
12
12
|
editing?: boolean;
|
|
13
|
-
onEnterEditMode
|
|
13
|
+
onEnterEditMode?: () => void;
|
|
14
14
|
onChange?: (value: string) => void;
|
|
15
15
|
onExitEditMode: ExitEditModeHandler;
|
|
16
16
|
defaultIsEditing?: boolean;
|