@instructure/ui-drawer-layout 11.6.0 → 11.6.1-snapshot-129

package/lib/DrawerLayout/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['children', 'minWidth', 'onOverlayTrayChange', 'dir'];

package/lib/DrawerLayout/v2/styles.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = () => {
+  return {
+    drawerLayout: {
+      label: 'drawerLayout',
+      position: 'relative',
+      height: '100%'
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/{index.js → exports/a.js}

@@ -6,19 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "DrawerContent", {
   enumerable: true,
   get: function () {
-    return _DrawerLayout.DrawerContent;
+    return _v.DrawerContent;
   }
 });
 Object.defineProperty(exports, "DrawerLayout", {
   enumerable: true,
   get: function () {
-    return _DrawerLayout.DrawerLayout;
+    return _v.DrawerLayout;
   }
 });
 Object.defineProperty(exports, "DrawerTray", {
   enumerable: true,
   get: function () {
-    return _DrawerLayout.DrawerTray;
+    return _v.DrawerTray;
   }
 });
-var _DrawerLayout = require("./DrawerLayout");
+var _v = require("../DrawerLayout/v1");

package/lib/exports/b.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DrawerContent", {
+  enumerable: true,
+  get: function () {
+    return _v.DrawerContent;
+  }
+});
+Object.defineProperty(exports, "DrawerLayout", {
+  enumerable: true,
+  get: function () {
+    return _v.DrawerLayout;
+  }
+});
+Object.defineProperty(exports, "DrawerTray", {
+  enumerable: true,
+  get: function () {
+    return _v.DrawerTray;
+  }
+});
+var _v = require("../DrawerLayout/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-drawer-layout",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A main-content-plus-tray layout component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,28 +15,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.6.0",
-    "@instructure/debounce": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-dialog": "11.6.0",
-    "@instructure/ui-i18n": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/ui-motion": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-portal": "11.6.0",
-    "@instructure/ui-view": "11.6.0",
-    "@instructure/ui-position": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/uid": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/debounce": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-dialog": "11.6.1-snapshot-129",
+    "@instructure/ui-i18n": "11.6.1-snapshot-129",
+    "@instructure/ui-motion": "11.6.1-snapshot-129",
+    "@instructure/ui-dom-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-portal": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-position": "11.6.1-snapshot-129",
+    "@instructure/uid": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-buttons": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-buttons": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -46,17 +46,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/DrawerLayout/{DrawerContent → v1/DrawerContent}/index.tsx

@@ -28,7 +28,7 @@ import { debounce } from '@instructure/debounce'
 import type { Debounced } from '@instructure/debounce'
 import { getBoundingClientRect } from '@instructure/ui-dom-utils'
 import { omitProps } from '@instructure/ui-react-utils'
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/DrawerLayout/{DrawerTray → v1/DrawerTray}/index.tsx

@@ -24,7 +24,7 @@
 
 import { Component } from 'react'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 import { textDirectionContextConsumer } from '@instructure/ui-i18n'
 import { Transition } from '@instructure/ui-motion'
 import type { TransitionType } from '@instructure/ui-motion'

package/src/DrawerLayout/v1/index.tsx

@@ -0,0 +1,334 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { ComponentElement, Children, Component, createContext } from 'react'
+
+import { textDirectionContextConsumer } from '@instructure/ui-i18n'
+import {
+  matchComponentTypes,
+  safeCloneElement,
+  withDeterministicId
+} from '@instructure/ui-react-utils'
+import { getBoundingClientRect } from '@instructure/ui-dom-utils'
+import { createChainedFunction, px } from '@instructure/ui-utils'
+import { logError as error } from '@instructure/console'
+
+import { mirrorHorizontalPlacement } from '@instructure/ui-position'
+import type { PlacementPropValues } from '@instructure/ui-position'
+
+import { DrawerContent } from './DrawerContent'
+import type {
+  DrawerLayoutContentProps,
+  DrawerContentSize
+} from './DrawerContent/props'
+import { DrawerTray } from './DrawerTray'
+import type { DrawerLayoutTrayProps } from './DrawerTray/props'
+
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type { DrawerLayoutProps, DrawerLayoutState } from './props'
+
+type TrayChild = ComponentElement<
+  DrawerLayoutTrayProps & React.Attributes,
+  DrawerTray
+>
+type ContentChild = ComponentElement<
+  DrawerLayoutContentProps & React.Attributes,
+  DrawerContent
+>
+type DrawerChildren = (TrayChild | ContentChild)[]
+
+/**
+---
+category: components
+---
+**/
+@withDeterministicId()
+@withStyle(generateStyle, null)
+@textDirectionContextConsumer()
+class DrawerLayout extends Component<DrawerLayoutProps, DrawerLayoutState> {
+  static readonly componentId = 'DrawerLayout'
+
+  static locatorAttribute = 'data-drawer-layout'
+  static allowedProps = allowedProps
+  static defaultProps = {
+    minWidth: '30rem'
+  }
+
+  static Content = DrawerContent
+  static Tray = DrawerTray
+
+  constructor(props: DrawerLayoutProps) {
+    super(props)
+
+    this.state = {
+      shouldOverlayTray: false,
+      trayWidth: 0,
+      contentWidth: 0
+    }
+
+    this._id = props.deterministicId!()
+  }
+
+  private readonly _id: string
+  private _content: HTMLDivElement | null = null
+  private _tray: HTMLDivElement | null = null
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  get trayProps() {
+    const tray = (
+      Children.toArray(this.props.children) as DrawerChildren
+    ).filter((child) =>
+      matchComponentTypes<TrayChild>(child, [DrawerTray])
+    )[0] as TrayChild
+    return tray.props
+  }
+
+  get trayPlacement(): PlacementPropValues {
+    const { placement, dir = this.props.dir } = this.trayProps
+    const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl
+    return isRtl ? mirrorHorizontalPlacement(placement!, ' ') : placement!
+  }
+
+  get contentMargin() {
+    const trayWidth = this.state.trayWidth || 0
+    return this.state.shouldOverlayTray ? 0 : trayWidth
+  }
+
+  get contentStyle() {
+    const shouldOverlayTray = this.shouldOverlayTray(
+      this.props.minWidth!,
+      this.state.trayWidth,
+      this.state.contentWidth,
+      this.state.shouldOverlayTray
+    )
+    let marginLeft = 0
+    let marginRight = 0
+
+    if (!shouldOverlayTray) {
+      if (this.trayPlacement === 'start') {
+        marginLeft = this.contentMargin
+      }
+
+      if (this.trayPlacement === 'end') {
+        marginRight = this.contentMargin
+      }
+    }
+
+    return {
+      marginLeft: `${marginLeft}px`,
+      marginRight: `${marginRight}px`
+    }
+  }
+
+  handleTrayContentRef = (el: HTMLDivElement | null) => {
+    this._tray = el
+  }
+
+  shouldOverlayTray(
+    minWidth: string,
+    trayWidth: number,
+    contentWidth: number,
+    trayIsOverlayed: boolean
+  ) {
+    if (!this._content) return false
+
+    const minWidthPx = px(minWidth, this._content)
+
+    if (trayIsOverlayed) {
+      return contentWidth - trayWidth < minWidthPx
+    } else {
+      return contentWidth < minWidthPx
+    }
+  }
+
+  getNextState(
+    minWidth: string,
+    trayWidth: number,
+    contentWidth: number,
+    trayIsOverlayed: boolean
+  ) {
+    const shouldOverlayTray = this.shouldOverlayTray(
+      minWidth,
+      trayWidth,
+      contentWidth,
+      trayIsOverlayed
+    )
+
+    return {
+      trayWidth,
+      contentWidth,
+      shouldOverlayTray
+    }
+  }
+
+  notifyOverlayTrayChange(shouldOverlayTray: boolean) {
+    const { onOverlayTrayChange } = this.props
+
+    if (typeof onOverlayTrayChange === 'function') {
+      onOverlayTrayChange(shouldOverlayTray)
+    }
+  }
+
+  handleContentSizeChange = ({ width }: DrawerContentSize) => {
+    this.setState((state, props) => {
+      const nextState = this.getNextState(
+        props.minWidth!,
+        state.trayWidth,
+        width,
+        state.shouldOverlayTray
+      )
+      if (state.shouldOverlayTray !== nextState.shouldOverlayTray) {
+        this.notifyOverlayTrayChange(nextState.shouldOverlayTray)
+      }
+
+      return nextState
+    })
+  }
+
+  handleTraySizeChange = ({ width }: { width: number }) => {
+    this.setState((state, props) => {
+      const nextState = this.getNextState(
+        props.minWidth!,
+        width,
+        state.contentWidth,
+        true
+      )
+
+      if (state.shouldOverlayTray !== nextState.shouldOverlayTray) {
+        this.notifyOverlayTrayChange(nextState.shouldOverlayTray)
+      }
+
+      return nextState
+    })
+  }
+
+  handleTrayTransitionEnter = () => {
+    let width = 0
+
+    if (this._tray) {
+      width = getBoundingClientRect(this._tray).width
+    }
+
+    this.handleTraySizeChange({ width })
+  }
+
+  handleTrayTransitionExit = () => {
+    this.handleTraySizeChange({ width: 0 })
+  }
+
+  renderChildren() {
+    let trayCount = 0
+    let contentCount = 0
+
+    const children = Children.map(
+      this.props.children as DrawerChildren,
+      (child, _index) => {
+        if (matchComponentTypes<TrayChild>(child, [DrawerTray])) {
+          trayCount++
+          return safeCloneElement(child, {
+            label: child.props.label,
+            key: child.props.label,
+            [DrawerTray.locatorAttribute]: this._id,
+            contentRef: this.handleTrayContentRef,
+            onEnter: this.handleTrayTransitionEnter,
+            onExit: this.handleTrayTransitionExit
+          }) as TrayChild
+        } else if (matchComponentTypes<ContentChild>(child, [DrawerContent])) {
+          contentCount++
+
+          const handleContentRef = (el: HTMLDivElement | null) => {
+            const { contentRef } = child.props
+
+            this._content = el
+
+            if (typeof contentRef === 'function') {
+              contentRef(el)
+            }
+          }
+
+          return this.state.trayWidth !== null
+            ? (safeCloneElement(child, {
+                label: child.props.label,
+                key: child.props.label,
+                [DrawerContent.locatorAttribute]: this._id,
+                style: this.contentStyle,
+                onSizeChange: createChainedFunction(
+                  this.handleContentSizeChange,
+                  child.props.onSizeChange
+                ),
+                contentRef: handleContentRef
+              }) as ContentChild)
+            : null
+        } else {
+          return child as ContentChild | TrayChild
+        }
+      }
+    )
+
+    error(
+      trayCount <= 1,
+      `[DrawerLayout] Only one 'DrawerTray' per 'DrawerLayout' is supported.`
+    )
+    error(
+      contentCount <= 1,
+      `[DrawerLayout] Only one 'DrawerContent' per 'DrawerLayout' is supported.`
+    )
+    return children
+  }
+
+  render() {
+    const props = { [DrawerLayout.locatorAttribute]: this._id }
+    return (
+      <DrawerLayoutContext.Provider value={this.state.shouldOverlayTray}>
+        <div
+          {...props}
+          css={this.props.styles?.drawerLayout}
+          ref={this.handleRef}
+          data-cid="DrawerLayout"
+        >
+          {this.renderChildren()}
+        </div>
+      </DrawerLayoutContext.Provider>
+    )
+  }
+}
+export default DrawerLayout
+export { DrawerLayout, DrawerContent, DrawerTray }
+export const DrawerLayoutContext = createContext(false)