UNPKG

@chakra-ui/layout

Version:

Chakra UI layout components that give you massive speed

1 lines 5.22 kB
{"version":3,"sources":["../src/list.tsx"],"sourcesContent":["import { Icon, IconProps } from \"@chakra-ui/icon\"\nimport { createContext } from \"@chakra-ui/react-context\"\nimport { getValidChildren } from \"@chakra-ui/react-children-utils\"\nimport type {\n HTMLChakraProps,\n SystemProps,\n ThemingProps,\n} from \"@chakra-ui/system\"\nimport {\n chakra,\n forwardRef,\n omitThemingProps,\n SystemStyleObject,\n useMultiStyleConfig,\n} from \"@chakra-ui/system\"\n\nconst [ListStylesProvider, useListStyles] = createContext<\n Record<string, SystemStyleObject>\n>({\n name: `ListStylesContext`,\n errorMessage: `useListStyles returned is 'undefined'. Seems you forgot to wrap the components in \"<List />\" `,\n})\n\nexport { useListStyles }\n\ninterface ListOptions {\n /**\n * Shorthand prop for `listStyleType`\n * @type SystemProps[\"listStyleType\"]\n */\n styleType?: SystemProps[\"listStyleType\"]\n /**\n * Shorthand prop for `listStylePosition`\n * @type SystemProps[\"listStylePosition\"]\n */\n stylePosition?: SystemProps[\"listStylePosition\"]\n /**\n * The space between each list item\n * @type SystemProps[\"margin\"]\n */\n spacing?: SystemProps[\"margin\"]\n}\n\nexport interface ListProps\n extends HTMLChakraProps<\"ul\">,\n ThemingProps<\"List\">,\n ListOptions {}\n\n/**\n * List is used to display list items, it renders a `<ul>` by default.\n *\n * @see Docs https://chakra-ui.com/list\n */\nexport const List = forwardRef<ListProps, \"ul\">(function List(props, ref) {\n const styles = useMultiStyleConfig(\"List\", props)\n const {\n children,\n styleType = \"none\",\n stylePosition,\n spacing,\n ...rest\n } = omitThemingProps(props)\n\n const validChildren = getValidChildren(children)\n\n const selector = \"& > *:not(style) ~ *:not(style)\"\n\n const spacingStyle = spacing ? { [selector]: { mt: spacing } } : {}\n\n return (\n <ListStylesProvider value={styles}>\n <chakra.ul\n ref={ref}\n listStyleType={styleType}\n listStylePosition={stylePosition}\n /**\n * We added this role to fix the Safari accessibility issue with list-style-type: none\n * @see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html\n */\n role=\"list\"\n __css={{ ...styles.container, ...spacingStyle }}\n {...rest}\n >\n {validChildren}\n </chakra.ul>\n </ListStylesProvider>\n )\n})\n\nList.displayName = \"List\"\n\nexport const OrderedList = forwardRef<ListProps, \"ol\">((props, ref) => {\n const { as, ...rest } = props\n return (\n <List ref={ref} as=\"ol\" styleType=\"decimal\" marginStart=\"1em\" {...rest} />\n )\n})\n\nOrderedList.displayName = \"OrderedList\"\n\nexport const UnorderedList = forwardRef<ListProps, \"ul\">(function UnorderedList(\n props,\n ref,\n) {\n const { as, ...rest } = props\n return (\n <List ref={ref} as=\"ul\" styleType=\"initial\" marginStart=\"1em\" {...rest} />\n )\n})\n\nUnorderedList.displayName = \"UnorderedList\"\n\nexport interface ListItemProps extends HTMLChakraProps<\"li\"> {}\n\n/**\n * ListItem\n *\n * Used to render a list item\n */\nexport const ListItem = forwardRef<ListItemProps, \"li\">(function ListItem(\n props,\n ref,\n) {\n const styles = useListStyles()\n\n return <chakra.li ref={ref} {...props} __css={styles.item} />\n})\n\nListItem.displayName = \"ListItem\"\n\n/**\n * ListIcon\n *\n * Used to render an icon beside the list item text\n */\nexport const ListIcon = forwardRef<IconProps, \"svg\">(function ListIcon(\n props,\n ref,\n) {\n const styles = useListStyles()\n\n return <Icon ref={ref} role=\"presentation\" {...props} __css={styles.icon} />\n})\n\nListIcon.displayName = \"ListIcon\"\n"],"mappings":";;;AAAA,SAAS,YAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAMjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAyDD;AAvDN,IAAM,CAAC,oBAAoB,aAAa,IAAI,cAE1C;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAgCM,IAAM,OAAO,WAA4B,SAASA,MAAK,OAAO,KAAK;AACxE,QAAM,SAAS,oBAAoB,QAAQ,KAAK;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,KAAK;AAE1B,QAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,QAAM,WAAW;AAEjB,QAAM,eAAe,UAAU,EAAE,CAAC,QAAQ,GAAG,EAAE,IAAI,QAAQ,EAAE,IAAI,CAAC;AAElE,SACE,oBAAC,sBAAmB,OAAO,QACzB;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,eAAe;AAAA,MACf,mBAAmB;AAAA,MAKnB,MAAK;AAAA,MACL,OAAO,EAAE,GAAG,OAAO,WAAW,GAAG,aAAa;AAAA,MAC7C,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,KAAK,cAAc;AAEZ,IAAM,cAAc,WAA4B,CAAC,OAAO,QAAQ;AACrE,QAAM,EAAE,IAAI,GAAG,KAAK,IAAI;AACxB,SACE,oBAAC,QAAK,KAAU,IAAG,MAAK,WAAU,WAAU,aAAY,OAAO,GAAG,MAAM;AAE5E,CAAC;AAED,YAAY,cAAc;AAEnB,IAAM,gBAAgB,WAA4B,SAASC,eAChE,OACA,KACA;AACA,QAAM,EAAE,IAAI,GAAG,KAAK,IAAI;AACxB,SACE,oBAAC,QAAK,KAAU,IAAG,MAAK,WAAU,WAAU,aAAY,OAAO,GAAG,MAAM;AAE5E,CAAC;AAED,cAAc,cAAc;AASrB,IAAM,WAAW,WAAgC,SAASC,UAC/D,OACA,KACA;AACA,QAAM,SAAS,cAAc;AAE7B,SAAO,oBAAC,OAAO,IAAP,EAAU,KAAW,GAAG,OAAO,OAAO,OAAO,MAAM;AAC7D,CAAC;AAED,SAAS,cAAc;AAOhB,IAAM,WAAW,WAA6B,SAASC,UAC5D,OACA,KACA;AACA,QAAM,SAAS,cAAc;AAE7B,SAAO,oBAAC,QAAK,KAAU,MAAK,gBAAgB,GAAG,OAAO,OAAO,OAAO,MAAM;AAC5E,CAAC;AAED,SAAS,cAAc;","names":["List","UnorderedList","ListItem","ListIcon"]}