@bioturing/components 0.45.0 → 0.46.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/components/base-menu/index.d.ts.map +1 -1
- package/dist/components/base-menu/item.d.ts.map +1 -1
- package/dist/components/base-menu/item.js +6 -13
- package/dist/components/base-menu/item.js.map +1 -1
- package/dist/components/button/style.css +1 -1
- package/dist/components/combobox/component.d.ts +32 -1
- package/dist/components/combobox/component.d.ts.map +1 -1
- package/dist/components/combobox/component.js +286 -261
- package/dist/components/combobox/component.js.map +1 -1
- package/dist/components/combobox/style.css +1 -1
- package/dist/components/combobox/utils.d.ts +2 -0
- package/dist/components/combobox/utils.d.ts.map +1 -0
- package/dist/components/combobox/utils.js +10 -0
- package/dist/components/combobox/utils.js.map +1 -0
- package/dist/components/hooks/useDraggable.d.ts.map +1 -1
- package/dist/components/hooks/useDraggable.js +34 -27
- package/dist/components/hooks/useDraggable.js.map +1 -1
- package/dist/components/popup-panel/component.d.ts +1 -1
- package/dist/components/popup-panel/component.d.ts.map +1 -1
- package/dist/components/popup-panel/component.js +217 -233
- package/dist/components/popup-panel/component.js.map +1 -1
- package/dist/components/popup-panel/constants.d.ts +5 -1
- package/dist/components/popup-panel/constants.d.ts.map +1 -1
- package/dist/components/popup-panel/constants.js +8 -4
- package/dist/components/popup-panel/constants.js.map +1 -1
- package/dist/components/popup-panel/style.css +1 -1
- package/dist/components/popup-panel/types.d.ts +14 -1
- package/dist/components/popup-panel/types.d.ts.map +1 -1
- package/dist/components/select-trigger/style.css +1 -1
- package/dist/components/theme-provider/style.css +1 -1
- package/dist/components/truncate/helpers.d.ts +13 -7
- package/dist/components/truncate/helpers.d.ts.map +1 -1
- package/dist/components/truncate/helpers.js +102 -85
- package/dist/components/truncate/helpers.js.map +1 -1
- package/dist/stats.html +1 -1
- package/dist/tailwind.css +16 -0
- package/dist/tokens/and-theme/tokens.d.ts.map +1 -1
- package/dist/tokens/and-theme/tokens.js +4 -1
- package/dist/tokens/and-theme/tokens.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/base-menu/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,CAAC;AAChD,eAAO,MAAM,QAAQ;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/base-menu/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,CAAC;AAChD,eAAO,MAAM,QAAQ;;;;;;;;;;;;WASo/F,CAAC;;CADzgG,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/base-menu/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/base-menu/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,IAC/E,wBAAwB,CAAC,CAAC,CAAC,GAAG;IAC5B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IAC/E,2CAA2C;IAC3C,UAAU,CAAC,EAAE;QACX,4CAA4C;QAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,oCAAoC;QACpC,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,oCAAoC;QACpC,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,sCAAsC;QACtC,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC;IAC9B,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEJ,QAAA,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,EAC5E,+JAiBG,iBAAiB,CAAC,CAAC,CAAC,EACvB,KAAK,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,SA8CjD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAoC,CAC3D,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,EAEnD,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;CACnD,KACE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs as v, Fragment as R, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as j } from "react";
|
|
3
|
-
import { Checkbox as k } from "antd";
|
|
4
3
|
import './item.css';/* empty css */
|
|
5
|
-
import { useRender as
|
|
6
|
-
import { useCls as
|
|
4
|
+
import { useRender as k } from "@base-ui/react";
|
|
5
|
+
import { useCls as B } from "../utils/antdUtils.js";
|
|
6
|
+
import { Checkbox as E } from "../checkbox/component.js";
|
|
7
7
|
import { clsx as a } from "../utils/cn.js";
|
|
8
8
|
import { WithRenderProp as M } from "../utils/WithRenderProp.js";
|
|
9
9
|
const N = ({
|
|
@@ -24,15 +24,8 @@ const N = ({
|
|
|
24
24
|
as: h,
|
|
25
25
|
...b
|
|
26
26
|
}, I) => {
|
|
27
|
-
const e =
|
|
28
|
-
i && /* @__PURE__ */ r(
|
|
29
|
-
k,
|
|
30
|
-
{
|
|
31
|
-
checked: m,
|
|
32
|
-
tabIndex: -1,
|
|
33
|
-
indeterminate: p
|
|
34
|
-
}
|
|
35
|
-
),
|
|
27
|
+
const e = B(), g = /* @__PURE__ */ v(R, { children: [
|
|
28
|
+
i && /* @__PURE__ */ r(E, { checked: m, tabIndex: -1, indeterminate: p }),
|
|
36
29
|
o && /* @__PURE__ */ r("span", { className: a(e("menu-item-icon"), t?.icon), children: o }),
|
|
37
30
|
s && /* @__PURE__ */ r(
|
|
38
31
|
M,
|
|
@@ -45,7 +38,7 @@ const N = ({
|
|
|
45
38
|
),
|
|
46
39
|
d && /* @__PURE__ */ r("span", { className: a(e("menu-item-suffix"), t?.suffix), children: d })
|
|
47
40
|
] });
|
|
48
|
-
return
|
|
41
|
+
return k({
|
|
49
42
|
render: x || void 0,
|
|
50
43
|
props: {
|
|
51
44
|
...b,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sources":["../../../src/components/base-menu/item.tsx"],"sourcesContent":["import React, { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx, useCls, WithRenderProp } from \"../utils\";\nimport { ElementTypeToDOMType } from \"../utils/types\";\nimport { Checkbox } from \"
|
|
1
|
+
{"version":3,"file":"item.js","sources":["../../../src/components/base-menu/item.tsx"],"sourcesContent":["import React, { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx, useCls, WithRenderProp } from \"../utils\";\nimport { ElementTypeToDOMType } from \"../utils/types\";\nimport { Checkbox } from \"../checkbox\";\n\nimport \"./item.css\";\n\nimport { useRender } from \"@base-ui/react\";\n\nexport type BaseMenuItemProps<T extends keyof React.JSX.IntrinsicElements = \"div\"> =\n ComponentPropsWithoutRef<T> & {\n /** Whether the item is disabled */\n disabled?: boolean;\n /** Whether the item represents a dangerous action */\n danger?: boolean;\n /** Whether the item is currently selected */\n selected?: boolean;\n /** Whether the item is currently active/highlighted */\n active?: boolean;\n /** Whether the item has focus */\n focused?: boolean;\n /** Icon to display before the text */\n icon?: React.ReactNode;\n /** Text content of the item */\n children?: React.ReactNode;\n /** Suffix content to display after the text */\n suffix?: React.ReactNode;\n /** Whether to show checkbox */\n showCheckbox?: boolean;\n /** Whether the checkbox is indeterminate */\n indeterminate?: boolean;\n /** Custom render function for the item label */\n labelRender?: (props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;\n /** Custom className for different parts */\n classNames?: {\n /** Custom className for the root element */\n root?: string;\n /** Custom className for the icon */\n icon?: string;\n /** Custom className for the text */\n text?: string;\n /** Custom className for the suffix */\n suffix?: string;\n };\n onSelect?: () => void;\n render?: useRender.RenderProp;\n as?: T;\n };\n\nconst BaseMenuItemInner = <T extends keyof React.JSX.IntrinsicElements = \"div\">(\n {\n disabled = false,\n danger = false,\n selected = false,\n active = false,\n focused = false,\n icon,\n children,\n suffix,\n showCheckbox = false,\n indeterminate = false,\n labelRender,\n classNames,\n render,\n onSelect,\n as,\n ...props\n }: BaseMenuItemProps<T>,\n ref: React.ForwardedRef<ElementTypeToDOMType<T>>,\n) => {\n const cls = useCls();\n\n const content = (\n <>\n {showCheckbox && <Checkbox checked={selected} tabIndex={-1} indeterminate={indeterminate} />}\n {icon && <span className={clsx(cls(\"menu-item-icon\"), classNames?.icon)}>{icon}</span>}\n {children && (\n <WithRenderProp\n render={labelRender}\n as=\"span\"\n className={clsx(cls(\"menu-item-text\"), classNames?.text)}\n >\n {children}\n </WithRenderProp>\n )}\n {suffix && (\n <span className={clsx(cls(\"menu-item-suffix\"), classNames?.suffix)}>{suffix}</span>\n )}\n </>\n );\n\n const renderedElement = useRender({\n render: render || undefined,\n props: {\n ...props,\n className: clsx(\n // Base menu item styles\n cls(\"menu-item-base\"),\n showCheckbox && cls(\"menu-item-show-checkbox\"),\n classNames?.root,\n ),\n \"data-disabled\": disabled,\n \"data-danger\": danger,\n \"data-selected\": selected,\n \"data-active\": active,\n \"data-focus\": focused,\n \"aria-disabled\": disabled,\n children: content,\n },\n ref: ref as unknown as React.Ref<ElementTypeToDOMType<T>>,\n defaultTagName: as || \"div\",\n });\n\n return renderedElement;\n};\n\nexport const BaseMenuItem = forwardRef(BaseMenuItemInner) as <\n T extends keyof React.JSX.IntrinsicElements = \"div\",\n>(\n props: BaseMenuItemProps<T> & {\n ref?: React.ForwardedRef<ElementTypeToDOMType<T>>;\n },\n) => ReturnType<typeof BaseMenuItemInner>;\n"],"names":["BaseMenuItemInner","disabled","danger","selected","active","focused","icon","children","suffix","showCheckbox","indeterminate","labelRender","classNames","render","onSelect","as","props","ref","cls","useCls","content","jsxs","Fragment","Checkbox","jsx","clsx","WithRenderProp","useRender","BaseMenuItem","forwardRef"],"mappings":";;;;;;;;AAiDA,MAAMA,IAAoB,CACxB;AAAA,EACE,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAA,GAENC,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAb,uBAAiBc,GAAA,EAAS,SAASpB,GAAU,UAAU,IAAI,eAAAO,GAA8B;AAAA,IACzFJ,KAAQ,gBAAAkB,EAAC,QAAA,EAAK,WAAWC,EAAKP,EAAI,gBAAgB,GAAGN,GAAY,IAAI,GAAI,UAAAN,EAAA,CAAK;AAAA,IAC9EC,KACC,gBAAAiB;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAQf;AAAA,QACR,IAAG;AAAA,QACH,WAAWc,EAAKP,EAAI,gBAAgB,GAAGN,GAAY,IAAI;AAAA,QAEtD,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJC,KACC,gBAAAgB,EAAC,QAAA,EAAK,WAAWC,EAAKP,EAAI,kBAAkB,GAAGN,GAAY,MAAM,GAAI,UAAAJ,EAAA,CAAO;AAAA,EAAA,GAEhF;AAyBF,SAtBwBmB,EAAU;AAAA,IAChC,QAAQd,KAAU;AAAA,IAClB,OAAO;AAAA,MACL,GAAGG;AAAA,MACH,WAAWS;AAAA;AAAA,QAETP,EAAI,gBAAgB;AAAA,QACpBT,KAAgBS,EAAI,yBAAyB;AAAA,QAC7CN,GAAY;AAAA,MAAA;AAAA,MAEd,iBAAiBX;AAAA,MACjB,eAAeC;AAAA,MACf,iBAAiBC;AAAA,MACjB,eAAeC;AAAA,MACf,cAAcC;AAAA,MACd,iBAAiBJ;AAAA,MACjB,UAAUmB;AAAA,IAAA;AAAA,IAEZ,KAAAH;AAAA,IACA,gBAAgBF,KAAM;AAAA,EAAA,CACvB;AAGH,GAEaa,IAAeC,EAAW7B,CAAiB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-btn.ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-color-default.ds-btn-variant-dashed:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-background-ghost){background-color:var(--ds-button-bg-secondary)}.ds-btn.ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-background-ghost){background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-top) 0%,var(--ds-button-bg-gradient-bottom) 100%);box-shadow:var(--ds-button-shadow-default),var(--ds-button-shadow-default-inner)}.ds-btn.ds-btn-background-ghost:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-dangerous){background:transparent;box-shadow:none}.ds-btn.ds-btn-color-primary.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous){background-color:var(--ds-color-primary);border:1px solid var(--ds-color-primary);background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-primary-top) 0%,var(--ds-button-bg-gradient-primary-bottom) 100%);box-shadow:var(--ds-button-shadow-solid),var(--ds-button-shadow-solid-inner);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled){background-color:var(--ds-color-error);border:1px solid var(--ds-color-error);background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-primary-top) 0%,var(--ds-button-bg-gradient-primary-bottom) 100%);box-shadow:var(--ds-button-shadow-solid),var(--ds-button-shadow-solid-inner);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}span.ds-btn-icon{display:flex;align-items:center}.ds-btn-negative-margin-wrapper{display:inline-flex;flex-shrink:0}.ds-btn-negative-margin-wrapper,.ds-btn-negative-margin-wrapper.ds-btn-wrapper-large{margin-inline:-1rem}.ds-btn-negative-margin-wrapper.ds-btn-wrapper-small{margin-inline:-.5rem}.ds-btn-loading-icon svg{animation:spin 1s linear infinite}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-background-ghost):is(:hover,:focus-visible){border-color:var(--ds-color-primary-hover);color:var(--ds-color-primary-hover)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled){border-color:var(--ds-control-color-border);color:var(--ds-color-error)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){border-color:var(--ds-color-error-hover);color:var(--ds-color-error-hover)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled):active{border-color:var(--ds-color-error-active);color:var(--ds-color-error-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):is(.ds-btn-color-default.ds-btn-variant-dashed,.ds-btn-background-ghost.ds-btn-variant-outlined,.ds-btn-background-ghost.ds-btn-variant-dashed):is(:hover,:focus-visible){border-color:var(--ds-color-primary-hover);color:var(--ds-color-primary-hover)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-background-ghost):active{border-color:var(--ds-color-primary-active);color:var(--ds-color-primary-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):is(.ds-btn-color-default.ds-btn-variant-dashed,.ds-btn-background-ghost.ds-btn-variant-outlined,.ds-btn-background-ghost.ds-btn-variant-dashed):active{border-color:var(--ds-color-primary-active);color:var(--ds-color-primary-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-primary.ds-btn-variant-solid:is(:hover,:focus-visible){background-color:var(--ds-color-primary-hover);border-color:var(--ds-color-primary-hover);box-shadow:var(--ds-button-shadow-solid-hover),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){background-color:var(--ds-color-error-hover);border-color:var(--ds-color-error-hover);box-shadow:var(--ds-button-shadow-solid-hover),var(--ds-button-shadow-solid-inner)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-primary.ds-btn-variant-solid:active{background-color:var(--ds-color-primary-active);border-color:var(--ds-color-primary-active);box-shadow:var(--ds-button-shadow-solid-active),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):active{background-color:var(--ds-color-error-active);border-color:var(--ds-color-error-active);box-shadow:var(--ds-button-shadow-solid-active),var(--ds-button-shadow-solid-inner)}.ds-btn-no-icon .ds-btn-loading-icon{position:absolute;inset-inline-start:50%;transform:translate(-50%)}.ds-btn-no-icon.ds-btn-loading .ds-btn-loading-icon{transition:opacity 0s}.ds-btn-no-icon.ds-btn-loading>*:not(.ds-btn-loading-icon){transition:opacity 0s;opacity:0}}
|
|
1
|
+
@layer components{.ds-btn.ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-color-default.ds-btn-variant-dashed:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-background-ghost){background-color:var(--ds-button-bg-secondary)}.ds-btn.ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-background-ghost){background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-top) 0%,var(--ds-button-bg-gradient-bottom) 100%);box-shadow:var(--ds-button-shadow-default),var(--ds-button-shadow-default-inner)}.ds-btn.ds-btn-background-ghost:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-dangerous){background:transparent;box-shadow:none}.ds-btn.ds-btn-color-primary.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous){background-color:var(--ds-color-primary);border:1px solid var(--ds-color-primary);background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-primary-top) 0%,var(--ds-button-bg-gradient-primary-bottom) 100%);box-shadow:var(--ds-button-shadow-solid),var(--ds-button-shadow-solid-inner);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled){background-color:var(--ds-color-error);border:1px solid var(--ds-color-error);background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-primary-top) 0%,var(--ds-button-bg-gradient-primary-bottom) 100%);box-shadow:var(--ds-button-shadow-solid),var(--ds-button-shadow-solid-inner);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}span.ds-btn-icon{display:flex;align-items:center}.ds-btn-negative-margin-wrapper{display:inline-flex;flex-shrink:0}.ds-btn-negative-margin-wrapper,.ds-btn-negative-margin-wrapper.ds-btn-wrapper-large{margin-inline:-1rem}.ds-btn-negative-margin-wrapper.ds-btn-wrapper-small{margin-inline:-.5rem}.ds-btn-loading-icon svg{animation:spin 1s linear infinite}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-background-ghost):is(:hover,:focus-visible){border-color:var(--ds-color-primary-hover);color:var(--ds-color-primary-hover)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled){border-color:var(--ds-control-color-border);color:var(--ds-color-error)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){border-color:var(--ds-color-error-hover);color:var(--ds-color-error-hover)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled):active{border-color:var(--ds-color-error-active);color:var(--ds-color-error-active)}.ds-btn.ds-btn-dangerous.ds-btn-dangerous:is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-disabled):not(:disabled){color:var(--ds-color-error-fg)}.ds-btn.ds-btn-dangerous.ds-btn-dangerous:is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){color:var(--ds-color-error-fg-hover)}.ds-btn.ds-btn-dangerous.ds-btn-dangerous:is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-disabled):not(:disabled):active{color:var(--ds-color-error-fg-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):is(.ds-btn-color-default.ds-btn-variant-dashed,.ds-btn-background-ghost.ds-btn-variant-outlined,.ds-btn-background-ghost.ds-btn-variant-dashed):is(:hover,:focus-visible){border-color:var(--ds-color-primary-hover);color:var(--ds-color-primary-hover)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-background-ghost):active{border-color:var(--ds-color-primary-active);color:var(--ds-color-primary-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):is(.ds-btn-color-default.ds-btn-variant-dashed,.ds-btn-background-ghost.ds-btn-variant-outlined,.ds-btn-background-ghost.ds-btn-variant-dashed):active{border-color:var(--ds-color-primary-active);color:var(--ds-color-primary-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-primary.ds-btn-variant-solid:is(:hover,:focus-visible){background-color:var(--ds-color-primary-hover);border-color:var(--ds-color-primary-hover);box-shadow:var(--ds-button-shadow-solid-hover),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){background-color:var(--ds-color-error-hover);border-color:var(--ds-color-error-hover);box-shadow:var(--ds-button-shadow-solid-hover),var(--ds-button-shadow-solid-inner)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-primary.ds-btn-variant-solid:active{background-color:var(--ds-color-primary-active);border-color:var(--ds-color-primary-active);box-shadow:var(--ds-button-shadow-solid-active),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):active{background-color:var(--ds-color-error-active);border-color:var(--ds-color-error-active);box-shadow:var(--ds-button-shadow-solid-active),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-color-link:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text){color:var(--ds-color-primary-fg)}.ds-btn.ds-btn-color-link:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text):is(:hover,:focus-visible){color:var(--ds-color-primary-fg-hover)}.ds-btn.ds-btn-color-link:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text):active{color:var(--ds-color-primary-fg-active)}.ds-btn.ds-btn-color-dangerous:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text){color:var(--ds-color-error-fg)}.ds-btn.ds-btn-color-dangerous:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text):is(:hover,:focus-visible){color:var(--ds-color-error-fg-hover)}.ds-btn.ds-btn-color-dangerous:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text):active{color:var(--ds-color-error-fg-active)}.ds-btn-no-icon .ds-btn-loading-icon{position:absolute;inset-inline-start:50%;transform:translate(-50%)}.ds-btn-no-icon.ds-btn-loading .ds-btn-loading-icon{transition:opacity 0s}.ds-btn-no-icon.ds-btn-loading>*:not(.ds-btn-loading-icon){transition:opacity 0s;opacity:0}}
|
|
@@ -55,6 +55,13 @@ export interface ComboboxProps<T extends React.Key, M extends boolean, O extends
|
|
|
55
55
|
/** Custom render for options */
|
|
56
56
|
optionRender?: (option: ComboboxOption<T, O>, props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
|
|
57
57
|
/** Filter function for search */
|
|
58
|
+
/**
|
|
59
|
+
* Filter function for search
|
|
60
|
+
* - `true` or `undefined`: default filtering (splits by tokenSeparators if provided)
|
|
61
|
+
* - `false`: disables filtering
|
|
62
|
+
* - custom function: `(input, option) => boolean`
|
|
63
|
+
* @default true
|
|
64
|
+
*/
|
|
58
65
|
filterOption?: boolean | ((input: string, option: ComboboxOption<T, O>) => boolean);
|
|
59
66
|
/** Callback when search input changes */
|
|
60
67
|
onSearch?: (value: string) => void;
|
|
@@ -87,8 +94,32 @@ export interface ComboboxProps<T extends React.Key, M extends boolean, O extends
|
|
|
87
94
|
* Render function for the option label
|
|
88
95
|
*/
|
|
89
96
|
optionLabelRender?: (option: ComboboxOption<T, O>, props?: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
|
|
97
|
+
/**
|
|
98
|
+
* Whether the popup width should match the trigger width.
|
|
99
|
+
* When `false`, the popup can exceed the trigger width to fit long option labels.
|
|
100
|
+
* @default true
|
|
101
|
+
*/
|
|
102
|
+
popupMatchSelectWidth?: boolean;
|
|
103
|
+
/**
|
|
104
|
+
* Allow adding items by typing the exact label or value and pressing Enter.
|
|
105
|
+
* @default false
|
|
106
|
+
*/
|
|
107
|
+
addOnEnter?: boolean;
|
|
108
|
+
/**
|
|
109
|
+
* Characters to split input by when adding multiple items on Enter.
|
|
110
|
+
* Only applies when `addOnEnter` and `multiple` are true.
|
|
111
|
+
* @default undefined
|
|
112
|
+
*/
|
|
113
|
+
tokenSeparators?: string[];
|
|
114
|
+
/**
|
|
115
|
+
* Automatically highlight the first matching item while filtering.
|
|
116
|
+
* When enabled in single-select mode, Enter selects the highlighted
|
|
117
|
+
* item natively and `addOnEnter` is ignored to avoid conflicts.
|
|
118
|
+
* @default true
|
|
119
|
+
*/
|
|
120
|
+
autoHighlight?: boolean;
|
|
90
121
|
}
|
|
91
|
-
declare const ComboboxInner: <T extends React.Key, M extends boolean, O extends Record<string, unknown> = {}>({ options, value: controlledValue, defaultValue, onChange, placeholder, disabled: disabledProp, status: statusProp, allowClear, multiple, showSearch: _showSearch, open: controlledOpen, onOpenChange, className, classNames, size, optionRender, onSearch, clearIcon, suffixIcon, showSelectAll, optionLabelRender, getOptionKeywords: _getOptionKeywords, ...rest }: ComboboxProps<T, M, O>, ref: React.ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
|
|
122
|
+
declare const ComboboxInner: <T extends React.Key, M extends boolean, O extends Record<string, unknown> = {}>({ options, value: controlledValue, defaultValue, onChange, placeholder, disabled: disabledProp, status: statusProp, allowClear, multiple, showSearch: _showSearch, open: controlledOpen, onOpenChange, className, classNames, size, optionRender, onSearch, clearIcon, suffixIcon, placement, showSelectAll, optionLabelRender, getOptionKeywords: _getOptionKeywords, popupMatchSelectWidth, addOnEnter, tokenSeparators, autoHighlight, filterOption, ...rest }: ComboboxProps<T, M, O>, ref: React.ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
|
|
92
123
|
export declare const Combobox: <T extends React.Key, M extends boolean, O extends Record<string, unknown> = {}>(props: ComboboxProps<T, M, O> & {
|
|
93
124
|
ref?: ForwardedRef<HTMLDivElement>;
|
|
94
125
|
}) => ReturnType<typeof ComboboxInner>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/component.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,EACZ,YAAY,
|
|
1
|
+
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/component.tsx"],"names":[],"mappings":"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"}
|