@instructure/ui-view 11.6.0 → 11.6.1-snapshot-129

package/es/View/v2/styles.js

@@ -0,0 +1,420 @@
+/*
+ * 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 { DIRECTION } from '@instructure/ui-i18n';
+import { calcSpacingFromShorthand, mirrorShorthandEdges, mirrorShorthandCorners, calcFocusOutlineStyles } from '@instructure/emotion';
+import { pickProps } from '@instructure/ui-react-utils';
+import { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
+const processBorderRadiusValue = (value, sharedTokens) => {
+  if (!value) return '';
+
+  // Split by spaces to handle CSS shorthand (1-4 values)
+  const values = value.split(' ');
+  const processedValues = values.map(v => {
+    // Handle special cases
+    if (v === 'auto' || v === '0') return v;
+    if (v === 'none') return '0';
+    if (v === 'circle') return '100%';
+    if (v === 'pill') return '999em';
+
+    // Handle SharedTokens values
+    if (v === 'small') return sharedTokens.legacy.radiusSmall; // 2px in Canvas
+    if (v === 'medium') return sharedTokens.legacy.radiusMedium; // 4px in Canvas
+    if (v === 'large') return sharedTokens.legacy.radiusLarge; // 8px in Canvas
+
+    // Pass through CSS values (1rem, 12px, etc.)
+    return v;
+  });
+  return processedValues.join(' ');
+};
+const processBorderWidthValue = (value, sharedTokens) => {
+  if (!value) return '';
+
+  // Split by spaces to handle CSS shorthand (1-4 values)
+  const values = value.split(' ');
+  const processedValues = values.map(v => {
+    // Handle special cases
+    if (v === 'auto' || v === '0') return v;
+    if (v === 'none') return '0';
+
+    // Handle SharedTokens values
+    if (v === 'small') return sharedTokens.strokeWidth.sm;
+    if (v === 'medium') return sharedTokens.strokeWidth.md;
+    if (v === 'large') return sharedTokens.strokeWidth.lg;
+
+    // Pass through CSS values (1rem, 2px, etc.)
+    return v;
+  });
+  return processedValues.join(' ');
+};
+const getBorderStyle = ({
+  borderRadius,
+  borderWidth,
+  dir,
+  sharedTokens
+}) => {
+  const isRtlDirection = dir === DIRECTION.rtl;
+  return {
+    borderRadius: processBorderRadiusValue(isRtlDirection ? mirrorShorthandCorners(borderRadius) : borderRadius, sharedTokens),
+    borderWidth: processBorderWidthValue(isRtlDirection ? mirrorShorthandEdges(borderWidth) : borderWidth, sharedTokens)
+  };
+};
+const getSpacingStyle = ({
+  margin,
+  padding,
+  dir,
+  sharedTokens
+}) => {
+  const isRtlDirection = dir === DIRECTION.rtl;
+  return {
+    // TODO handle the merging on tokens inside the util
+    margin: calcSpacingFromShorthand(isRtlDirection ? mirrorShorthandEdges(margin) : margin, {
+      ...sharedTokens.spacing,
+      ...sharedTokens.legacy.spacing
+    }),
+    padding: calcSpacingFromShorthand(isRtlDirection ? mirrorShorthandEdges(padding) : padding, {
+      ...sharedTokens.spacing,
+      ...sharedTokens.legacy.spacing
+    })
+  };
+};
+const getOffsetStyle = ({
+  insetBlockStart,
+  insetBlockEnd,
+  insetInlineStart,
+  insetInlineEnd,
+  dir
+}) => {
+  const isRtlDirection = dir === DIRECTION.rtl;
+  const blockStart = {
+    top: insetBlockStart,
+    insetBlockStart
+  };
+  const blockEnd = {
+    bottom: insetBlockEnd,
+    insetBlockEnd
+  };
+  const horizontalOffsets = {
+    left: isRtlDirection ? insetInlineEnd : insetInlineStart,
+    right: isRtlDirection ? insetInlineStart : insetInlineEnd
+  };
+  return {
+    ...blockStart,
+    ...blockEnd,
+    ...horizontalOffsets
+  };
+};
+const getStyleProps = ({
+  cursor,
+  style
+}) => {
+  const whitelisted = pickProps(style || {}, {}, [
+  // Position/calculateElementPosition:
+  'top', 'left', 'position', 'display', 'transform', 'overflow', 'minWidth', 'minHeight',
+  // Img:
+  'filter',
+  // Flex.Item:
+  'flexBasis',
+  // Avatar:
+  'backgroundImage',
+  // Popover:
+  'pointerEvents']);
+  if (cursor) {
+    whitelisted.cursor = cursor;
+  }
+  return whitelisted;
+};
+const withBorder = props => {
+  const borderWidth = props.borderWidth;
+  return borderWidth && borderWidth !== '0' && borderWidth !== 'none';
+};
+
+/**
+ * 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
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, sharedTokens) => {
+  const borderRadius = props.borderRadius,
+    borderWidth = props.borderWidth,
+    margin = props.margin,
+    padding = props.padding,
+    position = props.position,
+    display = props.display,
+    textAlign = props.textAlign,
+    borderColor = props.borderColor,
+    background = props.background,
+    stacking = props.stacking,
+    shadow = props.shadow,
+    overflowY = props.overflowY,
+    overflowX = props.overflowX,
+    overscrollBehavior = props.overscrollBehavior,
+    insetBlockEnd = props.insetBlockEnd,
+    insetBlockStart = props.insetBlockStart,
+    insetInlineEnd = props.insetInlineEnd,
+    insetInlineStart = props.insetInlineStart,
+    width = props.width,
+    height = props.height,
+    minWidth = props.minWidth,
+    minHeight = props.minHeight,
+    maxWidth = props.maxWidth,
+    maxHeight = props.maxHeight,
+    withVisualDebug = props.withVisualDebug,
+    dir = props.dir;
+  const borderStyle = getBorderStyle({
+    sharedTokens,
+    borderRadius,
+    borderWidth,
+    dir
+  });
+  const spacingStyle = getSpacingStyle({
+    margin,
+    padding,
+    sharedTokens,
+    dir
+  });
+  const offsetStyle = getOffsetStyle({
+    dir,
+    insetBlockEnd,
+    insetBlockStart,
+    insetInlineEnd,
+    insetInlineStart
+  });
+  const displayVariants = {
+    inline: {
+      label: 'view--inline',
+      display: 'inline'
+    },
+    block: {
+      label: 'view--block',
+      display: 'block'
+    },
+    'inline-block': {
+      label: 'view--inlineBlock',
+      display: 'inline-block',
+      verticalAlign: 'middle'
+    },
+    flex: {
+      label: 'view--flex',
+      display: 'flex'
+    },
+    'inline-flex': {
+      label: 'view--inlineFlex',
+      display: 'inline-flex',
+      verticalAlign: 'middle'
+    },
+    contents: {
+      label: 'view--contents',
+      display: 'contents'
+    },
+    inherit: {
+      label: 'view--inherit',
+      display: 'inherit'
+    },
+    initial: {
+      label: 'view--initial',
+      display: 'initial'
+    },
+    revert: {
+      label: 'view--revert',
+      display: 'revert'
+    },
+    'revert-layer': {
+      label: 'view--revertLayer',
+      display: 'revert-layer'
+    },
+    unset: {
+      label: 'view--unset',
+      display: 'unset'
+    },
+    auto: {}
+  };
+  const textAlignVariants = {
+    start: {
+      textAlign: 'start'
+    },
+    center: {
+      textAlign: 'center'
+    },
+    end: {
+      textAlign: 'end'
+    }
+  };
+  const borderColorVariants = {
+    transparent: {
+      borderColor: componentTheme.borderColorTransparent
+    },
+    primary: {
+      borderColor: componentTheme.borderColorPrimary
+    },
+    secondary: {
+      borderColor: componentTheme.borderColorSecondary
+    },
+    brand: {
+      borderColor: componentTheme.borderColorBrand
+    },
+    info: {
+      borderColor: componentTheme.borderColorInfo
+    },
+    success: {
+      borderColor: componentTheme.borderColorSuccess
+    },
+    warning: {
+      borderColor: componentTheme.borderColorWarning
+    },
+    alert: {
+      borderColor: componentTheme.borderColorAlert
+    },
+    danger: {
+      borderColor: componentTheme.borderColorDanger
+    }
+  };
+  const backgroundColorVariants = {
+    transparent: {
+      color: componentTheme.color,
+      background: 'none'
+    },
+    primary: {
+      color: componentTheme.color,
+      background: componentTheme.backgroundPrimary
+    },
+    secondary: {
+      color: componentTheme.color,
+      background: componentTheme.backgroundSecondary
+    },
+    ['primary-inverse']: {
+      color: componentTheme.colorPrimaryInverse,
+      background: componentTheme.backgroundPrimaryInverse
+    },
+    brand: {
+      color: componentTheme.colorPrimaryInverse,
+      background: componentTheme.backgroundBrand
+    },
+    info: {
+      color: componentTheme.colorPrimaryInverse,
+      background: componentTheme.backgroundInfo
+    },
+    alert: {
+      color: componentTheme.colorPrimaryInverse,
+      background: componentTheme.backgroundAlert
+    },
+    success: {
+      color: componentTheme.colorPrimaryInverse,
+      background: componentTheme.backgroundSuccess
+    },
+    danger: {
+      color: componentTheme.colorPrimaryInverse,
+      background: componentTheme.backgroundDanger
+    },
+    warning: {
+      color: componentTheme.colorPrimaryInverse,
+      background: componentTheme.backgroundWarning
+    }
+  };
+  const stackingVariants = {
+    topmost: {
+      zIndex: componentTheme.stackingTopmost
+    },
+    above: {
+      zIndex: componentTheme.stackingAbove
+    },
+    resting: {},
+    below: {
+      zIndex: componentTheme.stackingBelow
+    },
+    deepest: {
+      zIndex: componentTheme.stackingDeepest
+    }
+  };
+  const shadowVariants = {
+    topmost: {
+      boxShadow: boxShadowObjectsToCSSString(sharedTokens.boxShadow.elevation4)
+    },
+    resting: {
+      boxShadow: boxShadowObjectsToCSSString(sharedTokens.boxShadow.elevation1)
+    },
+    above: {
+      boxShadow: boxShadowObjectsToCSSString(sharedTokens.boxShadow.elevation2)
+    },
+    none: {}
+  };
+  const focusColor = props.focusColor,
+    focusPosition = props.focusPosition,
+    shouldAnimateFocus = props.shouldAnimateFocus,
+    withFocusOutline = props.withFocusOutline,
+    focusWithin = props.focusWithin;
+  const focusOutline = calcFocusOutlineStyles(sharedTokens.focusOutline, {
+    focusColor,
+    focusPosition,
+    shouldAnimateFocus,
+    focusWithin,
+    withFocusOutline
+  });
+  return {
+    view: {
+      label: 'view',
+      boxSizing: 'border-box',
+      fontFamily: componentTheme.fontFamily,
+      maxWidth: '100%',
+      overflow: 'visible',
+      ...displayVariants[display],
+      ...(background && backgroundColorVariants[background]),
+      ...(stacking && stackingVariants[stacking]),
+      ...(shadow && shadowVariants[shadow]),
+      ...(textAlign && textAlignVariants[textAlign]),
+      overflowX: overflowX && overflowX !== 'visible' ? overflowX : '',
+      overflowY: overflowY && overflowY !== 'visible' ? overflowY : '',
+      position: position !== 'static' ? position : '',
+      overscrollBehavior: overscrollBehavior ? overscrollBehavior : 'auto',
+      ...(withVisualDebug ? {
+        boxShadow: `0 0 0 1px ${componentTheme.debugOutlineColor}`
+      } : {}),
+      ...(withBorder(props) ? {
+        borderStyle: componentTheme.borderStyle,
+        ...(borderColorVariants[borderColor] || {
+          borderColor: borderColor
+        })
+      } : {}),
+      ...borderStyle
+    },
+    inlineStyles: {
+      //every '&' symbol will add another class to the rule, so it will be stronger
+      //making an accidental override less likely
+      '&&&&&&&&&&': {
+        ...offsetStyle,
+        ...focusOutline,
+        width,
+        height,
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight,
+        ...getStyleProps(props),
+        ...spacingStyle
+      }
+    }
+  };
+};
+export default generateStyle;

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

@@ -21,5 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { ContextView } from "./ContextView/index.js";
-export { View } from "./View/index.js";
+export { ContextView } from "../ContextView/v1/index.js";
+export { View } from "../View/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,9 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-export { ContextView } from './ContextView'
-export { View } from './View'
-
-export type { ContextViewProps } from './ContextView/props'
-export type { ViewProps, ViewOwnProps } from './View/props'
+export { ContextView } from "../ContextView/v2/index.js";
+export { View } from "../View/v2/index.js";

package/lib/ContextView/{index.js → v1/index.js}

@@ -8,7 +8,7 @@ exports.default = exports.ContextView = void 0;
 var _react = require("react");
 var _emotion = require("@instructure/emotion");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _View = require("../View");
+var _v = require("../../View/v1");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
@@ -42,7 +42,7 @@ var _dec, _class, _ContextView;
 category: components
 ---
 **/
-let ContextView = exports.ContextView = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ContextView = class ContextView extends _react.Component {
+let ContextView = exports.ContextView = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_ContextView = class ContextView extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -82,7 +82,7 @@ let ContextView = exports.ContextView = (_dec = (0, _emotion.withStyle)(_styles.
       textAlign = _this$props3.textAlign,
       styles = _this$props3.styles,
       borderColor = _this$props3.borderColor;
-    return (0, _jsxRuntime.jsx)(_View.View, {
+    return (0, _jsxRuntime.jsx)(_v.View, {
       ...(0, _omitProps.omitProps)(this.props, ContextView.allowedProps),
       css: styles === null || styles === void 0 ? void 0 : styles.contextView,
       style: style,
@@ -93,7 +93,7 @@ let ContextView = exports.ContextView = (_dec = (0, _emotion.withStyle)(_styles.
       elementRef: this.handleRef,
       margin: margin,
       stacking: stacking,
-      children: (0, _jsxRuntime.jsxs)(_View.View, {
+      children: (0, _jsxRuntime.jsxs)(_v.View, {
         css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
         display: "block",
         borderRadius: "medium",

package/lib/ContextView/v2/index.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ContextView = void 0;
+var _react = require("react");
+var _emotion = require("@instructure/emotion");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _v = require("../../View/v2");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _ContextView;
+/*
+ * 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.
+ */
+/**
+---
+category: components
+---
+**/
+let ContextView = exports.ContextView = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_ContextView = class ContextView extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  render() {
+    const _this$props3 = this.props,
+      as = _this$props3.as,
+      background = _this$props3.background,
+      children = _this$props3.children,
+      debug = _this$props3.debug,
+      height = _this$props3.height,
+      width = _this$props3.width,
+      maxHeight = _this$props3.maxHeight,
+      maxWidth = _this$props3.maxWidth,
+      minHeight = _this$props3.minHeight,
+      minWidth = _this$props3.minWidth,
+      margin = _this$props3.margin,
+      padding = _this$props3.padding,
+      shadow = _this$props3.shadow,
+      stacking = _this$props3.stacking,
+      style = _this$props3.style,
+      textAlign = _this$props3.textAlign,
+      styles = _this$props3.styles,
+      borderColor = _this$props3.borderColor;
+    return (0, _jsxRuntime.jsx)(_v.View, {
+      ...(0, _omitProps.omitProps)(this.props, ContextView.allowedProps),
+      css: styles === null || styles === void 0 ? void 0 : styles.contextView,
+      style: style,
+      borderWidth: "none",
+      display: "inline-block",
+      as: as,
+      withVisualDebug: debug,
+      elementRef: this.handleRef,
+      margin: margin,
+      stacking: stacking,
+      children: (0, _jsxRuntime.jsxs)(_v.View, {
+        css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
+        display: "block",
+        borderRadius: styles === null || styles === void 0 ? void 0 : styles.borderRadius,
+        borderWidth: "small",
+        borderColor: borderColor || (background === 'default' ? 'primary' : 'transparent'),
+        background: background === 'default' ? 'primary' : 'primary-inverse',
+        withVisualDebug: debug,
+        height: height,
+        width: width,
+        maxHeight: maxHeight,
+        maxWidth: maxWidth,
+        minHeight: minHeight,
+        minWidth: minWidth,
+        padding: padding,
+        shadow: shadow,
+        textAlign: textAlign,
+        children: [(0, _jsxRuntime.jsx)("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
+        }), children]
+      })
+    });
+  }
+}, _ContextView.displayName = "ContextView", _ContextView.componentId = 'ContextView', _ContextView.allowedProps = _props.allowedProps, _ContextView.defaultProps = {
+  as: 'span',
+  elementRef: () => {},
+  debug: false,
+  width: 'auto',
+  height: 'auto',
+  children: null,
+  textAlign: 'start',
+  background: 'default',
+  shadow: 'above',
+  placement: 'center end'
+}, _ContextView)) || _class);
+var _default = exports.default = ContextView;

package/lib/ContextView/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 = ['as', 'elementRef', 'margin', 'padding', 'height', 'width', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'children', 'textAlign', 'shadow', 'stacking', 'background', 'placement', 'debug', 'borderColor'];