@instructure/ui-flex 11.7.3 → 11.7.4-pr-snapshot-1781695314229

package/lib/Flex/v2/Item/index.js

@@ -1,104 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Item = void 0;
-var _react = require("react");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _latest = require("@instructure/ui-view/latest");
-var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles"));
-var _props = require("./props");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class;
-/*
- * 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.
- */
-/**
----
-parent: Flex
-id: Flex.Item
----
-**/
-let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = class Item extends _react.Component {
-  static displayName = "Item";
-  static componentId = 'Flex.Item';
-  componentDidMount() {
-    this.props.makeStyles?.();
-  }
-  componentDidUpdate() {
-    this.props.makeStyles?.();
-  }
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    as: 'span',
-    shouldGrow: false,
-    shouldShrink: false
-  };
-  ref = null;
-  handleRef = el => {
-    const {
-      elementRef
-    } = this.props;
-    this.ref = el;
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-  render() {
-    const props = (0, _omitProps.omitProps)(this.props, Item.allowedProps);
-    const {
-      as,
-      children,
-      withVisualDebug,
-      textAlign,
-      size,
-      direction,
-      margin,
-      padding,
-      overflowX,
-      overflowY,
-      styles
-    } = this.props;
-    const dirColumn = direction === 'column';
-    const dirRow = direction === 'row';
-    return (0, _jsxRuntime.jsx)(_latest.View, {
-      ...props,
-      css: styles?.flexItem,
-      elementRef: this.handleRef,
-      as: as,
-      minHeight: dirColumn ? size : undefined,
-      minWidth: dirRow ? size : undefined,
-      textAlign: textAlign,
-      margin: margin,
-      padding: padding,
-      overflowX: overflowX,
-      overflowY: overflowY || (dirColumn ? 'auto' : 'visible'),
-      withVisualDebug: withVisualDebug,
-      children: children
-    });
-  }
-}) || _class);
-var _default = exports.default = Item;

package/lib/Flex/v2/Item/props.js

@@ -1,31 +0,0 @@
-"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', 'as', 'elementRef', 'margin', 'padding', 'align', 'direction', 'textAlign', 'overflowX', 'overflowY', 'shouldGrow', 'shouldShrink', 'size', 'withVisualDebug', 'order'];

package/lib/Flex/v2/Item/styles.js

@@ -1,76 +0,0 @@
-"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 = (_componentTheme, props) => {
-  const {
-    shouldGrow,
-    shouldShrink,
-    align,
-    size,
-    order
-  } = props;
-  const alignSelfValues = {
-    start: 'flex-start',
-    end: 'flex-end',
-    center: 'center',
-    stretch: 'stretch'
-  };
-  return {
-    flexItem: {
-      label: 'flexItem',
-      boxSizing: 'border-box',
-      minWidth: '0.0625rem',
-      flexBasis: size,
-      ...(order !== undefined ? {
-        order
-      } : {}),
-      // initial value is 1, but we want 0 as our default,
-      // so users can opt in to shrink like they do grow
-      flexShrink: shouldShrink ? 1 : 0,
-      ...(shouldGrow && {
-        flexGrow: 1
-      }),
-      ...(align && {
-        alignSelf: alignSelfValues[align]
-      })
-    }
-  };
-};
-var _default = exports.default = generateStyle;

package/lib/Flex/v2/index.js

@@ -1,137 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Flex = void 0;
-Object.defineProperty(exports, "FlexItem", {
-  enumerable: true,
-  get: function () {
-    return _Item.Item;
-  }
-});
-exports.default = void 0;
-var _react = require("react");
-var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
-var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-var _latest = require("@instructure/ui-view/latest");
-var _emotion = require("@instructure/emotion");
-var _Item = require("./Item");
-var _styles = _interopRequireDefault(require("./styles"));
-var _props = require("./props");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class;
-/*
- * 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
----
-@module Flex
-**/
-let Flex = exports.Flex = (_dec = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = class Flex extends _react.Component {
-  static displayName = "Flex";
-  static componentId = 'Flex';
-  componentDidMount() {
-    this.props.makeStyles?.();
-  }
-  componentDidUpdate() {
-    this.props.makeStyles?.();
-  }
-  static Item = _Item.Item;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    as: 'span',
-    direction: 'row',
-    justifyItems: 'start',
-    display: 'flex',
-    withVisualDebug: false,
-    wrap: 'no-wrap',
-    gap: 'none'
-  };
-  ref = null;
-  handleRef = el => {
-    const {
-      elementRef
-    } = this.props;
-    this.ref = el;
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-  renderChildren(children) {
-    // TODO this might fail if children are () => ReactNode
-    return _react.Children.map(children, child => {
-      if (!child) {
-        return null;
-      }
-      return (0, _matchComponentTypes.matchComponentTypes)(child, ['Item']) ? (0, _safeCloneElement.safeCloneElement)(child, {
-        // child withVisualDebug prop should override parent
-        withVisualDebug: this.props.withVisualDebug,
-        ...child.props,
-        direction: this.props.direction.replace(/-reverse/, '')
-      }) : child;
-    });
-  }
-  render() {
-    const {
-      as,
-      withVisualDebug,
-      height,
-      display,
-      margin,
-      padding,
-      textAlign,
-      width,
-      styles,
-      gap,
-      wrap
-    } = this.props;
-    const children = (0, _callRenderProp.callRenderProp)(this.props.children);
-    const gapValuesArray = gap?.split(' ');
-    if (gapValuesArray.length > 1 && wrap === 'no-wrap') {}
-    if (children && _react.Children.count(children) > 0) {
-      return (0, _jsxRuntime.jsx)(_latest.View, {
-        ...(0, _passthroughProps.passthroughProps)(this.props),
-        css: styles?.flex,
-        elementRef: this.handleRef,
-        as: as,
-        display: display,
-        width: width,
-        height: height,
-        margin: margin,
-        padding: padding,
-        textAlign: textAlign,
-        withVisualDebug: withVisualDebug,
-        children: this.renderChildren(children)
-      });
-    } else {
-      return null;
-    }
-  }
-}) || _class);
-var _default = exports.default = Flex;

package/lib/Flex/v2/props.js

@@ -1,31 +0,0 @@
-"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', 'as', 'elementRef', 'height', 'width', 'margin', 'padding', 'display', 'textAlign', 'direction', 'alignItems', 'justifyItems', 'wrap', 'withVisualDebug'];

package/lib/Flex/v2/styles.js

@@ -1,109 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("@instructure/emotion");
-/*
- * 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  {string} props.justifyItems
- * @param  {string} props.direction
- * @param  {string} props.alignItems
- * @param  {string} props.wrap
- * @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 = (componentTheme, props, sharedTokens) => {
-  const {
-    justifyItems,
-    wrap,
-    direction,
-    gap
-  } = props;
-
-  // align-items css prop
-  // When flex direction is row, 'center' is the most useful default because it
-  // vertically aligns Items. For column direction, though, we want 'stretch'.
-  const alignItems = props.alignItems || (direction === 'column' || direction === 'column-reverse' ? 'stretch' : 'center');
-  const alignItemsValues = {
-    center: 'center',
-    start: 'flex-start',
-    end: 'flex-end',
-    stretch: 'stretch'
-  };
-
-  // justify-content css prop
-  const justifyItemsValues = {
-    start: 'flex-start',
-    end: 'flex-end',
-    center: 'center',
-    'space-around': 'space-around',
-    'space-between': 'space-between'
-  };
-
-  // wrap css prop
-  const wrapValues = {
-    wrap: 'wrap',
-    'wrap-reverse': 'wrap-reverse',
-    'no-wrap': undefined
-  };
-
-  // flex-direction css props
-  const flexDirectionValues = {
-    column: 'column',
-    'column-reverse': 'column-reverse',
-    row: 'row',
-    'row-reverse': 'row-reverse'
-  };
-
-  // gap css prop
-  const gapValues = (0, _emotion.makeThemeVars)('gap', {
-    ...sharedTokens.spacing,
-    ...sharedTokens.legacy.spacing
-  });
-  const getGapValue = (gap, values) => (0, _emotion.getShorthandPropValue)('Flex', values, gap, 'gap');
-  return {
-    flex: {
-      label: 'flex',
-      fontFamily: componentTheme.fontFamily,
-      boxSizing: 'border-box',
-      alignItems: alignItemsValues[alignItems],
-      justifyContent: justifyItemsValues[justifyItems],
-      flexWrap: wrapValues[wrap],
-      flexDirection: flexDirectionValues[direction],
-      gap: getGapValue(gap, gapValues)
-    }
-  };
-};
-var _default = exports.default = generateStyle;

package/lib/exports/a.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Flex", {
-  enumerable: true,
-  get: function () {
-    return _v.Flex;
-  }
-});
-Object.defineProperty(exports, "FlexItem", {
-  enumerable: true,
-  get: function () {
-    return _v.FlexItem;
-  }
-});
-var _v = require("../Flex/v1");

package/lib/exports/b.js

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

package/lib/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}