@frontify/fondue 12.0.0-beta.253 → 12.0.0-beta.254

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.
Files changed (9) hide show
  1. package/dist/components/Tree/TreeItem/DragHandle.es.js +15 -14
  2. package/dist/components/Tree/TreeItem/DragHandle.es.js.map +1 -1
  3. package/dist/components/Tree/TreeItem/TreeItemOverlay.es.js +1 -1
  4. package/dist/components/Tree/TreeItem/TreeItemOverlay.es.js.map +1 -1
  5. package/dist/index.cjs.js +1 -1
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.umd.js +1 -1
  8. package/dist/index.umd.js.map +1 -1
  9. package/package.json +1 -1
package/dist/components/Tree/TreeItem/DragHandle.es.js CHANGED
@@ -1,26 +1,27 @@
1
- import t, { forwardRef as m } from "react";
2
- import { merge as i } from "../../../utilities/merge.es.js";
3
- import { FOCUS_VISIBLE_STYLE as l } from "../../../utilities/focusStyle.es.js";
4
- import n from "../../../foundation/Icon/Generated/IconGrabHandle12.es.js";
5
- const p = m(
6
- ({ active: e, className: r, ...o }, a) => /* @__PURE__ */ t.createElement(
1
+ import t, { forwardRef as i } from "react";
2
+ import { merge as m } from "../../../utilities/merge.es.js";
3
+ import { FOCUS_VISIBLE_STYLE as n } from "../../../utilities/focusStyle.es.js";
4
+ import l from "../../../foundation/Icon/Generated/IconGrabHandle12.es.js";
5
+ const d = i(
6
+ ({ active: e, className: r, ...a }, o) => /* @__PURE__ */ t.createElement(
7
7
  "button",
8
8
  {
9
9
  "aria-label": "Draggable item",
10
- ...o,
11
- ref: a,
12
- className: i([
13
- l,
10
+ ...a,
11
+ ref: o,
12
+ className: m([
13
+ n,
14
14
  "tw-p-1 first:tw-ml-2 tw-text-text tw-opacity-0 group-hover:tw-opacity-100 group-focus-within:tw-opacity-100 tw-rounded-sm hover:tw-cursor-grab",
15
15
  e && "tw-opacity-100 tw-text-white",
16
16
  r
17
- ])
17
+ ]),
18
+ "data-test-id": "fondue-tree-item-drag-handle"
18
19
  },
19
- /* @__PURE__ */ t.createElement(n, null)
20
+ /* @__PURE__ */ t.createElement(l, null)
20
21
  )
21
22
  );
22
- p.displayName = "FondueDragHandle";
23
+ d.displayName = "FondueDragHandle";
23
24
  export {
24
- p as DragHandle
25
+ d as DragHandle
25
26
  };
26
27
  //# sourceMappingURL=DragHandle.es.js.map
package/dist/components/Tree/TreeItem/DragHandle.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DragHandle.es.js","sources":["../../../../src/components/Tree/TreeItem/DragHandle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from 'react';\n\nimport { IconGrabHandle12 } from '@foundation/Icon';\n\nimport { merge } from '@utilities/merge';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nexport type DragHandleProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {\n active?: boolean;\n};\n\nexport const DragHandle = forwardRef(\n ({ active, className, ...props }: DragHandleProps, ref: React.ForwardedRef<HTMLButtonElement>) => {\n return (\n <button\n aria-label=\"Draggable item\"\n {...props}\n ref={ref}\n className={merge([\n FOCUS_VISIBLE_STYLE,\n 'tw-p-1 first:tw-ml-2 tw-text-text tw-opacity-0 group-hover:tw-opacity-100 group-focus-within:tw-opacity-100 tw-rounded-sm hover:tw-cursor-grab',\n active && 'tw-opacity-100 tw-text-white',\n className,\n ])}\n >\n <IconGrabHandle12 />\n </button>\n );\n },\n);\n\nDragHandle.displayName = 'FondueDragHandle';\n"],"names":["DragHandle","forwardRef","active","className","props","ref","React","merge","FOCUS_VISIBLE_STYLE","IconGrabHandle12"],"mappings":";;;;AAaO,MAAMA,IAAaC;AAAA,EACtB,CAAC,EAAE,QAAAC,GAAQ,WAAAC,GAAW,GAAGC,EAAA,GAA0BC,MAE3C,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAW;AAAA,MACV,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAM;AAAA,QACbC;AAAA,QACA;AAAA,QACAN,KAAU;AAAA,QACVC;AAAA,MAAA,CACH;AAAA,IAAA;AAAA,oCAEAM,GAAiB,IAAA;AAAA,EAAA;AAIlC;AAEAT,EAAW,cAAc;"}
1
+ {"version":3,"file":"DragHandle.es.js","sources":["../../../../src/components/Tree/TreeItem/DragHandle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from 'react';\n\nimport { IconGrabHandle12 } from '@foundation/Icon';\n\nimport { merge } from '@utilities/merge';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nexport type DragHandleProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {\n active?: boolean;\n};\n\nexport const DragHandle = forwardRef(\n ({ active, className, ...props }: DragHandleProps, ref: React.ForwardedRef<HTMLButtonElement>) => {\n return (\n <button\n aria-label=\"Draggable item\"\n {...props}\n ref={ref}\n className={merge([\n FOCUS_VISIBLE_STYLE,\n 'tw-p-1 first:tw-ml-2 tw-text-text tw-opacity-0 group-hover:tw-opacity-100 group-focus-within:tw-opacity-100 tw-rounded-sm hover:tw-cursor-grab',\n active && 'tw-opacity-100 tw-text-white',\n className,\n ])}\n data-test-id=\"fondue-tree-item-drag-handle\"\n >\n <IconGrabHandle12 />\n </button>\n );\n },\n);\n\nDragHandle.displayName = 'FondueDragHandle';\n"],"names":["DragHandle","forwardRef","active","className","props","ref","React","merge","FOCUS_VISIBLE_STYLE","IconGrabHandle12"],"mappings":";;;;AAaO,MAAMA,IAAaC;AAAA,EACtB,CAAC,EAAE,QAAAC,GAAQ,WAAAC,GAAW,GAAGC,EAAA,GAA0BC,MAE3C,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAW;AAAA,MACV,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAM;AAAA,QACbC;AAAA,QACA;AAAA,QACAN,KAAU;AAAA,QACVC;AAAA,MAAA,CACH;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,oCAEZM,GAAiB,IAAA;AAAA,EAAA;AAIlC;AAEAT,EAAW,cAAc;"}
package/dist/components/Tree/TreeItem/TreeItemOverlay.es.js CHANGED
@@ -13,7 +13,7 @@ const b = ({ id: a, label: e, level: r = 0, children: o, contentComponent: i, is
13
13
  "aria-label": e,
14
14
  "aria-level": r + 1,
15
15
  "aria-selected": n,
16
- "data-test-id": "tree-item-overlay",
16
+ "data-test-id": "fondue-tree-item-overlay",
17
17
  className: "tw-pointer-events-none tw-bg-white tw-flex tw-items-center tw-gap-x-1 tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10 tw-box-border tw-w-fit tw-drop-shadow-xl tw-rounded"
18
18
  },
19
19
  /* @__PURE__ */ t.createElement("button", { tabIndex: -1, className: "tw-p-1 tw-ml-2" }, /* @__PURE__ */ t.createElement(s, null)),
package/dist/components/Tree/TreeItem/TreeItemOverlay.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TreeItemOverlay.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItemOverlay.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, ReactNode } from 'react';\n\nimport { merge } from '@utilities/merge';\nimport { IconGrabHandle12 } from '@foundation/Icon';\n\nimport { INDENTATION_WIDTH } from '../helpers';\n\nexport type Overlay = {\n id: string;\n label?: string;\n level?: number;\n children: ReactNode;\n contentComponent?: ReactNode;\n isSelected?: boolean;\n};\n\nexport const TreeItemOverlay = ({ id, label, level = 0, children, contentComponent, isSelected }: Overlay) => {\n const hasChildren = Children.count(children) > 0;\n\n const indentation = level * INDENTATION_WIDTH;\n\n const liStyle = { marginLeft: indentation };\n\n return (\n <li\n role=\"treeitem\"\n style={liStyle}\n id={id.toString()}\n aria-label={label}\n aria-level={level + 1}\n aria-selected={isSelected}\n data-test-id=\"tree-item-overlay\"\n className=\"tw-pointer-events-none tw-bg-white tw-flex tw-items-center tw-gap-x-1 tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10 tw-box-border tw-w-fit tw-drop-shadow-xl tw-rounded\"\n >\n <button tabIndex={-1} className=\"tw-p-1 tw-ml-2\">\n <IconGrabHandle12 />\n </button>\n {hasChildren && (\n <button tabIndex={-1} data-test-id=\"tree-item-toggle\" className=\"tw-p-1\">\n <div\n className={merge([\n 'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n isSelected && 'tw-text-box-selected-strong-inverse',\n ])}\n />\n </button>\n )}\n\n {label !== undefined && <span>{label}</span>}\n\n {contentComponent}\n </li>\n );\n};\n\nTreeItemOverlay.displayName = 'FondueTreeItemOverlay';\n"],"names":["TreeItemOverlay","id","label","level","children","contentComponent","isSelected","hasChildren","Children","liStyle","INDENTATION_WIDTH","React","IconGrabHandle12","merge"],"mappings":";;;;AAkBa,MAAAA,IAAkB,CAAC,EAAE,IAAAC,GAAI,OAAAC,GAAO,OAAAC,IAAQ,GAAG,UAAAC,GAAU,kBAAAC,GAAkB,YAAAC,QAA0B;AAC1G,QAAMC,IAAcC,EAAS,MAAMJ,CAAQ,IAAI,GAIzCK,IAAU,EAAE,YAFEN,IAAQO;AAKxB,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,OAAOF;AAAA,MACP,IAAIR,EAAG,SAAS;AAAA,MAChB,cAAYC;AAAA,MACZ,cAAYC,IAAQ;AAAA,MACpB,iBAAeG;AAAA,MACf,gBAAa;AAAA,MACb,WAAU;AAAA,IAAA;AAAA,IAEV,gBAAAK,EAAA,cAAC,YAAO,UAAU,IAAI,WAAU,iBAC5B,GAAA,gBAAAA,EAAA,cAACC,OAAiB,CACtB;AAAA,IACCL,qCACI,UAAO,EAAA,UAAU,IAAI,gBAAa,oBAAmB,WAAU,SAC5D,GAAA,gBAAAI,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWE,EAAM;AAAA,UACb;AAAA,UACAP,KAAc;AAAA,QAAA,CACjB;AAAA,MAAA;AAAA,IAAA,CAET;AAAA,IAGHJ,MAAU,UAAc,gBAAAS,EAAA,cAAA,QAAA,MAAMT,CAAM;AAAA,IAEpCG;AAAA,EAAA;AAGb;AAEAL,EAAgB,cAAc;"}
1
+ {"version":3,"file":"TreeItemOverlay.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItemOverlay.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, ReactNode } from 'react';\n\nimport { merge } from '@utilities/merge';\nimport { IconGrabHandle12 } from '@foundation/Icon';\n\nimport { INDENTATION_WIDTH } from '../helpers';\n\nexport type Overlay = {\n id: string;\n label?: string;\n level?: number;\n children: ReactNode;\n contentComponent?: ReactNode;\n isSelected?: boolean;\n};\n\nexport const TreeItemOverlay = ({ id, label, level = 0, children, contentComponent, isSelected }: Overlay) => {\n const hasChildren = Children.count(children) > 0;\n\n const indentation = level * INDENTATION_WIDTH;\n\n const liStyle = { marginLeft: indentation };\n\n return (\n <li\n role=\"treeitem\"\n style={liStyle}\n id={id.toString()}\n aria-label={label}\n aria-level={level + 1}\n aria-selected={isSelected}\n data-test-id=\"fondue-tree-item-overlay\"\n className=\"tw-pointer-events-none tw-bg-white tw-flex tw-items-center tw-gap-x-1 tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10 tw-box-border tw-w-fit tw-drop-shadow-xl tw-rounded\"\n >\n <button tabIndex={-1} className=\"tw-p-1 tw-ml-2\">\n <IconGrabHandle12 />\n </button>\n {hasChildren && (\n <button tabIndex={-1} data-test-id=\"tree-item-toggle\" className=\"tw-p-1\">\n <div\n className={merge([\n 'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n isSelected && 'tw-text-box-selected-strong-inverse',\n ])}\n />\n </button>\n )}\n\n {label !== undefined && <span>{label}</span>}\n\n {contentComponent}\n </li>\n );\n};\n\nTreeItemOverlay.displayName = 'FondueTreeItemOverlay';\n"],"names":["TreeItemOverlay","id","label","level","children","contentComponent","isSelected","hasChildren","Children","liStyle","INDENTATION_WIDTH","React","IconGrabHandle12","merge"],"mappings":";;;;AAkBa,MAAAA,IAAkB,CAAC,EAAE,IAAAC,GAAI,OAAAC,GAAO,OAAAC,IAAQ,GAAG,UAAAC,GAAU,kBAAAC,GAAkB,YAAAC,QAA0B;AAC1G,QAAMC,IAAcC,EAAS,MAAMJ,CAAQ,IAAI,GAIzCK,IAAU,EAAE,YAFEN,IAAQO;AAKxB,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,OAAOF;AAAA,MACP,IAAIR,EAAG,SAAS;AAAA,MAChB,cAAYC;AAAA,MACZ,cAAYC,IAAQ;AAAA,MACpB,iBAAeG;AAAA,MACf,gBAAa;AAAA,MACb,WAAU;AAAA,IAAA;AAAA,IAEV,gBAAAK,EAAA,cAAC,YAAO,UAAU,IAAI,WAAU,iBAC5B,GAAA,gBAAAA,EAAA,cAACC,OAAiB,CACtB;AAAA,IACCL,qCACI,UAAO,EAAA,UAAU,IAAI,gBAAa,oBAAmB,WAAU,SAC5D,GAAA,gBAAAI,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWE,EAAM;AAAA,UACb;AAAA,UACAP,KAAc;AAAA,QAAA,CACjB;AAAA,MAAA;AAAA,IAAA,CAET;AAAA,IAGHJ,MAAU,UAAc,gBAAAS,EAAA,cAAA,QAAA,MAAMT,CAAM;AAAA,IAEpCG;AAAA,EAAA;AAGb;AAEAL,EAAgB,cAAc;"}