@apipass/design-system 1.19.0 → 1.20.0
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/lib/embedded-styles.js +1 -1
- package/dist/lib/lib.index.cjs +1 -1
- package/dist/lib/lib.index.js +770 -766
- package/dist/lib/lib.index.js.map +1 -1
- package/dist/lib/style.css +1 -1
- package/dist/lib/ui/components/Widget/Widget.cjs +1 -1
- package/dist/lib/ui/components/Widget/Widget.cjs.map +1 -1
- package/dist/lib/ui/components/Widget/Widget.js +12 -12
- package/dist/lib/ui/components/Widget/Widget.js.map +1 -1
- package/dist/lib/ui/components/WidgetGrid/WidgetGrid.cjs +1 -1
- package/dist/lib/ui/components/WidgetGrid/WidgetGrid.cjs.map +1 -1
- package/dist/lib/ui/components/WidgetGrid/WidgetGrid.js +40 -26
- package/dist/lib/ui/components/WidgetGrid/WidgetGrid.js.map +1 -1
- package/dist/lib/ui/primitives/ComboBox/ComboBox.cjs +2 -0
- package/dist/lib/ui/primitives/ComboBox/ComboBox.cjs.map +1 -0
- package/dist/lib/ui/primitives/ComboBox/ComboBox.js +58 -0
- package/dist/lib/ui/primitives/ComboBox/ComboBox.js.map +1 -0
- package/dist/lib/ui/primitives/DateRangePicker/DateRangePicker.cjs +1 -1
- package/dist/lib/ui/primitives/DateRangePicker/DateRangePicker.js +17 -17
- package/dist/lib/ui/primitives/Search/Search.cjs +1 -1
- package/dist/lib/ui/primitives/Search/Search.js +8 -8
- package/dist/types/ui/components/Widget/Widget.d.ts +11 -8
- package/dist/types/ui/components/WidgetGrid/WidgetGrid.d.ts +3 -1
- package/dist/types/ui/primitives/ComboBox/ComboBox.d.ts +12 -0
- package/dist/types/ui/primitives/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../vendor/clsx/dist/clsx.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../vendor/clsx/dist/clsx.cjs"),l=require("react");;/* empty css */const g=require("../../primitives/Tooltip/Tooltip.cjs"),u=require("../../icons/IconInfo.cjs"),h=require("../../primitives/IconButton/IconButton.cjs"),m=l.forwardRef(function({title:i,description:t,descriptionButtonLabel:r,headerActions:s,children:n,className:a,...c},d){return e.jsxs("div",{ref:d,className:o.clsx("widget",a),...c,children:[e.jsxs("div",{className:"widget-header widget-drag-handle",children:[e.jsxs("span",{className:"widget-header-title-group",children:[e.jsx("span",{className:"widget-header-title",children:i}),t&&e.jsx(g.Tooltip,{content:t,placement:"bottom",offset:4,children:e.jsx(h.IconButton,{"aria-label":r,variant:"subtle",size:"small",className:"widget-header-description-trigger",children:e.jsx(u.IconInfo,{size:"14"})})})]}),s&&e.jsx("div",{className:"widget-header-actions",children:s})]}),e.jsx("div",{className:"widget-body",children:n})]})});exports.Widget=m;
|
|
2
2
|
//# sourceMappingURL=Widget.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Widget.cjs","sources":["../../../../../src/ui/components/Widget/Widget.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, type ReactNode, forwardRef } from \"react\";\nimport { IconInfo } from \"icons\";\nimport { IconButton, Tooltip } from \"primitives\";\nimport \"./widget.css\";\n\nexport type WidgetProps = ComponentPropsWithoutRef<\"div\"> & {\n
|
|
1
|
+
{"version":3,"file":"Widget.cjs","sources":["../../../../../src/ui/components/Widget/Widget.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, type ReactNode, forwardRef } from \"react\";\nimport { IconInfo } from \"icons\";\nimport { IconButton, Tooltip } from \"primitives\";\nimport \"./widget.css\";\n\ntype WidgetDescriptionProps =\n | { description?: undefined; descriptionButtonLabel?: undefined }\n | { description: ReactNode; descriptionButtonLabel: string };\n\nexport type WidgetProps = Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> &\n WidgetDescriptionProps & {\n title: ReactNode;\n headerActions?: ReactNode;\n };\n\nexport const Widget = forwardRef<HTMLDivElement, WidgetProps>(function Widget(\n { title, description, descriptionButtonLabel, headerActions, children, className, ...props },\n ref,\n) {\n return (\n <div ref={ref} className={clsx(\"widget\", className)} {...props}>\n <div className=\"widget-header widget-drag-handle\">\n <span className=\"widget-header-title-group\">\n <span className=\"widget-header-title\">{title}</span>\n {description && (\n <Tooltip content={description} placement=\"bottom\" offset={4}>\n <IconButton\n aria-label={descriptionButtonLabel}\n variant=\"subtle\"\n size=\"small\"\n className=\"widget-header-description-trigger\"\n >\n <IconInfo size=\"14\" />\n </IconButton>\n </Tooltip>\n )}\n </span>\n {headerActions && <div className=\"widget-header-actions\">{headerActions}</div>}\n </div>\n <div className=\"widget-body\">{children}</div>\n </div>\n );\n});\n"],"names":["Widget","forwardRef","title","description","descriptionButtonLabel","headerActions","children","className","props","ref","jsxs","clsx","jsx","Tooltip","IconButton","IconInfo"],"mappings":"0WAgBaA,EAASC,EAAAA,WAAwC,SAC5D,CAAE,MAAAC,EAAO,YAAAC,EAAa,uBAAAC,EAAwB,cAAAC,EAAe,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAA,EACrFC,EACA,CACA,OACEC,OAAC,OAAI,IAAAD,EAAU,UAAWE,OAAK,SAAUJ,CAAS,EAAI,GAAGC,EACvD,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAU,mCACb,SAAA,CAAAA,EAAAA,KAAC,OAAA,CAAK,UAAU,4BACd,SAAA,CAAAE,EAAAA,IAAC,OAAA,CAAK,UAAU,sBAAuB,SAAAV,EAAM,EAC5CC,SACEU,UAAA,CAAQ,QAASV,EAAa,UAAU,SAAS,OAAQ,EACxD,SAAAS,EAAAA,IAACE,EAAAA,WAAA,CACC,aAAYV,EACZ,QAAQ,SACR,KAAK,QACL,UAAU,oCAEV,SAAAQ,EAAAA,IAACG,EAAAA,SAAA,CAAS,KAAK,IAAA,CAAK,CAAA,CAAA,CACtB,CACF,CAAA,EAEJ,EACCV,GAAiBO,EAAAA,IAAC,MAAA,CAAI,UAAU,wBAAyB,SAAAP,CAAA,CAAc,CAAA,EAC1E,EACAO,EAAAA,IAAC,MAAA,CAAI,UAAU,cAAe,SAAAN,CAAA,CAAS,CAAA,EACzC,CAEJ,CAAC"}
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { clsx as
|
|
3
|
-
import { forwardRef as
|
|
2
|
+
import { clsx as n } from "../../../vendor/clsx/dist/clsx.js";
|
|
3
|
+
import { forwardRef as c } from "react";
|
|
4
4
|
/* empty css */
|
|
5
|
-
import { Tooltip as
|
|
6
|
-
import { IconInfo as
|
|
5
|
+
import { Tooltip as g } from "../../primitives/Tooltip/Tooltip.js";
|
|
6
|
+
import { IconInfo as p } from "../../icons/IconInfo.js";
|
|
7
7
|
import { IconButton as f } from "../../primitives/IconButton/IconButton.js";
|
|
8
|
-
const
|
|
9
|
-
return /* @__PURE__ */ i("div", { ref:
|
|
8
|
+
const j = c(function({ title: a, description: t, descriptionButtonLabel: d, headerActions: r, children: o, className: s, ...l }, m) {
|
|
9
|
+
return /* @__PURE__ */ i("div", { ref: m, className: n("widget", s), ...l, children: [
|
|
10
10
|
/* @__PURE__ */ i("div", { className: "widget-header widget-drag-handle", children: [
|
|
11
11
|
/* @__PURE__ */ i("span", { className: "widget-header-title-group", children: [
|
|
12
|
-
/* @__PURE__ */ e("span", { className: "widget-header-title", children:
|
|
13
|
-
t && /* @__PURE__ */ e(
|
|
12
|
+
/* @__PURE__ */ e("span", { className: "widget-header-title", children: a }),
|
|
13
|
+
t && /* @__PURE__ */ e(g, { content: t, placement: "bottom", offset: 4, children: /* @__PURE__ */ e(
|
|
14
14
|
f,
|
|
15
15
|
{
|
|
16
|
-
"aria-label":
|
|
16
|
+
"aria-label": d,
|
|
17
17
|
variant: "subtle",
|
|
18
18
|
size: "small",
|
|
19
19
|
className: "widget-header-description-trigger",
|
|
20
|
-
children: /* @__PURE__ */ e(
|
|
20
|
+
children: /* @__PURE__ */ e(p, { size: "14" })
|
|
21
21
|
}
|
|
22
22
|
) })
|
|
23
23
|
] }),
|
|
24
|
-
|
|
24
|
+
r && /* @__PURE__ */ e("div", { className: "widget-header-actions", children: r })
|
|
25
25
|
] }),
|
|
26
26
|
/* @__PURE__ */ e("div", { className: "widget-body", children: o })
|
|
27
27
|
] });
|
|
28
28
|
});
|
|
29
29
|
export {
|
|
30
|
-
|
|
30
|
+
j as Widget
|
|
31
31
|
};
|
|
32
32
|
//# sourceMappingURL=Widget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Widget.js","sources":["../../../../../src/ui/components/Widget/Widget.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, type ReactNode, forwardRef } from \"react\";\nimport { IconInfo } from \"icons\";\nimport { IconButton, Tooltip } from \"primitives\";\nimport \"./widget.css\";\n\nexport type WidgetProps = ComponentPropsWithoutRef<\"div\"> & {\n
|
|
1
|
+
{"version":3,"file":"Widget.js","sources":["../../../../../src/ui/components/Widget/Widget.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, type ReactNode, forwardRef } from \"react\";\nimport { IconInfo } from \"icons\";\nimport { IconButton, Tooltip } from \"primitives\";\nimport \"./widget.css\";\n\ntype WidgetDescriptionProps =\n | { description?: undefined; descriptionButtonLabel?: undefined }\n | { description: ReactNode; descriptionButtonLabel: string };\n\nexport type WidgetProps = Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> &\n WidgetDescriptionProps & {\n title: ReactNode;\n headerActions?: ReactNode;\n };\n\nexport const Widget = forwardRef<HTMLDivElement, WidgetProps>(function Widget(\n { title, description, descriptionButtonLabel, headerActions, children, className, ...props },\n ref,\n) {\n return (\n <div ref={ref} className={clsx(\"widget\", className)} {...props}>\n <div className=\"widget-header widget-drag-handle\">\n <span className=\"widget-header-title-group\">\n <span className=\"widget-header-title\">{title}</span>\n {description && (\n <Tooltip content={description} placement=\"bottom\" offset={4}>\n <IconButton\n aria-label={descriptionButtonLabel}\n variant=\"subtle\"\n size=\"small\"\n className=\"widget-header-description-trigger\"\n >\n <IconInfo size=\"14\" />\n </IconButton>\n </Tooltip>\n )}\n </span>\n {headerActions && <div className=\"widget-header-actions\">{headerActions}</div>}\n </div>\n <div className=\"widget-body\">{children}</div>\n </div>\n );\n});\n"],"names":["Widget","forwardRef","title","description","descriptionButtonLabel","headerActions","children","className","props","ref","jsxs","clsx","jsx","Tooltip","IconButton","IconInfo"],"mappings":";;;;;;;AAgBO,MAAMA,IAASC,EAAwC,SAC5D,EAAE,OAAAC,GAAO,aAAAC,GAAa,wBAAAC,GAAwB,eAAAC,GAAe,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GACrFC,GACA;AACA,SACE,gBAAAC,EAAC,SAAI,KAAAD,GAAU,WAAWE,EAAK,UAAUJ,CAAS,GAAI,GAAGC,GACvD,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,6BACd,UAAA;AAAA,QAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,uBAAuB,UAAAV,GAAM;AAAA,QAC5CC,uBACEU,GAAA,EAAQ,SAASV,GAAa,WAAU,UAAS,QAAQ,GACxD,UAAA,gBAAAS;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,cAAYV;AAAA,YACZ,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YAEV,UAAA,gBAAAQ,EAACG,GAAA,EAAS,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA,EACtB,CACF;AAAA,MAAA,GAEJ;AAAA,MACCV,KAAiB,gBAAAO,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAP,EAAA,CAAc;AAAA,IAAA,GAC1E;AAAA,IACA,gBAAAO,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAN,EAAA,CAAS;AAAA,EAAA,GACzC;AAEJ,CAAC;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),T=require("../../../vendor/clsx/dist/clsx.cjs"),l=require("react"),c=require("../../../_virtual/index.cjs");;/* empty css */;/* empty css */;/* empty css */const _=c.WidthProvider(c),S=".widget-drag-handle",W=".widget-header-actions";function f({layout:g,onLayoutChange:r,cols:u=12,rowHeight:o=80,isEditable:s=!1,isDraggable:m,isResizable:E,className:q,style:R,children:b}){const x=g.map(({id:e,x:i,y:t,w:a,h:d})=>({i:e,x:i,y:t,w:a,h:d}));function D(e){r==null||r(e.map(({i,x:t,y:a,w:d,h:G})=>({id:i,x:t,y:a,w:d,h:G})))}return n.jsx(_,{className:T.clsx("widget-grid",q),style:R,layout:x,cols:u,rowHeight:o,isDraggable:m??s,isResizable:E??s,draggableHandle:S,draggableCancel:W,onLayoutChange:D,children:l.Children.map(b,e=>l.isValidElement(e)?n.jsx("div",{className:"widget-grid-item",children:e},e.key):e)})}exports.WidgetGrid=f;
|
|
2
2
|
//# sourceMappingURL=WidgetGrid.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WidgetGrid.cjs","sources":["../../../../../src/ui/components/WidgetGrid/WidgetGrid.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type CSSProperties, type ReactNode } from \"react\";\nimport GridLayout, { type Layout } from \"react-grid-layout\";\nimport \"react-grid-layout/css/styles.css\";\nimport \"react-resizable/css/styles.css\";\nimport \"./widgetgrid.css\";\n\nconst ResizableGridLayout = /* @__PURE__ */ GridLayout.WidthProvider(GridLayout);\n\nconst WIDGET_DRAG_HANDLE_SELECTOR = \".widget-drag-handle\";\nconst WIDGET_HEADER_ACTIONS_SELECTOR = \".widget-header-actions\";\n\nexport interface WidgetLayoutItem {\n id: string;\n x: number;\n y: number;\n w: number;\n h: number;\n}\n\nexport interface WidgetGridProps {\n layout: WidgetLayoutItem[];\n onLayoutChange?: (layout: WidgetLayoutItem[]) => void;\n cols?: number;\n rowHeight?: number;\n isEditable?: boolean;\n className?: string;\n style?: CSSProperties;\n children: ReactNode;\n}\n\nexport function WidgetGrid({\n layout,\n onLayoutChange,\n cols = 12,\n rowHeight = 80,\n isEditable = false,\n className,\n style,\n children,\n}: WidgetGridProps) {\n const rglLayout: Layout[] = layout.map(({ id, x, y, w, h }) => ({ i: id, x, y, w, h }));\n\n function handleLayoutChange(nextLayout: Layout[]): void {\n onLayoutChange?.(nextLayout.map(({ i, x, y, w, h }) => ({ id: i, x, y, w, h })));\n }\n\n return (\n <ResizableGridLayout\n className={clsx(\"widget-grid\", className)}\n style={style}\n layout={rglLayout}\n cols={cols}\n rowHeight={rowHeight}\n isDraggable={isEditable}\n isResizable={isEditable}\n draggableHandle={WIDGET_DRAG_HANDLE_SELECTOR}\n draggableCancel={WIDGET_HEADER_ACTIONS_SELECTOR}\n onLayoutChange={handleLayoutChange}\n >\n {children}\n </ResizableGridLayout>\n );\n}\n"],"names":["ResizableGridLayout","GridLayout","WIDGET_DRAG_HANDLE_SELECTOR","WIDGET_HEADER_ACTIONS_SELECTOR","WidgetGrid","layout","onLayoutChange","cols","rowHeight","isEditable","className","style","children","rglLayout","id","x","y","w","h","handleLayoutChange","nextLayout","jsx","clsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"WidgetGrid.cjs","sources":["../../../../../src/ui/components/WidgetGrid/WidgetGrid.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Children, isValidElement, type CSSProperties, type ReactNode } from \"react\";\nimport GridLayout, { type Layout } from \"react-grid-layout\";\nimport \"react-grid-layout/css/styles.css\";\nimport \"react-resizable/css/styles.css\";\nimport \"./widgetgrid.css\";\n\nconst ResizableGridLayout = /* @__PURE__ */ GridLayout.WidthProvider(GridLayout);\n\nconst WIDGET_DRAG_HANDLE_SELECTOR = \".widget-drag-handle\";\nconst WIDGET_HEADER_ACTIONS_SELECTOR = \".widget-header-actions\";\n\nexport interface WidgetLayoutItem {\n id: string;\n x: number;\n y: number;\n w: number;\n h: number;\n}\n\nexport interface WidgetGridProps {\n layout: WidgetLayoutItem[];\n onLayoutChange?: (layout: WidgetLayoutItem[]) => void;\n cols?: number;\n rowHeight?: number;\n isEditable?: boolean;\n isDraggable?: boolean;\n isResizable?: boolean;\n className?: string;\n style?: CSSProperties;\n children: ReactNode;\n}\n\nexport function WidgetGrid({\n layout,\n onLayoutChange,\n cols = 12,\n rowHeight = 80,\n isEditable = false,\n isDraggable,\n isResizable,\n className,\n style,\n children,\n}: WidgetGridProps) {\n const rglLayout: Layout[] = layout.map(({ id, x, y, w, h }) => ({ i: id, x, y, w, h }));\n\n function handleLayoutChange(nextLayout: Layout[]): void {\n onLayoutChange?.(nextLayout.map(({ i, x, y, w, h }) => ({ id: i, x, y, w, h })));\n }\n\n return (\n <ResizableGridLayout\n className={clsx(\"widget-grid\", className)}\n style={style}\n layout={rglLayout}\n cols={cols}\n rowHeight={rowHeight}\n isDraggable={isDraggable ?? isEditable}\n isResizable={isResizable ?? isEditable}\n draggableHandle={WIDGET_DRAG_HANDLE_SELECTOR}\n draggableCancel={WIDGET_HEADER_ACTIONS_SELECTOR}\n onLayoutChange={handleLayoutChange}\n >\n {Children.map(children, (child) =>\n isValidElement(child) ? (\n // react-grid-layout clones this direct child to attach position styles and,\n // when resizable, appends the resize handle as one of its children. Widget\n // renders its own children inside .widget-body, so cloning Widget directly\n // would bury the handle there instead of at the item's edge. This wrapper\n // keeps Widget's markup untouched and gives react-grid-layout a plain node\n // to clone onto.\n <div key={child.key} className=\"widget-grid-item\">\n {child}\n </div>\n ) : (\n child\n ),\n )}\n </ResizableGridLayout>\n );\n}\n"],"names":["ResizableGridLayout","GridLayout","WIDGET_DRAG_HANDLE_SELECTOR","WIDGET_HEADER_ACTIONS_SELECTOR","WidgetGrid","layout","onLayoutChange","cols","rowHeight","isEditable","isDraggable","isResizable","className","style","children","rglLayout","id","x","y","w","h","handleLayoutChange","nextLayout","jsx","clsx","Children","child","isValidElement"],"mappings":"+XAOA,MAAMA,EAAsCC,EAAW,cAAcA,CAAU,EAEzEC,EAA8B,sBAC9BC,EAAiC,yBAuBhC,SAASC,EAAW,CACzB,OAAAC,EACA,eAAAC,EACA,KAAAC,EAAO,GACP,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,YAAAC,EACA,YAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,CACF,EAAoB,CAClB,MAAMC,EAAsBV,EAAO,IAAI,CAAC,CAAE,GAAAW,EAAI,EAAAC,EAAG,EAAAC,EAAG,EAAAC,EAAG,EAAAC,CAAA,KAAS,CAAE,EAAGJ,EAAI,EAAAC,EAAG,EAAAC,EAAG,EAAAC,EAAG,EAAAC,GAAI,EAEtF,SAASC,EAAmBC,EAA4B,CACtDhB,GAAA,MAAAA,EAAiBgB,EAAW,IAAI,CAAC,CAAE,EAAG,EAAAL,EAAG,EAAAC,EAAG,EAAAC,EAAG,EAAAC,CAAA,KAAS,CAAE,GAAI,EAAG,EAAAH,EAAG,EAAAC,EAAG,EAAAC,EAAG,EAAAC,CAAA,EAAI,EAChF,CAEA,OACEG,EAAAA,IAACvB,EAAA,CACC,UAAWwB,EAAAA,KAAK,cAAeZ,CAAS,EACxC,MAAAC,EACA,OAAQE,EACR,KAAAR,EACA,UAAAC,EACA,YAAaE,GAAeD,EAC5B,YAAaE,GAAeF,EAC5B,gBAAiBP,EACjB,gBAAiBC,EACjB,eAAgBkB,EAEf,SAAAI,EAAAA,SAAS,IAAIX,EAAWY,GACvBC,EAAAA,eAAeD,CAAK,QAOjB,MAAA,CAAoB,UAAU,mBAC5B,SAAAA,CAAA,EADOA,EAAM,GAEhB,EAEAA,CAAA,CAEJ,CAAA,CAGN"}
|
|
@@ -1,42 +1,56 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { clsx as
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { clsx as u } from "../../../vendor/clsx/dist/clsx.js";
|
|
3
|
+
import { Children as T, isValidElement as b } from "react";
|
|
3
4
|
import l from "../../../_virtual/index.js";
|
|
4
5
|
/* empty css */
|
|
5
6
|
/* empty css */
|
|
6
7
|
/* empty css */
|
|
7
|
-
const
|
|
8
|
-
function
|
|
8
|
+
const w = /* @__PURE__ */ l.WidthProvider(l), A = ".widget-drag-handle", L = ".widget-header-actions";
|
|
9
|
+
function O({
|
|
9
10
|
layout: s,
|
|
10
11
|
onLayoutChange: r,
|
|
11
|
-
cols:
|
|
12
|
-
rowHeight:
|
|
12
|
+
cols: g = 12,
|
|
13
|
+
rowHeight: n = 80,
|
|
13
14
|
isEditable: o = !1,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
isDraggable: p,
|
|
16
|
+
isResizable: c,
|
|
17
|
+
className: E,
|
|
18
|
+
style: f,
|
|
19
|
+
children: D
|
|
17
20
|
}) {
|
|
18
|
-
const
|
|
19
|
-
function
|
|
20
|
-
r == null || r(i.map(({ i:
|
|
21
|
+
const G = s.map(({ id: i, x: e, y: t, w: a, h: d }) => ({ i, x: e, y: t, w: a, h: d }));
|
|
22
|
+
function R(i) {
|
|
23
|
+
r == null || r(i.map(({ i: e, x: t, y: a, w: d, h: _ }) => ({ id: e, x: t, y: a, w: d, h: _ })));
|
|
21
24
|
}
|
|
22
|
-
return /* @__PURE__ */
|
|
23
|
-
|
|
25
|
+
return /* @__PURE__ */ m(
|
|
26
|
+
w,
|
|
24
27
|
{
|
|
25
|
-
className:
|
|
26
|
-
style:
|
|
27
|
-
layout:
|
|
28
|
-
cols:
|
|
29
|
-
rowHeight:
|
|
30
|
-
isDraggable: o,
|
|
31
|
-
isResizable: o,
|
|
32
|
-
draggableHandle:
|
|
33
|
-
draggableCancel:
|
|
34
|
-
onLayoutChange:
|
|
35
|
-
children:
|
|
28
|
+
className: u("widget-grid", E),
|
|
29
|
+
style: f,
|
|
30
|
+
layout: G,
|
|
31
|
+
cols: g,
|
|
32
|
+
rowHeight: n,
|
|
33
|
+
isDraggable: p ?? o,
|
|
34
|
+
isResizable: c ?? o,
|
|
35
|
+
draggableHandle: A,
|
|
36
|
+
draggableCancel: L,
|
|
37
|
+
onLayoutChange: R,
|
|
38
|
+
children: T.map(
|
|
39
|
+
D,
|
|
40
|
+
(i) => b(i) ? (
|
|
41
|
+
// react-grid-layout clones this direct child to attach position styles and,
|
|
42
|
+
// when resizable, appends the resize handle as one of its children. Widget
|
|
43
|
+
// renders its own children inside .widget-body, so cloning Widget directly
|
|
44
|
+
// would bury the handle there instead of at the item's edge. This wrapper
|
|
45
|
+
// keeps Widget's markup untouched and gives react-grid-layout a plain node
|
|
46
|
+
// to clone onto.
|
|
47
|
+
/* @__PURE__ */ m("div", { className: "widget-grid-item", children: i }, i.key)
|
|
48
|
+
) : i
|
|
49
|
+
)
|
|
36
50
|
}
|
|
37
51
|
);
|
|
38
52
|
}
|
|
39
53
|
export {
|
|
40
|
-
|
|
54
|
+
O as WidgetGrid
|
|
41
55
|
};
|
|
42
56
|
//# sourceMappingURL=WidgetGrid.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WidgetGrid.js","sources":["../../../../../src/ui/components/WidgetGrid/WidgetGrid.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type CSSProperties, type ReactNode } from \"react\";\nimport GridLayout, { type Layout } from \"react-grid-layout\";\nimport \"react-grid-layout/css/styles.css\";\nimport \"react-resizable/css/styles.css\";\nimport \"./widgetgrid.css\";\n\nconst ResizableGridLayout = /* @__PURE__ */ GridLayout.WidthProvider(GridLayout);\n\nconst WIDGET_DRAG_HANDLE_SELECTOR = \".widget-drag-handle\";\nconst WIDGET_HEADER_ACTIONS_SELECTOR = \".widget-header-actions\";\n\nexport interface WidgetLayoutItem {\n id: string;\n x: number;\n y: number;\n w: number;\n h: number;\n}\n\nexport interface WidgetGridProps {\n layout: WidgetLayoutItem[];\n onLayoutChange?: (layout: WidgetLayoutItem[]) => void;\n cols?: number;\n rowHeight?: number;\n isEditable?: boolean;\n className?: string;\n style?: CSSProperties;\n children: ReactNode;\n}\n\nexport function WidgetGrid({\n layout,\n onLayoutChange,\n cols = 12,\n rowHeight = 80,\n isEditable = false,\n className,\n style,\n children,\n}: WidgetGridProps) {\n const rglLayout: Layout[] = layout.map(({ id, x, y, w, h }) => ({ i: id, x, y, w, h }));\n\n function handleLayoutChange(nextLayout: Layout[]): void {\n onLayoutChange?.(nextLayout.map(({ i, x, y, w, h }) => ({ id: i, x, y, w, h })));\n }\n\n return (\n <ResizableGridLayout\n className={clsx(\"widget-grid\", className)}\n style={style}\n layout={rglLayout}\n cols={cols}\n rowHeight={rowHeight}\n isDraggable={isEditable}\n isResizable={isEditable}\n draggableHandle={WIDGET_DRAG_HANDLE_SELECTOR}\n draggableCancel={WIDGET_HEADER_ACTIONS_SELECTOR}\n onLayoutChange={handleLayoutChange}\n >\n {children}\n </ResizableGridLayout>\n );\n}\n"],"names":["ResizableGridLayout","GridLayout","WIDGET_DRAG_HANDLE_SELECTOR","WIDGET_HEADER_ACTIONS_SELECTOR","WidgetGrid","layout","onLayoutChange","cols","rowHeight","isEditable","className","style","children","rglLayout","id","x","y","w","h","handleLayoutChange","nextLayout","i","jsx","clsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"WidgetGrid.js","sources":["../../../../../src/ui/components/WidgetGrid/WidgetGrid.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Children, isValidElement, type CSSProperties, type ReactNode } from \"react\";\nimport GridLayout, { type Layout } from \"react-grid-layout\";\nimport \"react-grid-layout/css/styles.css\";\nimport \"react-resizable/css/styles.css\";\nimport \"./widgetgrid.css\";\n\nconst ResizableGridLayout = /* @__PURE__ */ GridLayout.WidthProvider(GridLayout);\n\nconst WIDGET_DRAG_HANDLE_SELECTOR = \".widget-drag-handle\";\nconst WIDGET_HEADER_ACTIONS_SELECTOR = \".widget-header-actions\";\n\nexport interface WidgetLayoutItem {\n id: string;\n x: number;\n y: number;\n w: number;\n h: number;\n}\n\nexport interface WidgetGridProps {\n layout: WidgetLayoutItem[];\n onLayoutChange?: (layout: WidgetLayoutItem[]) => void;\n cols?: number;\n rowHeight?: number;\n isEditable?: boolean;\n isDraggable?: boolean;\n isResizable?: boolean;\n className?: string;\n style?: CSSProperties;\n children: ReactNode;\n}\n\nexport function WidgetGrid({\n layout,\n onLayoutChange,\n cols = 12,\n rowHeight = 80,\n isEditable = false,\n isDraggable,\n isResizable,\n className,\n style,\n children,\n}: WidgetGridProps) {\n const rglLayout: Layout[] = layout.map(({ id, x, y, w, h }) => ({ i: id, x, y, w, h }));\n\n function handleLayoutChange(nextLayout: Layout[]): void {\n onLayoutChange?.(nextLayout.map(({ i, x, y, w, h }) => ({ id: i, x, y, w, h })));\n }\n\n return (\n <ResizableGridLayout\n className={clsx(\"widget-grid\", className)}\n style={style}\n layout={rglLayout}\n cols={cols}\n rowHeight={rowHeight}\n isDraggable={isDraggable ?? isEditable}\n isResizable={isResizable ?? isEditable}\n draggableHandle={WIDGET_DRAG_HANDLE_SELECTOR}\n draggableCancel={WIDGET_HEADER_ACTIONS_SELECTOR}\n onLayoutChange={handleLayoutChange}\n >\n {Children.map(children, (child) =>\n isValidElement(child) ? (\n // react-grid-layout clones this direct child to attach position styles and,\n // when resizable, appends the resize handle as one of its children. Widget\n // renders its own children inside .widget-body, so cloning Widget directly\n // would bury the handle there instead of at the item's edge. This wrapper\n // keeps Widget's markup untouched and gives react-grid-layout a plain node\n // to clone onto.\n <div key={child.key} className=\"widget-grid-item\">\n {child}\n </div>\n ) : (\n child\n ),\n )}\n </ResizableGridLayout>\n );\n}\n"],"names":["ResizableGridLayout","GridLayout","WIDGET_DRAG_HANDLE_SELECTOR","WIDGET_HEADER_ACTIONS_SELECTOR","WidgetGrid","layout","onLayoutChange","cols","rowHeight","isEditable","isDraggable","isResizable","className","style","children","rglLayout","id","x","y","w","h","handleLayoutChange","nextLayout","i","jsx","clsx","Children","child","isValidElement"],"mappings":";;;;;;;AAOA,MAAMA,IAAsC,gBAAAC,EAAW,cAAcA,CAAU,GAEzEC,IAA8B,uBAC9BC,IAAiC;AAuBhC,SAASC,EAAW;AAAA,EACzB,QAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,GAAoB;AAClB,QAAMC,IAAsBV,EAAO,IAAI,CAAC,EAAE,IAAAW,GAAI,GAAAC,GAAG,GAAAC,GAAG,GAAAC,GAAG,GAAAC,EAAA,OAAS,EAAEJ,GAAO,GAAAC,GAAG,GAAAC,GAAG,GAAAC,GAAG,GAAAC,IAAI;AAEtF,WAASC,EAAmBC,GAA4B;AACtD,IAAAhB,KAAA,QAAAA,EAAiBgB,EAAW,IAAI,CAAC,EAAE,GAAAC,GAAG,GAAAN,GAAG,GAAAC,GAAG,GAAAC,GAAG,GAAAC,EAAA,OAAS,EAAE,IAAIG,GAAG,GAAAN,GAAG,GAAAC,GAAG,GAAAC,GAAG,GAAAC,EAAA,EAAI;AAAA,EAChF;AAEA,SACE,gBAAAI;AAAA,IAACxB;AAAA,IAAA;AAAA,MACC,WAAWyB,EAAK,eAAeb,CAAS;AAAA,MACxC,OAAAC;AAAA,MACA,QAAQE;AAAA,MACR,MAAAR;AAAA,MACA,WAAAC;AAAA,MACA,aAAaE,KAAeD;AAAA,MAC5B,aAAaE,KAAeF;AAAA,MAC5B,iBAAiBP;AAAA,MACjB,iBAAiBC;AAAA,MACjB,gBAAgBkB;AAAA,MAEf,UAAAK,EAAS;AAAA,QAAIZ;AAAA,QAAU,CAACa,MACvBC,EAAeD,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOjB,OAAA,EAAoB,WAAU,oBAC5B,UAAAA,EAAA,GADOA,EAAM,GAEhB;AAAA,YAEAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../../vendor/clsx/dist/clsx.cjs"),B=require("react"),n=require("react-aria-components");;/* empty css */const c=require("../Fieldset/Fieldset.cjs"),C=require("../Input/Input.cjs"),f=require("../../icons/IconChevronDown.cjs"),l=require("../ListBox/ListBox.cjs"),q=require("../../icons/IconCheck.cjs");function I({className:o,label:r,description:s,errorMessage:t,placeholder:i,children:b,items:d,...j}){const h=m.clsx(o,"combobox-container"),x=B.useRef(null);return e.jsx(a,{className:h,...j,children:e.jsxs(c.Field,{children:[r&&e.jsx(c.Label,{children:r}),e.jsxs(n.Group,{className:"combobox",children:[e.jsx(C.Input,{className:"combobox-input",placeholder:i,onPointerDown:g=>{var u;document.activeElement===g.currentTarget&&((u=x.current)==null||u.click())}}),e.jsx(n.Button,{ref:x,className:"combobox-trigger",children:e.jsx(f.IconChevronDown,{"aria-hidden":"true"})})]}),e.jsx(n.Popover,{children:e.jsx(l.ListBox,{items:d,children:b})}),s&&e.jsx(c.Description,{children:s}),e.jsx(c.FieldError,{children:t})]})})}function a({...o}){return e.jsx(n.ComboBox,{menuTrigger:"focus",...o})}function p({children:o,className:r,...s}){const t=m.clsx(r,"combobox-item"),i=typeof o=="string"?o:"";return e.jsx(l.ListBoxItem,{textValue:i,className:t,...s,children:e.jsxs(e.Fragment,{children:[e.jsx(q.IconCheck,{className:"combobox-item-check"}),o]})})}exports.ComboBox=a;exports.ComboBoxField=I;exports.ComboBoxItem=p;
|
|
2
|
+
//# sourceMappingURL=ComboBox.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboBox.cjs","sources":["../../../../../src/ui/primitives/ComboBox/ComboBox.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconCheck, IconChevronDown } from \"icons\";\nimport {\n Description,\n Field,\n FieldError,\n Input,\n ListBox,\n ListBoxItem,\n Label,\n SharedFieldProps,\n type ListBoxItemProps,\n} from \"primitives\";\nimport { useRef } from \"react\";\nimport {\n Button as RACButton,\n ComboBox as RACComboBox,\n Group as RACGroup,\n Popover as RACPopover,\n type ComboBoxProps as RACComboBoxProps,\n} from \"react-aria-components\";\nimport \"./combobox.css\";\n\nexport interface ComboBoxFieldProps<T extends object>\n extends Omit<ComboBoxProps<T>, \"children\">,\n SharedFieldProps {\n items?: Iterable<T>;\n children: React.ReactNode | ((item: T) => React.ReactNode);\n}\nexport function ComboBoxField<T extends object>({\n className,\n label,\n description,\n errorMessage,\n placeholder,\n children,\n items,\n ...props\n}: ComboBoxFieldProps<T>) {\n const classNames = clsx(className, \"combobox-container\");\n const triggerRef = useRef<HTMLButtonElement | null>(null);\n return (\n <ComboBox className={classNames} {...props}>\n <Field>\n {label && <Label>{label}</Label>}\n <RACGroup className=\"combobox\">\n <Input\n className=\"combobox-input\"\n placeholder={placeholder}\n onPointerDown={(event) => {\n if (document.activeElement === event.currentTarget) {\n triggerRef.current?.click();\n }\n }}\n />\n <RACButton ref={triggerRef} className=\"combobox-trigger\">\n <IconChevronDown aria-hidden=\"true\" />\n </RACButton>\n </RACGroup>\n <RACPopover>\n <ListBox items={items}>{children}</ListBox>\n </RACPopover>\n {description && <Description>{description}</Description>}\n <FieldError>{errorMessage}</FieldError>\n </Field>\n </ComboBox>\n );\n}\n\nexport type ComboBoxProps<T extends object> = RACComboBoxProps<T>;\nexport function ComboBox<T extends object>({ ...props }: ComboBoxProps<T>) {\n return <RACComboBox<T> menuTrigger=\"focus\" {...props} />;\n}\n\nexport type ComboBoxItemProps = ListBoxItemProps;\nexport function ComboBoxItem({ children, className, ...props }: ComboBoxItemProps) {\n const classNames = clsx(className, \"combobox-item\");\n const textValue = typeof children === \"string\" ? children : \"\";\n return (\n <ListBoxItem textValue={textValue} className={classNames} {...props}>\n <>\n <IconCheck className=\"combobox-item-check\" />\n {children}\n </>\n </ListBoxItem>\n );\n}\n"],"names":["ComboBoxField","className","label","description","errorMessage","placeholder","children","items","props","classNames","clsx","triggerRef","useRef","ComboBox","Field","jsx","Label","jsxs","RACGroup","Input","event","_a","RACButton","IconChevronDown","RACPopover","ListBox","Description","FieldError","RACComboBox","ComboBoxItem","textValue","ListBoxItem","Fragment","IconCheck"],"mappings":"6bA6BO,SAASA,EAAgC,CAC9C,UAAAC,EACA,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EAA0B,CACxB,MAAMC,EAAaC,EAAAA,KAAKT,EAAW,oBAAoB,EACjDU,EAAaC,EAAAA,OAAiC,IAAI,EACxD,aACGC,EAAA,CAAS,UAAWJ,EAAa,GAAGD,EACnC,gBAACM,EAAAA,MAAA,CACE,SAAA,CAAAZ,GAASa,EAAAA,IAACC,EAAAA,OAAO,SAAAd,CAAA,CAAM,EACxBe,EAAAA,KAACC,EAAAA,MAAA,CAAS,UAAU,WAClB,SAAA,CAAAH,EAAAA,IAACI,EAAAA,MAAA,CACC,UAAU,iBACV,YAAAd,EACA,cAAgBe,GAAU,OACpB,SAAS,gBAAkBA,EAAM,iBACnCC,EAAAV,EAAW,UAAX,MAAAU,EAAoB,QAExB,CAAA,CAAA,EAEFN,EAAAA,IAACO,EAAAA,OAAA,CAAU,IAAKX,EAAY,UAAU,mBACpC,SAAAI,EAAAA,IAACQ,EAAAA,gBAAA,CAAgB,cAAY,MAAA,CAAO,CAAA,CACtC,CAAA,EACF,QACCC,EAAAA,QAAA,CACC,SAAAT,EAAAA,IAACU,EAAAA,QAAA,CAAQ,MAAAlB,EAAe,SAAAD,EAAS,EACnC,EACCH,GAAeY,EAAAA,IAACW,EAAAA,YAAA,CAAa,SAAAvB,CAAA,CAAY,EAC1CY,EAAAA,IAACY,EAAAA,YAAY,SAAAvB,CAAA,CAAa,CAAA,CAAA,CAC5B,CAAA,CACF,CAEJ,CAGO,SAASS,EAA2B,CAAE,GAAGL,GAA2B,CACzE,OAAOO,EAAAA,IAACa,EAAAA,SAAA,CAAe,YAAY,QAAS,GAAGpB,EAAO,CACxD,CAGO,SAASqB,EAAa,CAAE,SAAAvB,EAAU,UAAAL,EAAW,GAAGO,GAA4B,CACjF,MAAMC,EAAaC,EAAAA,KAAKT,EAAW,eAAe,EAC5C6B,EAAY,OAAOxB,GAAa,SAAWA,EAAW,GAC5D,aACGyB,EAAAA,YAAA,CAAY,UAAAD,EAAsB,UAAWrB,EAAa,GAAGD,EAC5D,SAAAS,EAAAA,KAAAe,EAAAA,SAAA,CACE,SAAA,CAAAjB,EAAAA,IAACkB,EAAAA,UAAA,CAAU,UAAU,qBAAA,CAAsB,EAC1C3B,CAAA,CAAA,CACH,CAAA,CACF,CAEJ"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { jsx as o, jsxs as c, Fragment as p } from "react/jsx-runtime";
|
|
2
|
+
import { clsx as a } from "../../../vendor/clsx/dist/clsx.js";
|
|
3
|
+
import { useRef as d } from "react";
|
|
4
|
+
import { Group as h, Button as g, Popover as B, ComboBox as N } from "react-aria-components";
|
|
5
|
+
/* empty css */
|
|
6
|
+
import { Field as C, Label as I, Description as F, FieldError as k } from "../Fieldset/Fieldset.js";
|
|
7
|
+
import { Input as v } from "../Input/Input.js";
|
|
8
|
+
import { IconChevronDown as D } from "../../icons/IconChevronDown.js";
|
|
9
|
+
import { ListBox as L, ListBoxItem as j } from "../ListBox/ListBox.js";
|
|
10
|
+
import { IconCheck as w } from "../../icons/IconCheck.js";
|
|
11
|
+
function H({
|
|
12
|
+
className: r,
|
|
13
|
+
label: e,
|
|
14
|
+
description: t,
|
|
15
|
+
errorMessage: m,
|
|
16
|
+
placeholder: n,
|
|
17
|
+
children: l,
|
|
18
|
+
items: u,
|
|
19
|
+
...x
|
|
20
|
+
}) {
|
|
21
|
+
const f = a(r, "combobox-container"), i = d(null);
|
|
22
|
+
return /* @__PURE__ */ o(E, { className: f, ...x, children: /* @__PURE__ */ c(C, { children: [
|
|
23
|
+
e && /* @__PURE__ */ o(I, { children: e }),
|
|
24
|
+
/* @__PURE__ */ c(h, { className: "combobox", children: [
|
|
25
|
+
/* @__PURE__ */ o(
|
|
26
|
+
v,
|
|
27
|
+
{
|
|
28
|
+
className: "combobox-input",
|
|
29
|
+
placeholder: n,
|
|
30
|
+
onPointerDown: (b) => {
|
|
31
|
+
var s;
|
|
32
|
+
document.activeElement === b.currentTarget && ((s = i.current) == null || s.click());
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
),
|
|
36
|
+
/* @__PURE__ */ o(g, { ref: i, className: "combobox-trigger", children: /* @__PURE__ */ o(D, { "aria-hidden": "true" }) })
|
|
37
|
+
] }),
|
|
38
|
+
/* @__PURE__ */ o(B, { children: /* @__PURE__ */ o(L, { items: u, children: l }) }),
|
|
39
|
+
t && /* @__PURE__ */ o(F, { children: t }),
|
|
40
|
+
/* @__PURE__ */ o(k, { children: m })
|
|
41
|
+
] }) });
|
|
42
|
+
}
|
|
43
|
+
function E({ ...r }) {
|
|
44
|
+
return /* @__PURE__ */ o(N, { menuTrigger: "focus", ...r });
|
|
45
|
+
}
|
|
46
|
+
function J({ children: r, className: e, ...t }) {
|
|
47
|
+
const m = a(e, "combobox-item");
|
|
48
|
+
return /* @__PURE__ */ o(j, { textValue: typeof r == "string" ? r : "", className: m, ...t, children: /* @__PURE__ */ c(p, { children: [
|
|
49
|
+
/* @__PURE__ */ o(w, { className: "combobox-item-check" }),
|
|
50
|
+
r
|
|
51
|
+
] }) });
|
|
52
|
+
}
|
|
53
|
+
export {
|
|
54
|
+
E as ComboBox,
|
|
55
|
+
H as ComboBoxField,
|
|
56
|
+
J as ComboBoxItem
|
|
57
|
+
};
|
|
58
|
+
//# sourceMappingURL=ComboBox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboBox.js","sources":["../../../../../src/ui/primitives/ComboBox/ComboBox.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconCheck, IconChevronDown } from \"icons\";\nimport {\n Description,\n Field,\n FieldError,\n Input,\n ListBox,\n ListBoxItem,\n Label,\n SharedFieldProps,\n type ListBoxItemProps,\n} from \"primitives\";\nimport { useRef } from \"react\";\nimport {\n Button as RACButton,\n ComboBox as RACComboBox,\n Group as RACGroup,\n Popover as RACPopover,\n type ComboBoxProps as RACComboBoxProps,\n} from \"react-aria-components\";\nimport \"./combobox.css\";\n\nexport interface ComboBoxFieldProps<T extends object>\n extends Omit<ComboBoxProps<T>, \"children\">,\n SharedFieldProps {\n items?: Iterable<T>;\n children: React.ReactNode | ((item: T) => React.ReactNode);\n}\nexport function ComboBoxField<T extends object>({\n className,\n label,\n description,\n errorMessage,\n placeholder,\n children,\n items,\n ...props\n}: ComboBoxFieldProps<T>) {\n const classNames = clsx(className, \"combobox-container\");\n const triggerRef = useRef<HTMLButtonElement | null>(null);\n return (\n <ComboBox className={classNames} {...props}>\n <Field>\n {label && <Label>{label}</Label>}\n <RACGroup className=\"combobox\">\n <Input\n className=\"combobox-input\"\n placeholder={placeholder}\n onPointerDown={(event) => {\n if (document.activeElement === event.currentTarget) {\n triggerRef.current?.click();\n }\n }}\n />\n <RACButton ref={triggerRef} className=\"combobox-trigger\">\n <IconChevronDown aria-hidden=\"true\" />\n </RACButton>\n </RACGroup>\n <RACPopover>\n <ListBox items={items}>{children}</ListBox>\n </RACPopover>\n {description && <Description>{description}</Description>}\n <FieldError>{errorMessage}</FieldError>\n </Field>\n </ComboBox>\n );\n}\n\nexport type ComboBoxProps<T extends object> = RACComboBoxProps<T>;\nexport function ComboBox<T extends object>({ ...props }: ComboBoxProps<T>) {\n return <RACComboBox<T> menuTrigger=\"focus\" {...props} />;\n}\n\nexport type ComboBoxItemProps = ListBoxItemProps;\nexport function ComboBoxItem({ children, className, ...props }: ComboBoxItemProps) {\n const classNames = clsx(className, \"combobox-item\");\n const textValue = typeof children === \"string\" ? children : \"\";\n return (\n <ListBoxItem textValue={textValue} className={classNames} {...props}>\n <>\n <IconCheck className=\"combobox-item-check\" />\n {children}\n </>\n </ListBoxItem>\n );\n}\n"],"names":["ComboBoxField","className","label","description","errorMessage","placeholder","children","items","props","classNames","clsx","triggerRef","useRef","ComboBox","Field","jsx","Label","jsxs","RACGroup","Input","event","_a","RACButton","IconChevronDown","RACPopover","ListBox","Description","FieldError","RACComboBox","ComboBoxItem","ListBoxItem","Fragment","IconCheck"],"mappings":";;;;;;;;;;AA6BO,SAASA,EAAgC;AAAA,EAC9C,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAA0B;AACxB,QAAMC,IAAaC,EAAKT,GAAW,oBAAoB,GACjDU,IAAaC,EAAiC,IAAI;AACxD,2BACGC,GAAA,EAAS,WAAWJ,GAAa,GAAGD,GACnC,4BAACM,GAAA,EACE,UAAA;AAAA,IAAAZ,KAAS,gBAAAa,EAACC,KAAO,UAAAd,EAAA,CAAM;AAAA,IACxB,gBAAAe,EAACC,GAAA,EAAS,WAAU,YAClB,UAAA;AAAA,MAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,aAAAd;AAAA,UACA,eAAe,CAACe,MAAU;;AACxB,YAAI,SAAS,kBAAkBA,EAAM,mBACnCC,IAAAV,EAAW,YAAX,QAAAU,EAAoB;AAAA,UAExB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEF,gBAAAN,EAACO,GAAA,EAAU,KAAKX,GAAY,WAAU,oBACpC,UAAA,gBAAAI,EAACQ,GAAA,EAAgB,eAAY,OAAA,CAAO,EAAA,CACtC;AAAA,IAAA,GACF;AAAA,sBACCC,GAAA,EACC,UAAA,gBAAAT,EAACU,GAAA,EAAQ,OAAAlB,GAAe,UAAAD,GAAS,GACnC;AAAA,IACCH,KAAe,gBAAAY,EAACW,GAAA,EAAa,UAAAvB,EAAA,CAAY;AAAA,IAC1C,gBAAAY,EAACY,KAAY,UAAAvB,EAAA,CAAa;AAAA,EAAA,EAAA,CAC5B,EAAA,CACF;AAEJ;AAGO,SAASS,EAA2B,EAAE,GAAGL,KAA2B;AACzE,SAAO,gBAAAO,EAACa,GAAA,EAAe,aAAY,SAAS,GAAGpB,GAAO;AACxD;AAGO,SAASqB,EAAa,EAAE,UAAAvB,GAAU,WAAAL,GAAW,GAAGO,KAA4B;AACjF,QAAMC,IAAaC,EAAKT,GAAW,eAAe;AAElD,2BACG6B,GAAA,EAAY,WAFG,OAAOxB,KAAa,WAAWA,IAAW,IAEvB,WAAWG,GAAa,GAAGD,GAC5D,UAAA,gBAAAS,EAAAc,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAhB,EAACiB,GAAA,EAAU,WAAU,sBAAA,CAAsB;AAAA,IAC1C1B;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("@internationalized/date"),qe=require("../../../vendor/clsx/dist/clsx.cjs"),h=require("react"),n=require("react-aria-components"),ye=require("./dateRangePresets.cjs");;/* empty css */const z=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("@internationalized/date"),qe=require("../../../vendor/clsx/dist/clsx.cjs"),h=require("react"),n=require("react-aria-components"),ye=require("./dateRangePresets.cjs");;/* empty css */const z=require("../../icons/IconCalendar.cjs"),Ie=require("../../icons/IconChevronDown.cjs"),G=require("../Text/Text.cjs"),Le=require("../../icons/IconCheck.cjs"),Be=require("../../icons/IconChevronLeft.cjs"),we=require("../../icons/IconChevronRight.cjs"),V=require("../Fieldset/Fieldset.cjs"),ae=require("../ListBox/ListBox.cjs"),ne=require("../Button/Button.cjs"),H=()=>new o.Time(0,0,0),re=()=>new o.Time(23,59,59);function Re({onAnchorChange:a}){const c=h.useContext(n.RangeCalendarStateContext),l=(c==null?void 0:c.anchorDate)??null,u=l==null?void 0:l.toString();return h.useEffect(()=>{a(l)},[u]),null}const k=a=>a&&"hour"in a?new o.Time(a.hour,a.minute,a.second):null,se=a=>!a||!a.start&&!a.end?{range:null,startTime:null,endTime:null,preset:a==null?void 0:a.preset}:{range:a.start&&a.end?{start:o.toCalendarDate(a.start),end:o.toCalendarDate(a.end)}:null,startTime:k(a.start),endTime:k(a.end),preset:a.preset},m=(a,c,l)=>{if(!a)return null;const u=o.toCalendarDate(a);return l||!c?u:o.toCalendarDateTime(u,c)},Fe=(a,c)=>{var l,u;return{preset:a.preset,start:m((l=a.range)==null?void 0:l.start,a.startTime,c),end:m((u=a.range)==null?void 0:u.end,a.endTime,c)}};function Pe({className:a,locale:c,label:l,"aria-label":u,description:K,errorMessage:q,labels:ie,intervals:y,presetKeys:I,presetLabels:L,hideTime:i=!1,minValue:B,maxValue:w,timezone:ce,isDisabled:le=!1,isRequired:de=!1,value:S,defaultValue:oe,onChange:R}){var _,ee;const{locale:ge}=n.useLocale(),F=c??ge??"pt-BR",P=ce??o.getLocalTimeZone(),{placeholder:M,relativeLabel:Z,absoluteLabel:$,startDateLabel:me,endDateLabel:ue,cancelLabel:E,applyLabel:A}=ie,x=h.useMemo(()=>{if(y)return y;if(I){if(!L)throw new Error("DateRangePicker: `presetLabels` is required when `presetKeys` is provided.");return ye.createDateRangePresets({locale:F,timezone:P,include:I,labels:L})}},[y,I,L,F,P]),[g,J]=h.useState(()=>se(S??oe)),[p,j]=h.useState(g),[pe,C]=h.useState(null),[he,O]=h.useState(!1);h.useEffect(()=>{S!==void 0&&J(se(S))},[S]);const v=t=>({...t,preset:void 0}),xe=t=>i?t:{...t,startTime:t.startTime??H(),endTime:t.endTime??re()},je=t=>{t&&(j(g),C(null)),O(t)},fe=t=>{C(null);const{start:r,end:d}=t.getValue();j({range:{start:o.toCalendarDate(r),end:o.toCalendarDate(d)},startTime:k(r),endTime:k(d),preset:t})},ke=t=>{C(t),t&&!i&&j(r=>v({...r,startTime:r.startTime??H()}))},Ce=t=>{C(null),j(r=>xe(v({...r,range:t})))},De=t=>{if(!t)return;C(null);const r=o.toCalendarDate(t),d=k(t);j(s=>{var b,te;const f=i?s.startTime:d??s.startTime??H(),D=m(r,f,i),T=m((b=s.range)==null?void 0:b.end,s.endTime,i),N=!!(D&&T&&T.compare(D)<0);return v({...s,range:{start:r,end:N||!((te=s.range)!=null&&te.end)?r:s.range.end},startTime:f,endTime:N?f:s.endTime})})},Te=t=>{if(!t)return;const r=o.toCalendarDate(t),d=k(t);j(s=>{var N,b;const f=i?s.endTime:d??s.endTime??re(),D=m(r,f,i),T=m((N=s.range)==null?void 0:N.start,s.startTime,i);return T&&D&&D.compare(T)<0?s:v({...s,range:{start:((b=s.range)==null?void 0:b.start)??r,end:r},endTime:f})})},Ne=()=>{J(p),R==null||R(Fe(p,i)),O(!1)},be=()=>O(!1),Se=!!(E||A),Q=(()=>{if(g.preset)return g.preset.label;if(g.range){const t=s=>s.toDate(P).toLocaleString(F,{day:"2-digit",month:"2-digit",year:"numeric",...i?{}:{hour:"2-digit",minute:"2-digit",second:"2-digit"}}),r=m(g.range.start,g.startTime,i),d=m(g.range.end,g.endTime,i);if(r&&d)return`${t(r)} — ${t(d)}`}return null})(),ve=!!(x&&x.length>0),U=i?"day":"second",W=m(((_=p.range)==null?void 0:_.start)??pe??void 0,p.startTime,i),X=m(((ee=p.range)==null?void 0:ee.end)??void 0,p.endTime,i),Y=e.jsxs(V.Field,{className:qe.clsx(a,"date-range-picker"),children:[l&&e.jsx(V.Label,{children:l}),e.jsxs(n.DialogTrigger,{isOpen:he,onOpenChange:je,children:[e.jsxs(n.Button,{className:"date-range-picker-trigger",isDisabled:le,"aria-label":l?void 0:u??M,"aria-required":de||void 0,"data-invalid":q?!0:void 0,children:[g.preset?e.jsxs("span",{className:"date-range-picker-preset-badge",children:[e.jsx(z.IconCalendar,{"aria-hidden":"true"}),g.preset.label]}):e.jsx("span",{className:"date-range-picker-value","data-placeholder":Q?void 0:!0,children:Q??M}),e.jsx(Ie.IconChevronDown,{"aria-hidden":"true"})]}),e.jsx(n.Popover,{className:"date-range-picker-popover",placement:"bottom start",children:e.jsxs(n.Dialog,{className:"date-range-picker-dialog",children:[e.jsxs("div",{className:"date-range-picker-body",children:[ve&&e.jsxs("div",{className:"date-range-picker-presets",children:[e.jsx(G.TextSmallStrong,{className:"date-range-picker-section-title",children:Z}),e.jsx(ae.ListBox,{"aria-label":Z,className:"date-range-picker-presets-list",selectionMode:"single",selectedKeys:p.preset?[p.preset.id]:[],items:x,onSelectionChange:t=>{const[r]=[...t],d=x==null?void 0:x.find(s=>s.id===r);d&&fe(d)},children:t=>e.jsxs(ae.ListBoxItem,{id:t.id,textValue:t.label,className:"date-range-picker-preset-item",children:[e.jsx("span",{children:t.label}),e.jsx(Le.IconCheck,{"aria-hidden":"true",className:"date-range-picker-preset-check"})]})})]}),e.jsxs("div",{className:"date-range-picker-absolute",children:[e.jsx(G.TextSmallStrong,{className:"date-range-picker-section-title",children:$}),e.jsxs("div",{className:"date-range-picker-fields",children:[e.jsxs(n.DateField,{className:"date-range-picker-datefield",granularity:U,value:W,minValue:B,maxValue:X??w,onChange:De,children:[e.jsx(n.Label,{className:"date-range-picker-field-label",children:me}),e.jsxs(n.Group,{className:"date-range-picker-input",children:[e.jsx(n.DateInput,{children:t=>e.jsx(n.DateSegment,{segment:t})}),e.jsx(z.IconCalendar,{"aria-hidden":"true"})]})]}),e.jsxs(n.DateField,{className:"date-range-picker-datefield",granularity:U,value:X,minValue:W??B,maxValue:w,onChange:Te,children:[e.jsx(n.Label,{className:"date-range-picker-field-label",children:ue}),e.jsxs(n.Group,{className:"date-range-picker-input",children:[e.jsx(n.DateInput,{children:t=>e.jsx(n.DateSegment,{segment:t})}),e.jsx(z.IconCalendar,{"aria-hidden":"true"})]})]})]}),e.jsxs(n.RangeCalendar,{className:"date-range-picker-calendar","aria-label":$,value:p.range,minValue:B,maxValue:w,onChange:Ce,children:[e.jsx(Re,{onAnchorChange:ke}),e.jsxs("header",{className:"date-range-picker-calendar-header",children:[e.jsx(n.Button,{slot:"previous",className:"date-range-picker-calendar-nav",children:e.jsx(Be.IconChevronLeft,{"aria-hidden":"true"})}),e.jsx(n.Heading,{className:"date-range-picker-calendar-heading"}),e.jsx(n.Button,{slot:"next",className:"date-range-picker-calendar-nav",children:e.jsx(we.IconChevronRight,{"aria-hidden":"true"})})]}),e.jsx(n.CalendarGrid,{className:"date-range-picker-calendar-grid",children:t=>e.jsx(n.CalendarCell,{date:t,className:"date-range-picker-calendar-cell"})})]})]})]}),Se&&e.jsxs("div",{className:"date-range-picker-actions",children:[E&&e.jsx(ne.Button,{variant:"neutral",size:"small",onPress:be,children:E}),A&&e.jsx(ne.Button,{variant:"primary",size:"small",onPress:Ne,children:A})]})]})})]}),K&&e.jsx(V.Description,{children:K}),q&&e.jsx(G.Text,{className:"date-range-picker-error",elementType:"span",children:q})]});return c?e.jsx(n.I18nProvider,{locale:c,children:Y}):Y}exports.DateRangePicker=Pe;
|
|
2
2
|
//# sourceMappingURL=DateRangePicker.cjs.map
|
|
@@ -5,14 +5,14 @@ import { useMemo as Ae, useState as S, useEffect as me, useContext as Oe } from
|
|
|
5
5
|
import { useLocale as Ve, DialogTrigger as $e, Button as $, Popover as Ge, Dialog as je, DateField as te, Label as ne, Group as re, DateInput as se, DateSegment as ie, RangeCalendar as qe, Heading as He, CalendarGrid as Ke, CalendarCell as Ze, I18nProvider as Je, RangeCalendarStateContext as Me } from "react-aria-components";
|
|
6
6
|
import { createDateRangePresets as Qe } from "./dateRangePresets.js";
|
|
7
7
|
/* empty css */
|
|
8
|
-
import { Field as Ue, Label as We, Description as Xe } from "../Fieldset/Fieldset.js";
|
|
9
8
|
import { IconCalendar as G } from "../../icons/IconCalendar.js";
|
|
10
|
-
import { IconChevronDown as
|
|
11
|
-
import { TextSmallStrong as le, Text as
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
9
|
+
import { IconChevronDown as Ue } from "../../icons/IconChevronDown.js";
|
|
10
|
+
import { TextSmallStrong as le, Text as We } from "../Text/Text.js";
|
|
11
|
+
import { IconCheck as Xe } from "../../icons/IconCheck.js";
|
|
12
|
+
import { IconChevronLeft as Ye } from "../../icons/IconChevronLeft.js";
|
|
13
|
+
import { IconChevronRight as _e } from "../../icons/IconChevronRight.js";
|
|
14
|
+
import { Field as ea, Label as aa, Description as ta } from "../Fieldset/Fieldset.js";
|
|
15
|
+
import { ListBox as na, ListBoxItem as ra } from "../ListBox/ListBox.js";
|
|
16
16
|
import { Button as ce } from "../Button/Button.js";
|
|
17
17
|
const j = () => new q(0, 0, 0), oe = () => new q(23, 59, 59);
|
|
18
18
|
function sa({
|
|
@@ -184,8 +184,8 @@ function ya({
|
|
|
184
184
|
((ee = g.range) == null ? void 0 : ee.end) ?? void 0,
|
|
185
185
|
g.endTime,
|
|
186
186
|
i
|
|
187
|
-
), Y = /* @__PURE__ */ s(
|
|
188
|
-
c && /* @__PURE__ */ t(
|
|
187
|
+
), Y = /* @__PURE__ */ s(ea, { className: ze(a, "date-range-picker"), children: [
|
|
188
|
+
c && /* @__PURE__ */ t(aa, { children: c }),
|
|
189
189
|
/* @__PURE__ */ s($e, { isOpen: De, onOpenChange: ve, children: [
|
|
190
190
|
/* @__PURE__ */ s(
|
|
191
191
|
$,
|
|
@@ -207,7 +207,7 @@ function ya({
|
|
|
207
207
|
children: Q ?? K
|
|
208
208
|
}
|
|
209
209
|
),
|
|
210
|
-
/* @__PURE__ */ t(
|
|
210
|
+
/* @__PURE__ */ t(Ue, { "aria-hidden": "true" })
|
|
211
211
|
]
|
|
212
212
|
}
|
|
213
213
|
),
|
|
@@ -216,7 +216,7 @@ function ya({
|
|
|
216
216
|
Re && /* @__PURE__ */ s("div", { className: "date-range-picker-presets", children: [
|
|
217
217
|
/* @__PURE__ */ t(le, { className: "date-range-picker-section-title", children: Z }),
|
|
218
218
|
/* @__PURE__ */ t(
|
|
219
|
-
|
|
219
|
+
na,
|
|
220
220
|
{
|
|
221
221
|
"aria-label": Z,
|
|
222
222
|
className: "date-range-picker-presets-list",
|
|
@@ -228,7 +228,7 @@ function ya({
|
|
|
228
228
|
o && ye(o);
|
|
229
229
|
},
|
|
230
230
|
children: (e) => /* @__PURE__ */ s(
|
|
231
|
-
|
|
231
|
+
ra,
|
|
232
232
|
{
|
|
233
233
|
id: e.id,
|
|
234
234
|
textValue: e.label,
|
|
@@ -236,7 +236,7 @@ function ya({
|
|
|
236
236
|
children: [
|
|
237
237
|
/* @__PURE__ */ t("span", { children: e.label }),
|
|
238
238
|
/* @__PURE__ */ t(
|
|
239
|
-
|
|
239
|
+
Xe,
|
|
240
240
|
{
|
|
241
241
|
"aria-hidden": "true",
|
|
242
242
|
className: "date-range-picker-preset-check"
|
|
@@ -305,7 +305,7 @@ function ya({
|
|
|
305
305
|
{
|
|
306
306
|
slot: "previous",
|
|
307
307
|
className: "date-range-picker-calendar-nav",
|
|
308
|
-
children: /* @__PURE__ */ t(
|
|
308
|
+
children: /* @__PURE__ */ t(Ye, { "aria-hidden": "true" })
|
|
309
309
|
}
|
|
310
310
|
),
|
|
311
311
|
/* @__PURE__ */ t(He, { className: "date-range-picker-calendar-heading" }),
|
|
@@ -314,7 +314,7 @@ function ya({
|
|
|
314
314
|
{
|
|
315
315
|
slot: "next",
|
|
316
316
|
className: "date-range-picker-calendar-nav",
|
|
317
|
-
children: /* @__PURE__ */ t(
|
|
317
|
+
children: /* @__PURE__ */ t(_e, { "aria-hidden": "true" })
|
|
318
318
|
}
|
|
319
319
|
)
|
|
320
320
|
] }),
|
|
@@ -336,8 +336,8 @@ function ya({
|
|
|
336
336
|
] })
|
|
337
337
|
] }) })
|
|
338
338
|
] }),
|
|
339
|
-
H && /* @__PURE__ */ t(
|
|
340
|
-
x && /* @__PURE__ */ t(
|
|
339
|
+
H && /* @__PURE__ */ t(ta, { children: H }),
|
|
340
|
+
x && /* @__PURE__ */ t(We, { className: "date-range-picker-error", elementType: "span", children: x })
|
|
341
341
|
] });
|
|
342
342
|
return l ? /* @__PURE__ */ t(Je, { locale: l, children: Y }) : Y;
|
|
343
343
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("../../../vendor/clsx/dist/clsx.cjs"),a=require("react"),l=require("react-aria-components");;/* empty css */const p=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("../../../vendor/clsx/dist/clsx.cjs"),a=require("react"),l=require("react-aria-components");;/* empty css */const p=require("../../icons/IconX.cjs"),q=require("../../icons/IconSearch.cjs"),b=require("../Fieldset/Fieldset.cjs"),S=require("../Input/Input.cjs"),h=require("../IconButton/IconButton.cjs"),x=require("../ListBox/ListBox.cjs"),f=a.forwardRef(function({className:m,results:s,onSearch:o,...i},n){const[u,j]=a.useState(""),c=a.useRef(null),t=e=>{j(e),o&&o(e)},I=d.clsx(m,"search-input-container");return r.jsxs(l.ComboBox,{className:I,children:[r.jsx(b.Label,{hidden:!0,children:i["aria-label"]||"Search"}),r.jsx(S.Input,{type:"search",className:"search-input",value:u,onInput:e=>t(e.currentTarget.value),ref:e=>{c.current=e,typeof n=="function"?n(e):n&&(n.current=e)},...i}),r.jsx("span",{className:"search-icon",children:u?r.jsx(h.IconButton,{"aria-label":"Clear search",onPress:()=>t(""),size:"small",variant:"subtle",children:r.jsx(p.IconX,{})}):r.jsx(h.IconButton,{"aria-label":"Clear search",onPress:()=>{var e;return(e=c==null?void 0:c.current)==null?void 0:e.focus()},size:"small",variant:"subtle",children:r.jsx(q.IconSearch,{})})}),r.jsx(l.Popover,{children:r.jsx(x.ListBox,{children:s==null?void 0:s.map(e=>r.jsx(x.ListBoxItem,{onAction:()=>t(e),children:e},e))})})]})});exports.Search=f;
|
|
2
2
|
//# sourceMappingURL=Search.cjs.map
|
|
@@ -3,10 +3,10 @@ import { clsx as f } from "../../../vendor/clsx/dist/clsx.js";
|
|
|
3
3
|
import d, { useState as I, useRef as b } from "react";
|
|
4
4
|
import { ComboBox as x, Popover as v } from "react-aria-components";
|
|
5
5
|
/* empty css */
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
6
|
+
import { IconX as B } from "../../icons/IconX.js";
|
|
7
|
+
import { IconSearch as S } from "../../icons/IconSearch.js";
|
|
8
|
+
import { Label as N } from "../Fieldset/Fieldset.js";
|
|
9
|
+
import { Input as C } from "../Input/Input.js";
|
|
10
10
|
import { IconButton as m } from "../IconButton/IconButton.js";
|
|
11
11
|
import { ListBox as L, ListBoxItem as P } from "../ListBox/ListBox.js";
|
|
12
12
|
const D = d.forwardRef(function({ className: l, results: a, onSearch: n, ...i }, o) {
|
|
@@ -14,9 +14,9 @@ const D = d.forwardRef(function({ className: l, results: a, onSearch: n, ...i },
|
|
|
14
14
|
p(r), n && n(r);
|
|
15
15
|
}, h = f(l, "search-input-container");
|
|
16
16
|
return /* @__PURE__ */ u(x, { className: h, children: [
|
|
17
|
-
/* @__PURE__ */ e(
|
|
17
|
+
/* @__PURE__ */ e(N, { hidden: !0, children: i["aria-label"] || "Search" }),
|
|
18
18
|
/* @__PURE__ */ e(
|
|
19
|
-
|
|
19
|
+
C,
|
|
20
20
|
{
|
|
21
21
|
type: "search",
|
|
22
22
|
className: "search-input",
|
|
@@ -35,7 +35,7 @@ const D = d.forwardRef(function({ className: l, results: a, onSearch: n, ...i },
|
|
|
35
35
|
onPress: () => c(""),
|
|
36
36
|
size: "small",
|
|
37
37
|
variant: "subtle",
|
|
38
|
-
children: /* @__PURE__ */ e(
|
|
38
|
+
children: /* @__PURE__ */ e(B, {})
|
|
39
39
|
}
|
|
40
40
|
) : /* @__PURE__ */ e(
|
|
41
41
|
m,
|
|
@@ -47,7 +47,7 @@ const D = d.forwardRef(function({ className: l, results: a, onSearch: n, ...i },
|
|
|
47
47
|
},
|
|
48
48
|
size: "small",
|
|
49
49
|
variant: "subtle",
|
|
50
|
-
children: /* @__PURE__ */ e(
|
|
50
|
+
children: /* @__PURE__ */ e(S, {})
|
|
51
51
|
}
|
|
52
52
|
) }),
|
|
53
53
|
/* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(L, { children: a == null ? void 0 : a.map((r) => /* @__PURE__ */ e(P, { onAction: () => c(r), children: r }, r)) }) })
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import { type ComponentPropsWithoutRef, type ReactNode } from "react";
|
|
2
2
|
import "./widget.css";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
type WidgetDescriptionProps = {
|
|
4
|
+
description?: undefined;
|
|
5
|
+
descriptionButtonLabel?: undefined;
|
|
6
|
+
} | {
|
|
7
|
+
description: ReactNode;
|
|
8
|
+
descriptionButtonLabel: string;
|
|
7
9
|
};
|
|
8
|
-
export
|
|
9
|
-
title:
|
|
10
|
-
description?: ReactNode;
|
|
10
|
+
export type WidgetProps = Omit<ComponentPropsWithoutRef<"div">, "title"> & WidgetDescriptionProps & {
|
|
11
|
+
title: ReactNode;
|
|
11
12
|
headerActions?: ReactNode;
|
|
12
|
-
}
|
|
13
|
+
};
|
|
14
|
+
export declare const Widget: import("react").ForwardRefExoticComponent<WidgetProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
15
|
+
export {};
|
|
@@ -15,8 +15,10 @@ export interface WidgetGridProps {
|
|
|
15
15
|
cols?: number;
|
|
16
16
|
rowHeight?: number;
|
|
17
17
|
isEditable?: boolean;
|
|
18
|
+
isDraggable?: boolean;
|
|
19
|
+
isResizable?: boolean;
|
|
18
20
|
className?: string;
|
|
19
21
|
style?: CSSProperties;
|
|
20
22
|
children: ReactNode;
|
|
21
23
|
}
|
|
22
|
-
export declare function WidgetGrid({ layout, onLayoutChange, cols, rowHeight, isEditable, className, style, children, }: WidgetGridProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export declare function WidgetGrid({ layout, onLayoutChange, cols, rowHeight, isEditable, isDraggable, isResizable, className, style, children, }: WidgetGridProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { SharedFieldProps, type ListBoxItemProps } from "primitives";
|
|
2
|
+
import { type ComboBoxProps as RACComboBoxProps } from "react-aria-components";
|
|
3
|
+
import "./combobox.css";
|
|
4
|
+
export interface ComboBoxFieldProps<T extends object> extends Omit<ComboBoxProps<T>, "children">, SharedFieldProps {
|
|
5
|
+
items?: Iterable<T>;
|
|
6
|
+
children: React.ReactNode | ((item: T) => React.ReactNode);
|
|
7
|
+
}
|
|
8
|
+
export declare function ComboBoxField<T extends object>({ className, label, description, errorMessage, placeholder, children, items, ...props }: ComboBoxFieldProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export type ComboBoxProps<T extends object> = RACComboBoxProps<T>;
|
|
10
|
+
export declare function ComboBox<T extends object>({ ...props }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export type ComboBoxItemProps = ListBoxItemProps;
|
|
12
|
+
export declare function ComboBoxItem({ children, className, ...props }: ComboBoxItemProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,6 +5,7 @@ export * from "./CodeEditor/CodeEditor";
|
|
|
5
5
|
export * from "./Avatar/Avatar";
|
|
6
6
|
export * from "./Button/Button";
|
|
7
7
|
export * from "./Checkbox/Checkbox";
|
|
8
|
+
export * from "./ComboBox/ComboBox";
|
|
8
9
|
export * from "./DateRangePicker/DateRangePicker";
|
|
9
10
|
export * from "./DateRangePicker/dateRangePresets";
|
|
10
11
|
export * from "./Dialog/Dialog";
|