@medusajs/ui 4.0.5-snapshot-20250203091247 → 4.0.5-snapshot-20250204160259
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/dist/cjs/components/command-bar/command-bar.d.ts.map +1 -1
- package/dist/cjs/components/command-bar/command-bar.js +4 -0
- package/dist/cjs/components/command-bar/command-bar.js.map +1 -1
- package/dist/cjs/utils/is-input-element.d.ts +3 -0
- package/dist/cjs/utils/is-input-element.d.ts.map +1 -0
- package/dist/cjs/utils/is-input-element.js +12 -0
- package/dist/cjs/utils/is-input-element.js.map +1 -0
- package/dist/esm/components/command-bar/command-bar.d.ts.map +1 -1
- package/dist/esm/components/command-bar/command-bar.js +4 -0
- package/dist/esm/components/command-bar/command-bar.js.map +1 -1
- package/dist/esm/utils/is-input-element.d.ts +3 -0
- package/dist/esm/utils/is-input-element.d.ts.map +1 -0
- package/dist/esm/utils/is-input-element.js +9 -0
- package/dist/esm/utils/is-input-element.js.map +1 -0
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/command-bar/command-bar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"command-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/command-bar/command-bar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,UAAU,eAAgB,SAAQ,KAAK,CAAC,iBAAiB;IACvD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAmHD,UAAU,YACR,SAAQ,IAAI,CACV,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EACxC,UAAU,GAAG,SAAS,CACvB;IACD,MAAM,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB;AA2ED,QAAA,MAAM,UAAU;uEA/Kb,eAAe;;;;;;;CAoLhB,CAAA;AAEF,OAAO,EAAE,UAAU,EAAE,CAAA"}
|
|
@@ -7,6 +7,7 @@ const radix_ui_1 = require("radix-ui");
|
|
|
7
7
|
const React = tslib_1.__importStar(require("react"));
|
|
8
8
|
const kbd_1 = require("../kbd");
|
|
9
9
|
const clx_1 = require("../../utils/clx");
|
|
10
|
+
const is_input_element_1 = require("../../utils/is-input-element");
|
|
10
11
|
/**
|
|
11
12
|
* The root component of the command bar. This component manages the state of the command bar.
|
|
12
13
|
*/
|
|
@@ -82,6 +83,9 @@ action,
|
|
|
82
83
|
shortcut, disabled, ...props }, ref) => {
|
|
83
84
|
React.useEffect(() => {
|
|
84
85
|
const handleKeyDown = (event) => {
|
|
86
|
+
if ((0, is_input_element_1.isInputElement)(document.activeElement)) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
85
89
|
if (event.key.toLowerCase() === shortcut.toLowerCase()) {
|
|
86
90
|
event.preventDefault();
|
|
87
91
|
event.stopPropagation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-bar.js","sourceRoot":"","sources":["../../../../src/components/command-bar/command-bar.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,uCAA0C;AAC1C,qDAA8B;AAE9B,0CAAsC;AACtC,qCAAiC;
|
|
1
|
+
{"version":3,"file":"command-bar.js","sourceRoot":"","sources":["../../../../src/components/command-bar/command-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { Popover, Portal } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { Kbd } from \"@/components/kbd\"\nimport { clx } from \"@/utils/clx\"\nimport { isInputElement } from \"@/utils/is-input-element\"\n\ninterface CommandBarProps extends React.PropsWithChildren {\n open?: boolean\n onOpenChange?: (open: boolean) => void\n defaultOpen?: boolean\n disableAutoFocus?: boolean\n}\n\n/**\n * The root component of the command bar. This component manages the state of the command bar.\n */\nconst Root = ({\n /**\n * Whether to open (show) the command bar.\n */\n open = false,\n /**\n * Specify a function to handle the change of `open`'s value.\n */\n onOpenChange,\n /**\n * Whether the command bar is open by default.\n */\n defaultOpen = false,\n /**\n * Whether to disable focusing automatically on the command bar when it's opened.\n */\n disableAutoFocus = true,\n children,\n}: CommandBarProps) => {\n return (\n <Popover.Root\n open={open}\n onOpenChange={onOpenChange}\n defaultOpen={defaultOpen}\n >\n <Portal.Root>\n <Popover.Anchor\n className={clx(\"fixed bottom-8 left-1/2 h-px w-px -translate-x-1/2\")}\n />\n </Portal.Root>\n <Popover.Portal>\n <Popover.Content\n side=\"top\"\n sideOffset={0}\n onOpenAutoFocus={(e) => {\n if (disableAutoFocus) {\n e.preventDefault()\n }\n }}\n className={clx(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n )}\n >\n {children}\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n )\n}\nRoot.displayName = \"CommandBar\"\n\n/**\n * The value component of the command bar. This component is used to display a value,\n * such as the number of selected items which the commands will act on.\n */\nconst Value = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={clx(\n \"txt-compact-small-plus text-ui-contrast-fg-secondary px-3 py-2.5\",\n className\n )}\n {...props}\n />\n )\n})\nValue.displayName = \"CommandBar.Value\"\n\n/**\n * The bar component of the command bar. This component is used to display the commands.\n */\nconst Bar = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={clx(\n \"bg-ui-contrast-bg-base relative flex items-center overflow-hidden rounded-full px-1\",\n \"after:shadow-elevation-flyout after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:content-['']\",\n className\n )}\n {...props}\n />\n )\n})\nBar.displayName = \"CommandBar.Bar\"\n\n/**\n * The seperator component of the command bar. This component is used to display a seperator between commands.\n */\nconst Seperator = React.forwardRef<\n HTMLDivElement,\n Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">\n>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={clx(\"bg-ui-contrast-border-base h-10 w-px\", className)}\n {...props}\n />\n )\n})\nSeperator.displayName = \"CommandBar.Seperator\"\n\ninterface CommandProps\n extends Omit<\n React.ComponentPropsWithoutRef<\"button\">,\n \"children\" | \"onClick\"\n > {\n action: () => void | Promise<void>\n label: string\n shortcut: string\n}\n\n/**\n * The command component of the command bar. This component is used to display a command, as well as registering the keyboad shortcut.\n */\nconst Command = React.forwardRef<HTMLButtonElement, CommandProps>(\n (\n {\n className,\n /**\n * @ignore\n */\n type = \"button\",\n /**\n * The command's label.\n */\n label,\n /**\n * The function to execute when the command is triggered.\n */\n action,\n /**\n * The command's shortcut\n */\n shortcut,\n disabled,\n ...props\n }: CommandProps,\n ref\n ) => {\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (isInputElement(document.activeElement)) {\n return\n }\n\n if (event.key.toLowerCase() === shortcut.toLowerCase()) {\n event.preventDefault()\n event.stopPropagation()\n action()\n }\n }\n\n if (!disabled) {\n document.addEventListener(\"keydown\", handleKeyDown)\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown)\n }\n }, [action, shortcut, disabled])\n\n return (\n <button\n ref={ref}\n className={clx(\n \"bg-ui-contrast-bg-base txt-compact-small-plus transition-fg text-ui-contrast-fg-primary flex items-center gap-x-2 px-3 py-2.5 outline-none\",\n \"focus-visible:bg-ui-contrast-bg-highlight focus-visible:hover:bg-ui-contrast-bg-base-hover hover:bg-ui-contrast-bg-base-hover active:bg-ui-contrast-bg-base-pressed focus-visible:active:bg-ui-contrast-bg-base-pressed disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled\",\n \"last-of-type:-mr-1 last-of-type:pr-4\",\n className\n )}\n type={type}\n onClick={action}\n {...props}\n >\n <span>{label}</span>\n <Kbd className=\"bg-ui-contrast-bg-subtle border-ui-contrast-border-base text-ui-contrast-fg-secondary\">\n {shortcut.toUpperCase()}\n </Kbd>\n </button>\n )\n }\n)\nCommand.displayName = \"CommandBar.Command\"\n\nconst CommandBar = Object.assign(Root, {\n Command,\n Value,\n Bar,\n Seperator,\n})\n\nexport { CommandBar }\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"is-input-element.d.ts","sourceRoot":"","sources":["../../../src/utils/is-input-element.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,cAAc,YAAa,OAAO,GAAG,IAAI,KAAG,OAQjD,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.isInputElement = void 0;
|
|
4
|
+
const isInputElement = (element) => {
|
|
5
|
+
return (element instanceof HTMLElement &&
|
|
6
|
+
(element.isContentEditable ||
|
|
7
|
+
element.tagName === "INPUT" ||
|
|
8
|
+
element.tagName === "TEXTAREA" ||
|
|
9
|
+
element.tagName === "SELECT"));
|
|
10
|
+
};
|
|
11
|
+
exports.isInputElement = isInputElement;
|
|
12
|
+
//# sourceMappingURL=is-input-element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"is-input-element.js","sourceRoot":"","sources":["../../../src/utils/is-input-element.ts"],"names":[],"mappings":";;;AAAA,MAAM,cAAc,GAAG,CAAC,OAAuB,EAAW,EAAE;IAC1D,OAAO,CACL,OAAO,YAAY,WAAW;QAC9B,CAAC,OAAO,CAAC,iBAAiB;YACxB,OAAO,CAAC,OAAO,KAAK,OAAO;YAC3B,OAAO,CAAC,OAAO,KAAK,UAAU;YAC9B,OAAO,CAAC,OAAO,KAAK,QAAQ,CAAC,CAChC,CAAA;AACH,CAAC,CAAA;AAEQ,wCAAc","sourcesContent":["const isInputElement = (element: Element | null): boolean => {\n return (\n element instanceof HTMLElement &&\n (element.isContentEditable ||\n element.tagName === \"INPUT\" ||\n element.tagName === \"TEXTAREA\" ||\n element.tagName === \"SELECT\")\n )\n}\n\nexport { isInputElement }\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/command-bar/command-bar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"command-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/command-bar/command-bar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,UAAU,eAAgB,SAAQ,KAAK,CAAC,iBAAiB;IACvD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAmHD,UAAU,YACR,SAAQ,IAAI,CACV,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EACxC,UAAU,GAAG,SAAS,CACvB;IACD,MAAM,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB;AA2ED,QAAA,MAAM,UAAU;uEA/Kb,eAAe;;;;;;;CAoLhB,CAAA;AAEF,OAAO,EAAE,UAAU,EAAE,CAAA"}
|
|
@@ -3,6 +3,7 @@ import { Popover, Portal } from "radix-ui";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { Kbd } from "../kbd";
|
|
5
5
|
import { clx } from "../../utils/clx";
|
|
6
|
+
import { isInputElement } from "../../utils/is-input-element";
|
|
6
7
|
/**
|
|
7
8
|
* The root component of the command bar. This component manages the state of the command bar.
|
|
8
9
|
*/
|
|
@@ -78,6 +79,9 @@ action,
|
|
|
78
79
|
shortcut, disabled, ...props }, ref) => {
|
|
79
80
|
React.useEffect(() => {
|
|
80
81
|
const handleKeyDown = (event) => {
|
|
82
|
+
if (isInputElement(document.activeElement)) {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
81
85
|
if (event.key.toLowerCase() === shortcut.toLowerCase()) {
|
|
82
86
|
event.preventDefault();
|
|
83
87
|
event.stopPropagation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-bar.js","sourceRoot":"","sources":["../../../../src/components/command-bar/command-bar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAC1C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"command-bar.js","sourceRoot":"","sources":["../../../../src/components/command-bar/command-bar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAC1C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AASzD;;GAEG;AACH,MAAM,IAAI,GAAG,CAAC;AACZ;;GAEG;AACH,IAAI,GAAG,KAAK;AACZ;;GAEG;AACH,YAAY;AACZ;;GAEG;AACH,WAAW,GAAG,KAAK;AACnB;;GAEG;AACH,gBAAgB,GAAG,IAAI,EACvB,QAAQ,GACQ,EAAE,EAAE;IACpB,OAAO,CACL,oBAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW;QAExB,oBAAC,MAAM,CAAC,IAAI;YACV,oBAAC,OAAO,CAAC,MAAM,IACb,SAAS,EAAE,GAAG,CAAC,oDAAoD,CAAC,GACpE,CACU;QACd,oBAAC,OAAO,CAAC,MAAM;YACb,oBAAC,OAAO,CAAC,OAAO,IACd,IAAI,EAAC,KAAK,EACV,UAAU,EAAE,CAAC,EACb,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;oBACrB,IAAI,gBAAgB,EAAE,CAAC;wBACrB,CAAC,CAAC,cAAc,EAAE,CAAA;oBACpB,CAAC;gBACH,CAAC,EACD,SAAS,EAAE,GAAG,CACZ,kVAAkV,CACnV,IAEA,QAAQ,CACO,CACH,CACJ,CAChB,CAAA;AACH,CAAC,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,YAAY,CAAA;AAE/B;;;GAGG;AACH,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAG5B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,GAAG,CACZ,kEAAkE,EAClE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AACF,KAAK,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEtC;;GAEG;AACH,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAG1B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,GAAG,CACZ,qFAAqF,EACrF,4HAA4H,EAC5H,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AACF,GAAG,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAElC;;GAEG;AACH,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,GAAG,CAAC,sCAAsC,EAAE,SAAS,CAAC,KAC7D,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AACF,SAAS,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAY9C;;GAEG;AACH,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAC9B,CACE,EACE,SAAS;AACT;;GAEG;AACH,IAAI,GAAG,QAAQ;AACf;;GAEG;AACH,KAAK;AACL;;GAEG;AACH,MAAM;AACN;;GAEG;AACH,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACK,EACf,GAAG,EACH,EAAE;IACF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC7C,IAAI,cAAc,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;gBAC3C,OAAM;YACR,CAAC;YAED,IAAI,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,QAAQ,CAAC,WAAW,EAAE,EAAE,CAAC;gBACvD,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,KAAK,CAAC,eAAe,EAAE,CAAA;gBACvB,MAAM,EAAE,CAAA;YACV,CAAC;QACH,CAAC,CAAA;QAED,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;QACrD,CAAC;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;QACxD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEhC,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,GAAG,CACZ,4IAA4I,EAC5I,mRAAmR,EACnR,sCAAsC,EACtC,SAAS,CACV,EACD,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,MAAM,KACX,KAAK;QAET,kCAAO,KAAK,CAAQ;QACpB,oBAAC,GAAG,IAAC,SAAS,EAAC,uFAAuF,IACnG,QAAQ,CAAC,WAAW,EAAE,CACnB,CACC,CACV,CAAA;AACH,CAAC,CACF,CAAA;AACD,OAAO,CAAC,WAAW,GAAG,oBAAoB,CAAA;AAE1C,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;IACrC,OAAO;IACP,KAAK;IACL,GAAG;IACH,SAAS;CACV,CAAC,CAAA;AAEF,OAAO,EAAE,UAAU,EAAE,CAAA","sourcesContent":["\"use client\"\n\nimport { Popover, Portal } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { Kbd } from \"@/components/kbd\"\nimport { clx } from \"@/utils/clx\"\nimport { isInputElement } from \"@/utils/is-input-element\"\n\ninterface CommandBarProps extends React.PropsWithChildren {\n open?: boolean\n onOpenChange?: (open: boolean) => void\n defaultOpen?: boolean\n disableAutoFocus?: boolean\n}\n\n/**\n * The root component of the command bar. This component manages the state of the command bar.\n */\nconst Root = ({\n /**\n * Whether to open (show) the command bar.\n */\n open = false,\n /**\n * Specify a function to handle the change of `open`'s value.\n */\n onOpenChange,\n /**\n * Whether the command bar is open by default.\n */\n defaultOpen = false,\n /**\n * Whether to disable focusing automatically on the command bar when it's opened.\n */\n disableAutoFocus = true,\n children,\n}: CommandBarProps) => {\n return (\n <Popover.Root\n open={open}\n onOpenChange={onOpenChange}\n defaultOpen={defaultOpen}\n >\n <Portal.Root>\n <Popover.Anchor\n className={clx(\"fixed bottom-8 left-1/2 h-px w-px -translate-x-1/2\")}\n />\n </Portal.Root>\n <Popover.Portal>\n <Popover.Content\n side=\"top\"\n sideOffset={0}\n onOpenAutoFocus={(e) => {\n if (disableAutoFocus) {\n e.preventDefault()\n }\n }}\n className={clx(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n )}\n >\n {children}\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n )\n}\nRoot.displayName = \"CommandBar\"\n\n/**\n * The value component of the command bar. This component is used to display a value,\n * such as the number of selected items which the commands will act on.\n */\nconst Value = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={clx(\n \"txt-compact-small-plus text-ui-contrast-fg-secondary px-3 py-2.5\",\n className\n )}\n {...props}\n />\n )\n})\nValue.displayName = \"CommandBar.Value\"\n\n/**\n * The bar component of the command bar. This component is used to display the commands.\n */\nconst Bar = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={clx(\n \"bg-ui-contrast-bg-base relative flex items-center overflow-hidden rounded-full px-1\",\n \"after:shadow-elevation-flyout after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:content-['']\",\n className\n )}\n {...props}\n />\n )\n})\nBar.displayName = \"CommandBar.Bar\"\n\n/**\n * The seperator component of the command bar. This component is used to display a seperator between commands.\n */\nconst Seperator = React.forwardRef<\n HTMLDivElement,\n Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">\n>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={clx(\"bg-ui-contrast-border-base h-10 w-px\", className)}\n {...props}\n />\n )\n})\nSeperator.displayName = \"CommandBar.Seperator\"\n\ninterface CommandProps\n extends Omit<\n React.ComponentPropsWithoutRef<\"button\">,\n \"children\" | \"onClick\"\n > {\n action: () => void | Promise<void>\n label: string\n shortcut: string\n}\n\n/**\n * The command component of the command bar. This component is used to display a command, as well as registering the keyboad shortcut.\n */\nconst Command = React.forwardRef<HTMLButtonElement, CommandProps>(\n (\n {\n className,\n /**\n * @ignore\n */\n type = \"button\",\n /**\n * The command's label.\n */\n label,\n /**\n * The function to execute when the command is triggered.\n */\n action,\n /**\n * The command's shortcut\n */\n shortcut,\n disabled,\n ...props\n }: CommandProps,\n ref\n ) => {\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (isInputElement(document.activeElement)) {\n return\n }\n\n if (event.key.toLowerCase() === shortcut.toLowerCase()) {\n event.preventDefault()\n event.stopPropagation()\n action()\n }\n }\n\n if (!disabled) {\n document.addEventListener(\"keydown\", handleKeyDown)\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown)\n }\n }, [action, shortcut, disabled])\n\n return (\n <button\n ref={ref}\n className={clx(\n \"bg-ui-contrast-bg-base txt-compact-small-plus transition-fg text-ui-contrast-fg-primary flex items-center gap-x-2 px-3 py-2.5 outline-none\",\n \"focus-visible:bg-ui-contrast-bg-highlight focus-visible:hover:bg-ui-contrast-bg-base-hover hover:bg-ui-contrast-bg-base-hover active:bg-ui-contrast-bg-base-pressed focus-visible:active:bg-ui-contrast-bg-base-pressed disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled\",\n \"last-of-type:-mr-1 last-of-type:pr-4\",\n className\n )}\n type={type}\n onClick={action}\n {...props}\n >\n <span>{label}</span>\n <Kbd className=\"bg-ui-contrast-bg-subtle border-ui-contrast-border-base text-ui-contrast-fg-secondary\">\n {shortcut.toUpperCase()}\n </Kbd>\n </button>\n )\n }\n)\nCommand.displayName = \"CommandBar.Command\"\n\nconst CommandBar = Object.assign(Root, {\n Command,\n Value,\n Bar,\n Seperator,\n})\n\nexport { CommandBar }\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"is-input-element.d.ts","sourceRoot":"","sources":["../../../src/utils/is-input-element.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,cAAc,YAAa,OAAO,GAAG,IAAI,KAAG,OAQjD,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const isInputElement = (element) => {
|
|
2
|
+
return (element instanceof HTMLElement &&
|
|
3
|
+
(element.isContentEditable ||
|
|
4
|
+
element.tagName === "INPUT" ||
|
|
5
|
+
element.tagName === "TEXTAREA" ||
|
|
6
|
+
element.tagName === "SELECT"));
|
|
7
|
+
};
|
|
8
|
+
export { isInputElement };
|
|
9
|
+
//# sourceMappingURL=is-input-element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"is-input-element.js","sourceRoot":"","sources":["../../../src/utils/is-input-element.ts"],"names":[],"mappings":"AAAA,MAAM,cAAc,GAAG,CAAC,OAAuB,EAAW,EAAE;IAC1D,OAAO,CACL,OAAO,YAAY,WAAW;QAC9B,CAAC,OAAO,CAAC,iBAAiB;YACxB,OAAO,CAAC,OAAO,KAAK,OAAO;YAC3B,OAAO,CAAC,OAAO,KAAK,UAAU;YAC9B,OAAO,CAAC,OAAO,KAAK,QAAQ,CAAC,CAChC,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA","sourcesContent":["const isInputElement = (element: Element | null): boolean => {\n return (\n element instanceof HTMLElement &&\n (element.isContentEditable ||\n element.tagName === \"INPUT\" ||\n element.tagName === \"TEXTAREA\" ||\n element.tagName === \"SELECT\")\n )\n}\n\nexport { isInputElement }\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@medusajs/ui",
|
|
3
|
-
"version": "4.0.5-snapshot-
|
|
3
|
+
"version": "4.0.5-snapshot-20250204160259",
|
|
4
4
|
"author": "Kasper Kristensen <kasper@medusajs.com>",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@faker-js/faker": "^9.2.0",
|
|
46
|
-
"@medusajs/ui-preset": "2.4.1-snapshot-
|
|
46
|
+
"@medusajs/ui-preset": "2.4.1-snapshot-20250204160259",
|
|
47
47
|
"@storybook/addon-essentials": "^8.3.5",
|
|
48
48
|
"@storybook/addon-interactions": "^8.3.5",
|
|
49
49
|
"@storybook/addon-links": "^8.3.5",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"vitest": "^0.32.2"
|
|
82
82
|
},
|
|
83
83
|
"dependencies": {
|
|
84
|
-
"@medusajs/icons": "2.4.1-snapshot-
|
|
84
|
+
"@medusajs/icons": "2.4.1-snapshot-20250204160259",
|
|
85
85
|
"@tanstack/react-table": "8.20.5",
|
|
86
86
|
"clsx": "^1.2.1",
|
|
87
87
|
"copy-to-clipboard": "^3.3.3",
|