@synergy-design-system/react 1.7.0 → 1.8.0

package/dist/chunks/chunk.BQ62A32K.js

@@ -0,0 +1,25 @@
+// ../react/src/components/drawer.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/drawer/drawer.component.js";
+var tagName = "syn-drawer";
+Component.define("syn-drawer");
+var SynDrawer = createComponent({
+  displayName: "SynDrawer",
+  elementClass: Component,
+  events: {
+    onSynShow: "syn-show",
+    onSynAfterShow: "syn-after-show",
+    onSynHide: "syn-hide",
+    onSynAfterHide: "syn-after-hide",
+    onSynInitialFocus: "syn-initial-focus",
+    onSynRequestClose: "syn-request-close"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynDrawer
+};
+//# sourceMappingURL=chunk.BQ62A32K.js.map

package/dist/chunks/chunk.BQ62A32K.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/drawer.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/drawer/drawer.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n  SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynInitialFocusEvent, SynRequestCloseEvent, SynShowEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-drawer';\nComponent.define('syn-drawer');\n\n/**\n * @summary Drawers slide in from a container to expose additional options and information.\n * @documentation https://synergy.style/components/drawer\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The drawer's main content.\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @event syn-show - Emitted when the drawer opens.\n * @event syn-after-show - Emitted after the drawer opens and all animations are complete.\n * @event syn-hide - Emitted when the drawer closes.\n * @event syn-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event syn-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to\n *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - The component's base wrapper.\n * @csspart overlay - The overlay that covers the screen behind the drawer.\n * @csspart panel - The drawer's panel (where the drawer and its content are rendered).\n * @csspart header - The drawer's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n * @csspart title - The drawer's title.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n * @csspart body - The drawer's body.\n * @csspart footer - The drawer's footer.\n *\n * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height\n *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n *\n * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.\n * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.\n * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.\n * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.\n * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.\n * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.\n * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.\n * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.\n * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.\n * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.\n * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.\n *\n * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus\n *   trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when\n *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.\n */\nexport const SynDrawer = createComponent({\n  displayName: 'SynDrawer',\n  elementClass: Component,\n  events: {\n    onSynShow: 'syn-show' as EventName<SynShowEvent>,\n    onSynAfterShow: 'syn-after-show' as EventName<SynAfterShowEvent>,\n    onSynHide: 'syn-hide' as EventName<SynHideEvent>,\n    onSynAfterHide: 'syn-after-hide' as EventName<SynAfterHideEvent>,\n    onSynInitialFocus: 'syn-initial-focus' as EventName<SynInitialFocusEvent>,\n    onSynRequestClose: 'syn-request-close' as EventName<SynRequestCloseEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynShowEvent } from '@synergy-design-system/components';\nexport type { SynAfterShowEvent } from '@synergy-design-system/components';\nexport type { SynHideEvent } from '@synergy-design-system/components';\nexport type { SynAfterHideEvent } from '@synergy-design-system/components';\nexport type { SynInitialFocusEvent } from '@synergy-design-system/components';\nexport type { SynRequestCloseEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,YAAY;AA2DtB,IAAM,YAAY,gBAAgB;AAAA,EACvC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,EACrB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/components/drawer.d.ts

@@ -0,0 +1,74 @@
+import Component from '@synergy-design-system/components/components/drawer/drawer.component.js';
+import { type EventName } from '@lit/react';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynInitialFocusEvent, SynRequestCloseEvent, SynShowEvent } from '@synergy-design-system/components';
+/**
+ * @summary Drawers slide in from a container to expose additional options and information.
+ * @documentation https://synergy.style/components/drawer
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The drawer's main content.
+ * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
+ * @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
+ * @slot footer - The drawer's footer, usually one or more buttons representing various options.
+ *
+ * @event syn-show - Emitted when the drawer opens.
+ * @event syn-after-show - Emitted after the drawer opens and all animations are complete.
+ * @event syn-hide - Emitted when the drawer closes.
+ * @event syn-after-hide - Emitted after the drawer closes and all animations are complete.
+ * @event syn-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling
+ *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+ * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to
+ *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling
+ *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
+ *   destructive behavior such as data loss.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart overlay - The overlay that covers the screen behind the drawer.
+ * @csspart panel - The drawer's panel (where the drawer and its content are rendered).
+ * @csspart header - The drawer's header. This element wraps the title and header actions.
+ * @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
+ * @csspart title - The drawer's title.
+ * @csspart close-button - The close button, an `<syn-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ * @csspart body - The drawer's body.
+ * @csspart footer - The drawer's footer.
+ *
+ * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height
+ *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.
+ * @cssproperty --header-spacing - The amount of padding to use for the header.
+ * @cssproperty --body-spacing - The amount of padding to use for the body.
+ * @cssproperty --footer-spacing - The amount of padding to use for the footer.
+ *
+ * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.
+ * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.
+ * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.
+ * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.
+ * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.
+ * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.
+ * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.
+ * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.
+ * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.
+ * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.
+ * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.
+ *
+ * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
+ *   trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when
+ *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
+ */
+export declare const SynDrawer: import("@lit/react").ReactWebComponent<Component, {
+    onSynShow: EventName<SynShowEvent>;
+    onSynAfterShow: EventName<SynAfterShowEvent>;
+    onSynHide: EventName<SynHideEvent>;
+    onSynAfterHide: EventName<SynAfterHideEvent>;
+    onSynInitialFocus: EventName<SynInitialFocusEvent>;
+    onSynRequestClose: EventName<SynRequestCloseEvent>;
+}>;
+export type { SynShowEvent } from '@synergy-design-system/components';
+export type { SynAfterShowEvent } from '@synergy-design-system/components';
+export type { SynHideEvent } from '@synergy-design-system/components';
+export type { SynAfterHideEvent } from '@synergy-design-system/components';
+export type { SynInitialFocusEvent } from '@synergy-design-system/components';
+export type { SynRequestCloseEvent } from '@synergy-design-system/components';

package/dist/components/drawer.js

@@ -0,0 +1,7 @@
+import {
+  SynDrawer
+} from "../chunks/chunk.BQ62A32K.js";
+export {
+  SynDrawer
+};
+//# sourceMappingURL=drawer.js.map

package/dist/components/drawer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { SynButton } from './components/button.js';
 export { SynButtonGroup } from './components/button-group.js';
 export { SynCheckbox } from './components/checkbox.js';
 export { SynDivider } from './components/divider.js';
+export { SynDrawer } from './components/drawer.js';
 export { SynIcon } from './components/icon.js';
 export { SynIconButton } from './components/icon-button.js';
 export { SynInput } from './components/input.js';

package/dist/index.js

@@ -1,6 +1,12 @@
+import {
+  SynTag
+} from "./chunks/chunk.7T7PO2AE.js";
 import {
   SynTextarea
 } from "./chunks/chunk.4YY6TGIA.js";
+import {
+  SynInput
+} from "./chunks/chunk.N6QQSQTB.js";
 import {
   SynOptgroup
 } from "./chunks/chunk.DLAIDGSD.js";
@@ -22,9 +28,6 @@ import {
 import {
   SynSwitch
 } from "./chunks/chunk.TOR523VV.js";
-import {
-  SynTag
-} from "./chunks/chunk.7T7PO2AE.js";
 import {
   SynButtonGroup
 } from "./chunks/chunk.6OTEQXZW.js";
@@ -37,20 +40,21 @@ import {
 import {
   SynDivider
 } from "./chunks/chunk.HKOGDFA5.js";
+import {
+  SynDrawer
+} from "./chunks/chunk.BQ62A32K.js";
 import {
   SynIconButton
 } from "./chunks/chunk.W4YO4ERO.js";
 import {
   SynIcon
 } from "./chunks/chunk.6CO3KAZG.js";
-import {
-  SynInput
-} from "./chunks/chunk.N6QQSQTB.js";
 export {
   SynButton,
   SynButtonGroup,
   SynCheckbox,
   SynDivider,
+  SynDrawer,
   SynIcon,
   SynIconButton,
   SynInput,

package/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.3",
-    "@synergy-design-system/components": "^1.7.0"
+    "@synergy-design-system/components": "^1.8.0"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -40,7 +40,7 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "devDependencies": {
     "@types/react": "^18.2.55",
     "react": "^18.2.0"