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

package/src/List/v2/index.tsx

@@ -0,0 +1,109 @@
+/*
+ * 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 { Children, Component, ReactElement } from 'react'
+
+import { View } from '@instructure/ui-view/latest'
+import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
+import { withStyle } from '@instructure/emotion'
+
+import { ListItem } from './ListItem'
+import generateStyle from './styles'
+import { allowedProps } from './props'
+import type { ListProps } from './props'
+
+/**
+---
+category: components
+---
+**/
+@withStyle(generateStyle)
+class List extends Component<ListProps> {
+  static readonly componentId = 'List'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    as: 'ul',
+    delimiter: 'none',
+    isUnstyled: false,
+    size: 'medium',
+    itemSpacing: 'none'
+  }
+
+  static Item = ListItem
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  renderChildren() {
+    return Children.map(this.props.children, (child) => {
+      if (!child) return // ignore null, falsy children
+
+      return safeCloneElement(child as ReactElement, {
+        isUnstyled: this.props.isUnstyled,
+        delimiter: this.props.delimiter,
+        size: this.props.size,
+        spacing: this.props.itemSpacing
+      })
+    })
+  }
+
+  render() {
+    const { as, margin, isUnstyled, elementRef, styles, ...rest } = this.props
+
+    return (
+      <View
+        {...passthroughProps(rest)}
+        css={styles?.list}
+        as={as}
+        margin={margin}
+        elementRef={this.handleRef}
+        display="block"
+        data-cid="List"
+      >
+        {this.renderChildren()}
+      </View>
+    )
+  }
+}
+
+export default List
+export { List, ListItem }

package/src/List/v2/props.ts

@@ -0,0 +1,95 @@
+/*
+ * 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 React from 'react'
+
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type { ListTheme, OtherHTMLAttributes } from '@instructure/shared-types'
+
+type ListOwnProps = {
+  /**
+   * Only accepts `<List.Item>` as a child
+   */
+  children?: React.ReactNode // TODO: oneOf([ListItem])
+  as?: 'ul' | 'ol'
+  /**
+   * One of: none, dashed, solid
+   */
+  delimiter?: 'none' | 'dashed' | 'solid'
+  /**
+   * When set, renders the List Items without a list style type.
+   */
+  isUnstyled?: boolean
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
+  margin?: Spacing
+  size?: 'small' | 'medium' | 'large'
+  /**
+   * Sets the margin separating each ListItem.
+   */
+  itemSpacing?:
+    | 'none'
+    | 'xxx-small'
+    | 'xx-small'
+    | 'x-small'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'x-large'
+    | 'xx-large'
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
+}
+
+type PropKeys = keyof ListOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ListProps = ListOwnProps &
+  WithStyleProps<ListTheme, ListStyle> &
+  OtherHTMLAttributes<ListOwnProps>
+
+type ListStyle = ComponentStyle<'list'>
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'as',
+  'delimiter',
+  'isUnstyled',
+  'margin',
+  'size',
+  'itemSpacing',
+  'elementRef'
+]
+
+export type { ListProps, ListStyle }
+export { allowedProps }

package/src/List/v2/styles.ts

@@ -0,0 +1,77 @@
+/*
+ * 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 type { ListProps, ListStyle } from './props'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+
+/**
+ * ---
+ * 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: NewComponentTypes['List'],
+  props: ListProps
+): ListStyle => {
+  const { isUnstyled, as } = props
+
+  const ordered = as === 'ol'
+
+  return {
+    list: {
+      label: 'list',
+      paddingInlineStart: componentTheme.listPadding,
+      paddingInlineEnd: 0,
+
+      ...(ordered && {
+        listStyleType: 'none',
+        // 1.3 rem is removed to have the ordered list start at the same point
+        // as the unordered vertically
+        paddingInlineStart: `calc(${componentTheme.listPadding} - 1.3rem)`,
+        paddingInlineEnd: 0,
+        counterReset: 'ol-counter',
+
+        '&>li::before': {
+          fontWeight: componentTheme.orderedNumberFontWeight,
+          counterIncrement: 'ol-counter',
+          content: 'counters(ol-counter, ".") "."',
+          marginInlineEnd: componentTheme.orderedNumberMargin,
+          marginInlineStart: 0
+        }
+      }),
+
+      ...(isUnstyled && {
+        listStyleType: 'none',
+        paddingInlineStart: 0
+      })
+    }
+  }
+}
+
+export default generateStyle

package/src/exports/a.ts

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+export { InlineList } from '../InlineList/v1'
+export { List, ListItem } from '../List/v1'
+export { InlineListItem } from '../InlineList/v1/InlineListItem'
+
+export type { InlineListProps } from '../InlineList/v1/props'
+export type { InlineListItemProps } from '../InlineList/v1/InlineListItem/props'
+export type { ListProps } from '../List/v1/props'
+export type { ListItemProps } from '../List/v1/ListItem/props'

package/src/exports/b.ts

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+export { InlineList } from '../InlineList/v2'
+export { List, ListItem } from '../List/v2'
+export { InlineListItem } from '../InlineList/v2/InlineListItem'
+
+export type { InlineListProps } from '../InlineList/v2/props'
+export type { InlineListItemProps } from '../InlineList/v2/InlineListItem/props'
+export type { ListProps } from '../List/v2/props'
+export type { ListItemProps } from '../List/v2/ListItem/props'